diff options
author | 2022-11-02 06:31:36 +0530 | |
---|---|---|
committer | 2022-11-02 01:01:36 +0000 | |
commit | 302d595f7c289387e53a0ef7df4d574ed4e25d70 (patch) | |
tree | 2385e59eaca9c78921d9b0b3681cfba1b3eef168 /src/components/auth/Locked.js | |
parent | Re-enable editing of the address bar to manually access a different url withi... (diff) | |
download | ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.gz ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.zst ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.zip |
Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)
Diffstat (limited to 'src/components/auth/Locked.js')
-rw-r--r-- | src/components/auth/Locked.js | 148 |
1 files changed, 0 insertions, 148 deletions
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js deleted file mode 100644 index 6e32dd980..000000000 --- a/src/components/auth/Locked.js +++ /dev/null | |||
@@ -1,148 +0,0 @@ | |||
1 | import { systemPreferences } from '@electron/remote'; | ||
2 | import { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { observer } from 'mobx-react'; | ||
5 | import { defineMessages, injectIntl } from 'react-intl'; | ||
6 | |||
7 | import Form from '../../lib/Form'; | ||
8 | import Input from '../ui/Input'; | ||
9 | import Button from '../ui/button'; | ||
10 | import { H1 } from '../ui/headline'; | ||
11 | import { isMac } from '../../environment'; | ||
12 | |||
13 | import { globalError as globalErrorPropType } from '../../prop-types'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | headline: { | ||
17 | id: 'locked.headline', | ||
18 | defaultMessage: 'Locked', | ||
19 | }, | ||
20 | touchId: { | ||
21 | id: 'locked.touchId', | ||
22 | defaultMessage: 'Unlock with Touch ID', | ||
23 | }, | ||
24 | touchIdPrompt: { | ||
25 | id: 'locked.touchIdPrompt', | ||
26 | defaultMessage: 'unlock via Touch ID', | ||
27 | }, | ||
28 | passwordLabel: { | ||
29 | id: 'locked.password.label', | ||
30 | defaultMessage: 'Password', | ||
31 | }, | ||
32 | submitButtonLabel: { | ||
33 | id: 'locked.submit.label', | ||
34 | defaultMessage: 'Unlock', | ||
35 | }, | ||
36 | unlockWithPassword: { | ||
37 | id: 'locked.unlockWithPassword', | ||
38 | defaultMessage: 'Unlock with Password', | ||
39 | }, | ||
40 | invalidCredentials: { | ||
41 | id: 'locked.invalidCredentials', | ||
42 | defaultMessage: 'Password invalid', | ||
43 | }, | ||
44 | }); | ||
45 | |||
46 | class Locked extends Component { | ||
47 | static propTypes = { | ||
48 | onSubmit: PropTypes.func.isRequired, | ||
49 | unlock: PropTypes.func.isRequired, | ||
50 | isSubmitting: PropTypes.bool.isRequired, | ||
51 | useTouchIdToUnlock: PropTypes.bool.isRequired, | ||
52 | error: globalErrorPropType.isRequired, | ||
53 | }; | ||
54 | |||
55 | form = (() => { | ||
56 | const { intl } = this.props; | ||
57 | return new Form( | ||
58 | { | ||
59 | fields: { | ||
60 | password: { | ||
61 | label: intl.formatMessage(messages.passwordLabel), | ||
62 | value: '', | ||
63 | type: 'password', | ||
64 | }, | ||
65 | }, | ||
66 | }, | ||
67 | intl, | ||
68 | ); | ||
69 | })(); | ||
70 | |||
71 | submit(e) { | ||
72 | e.preventDefault(); | ||
73 | this.form.submit({ | ||
74 | onSuccess: form => { | ||
75 | this.props.onSubmit(form.values()); | ||
76 | }, | ||
77 | onError: () => {}, | ||
78 | }); | ||
79 | } | ||
80 | |||
81 | touchIdUnlock() { | ||
82 | const { intl } = this.props; | ||
83 | |||
84 | systemPreferences | ||
85 | .promptTouchID(intl.formatMessage(messages.touchIdPrompt)) | ||
86 | .then(() => { | ||
87 | this.props.unlock(); | ||
88 | }); | ||
89 | } | ||
90 | |||
91 | render() { | ||
92 | const { form } = this; | ||
93 | const { intl } = this.props; | ||
94 | const { isSubmitting, error, useTouchIdToUnlock } = this.props; | ||
95 | |||
96 | const touchIdEnabled = isMac | ||
97 | ? useTouchIdToUnlock && systemPreferences.canPromptTouchID() | ||
98 | : false; | ||
99 | const submitButtonLabel = touchIdEnabled | ||
100 | ? intl.formatMessage(messages.unlockWithPassword) | ||
101 | : intl.formatMessage(messages.submitButtonLabel); | ||
102 | |||
103 | return ( | ||
104 | <div className="auth__container"> | ||
105 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
106 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | ||
107 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
108 | |||
109 | {touchIdEnabled && ( | ||
110 | <> | ||
111 | <Button | ||
112 | className="auth__button touchid__button" | ||
113 | label={intl.formatMessage(messages.touchId)} | ||
114 | onClick={() => this.touchIdUnlock()} | ||
115 | type="button" | ||
116 | /> | ||
117 | <hr className="locked__or_line" /> | ||
118 | </> | ||
119 | )} | ||
120 | |||
121 | <Input field={form.$('password')} showPasswordToggle focus /> | ||
122 | {error.code === 'invalid-credentials' && ( | ||
123 | <p className="error-message center"> | ||
124 | {intl.formatMessage(messages.invalidCredentials)} | ||
125 | </p> | ||
126 | )} | ||
127 | {isSubmitting ? ( | ||
128 | <Button | ||
129 | className="auth__button is-loading" | ||
130 | buttonType="secondary" | ||
131 | label={`${submitButtonLabel} ...`} | ||
132 | loaded={false} | ||
133 | disabled | ||
134 | /> | ||
135 | ) : ( | ||
136 | <Button | ||
137 | type="submit" | ||
138 | className="auth__button" | ||
139 | label={submitButtonLabel} | ||
140 | /> | ||
141 | )} | ||
142 | </form> | ||
143 | </div> | ||
144 | ); | ||
145 | } | ||
146 | } | ||
147 | |||
148 | export default injectIntl(observer(Locked)); | ||