diff options
Diffstat (limited to 'mascara/src/app/first-time/create-password-screen.js')
-rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 112 |
1 files changed, 79 insertions, 33 deletions
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 4b4cea51d..e4b0425ce 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,46 +1,92 @@ import React, {Component, PropTypes} from 'react' +import {connect} from 'react-redux'; +import {createNewVaultAndKeychain} from '../../../../ui/app/actions' +import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' -export default class CreatePasswordScreen extends Component { +class CreatePasswordScreen extends Component { + static propTypes = { + isLoading: PropTypes.bool.isRequired, + createAccount: PropTypes.func.isRequired, + next: PropTypes.func.isRequired + } state = { password: '', confirmPassword: '' } + isValid() { + const {password, confirmPassword} = this.state; + + if (!password || !confirmPassword) { + return false; + } + + if (password.length < 8) { + return false; + } + + return password === confirmPassword; + } + + createAccount = () => { + if (!this.isValid()) { + return; + } + + const {password} = this.state; + const {createAccount, next} = this.props; + + createAccount(password) + .then(next); + } + render() { - return ( - <div className="create-password"> - <div className="create-password__title"> - Create Password + const { isLoading } = this.props + + return isLoading + ? <LoadingScreen loadingMessage="Creating your new account" /> + : ( + <div className="create-password"> + <div className="create-password__title"> + Create Password + </div> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.setState({password: e.target.value})} + /> + <input + className="first-time-flow__input create-password__confirm-input" + type="password" + placeholder="Confirm Password" + onChange={e => this.setState({confirmPassword: e.target.value})} + /> + <button + className="first-time-flow__button" + disabled={!this.isValid()} + onClick={this.createAccount} + > + Create + </button> + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => e.preventDefault()} + > + Import an account + </a> + <Breadcrumbs total={3} currentIndex={0} /> </div> - <input - className="first-time-flow__input" - type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} - /> - <input - className="first-time-flow__input create-password__confirm-input" - type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} - /> - <button - className="first-time-flow__button" - > - Create - </button> - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => e.preventDefault()} - > - Import an account - </a> - <Breadcrumbs total={3} currentIndex={0} /> - </div> - ) + ) } +} -}
\ No newline at end of file +export default connect( + ({ appState: { isLoading } }) => ({ isLoading }), + dispatch => ({ + createAccount: password => dispatch(createNewVaultAndKeychain(password)) + }) +)(CreatePasswordScreen) |