diff options
author | 2022-11-02 06:31:36 +0530 | |
---|---|---|
committer | 2022-11-02 01:01:36 +0000 | |
commit | 302d595f7c289387e53a0ef7df4d574ed4e25d70 (patch) | |
tree | 2385e59eaca9c78921d9b0b3681cfba1b3eef168 /src/components/auth/Password.js | |
parent | Re-enable editing of the address bar to manually access a different url withi... (diff) | |
download | ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.gz ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.zst ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.zip |
Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)
Diffstat (limited to 'src/components/auth/Password.js')
-rw-r--r-- | src/components/auth/Password.js | 127 |
1 files changed, 0 insertions, 127 deletions
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js deleted file mode 100644 index 5086b0bbd..000000000 --- a/src/components/auth/Password.js +++ /dev/null | |||
@@ -1,127 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, injectIntl } 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 | import globalMessages from '../../i18n/globalMessages'; | ||
13 | import { H1 } from '../ui/headline'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | headline: { | ||
17 | id: 'password.headline', | ||
18 | defaultMessage: 'Reset password', | ||
19 | }, | ||
20 | emailLabel: { | ||
21 | id: 'password.email.label', | ||
22 | defaultMessage: 'Email address', | ||
23 | }, | ||
24 | successInfo: { | ||
25 | id: 'password.successInfo', | ||
26 | defaultMessage: 'Your new password was sent to your email address', | ||
27 | }, | ||
28 | noUser: { | ||
29 | id: 'password.noUser', | ||
30 | defaultMessage: 'No user with that email address was found', | ||
31 | }, | ||
32 | signupLink: { | ||
33 | id: 'password.link.signup', | ||
34 | defaultMessage: 'Create a free account', | ||
35 | }, | ||
36 | loginLink: { | ||
37 | id: 'password.link.login', | ||
38 | defaultMessage: 'Sign in to your account', | ||
39 | }, | ||
40 | }); | ||
41 | |||
42 | class Password extends Component { | ||
43 | static propTypes = { | ||
44 | onSubmit: PropTypes.func.isRequired, | ||
45 | isSubmitting: PropTypes.bool.isRequired, | ||
46 | signupRoute: PropTypes.string.isRequired, | ||
47 | loginRoute: PropTypes.string.isRequired, | ||
48 | status: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
49 | }; | ||
50 | |||
51 | form = (() => { | ||
52 | const { intl } = this.props; | ||
53 | return new Form( | ||
54 | { | ||
55 | fields: { | ||
56 | email: { | ||
57 | label: intl.formatMessage(messages.emailLabel), | ||
58 | value: '', | ||
59 | validators: [required, email], | ||
60 | }, | ||
61 | }, | ||
62 | }, | ||
63 | intl, | ||
64 | ); | ||
65 | })(); | ||
66 | |||
67 | submit(e) { | ||
68 | e.preventDefault(); | ||
69 | this.form.submit({ | ||
70 | onSuccess: form => { | ||
71 | this.props.onSubmit(form.values()); | ||
72 | }, | ||
73 | onError: () => {}, | ||
74 | }); | ||
75 | } | ||
76 | |||
77 | render() { | ||
78 | const { form } = this; | ||
79 | const { intl } = this.props; | ||
80 | const { isSubmitting, signupRoute, loginRoute, status } = this.props; | ||
81 | |||
82 | return ( | ||
83 | <div className="auth__container"> | ||
84 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
85 | <Link to="/auth/welcome"> | ||
86 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | ||
87 | </Link> | ||
88 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
89 | {status.length > 0 && status.includes('sent') && ( | ||
90 | <Infobox type="success" icon="checkbox-marked-circle-outline"> | ||
91 | {intl.formatMessage(messages.successInfo)} | ||
92 | </Infobox> | ||
93 | )} | ||
94 | <Input field={form.$('email')} focus /> | ||
95 | {status.length > 0 && status.includes('no-user') && ( | ||
96 | <p className="error-message center"> | ||
97 | {intl.formatMessage(messages.noUser)} | ||
98 | </p> | ||
99 | )} | ||
100 | {isSubmitting ? ( | ||
101 | <Button | ||
102 | className="auth__button is-loading" | ||
103 | buttonType="secondary" | ||
104 | label={`${intl.formatMessage(globalMessages.submit)} ...`} | ||
105 | loaded={false} | ||
106 | disabled | ||
107 | /> | ||
108 | ) : ( | ||
109 | <Button | ||
110 | type="submit" | ||
111 | className="auth__button" | ||
112 | label={intl.formatMessage(globalMessages.submit)} | ||
113 | /> | ||
114 | )} | ||
115 | </form> | ||
116 | <div className="auth__links"> | ||
117 | <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link> | ||
118 | <Link to={signupRoute}> | ||
119 | {intl.formatMessage(messages.signupLink)} | ||
120 | </Link> | ||
121 | </div> | ||
122 | </div> | ||
123 | ); | ||
124 | } | ||
125 | } | ||
126 | |||
127 | export default injectIntl(observer(Password)); | ||