import Modal from '../../common/components/Modal'; import ForgotPasswordModal from './ForgotPasswordModal'; import SignUpModal from './SignUpModal'; import Button from '../../common/components/Button'; import LogInButtons from './LogInButtons'; import extractText from '../../common/utils/extractText'; import ItemList from '../../common/utils/ItemList'; /** * The `LogInModal` component displays a modal dialog with a login form. * * ### Attrs * * - `identification` * - `password` */ export default class LogInModal extends Modal { oninit(vnode) { super.oninit(vnode); /** * The value of the identification input. * * @type {Function} */ this.identification = m.stream(this.attrs.identification || ''); /** * The value of the password input. * * @type {Function} */ this.password = m.stream(this.attrs.password || ''); /** * The value of the remember me input. * * @type {Function} */ this.remember = m.stream(!!this.attrs.remember); } className() { return 'LogInModal Modal--small'; } title() { return app.translator.trans('core.forum.log_in.title'); } content() { return [
{this.body()}
,
{this.footer()}
]; } body() { return [,
{this.fields().toArray()}
]; } fields() { const items = new ItemList(); items.add( 'identification',
, 30 ); items.add( 'password',
, 20 ); items.add( 'remember',
, 10 ); items.add( 'submit',
{Button.component( { className: 'Button Button--primary Button--block', type: 'submit', loading: this.loading, }, app.translator.trans('core.forum.log_in.submit_button') )}
, -10 ); return items; } footer() { return [

{app.translator.trans('core.forum.log_in.forgot_password_link')}

, app.forum.attribute('allowSignUp') ? (

{app.translator.trans('core.forum.log_in.sign_up_text', { a: })}

) : ( '' ), ]; } /** * Open the forgot password modal, prefilling it with an email if the user has * entered one. * * @public */ forgotPassword() { const email = this.identification(); const attrs = email.indexOf('@') !== -1 ? { email } : undefined; app.modal.show(ForgotPasswordModal, attrs); } /** * Open the sign up modal, prefilling it with an email/username/password if * the user has entered one. * * @public */ signUp() { const attrs = { password: this.password() }; const identification = this.identification(); attrs[identification.indexOf('@') !== -1 ? 'email' : 'username'] = identification; app.modal.show(SignUpModal, attrs); } onready() { this.$('[name=' + (this.identification() ? 'password' : 'identification') + ']').select(); } onsubmit(e) { e.preventDefault(); this.loading = true; const identification = this.identification(); const password = this.password(); const remember = this.remember(); app.session .login({ identification, password, remember }, { errorHandler: this.onerror.bind(this) }) .then(() => window.location.reload(), this.loaded.bind(this)); } onerror(error) { if (error.status === 401) { error.alert.content = app.translator.trans('core.forum.log_in.invalid_login_message'); } super.onerror(error); } }