mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-24 18:21:33 +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 17e57c9baa
commit 95e5a2d69d
10 changed files with 209 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
framework/core/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();
});
}
}

42
framework/core/js/forum/src/components/form-modal.js Normal file
View File

@@ -0,0 +1,42 @@
import Component from 'flarum/component';
import LoadingIndicator from 'flarum/components/loading-indicator';
import Alert from 'flarum/components/alert';
import icon from 'flarum/helpers/icon';
export default class FormModal extends Component {
constructor(props) {
super(props);
this.alert = null;
this.loading = m.prop(false);
}
view(options) {
if (this.alert) {
this.alert.props.dismissible = false;
}
return m('div.modal-dialog', {className: options.className, config: this.element}, [
m('div.modal-content', [
m('a[href=javascript:;].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', options.title)),
this.alert ? m('div.modal-alert', this.alert.view()) : '',
m('div.modal-body', [
m('div.form-centered', options.body)
]),
options.footer ? m('div.modal-footer', options.footer) : ''
])
]),
LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')})
])
}
ready() {
this.$(':input:first').select();
}
hide() {
app.modal.close();
}
}

70
framework/core/js/forum/src/components/login-modal.js
View File

@@ -1,62 +1,48 @@
import Component from 'flarum/component';
import FormModal from 'flarum/components/form-modal';
import LoadingIndicator from 'flarum/components/loading-indicator';
import ForgotPasswordModal from 'flarum/components/forgot-password-modal';
import SignupModal from 'flarum/components/signup-modal';
import Alert from 'flarum/components/alert';
import icon from 'flarum/helpers/icon';
export default class LoginModal extends Component {
export default class LoginModal extends FormModal {
constructor(props) {
super(props);
this.email = m.prop();
this.password = m.prop();
this.loading = m.prop(false);
}
view() {
return m('div.modal-dialog.modal-sm.modal-login', [
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.login.bind(this)}, [
m('div.modal-header', m('h3.title-control', 'Log In')),
this.props.message ? m('div.modal-alert.alert', this.props.message) : '',
m('div.modal-body', [
m('div.form-centered', [
m('div.form-group', [
m('input.form-control[name=email][placeholder=Username or Email]', {onchange: m.withAttr('value', this.email)})
]),
m('div.form-group', [
m('input.form-control[type=password][name=password][placeholder=Password]', {onchange: m.withAttr('value', this.password)})
]),
m('div.form-group', [
m('button.btn.btn-primary.btn-block[type=submit]', 'Log In')
])
])
]),
m('div.modal-footer', [
m('p.forgot-password-link', m('a[href=javascript:;]', {onclick: () => app.modal.show(new ForgotPasswordModal())}, 'Forgot password?')),
m('p.sign-up-link', [
'Don\'t have an account? ',
m('a[href=javascript:;]', {onclick: () => app.modal.show(new SignupModal())}, 'Sign Up')
])
])
return super.view({
className: 'modal-sm login-modal',
title: 'Log In',
body: [
m('div.form-group', [
m('input.form-control[name=email][placeholder=Username or Email]', {onchange: m.withAttr('value', this.email), disabled: this.loading()})
]),
m('div.form-group', [
m('input.form-control[type=password][name=password][placeholder=Password]', {onchange: m.withAttr('value', this.password), disabled: this.loading()})
]),
m('div.form-group', [
m('button.btn.btn-primary.btn-block[type=submit]', {disabled: this.loading()}, 'Log In')
])
]),
LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')})
])
],
footer: [
m('p.forgot-password-link', m('a[href=javascript:;]', {onclick: () => app.modal.show(new ForgotPasswordModal({email: this.email()}))}, 'Forgot password?')),
m('p.sign-up-link', [
'Don\'t have an account? ',
m('a[href=javascript:;]', {onclick: () => app.modal.show(new SignupModal())}, 'Sign Up')
])
]
});
}
ready($modal) {
$modal.find('[name=email]').focus();
ready() {
this.email() ? this.$('[name=password]').select() : this.$('[name=email]').select();
}
hide() {
app.modal.close();
app.alerts.dismiss(this.errorAlert);
}
login(e) {
onsubmit(e) {
e.preventDefault();
this.loading(true);
app.session.login(this.email(), this.password()).then(() => {
@@ -64,9 +50,9 @@ export default class LoginModal extends Component {
this.props.callback && this.props.callback();
}, response => {
this.loading(false);
this.alert = new Alert({ type: 'warning', message: 'Your login details were incorrect.' });
m.redraw();
app.alerts.dismiss(this.errorAlert);
app.alerts.show(this.errorAlert = new Alert({ type: 'warning', message: 'Invalid credentials.' }))
this.ready();
});
}
}

98
framework/core/js/forum/src/components/signup-modal.js
View File

@@ -1,10 +1,11 @@
import Component from 'flarum/component';
import FormModal from 'flarum/components/form-modal';
import LoadingIndicator from 'flarum/components/loading-indicator';
import LoginModal from 'flarum/components/login-modal';
import Alert from 'flarum/components/alert';
import icon from 'flarum/helpers/icon';
import avatar from 'flarum/helpers/avatar';
export default class SignupModal extends Component {
export default class SignupModal extends FormModal {
constructor(props) {
super(props);
@@ -12,54 +13,58 @@ export default class SignupModal extends Component {
this.email = m.prop();
this.password = m.prop();
this.welcomeUser = m.prop();
this.loading = m.prop(false);
}
view() {
var welcomeUser = this.welcomeUser();
var emailProviderName = welcomeUser && welcomeUser.email().split('@')[1];
return m('div.modal-dialog.modal-sm.modal-signup', [
m('div.modal-content', [
m('button.btn.btn-icon.btn-link.close.back-control', {onclick: app.modal.close.bind(app.modal)}, icon('times')),
m('form', {onsubmit: this.signup.bind(this)}, [
m('div.modal-header', m('h3.title-control', 'Sign Up')),
m('div.modal-body', [
m('div.form-centered', [
m('div.form-group', [
m('input.form-control[name=username][placeholder=Username]', {onchange: m.withAttr('value', this.username)})
]),
m('div.form-group', [
m('input.form-control[name=email][placeholder=Email]', {onchange: m.withAttr('value', this.email)})
]),
m('div.form-group', [
m('input.form-control[type=password][name=password][placeholder=Password]', {onchange: m.withAttr('value', this.password)})
]),
m('div.form-group', [
m('button.btn.btn-primary.btn-block[type=submit]', 'Sign Up')
])
])
]),
m('div.modal-footer', [
m('p.log-in-link', [
'Already have an account? ',
m('a[href=javascript:;]', {onclick: () => app.modal.show(new LoginModal())}, 'Log In')
])
var vdom = super.view({
className: 'modal-sm signup-modal'+(welcomeUser ? ' signup-modal-success' : ''),
title: 'Sign Up',
body: [
m('div.form-group', [
m('input.form-control[name=username][placeholder=Username]', {onchange: m.withAttr('value', this.username), disabled: this.loading()})
]),
m('div.form-group', [
m('input.form-control[name=email][placeholder=Email]', {onchange: m.withAttr('value', this.email), disabled: this.loading()})
]),
m('div.form-group', [
m('input.form-control[type=password][name=password][placeholder=Password]', {onchange: m.withAttr('value', this.password), disabled: this.loading()})
]),
m('div.form-group', [
m('button.btn.btn-primary.btn-block[type=submit]', {disabled: this.loading()}, 'Sign Up')
])
],
footer: [
m('p.log-in-link', [
'Already have an account? ',
m('a[href=javascript:;]', {onclick: () => app.modal.show(new LoginModal())}, 'Log In')
])
]
});
if (welcomeUser) {
vdom.children.push(
m('div.signup-welcome', {style: 'background: '+this.welcomeUser().color(), config: this.fadeIn}, [
m('div.darken-overlay'),
m('div.container', [
avatar(welcomeUser),
m('h3', 'Welcome, '+welcomeUser.username()+'!'),
!welcomeUser.isConfirmed()
? [
m('p', ['We\'ve sent a confirmation email to ', m('strong', welcomeUser.email()), '. If it doesn\'t arrive soon, check your spam folder.']),
m('p', m('a.btn.btn-default', {href: 'http://'+emailProviderName}, 'Go to '+emailProviderName))
]
: [
m('p', m('a.btn.btn-default', {onclick: this.hide.bind(this)}, 'Dismiss'))
]
])
])
]),
LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')}),
welcomeUser ? m('div.signup-welcome', {style: 'background: '+this.welcomeUser().color(), config: this.fadeIn}, [
avatar(welcomeUser),
m('h3', 'Welcome, '+welcomeUser.username()+'!'),
!welcomeUser.isConfirmed()
? [
m('p', ['We\'ve sent a confirmation email to ', m('strong', welcomeUser.email()), '. If it doesn\'t arrive soon, check your spam folder.']),
m('p', m('a.btn.btn-default', {href: 'http://'+emailProviderName}, 'Go to '+emailProviderName))
]
: ''
]) : ''
])
)
}
return vdom;
}
fadeIn(element, isInitialized) {
@@ -67,14 +72,9 @@ export default class SignupModal extends Component {
$(element).hide().fadeIn();
}
ready($modal) {
$modal.find('[name=username]').focus();
}
signup(e) {
onsubmit(e) {
e.preventDefault();
this.loading(true);
var self = this;
app.store.createRecord('users').save({
username: this.username(),
@@ -86,7 +86,9 @@ export default class SignupModal extends Component {
m.redraw();
}, response => {
this.loading(false);
this.alert = new Alert({ type: 'warning', message: response.errors.map((error, k) => [error.detail, k < response.errors.length - 1 ? m('br') : '']) });
m.redraw();
this.$('[name='+response.errors[0].path+']').select();
});
}
}

1
framework/core/js/forum/src/initializers/discussion-controls.js
View File

@@ -24,7 +24,6 @@ export default function(app) {
return component;
} else if (!app.session.user()) {
app.modal.show(new LoginModal({
message: 'You must be logged in to do that.',
callback: () => app.current.one('loaded', this.replyAction.bind(this, goToLast, forceRefresh))
}));
}

5
framework/core/js/lib/utils/app.js
View File

@@ -18,11 +18,12 @@ class App {
}
request(options) {
options.extract = options.extract || function(xhr, xhrOptions) {
var extract = options.extract;
options.extract = function(xhr, xhrOptions) {
if (xhr.status === 500) {
throw new ServerError;
}
return xhr.responseText;
return extract ? extract(xhr.responseText) : (xhr.responseText.length === 0 ? null : xhr.responseText);
};
return m.request(options).then(response => {