Remove Redux-Form in Generate Wallet (#466)
* remove redux-form from package.json, vendors, reducers * refactor GenerateWallet components, remove redux-form dependency
This commit is contained in:
parent
b2a3e1e45e
commit
2570abd977
|
@ -1,41 +1,37 @@
|
|||
import { GenerateNewWalletAction } from 'actions/generateWallet';
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import translate from 'translations';
|
||||
import './EnterPassword.scss';
|
||||
import PasswordInput from './PasswordInput';
|
||||
import Template from './Template';
|
||||
|
||||
// VALIDATORS
|
||||
const minLength = min => value => {
|
||||
return value && value.length < min
|
||||
? `Must be ${min} characters or more`
|
||||
: undefined;
|
||||
};
|
||||
const minLength = min => value => value && value.length >= min;
|
||||
const minLength9 = minLength(9);
|
||||
const required = value => (value ? undefined : 'Required');
|
||||
|
||||
interface Props {
|
||||
walletPasswordForm: any;
|
||||
generateNewWallet(pw: string): GenerateNewWalletAction;
|
||||
}
|
||||
|
||||
interface State {
|
||||
fileName: null | string;
|
||||
blobURI: null | string;
|
||||
password: string;
|
||||
isPasswordValid: boolean;
|
||||
isPasswordVisible: boolean;
|
||||
}
|
||||
class EnterPassword extends Component<Props, State> {
|
||||
export default class EnterPassword extends Component<Props, State> {
|
||||
public state = {
|
||||
fileName: null,
|
||||
blobURI: null,
|
||||
password: '',
|
||||
isPasswordValid: false,
|
||||
isPasswordVisible: false
|
||||
};
|
||||
|
||||
public render() {
|
||||
const { walletPasswordForm } = this.props;
|
||||
const { isPasswordVisible } = this.state;
|
||||
const AnyField = Field as new () => Field<any>;
|
||||
const { password, isPasswordValid, isPasswordVisible } = this.state;
|
||||
const content = (
|
||||
<div className="EnterPw">
|
||||
<h1 className="EnterPw-title" aria-live="polite">
|
||||
|
@ -44,20 +40,18 @@ class EnterPassword extends Component<Props, State> {
|
|||
|
||||
<label className="EnterPw-password">
|
||||
<h4 className="EnterPw-password-label">{translate('GEN_Label_1')}</h4>
|
||||
<AnyField
|
||||
className="EnterPw-password-field"
|
||||
validate={[required, minLength9]}
|
||||
component={PasswordInput}
|
||||
<PasswordInput
|
||||
password={password}
|
||||
onPasswordChange={this.onPasswordChange}
|
||||
isPasswordVisible={isPasswordVisible}
|
||||
togglePassword={this.togglePassword}
|
||||
name="password"
|
||||
type="text"
|
||||
isPasswordValid={isPasswordValid}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
onClick={this.onClickGenerateFile}
|
||||
disabled={walletPasswordForm ? walletPasswordForm.syncErrors : true}
|
||||
disabled={!isPasswordValid}
|
||||
className="EnterPw-submit btn btn-primary btn-block"
|
||||
>
|
||||
{translate('NAV_GenerateWallet')}
|
||||
|
@ -131,15 +125,19 @@ class EnterPassword extends Component<Props, State> {
|
|||
return <Template content={content} help={help} />;
|
||||
}
|
||||
private onClickGenerateFile = () => {
|
||||
const form = this.props.walletPasswordForm;
|
||||
this.props.generateNewWallet(form.values.password);
|
||||
this.props.generateNewWallet(this.state.password);
|
||||
this.setState({ password: '' });
|
||||
};
|
||||
|
||||
private togglePassword = () => {
|
||||
this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
|
||||
};
|
||||
}
|
||||
|
||||
export default reduxForm({
|
||||
form: 'walletPasswordForm' // a unique name for this form
|
||||
})(EnterPassword as any);
|
||||
private onPasswordChange = (e: any) => {
|
||||
const password = e.target.value;
|
||||
this.setState({
|
||||
isPasswordValid: minLength9(password),
|
||||
password
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
|
@ -2,27 +2,35 @@ import React, { Component } from 'react';
|
|||
import { translateRaw } from 'translations';
|
||||
|
||||
interface Props {
|
||||
password: string;
|
||||
onPasswordChange: any;
|
||||
togglePassword: any;
|
||||
isPasswordVisible?: boolean;
|
||||
input: any;
|
||||
meta: any;
|
||||
isPasswordValid: boolean;
|
||||
}
|
||||
|
||||
export default class PasswordInput extends Component<Props, {}> {
|
||||
public render() {
|
||||
const { input, meta, isPasswordVisible, togglePassword } = this.props;
|
||||
const {
|
||||
password,
|
||||
isPasswordValid,
|
||||
isPasswordVisible,
|
||||
togglePassword,
|
||||
onPasswordChange
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<div className="input-group" style={{ width: '100%' }}>
|
||||
<input
|
||||
{...input}
|
||||
value={password}
|
||||
name="password"
|
||||
className={`form-control ${meta.error ? 'is-invalid' : ''}`}
|
||||
className={`form-control ${!isPasswordValid ? 'is-invalid' : ''}`}
|
||||
type={isPasswordVisible ? 'text' : 'password'}
|
||||
placeholder={translateRaw('GEN_Placeholder_1')}
|
||||
aria-label={translateRaw('GEN_Aria_1')}
|
||||
onChange={onPasswordChange}
|
||||
/>
|
||||
<span
|
||||
onClick={togglePassword}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import { routerReducer } from 'react-router-redux';
|
||||
import { combineReducers } from 'redux';
|
||||
import { reducer as formReducer } from 'redux-form';
|
||||
import { config, State as ConfigState } from './config';
|
||||
import { customTokens, State as CustomTokensState } from './customTokens';
|
||||
import {
|
||||
|
@ -39,6 +38,5 @@ export default combineReducers({
|
|||
customTokens,
|
||||
rates,
|
||||
deterministicWallets,
|
||||
form: formReducer,
|
||||
routing: routerReducer
|
||||
});
|
||||
|
|
|
@ -11,7 +11,6 @@ require('react-redux');
|
|||
require('react-router');
|
||||
require('react-router-redux');
|
||||
require('redux');
|
||||
require('redux-form');
|
||||
require('redux-logger');
|
||||
require('redux-saga');
|
||||
require('wallet-address-validator');
|
||||
|
|
|
@ -33,7 +33,6 @@
|
|||
"react-router-redux": "4.0.8",
|
||||
"react-transition-group": "2.2.1",
|
||||
"redux": "3.7.2",
|
||||
"redux-form": "7.1.2",
|
||||
"redux-logger": "3.0.6",
|
||||
"redux-promise-middleware": "4.4.2",
|
||||
"redux-saga": "0.16.0",
|
||||
|
|
Loading…
Reference in New Issue