Skip to content

Commit 49fc6ef

Browse files
dmernies-iohkdmernies-iohk
committed
A new component to create a new unlock wallet is added
1 parent 0c8fb14 commit 49fc6ef

File tree

8 files changed

+168
-143
lines changed

8 files changed

+168
-143
lines changed

‎examples/wallet/app/actions/account.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ import routes from '../constants/routes.json';
3939

4040
export type SetKeysAction = { type: 'SET_KEYS' } & AccountKeys;
4141
export const SET_KEYS = 'SET_KEYS';
42+
export const SET_VALID_UNLOCK_WALLET_PASSWORD =
43+
'SET_VALID_UNLOCK_WALLET_PASSWORD';
4244

4345
export function setAccount(
4446
privateKey: string,

‎examples/wallet/app/components/CreateUnlockWalletPassword.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// @flow
2+
import React, { useState } from 'react';
3+
import Form from 'react-bootstrap/Form';
4+
5+
// eslint-disable-next-line react/prop-types
6+
export default ({ setValidUnlockWalletPassword }) => {
7+
const checkValidUnlockWalletPassword = function checkValidUnlockWalletPassword(
8+
pass
9+
) {
10+
setIsValidPassword(true);
11+
if (!pass) {
12+
setIsValidPassword(false);
13+
return false;
14+
}
15+
if (pass.length < 8) {
16+
setIsValidPassword(false);
17+
return false;
18+
}
19+
};
20+
21+
const checkValidUnlockWalletConfirmation = function checkValidUnlockWalletConfirmation(
22+
unlockWalletPassword,
23+
confirmation
24+
) {
25+
setArePasswordAndConfirmationEqual(true);
26+
let isValidUnlockPassword = true;
27+
if (!confirmation || confirmation.length < 8) {
28+
isValidUnlockPassword = false;
29+
}
30+
31+
if (unlockWalletPassword !== confirmation) {
32+
setArePasswordAndConfirmationEqual(false);
33+
isValidUnlockPassword = false;
34+
}
35+
36+
setValidUnlockWalletPassword(unlockWalletPassword, isValidUnlockPassword);
37+
return isValidUnlockPassword;
38+
};
39+
40+
const [
41+
arePasswordAndConfirmationEqual,
42+
setArePasswordAndConfirmationEqual
43+
] = useState(true);
44+
45+
const [password, setPassword] = useState('');
46+
const [confirmPassword, setConfirmPassword] = useState('');
47+
const [isValidPassword, setIsValidPassword] = useState(true);
48+
49+
return (
50+
<Form.Group>
51+
<Form.Label className="mt-5">Unlock wallet:</Form.Label>
52+
<Form.Group>
53+
<Form.Control
54+
type="password"
55+
id="password"
56+
name="password"
57+
placeholder="New password (min 8 chars)"
58+
value={password}
59+
isInvalid={!isValidPassword}
60+
onChange={event => setPassword(event.target.value)}
61+
onBlur={() => checkValidUnlockWalletPassword(password)}
62+
/>
63+
<Form.Label className="text-danger" hidden={isValidPassword}>
64+
<em className="text-danger">
65+
The password must have at least 8 chars.
66+
</em>
67+
</Form.Label>
68+
<Form.Control
69+
type="password"
70+
name="confirmPassword"
71+
id="confirmPassword"
72+
placeholder="Confirm password"
73+
value={confirmPassword}
74+
onChange={event => setConfirmPassword(event.target.value)}
75+
onBlur={() =>
76+
checkValidUnlockWalletConfirmation(password, confirmPassword)
77+
}
78+
className="mt-3"
79+
/>
80+
<Form.Text>
81+
<em className="text-danger">
82+
This key allows you to unlock your wallet every time you start it
83+
and to keep your account data in a more secure way.
84+
</em>
85+
</Form.Text>
86+
<Form.Label
87+
className="text-danger"
88+
hidden={arePasswordAndConfirmationEqual}
89+
>
90+
<em className="text-danger">
91+
password and confirmation must be the same.
92+
</em>
93+
</Form.Label>
94+
</Form.Group>
95+
</Form.Group>
96+
);
97+
};

‎examples/wallet/app/components/RestoreWalletFromMnemonic.js‎

Lines changed: 14 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,36 @@ import Container from 'react-bootstrap/Container';
66
import Row from 'react-bootstrap/Row';
77
import typeof { setAccountFromMnemonic as SetAccountFromMnemonic } from '../actions/account';
88
import { isValidMnemonic } from '../utils/mnemonic';
9+
import CreateUnlockWalletPassword from '../containers/CreateUnlockWalletPassword';
910

1011
type Props = {
11-
setAccountFromMnemonic: SetAccountFromMnemonic
12+
setAccountFromMnemonic: SetAccountFromMnemonic,
13+
unlockWalletPassword: string,
14+
isValidUnlockPassword: boolean
1215
};
1316

14-
export default ({ setAccountFromMnemonic }: Props) => {
17+
export default ({
18+
setAccountFromMnemonic,
19+
unlockWalletPassword,
20+
isValidUnlockPassword
21+
}: Props) => {
1522
const checkIsValidMnemonicPhrase = function checkIsValidMnemonicPhrase() {
1623
setIsMnemonicValid(isValidMnemonic(newMnemonicPhrase));
1724
};
1825

1926
const handleSubmitMnemonic = function handleSubmitMnemonic(event) {
2027
event.preventDefault();
2128
if (isValidMnemonic(newMnemonicPhrase)) {
22-
if (checkValidUnlockWalletPassword(password, confirmPassword)) {
29+
// TODO: ADD IF SENTENCE TO CHECK IF PASSWORD AND CONFIRM IS OK
30+
if (isValidUnlockPassword) {
2331
return setAccountFromMnemonic(
2432
newMnemonicPhrase,
2533
newMnemonicPassword,
26-
password
34+
unlockWalletPassword
2735
);
2836
}
29-
} else {
30-
setIsMnemonicValid(false);
3137
}
38+
setIsMnemonicValid(false);
3239
};
3340

3441
const [isMnemonicValid, setIsMnemonicValid] = useState(true);
@@ -37,35 +44,6 @@ export default ({ setAccountFromMnemonic }: Props) => {
3744

3845
const [newMnemonicPassword, setNewMnemonicPassword] = useState('');
3946

40-
const checkValidUnlockWalletPassword = function checkValidUnlockWalletPassword(
41-
pass,
42-
confirmation
43-
) {
44-
if (!pass && !confirmation) return true;
45-
if (pass !== confirmation) {
46-
setArePasswordAndConfirmationEqual(false);
47-
return false;
48-
}
49-
setArePasswordAndConfirmationEqual(true);
50-
51-
if (!/^[0-9a-zA-Z]{8,}$/.test(password)) {
52-
setIsValidPassword(false);
53-
return false;
54-
}
55-
56-
setIsValidPassword(true);
57-
return true;
58-
};
59-
60-
const [
61-
arePasswordAndConfirmationEqual,
62-
setArePasswordAndConfirmationEqual
63-
] = useState(true);
64-
65-
const [password, setPassword] = useState('');
66-
const [confirmPassword, setConfirmPassword] = useState('');
67-
const [isValidPassword, setIsValidPassword] = useState(true);
68-
6947
return (
7048
<Container>
7149
<Form onSubmit={handleSubmitMnemonic} className="mt-5">
@@ -109,46 +87,7 @@ export default ({ setAccountFromMnemonic }: Props) => {
10987
safer wallet seeds.
11088
</em>
11189
</Form.Text>
112-
<Form.Label className="mt-5">Unlock wallet:</Form.Label>
113-
<Form.Group>
114-
<Form.Control
115-
type="password"
116-
id="password"
117-
name="password"
118-
placeholder="New password (min 8 chars)"
119-
value={password}
120-
isInvalid={!isValidPassword}
121-
onChange={event => setPassword(event.target.value)}
122-
/>
123-
<Form.Label className="text-danger" hidden={isValidPassword}>
124-
<em className="text-danger">
125-
The password must have at least 8 chars.
126-
</em>
127-
</Form.Label>
128-
<Form.Control
129-
type="password"
130-
name="confirmPassword"
131-
id="confirmPassword"
132-
placeholder="Confirm password"
133-
value={confirmPassword}
134-
onChange={event => setConfirmPassword(event.target.value)}
135-
className="mt-3"
136-
/>
137-
<Form.Text>
138-
<em className="text-danger">
139-
This key allows you to unlock your wallet every time you start
140-
it and to keep your account data in a more secure way.
141-
</em>
142-
</Form.Text>
143-
<Form.Label
144-
className="text-danger"
145-
hidden={arePasswordAndConfirmationEqual}
146-
>
147-
<em className="text-danger">
148-
password and confirmation must be the same.
149-
</em>
150-
</Form.Label>
151-
</Form.Group>
90+
<CreateUnlockWalletPassword />
15291
</Form.Group>
15392
<Row className="justify-content-between">
15493
<Button variant="secondary" type="button">

‎examples/wallet/app/components/RestoreWalletFromPrivateKey.js‎

Lines changed: 12 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,30 @@ import Button from 'react-bootstrap/Button';
55
import Container from 'react-bootstrap/Container';
66
import Row from 'react-bootstrap/Row';
77
import typeof { setAccount as SetAccount } from '../actions/account';
8+
import CreateUnlockWalletPassword from '../containers/CreateUnlockWalletPassword';
89

910
type Props = {
10-
setAccount: SetAccount
11+
setAccount: SetAccount,
12+
unlockWalletPassword: string,
13+
isValidUnlockPassword: boolean
1114
};
1215

1316
// FIXME: this has no error handling, neither while parsing the address
1417
// nor when fetching the balance.
15-
export default ({ setAccount }: Props) => {
18+
export default ({
19+
setAccount,
20+
unlockWalletPassword,
21+
isValidUnlockPassword
22+
}: Props) => {
1623
const handleSubmit = function handleSubmit(event) {
1724
event.preventDefault();
18-
if (checkValidUnlockWalletPassword(password, confirmPassword)) {
19-
setAccount(newPrivateKey, password);
25+
if (isValidUnlockPassword) {
26+
setAccount(newPrivateKey, unlockWalletPassword);
2027
}
2128
};
2229

23-
const checkValidUnlockWalletPassword = function checkValidUnlockWalletPassword(
24-
pass,
25-
confirmation
26-
) {
27-
if (!pass && !confirmation) return true;
28-
if (pass.length < 8) {
29-
setIsValidPassword(false);
30-
return false;
31-
}
32-
setIsValidPassword(true);
33-
34-
if (pass !== confirmation) {
35-
setArePasswordAndConfirmationEqual(false);
36-
return false;
37-
}
38-
setArePasswordAndConfirmationEqual(true);
39-
return true;
40-
};
41-
42-
const [isValidPassword, setIsValidPassword] = useState(true);
4330
const [newPrivateKey, setNewPrivateKey] = useState('');
4431

45-
const [
46-
arePasswordAndConfirmationEqual,
47-
setArePasswordAndConfirmationEqual
48-
] = useState(true);
49-
50-
const [password, setPassword] = useState('');
51-
52-
const [confirmPassword, setConfirmPassword] = useState('');
53-
5432
return (
5533
<Container>
5634
<Form onSubmit={handleSubmit} className="mt-5">
@@ -70,39 +48,7 @@ export default ({ setAccount }: Props) => {
7048
ed25519e_sk15psr45hyqnpwcl8xd4lv0m32prenhh8kcltgte2305h5jgynndxect9274j0am0qmmd0snjuadnm6xkgssnkn2njvkg8et8qg0vevsgnwvmpl
7149
</em>
7250
</Form.Text>
73-
<Form.Group className="mt-3">
74-
<Form.Control
75-
type="password"
76-
id="password"
77-
name="password"
78-
placeholder="New password (min 8 chars)"
79-
value={password}
80-
isInvalid={!isValidPassword}
81-
onChange={event => setPassword(event.target.value)}
82-
/>
83-
<Form.Label hidden={isValidPassword}>
84-
<em className="text-danger">
85-
The password must have at least 8 chars.
86-
</em>
87-
</Form.Label>
88-
<Form.Control
89-
type="password"
90-
name="confirmPassword"
91-
id="confirmPassword"
92-
placeholder="Confirm password"
93-
value={confirmPassword}
94-
onChange={event => setConfirmPassword(event.target.value)}
95-
className="mt-3"
96-
/>
97-
<Form.Label
98-
className="text-danger"
99-
hidden={arePasswordAndConfirmationEqual}
100-
>
101-
<em className="text-danger">
102-
Password and confirmation must be the same.
103-
</em>
104-
</Form.Label>
105-
</Form.Group>
51+
<CreateUnlockWalletPassword />
10652
</Form.Group>
10753
<Row className="justify-content-center">
10854
<Button variant="primary" type="submit">

‎examples/wallet/app/containers/CreateUnlockWalletPassword.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// @flow
2+
import { connect } from 'react-redux';
3+
import CreateUnlockWalletPassword from '../components/CreateUnlockWalletPassword';
4+
import { SET_VALID_UNLOCK_WALLET_PASSWORD } from '../actions/account';
5+
6+
function mapDispatchToProps(dispatch) {
7+
return {
8+
setValidUnlockWalletPassword: (
9+
unlockWalletPassword: string,
10+
isValidUnlockPassword: boolean
11+
) =>
12+
dispatch({
13+
type: SET_VALID_UNLOCK_WALLET_PASSWORD,
14+
unlockWalletPassword,
15+
isValidUnlockPassword
16+
})
17+
};
18+
}
19+
20+
export default connect(
21+
undefined,
22+
mapDispatchToProps
23+
)(CreateUnlockWalletPassword);

‎examples/wallet/app/containers/RestoreWalletFromMnemonic.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
// @flow
22
import { bindActionCreators } from 'redux';
33
import { connect } from 'react-redux';
4+
import type { AppState } from '../reducers/types';
45
import RestoreWalletFromMnemonic from '../components/RestoreWalletFromMnemonic';
56
import { setAccountFromMnemonic } from '../actions/account';
67

8+
function mapStateToProps(state: AppState) {
9+
const { unlockWalletPassword, isValidUnlockPassword } = state.account;
10+
return { unlockWalletPassword, isValidUnlockPassword };
11+
}
12+
713
function mapDispatchToProps(dispatch) {
814
return bindActionCreators({ setAccountFromMnemonic }, dispatch);
915
}
1016

1117
export default connect(
12-
undefined,
18+
mapStateToProps,
1319
mapDispatchToProps
1420
)(RestoreWalletFromMnemonic);

0 commit comments

Comments
 (0)