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

---
 mascara/src/app/first-time/backup-phrase-screen.js |  79 ++++++-----
 .../src/app/first-time/create-password-screen.js   | 144 +++++++++++----------
 mascara/src/app/first-time/index.css               |   5 +-
 mascara/src/app/first-time/notice-screen.js        |  87 +++++++------
 4 files changed, 173 insertions(+), 142 deletions(-)

(limited to 'mascara/src')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c68dacea2..266a82cdb 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
 import {compose, onlyUpdateForPropTypes} from 'recompose'
@@ -7,6 +8,7 @@ import Identicon from '../../../../ui/app/components/identicon'
 import {confirmSeedWords} from '../../../../ui/app/actions'
 import Breadcrumbs from './breadcrumbs'
 import LoadingScreen from './loading-screen'
+import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
 
 const LockIcon = props => (
   <svg
@@ -35,27 +37,27 @@ const LockIcon = props => (
       />
     </g>
   </svg>
-);
+)
 
 class BackupPhraseScreen extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
     address: PropTypes.string.isRequired,
-    seedWords: PropTypes.string.isRequired,
-    next: PropTypes.func.isRequired,
+    seedWords: PropTypes.string,
     confirmSeedWords: PropTypes.func.isRequired,
+    history: PropTypes.object,
   };
 
   static defaultProps = {
-    seedWords: ''
-  };
+    seedWords: '',
+  }
 
   static PAGE = {
     SECRET: 'secret',
-    CONFIRM: 'confirm'
-  };
+    CONFIRM: 'confirm',
+  }
 
