From 5ec631cad34a31a1268c990f0b952453ce97090b Mon Sep 17 00:00:00 2001 From: Paul Bouchon Date: Mon, 30 Apr 2018 18:07:25 -0400 Subject: Handle Promise rejections when importing accounts (#4142) * Silently catch import failures since errors exist in Redux state * Add comment about no-op catch statement --- mascara/src/app/first-time/import-account-screen.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'mascara/src/app/first-time') diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js index ab0aca0f0..555a26386 100644 --- a/mascara/src/app/first-time/import-account-screen.js +++ b/mascara/src/app/first-time/import-account-screen.js @@ -70,10 +70,14 @@ class ImportAccountScreen extends Component { switch (this.state.selectedOption) { case OPTIONS.JSON_FILE: return importNewAccount('JSON File', [ jsonFile, password ]) + // JS runtime requires caught rejections but failures are handled by Redux + .catch() .then(next) case OPTIONS.PRIVATE_KEY: default: return importNewAccount('Private Key', [ privateKey ]) + // JS runtime requires caught rejections but failures are handled by Redux + .catch() .then(next) } } -- cgit From 2381c0e0f461304265279155176fa655e2eb97b4 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 10 May 2018 16:51:26 -0700 Subject: Add new unlock screen design --- mascara/src/app/first-time/index.css | 1 + mascara/src/app/first-time/index.js | 56 ++++++++++++++++++++++++++---------- 2 files changed, 42 insertions(+), 15 deletions(-) (limited to 'mascara/src/app/first-time') diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 5f8bbd4be..dffc21017 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -21,6 +21,7 @@ display: flex; justify-content: center; background: #f7861c; + flex: 0 0 auto; } .alpha-warning, diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 01e5d67a6..dc254bb19 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -3,6 +3,8 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { withRouter, Switch, Route } from 'react-router-dom' import { compose } from 'recompose' +import classnames from 'classnames' + import CreatePasswordScreen from './create-password-screen' import UniqueImageScreen from './unique-image-screen' import NoticeScreen from './notice-screen' @@ -33,6 +35,7 @@ class FirstTimeFlow extends Component { isUnlocked: PropTypes.bool, history: PropTypes.object, welcomeScreenSeen: PropTypes.bool, + isPopup: PropTypes.bool, }; static defaultProps = { @@ -41,23 +44,44 @@ class FirstTimeFlow extends Component { noActiveNotices: false, }; + renderAppBar () { + const { welcomeScreenSeen } = this.props + + return ( +
+

+ Please be aware that this version is still under development +

+
+ ) + } + render () { + const { isPopup } = this.props + return ( -
- - - - - - - - - - +
+ { !isPopup && this.renderAppBar() } +
+ + + + + + + + + + +
) } @@ -73,6 +97,7 @@ const mapStateToProps = ({ metamask }) => { isMascara, isUnlocked, welcomeScreenSeen, + isPopup, } = metamask return { @@ -84,6 +109,7 @@ const mapStateToProps = ({ metamask }) => { forgottenPassword, isUnlocked, welcomeScreenSeen, + isPopup, } } -- cgit From 0bcfbc15446b01b3b87233715cd3ead42d2730e4 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 12 May 2018 20:53:40 -0700 Subject: Add error message when passwords don't match in first time flow. Change input field styling in first time flow --- .../src/app/first-time/create-password-screen.js | 133 ++++++++----------- .../app/first-time/import-seed-phrase-screen.js | 146 ++++++++++++--------- mascara/src/app/first-time/index.css | 33 ++--- 3 files changed, 145 insertions(+), 167 deletions(-) (limited to 'mascara/src/app/first-time') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 6ec05e11d..99d210ed1 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -13,8 +13,13 @@ import { INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_NOTICE_ROUTE, } from '../../../../ui/app/routes' +import TextField from '../../../../ui/app/components/text-field' class CreatePasswordScreen extends Component { + static contextTypes = { + t: PropTypes.func, + } + static propTypes = { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, @@ -27,6 +32,8 @@ class CreatePasswordScreen extends Component { state = { password: '', confirmPassword: '', + passwordError: null, + confirmPasswordError: null, } constructor (props) { @@ -69,82 +76,37 @@ class CreatePasswordScreen extends Component { .then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)) } - renderFields () { - const { isMascara, history } = this.props + handlePasswordChange (password) { + const { confirmPassword } = this.state + let confirmPasswordError = null + let passwordError = null - return ( -
-
- {isMascara &&
- -
- MetaMask is a secure identity vault for Ethereum. -
-
- It allows you to hold ether & tokens, and interact with decentralized applications. -
-
} -
-
- Create Password -
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - { - e.preventDefault() - history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) - }} - > - Import with seed phrase - - { /* } - { - e.preventDefault() - history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) - }} - > - Import an account - - { */ } - -
-
-
- ) + if (password && password.length < 8) { + passwordError = this.context.t('passwordNotLongEnough') + } + + if (confirmPassword && password !== confirmPassword) { + confirmPasswordError = this.context.t('passwordsDontMatch') + } + + this.setState({ password, passwordError, confirmPasswordError }) + } + + handleConfirmPasswordChange (confirmPassword) { + const { password } = this.state + let confirmPasswordError = null + + if (password !== confirmPassword) { + confirmPasswordError = this.context.t('passwordsDontMatch') + } + + this.setState({ confirmPassword, confirmPasswordError }) } render () { const { history, isMascara } = this.props + const { passwordError, confirmPasswordError } = this.state + const { t } = this.context return (
@@ -169,17 +131,30 @@ class CreatePasswordScreen extends Component {
Create Password
- this.setState({password: e.target.value})} + className="first-time-flow__input" + value={this.state.password} + onChange={event => this.handlePasswordChange(event.target.value)} + error={passwordError} + autoFocus + autoComplete="new-password" + margin="normal" + fullWidth /> - this.setState({confirmPassword: e.target.value})} + className="first-time-flow__input" + value={this.state.confirmPassword} + onChange={event => this.handleConfirmPasswordChange(event.target.value)} + error={confirmPasswordError} + autoComplete="confirm-password" + margin="normal" + fullWidth />