mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-19 07:41:22 +02:00
Code Issues Releases Wiki Activity

Move EditUserModal fields into an ItemList to make more extendable (#1593)

Browse Source
This commit is contained in:
David Sevilla Martín
2018-11-13 16:30:43 -05:00
committed by Toby Zerner
parent 0f05ecbbc6
commit 90bb012ab8
1 changed files with 81 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
framework/core/js/src/forum/components/EditUserModal.js
View File

@@ -3,6 +3,7 @@ import Button from '../../common/components/Button';
import GroupBadge from '../../common/components/GroupBadge'; import GroupBadge from '../../common/components/GroupBadge';
import Group from '../../common/models/Group'; import Group from '../../common/models/Group';
import extractText from '../../common/utils/extractText'; import extractText from '../../common/utils/extractText';
import ItemList from '../../common/utils/ItemList';
/** /**
* The `EditUserModal` component displays a modal dialog with a login form. * The `EditUserModal` component displays a modal dialog with a login form.
@@ -37,17 +38,27 @@ export default class EditUserModal extends Modal {
return ( return (
<div className="Modal-body"> <div className="Modal-body">
<div className="Form"> <div className="Form">
<div className="Form-group"> {this.fields().toArray()}
</div>
</div>
);
}
fields() {
const items = new ItemList();
items.add('username', <div className="Form-group">
<label>{app.translator.trans('core.forum.edit_user.username_heading')}</label> <label>{app.translator.trans('core.forum.edit_user.username_heading')}</label>
<input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.username_label'))} <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.username_label'))}
bidi={this.username} /> bidi={this.username} />
</div> </div>, 40);
{app.session.user !== this.props.user ? [ if (app.session.user !== this.props.user) {
<div className="Form-group"> items.add('email', <div className="Form-group">
<label>{app.translator.trans('core.forum.edit_user.email_heading')}</label> <label>{app.translator.trans('core.forum.edit_user.email_heading')}</label>
<div> <div>
<input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.email_label'))} <input className="FormControl"
placeholder={extractText(app.translator.trans('core.forum.edit_user.email_label'))}
bidi={this.email}/> bidi={this.email}/>
</div> </div>
{!this.isEmailConfirmed() ? ( {!this.isEmailConfirmed() ? (
@@ -60,13 +71,13 @@ export default class EditUserModal extends Modal {
})} })}
</div> </div>
) : ''} ) : ''}
</div>, </div>, 30);
<div className="Form-group"> items.add('password', <div className="Form-group">
<label>{app.translator.trans('core.forum.edit_user.password_heading')}</label> <label>{app.translator.trans('core.forum.edit_user.password_heading')}</label>
<div> <div>
<label className="checkbox"> <label className="checkbox">
<input type="checkbox" checked={this.setPassword()} onchange={e => { <input type="checkbox" checked={this.setPassword()} onChange={e => {
this.setPassword(e.target.checked); this.setPassword(e.target.checked);
m.redraw(true); m.redraw(true);
if (e.target.checked) this.$('[name=password]').select(); if (e.target.checked) this.$('[name=password]').select();
@@ -75,14 +86,16 @@ export default class EditUserModal extends Modal {
{app.translator.trans('core.forum.edit_user.set_password_label')} {app.translator.trans('core.forum.edit_user.set_password_label')}
</label> </label>
{this.setPassword() ? ( {this.setPassword() ? (
<input className="FormControl" type="password" name="password" placeholder={extractText(app.translator.trans('core.forum.edit_user.password_label'))} <input className="FormControl" type="password" name="password"
placeholder={extractText(app.translator.trans('core.forum.edit_user.password_label'))}
bidi={this.password}/> bidi={this.password}/>
) : ''} ) : ''}
</div> </div>
</div> </div>, 20);
] : ''}
<div className="Form-group EditUserModal-groups"> }
items.add('groups', <div className="Form-group EditUserModal-groups">
<label>{app.translator.trans('core.forum.edit_user.groups_heading')}</label> <label>{app.translator.trans('core.forum.edit_user.groups_heading')}</label>
<div> <div>
{Object.keys(this.groups) {Object.keys(this.groups)
@@ -96,19 +109,18 @@ export default class EditUserModal extends Modal {
</label> </label>
))} ))}
</div> </div>
</div> </div>, 10);
<div className="Form-group"> items.add('submit', <div className="Form-group">
{Button.component({ {Button.component({
className: 'Button Button--primary', className: 'Button Button--primary',
type: 'submit', type: 'submit',
loading: this.loading, loading: this.loading,
children: app.translator.trans('core.forum.edit_user.submit_button') children: app.translator.trans('core.forum.edit_user.submit_button')
})} })}
</div> </div>, -10);
</div>
</div> return items;
);
} }
activate() { activate() {