Improve appearance/behaviour of login/signup/forgot modals

framework/core/js/forum/src/components/forgot-password-modal.js

@@ -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.email = m.prop(this.props.email || '');
-    this.loading = m.prop(false);
     this.success = m.prop(false);
   }
 
   view() {
-    return m('div.modal-dialog.modal-sm.modal-forgot-password', [
+    if (this.success()) {
-      m('div.modal-content', [
+      var emailProviderName = this.email().split('@')[1];
-        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')
-              ])
-            ])
-          ])
-        ])
-      ]),
-      LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')})
-    ])
     }
 
-  ready($modal) {
+    return super.view({
-    $modal.find('[name=email]').focus();
+      className: 'modal-sm forgot-password',
-  }
+      title: 'Forgot Password',
-
+      body: this.success()
-  hide() {
+        ? [
-    app.modal.close();
+          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)
+          ])
+        ]
+        : [
+          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);
+      this.ready();
-      app.alerts.show(this.errorAlert = new Alert({ type: 'warning', message: 'Invalid credentials.' }));
     });
   }
 }

framework/core/js/forum/src/components/form-modal.js

@@ -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();
+  }
+}

framework/core/js/forum/src/components/login-modal.js

@@ -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', [
+    return super.view({
-      m('div.modal-content', [
+      className: 'modal-sm login-modal',
-        m('button.btn.btn-icon.btn-link.close.back-control', {onclick: this.hide.bind(this)}, icon('times')),
+      title: 'Log In',
-        m('form', {onsubmit: this.login.bind(this)}, [
+      body: [
-          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('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)})
+          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]', 'Log In')
+          m('button.btn.btn-primary.btn-block[type=submit]', {disabled: this.loading()}, 'Log In')
         ])
-            ])
+      ],
-          ]),
+      footer: [
-          m('div.modal-footer', [
+        m('p.forgot-password-link', m('a[href=javascript:;]', {onclick: () => app.modal.show(new ForgotPasswordModal({email: this.email()}))}, 'Forgot password?')),
-            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')
         ])
-          ])
+      ]
-        ])
+    });
-      ]),
-      LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')})
-    ])
   }
 
-  ready($modal) {
+  ready() {
-    $modal.find('[name=email]').focus();
+    this.email() ? this.$('[name=password]').select() : this.$('[name=email]').select();
   }
 
-  hide() {
+  onsubmit(e) {
-    app.modal.close();
-    app.alerts.dismiss(this.errorAlert);
-  }
-
-  login(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);
+      this.ready();
-      app.alerts.show(this.errorAlert = new Alert({ type: 'warning', message: 'Invalid credentials.' }))
     });
   }
 }

framework/core/js/forum/src/components/signup-modal.js

@@ -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,44 +13,42 @@ 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', [
+    var vdom = super.view({
-      m('div.modal-content', [
+      className: 'modal-sm signup-modal'+(welcomeUser ? ' signup-modal-success' : ''),
-        m('button.btn.btn-icon.btn-link.close.back-control', {onclick: app.modal.close.bind(app.modal)}, icon('times')),
+      title: 'Sign Up',
-        m('form', {onsubmit: this.signup.bind(this)}, [
+      body: [
-          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('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)})
+          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)})
+          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]', 'Sign Up')
+          m('button.btn.btn-primary.btn-block[type=submit]', {disabled: this.loading()}, 'Sign Up')
         ])
-            ])
+      ],
-          ]),
+      footer: [
-          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')
         ])
-          ])
+      ]
-        ])
+    });
-      ]),
+
-      LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')}),
+    if (welcomeUser) {
-      welcomeUser ? m('div.signup-welcome', {style: 'background: '+this.welcomeUser().color(), config: this.fadeIn}, [
+      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()
@@ -57,9 +56,15 @@ export default class SignupModal extends Component {
                 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'))
+              ]
           ])
+        ])
+      )
+    }
+
+    return vdom;
   }
 
   fadeIn(element, isInitialized) {
@@ -67,14 +72,9 @@ export default class SignupModal extends Component {
     $(element).hide().fadeIn();
   }
 
-  ready($modal) {
+  onsubmit(e) {
-    $modal.find('[name=username]').focus();
-  }
-
-  signup(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();
     });
   }
 }

