1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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
|
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import LoadingScreen from './loading-screen'
import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
class ImportSeedPhraseScreen extends Component {
static propTypes = {
warning: PropTypes.string,
back: PropTypes.func.isRequired,
next: PropTypes.func.isRequired,
createNewVaultAndRestore: PropTypes.func.isRequired,
hideWarning: PropTypes.func.isRequired,
isLoading: PropTypes.bool.isRequired,
displayWarning: PropTypes.func,
};
state = {
seedPhrase: '',
password: '',
confirmPassword: '',
}
onClick = () => {
const { password, seedPhrase, confirmPassword } = this.state
const { createNewVaultAndRestore, next, displayWarning } = this.props
if (seedPhrase.split(' ').length !== 12) {
this.warning = 'Seed Phrases are 12 words long'
displayWarning(this.warning)
return
}
if (password.length < 8) {
this.warning = 'Passwords require a mimimum length of 8'
displayWarning(this.warning)
return
}
if (password !== confirmPassword) {
this.warning = 'Confirmed password does not match'
displayWarning(this.warning)
return
}
this.warning = null
createNewVaultAndRestore(password, seedPhrase)
.then(next)
}
render () {
return this.props.isLoading
? <LoadingScreen loadingMessage="Creating your new account" />
: (
<div className="import-account">
<a
className="import-account__back-button"
onClick={e => {
e.preventDefault()
this.props.back()
}}
href="#"
>
{`< Back`}
</a>
<div className="import-account__title">
Import an Account with Seed Phrase
</div>
<div className="import-account__selector-label">
Enter your secret twelve word phrase here to restore your vault.
</div>
<div className="import-account__input-wrapper">
<label className="import-account__input-label">Wallet Seed</label>
<textarea
className="import-account__secret-phrase"
onChange={e => this.setState({seedPhrase: e.target.value})}
placeholder="Separate each word with a single space"
/>
</div>
<span
className="error"
>
{this.props.warning}
</span>
<div className="import-account__input-wrapper">
<label className="import-account__input-label">New Password</label>
<input
className="first-time-flow__input"
type="password"
placeholder="New Password (min 8 characters)"
onChange={e => this.setState({password: e.target.value})}
/>
</div>
<div className="import-account__input-wrapper">
<label className="import-account__input-label">Confirm Password</label>
<input
className="first-time-flow__input"
type="password"
placeholder="Confirm Password"
onChange={e => this.setState({confirmPassword: e.target.value})}
/>
</div>
<button
className="first-time-flow__button"
onClick={this.onClick}
>
Import
</button>
</div>
)
}
}
export default connect(
({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
dispatch => ({
createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
displayWarning: (warning) => dispatch(displayWarning(warning)),
hideWarning: () => dispatch(hideWarning()),
})
)(ImportSeedPhraseScreen)
|
