src/features/initialization/components/Register/Register.jsx

   1 import React from 'react'
   2 import {connect} from 'react-redux'
   3 import {ErrorBanner, TextField, PasswordField} from 'features/shared/components'
   4 import actions from 'actions'
   5 import styles from './Register.scss'
   6 import {reduxForm} from 'redux-form'
   7 import {withNamespaces} from 'react-i18next'
   8
   9 class Register extends React.Component {
  10   constructor(props) {
  11     super(props)
  12     this.submitWithErrors = this.submitWithErrors.bind(this)
  13   }
  14
  15   submitWithErrors(data) {
  16     return new Promise((resolve, reject) => {
  17       this.props.registerKey(data)
  18         .catch((err) => reject({_error: err.message}))
  19     })
  20   }
  21
  22   render() {
  23     const t = this.props.t
  24
  25     const {
  26       fields: {keyAlias, password, repeatPassword, accountAlias},
  27       error,
  28       handleSubmit,
  29       submitting
  30     } = this.props
  31
  32     return (
  33       <div className={styles.main}>
  34         <div>
  35           <h2 className={styles.title}>{t('init.title')}</h2>
  36           <div className={styles.formWarpper}>
  37             <form className={styles.form} onSubmit={handleSubmit(this.submitWithErrors)}>
  38               <TextField
  39                 title={t('form.accountAlias')}
  40                 placeholder={t('init.accountPlaceholder')}
  41                 fieldProps={accountAlias} />
  42               <TextField
  43                 title={t('form.keyAlias')}
  44                 placeholder={t('init.keyPlaceholder')}
  45                 fieldProps={keyAlias}/>
  46               <PasswordField
  47                 title={t('init.keyPassword')}
  48                 placeholder={t('init.passwordPlaceholder')}
  49                 fieldProps={password} />
  50               <PasswordField
  51                 title={t('init.repeatKeyPassword')}
  52                 placeholder={t('init.repeatPlaceHolder')}
  53                 fieldProps={repeatPassword} />
  54
  55               {error &&
  56               <ErrorBanner
  57                 title={t('init.errorTitle')}
  58                 error={error}/>}
  59
  60               <button type='submit' className='btn btn-primary' disabled={submitting}>
  61                 {t('init.register')}
  62               </button>
  63             </form>
  64           </div>
  65         </div>
  66       </div>
  67     )
  68   }
  69 }
  70
  71 const validate = (values, props) => {
  72   const errors = {}
  73   const t = props.t
  74
  75   if (!values.keyAlias) {
  76     errors.keyAlias = t('key.aliasRequired')
  77   }
  78   if (!values.password) {
  79     errors.password = t('key.passwordRequired')
  80   } else if (values.password.length < 5) {
  81     errors.password = ( t('key.reset.newPWarning') )
  82   }
  83   if (values.password !== values.repeatPassword) {
  84     errors.repeatPassword = ( t('key.reset.repeatPWarning') )
  85   }
  86   if (!values.accountAlias) {
  87     errors.accountAlias = ( t('account.new.aliasWarning') )
  88   }
  89
  90   return errors
  91 }
  92
  93 export default withNamespaces('translations')( connect(
  94   () => ({}),
  95   (dispatch) => ({
  96     registerKey: (token) => dispatch(actions.initialization.registerKey(token))
  97   })
  98 )(reduxForm({
  99   form: 'initDefaultPassword',
 100   fields: ['keyAlias', 'password', 'repeatPassword', 'accountAlias'],
 101   validate
 102 })(Register)))