diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/containers/settings/EditUserScreen.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/containers/settings/EditUserScreen.js')
-rw-r--r-- | src/containers/settings/EditUserScreen.js | 165 |
1 files changed, 165 insertions, 0 deletions
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js new file mode 100644 index 000000000..fb5c5db89 --- /dev/null +++ b/src/containers/settings/EditUserScreen.js | |||
@@ -0,0 +1,165 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import UserStore from '../../stores/UserStore'; | ||
7 | import Form from '../../lib/Form'; | ||
8 | import EditUserForm from '../../components/settings/user/EditUserForm'; | ||
9 | import { required, email, minLength } from '../../helpers/validation-helpers'; | ||
10 | import { gaPage } from '../../lib/analytics'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | firstname: { | ||
14 | id: 'settings.user.form.firstname', | ||
15 | defaultMessage: '!!!Firstname', | ||
16 | }, | ||
17 | lastname: { | ||
18 | id: 'settings.user.form.lastname', | ||
19 | defaultMessage: '!!!Lastname', | ||
20 | }, | ||
21 | email: { | ||
22 | id: 'settings.user.form.email', | ||
23 | defaultMessage: '!!!Email', | ||
24 | }, | ||
25 | accountType: { | ||
26 | label: { | ||
27 | id: 'settings.user.form.accountType.label', | ||
28 | defaultMessage: '!!!Account type', | ||
29 | }, | ||
30 | individual: { | ||
31 | id: 'settings.user.form.accountType.individual', | ||
32 | defaultMessage: '!!!Individual', | ||
33 | }, | ||
34 | nonProfit: { | ||
35 | id: 'settings.user.form.accountType.non-profit', | ||
36 | defaultMessage: '!!!Non-Profit', | ||
37 | }, | ||
38 | company: { | ||
39 | id: 'settings.user.form.accountType.company', | ||
40 | defaultMessage: '!!!Company', | ||
41 | }, | ||
42 | }, | ||
43 | currentPassword: { | ||
44 | id: 'settings.user.form.currentPassword', | ||
45 | defaultMessage: '!!!Current password', | ||
46 | }, | ||
47 | newPassword: { | ||
48 | id: 'settings.user.form.newPassword', | ||
49 | defaultMessage: '!!!New password', | ||
50 | }, | ||
51 | }); | ||
52 | |||
53 | @inject('stores', 'actions') @observer | ||
54 | export default class EditUserScreen extends Component { | ||
55 | static contextTypes = { | ||
56 | intl: intlShape, | ||
57 | }; | ||
58 | |||
59 | componentDidMount() { | ||
60 | gaPage('Settings/Account/Edit'); | ||
61 | } | ||
62 | |||
63 | componentWillUnmount() { | ||
64 | this.props.actions.user.resetStatus(); | ||
65 | } | ||
66 | |||
67 | onSubmit(userData) { | ||
68 | const { update } = this.props.actions.user; | ||
69 | |||
70 | update({ userData }); | ||
71 | |||
72 | document.querySelector('#form').scrollIntoView({ behavior: 'smooth' }); | ||
73 | } | ||
74 | |||
75 | prepareForm(user) { | ||
76 | const { intl } = this.context; | ||
77 | |||
78 | const config = { | ||
79 | fields: { | ||
80 | firstname: { | ||
81 | label: intl.formatMessage(messages.firstname), | ||
82 | placeholder: intl.formatMessage(messages.firstname), | ||
83 | value: user.firstname, | ||
84 | validate: [required], | ||
85 | }, | ||
86 | lastname: { | ||
87 | label: intl.formatMessage(messages.lastname), | ||
88 | placeholder: intl.formatMessage(messages.lastname), | ||
89 | value: user.lastname, | ||
90 | validate: [required], | ||
91 | }, | ||
92 | email: { | ||
93 | label: intl.formatMessage(messages.email), | ||
94 | placeholder: intl.formatMessage(messages.email), | ||
95 | value: user.email, | ||
96 | validate: [required, email], | ||
97 | }, | ||
98 | accountType: { | ||
99 | value: user.accountType, | ||
100 | validate: [required], | ||
101 | label: intl.formatMessage(messages.accountType.label), | ||
102 | options: [{ | ||
103 | value: 'individual', | ||
104 | label: intl.formatMessage(messages.accountType.individual), | ||
105 | }, { | ||
106 | value: 'non-profit', | ||
107 | label: intl.formatMessage(messages.accountType.nonProfit), | ||
108 | }, { | ||
109 | value: 'company', | ||
110 | label: intl.formatMessage(messages.accountType.company), | ||
111 | }], | ||
112 | }, | ||
113 | organization: { | ||
114 | label: intl.formatMessage(messages.accountType.company), | ||
115 | placeholder: intl.formatMessage(messages.accountType.company), | ||
116 | value: user.organization, | ||
117 | }, | ||
118 | oldPassword: { | ||
119 | label: intl.formatMessage(messages.currentPassword), | ||
120 | type: 'password', | ||
121 | validate: [minLength(6)], | ||
122 | }, | ||
123 | newPassword: { | ||
124 | label: intl.formatMessage(messages.newPassword), | ||
125 | type: 'password', | ||
126 | validate: [minLength(6)], | ||
127 | }, | ||
128 | }, | ||
129 | }; | ||
130 | |||
131 | return new Form(config); | ||
132 | } | ||
133 | |||
134 | render() { | ||
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 | <EditUserForm | ||
145 | // user={user.data} | ||
146 | status={user.actionStatus} | ||
147 | form={form} | ||
148 | isSaving={user.updateUserInfoRequest.isExecuting} | ||
149 | onSubmit={d => this.onSubmit(d)} | ||
150 | /> | ||
151 | ); | ||
152 | } | ||
153 | } | ||
154 | |||
155 | EditUserScreen.wrappedComponent.propTypes = { | ||
156 | stores: PropTypes.shape({ | ||
157 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
158 | }).isRequired, | ||
159 | actions: PropTypes.shape({ | ||
160 | user: PropTypes.shape({ | ||
161 | update: PropTypes.func.isRequired, | ||
162 | resetStatus: PropTypes.func.isRequired, | ||
163 | }).isRequired, | ||
164 | }).isRequired, | ||
165 | }; | ||