diff options
Diffstat (limited to 'src/components/auth/Password.js')
-rw-r--r-- | src/components/auth/Password.js | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js new file mode 100644 index 000000000..d2b196853 --- /dev/null +++ b/src/components/auth/Password.js | |||
@@ -0,0 +1,135 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import Form from '../../lib/Form'; | ||
7 | import { required, email } from '../../helpers/validation-helpers'; | ||
8 | import Input from '../ui/Input'; | ||
9 | import Button from '../ui/Button'; | ||
10 | import Link from '../ui/Link'; | ||
11 | import Infobox from '../ui/Infobox'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | headline: { | ||
15 | id: 'password.headline', | ||
16 | defaultMessage: '!!!Forgot password', | ||
17 | }, | ||
18 | emailLabel: { | ||
19 | id: 'password.email.label', | ||
20 | defaultMessage: '!!!Email address', | ||
21 | }, | ||
22 | submitButtonLabel: { | ||
23 | id: 'password.submit.label', | ||
24 | defaultMessage: '!!!Submit', | ||
25 | }, | ||
26 | successInfo: { | ||
27 | id: 'password.successInfo', | ||
28 | defaultMessage: '!!!Your new password was sent to your email address', | ||
29 | }, | ||
30 | noUser: { | ||
31 | id: 'password.noUser', | ||
32 | defaultMessage: '!!!No user affiliated with that email address', | ||
33 | }, | ||
34 | signupLink: { | ||
35 | id: 'password.link.signup', | ||
36 | defaultMessage: '!!!Create a free account', | ||
37 | }, | ||
38 | loginLink: { | ||
39 | id: 'password.link.login', | ||
40 | defaultMessage: '!!!Sign in to your account', | ||
41 | }, | ||
42 | }); | ||
43 | |||
44 | @observer | ||
45 | export default class Password extends Component { | ||
46 | static propTypes = { | ||
47 | onSubmit: PropTypes.func.isRequired, | ||
48 | isSubmitting: PropTypes.bool.isRequired, | ||
49 | signupRoute: PropTypes.string.isRequired, | ||
50 | loginRoute: PropTypes.string.isRequired, | ||
51 | status: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
52 | }; | ||
53 | |||
54 | static contextTypes = { | ||
55 | intl: intlShape, | ||
56 | }; | ||
57 | |||
58 | form = new Form({ | ||
59 | fields: { | ||
60 | email: { | ||
61 | label: this.context.intl.formatMessage(messages.emailLabel), | ||
62 | value: '', | ||
63 | validate: [required, email], | ||
64 | }, | ||
65 | }, | ||
66 | }, this.context.intl); | ||
67 | |||
68 | submit(e) { | ||
69 | e.preventDefault(); | ||
70 | this.form.submit({ | ||
71 | onSuccess: (form) => { | ||
72 | this.props.onSubmit(form.values()); | ||
73 | }, | ||
74 | onError: () => {}, | ||
75 | }); | ||
76 | } | ||
77 | |||
78 | render() { | ||
79 | const { form } = this; | ||
80 | const { intl } = this.context; | ||
81 | const { | ||
82 | isSubmitting, | ||
83 | signupRoute, | ||
84 | loginRoute, | ||
85 | status, | ||
86 | } = this.props; | ||
87 | |||
88 | return ( | ||
89 | <div className="auth__container"> | ||
90 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
91 | <img | ||
92 | src="./assets/images/logo.svg" | ||
93 | className="auth__logo" | ||
94 | alt="" | ||
95 | /> | ||
96 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
97 | {status.length > 0 && status.includes('sent') && ( | ||
98 | <Infobox | ||
99 | type="success" | ||
100 | icon="checkbox-marked-circle-outline" | ||
101 | > | ||
102 | {intl.formatMessage(messages.successInfo)} | ||
103 | </Infobox> | ||
104 | )} | ||
105 | <Input | ||
106 | field={form.$('email')} | ||
107 | focus | ||
108 | /> | ||
109 | {status.length > 0 && status.includes('no-user') && ( | ||
110 | <p className="error-message center">{intl.formatMessage(messages.noUser)}</p> | ||
111 | )} | ||
112 | {isSubmitting ? ( | ||
113 | <Button | ||
114 | className="auth__button is-loading" | ||
115 | buttonType="secondary" | ||
116 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | ||
117 | loaded={false} | ||
118 | disabled | ||
119 | /> | ||
120 | ) : ( | ||
121 | <Button | ||
122 | type="submit" | ||
123 | className="auth__button" | ||
124 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
125 | /> | ||
126 | )} | ||
127 | </form> | ||
128 | <div className="auth__links"> | ||
129 | <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link> | ||
130 | <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link> | ||
131 | </div> | ||
132 | </div> | ||
133 | ); | ||
134 | } | ||
135 | } | ||