diff options
author | Bennett <hello@vantezzen.io> | 2020-03-03 17:53:09 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-03-03 17:53:09 +0100 |
commit | e043795a040b8666a6ad253bb6cd37a5d647bbd5 (patch) | |
tree | d14e1237d49687742901d515c95d7d2c5fbe069f /src/components/auth | |
parent | Add Crowdin contributors to list of contributors (#429) (diff) | |
download | ferdium-app-e043795a040b8666a6ad253bb6cd37a5d647bbd5.tar.gz ferdium-app-e043795a040b8666a6ad253bb6cd37a5d647bbd5.tar.zst ferdium-app-e043795a040b8666a6ad253bb6cd37a5d647bbd5.zip |
Add support for unlocking with Touch ID (#423)
* Enhance installation guide in README
* Add TouchID unlock for Ferdi Lock
* Remove commit 8861014 as it is not related to this feature
This reverts commit 88610144b942739772286ec3073b328e829a8b39.
* Rename TouchID to "Touch ID"
* Improve Touch ID prompt text
* Improve unlocking with Touch ID
* Fix lint
* Add separator after lock-related menu entry
Co-authored-by: Amine <amine@mouafik.fr>
Diffstat (limited to 'src/components/auth')
-rw-r--r-- | src/components/auth/Locked.js | 48 |
1 files changed, 46 insertions, 2 deletions
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js index e7f3dc78b..6142e78c6 100644 --- a/src/components/auth/Locked.js +++ b/src/components/auth/Locked.js | |||
@@ -1,3 +1,4 @@ | |||
1 | import { remote } from 'electron'; | ||
1 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
@@ -10,6 +11,10 @@ import Infobox from '../ui/Infobox'; | |||
10 | 11 | ||
11 | import { globalError as globalErrorPropType } from '../../prop-types'; | 12 | import { globalError as globalErrorPropType } from '../../prop-types'; |
12 | 13 | ||
14 | const { | ||
15 | systemPreferences, | ||
16 | } = remote; | ||
17 | |||
13 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
14 | headline: { | 19 | headline: { |
15 | id: 'locked.headline', | 20 | id: 'locked.headline', |
@@ -19,6 +24,14 @@ const messages = defineMessages({ | |||
19 | id: 'locked.info', | 24 | id: 'locked.info', |
20 | defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.', | 25 | defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.', |
21 | }, | 26 | }, |
27 | touchId: { | ||
28 | id: 'locked.touchId', | ||
29 | defaultMessage: '!!!Unlock with Touch ID', | ||
30 | }, | ||
31 | touchIdPrompt: { | ||
32 | id: 'locked.touchIdPrompt', | ||
33 | defaultMessage: '!!!unlock via Touch ID', | ||
34 | }, | ||
22 | passwordLabel: { | 35 | passwordLabel: { |
23 | id: 'locked.password.label', | 36 | id: 'locked.password.label', |
24 | defaultMessage: '!!!Password', | 37 | defaultMessage: '!!!Password', |
@@ -27,6 +40,10 @@ const messages = defineMessages({ | |||
27 | id: 'locked.submit.label', | 40 | id: 'locked.submit.label', |
28 | defaultMessage: '!!!Unlock', | 41 | defaultMessage: '!!!Unlock', |
29 | }, | 42 | }, |
43 | unlockWithPassword: { | ||
44 | id: 'locked.unlockWithPassword', | ||
45 | defaultMessage: '!!!Unlock with Password', | ||
46 | }, | ||
30 | invalidCredentials: { | 47 | invalidCredentials: { |
31 | id: 'locked.invalidCredentials', | 48 | id: 'locked.invalidCredentials', |
32 | defaultMessage: '!!!Password invalid', | 49 | defaultMessage: '!!!Password invalid', |
@@ -36,7 +53,9 @@ const messages = defineMessages({ | |||
36 | export default @observer class Locked extends Component { | 53 | export default @observer class Locked extends Component { |
37 | static propTypes = { | 54 | static propTypes = { |
38 | onSubmit: PropTypes.func.isRequired, | 55 | onSubmit: PropTypes.func.isRequired, |
56 | unlock: PropTypes.func.isRequired, | ||
39 | isSubmitting: PropTypes.bool.isRequired, | 57 | isSubmitting: PropTypes.bool.isRequired, |
58 | useTouchIdToUnlock: PropTypes.bool.isRequired, | ||
40 | error: globalErrorPropType.isRequired, | 59 | error: globalErrorPropType.isRequired, |
41 | }; | 60 | }; |
42 | 61 | ||
@@ -64,14 +83,26 @@ export default @observer class Locked extends Component { | |||
64 | }); | 83 | }); |
65 | } | 84 | } |
66 | 85 | ||
86 | touchIdUnlock() { | ||
87 | const { intl } = this.context; | ||
88 | |||
89 | systemPreferences.promptTouchID(intl.formatMessage(messages.touchIdPrompt)).then(() => { | ||
90 | this.props.unlock(); | ||
91 | }); | ||
92 | } | ||
93 | |||
67 | render() { | 94 | render() { |
68 | const { form } = this; | 95 | const { form } = this; |
69 | const { intl } = this.context; | 96 | const { intl } = this.context; |
70 | const { | 97 | const { |
71 | isSubmitting, | 98 | isSubmitting, |
72 | error, | 99 | error, |
100 | useTouchIdToUnlock, | ||
73 | } = this.props; | 101 | } = this.props; |
74 | 102 | ||
103 | const touchIdEnabled = useTouchIdToUnlock && systemPreferences.canPromptTouchID(); | ||
104 | const submitButtonLabel = touchIdEnabled ? intl.formatMessage(messages.unlockWithPassword) : intl.formatMessage(messages.submitButtonLabel); | ||
105 | |||
75 | return ( | 106 | return ( |
76 | <div className="auth__container"> | 107 | <div className="auth__container"> |
77 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 108 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
@@ -84,6 +115,19 @@ export default @observer class Locked extends Component { | |||
84 | <Infobox type="warning"> | 115 | <Infobox type="warning"> |
85 | {intl.formatMessage(messages.info)} | 116 | {intl.formatMessage(messages.info)} |
86 | </Infobox> | 117 | </Infobox> |
118 | |||
119 | {touchIdEnabled && ( | ||
120 | <> | ||
121 | <Button | ||
122 | className="auth__button touchid__button" | ||
123 | label={intl.formatMessage(messages.touchId)} | ||
124 | onClick={() => this.touchIdUnlock()} | ||
125 | type="button" | ||
126 | /> | ||
127 | <hr className="locked__or_line" /> | ||
128 | </> | ||
129 | )} | ||
130 | |||
87 | <Input | 131 | <Input |
88 | field={form.$('password')} | 132 | field={form.$('password')} |
89 | showPasswordToggle | 133 | showPasswordToggle |
@@ -96,7 +140,7 @@ export default @observer class Locked extends Component { | |||
96 | <Button | 140 | <Button |
97 | className="auth__button is-loading" | 141 | className="auth__button is-loading" |
98 | buttonType="secondary" | 142 | buttonType="secondary" |
99 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | 143 | label={`${submitButtonLabel} ...`} |
100 | loaded={false} | 144 | loaded={false} |
101 | disabled | 145 | disabled |
102 | /> | 146 | /> |
@@ -104,7 +148,7 @@ export default @observer class Locked extends Component { | |||
104 | <Button | 148 | <Button |
105 | type="submit" | 149 | type="submit" |
106 | className="auth__button" | 150 | className="auth__button" |
107 | label={intl.formatMessage(messages.submitButtonLabel)} | 151 | label={submitButtonLabel} |
108 | /> | 152 | /> |
109 | )} | 153 | )} |
110 | </form> | 154 | </form> |