1 files changed, 54 insertions, 79 deletions

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 (
-      <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
-        <div className={classnames({
-          'first-view-main': !isMascara,
-          'first-view-main__mascara': isMascara,
-        })}>
-          {isMascara && <div className="mascara-info first-view-phone-invisible">
-            <Mascot
-              animationEventEmitter={this.animationEventEmitter}
-              width="225"
-              height="225"
-            />
-            <div className="info">
-              MetaMask is a secure identity vault for Ethereum.
-            </div>
-            <div className="info">
-              It allows you to hold ether & tokens, and interact with decentralized applications.
-            </div>
-          </div>}
-          <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(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
-              }}
-            >
-              Import with seed phrase
-            </a>
-            { /* }
-            <a
-              href=""
-              className="first-time-flow__link create-password__import-link"
-              onClick={e => {
-                e.preventDefault()
-                history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE)
-              }}
-            >
-              Import an account
-            </a>
-            { */ }
-            <Breadcrumbs total={3} currentIndex={0} />
-          </div>
-        </div>
-      </div>
-    )
+    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 (
       <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
@@ -169,17 +131,30 @@ class CreatePasswordScreen extends Component {
             <div className="create-password__title">
               Create Password
             </div>
-            <input
-              className="first-time-flow__input"
+            <TextField
+              id="create-password"
+              label={t('newPassword')}
               type="password"
-              placeholder="New Password (min 8 characters)"
-              onChange={e => 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
             />
-            <input
-              className="first-time-flow__input create-password__confirm-input"
+            <TextField
+              id="confirm-password"
+              label={t('confirmPassword')}
               type="password"
-              placeholder="Confirm Password"
-              onChange={e => 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
             />
             <button
               className="first-time-flow__button"