diff options
Diffstat (limited to 'src/components/auth/Locked.js')
-rw-r--r-- | src/components/auth/Locked.js | 97 |
1 files changed, 47 insertions, 50 deletions
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js index 2ad8a2409..a507ba140 100644 --- a/src/components/auth/Locked.js +++ b/src/components/auth/Locked.js | |||
@@ -2,7 +2,7 @@ import { systemPreferences } from '@electron/remote'; | |||
2 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | 6 | ||
7 | import Form from '../../lib/Form'; | 7 | import Form from '../../lib/Form'; |
8 | import Input from '../ui/Input'; | 8 | import Input from '../ui/Input'; |
@@ -15,39 +15,41 @@ import { globalError as globalErrorPropType } from '../../prop-types'; | |||
15 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | headline: { | 16 | headline: { |
17 | id: 'locked.headline', | 17 | id: 'locked.headline', |
18 | defaultMessage: '!!!Locked', | 18 | defaultMessage: 'Locked', |
19 | }, | 19 | }, |
20 | info: { | 20 | info: { |
21 | id: 'locked.info', | 21 | id: 'locked.info', |
22 | defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.', | 22 | defaultMessage: |
23 | 'Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.', | ||
23 | }, | 24 | }, |
24 | touchId: { | 25 | touchId: { |
25 | id: 'locked.touchId', | 26 | id: 'locked.touchId', |
26 | defaultMessage: '!!!Unlock with Touch ID', | 27 | defaultMessage: 'Unlock with Touch ID', |
27 | }, | 28 | }, |
28 | touchIdPrompt: { | 29 | touchIdPrompt: { |
29 | id: 'locked.touchIdPrompt', | 30 | id: 'locked.touchIdPrompt', |
30 | defaultMessage: '!!!unlock via Touch ID', | 31 | defaultMessage: 'unlock via Touch ID', |
31 | }, | 32 | }, |
32 | passwordLabel: { | 33 | passwordLabel: { |
33 | id: 'locked.password.label', | 34 | id: 'locked.password.label', |
34 | defaultMessage: '!!!Password', | 35 | defaultMessage: 'Password', |
35 | }, | 36 | }, |
36 | submitButtonLabel: { | 37 | submitButtonLabel: { |
37 | id: 'locked.submit.label', | 38 | id: 'locked.submit.label', |
38 | defaultMessage: '!!!Unlock', | 39 | defaultMessage: 'Unlock', |
39 | }, | 40 | }, |
40 | unlockWithPassword: { | 41 | unlockWithPassword: { |
41 | id: 'locked.unlockWithPassword', | 42 | id: 'locked.unlockWithPassword', |
42 | defaultMessage: '!!!Unlock with Password', | 43 | defaultMessage: 'Unlock with Password', |
43 | }, | 44 | }, |
44 | invalidCredentials: { | 45 | invalidCredentials: { |
45 | id: 'locked.invalidCredentials', | 46 | id: 'locked.invalidCredentials', |
46 | defaultMessage: '!!!Password invalid', | 47 | defaultMessage: 'Password invalid', |
47 | }, | 48 | }, |
48 | }); | 49 | }); |
49 | 50 | ||
50 | export default @observer class Locked extends Component { | 51 | @observer |
52 | class Locked extends Component { | ||
51 | static propTypes = { | 53 | static propTypes = { |
52 | onSubmit: PropTypes.func.isRequired, | 54 | onSubmit: PropTypes.func.isRequired, |
53 | unlock: PropTypes.func.isRequired, | 55 | unlock: PropTypes.func.isRequired, |
@@ -56,62 +58,57 @@ export default @observer class Locked extends Component { | |||
56 | error: globalErrorPropType.isRequired, | 58 | error: globalErrorPropType.isRequired, |
57 | }; | 59 | }; |
58 | 60 | ||
59 | static contextTypes = { | 61 | form = new Form( |
60 | intl: intlShape, | 62 | { |
61 | }; | 63 | fields: { |
62 | 64 | password: { | |
63 | form = new Form({ | 65 | label: this.props.intl.formatMessage(messages.passwordLabel), |
64 | fields: { | 66 | value: '', |
65 | password: { | 67 | type: 'password', |
66 | label: this.context.intl.formatMessage(messages.passwordLabel), | 68 | }, |
67 | value: '', | ||
68 | type: 'password', | ||
69 | }, | 69 | }, |
70 | }, | 70 | }, |
71 | }, this.context.intl); | 71 | this.props.intl, |
72 | ); | ||
72 | 73 | ||
73 | submit(e) { | 74 | submit(e) { |
74 | e.preventDefault(); | 75 | e.preventDefault(); |
75 | this.form.submit({ | 76 | this.form.submit({ |
76 | onSuccess: (form) => { | 77 | onSuccess: form => { |
77 | this.props.onSubmit(form.values()); | 78 | this.props.onSubmit(form.values()); |
78 | }, | 79 | }, |
79 | onError: () => { }, | 80 | onError: () => {}, |
80 | }); | 81 | }); |
81 | } | 82 | } |
82 | 83 | ||
83 | touchIdUnlock() { | 84 | touchIdUnlock() { |
84 | const { intl } = this.context; | 85 | const { intl } = this.props; |
85 | 86 | ||
86 | systemPreferences.promptTouchID(intl.formatMessage(messages.touchIdPrompt)).then(() => { | 87 | systemPreferences |
87 | this.props.unlock(); | 88 | .promptTouchID(intl.formatMessage(messages.touchIdPrompt)) |
88 | }); | 89 | .then(() => { |
90 | this.props.unlock(); | ||
91 | }); | ||
89 | } | 92 | } |
90 | 93 | ||
91 | render() { | 94 | render() { |
92 | const { form } = this; | 95 | const { form } = this; |
93 | const { intl } = this.context; | 96 | const { intl } = this.props; |
94 | const { | 97 | const { isSubmitting, error, useTouchIdToUnlock } = this.props; |
95 | isSubmitting, | ||
96 | error, | ||
97 | useTouchIdToUnlock, | ||
98 | } = this.props; | ||
99 | 98 | ||
100 | const touchIdEnabled = isMac ? (useTouchIdToUnlock && systemPreferences.canPromptTouchID()) : false; | 99 | const touchIdEnabled = isMac |
101 | const submitButtonLabel = touchIdEnabled ? intl.formatMessage(messages.unlockWithPassword) : intl.formatMessage(messages.submitButtonLabel); | 100 | ? useTouchIdToUnlock && systemPreferences.canPromptTouchID() |
101 | : false; | ||
102 | const submitButtonLabel = touchIdEnabled | ||
103 | ? intl.formatMessage(messages.unlockWithPassword) | ||
104 | : intl.formatMessage(messages.submitButtonLabel); | ||
102 | 105 | ||
103 | return ( | 106 | return ( |
104 | <div className="auth__container"> | 107 | <div className="auth__container"> |
105 | <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}> | 108 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
106 | <img | 109 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
107 | src="./assets/images/logo.svg" | ||
108 | className="auth__logo" | ||
109 | alt="" | ||
110 | /> | ||
111 | <h1>{intl.formatMessage(messages.headline)}</h1> | 110 | <h1>{intl.formatMessage(messages.headline)}</h1> |
112 | <Infobox type="warning"> | 111 | <Infobox type="warning">{intl.formatMessage(messages.info)}</Infobox> |
113 | {intl.formatMessage(messages.info)} | ||
114 | </Infobox> | ||
115 | 112 | ||
116 | {touchIdEnabled && ( | 113 | {touchIdEnabled && ( |
117 | <> | 114 | <> |
@@ -125,13 +122,11 @@ export default @observer class Locked extends Component { | |||
125 | </> | 122 | </> |
126 | )} | 123 | )} |
127 | 124 | ||
128 | <Input | 125 | <Input field={form.$('password')} showPasswordToggle focus /> |
129 | field={form.$('password')} | ||
130 | showPasswordToggle | ||
131 | focus | ||
132 | /> | ||
133 | {error.code === 'invalid-credentials' && ( | 126 | {error.code === 'invalid-credentials' && ( |
134 | <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p> | 127 | <p className="error-message center"> |
128 | {intl.formatMessage(messages.invalidCredentials)} | ||
129 | </p> | ||
135 | )} | 130 | )} |
136 | {isSubmitting ? ( | 131 | {isSubmitting ? ( |
137 | <Button | 132 | <Button |
@@ -153,3 +148,5 @@ export default @observer class Locked extends Component { | |||
153 | ); | 148 | ); |
154 | } | 149 | } |
155 | } | 150 | } |
151 | |||
152 | export default injectIntl(Locked); | ||