Implement edit user modal

EditUserHandler is a bit rough
This commit is contained in:
Toby Zerner 2015-08-05 11:49:37 +09:30
parent 9a3e4ce4fe
commit 4d2aac7645
12 changed files with 236 additions and 26 deletions

View File

@ -0,0 +1,131 @@
import Modal from 'flarum/components/Modal';
import Button from 'flarum/components/Button';
import GroupBadge from 'flarum/components/GroupBadge';
import Group from 'flarum/models/Group';
/**
* The `EditUserModal` component displays a modal dialog with a login form.
*/
export default class EditUserModal extends Modal {
constructor(...args) {
super(...args);
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={app.trans('core.username')}
value={this.username()}
onchange={m.withAttr('value', this.username)} />
</div>
<div className="Form-group">
<label>Email</label>
<div>
<input className="FormControl" placeholder={app.trans('core.email')}
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={app.trans('core.password')}
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.save_changes')
})}
</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);
}
);
}
}

View File

@ -1,5 +1,7 @@
import Button from 'flarum/components/Button';
import Separator from 'flarum/components/Separator';
import EditUserModal from 'flarum/components/EditUserModal';
import DeleteUserModal from 'flarum/components/DeleteUserModal';
import ItemList from 'flarum/utils/ItemList';
/**
@ -93,13 +95,13 @@ export default {
* Delete the user.
*/
deleteAction() {
// TODO
app.modal.show(new DeleteUserModal({user: this}));
},
/**
* Edit the user.
*/
editAction() {
// TODO
app.modal.show(new EditUserModal({user: this}));
}
};

View File

@ -109,10 +109,10 @@ export default class Modal extends Component {
const errors = response && response.errors;
if (errors) {
this.alert(new Alert({
type: 'warning',
message: errors.map((error, k) => [error.detail, k < errors.length - 1 ? m('br') : ''])
}));
this.alert = new Alert({
type: 'error',
children: errors.map((error, k) => [error.detail, k < errors.length - 1 ? m('br') : ''])
});
}
m.redraw();

View File

@ -10,7 +10,7 @@ import Badge from 'flarum/components/Badge';
export default class User extends mixin(Model, {
username: Model.attribute('username'),
email: Model.attribute('email'),
isConfirmed: Model.attribute('isConfirmed'),
isActivated: Model.attribute('isActivated'),
password: Model.attribute('password'),
avatarUrl: Model.attribute('avatarUrl'),

View File

@ -0,0 +1,9 @@
.EditUserModal-groups {
.checkbox {
margin-bottom: 10px;
}
.Badge {
margin: -3px 3px -3px 0;
vertical-align: 1px;
}
}

View File

@ -7,6 +7,7 @@
@import "DiscussionList.less";
@import "DiscussionListItem.less";
@import "DiscussionPage.less";
@import "EditUserModal.less";
@import "Hero.less";
@import "IndexPage.less";
@import "LogInModal.less";

View File

@ -1,3 +1,11 @@
.Form-group {
margin-bottom: 24px;
&:last-child {
margin-bottom: 0 !important;
}
}
.Form--centered {
text-align: center;
@ -8,17 +16,13 @@
padding: 15px 20px;
font-size: 15px;
}
}
.Form-group {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
}
.Form-group label {
.Form-group > label {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;

View File

@ -21,7 +21,9 @@ class UpdateAction extends SerializeResourceAction
/**
* @inheritdoc
*/
public $include = [];
public $include = [
'groups' => true
];
/**
* @inheritdoc

View File

@ -29,8 +29,7 @@ class UserSerializer extends UserBasicSerializer
if ($canEdit) {
$attributes += [
'isActivated' => $user->is_activated,
'email' => $user->email,
'isConfirmed' => $user->is_confirmed
'email' => $user->email
];
}

View File

@ -3,7 +3,9 @@
use Flarum\Core\Users\User;
use Flarum\Core\Users\UserRepository;
use Flarum\Events\UserWillBeSaved;
use Flarum\Events\UserGroupsWereChanged;
use Flarum\Core\Support\DispatchesEvents;
use Flarum\Core\Exceptions\PermissionDeniedException;
class EditUserHandler
{
@ -33,38 +35,68 @@ class EditUserHandler
$data = $command->data;
$user = $this->users->findOrFail($command->userId, $actor);
$user->assertCan($actor, 'edit');
$isSelf = $actor->id === $user->id;
$attributes = array_get($data, 'attributes', []);
$relationships = array_get($data, 'relationships', []);
if (isset($attributes['username'])) {
$user->assertCan($actor, 'rename');
$user->assertCan($actor, 'edit');
$user->rename($attributes['username']);
}
if (isset($attributes['email'])) {
if ($isSelf) {
$user->requestEmailChange($attributes['email']);
} else {
$user->assertCan($actor, 'edit');
$user->changeEmail($attributes['email']);
}
}
if (isset($attributes['password'])) {
$user->assertCan($actor, 'edit');
$user->changePassword($attributes['password']);
}
if (isset($attributes['bio'])) {
if (! $isSelf) {
$user->assertCan($actor, 'edit');
}
$user->changeBio($attributes['bio']);
}
if (! empty($attributes['readTime'])) {
$this->assert($isSelf);
$user->markAllAsRead();
}
if (! empty($attributes['preferences'])) {
$this->assert($isSelf);
foreach ($attributes['preferences'] as $k => $v) {
$user->setPreference($k, $v);
}
}
if (isset($relationships['groups']['data']) && is_array($relationships['groups']['data'])) {
$user->assertCan($actor, 'edit');
$newGroupIds = [];
foreach ($relationships['groups']['data'] as $group) {
if ($id = array_get($group, 'id')) {
$newGroupIds[] = $id;
}
}
$user->raise(new UserGroupsWereChanged($user, $user->groups()->get()->all()));
User::saved(function ($user) use ($newGroupIds) {
$user->groups()->sync($newGroupIds);
});
}
event(new UserWillBeSaved($user, $actor, $data));
$user->save();
@ -72,4 +104,11 @@ class EditUserHandler
return $user;
}
protected function assert($true)
{
if (! $true) {
throw new PermissionDeniedException;
}
}
}

View File

@ -29,11 +29,6 @@ class UsersServiceProvider extends ServiceProvider
$events->listen(ModelAllow::class, function (ModelAllow $event) {
if ($event->model instanceof User) {
if ($event->action === 'edit' &&
$event->model->id == $event->actor->id) {
return true;
}
if ($event->actor->hasPermission('user.'.$event->action)) {
return true;
}

View File

@ -0,0 +1,28 @@
<?php namespace Flarum\Events;
use Flarum\Core\Users\User;
class UserGroupsWereChanged
{
/**
* The user whose groups were changed.
*
* @var User
*/
public $user;
/**
* @var Flarum\Core\Groups\Group[]
*/
public $oldGroups;
/**
* @param User $user The user whose groups were changed.
* @param Flarum\Core\Groups\Group[] $user
*/
public function __construct(User $user, array $oldGroups)
{
$this->user = $user;
$this->oldGroups = $oldGroups;
}
}