-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
EditUserModal.js
132 lines (115 loc) · 4.13 KB
/
EditUserModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import Modal from 'flarum/components/Modal';
import Button from 'flarum/components/Button';
import GroupBadge from 'flarum/components/GroupBadge';
import Group from 'flarum/models/Group';
import extractText from 'flarum/utils/extractText';
/**
* The `EditUserModal` component displays a modal dialog with a login form.
*/
export default class EditUserModal extends Modal {
init() {
super.init();
const user = this.props.user;
this.username = m.prop(user.username() || '');
this.email = m.prop(user.email() || '');
this.setPassword = m.prop(false);
this.password = m.prop(user.password() || '');
this.groups = {};
app.store.all('groups')
.filter(group => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
.forEach(group => this.groups[group.id()] = m.prop(user.groups().indexOf(group) !== -1));
}
className() {
return 'EditUserModal Modal--small';
}
title() {
return 'Edit User';
}
content() {
return (
<div className="Modal-body">
<div className="Form">
<div className="Form-group">
<label>Username</label>
<input className="FormControl" placeholder={extractText(app.trans('core.forum.edit_user_username_label'))}
value={this.username()}
onchange={m.withAttr('value', this.username)} />
</div>
<div className="Form-group">
<label>Email</label>
<div>
<input className="FormControl" placeholder={extractText(app.trans('core.forum.edit_user_email_label'))}
value={this.email()}
onchange={m.withAttr('value', this.email)} />
</div>
</div>
<div className="Form-group">
<label>Password</label>
<div>
<label className="checkbox">
<input type="checkbox" checked={this.setPassword()} onchange={e => {
this.setPassword(e.target.checked);
m.redraw(true);
if (e.target.checked) this.$('[name=password]').select();
m.redraw.strategy('none');
}}/>
Set new password
</label>
{this.setPassword() ? (
<input className="FormControl" type="password" name="password" placeholder={extractText(app.trans('core.forum.edit_user_password_label'))}
value={this.password()}
onchange={m.withAttr('value', this.password)} />
) : ''}
</div>
</div>
<div className="Form-group EditUserModal-groups">
<label>Groups</label>
<div>
{Object.keys(this.groups)
.map(id => app.store.getById('groups', id))
.map(group => (
<label className="checkbox">
<input type="checkbox"
checked={this.groups[group.id()]()}
disabled={this.props.user.id() === '1' && group.id() === Group.ADMINISTRATOR_ID}
onchange={m.withAttr('checked', this.groups[group.id()])}/>
{GroupBadge.component({group, label: ''})} {group.nameSingular()}
</label>
))}
</div>
</div>
<div className="Form-group">
{Button.component({
className: 'Button Button--primary',
type: 'submit',
loading: this.loading,
children: app.trans('core.forum.edit_user_submit_button')
})}
</div>
</div>
</div>
);
}
onsubmit(e) {
e.preventDefault();
this.loading = true;
const groups = Object.keys(this.groups)
.filter(id => this.groups[id]())
.map(id => app.store.getById('groups', id));
const data = {
username: this.username(),
email: this.email(),
relationships: {groups}
};
if (this.setPassword()) {
data.password = this.password();
}
this.props.user.save(data).then(
() => this.hide(),
response => {
this.loading = false;
this.handleErrors(response);
}
);
}
}