mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-10-13 16:05:05 +02:00
Code Issues Releases Wiki Activity

Improve appearance/behaviour of login/signup/forgot modals

Browse Source
This commit is contained in:
Toby Zerner
2015-05-26 16:25:25 +09:30
parent 5fc2f3aeee
commit 85ba97ed5c
10 changed files with 209 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
js/forum/src/components/forgot-password-modal.js
View File

@@ -1,46 +1,41 @@
import Component from 'flarum/component';
import FormModal from 'flarum/components/form-modal';
import LoadingIndicator from 'flarum/components/loading-indicator';
import Alert from 'flarum/components/alert';
import icon from 'flarum/helpers/icon';
export default class ForgotPasswordModal extends Component {
export default class ForgotPasswordModal extends FormModal {
constructor(props) {
super(props);
this.email = m.prop();
this.loading = m.prop(false);
this.email = m.prop(this.props.email || '');
this.success = m.prop(false);
}
view() {
return m('div.modal-dialog.modal-sm.modal-forgot-password', [
m('div.modal-content', [
m('button.btn.btn-icon.btn-link.close.back-control', {onclick: this.hide.bind(this)}, icon('times')),
m('form', {onsubmit: this.onsubmit.bind(this)}, [
m('div.modal-header', m('h3.title-control', 'Forgot Password')),
this.props.message ? m('div.modal-alert.alert', this.props.message) : '',
m('div.modal-body', [
m('div.form-centered', this.success() ? 'Sent!' : [
m('div.form-group', [
m('input.form-control[name=email][placeholder=Email]', {onchange: m.withAttr('value', this.email)})
]),
m('div.form-group', [
m('button.btn.btn-primary.btn-block[type=submit]', 'Recover Password')
])
])
if (this.success()) {
var emailProviderName = this.email().split('@')[1];
}
return super.view({
className: 'modal-sm forgot-password',
title: 'Forgot Password',
body: this.success()
? [
m('p.help-text', 'OK, we\'ve sent you an email containing a link to reset your password. Check your spam folder if you don\'t receive it within the next minute or two. Yeah, sometimes we get put through to spam - can you believe it?!'),
m('div.form-group', [
m('a.btn.btn-primary.btn-block', {href: 'http://'+emailProviderName}, 'Go to '+emailProviderName)
])
])
]),
LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')})
])
}
ready($modal) {
$modal.find('[name=email]').focus();
}
hide() {
app.modal.close();
]
: [
m('p.help-text', 'Forgot your password? Don\'t worry, it happens all the time. Simply enter your email address and we\'ll send you instructions on how to set up a new one.'),
m('div.form-group', [
m('input.form-control[name=email][placeholder=Email]', {value: this.email(), onchange: m.withAttr('value', this.email), disabled: this.loading()})
]),
m('div.form-group', [
m('button.btn.btn-primary.btn-block[type=submit]', {disabled: this.loading()}, 'Recover Password')
])
]
});
}
onsubmit(e) {
@@ -51,16 +46,23 @@ export default class ForgotPasswordModal extends Component {
method: 'POST',
url: app.config['api_url']+'/forgot',
data: {email: this.email()},
background: true
background: true,
extract: xhr => {
if (xhr.status === 404) {
this.alert = new Alert({ type: 'warning', message: 'That email wasn\'t found in our database.' });
throw new Error;
}
return null;
}
}).then(response => {
this.loading(false);
this.success(true);
this.alert = null;
m.redraw();
}, response => {
this.loading(false);
m.redraw();
app.alerts.dismiss(this.errorAlert);
app.alerts.show(this.errorAlert = new Alert({ type: 'warning', message: 'Invalid credentials.' }));
this.ready();
});
}
}