aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/auth/Login.js
diff options
context:
space:
mode:
authorLibravatar André Oliveira <37463445+SpecialAro@users.noreply.github.com>2022-07-12 17:59:43 +0100
committerLibravatar GitHub <noreply@github.com>2022-07-12 16:59:43 +0000
commit6415f2746e38ebe5cb328c2af94413a4d4e5da07 (patch)
tree58cdabbcc7fe9c8ceec58780b73d2528210fdaff /src/components/auth/Login.js
parent6.0.0-nightly.98 [skip ci] (diff)
downloadferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.gz
ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.zst
ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.zip
Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX (#472)
* Change auth styling and add back button * Add Skip button on 'SetupAssistant'
Diffstat (limited to 'src/components/auth/Login.js')
-rw-r--r--src/components/auth/Login.js203
1 files changed, 0 insertions, 203 deletions
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
deleted file mode 100644
index a5893e181..000000000
--- a/src/components/auth/Login.js
+++ /dev/null
@@ -1,203 +0,0 @@
1/* eslint jsx-a11y/anchor-is-valid: 0 */
2import { Component } from 'react';
3import PropTypes from 'prop-types';
4import { observer, inject } from 'mobx-react';
5import { defineMessages, injectIntl } from 'react-intl';
6
7import { LIVE_FRANZ_API } from '../../config';
8import { API_VERSION } from '../../environment-remote';
9import { serverBase } from '../../api/apiBase'; // TODO: Remove this line after fixing password recovery in-app
10import Form from '../../lib/Form';
11import { required, email } from '../../helpers/validation-helpers';
12import Input from '../ui/Input';
13import Button from '../ui/button';
14import Link from '../ui/Link';
15
16import { globalError as globalErrorPropType } from '../../prop-types';
17import { H1 } from '../ui/headline';
18
19const messages = defineMessages({
20 headline: {
21 id: 'login.headline',
22 defaultMessage: 'Sign in',
23 },
24 emailLabel: {
25 id: 'login.email.label',
26 defaultMessage: 'Email address',
27 },
28 passwordLabel: {
29 id: 'login.password.label',
30 defaultMessage: 'Password',
31 },
32 submitButtonLabel: {
33 id: 'login.submit.label',
34 defaultMessage: 'Sign in',
35 },
36 invalidCredentials: {
37 id: 'login.invalidCredentials',
38 defaultMessage: 'Email or password not valid',
39 },
40 customServerQuestion: {
41 id: 'login.customServerQuestion',
42 defaultMessage: 'Using a custom Ferdium server?',
43 },
44 customServerSuggestion: {
45 id: 'login.customServerSuggestion',
46 defaultMessage: 'Try importing your Franz account',
47 },
48 tokenExpired: {
49 id: 'login.tokenExpired',
50 defaultMessage: 'Your session expired, please login again.',
51 },
52 serverLogout: {
53 id: 'login.serverLogout',
54 defaultMessage: 'Your session expired, please login again.',
55 },
56 signupLink: {
57 id: 'login.link.signup',
58 defaultMessage: 'Create a free account',
59 },
60 passwordLink: {
61 id: 'login.link.password',
62 defaultMessage: 'Reset password',
63 },
64 backToWelcome: {
65 id: 'login.backToWelcome',
66 defaultMessage: 'Click the Ferdium icon to go back to the Welcome screen',
67 },
68});
69
70class Login extends Component {
71 static propTypes = {
72 onSubmit: PropTypes.func.isRequired,
73 isSubmitting: PropTypes.bool.isRequired,
74 isTokenExpired: PropTypes.bool.isRequired,
75 isServerLogout: PropTypes.bool.isRequired,
76 signupRoute: PropTypes.string.isRequired,
77 // passwordRoute: PropTypes.string.isRequired, // TODO: Uncomment this line after fixing password recovery in-app
78 error: globalErrorPropType.isRequired,
79 };
80
81 form = (() => {
82 const { intl } = this.props;
83 return new Form({
84 fields: {
85 email: {
86 label: intl.formatMessage(messages.emailLabel),
87 value: '',
88 validators: [required, email],
89 },
90 password: {
91 label: intl.formatMessage(messages.passwordLabel),
92 value: '',
93 validators: [required],
94 type: 'password',
95 },
96 },
97 },
98 intl,
99 )})();
100
101 submit(e) {
102 e.preventDefault();
103 this.form.submit({
104 onSuccess: form => {
105 this.props.onSubmit(form.values());
106 },
107 onError: () => {},
108 });
109 }
110
111 render() {
112 const { form } = this;
113 const { intl } = this.props;
114 const {
115 isSubmitting,
116 isTokenExpired,
117 isServerLogout,
118 signupRoute,
119 // passwordRoute, // TODO: Uncomment this line after fixing password recovery in-app
120 error,
121 } = this.props;
122
123 return (
124 <div className="auth__container">
125 <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
126 <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
127 <H1>{intl.formatMessage(messages.headline)}</H1>
128 {isTokenExpired && (
129 <p className="error-message center">
130 {intl.formatMessage(messages.tokenExpired)}
131 </p>
132 )}
133 {isServerLogout && (
134 <p className="error-message center">
135 {intl.formatMessage(messages.serverLogout)}
136 </p>
137 )}
138 <Input field={form.$('email')} focus />
139 <Input field={form.$('password')} showPasswordToggle />
140 {error.code === 'invalid-credentials' && (
141 <>
142 <p className="error-message center">
143 {intl.formatMessage(messages.invalidCredentials)}
144 </p>
145 {window['ferdium'].stores.settings.all.app.server !==
146 LIVE_FRANZ_API && (
147 <p className="error-message center">
148 {intl.formatMessage(messages.customServerQuestion)}{' '}
149 <Link
150 to={`${window[
151 'ferdium'
152 ].stores.settings.all.app.server.replace(
153 API_VERSION,
154 '',
155 )}/import`}
156 target="_blank"
157 style={{ cursor: 'pointer', textDecoration: 'underline' }}
158 >
159 {intl.formatMessage(messages.customServerSuggestion)}
160 </Link>
161 </p>
162 )}
163 </>
164 )}
165 {isSubmitting ? (
166 <Button
167 className="auth__button is-loading"
168 buttonType="secondary"
169 label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
170 loaded={false}
171 disabled
172 />
173 ) : (
174 <Button
175 type="submit"
176 className="auth__button"
177 label={intl.formatMessage(messages.submitButtonLabel)}
178 />
179 )}
180 </form>
181 <div className="auth__links">
182 <Link to={signupRoute}>
183 {intl.formatMessage(messages.signupLink)}
184 </Link>
185 <Link
186 // to={passwordRoute} // TODO: Uncomment this line after fixing password recovery in-app
187 to={`${serverBase()}/user/forgot`} // TODO: Remove this line after fixing password recovery in-app
188 target='_blank' // TODO: Remove this line after fixing password recovery in-app
189 >
190 {intl.formatMessage(messages.passwordLink)}
191 </Link>
192 </div>
193 <div className="auth__help">
194 <span>
195 {intl.formatMessage(messages.backToWelcome)}
196 </span>
197 </div>
198 </div>
199 );
200 }
201}
202
203export default injectIntl(inject('actions')(observer(Login)));
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-10 19:47:02 +0000