diff options
author | 2017-10-13 12:29:40 +0200 | |
---|---|---|
committer | 2017-10-13 12:29:40 +0200 | |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/auth/Login.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/auth/Login.js')
-rw-r--r-- | src/components/auth/Login.js | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js new file mode 100644 index 000000000..015079f02 --- /dev/null +++ b/src/components/auth/Login.js | |||
@@ -0,0 +1,161 @@ | |||
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, email } from '../../helpers/validation-helpers'; | ||
8 | import Input from '../ui/Input'; | ||
9 | import Button from '../ui/Button'; | ||
10 | import Link from '../ui/Link'; | ||
11 | |||
12 | import { globalError as globalErrorPropType } from '../../prop-types'; | ||
13 | |||
14 | // import Appear from '../ui/effects/Appear'; | ||
15 | |||
16 | const messages = defineMessages({ | ||
17 | headline: { | ||
18 | id: 'login.headline', | ||
19 | defaultMessage: '!!!Sign in', | ||
20 | }, | ||
21 | emailLabel: { | ||
22 | id: 'login.email.label', | ||
23 | defaultMessage: '!!!Email address', | ||
24 | }, | ||
25 | passwordLabel: { | ||
26 | id: 'login.password.label', | ||
27 | defaultMessage: '!!!Password', | ||
28 | }, | ||
29 | submitButtonLabel: { | ||
30 | id: 'login.submit.label', | ||
31 | defaultMessage: '!!!Sign in', | ||
32 | }, | ||
33 | invalidCredentials: { | ||
34 | id: 'login.invalidCredentials', | ||
35 | defaultMessage: '!!!Email or password not valid', | ||
36 | }, | ||
37 | tokenExpired: { | ||
38 | id: 'login.tokenExpired', | ||
39 | defaultMessage: '!!!Your session expired, please login again.', | ||
40 | }, | ||
41 | serverLogout: { | ||
42 | id: 'login.serverLogout', | ||
43 | defaultMessage: '!!!Your session expired, please login again.', | ||
44 | }, | ||
45 | signupLink: { | ||
46 | id: 'login.link.signup', | ||
47 | defaultMessage: '!!!Create a free account', | ||
48 | }, | ||
49 | passwordLink: { | ||
50 | id: 'login.link.password', | ||
51 | defaultMessage: '!!!Forgot password', | ||
52 | }, | ||
53 | }); | ||
54 | |||
55 | @observer | ||
56 | export default class Login extends Component { | ||
57 | static propTypes = { | ||
58 | onSubmit: PropTypes.func.isRequired, | ||
59 | isSubmitting: PropTypes.bool.isRequired, | ||
60 | isTokenExpired: PropTypes.bool.isRequired, | ||
61 | isServerLogout: PropTypes.bool.isRequired, | ||
62 | signupRoute: PropTypes.string.isRequired, | ||
63 | passwordRoute: PropTypes.string.isRequired, | ||
64 | error: globalErrorPropType.isRequired, | ||
65 | }; | ||
66 | |||
67 | static contextTypes = { | ||
68 | intl: intlShape, | ||
69 | }; | ||
70 | |||
71 | form = new Form({ | ||
72 | fields: { | ||
73 | email: { | ||
74 | label: this.context.intl.formatMessage(messages.emailLabel), | ||
75 | value: '', | ||
76 | validate: [required, email], | ||
77 | }, | ||
78 | password: { | ||
79 | label: this.context.intl.formatMessage(messages.passwordLabel), | ||
80 | value: '', | ||
81 | validate: [required], | ||
82 | type: 'password', | ||
83 | }, | ||
84 | }, | ||
85 | }, this.context.intl); | ||
86 | |||
87 | submit(e) { | ||
88 | e.preventDefault(); | ||
89 | this.form.submit({ | ||
90 | onSuccess: (form) => { | ||
91 | this.props.onSubmit(form.values()); | ||
92 | }, | ||
93 | onError: () => {}, | ||
94 | }); | ||
95 | } | ||
96 | |||
97 | emailField = null; | ||
98 | |||
99 | render() { | ||
100 | const { form } = this; | ||
101 | const { intl } = this.context; | ||
102 | const { | ||
103 | isSubmitting, | ||
104 | isTokenExpired, | ||
105 | isServerLogout, | ||
106 | signupRoute, | ||
107 | passwordRoute, | ||
108 | error, | ||
109 | } = this.props; | ||
110 | |||
111 | return ( | ||
112 | <div className="auth__container"> | ||
113 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
114 | <img | ||
115 | src="./assets/images/logo.svg" | ||
116 | className="auth__logo" | ||
117 | alt="" | ||
118 | /> | ||
119 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
120 | {isTokenExpired && ( | ||
121 | <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p> | ||
122 | )} | ||
123 | {isServerLogout && ( | ||
124 | <p className="error-message center">{intl.formatMessage(messages.serverLogout)}</p> | ||
125 | )} | ||
126 | <Input | ||
127 | field={form.$('email')} | ||
128 | ref={(element) => { this.emailField = element; }} | ||
129 | focus | ||
130 | /> | ||
131 | <Input | ||
132 | field={form.$('password')} | ||
133 | showPasswordToggle | ||
134 | /> | ||
135 | {error.code === 'invalid-credentials' && ( | ||
136 | <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p> | ||
137 | )} | ||
138 | {isSubmitting ? ( | ||
139 | <Button | ||
140 | className="auth__button is-loading" | ||
141 | buttonType="secondary" | ||
142 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | ||
143 | loaded={false} | ||
144 | disabled | ||
145 | /> | ||
146 | ) : ( | ||
147 | <Button | ||
148 | type="submit" | ||
149 | className="auth__button" | ||
150 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
151 | /> | ||
152 | )} | ||
153 | </form> | ||
154 | <div className="auth__links"> | ||
155 | <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link> | ||
156 | <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link> | ||
157 | </div> | ||
158 | </div> | ||
159 | ); | ||
160 | } | ||
161 | } | ||