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.tsx | |
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.tsx')
-rw-r--r-- | src/components/auth/Password.tsx | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/src/components/auth/Password.tsx b/src/components/auth/Password.tsx new file mode 100644 index 000000000..53fdbf842 --- /dev/null +++ b/src/components/auth/Password.tsx | |||
@@ -0,0 +1,129 @@ | |||
1 | import { Component, FormEvent } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | |||
5 | import { noop } from 'lodash'; | ||
6 | import Form from '../../lib/Form'; | ||
7 | import { required, email } from '../../helpers/validation-helpers'; | ||
8 | import Input from '../ui/input/index'; | ||
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 | interface IProps extends WrappedComponentProps { | ||
43 | onSubmit: (...args: any[]) => void; | ||
44 | isSubmitting: boolean; | ||
45 | signupRoute: string; | ||
46 | loginRoute: string; | ||
47 | status: string[]; | ||
48 | } | ||
49 | |||
50 | @observer | ||
51 | class Password extends Component<IProps> { | ||
52 | form: Form; | ||
53 | |||
54 | constructor(props: IProps) { | ||
55 | super(props); | ||
56 | |||
57 | this.form = new Form({ | ||
58 | fields: { | ||
59 | email: { | ||
60 | label: this.props.intl.formatMessage(messages.emailLabel), | ||
61 | value: '', | ||
62 | validators: [required, email], | ||
63 | }, | ||
64 | }, | ||
65 | }); | ||
66 | } | ||
67 | |||
68 | submit(e: FormEvent<HTMLFormElement>): void { | ||
69 | e.preventDefault(); | ||
70 | this.form.submit({ | ||
71 | onSuccess: form => { | ||
72 | this.props.onSubmit(form.values()); | ||
73 | }, | ||
74 | onError: () => {}, | ||
75 | }); | ||
76 | } | ||
77 | |||
78 | render() { | ||
79 | const { form } = this; | ||
80 | const { isSubmitting, signupRoute, loginRoute, status, intl } = 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 {...form.$('email').bind()} 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 | onClick={noop} | ||
107 | disabled | ||
108 | /> | ||
109 | ) : ( | ||
110 | <Button | ||
111 | type="submit" | ||
112 | className="auth__button" | ||
113 | label={intl.formatMessage(globalMessages.submit)} | ||
114 | onClick={noop} | ||
115 | /> | ||
116 | )} | ||
117 | </form> | ||
118 | <div className="auth__links"> | ||
119 | <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link> | ||
120 | <Link to={signupRoute}> | ||
121 | {intl.formatMessage(messages.signupLink)} | ||
122 | </Link> | ||
123 | </div> | ||
124 | </div> | ||
125 | ); | ||
126 | } | ||
127 | } | ||
128 | |||
129 | export default injectIntl(Password); | ||