diff options
Diffstat (limited to 'src/components/auth/Login.js')
-rw-r--r-- | src/components/auth/Login.js | 132 |
1 files changed, 74 insertions, 58 deletions
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js index 9e6a8d046..a47834e19 100644 --- a/src/components/auth/Login.js +++ b/src/components/auth/Login.js | |||
@@ -2,7 +2,7 @@ | |||
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, inject } from 'mobx-react'; | 4 | import { observer, inject } from 'mobx-react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | 6 | ||
7 | import { LIVE_FRANZ_API } from '../../config'; | 7 | import { LIVE_FRANZ_API } from '../../config'; |
8 | import { API_VERSION, isDevMode, useLiveAPI } from '../../environment'; | 8 | import { API_VERSION, isDevMode, useLiveAPI } from '../../environment'; |
@@ -19,59 +19,61 @@ import { globalError as globalErrorPropType } from '../../prop-types'; | |||
19 | const messages = defineMessages({ | 19 | const messages = defineMessages({ |
20 | headline: { | 20 | headline: { |
21 | id: 'login.headline', | 21 | id: 'login.headline', |
22 | defaultMessage: '!!!Sign in', | 22 | defaultMessage: 'Sign in', |
23 | }, | 23 | }, |
24 | emailLabel: { | 24 | emailLabel: { |
25 | id: 'login.email.label', | 25 | id: 'login.email.label', |
26 | defaultMessage: '!!!Email address', | 26 | defaultMessage: 'Email address', |
27 | }, | 27 | }, |
28 | passwordLabel: { | 28 | passwordLabel: { |
29 | id: 'login.password.label', | 29 | id: 'login.password.label', |
30 | defaultMessage: '!!!Password', | 30 | defaultMessage: 'Password', |
31 | }, | 31 | }, |
32 | submitButtonLabel: { | 32 | submitButtonLabel: { |
33 | id: 'login.submit.label', | 33 | id: 'login.submit.label', |
34 | defaultMessage: '!!!Sign in', | 34 | defaultMessage: 'Sign in', |
35 | }, | 35 | }, |
36 | invalidCredentials: { | 36 | invalidCredentials: { |
37 | id: 'login.invalidCredentials', | 37 | id: 'login.invalidCredentials', |
38 | defaultMessage: '!!!Email or password not valid', | 38 | defaultMessage: 'Email or password not valid', |
39 | }, | 39 | }, |
40 | customServerQuestion: { | 40 | customServerQuestion: { |
41 | id: 'login.customServerQuestion', | 41 | id: 'login.customServerQuestion', |
42 | defaultMessage: '!!!Using a Franz account to log in?', | 42 | defaultMessage: 'Using a Franz account to log in?', |
43 | }, | 43 | }, |
44 | customServerSuggestion: { | 44 | customServerSuggestion: { |
45 | id: 'login.customServerSuggestion', | 45 | id: 'login.customServerSuggestion', |
46 | defaultMessage: '!!!Try importing your Franz account into Ferdi', | 46 | defaultMessage: 'Try importing your Franz account into Ferdi', |
47 | }, | 47 | }, |
48 | tokenExpired: { | 48 | tokenExpired: { |
49 | id: 'login.tokenExpired', | 49 | id: 'login.tokenExpired', |
50 | defaultMessage: '!!!Your session expired, please login again.', | 50 | defaultMessage: 'Your session expired, please login again.', |
51 | }, | 51 | }, |
52 | serverLogout: { | 52 | serverLogout: { |
53 | id: 'login.serverLogout', | 53 | id: 'login.serverLogout', |
54 | defaultMessage: '!!!Your session expired, please login again.', | 54 | defaultMessage: 'Your session expired, please login again.', |
55 | }, | 55 | }, |
56 | signupLink: { | 56 | signupLink: { |
57 | id: 'login.link.signup', | 57 | id: 'login.link.signup', |
58 | defaultMessage: '!!!Create a free account', | 58 | defaultMessage: 'Create a free account', |
59 | }, | 59 | }, |
60 | changeServer: { | 60 | changeServer: { |
61 | id: 'login.changeServer', | 61 | id: 'login.changeServer', |
62 | defaultMessage: '!!!Change server', | 62 | defaultMessage: 'Change server', |
63 | }, | 63 | }, |
64 | serverless: { | 64 | serverless: { |
65 | id: 'services.serverless', | 65 | id: 'services.serverless', |
66 | defaultMessage: '!!!Use Ferdi without an Account', | 66 | defaultMessage: 'Use Ferdi without an Account', |
67 | }, | 67 | }, |
68 | passwordLink: { | 68 | passwordLink: { |
69 | id: 'login.link.password', | 69 | id: 'login.link.password', |
70 | defaultMessage: '!!!Forgot password', | 70 | defaultMessage: 'Forgot password', |
71 | }, | 71 | }, |
72 | }); | 72 | }); |
73 | 73 | ||
74 | export default @inject('actions') @observer class Login extends Component { | 74 | @inject('actions') |
75 | @observer | ||
76 | class Login extends Component { | ||
75 | static propTypes = { | 77 | static propTypes = { |
76 | onSubmit: PropTypes.func.isRequired, | 78 | onSubmit: PropTypes.func.isRequired, |
77 | isSubmitting: PropTypes.bool.isRequired, | 79 | isSubmitting: PropTypes.bool.isRequired, |
@@ -84,35 +86,34 @@ export default @inject('actions') @observer class Login extends Component { | |||
84 | actions: PropTypes.object.isRequired, | 86 | actions: PropTypes.object.isRequired, |
85 | }; | 87 | }; |
86 | 88 | ||
87 | static contextTypes = { | 89 | form = new Form( |
88 | intl: intlShape, | 90 | { |
89 | }; | 91 | fields: { |
90 | 92 | email: { | |
91 | form = new Form({ | 93 | label: this.props.intl.formatMessage(messages.emailLabel), |
92 | fields: { | 94 | value: '', |
93 | email: { | 95 | validators: [required, email], |
94 | label: this.context.intl.formatMessage(messages.emailLabel), | 96 | }, |
95 | value: '', | 97 | password: { |
96 | validators: [required, email], | 98 | label: this.props.intl.formatMessage(messages.passwordLabel), |
97 | }, | 99 | value: '', |
98 | password: { | 100 | validators: [required], |
99 | label: this.context.intl.formatMessage(messages.passwordLabel), | 101 | type: 'password', |
100 | value: '', | 102 | }, |
101 | validators: [required], | ||
102 | type: 'password', | ||
103 | }, | 103 | }, |
104 | }, | 104 | }, |
105 | }, this.context.intl); | 105 | this.props.intl, |
106 | ); | ||
106 | 107 | ||
107 | emailField = null; | 108 | emailField = null; |
108 | 109 | ||
109 | submit(e) { | 110 | submit(e) { |
110 | e.preventDefault(); | 111 | e.preventDefault(); |
111 | this.form.submit({ | 112 | this.form.submit({ |
112 | onSuccess: (form) => { | 113 | onSuccess: form => { |
113 | this.props.onSubmit(form.values()); | 114 | this.props.onSubmit(form.values()); |
114 | }, | 115 | }, |
115 | onError: () => { }, | 116 | onError: () => {}, |
116 | }); | 117 | }); |
117 | } | 118 | } |
118 | 119 | ||
@@ -122,7 +123,7 @@ export default @inject('actions') @observer class Login extends Component { | |||
122 | 123 | ||
123 | render() { | 124 | render() { |
124 | const { form } = this; | 125 | const { form } = this; |
125 | const { intl } = this.context; | 126 | const { intl } = this.props; |
126 | const { | 127 | const { |
127 | isSubmitting, | 128 | isSubmitting, |
128 | isTokenExpired, | 129 | isTokenExpired, |
@@ -135,42 +136,47 @@ export default @inject('actions') @observer class Login extends Component { | |||
135 | 136 | ||
136 | return ( | 137 | return ( |
137 | <div className="auth__container"> | 138 | <div className="auth__container"> |
138 | <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}> | 139 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
139 | <img | 140 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
140 | src="./assets/images/logo.svg" | ||
141 | className="auth__logo" | ||
142 | alt="" | ||
143 | /> | ||
144 | <h1>{intl.formatMessage(messages.headline)}</h1> | 141 | <h1>{intl.formatMessage(messages.headline)}</h1> |
145 | {isDevMode && !useLiveAPI && ( | 142 | {isDevMode && !useLiveAPI && ( |
146 | <Infobox type="warning"> | 143 | <Infobox type="warning"> |
147 | In Dev Mode your data is not persistent. Please use the live app for accessing the production API. | 144 | In Dev Mode your data is not persistent. Please use the live app |
145 | for accessing the production API. | ||
148 | </Infobox> | 146 | </Infobox> |
149 | )} | 147 | )} |
150 | {isTokenExpired && ( | 148 | {isTokenExpired && ( |
151 | <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p> | 149 | <p className="error-message center"> |
150 | {intl.formatMessage(messages.tokenExpired)} | ||
151 | </p> | ||
152 | )} | 152 | )} |
153 | {isServerLogout && ( | 153 | {isServerLogout && ( |
154 | <p className="error-message center">{intl.formatMessage(messages.serverLogout)}</p> | 154 | <p className="error-message center"> |
155 | {intl.formatMessage(messages.serverLogout)} | ||
156 | </p> | ||
155 | )} | 157 | )} |
156 | <Input | 158 | <Input |
157 | field={form.$('email')} | 159 | field={form.$('email')} |
158 | ref={(element) => { this.emailField = element; }} | 160 | ref={element => { |
161 | this.emailField = element; | ||
162 | }} | ||
159 | focus | 163 | focus |
160 | /> | 164 | /> |
161 | <Input | 165 | <Input field={form.$('password')} showPasswordToggle /> |
162 | field={form.$('password')} | ||
163 | showPasswordToggle | ||
164 | /> | ||
165 | {error.code === 'invalid-credentials' && ( | 166 | {error.code === 'invalid-credentials' && ( |
166 | <> | 167 | <> |
167 | <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p> | 168 | <p className="error-message center"> |
168 | { window.ferdi.stores.settings.all.app.server !== LIVE_FRANZ_API && ( | 169 | {intl.formatMessage(messages.invalidCredentials)} |
170 | </p> | ||
171 | {window.ferdi.stores.settings.all.app.server !== | ||
172 | LIVE_FRANZ_API && ( | ||
169 | <p className="error-message center"> | 173 | <p className="error-message center"> |
170 | {intl.formatMessage(messages.customServerQuestion)} | 174 | {intl.formatMessage(messages.customServerQuestion)}{' '} |
171 | {' '} | ||
172 | <Link | 175 | <Link |
173 | to={`${window.ferdi.stores.settings.all.app.server.replace(API_VERSION, '')}/import`} | 176 | to={`${window.ferdi.stores.settings.all.app.server.replace( |
177 | API_VERSION, | ||
178 | '', | ||
179 | )}/import`} | ||
174 | target="_blank" | 180 | target="_blank" |
175 | style={{ cursor: 'pointer', textDecoration: 'underline' }} | 181 | style={{ cursor: 'pointer', textDecoration: 'underline' }} |
176 | > | 182 | > |
@@ -197,12 +203,22 @@ export default @inject('actions') @observer class Login extends Component { | |||
197 | )} | 203 | )} |
198 | </form> | 204 | </form> |
199 | <div className="auth__links"> | 205 | <div className="auth__links"> |
200 | <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link> | 206 | <Link to={changeServerRoute}> |
201 | <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a> | 207 | {intl.formatMessage(messages.changeServer)} |
202 | <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link> | 208 | </Link> |
203 | <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link> | 209 | <a onClick={this.useLocalServer.bind(this)}> |
210 | {intl.formatMessage(messages.serverless)} | ||
211 | </a> | ||
212 | <Link to={signupRoute}> | ||
213 | {intl.formatMessage(messages.signupLink)} | ||
214 | </Link> | ||
215 | <Link to={passwordRoute}> | ||
216 | {intl.formatMessage(messages.passwordLink)} | ||
217 | </Link> | ||
204 | </div> | 218 | </div> |
205 | </div> | 219 | </div> |
206 | ); | 220 | ); |
207 | } | 221 | } |
208 | } | 222 | } |
223 | |||
224 | export default injectIntl(Login); | ||