-  constructor(props) {
+  constructor (props) {
     const {seedWords} = props
     super(props)
     this.state = {
@@ -66,13 +68,20 @@ class BackupPhraseScreen extends Component {
     }
   }
 
+  componentWillMount () {
+    const { seedWords, history } = this.props
+    if (!seedWords) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
   renderSecretWordsContainer () {
     const { isShowingSecret } = this.state
 
     return (
       <div className="backup-phrase__secret">
         <div className={classnames('backup-phrase__secret-words', {
-          'backup-phrase__secret-words--hidden': !isShowingSecret
+          'backup-phrase__secret-words--hidden': !isShowingSecret,
         })}>
           {this.props.seedWords}
         </div>
@@ -88,10 +97,10 @@ class BackupPhraseScreen extends Component {
           </div>
         )}
       </div>
-    );
+    )
   }
 
-  renderSecretScreen() {
+  renderSecretScreen () {
     const { isShowingSecret } = this.state
 
     return (
@@ -109,7 +118,7 @@ class BackupPhraseScreen extends Component {
             className="first-time-flow__button"
             onClick={() => isShowingSecret && this.setState({
               isShowingSecret: false,
-              page: BackupPhraseScreen.PAGE.CONFIRM
+              page: BackupPhraseScreen.PAGE.CONFIRM,
             })}
             disabled={!isShowingSecret}
           >
@@ -133,9 +142,9 @@ class BackupPhraseScreen extends Component {
     )
   }
 
-  renderConfirmationScreen() {
-    const { seedWords, confirmSeedWords, next } = this.props;
-    const { selectedSeeds, shuffledSeeds } = this.state;
+  renderConfirmationScreen () {
+    const { seedWords, confirmSeedWords, history } = this.props
+    const { selectedSeeds, shuffledSeeds } = this.state
     const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
 
     return (
@@ -165,17 +174,17 @@ class BackupPhraseScreen extends Component {
                 <button
                   key={i}
                   className={classnames('backup-phrase__confirm-seed-option', {
-                    'backup-phrase__confirm-seed-option--selected': isSelected
+                    'backup-phrase__confirm-seed-option--selected': isSelected,
                   })}
                   onClick={() => {
                     if (!isSelected) {
                       this.setState({
-                        selectedSeeds: [...selectedSeeds, [i, word]]
+                        selectedSeeds: [...selectedSeeds, [i, word]],
                       })
                     } else {
                       this.setState({
                         selectedSeeds: selectedSeeds
-                          .filter(([index, seed]) => !(seed === word && index === i))
+                          .filter(([index, seed]) => !(seed === word && index === i)),
                       })
                     }
                   }}
@@ -187,14 +196,14 @@ class BackupPhraseScreen extends Component {
           </div>
           <button
             className="first-time-flow__button"
-            onClick={() => isValid && confirmSeedWords().then(next)}
+            onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))}
             disabled={!isValid}
           >
             Confirm
           </button>
         </div>
       </div>
-    ) 
+    )
   }
 
   renderBack () {
@@ -205,7 +214,7 @@ class BackupPhraseScreen extends Component {
           onClick={e => {
             e.preventDefault()
             this.setState({
-              page: BackupPhraseScreen.PAGE.SECRET
+              page: BackupPhraseScreen.PAGE.SECRET,
             })
           }}
           href="#"
@@ -227,15 +236,21 @@ class BackupPhraseScreen extends Component {
   }
 
   render () {
-    return this.props.isLoading
-      ? <LoadingScreen loadingMessage="Creating your new account" />
-      : (
-        <div className="backup-phrase">
-          {this.renderBack()}
-          <Identicon address={this.props.address} diameter={70} />
-          {this.renderContent()}
-        </div>
-      )
+    return (
+      <div className="first-time-flow">
+      {
+        this.props.isLoading
+          ? <LoadingScreen loadingMessage="Creating your new account" />
+          : (
+            <div className="backup-phrase">
+              {this.renderBack()}
+              <Identicon address={this.props.address} diameter={70} />
+              {this.renderContent()}
+            </div>
+          )
+      }
+      </div>
+    )
   }
 }
 
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>
+    )
   }
 }
 
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 28aa3060a..157989d07 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -75,7 +75,7 @@
 
   .backup-phrase__tips {
     margin: 40px 0 !important;
-    width: initial !important; 
+    width: initial !important;
   }
 
   .backup-phrase__confirm-secret,
@@ -337,7 +337,7 @@ button.backup-phrase__confirm-seed-option:hover {
   padding: 14px 21px;
   appearance: none;
   -webkit-appearance: none;
-  -moz-appearance: none; 
+  -moz-appearance: none;
   cursor: pointer;
 }
 
@@ -540,6 +540,7 @@ button.backup-phrase__confirm-seed-option:hover {
   text-transform: uppercase;
   margin: 35px 0 14px;
   transition: 200ms ease-in-out;
+  background: #f7861c;
 }
 
 button.first-time-flow__button[disabled] {
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d09070a95..be54b9fc0 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,10 +1,12 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Markdown from 'react-markdown'
-import {connect} from 'react-redux'
+import { connect } from 'react-redux'
 import debounce from 'lodash.debounce'
-import {markNoticeRead} from '../../../../ui/app/actions'
+import { markNoticeRead } from '../../../../ui/app/actions'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
+import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
 
 class NoticeScreen extends Component {
   static propTypes = {
@@ -12,70 +14,77 @@ class NoticeScreen extends Component {
     lastUnreadNotice: PropTypes.shape({
       title: PropTypes.string,
       date: PropTypes.string,
-      body: PropTypes.string
+      body: PropTypes.string,
     }),
-    next: PropTypes.func.isRequired
+    location: PropTypes.shape({
+      state: PropTypes.shape({
+        next: PropTypes.func.isRequired,
+      }),
+    }),
+    markNoticeRead: PropTypes.func,
+    history: PropTypes.object,
   };
 
   static defaultProps = {
-    lastUnreadNotice: {}
+    lastUnreadNotice: {},
   };
 
   state = {
     atBottom: false,
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.onScroll()
   }
 
   acceptTerms = () => {
-    const { markNoticeRead, lastUnreadNotice, next } = this.props;
-    const defer = markNoticeRead(lastUnreadNotice)
-      .then(() => this.setState({ atBottom: false }))
-
-    if ((/terms/gi).test(lastUnreadNotice.title)) {
-      defer.then(next)
-    }
+    const { markNoticeRead, lastUnreadNotice, history } = this.props
+    markNoticeRead(lastUnreadNotice)
+      .then(() => {
+        history.push(DEFAULT_ROUTE)
+        this.setState({ atBottom: false })
+      })
   }
 
   onScroll = debounce(() => {
     if (this.state.atBottom) return
 
     const target = document.querySelector('.tou__body')
-    const {scrollTop, offsetHeight, scrollHeight} = target;
-    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+    const {scrollTop, offsetHeight, scrollHeight} = target
+    const atBottom = scrollTop + offsetHeight >= scrollHeight
 
     this.setState({atBottom: atBottom})
   }, 25)
 
-  render() {
+  render () {
     const {
       address,
-      lastUnreadNotice: { title, body }
-    } = this.props;
+      lastUnreadNotice: { title, body },
+    } = this.props
     const { atBottom } = this.state
 
     return (
-      <div
-        className="tou"
-        onScroll={this.onScroll}
-      >
-        <Identicon address={address} diameter={70} />
-        <div className="tou__title">{title}</div>
-        <Markdown
-          className="tou__body markdown"
-          source={body}
-          skipHtml
-        />
-        <button
-          className="first-time-flow__button"
-          onClick={atBottom && this.acceptTerms}
-          disabled={!atBottom}
+      <div className="first-time-flow">
+        <div
+          className="tou"
+          onScroll={this.onScroll}
         >
-          Accept
-        </button>
-        <Breadcrumbs total={3} currentIndex={2} />
+          <Identicon address={address} diameter={70} />
+          <div className="tou__title">{title}</div>
+          <Markdown
+            className="tou__body markdown"
+            source={body}
+            skipHtml
+          />
+          <button
+            className="first-time-flow__button"
+            onClick={atBottom && this.acceptTerms}
+            disabled={!atBottom}
+          >
+            Accept
+          </button>
+          <Breadcrumbs total={3} currentIndex={2} />
+        </div>
       </div>
     )
   }
@@ -84,9 +93,9 @@ class NoticeScreen extends Component {
 export default connect(
   ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
     lastUnreadNotice,
-    address: selectedAddress
+    address: selectedAddress,
   }),
   dispatch => ({
-    markNoticeRead: notice => dispatch(markNoticeRead(notice))
+    markNoticeRead: notice => dispatch(markNoticeRead(notice)),
   })
 )(NoticeScreen)
-- 
cgit