diff options
Diffstat (limited to 'src/containers/settings/EditUserScreen.tsx')
-rw-r--r-- | src/containers/settings/EditUserScreen.tsx | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/src/containers/settings/EditUserScreen.tsx b/src/containers/settings/EditUserScreen.tsx new file mode 100644 index 000000000..6ab288d6f --- /dev/null +++ b/src/containers/settings/EditUserScreen.tsx | |||
@@ -0,0 +1,158 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | |||
5 | import { StoresProps } from 'src/@types/ferdium-components.types'; | ||
6 | import { FormFields } from 'src/@types/mobx-form.types'; | ||
7 | import Form from '../../lib/Form'; | ||
8 | import EditUserForm from '../../components/settings/user/EditUserForm'; | ||
9 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | ||
10 | |||
11 | import { required, email, minLength } from '../../helpers/validation-helpers'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | firstname: { | ||
15 | id: 'settings.user.form.firstname', | ||
16 | defaultMessage: 'First Name', | ||
17 | }, | ||
18 | lastname: { | ||
19 | id: 'settings.user.form.lastname', | ||
20 | defaultMessage: 'Last Name', | ||
21 | }, | ||
22 | email: { | ||
23 | id: 'settings.user.form.email', | ||
24 | defaultMessage: 'Email', | ||
25 | }, | ||
26 | accountTypeLabel: { | ||
27 | id: 'settings.user.form.accountType.label', | ||
28 | defaultMessage: 'Account type', | ||
29 | }, | ||
30 | accountTypeIndividual: { | ||
31 | id: 'settings.user.form.accountType.individual', | ||
32 | defaultMessage: 'Individual', | ||
33 | }, | ||
34 | accountTypeNonProfit: { | ||
35 | id: 'settings.user.form.accountType.non-profit', | ||
36 | defaultMessage: 'Non-Profit', | ||
37 | }, | ||
38 | accountTypeCompany: { | ||
39 | id: 'settings.user.form.accountType.company', | ||
40 | defaultMessage: 'Company', | ||
41 | }, | ||
42 | currentPassword: { | ||
43 | id: 'settings.user.form.currentPassword', | ||
44 | defaultMessage: 'Current password', | ||
45 | }, | ||
46 | newPassword: { | ||
47 | id: 'settings.user.form.newPassword', | ||
48 | defaultMessage: 'New password', | ||
49 | }, | ||
50 | }); | ||
51 | |||
52 | interface EditUserScreenProps extends StoresProps { | ||
53 | intl: any; | ||
54 | } | ||
55 | |||
56 | class EditUserScreen extends Component<EditUserScreenProps> { | ||
57 | componentWillUnmount() { | ||
58 | this.props.actions.user.resetStatus(); | ||
59 | } | ||
60 | |||
61 | onSubmit(userData) { | ||
62 | const { update } = this.props.actions.user; | ||
63 | |||
64 | update({ userData }); | ||
65 | |||
66 | document.querySelector('#form')?.scrollIntoView({ behavior: 'smooth' }); | ||
67 | } | ||
68 | |||
69 | prepareForm(user) { | ||
70 | const { intl } = this.props; | ||
71 | |||
72 | const config: FormFields = { | ||
73 | fields: { | ||
74 | firstname: { | ||
75 | label: intl.formatMessage(messages.firstname), | ||
76 | placeholder: intl.formatMessage(messages.firstname), | ||
77 | value: user.firstname, | ||
78 | validators: [required], | ||
79 | }, | ||
80 | lastname: { | ||
81 | label: intl.formatMessage(messages.lastname), | ||
82 | placeholder: intl.formatMessage(messages.lastname), | ||
83 | value: user.lastname, | ||
84 | validators: [required], | ||
85 | }, | ||
86 | email: { | ||
87 | label: intl.formatMessage(messages.email), | ||
88 | placeholder: intl.formatMessage(messages.email), | ||
89 | value: user.email, | ||
90 | validators: [required, email], | ||
91 | }, | ||
92 | accountType: { | ||
93 | value: user.accountType, | ||
94 | validators: [required], | ||
95 | label: intl.formatMessage(messages.accountTypeLabel), | ||
96 | options: [ | ||
97 | { | ||
98 | value: 'individual', | ||
99 | label: intl.formatMessage(messages.accountTypeIndividual), | ||
100 | }, | ||
101 | { | ||
102 | value: 'non-profit', | ||
103 | label: intl.formatMessage(messages.accountTypeNonProfit), | ||
104 | }, | ||
105 | { | ||
106 | value: 'company', | ||
107 | label: intl.formatMessage(messages.accountTypeCompany), | ||
108 | }, | ||
109 | ], | ||
110 | }, | ||
111 | organization: { | ||
112 | label: intl.formatMessage(messages.accountTypeCompany), | ||
113 | placeholder: intl.formatMessage(messages.accountTypeCompany), | ||
114 | value: user.organization, | ||
115 | }, | ||
116 | oldPassword: { | ||
117 | label: intl.formatMessage(messages.currentPassword), | ||
118 | type: 'password', | ||
119 | validators: [minLength(6)], | ||
120 | }, | ||
121 | newPassword: { | ||
122 | label: intl.formatMessage(messages.newPassword), | ||
123 | type: 'password', | ||
124 | validators: [minLength(6)], | ||
125 | }, | ||
126 | }, | ||
127 | }; | ||
128 | |||
129 | // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript | ||
130 | // support has been released. | ||
131 | return new Form(config); | ||
132 | } | ||
133 | |||
134 | render(): ReactElement { | ||
135 | const { user } = this.props.stores; | ||
136 | |||
137 | if (user.getUserInfoRequest.isExecuting) { | ||
138 | return <div>Loading...</div>; | ||
139 | } | ||
140 | |||
141 | const form = this.prepareForm(user.data); | ||
142 | |||
143 | return ( | ||
144 | <ErrorBoundary> | ||
145 | <EditUserForm | ||
146 | status={user.actionStatus} | ||
147 | form={form} | ||
148 | isSaving={user.updateUserInfoRequest.isExecuting} | ||
149 | onSubmit={d => this.onSubmit(d)} | ||
150 | /> | ||
151 | </ErrorBoundary> | ||
152 | ); | ||
153 | } | ||
154 | } | ||
155 | |||
156 | export default injectIntl<'intl', EditUserScreenProps>( | ||
157 | inject('stores', 'actions')(observer(EditUserScreen)), | ||
158 | ); | ||