From f387b81a1dad9c97740217dd6168815640839a1d Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Wed, 31 Oct 2018 16:19:55 +0800
Subject: [PATCH] rework on the register and restore logic

---
 src/features/app/components/Register/Register.jsx  | 178 ---------------------
 src/features/app/components/Register/Register.scss |  48 ------
 .../components/Register/Register.jsx               | 140 ++++------------
 .../initialization/components/Restore/Resotre.jsx  |  28 ++++
 .../components/RestoreMnemonic/RestoreMnemonic.jsx | 114 +++++++++++++
 5 files changed, 174 insertions(+), 334 deletions(-)
 delete mode 100644 src/features/app/components/Register/Register.jsx
 delete mode 100644 src/features/app/components/Register/Register.scss
 create mode 100644 src/features/initialization/components/Restore/Resotre.jsx
 create mode 100644 src/features/initialization/components/RestoreMnemonic/RestoreMnemonic.jsx

diff --git a/src/features/app/components/Register/Register.jsx b/src/features/app/components/Register/Register.jsx
deleted file mode 100644
index 92c8862..0000000
--- a/src/features/app/components/Register/Register.jsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React from 'react'
-import {connect} from 'react-redux'
-import {ErrorBanner, TextField, PasswordField} from 'features/shared/components'
-import actions from 'actions'
-import styles from './Register.scss'
-import {reduxForm} from 'redux-form'
-import {chainClient} from 'utility/environment'
-import {withNamespaces} from 'react-i18next'
-
-class Register extends React.Component {
-  constructor(props) {
-    super(props)
-    this.connection = chainClient().connection
-
-    this.submitWithErrors = this.submitWithErrors.bind(this)
-  }
-
-  componentDidMount() {
-    this.setState({
-      init: true
-    })
-  }
-
-  submitWithErrors(data) {
-    return new Promise((resolve, reject) => {
-      this.props.registerKey(data)
-        .catch((err) => reject({_error: err.message}))
-    })
-  }
-
-  setMode(isInit) {
-    this.setState({
-      init: isInit
-    })
-  }
-
-  restore() {
-    const element = document.getElementById('bytom-restore-file-upload-init')
-    element.click()
-  }
-
-  handleFileChange(event) {
-    const files = event.target.files
-    if (files.length <= 0) {
-      this.setState({key: null})
-      return
-    }
-
-    const fileReader = new FileReader()
-    fileReader.onload = fileLoadedEvent => {
-      const backupData = JSON.parse(fileLoadedEvent.target.result)
-      this.connection.request('/restore-wallet', backupData).then(resp => {
-        if (resp.status === 'fail') {
-          this.props.showError(new Error(resp.msg))
-          return
-        }
-        this.props.success()
-      })
-    }
-    fileReader.readAsText(files[0], 'UTF-8')
-
-    const fileElement = document.getElementById('bytom-restore-file-upload-init')
-    fileElement.value = ''
-  }
-
-  render() {
-    const t = this.props.t
-
-    const {
-      fields: {keyAlias, password, repeatPassword, accountAlias},
-      error,
-      handleSubmit,
-      submitting
-    } = this.props
-
-    return (
-      <div className={styles.main}>
-        {
-          this.state && this.state.init &&
-          <div>
-            <h2 className={styles.title}>{t('init.title')}</h2>
-            <div className={styles.formWarpper}>
-              <form className={styles.form} onSubmit={handleSubmit(this.submitWithErrors)}>
-                <TextField
-                  title={t('form.accountAlias')}
-                  placeholder={t('init.accountPlaceholder')}
-                  fieldProps={accountAlias} />
-                <TextField
-                  title={t('form.keyAlias')}
-                  placeholder={t('init.keyPlaceholder')}
-                  fieldProps={keyAlias}/>
-                <PasswordField
-                  title={t('init.keyPassword')}
-                  placeholder={t('init.passwordPlaceholder')}
-                  fieldProps={password} />
-                <PasswordField
-                  title={t('init.repeatKeyPassword')}
-                  placeholder={t('init.repeatPlaceHolder')}
-                  fieldProps={repeatPassword} />
-
-                {error &&
-                <ErrorBanner
-                  title={t('init.errorTitle')}
-                  error={error}/>}
-
-                <button type='submit' className='btn btn-primary' disabled={submitting}>
-                  {t('init.register')}
-                </button>
-                <a className={`${styles.choice} ${(this.state && this.state.init) ? '' : styles.active}`}
-                   href='javascript:;' onClick={this.setMode.bind(this, false)}>
-                  {t('init.restoreWallet')}
-                </a>
-              </form>
-            </div>
-          </div>
-        }
-        {
-          this.state && !this.state.init &&
-          <div>
-            <h2 className={styles.title}>{t('init.restoreWallet')}</h2>
-            <div className={styles.formWarpper}>
-              <form className={styles.form} onSubmit={handleSubmit(this.submitWithErrors)}>
-                <button className='btn btn-primary' onClick={this.restore.bind(this)}>
-                  {t('init.restore')}
-                </button>
-                <a className={`${styles.choice} ${(this.state && this.state.init) ? styles.active : ''}`}
-                   href='javascript:;' onClick={this.setMode.bind(this, true)}>
-                  {t('init.title')}
-                </a>
-
-                <p></p>
-                <p>{t('init.restoreLabel')}</p>
-
-                <input id='bytom-restore-file-upload-init' type='file' style={{'display': 'none'}}
-                       onChange={this.handleFileChange.bind(this)}/>
-              </form>
-            </div>
-          </div>
-        }
-      </div>
-    )
-  }
-}
-
-const validate = (values, props) => {
-  const errors = {}
-  const t = props.t
-
-  if (!values.keyAlias) {
-    errors.keyAlias = t('key.aliasRequired')
-  }
-  if (!values.password) {
-    errors.password = t('key.passwordRequired')
-  } else if (values.password.length < 5) {
-    errors.password = ( t('key.reset.newPWarning') )
-  }
-  if (values.password !== values.repeatPassword) {
-    errors.repeatPassword = ( t('key.reset.repeatPWarning') )
-  }
-  if (!values.accountAlias) {
-    errors.accountAlias = ( t('account.new.aliasWarning') )
-  }
-
-  return errors
-}
-
-export default withNamespaces('translations')( connect(
-  () => ({}),
-  (dispatch) => ({
-    registerKey: (token) => dispatch(actions.core.registerKey(token)),
-    showError: (err) => dispatch({type: 'ERROR', payload: err}),
-    success: () => dispatch({type: 'CREATE_REGISTER_ACCOUNT'})
-  })
-)(reduxForm({
-  form: 'initDefaultPassword',
-  fields: ['keyAlias', 'password', 'repeatPassword', 'accountAlias'],
-  validate
-})(Register)))
diff --git a/src/features/app/components/Register/Register.scss b/src/features/app/components/Register/Register.scss
deleted file mode 100644
index 2e7b4ae..0000000
--- a/src/features/app/components/Register/Register.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.main {
-  background: $background-inverse-color;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding-top: 50px;
-  display: block;
-  overflow: auto;
-}
-
-.choice {
-  margin-left: 10px;
-}
-
-.image {
-  width: 150px;
-  position: absolute;
-  top: calc(50px);
-  left: calc(50% - 75px);
-}
-
-.title{
-  text-align: center;
-  color: white;
-}
-
-.switch {
-  display: flex;
-  justify-content: space-around;
-
-  margin-top: 10px;
-}
-
-.formWarpper {
-  display: flex;
-  justify-content: space-around;
-
-  margin-top: 30px;
-}
-
-.form {
-  background: $background-color;
-  border-radius: $border-radius-standard;
-  width: 500px;
-  padding: 30px;
-}
diff --git a/src/features/initialization/components/Register/Register.jsx b/src/features/initialization/components/Register/Register.jsx
index 92c8862..f70a1db 100644
--- a/src/features/initialization/components/Register/Register.jsx
+++ b/src/features/initialization/components/Register/Register.jsx
@@ -4,23 +4,14 @@ import {ErrorBanner, TextField, PasswordField} from 'features/shared/components'
 import actions from 'actions'
 import styles from './Register.scss'
 import {reduxForm} from 'redux-form'
