Your recovery code will not be erased
; 13 | } 14 | 15 | return{result ? '✓ Test succeeded' : '⚠ Please test your recovery code to proceed'}
; 16 | }; 17 | 18 | /** 19 | * Modal Form to test that a given code is one of the new recovery code. 20 | * @param {Object} props 21 | * @param {Function} props.onSubmit - triggers the next step. 22 | * @param {Function} props.onCancel - triggers the previous step. 23 | * @returns {ModalWrapper} 24 | */ 25 | export const FormTestCode = ({ 26 | onSubmit, 27 | onCancel, 28 | settings: { 29 | reset2FARecoveryCodes: { result, response = {} } 30 | }, 31 | reset2FARecoveryCodesCheckNewCodeAction 32 | }) => { 33 | const model = { code: response.code }; 34 | 35 | return ( 36 |48 | Test your recovery codes by entering one of your codes below. If you did not save your recovery 49 | codes, go back and save them. 50 |
51 |
52 |
53 |
71 |
54 | {
56 | model.code = code;
57 | if (code.length === 8) {
58 | reset2FARecoveryCodesCheckNewCodeAction(model.code);
59 | }
60 | }}
61 | required
62 | value={model.code}
63 | type="code"
64 | id="verifyCode"
65 | placeholder="Code"
66 | disabled={!!result}
67 | autoFocus
68 | />
69 |
70 | {renderInfo(result)}
72 | Test your new 2FA method:
56 |
57 |
58 |
75 |
59 | {
61 | this.setState({ code });
62 | }}
63 | required
64 | value={this.state.code}
65 | disabled={this.state.loading}
66 | type="code"
67 | id="verifyCode"
68 | placeholder="Code"
69 | minLength="6"
70 | maxLength="6"
71 | autoFocus
72 | />
73 |
74 | Loading...
; 45 | } 46 | return [ 47 |-
48 | {codes.map((code) => (
49 |
-
50 |
{code}51 |
52 | ))}
53 |
55 | this.downloadClicked()}>DOWNLOAD CODES
56 |
57 | COPY CODES
58 |
59 |
60 | ];
61 | }
62 |
63 | /**
64 | * renders the content of the modal.
65 | * @returns {ModalContent}
66 | */
67 | renderContent() {
68 | const {
69 | settings: {
70 | reset2FARecoveryCodes: { request: { codes } = {} }
71 | }
72 | } = this.props;
73 |
74 | return (
75 | 77 | Please keep your recovery codes in a safe place. Otherwise, you can permanently lose access to your 78 | account if you loose your 2FA device 79 |
80 |Each recovery code can only be used once
81 | {this.renderCodes(codes)} 82 |
63 |
76 | );
77 | }
78 | const { metaData: { code } = {} } = error;
79 | if (code) {
80 | return (
81 |
64 | Activate your key
65 |
66 | {status || 'fetching'}
67 | ...
68 |
69 |
70 |
71 |
72 | Name
73 | {name}
74 |
75 |
82 | {getErrorMessage(code, true)}
83 | this.props.addU2FKeyRegisterAction()}>Retry
84 |
85 | );
86 | }
87 |
88 | this.props.onReset(error.message);
89 | }
90 |
91 | render() {
92 | const {
93 | settings: {
94 | addU2FKey: { status }
95 | }
96 | } = this.props;
97 |
98 | return (
99 |
21 |
34 | {this.props.message || 35 | 'Scan this QR code with your two factor authentication device to set up your account. '} 36 |
37 | {this.renderSwitchModeButton()} 38 | {qrURI ?Loading...
} 39 |49 | {this.props.message || 50 | 'Manually enter this information into your two factor authentication device to set up your account. '} 51 |
52 | {this.renderSwitchModeButton()} 53 | 54 | {secret ? ( 55 |
56 |
75 | ) : (
76 |
57 |
58 |
59 |
62 | {secret}
60 |
61 |
63 |
64 |
65 |
68 | {interval} seconds
66 |
67 |
69 |
70 |
71 |
74 | {digits} digits
72 |
73 | Loading...
77 | )} 78 |
5 |
17 | `;
18 |
19 | exports[`TwoFactorSettings Everything enable 1`] = `
20 | Two-Factor Authentication
6 |Two-factor authentication is currently off.
7 |
8 |
11 | 2FA via Application
9 |
10 |
12 |
15 | 2FA via Security Key
13 |
14 |
21 |
58 | `;
59 |
60 | exports[`TwoFactorSettings TOTP only enable 1`] = `
61 | Two-Factor Authentication
22 |Two-factor authentication is currently on.
23 | Turn off
24 |
25 |
26 |
34 | 2FA via Application
27 |
28 |
29 | Regenerate recovery codes
30 | i
32 |
33 |
35 |
38 |
57 | 2FA via Security Key
36 |
37 |
62 |
81 | `;
82 |
83 | exports[`TwoFactorSettings U2F not supported 1`] = `
84 | Two-Factor Authentication
63 |Two-factor authentication is currently on.
64 | Turn off
65 |
66 |
67 |
75 | 2FA via Application
68 |
69 |
70 | Regenerate recovery codes
71 | i
73 |
74 |
76 |
79 | 2FA via Security Key
77 |
78 |
85 |
113 | `;
114 |
115 | exports[`TwoFactorSettings U2F only enable 1`] = `
116 | Two-Factor Authentication
86 |Two-factor authentication is currently on.
87 | Turn off
88 |
89 |
90 |
98 | 2FA via Application
91 |
92 |
93 | Regenerate recovery codes
94 | i
96 |
97 |
99 |
102 |
112 | 2FA via Security Key
100 |
101 |
117 |
154 | `;
155 |
--------------------------------------------------------------------------------
/src/components/settings/security/TwoFactor/index.js:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import { connect } from 'unistore/full/preact';
3 | import { isSupported } from 'u2f-api';
4 |
5 | import U2FKeyList from './U2FKeyList/U2FKeyList';
6 | import SteppedModal from '../../../ui/SteppedModal';
7 | import ConfirmModal from '../../../ui/ConfirmModal';
8 | import TextButton from '../../../ui/TextButton';
9 | import settingsAction from '../../../../actions/settings';
10 | import {
11 | steps as SaveRecoveryCodesSteps,
12 | beforeDismiss as SaveRecoveryCodesBeforeDismiss
13 | } from './SaveRecoveryCodeModal';
14 | import { beforeDismiss as AddU2FModalBeforeDismiss, steps as AddU2FModalSteps } from './AddU2FModal';
15 | import { beforeDismiss as SetupTOTPModalBeforeDismiss, steps as SetupTOTPModalSteps } from './SetupTOTPModal';
16 |
17 | import style from './style.css';
18 |
19 | /**
20 | * @param {Object} props
21 | * @param {Object} props.user
22 | * @param {Int} props.user.TwoFactor - whether 2FA is active or not.
23 | * @param {Int} props.user.TOTP - whether TOTP is active or not.
24 | * @param {Object[]} props.user.U2FKeys - the list of U2FKeys.
25 | * @param {Int} props.user.U2FKeys[].Compromised - whether the key is Compromised or not.
26 | * @param {String} props.user.U2FKeys[].KeyHandle - the KeyHandle of the U2FKey.
27 | * @param {String} props.user.U2FKeys[].Label - the Label of the Key.
28 | */
29 | class TwoFactorSettings extends Component {
30 | state = {
31 | modal: '',
32 | SaveRecoveryCodesModalOpen: false,
33 | U2FModalOpen: false,
34 | DisableU2FModalOpen: false
35 | };
36 |
37 | openModal(modalName) {
38 | this.setState({ modal: modalName });
39 | }
40 |
41 | closeModal() {
42 | this.setState({ modal: '' });
43 | }
44 |
45 | renderDisableTwoFactorModal() {
46 | return (
47 | Two-Factor Authentication
118 |Two-factor authentication is currently on.
119 | Turn off
120 |
121 |
122 |
130 | 2FA via Application
123 |
124 |
125 | Regenerate recovery codes
126 | i
128 |
129 |
131 |
134 |
153 | 2FA via Security Key
132 |
133 | Are you sure you want to disable totally Two Factor Authentication?
58 | Are you sure you want to disable 2FA via application?
75 |
122 | {this.renderDisableTwoFactorModal()}
123 | {this.renderSetupTOTPModal()}
124 | {this.renderDisableTOTPModal()}
125 | {this.renderAddU2FModal()}
126 | {this.renderSaveRecoveryCodesModal()}
127 |
164 | );
165 | }
166 | }
167 |
168 | export default connect(
169 | 'settings',
170 | settingsAction
171 | )(TwoFactorSettings);
172 |
--------------------------------------------------------------------------------
Two-Factor Authentication
128 |
129 | Two-factor authentication is currently {TwoFactor ? 'on' : 'off'}.{' '}
130 | {!!TwoFactor && this.openModal('Disable2FA')}>Turn off }
131 |
132 |
133 |
152 | 2FA via Application
134 |
137 | {!!TwoFactor && (
138 |
139 | this.openModal('SaveRecoveryCodes')}>
140 | Regenerate recovery codes
141 |
142 |
147 | i
148 |
149 |
150 | )}
151 |
153 |
162 | 2FA via Security Key
154 |
161 |