diff --git a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js index 75a2ca9c4..137d87d94 100644 --- a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js +++ b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js @@ -25,9 +25,16 @@ import styles from '../createAccount.css'; @observer export default class AccountDetails extends Component { static propTypes = { + isConfirming: PropTypes.bool, + withRequiredBackup: PropTypes.bool, createStore: PropTypes.object.isRequired } + static defaultPropTypes = { + isConfirming: false, + withRequiredBackup: false + } + render () { const { address, description, name } = this.props.createStore; @@ -78,31 +85,103 @@ export default class AccountDetails extends Component { ); } - renderPhrase () { - const { phrase } = this.props.createStore; + renderRequiredBackup () { + const { phraseBackedUp, phraseBackedUpError } = this.props.createStore; - if (!phrase) { + if (!this.props.withRequiredBackup) { return null; } return ( - - } - label={ - - } - readOnly - value={ phrase } - /> +
+ + } + label={ + + } + onChange={ this.onEditPhraseBackedUp } + value={ phraseBackedUp } + /> +
); } + + renderPhrase () { + const { isConfirming } = this.props; + const { isTest, phrase, backupPhraseError } = this.props.createStore; + + const hint = ( + + ); + const label = ( + + ); + + if (!isConfirming) { + if (!phrase) { + return null; + } + + return ( +
+ +
+ +
+ { this.renderRequiredBackup() } +
+ ); + } + + return ( +
+ +
+ +
+
+ ); + } + + onEditPhraseBackedUp = (ev) => { + this.props.createStore.setPhraseBackedUp(ev.target.value); + } + + onEditPhrase = (ev) => { + this.props.createStore.setPhrase(ev.target.value); + } } diff --git a/js/src/modals/CreateAccount/createAccount.css b/js/src/modals/CreateAccount/createAccount.css index 1dd338643..cbab4ee8d 100644 --- a/js/src/modals/CreateAccount/createAccount.css +++ b/js/src/modals/CreateAccount/createAccount.css @@ -131,3 +131,8 @@ padding: 0 4em 1.5em 4em; text-align: center; } + +.backupPhrase { + line-height: 1.618em; + margin-top: 1.5em; +} diff --git a/js/src/modals/CreateAccount/createAccount.js b/js/src/modals/CreateAccount/createAccount.js index 988a5f521..ec8308615 100644 --- a/js/src/modals/CreateAccount/createAccount.js +++ b/js/src/modals/CreateAccount/createAccount.js @@ -37,7 +37,7 @@ import NewImport from './NewImport'; import NewQr from './NewQr'; import RawKey from './RawKey'; import RecoveryPhrase from './RecoveryPhrase'; -import Store, { STAGE_CREATE, STAGE_INFO, STAGE_SELECT_TYPE } from './store'; +import Store, { STAGE_CREATE, STAGE_INFO, STAGE_SELECT_TYPE, STAGE_CONFIRM_BACKUP } from './store'; import TypeIcon from './TypeIcon'; import print from './print'; import recoveryPage from './recoveryPage.ejs'; @@ -61,6 +61,12 @@ const TITLES = { defaultMessage='account information' /> ), + backup: ( + + ), import: ( ) }; -const STAGE_NAMES = [TITLES.type, TITLES.create, TITLES.info]; +const STAGE_NAMES = [TITLES.type, TITLES.create, TITLES.info, TITLES.backup]; const STAGE_IMPORT = [TITLES.type, TITLES.import, TITLES.info]; const STAGE_RESTORE = [TITLES.restore, TITLES.info]; const STAGE_QR = [TITLES.type, TITLES.qr, TITLES.info]; @@ -213,14 +219,25 @@ class CreateAccount extends Component { } return ( - + + ); + + case STAGE_CONFIRM_BACKUP: + return ( + ); } } renderDialogActions () { const { restore } = this.props; - const { createType, canCreate, isBusy, stage } = this.createStore; + const { createType, canCreate, isBusy, stage, phraseBackedUpError } = this.createStore; const cancelBtn = (