Very rough implementation of forgot password

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

@@ -0,0 +1,66 @@
+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 ForgotPasswordModal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.email = m.prop();
+    this.loading = m.prop(false);
+    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')
+              ])
+            ])
+          ])
+        ])
+      ]),
+      LoadingIndicator.component({className: 'modal-loading'+(this.loading() ? ' active' : '')})
+    ])
+  }
+
+  ready($modal) {
+    $modal.find('[name=email]').focus();
+  }
+
+  hide() {
+    app.modal.close();
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+    this.loading(true);
+
+    m.request({
+      method: 'POST',
+      url: app.config['api_url']+'/forgot',
+      data: {email: this.email()},
+      background: true
+    }).then(response => {
+      this.loading(false);
+      this.success(true);
+      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.' }));
+    });
+  }
+}

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

@@ -1,5 +1,6 @@
 import Component from 'flarum/component';
 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';
@@ -34,7 +35,7 @@ export default class LoginModal extends Component {
             ])
           ]),
           m('div.modal-footer', [
-            m('p.forgot-password-link', m('a[href=javascript:;]', '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')

framework/core/js/lib/components/modal.js

@@ -20,6 +20,7 @@ export default class Modal extends Component {
     this.component = component;
     m.redraw(true);
     this.$().modal('show');
+    this.ready();
   }
 
   close() {