Add UniqueImageScreen

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)