framework/core/js/forum/src/initializers/discussion-controls.js

@@ -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))
       }));
     }

framework/core/js/lib/utils/app.js

@@ -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 => {

framework/core/less/forum/signup.less

@@ -4,20 +4,35 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: @border-radius-base - 1px;
+  border-radius: @border-radius-base;
-  padding: 60px;
+  padding: 60px 30px;
   text-align: center;
   color: #fff;
+  font-size: 14px;
+
+  .drawer-components();
 
   & .avatar {
     .avatar-size(64px);
-    .box-shadow(0 0 0 4px #fff);
+    border: 4px solid @fl-body-bg;
+    .box-shadow(0 2px 6px @fl-shadow-color);
   }
   & h3, & p {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
   }
   & .btn-default {
-    background: fade(#000, 10%);
+    font-size: 15px;
+    height: 50px;
+    padding: 15px 20px;
+  }
+  & .container {
+    width: auto !important;
+    padding: 0 !important;
+    position: relative;
+  }
+}
+.signup-modal-success {
+  & .close {
     color: #fff;
   }
 }

framework/core/less/lib/modals.less

@@ -10,13 +10,33 @@
 }
 .modal-alert {
   text-align: center;
+
+  & .alert {
+    border-radius: 0;
+  }
 }
 .modal-body {
   background-color: @fl-body-secondary-color;
-  padding: 25px;
+  padding: 25px 30px;
+  color: @fl-body-muted-color;
 
   & .form-control {
     background-color: #fff;
+    color: @fl-body-color;
+
+    &:focus {
+      border: 2px solid @fl-body-primary-color;
+    }
+  }
+
+  & .help-text {
+    font-size: 14px;
+    line-height: 1.5em;
+    margin-bottom: 25px;
+  }
+
+  & :last-child {
+    margin-bottom: 0;
   }
 }
 .modal-footer {
@@ -46,9 +66,11 @@
   text-align: center;
 
   & .form-control, & .btn {
-    width: 220px;
     margin: 0 auto;
     text-align: center;
+    height: 50px;
+    padding: 15px 20px;
+    font-size: 15px;
   }
 }
 
@@ -108,8 +130,8 @@
 
     & .close {
       position: absolute;
-      right: 5px;
+      right: 10px;
-      top: 5px;
+      top: 10px;
       z-index: 1;
     }
   }
@@ -117,6 +139,7 @@
     border: 0;
     border-radius: @border-radius-base;
     .box-shadow(0 7px 15px @fl-shadow-color);
+    overflow: hidden;
   }
   .modal-sm {
     width: 375px;
@@ -127,7 +150,7 @@
     padding: 25px;
 
     & h3 {
-      font-size: 22px;
+      font-size: 20px;
       margin: 0;
     }
   }

framework/core/src/Core/Handlers/Commands/RegisterUserCommandHandler.php

@@ -10,11 +10,7 @@ class RegisterUserCommandHandler
 
     public function handle($command)
     {
-        // Assert the the current user has permission to create a user. In the
+        // @todo check whether or not registration is open (config)
-        // case of a guest trying to register an account, this will depend on
-        // whether or not registration is open. If the user is an admin, though,
-        // it will be allowed.
-        $command->forum->assertCan($command->user, 'register');
 
         // Create a new User entity, persist it, and dispatch domain events.
         // Before persistance, though, fire an event to give plugins an

framework/core/src/Forum/Actions/LoginAction.php

@@ -21,7 +21,7 @@ class LoginAction extends BaseAction
         $response = app('Flarum\Api\Actions\TokenAction')
             ->handle(new ApiRequest($request->only('identification', 'password')));
 
-        if (($data = $response->getData()) && ! empty($data->token)) {
+        if ($response->getStatusCode() === 200 && ($data = $response->getData()) && ! empty($data->token)) {
             $response->withCookie($this->makeRememberCookie($data->token));
 
             event(new UserLoggedIn($this->users->findOrFail($data->userId), $data->token));