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