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/settings/user/EditUserForm.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/settings/user/EditUserForm.tsx')
-rw-r--r-- | src/components/settings/user/EditUserForm.tsx | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/src/components/settings/user/EditUserForm.tsx b/src/components/settings/user/EditUserForm.tsx new file mode 100644 index 000000000..3b604a79f --- /dev/null +++ b/src/components/settings/user/EditUserForm.tsx | |||
@@ -0,0 +1,133 @@ | |||
1 | import { Component, FormEvent, FormEventHandler, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import { Link } from 'react-router-dom'; | ||
5 | import { noop } from 'lodash'; | ||
6 | import Input from '../../ui/input/index'; | ||
7 | import Form from '../../../lib/Form'; | ||
8 | import Button from '../../ui/button'; | ||
9 | import Radio from '../../ui/Radio'; | ||
10 | import Infobox from '../../ui/Infobox'; | ||
11 | import { H2 } from '../../ui/headline'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | headline: { | ||
15 | id: 'settings.account.headline', | ||
16 | defaultMessage: 'Account', | ||
17 | }, | ||
18 | headlineProfile: { | ||
19 | id: 'settings.account.headlineProfile', | ||
20 | defaultMessage: 'Update profile', | ||
21 | }, | ||
22 | headlineAccount: { | ||
23 | id: 'settings.account.headlineAccount', | ||
24 | defaultMessage: 'Account information', | ||
25 | }, | ||
26 | headlinePassword: { | ||
27 | id: 'settings.account.headlinePassword', | ||
28 | defaultMessage: 'Change password', | ||
29 | }, | ||
30 | successInfo: { | ||
31 | id: 'settings.account.successInfo', | ||
32 | defaultMessage: 'Your changes have been saved', | ||
33 | }, | ||
34 | buttonSave: { | ||
35 | id: 'settings.account.buttonSave', | ||
36 | defaultMessage: 'Update profile', | ||
37 | }, | ||
38 | }); | ||
39 | |||
40 | interface IProps extends WrappedComponentProps { | ||
41 | status: string[]; | ||
42 | form: Form; | ||
43 | onSubmit: FormEventHandler<HTMLFormElement>; | ||
44 | isSaving: boolean; | ||
45 | } | ||
46 | |||
47 | @observer | ||
48 | class EditUserForm extends Component<IProps> { | ||
49 | submit(e: FormEvent<HTMLFormElement>): void { | ||
50 | e.preventDefault(); | ||
51 | this.props.form.submit({ | ||
52 | onSuccess: form => { | ||
53 | const values = form.values(); | ||
54 | this.props.onSubmit(values); | ||
55 | }, | ||
56 | onError: () => {}, | ||
57 | }); | ||
58 | } | ||
59 | |||
60 | render(): ReactElement { | ||
61 | const { | ||
62 | // user, | ||
63 | status, | ||
64 | form, | ||
65 | isSaving, | ||
66 | intl, | ||
67 | } = this.props; | ||
68 | |||
69 | return ( | ||
70 | <div className="settings__main"> | ||
71 | <div className="settings__header"> | ||
72 | <span className="settings__header-item"> | ||
73 | <Link to="/settings/user"> | ||
74 | {intl.formatMessage(messages.headline)} | ||
75 | </Link> | ||
76 | </span> | ||
77 | <span className="separator" /> | ||
78 | <span className="settings__header-item"> | ||
79 | {intl.formatMessage(messages.headlineProfile)} | ||
80 | </span> | ||
81 | </div> | ||
82 | <div className="settings__body"> | ||
83 | <form onSubmit={e => this.submit(e)} id="form"> | ||
84 | {status.length > 0 && status.includes('data-updated') && ( | ||
85 | <Infobox type="success" icon="checkbox-marked-circle-outline"> | ||
86 | {intl.formatMessage(messages.successInfo)} | ||
87 | </Infobox> | ||
88 | )} | ||
89 | <H2>{intl.formatMessage(messages.headlineAccount)}</H2> | ||
90 | <div className="grid__row"> | ||
91 | <Input {...form.$('firstname').bind()} focus /> | ||
92 | <Input {...form.$('lastname').bind()} /> | ||
93 | </div> | ||
94 | <Input {...form.$('email').bind()} /> | ||
95 | <Radio field={form.$('accountType')} className="" /> | ||
96 | {form.$('accountType').value === 'company' && ( | ||
97 | <Input {...form.$('organization').bind()} /> | ||
98 | )} | ||
99 | <H2>{intl.formatMessage(messages.headlinePassword)}</H2> | ||
100 | <Input {...form.$('oldPassword').bind()} showPasswordToggle /> | ||
101 | <Input | ||
102 | {...form.$('newPassword').bind()} | ||
103 | showPasswordToggle | ||
104 | scorePassword | ||
105 | /> | ||
106 | </form> | ||
107 | </div> | ||
108 | <div className="settings__controls"> | ||
109 | {/* Save Button */} | ||
110 | {isSaving ? ( | ||
111 | <Button | ||
112 | type="submit" | ||
113 | label={intl.formatMessage(messages.buttonSave)} | ||
114 | loaded={!isSaving} | ||
115 | buttonType="secondary" | ||
116 | disabled | ||
117 | onClick={noop} | ||
118 | /> | ||
119 | ) : ( | ||
120 | <Button | ||
121 | type="submit" | ||
122 | label={intl.formatMessage(messages.buttonSave)} | ||
123 | htmlForm="form" | ||
124 | onClick={noop} | ||
125 | /> | ||
126 | )} | ||
127 | </div> | ||
128 | </div> | ||
129 | ); | ||
130 | } | ||
131 | } | ||
132 | |||
133 | export default injectIntl(EditUserForm); | ||