status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-01-11 11:34:26 +00:00
Code Issues Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Daniel Ternyak 2017-06-20 01:13:21 -05:00
parent 3cee501da1
commit 3644cb5515
1 changed files with 138 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
View File

@ -1,137 +1,159 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Field, reduxForm} from 'redux-form'; import { Field, reduxForm } from 'redux-form';
import GenerateWalletPasswordInputComponent from './GenerateWalletPasswordInputComponent'; import GenerateWalletPasswordInputComponent from './GenerateWalletPasswordInputComponent';
import LedgerTrezorWarning from './LedgerTrezorWarning'; import LedgerTrezorWarning from './LedgerTrezorWarning';
import translate from 'translations'; import translate from 'translations';
// VALIDATORS // VALIDATORS
const minLength = min => value => { const minLength = min => value => {
return value && value.length < min ? `Must be ${min} characters or more` : undefined return value && value.length < min
? `Must be ${min} characters or more`
: undefined;
}; };
const minLength9 = minLength(9); const minLength9 = minLength(9);
const required = value => value ? undefined : 'Required'; const required = value => (value ? undefined : 'Required');
class GenerateWalletPasswordComponent extends Component { class GenerateWalletPasswordComponent extends Component {
constructor(props) { constructor(props) {
super(props) super(props);
} }
static propTypes = { static propTypes = {
// state // state
title: PropTypes.string, title: PropTypes.string,
body: PropTypes.string, body: PropTypes.string,
userId: PropTypes.number, userId: PropTypes.number,
id: PropTypes.number, id: PropTypes.number,
generateWalletPassword: PropTypes.object, generateWalletPassword: PropTypes.object,
showPassword: PropTypes.bool, showPassword: PropTypes.bool,
generateWalletFile: PropTypes.bool, generateWalletFile: PropTypes.bool,
hasDownloadedWalletFile: PropTypes.bool, hasDownloadedWalletFile: PropTypes.bool,
canProceedToPaper: PropTypes.bool, canProceedToPaper: PropTypes.bool,
// actions // actions
generateWalletShowPassword: PropTypes.func, generateWalletShowPassword: PropTypes.func,
generateWalletGenerateFile: PropTypes.func, generateWalletGenerateFile: PropTypes.func,
generateWalletDownloadFile: PropTypes.func, generateWalletDownloadFile: PropTypes.func,
generateWalletConfirmContinueToPaper: PropTypes.func generateWalletConfirmContinueToPaper: PropTypes.func
}; };
continueToPaper() {}
continueToPaper() { downloaded() {
} let nextState = this.state;
nextState.hasDownloadedWalletFile = true;
this.setState(nextState);
}
downloaded() { render() {
let nextState = this.state; const {
nextState.hasDownloadedWalletFile = true; generateWalletPassword,
this.setState(nextState) showPassword,
} generateWalletFile,
hasDownloadedWalletFile,
generateWalletShowPassword,
generateWalletGenerateFile,
generateWalletDownloadFile,
generateWalletConfirmContinueToPaper
} = this.props;
return (
render() { <section className="container" style={{ minHeight: '50%' }}>
const { <div className="tab-content">
generateWalletPassword, <main className="tab-pane active text-center" role="main">
showPassword, <br />
generateWalletFile, {!generateWalletFile &&
hasDownloadedWalletFile, <div>
generateWalletShowPassword, <section className="row">
generateWalletGenerateFile, <h1 aria-live="polite">{translate('NAV_GenerateWallet')}</h1>
generateWalletDownloadFile, <div className="col-sm-8 col-sm-offset-2">
generateWalletConfirmContinueToPaper <h4>{translate('HELP_1_Desc_3')}</h4>
<Field
} = this.props; validate={[required, minLength9]}
component={GenerateWalletPasswordInputComponent}
return ( showPassword={showPassword}
<section className="container" style={{minHeight: '50%'}}> generateWalletShowPassword={generateWalletShowPassword}
<div className="tab-content"> name="password"
<main className="tab-pane active text-center" role="main"> type="text"
<br/> />
{ <br />
!generateWalletFile && ( <button
<div> onClick={() => generateWalletGenerateFile()}
<section className="row"> disabled={
<h1 aria-live="polite">{translate('NAV_GenerateWallet')}</h1> generateWalletPassword
<div className="col-sm-8 col-sm-offset-2"> ? generateWalletPassword.syncErrors
<h4>{translate('HELP_1_Desc_3')}</h4> : true
<Field }
validate={[required, minLength9]} className="btn btn-primary btn-block"
component={GenerateWalletPasswordInputComponent} >
showPassword={showPassword} {translate('NAV_GenerateWallet')}
generateWalletShowPassword={generateWalletShowPassword} </button>
name="password" </div>
type="text"/> </section>
<br/> <LedgerTrezorWarning />
<button onClick={() => generateWalletGenerateFile()} </div>}
disabled={generateWalletPassword ? generateWalletPassword.syncErrors : true} {generateWalletFile &&
className="btn btn-primary btn-block"> <section role="main" className="row">
{translate('NAV_GenerateWallet')} <h1>{translate('GEN_Label_2')}</h1>
</button> <br />
</div> <div className="col-sm-8 col-sm-offset-2">
</section> <div aria-hidden="true" className="account-help-icon">
<LedgerTrezorWarning/> <img
</div> src="https://myetherwallet.com/images/icon-help.svg"
) className="help-icon"
} />
{ <p className="account-help-text">
generateWalletFile && ( {translate('x_KeystoreDesc')}
<section role="main" className="row"> </p>
<h1>{translate('GEN_Label_2')}</h1> <h4>{translate('x_Keystore2')}</h4>
<br/> </div>
<div className="col-sm-8 col-sm-offset-2"> <a
<div aria-hidden="true" className="account-help-icon"><img role="button"
src="https://myetherwallet.com/images/icon-help.svg" className="help-icon"/> className="btn btn-primary btn-block"
<p className="account-help-text">{translate('x_KeystoreDesc')}</p> href="blob:https://myetherwallet.com/2455ae32-916f-4224-a806-414bbe680168"
<h4>{translate('x_Keystore2')}</h4> download="UTC--2017-04-26T23-07-03.538Z--c5b7fff4e1669e38e8d6bc8fffe7e562b2b70f43"
</div> aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)"
<a role="button" className="btn btn-primary btn-block" aria-describedby="x_KeystoreDesc"
href="blob:https://myetherwallet.com/2455ae32-916f-4224-a806-414bbe680168" onClick={() => generateWalletDownloadFile()}
download="UTC--2017-04-26T23-07-03.538Z--c5b7fff4e1669e38e8d6bc8fffe7e562b2b70f43" >
aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)" {translate('x_Download')}
aria-describedby="x_KeystoreDesc" </a>
onClick={() => generateWalletDownloadFile()}>{translate('x_Download')}</a> <p className="sr-only" id="x_KeystoreDesc">
<p className="sr-only" id="x_KeystoreDesc">{translate('x_KeystoreDesc')}</p> {translate('x_KeystoreDesc')}
<br/><br/><br/><br/> </p>
</div> <br /><br /><br /><br />
<div className="col-xs-12 alert alert-danger">
<span>
MyEtherWallet.com is not a web wallet &amp; does not store or transmit this secret information at any time. <br/>
<strong>If you do not save your wallet file and password, we cannot recover them.</strong><br/>
Save your wallet file now &amp; back it up in a second location (not on your computer).
<br/><br/>
<a role="button"
className={`btn btn-info ${hasDownloadedWalletFile ? '' : 'disabled'}`}
onClick={() => generateWalletConfirmContinueToPaper()}> I understand. Continue. </a>
</span>
</div>
</section>
)
}
</main>
</div> </div>
</section> <div className="col-xs-12 alert alert-danger">
) <span>
} MyEtherWallet.com is not a web wallet &amp; does not store
or transmit this secret information at any time. <br />
<strong>
If you do not save your wallet file and password, we
cannot recover them.
</strong>
<br />
Save your wallet file now &amp; back it up in a second
location (not on your computer).
<br /><br />
<a
role="button"
className={`btn btn-info ${hasDownloadedWalletFile
? ''
: 'disabled'}`}
onClick={() => generateWalletConfirmContinueToPaper()}
>
{' '}I understand. Continue.{' '}
</a>
</span>
</div>
</section>}
</main>
</div>
</section>
);
}
} }
export default reduxForm({ export default reduxForm({
form: 'generateWalletPassword' // a unique name for this form form: 'generateWalletPassword' // a unique name for this form
})(GenerateWalletPasswordComponent); })(GenerateWalletPasswordComponent);