diff options
author | vantezzen <properly@protonmail.com> | 2019-09-17 12:14:48 +0200 |
---|---|---|
committer | vantezzen <properly@protonmail.com> | 2019-09-17 12:14:48 +0200 |
commit | d14071f3503f768c9c0e040dee549be6a6b40e5f (patch) | |
tree | b6c945c8b4baf31344dbabd2ac555559285ebec6 /src/components/auth/Locked.js | |
parent | Add "npm run prepare-code" command (diff) | |
download | ferdium-app-d14071f3503f768c9c0e040dee549be6a6b40e5f.tar.gz ferdium-app-d14071f3503f768c9c0e040dee549be6a6b40e5f.tar.zst ferdium-app-d14071f3503f768c9c0e040dee549be6a6b40e5f.zip |
Implement #41
Diffstat (limited to 'src/components/auth/Locked.js')
-rw-r--r-- | src/components/auth/Locked.js | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js new file mode 100644 index 000000000..045621d0a --- /dev/null +++ b/src/components/auth/Locked.js | |||
@@ -0,0 +1,115 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import Form from '../../lib/Form'; | ||
7 | import { required } from '../../helpers/validation-helpers'; | ||
8 | import Input from '../ui/Input'; | ||
9 | import Button from '../ui/Button'; | ||
10 | import Infobox from '../ui/Infobox'; | ||
11 | |||
12 | import { globalError as globalErrorPropType } from '../../prop-types'; | ||
13 | |||
14 | const messages = defineMessages({ | ||
15 | headline: { | ||
16 | id: 'locked.headline', | ||
17 | defaultMessage: '!!!Locked', | ||
18 | }, | ||
19 | info: { | ||
20 | id: 'locked.info', | ||
21 | defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.', | ||
22 | }, | ||
23 | passwordLabel: { | ||
24 | id: 'locked.password.label', | ||
25 | defaultMessage: '!!!Password', | ||
26 | }, | ||
27 | submitButtonLabel: { | ||
28 | id: 'locked.submit.label', | ||
29 | defaultMessage: '!!!Unlock', | ||
30 | }, | ||
31 | invalidCredentials: { | ||
32 | id: 'locked.invalidCredentials', | ||
33 | defaultMessage: '!!!Password invalid', | ||
34 | }, | ||
35 | }); | ||
36 | |||
37 | export default @observer class Locked extends Component { | ||
38 | static propTypes = { | ||
39 | onSubmit: PropTypes.func.isRequired, | ||
40 | isSubmitting: PropTypes.bool.isRequired, | ||
41 | error: globalErrorPropType.isRequired, | ||
42 | }; | ||
43 | |||
44 | static contextTypes = { | ||
45 | intl: intlShape, | ||
46 | }; | ||
47 | |||
48 | form = new Form({ | ||
49 | fields: { | ||
50 | password: { | ||
51 | label: this.context.intl.formatMessage(messages.passwordLabel), | ||
52 | value: '', | ||
53 | validators: [required], | ||
54 | type: 'password', | ||
55 | }, | ||
56 | }, | ||
57 | }, this.context.intl); | ||
58 | |||
59 | submit(e) { | ||
60 | e.preventDefault(); | ||
61 | this.form.submit({ | ||
62 | onSuccess: (form) => { | ||
63 | this.props.onSubmit(form.values()); | ||
64 | }, | ||
65 | onError: () => { }, | ||
66 | }); | ||
67 | } | ||
68 | |||
69 | render() { | ||
70 | const { form } = this; | ||
71 | const { intl } = this.context; | ||
72 | const { | ||
73 | isSubmitting, | ||
74 | error, | ||
75 | } = this.props; | ||
76 | |||
77 | return ( | ||
78 | <div className="auth__container"> | ||
79 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
80 | <img | ||
81 | src="./assets/images/logo.svg" | ||
82 | className="auth__logo" | ||
83 | alt="" | ||
84 | /> | ||
85 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
86 | <Infobox type="warning"> | ||
87 | {intl.formatMessage(messages.info)} | ||
88 | </Infobox> | ||
89 | <Input | ||
90 | field={form.$('password')} | ||
91 | showPasswordToggle | ||
92 | /> | ||
93 | {error.code === 'invalid-credentials' && ( | ||
94 | <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p> | ||
95 | )} | ||
96 | {isSubmitting ? ( | ||
97 | <Button | ||
98 | className="auth__button is-loading" | ||
99 | buttonType="secondary" | ||
100 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | ||
101 | loaded={false} | ||
102 | disabled | ||
103 | /> | ||
104 | ) : ( | ||
105 | <Button | ||
106 | type="submit" | ||
107 | className="auth__button" | ||
108 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
109 | /> | ||
110 | )} | ||
111 | </form> | ||
112 | </div> | ||
113 | ); | ||
114 | } | ||
115 | } | ||