-import {chainClient} from 'utility/environment'
 import {withNamespaces} from 'react-i18next'
 
 class Register extends React.Component {
   constructor(props) {
     super(props)
-    this.connection = chainClient().connection
-
     this.submitWithErrors = this.submitWithErrors.bind(this)
   }
 
-  componentDidMount() {
-    this.setState({
-      init: true
-    })
-  }
-
   submitWithErrors(data) {
     return new Promise((resolve, reject) => {
       this.props.registerKey(data)
@@ -28,41 +19,6 @@ class Register extends React.Component {
     })
   }
 
-  setMode(isInit) {
-    this.setState({
-      init: isInit
-    })
-  }
-
-  restore() {
-    const element = document.getElementById('bytom-restore-file-upload-init')
-    element.click()
-  }
-
-  handleFileChange(event) {
-    const files = event.target.files
-    if (files.length <= 0) {
-      this.setState({key: null})
-      return
-    }
-
-    const fileReader = new FileReader()
-    fileReader.onload = fileLoadedEvent => {
-      const backupData = JSON.parse(fileLoadedEvent.target.result)
-      this.connection.request('/restore-wallet', backupData).then(resp => {
-        if (resp.status === 'fail') {
-          this.props.showError(new Error(resp.msg))
-          return
-        }
-        this.props.success()
-      })
-    }
-    fileReader.readAsText(files[0], 'UTF-8')
-
-    const fileElement = document.getElementById('bytom-restore-file-upload-init')
-    fileElement.value = ''
-  }
-
   render() {
     const t = this.props.t
 
@@ -75,68 +31,38 @@ class Register extends React.Component {
 
     return (
       <div className={styles.main}>
-        {
-          this.state && this.state.init &&
-          <div>
-            <h2 className={styles.title}>{t('init.title')}</h2>
-            <div className={styles.formWarpper}>
-              <form className={styles.form} onSubmit={handleSubmit(this.submitWithErrors)}>
-                <TextField
-                  title={t('form.accountAlias')}
-                  placeholder={t('init.accountPlaceholder')}
-                  fieldProps={accountAlias} />
-                <TextField
-                  title={t('form.keyAlias')}
-                  placeholder={t('init.keyPlaceholder')}
-                  fieldProps={keyAlias}/>
-                <PasswordField
-                  title={t('init.keyPassword')}
-                  placeholder={t('init.passwordPlaceholder')}
-                  fieldProps={password} />
-                <PasswordField
-                  title={t('init.repeatKeyPassword')}
-                  placeholder={t('init.repeatPlaceHolder')}
-                  fieldProps={repeatPassword} />
-
-                {error &&
-                <ErrorBanner
-                  title={t('init.errorTitle')}
-                  error={error}/>}
-
-                <button type='submit' className='btn btn-primary' disabled={submitting}>
-                  {t('init.register')}
-                </button>
-                <a className={`${styles.choice} ${(this.state && this.state.init) ? '' : styles.active}`}
-                   href='javascript:;' onClick={this.setMode.bind(this, false)}>
-                  {t('init.restoreWallet')}
-                </a>
-              </form>
-            </div>
-          </div>
-        }
-        {
-          this.state && !this.state.init &&
-          <div>
-            <h2 className={styles.title}>{t('init.restoreWallet')}</h2>
-            <div className={styles.formWarpper}>
-              <form className={styles.form} onSubmit={handleSubmit(this.submitWithErrors)}>
-                <button className='btn btn-primary' onClick={this.restore.bind(this)}>
-                  {t('init.restore')}
-                </button>
-                <a className={`${styles.choice} ${(this.state && this.state.init) ? styles.active : ''}`}
-                   href='javascript:;' onClick={this.setMode.bind(this, true)}>
-                  {t('init.title')}
-                </a>
-
-                <p></p>
-                <p>{t('init.restoreLabel')}</p>
-
-                <input id='bytom-restore-file-upload-init' type='file' style={{'display': 'none'}}
-                       onChange={this.handleFileChange.bind(this)}/>
-              </form>
-            </div>
+        <div>
+          <h2 className={styles.title}>{t('init.title')}</h2>
+          <div className={styles.formWarpper}>
+            <form className={styles.form} onSubmit={handleSubmit(this.submitWithErrors)}>
+              <TextField
+                title={t('form.accountAlias')}
+                placeholder={t('init.accountPlaceholder')}
+                fieldProps={accountAlias} />
+              <TextField
+                title={t('form.keyAlias')}
+                placeholder={t('init.keyPlaceholder')}
+                fieldProps={keyAlias}/>
+              <PasswordField
+                title={t('init.keyPassword')}
+                placeholder={t('init.passwordPlaceholder')}
+                fieldProps={password} />
+              <PasswordField
+                title={t('init.repeatKeyPassword')}
+                placeholder={t('init.repeatPlaceHolder')}
+                fieldProps={repeatPassword} />
+
+              {error &&
+              <ErrorBanner
+                title={t('init.errorTitle')}
+                error={error}/>}
+
+              <button type='submit' className='btn btn-primary' disabled={submitting}>
+                {t('init.register')}
+              </button>
+            </form>
           </div>
-        }
+        </div>
       </div>
     )
   }
@@ -167,9 +93,7 @@ const validate = (values, props) => {
 export default withNamespaces('translations')( connect(
   () => ({}),
   (dispatch) => ({
-    registerKey: (token) => dispatch(actions.core.registerKey(token)),
-    showError: (err) => dispatch({type: 'ERROR', payload: err}),
-    success: () => dispatch({type: 'CREATE_REGISTER_ACCOUNT'})
+    registerKey: (token) => dispatch(actions.initialization.registerKey(token))
   })
 )(reduxForm({
   form: 'initDefaultPassword',
diff --git a/src/features/initialization/components/Restore/Resotre.jsx b/src/features/initialization/components/Restore/Resotre.jsx
new file mode 100644
index 0000000..77b0503
--- /dev/null
+++ b/src/features/initialization/components/Restore/Resotre.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+class Resotre extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return(
+      <div>
+        <Link to='/initialization/restoreKeystore'>
+          Restore by keystore
+        </Link>
+        <Link to='/initialization/restoreMnemonic'>
+          Restore by Mnemonic
+        </Link>
+
+        <Link to='/initialization'>
+          cancel
+        </Link>
+      </div>
+    )
+  }
+}
+
+
+export default Resotre
diff --git a/src/features/initialization/components/RestoreMnemonic/RestoreMnemonic.jsx b/src/features/initialization/components/RestoreMnemonic/RestoreMnemonic.jsx
new file mode 100644
index 0000000..1d0fc9d
--- /dev/null
+++ b/src/features/initialization/components/RestoreMnemonic/RestoreMnemonic.jsx
@@ -0,0 +1,114 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {ErrorBanner, PasswordField, TextField, TextareaField} from 'features/shared/components'
+import actions from 'actions'
+import {reduxForm} from 'redux-form'
+import {withNamespaces} from 'react-i18next'
+import { Link } from 'react-router'
+
+class RestoreMnemonic extends React.Component {
+  constructor(props) {
+    super(props)
+    this.submitWithErrors = this.submitWithErrors.bind(this)
+  }
+
+  submitWithErrors(data) {
+    return new Promise((resolve, reject) => {
+      this.props.restoreMnemonic(data)
+        .catch((err) => reject({_error: err}))
+    })
+  }
+
+  render() {
+    const t = this.props.t
+
+    const {
+      fields: {mnemonic, keyAlias, password, confirmPassword},
+      error,
+      handleSubmit,
+      submitting
+    } = this.props
+
+
+    return (
+      <div >
+        <div>
+          <h2 >{t('init.restoreWallet')}</h2>
+          <div>
+            <form onSubmit={handleSubmit(this.submitWithErrors)}>
+
+              <TextareaField
+                title={'mnemonic'}
+                fieldProps={mnemonic}
+              />
+              <TextField
+                title={t('form.keyAlias')}
+                placeholder={t('init.keyPlaceholder')}
+                fieldProps={keyAlias}/>
+              <PasswordField
+                title={t('init.keyPassword')}
+                placeholder={t('init.passwordPlaceholder')}
+                fieldProps={password} />
+              <PasswordField
+                title={t('init.repeatKeyPassword')}
+                placeholder={t('init.repeatPlaceHolder')}
+                fieldProps={confirmPassword} />
+
+              {error &&
+              <ErrorBanner
+                title={t('init.errorTitle')}
+                error={error}/>}
+
+              <button type='submit' className='btn btn-primary' disabled={submitting}>
+                {t('init.restore')}
+              </button>
+              <Link to='/initialization/restore'>
+                cancel
+              </Link>
+
+            </form>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const validate = (values, props) => {
+  const errors = {}
+  const t = props.t
+
+  if (!values.mnemonic) {
+    errors.mnemonic = 'random'
+  }
+  if (!values.keyAlias) {
+    errors.keyAlias = t('key.aliasRequired')
+  }
+  if (!values.password) {
+    errors.password = t('key.passwordRequired')
+  } else if (values.password.length < 5) {
+    errors.password = ( t('key.reset.newPWarning') )
+  }
+  if (values.password !== values.confirmPassword) {
+    errors.confirmPassword = ( t('key.reset.repeatPWarning') )
+  }
+
+  return errors
+}
+
+
+export default withNamespaces('translations')( connect(
+  () => ({}),
+  (dispatch) => ({
+    restoreMnemonic: (token) => dispatch(actions.initialization.restoreMnemonic(token)),
+  })
+)(reduxForm({
+  form: 'restoreMnemonic',
+  fields: [
+    'mnemonic',
+    'keyAlias',
+    'password',
+    'confirmPassword',
+  ],
+  validate
+})(RestoreMnemonic)))
-- 
2.11.0