From dde39e82b5723ba8056b73f0f823d40c3e702a99 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 4 Dec 2017 01:24:30 -0500
Subject: Add routes for mascara

---
 .../src/app/first-time/create-password-screen.js   | 144 +++++++++++----------
 1 file changed, 75 insertions(+), 69 deletions(-)

(limited to 'mascara/src/app/first-time/create-password-screen.js')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 2f4b81e7c..102d8a7c3 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,103 +1,109 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
-import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import { createNewVaultAndKeychain } from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
+import { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes'
 
 class CreatePasswordScreen extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
     createAccount: PropTypes.func.isRequired,
-    goToImportWithSeedPhrase: PropTypes.func.isRequired,
-    goToImportAccount: PropTypes.func.isRequired,
-    next: PropTypes.func.isRequired
+    history: PropTypes.object.isRequired,
   }
 
   state = {
     password: '',
-    confirmPassword: ''
+    confirmPassword: '',
   }
 
-  isValid() {
-    const {password, confirmPassword} = this.state;
+  isValid () {
+    const { password, confirmPassword } = this.state
 
     if (!password || !confirmPassword) {
-      return false;
+      return false
     }
 
     if (password.length < 8) {
-      return false;
+      return false
     }
 
-    return password === confirmPassword;
+    return password === confirmPassword
   }
 
   createAccount = () => {
     if (!this.isValid()) {
-      return;
+      return
     }
 
-    const {password} = this.state;
-    const {createAccount, next} = this.props;
+    const { password } = this.state
+    const { createAccount, history } = this.props
 
     createAccount(password)
-      .then(next);
+      .then(() => history.push(DEFAULT_ROUTE))
   }
 
-  render() {
-    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
+  render () {
+    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()
-              goToImportWithSeedPhrase()
-            }}
-          >
-            Import with seed phrase
-          </a>
-          { /* }
-          <a
-            href=""
-            className="first-time-flow__link create-password__import-link"
-            onClick={e => {
-              e.preventDefault()
-              goToImportAccount()
-            }}
-          >
-            Import an account
-          </a>
-          { */ }
-          <Breadcrumbs total={3} currentIndex={0} />
-        </div>
-      )
+    return (
+      <div className="first-time-flow">
+      {
+        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()
+                  history.push(IMPORT_ACCOUNT_ROUTE)
+                }}
+              >
+                Import with seed phrase
+              </a>
+              { /* }
+              <a
+                href=""
+                className="first-time-flow__link create-password__import-link"
+                onClick={e => {
+                  e.preventDefault()
+                  goToImportAccount()
+                }}
+              >
+                Import an account
+              </a>
+              { */ }
+              <Breadcrumbs total={3} currentIndex={0} />
+            </div>
+          )
+      }
+      </div>
+    )
   }
 }
 
-- 
cgit