Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Link, Route } from 'react-router-dom';
import AccountCopyPhrase from './AccountCopyPhrase';
import AccountImportOptions from './AccountImportOptions';
import AccountRewritePhrase from './AccountRewritePhrase';
import AccountName from './AccountName';
import AccountPassword from './AccountPassword';
import withAccountsInfo from '../../utils/withAccountsInfo';
@observer
class CreateAccount extends Component {
constructor (props) {
super(props);
props.createAccountStore.clear();
}
/**
* Creating account and importing accounts have different processes: 4 steps
* for importing, and 5 steps for creating
*/
: [AccountName, AccountCopyPhrase, AccountRewritePhrase, AccountPassword];
handleToggleCreateImport = () => {
const {
createAccountStore,
history,
match: {
params: { step }
}
} = this.props;
createAccountStore.setIsImport(!createAccountStore.isImport);
// If we were further in the account creation, go back to step 1
if (step > 1) {
history.push('/accounts/new/1');
}
} = this.props;
// Get all the steps of our account process
Luke Schoen
committed
<div>
<Header
left={
// Show back button if we already have some accounts, so we can go back to AccountsList
accountsInfo &&
Object.keys(accountsInfo).length > 0 && (
<Link className='icon -back' to='/accounts'>
Back
</Link>
)
}
title={
<h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
}
/>
Luke Schoen
committed
<div className='window_content'>
<div className='box -padded'>
{Steps.map((StepComponent, index) => (
<Route
component={StepComponent}
key={`Step${index + 1}`}
path={`/accounts/new/${index + 1}`}
/>
))}
Luke Schoen
committed
</div>
Luke Schoen
committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<nav className='footer-nav'>
{step > 1 ? (
<div className='footer-nav_status'>
<Health />
</div>
) : (
<div className='footer-nav_option'>
{isImport ? (
<p>
Need to create an account?
<button
className='button -footer'
onClick={this.handleToggleCreateImport}
>
New account
</button>
</p>
) : (
<p>
Already have an account?
<button
className='button -footer'
onClick={this.handleToggleCreateImport}
>
Import account
</button>
</p>
)}
</div>
)}
</nav>
</div>
);
}
}
export default CreateAccount;