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