Improvements to change/forgot password

js/forum/src/components/change-password-modal.js

@@ -8,7 +8,7 @@ export default class ChangePasswordModal extends FormModal {
       body: [
         m('p.help-text', 'Click the button below and check your email for a link to change your password.'),
         m('div.form-group', [
-          m('button.btn.btn-primary.btn-block[type=submit]', 'Send Password Reset Email')
+          m('button.btn.btn-primary.btn-block[type=submit]', {disabled: this.loading()}, 'Send Password Reset Email')
         ])
       ]
     });

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

@@ -21,13 +21,13 @@ export default class ForgotPasswordModal extends FormModal {
       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('p.help-text', '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.'),
           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('p.help-text', 'Enter your email address and we\'ll send you a link to reset your password.'),
           m('div.form-group', [
             m('input.form-control[name=email][placeholder=Email]', {value: this.email(), onchange: m.withAttr('value', this.email), disabled: this.loading()})
           ]),
@@ -57,12 +57,11 @@ export default class ForgotPasswordModal extends FormModal {
     }).then(response => {
       this.loading(false);
       this.success(true);
-      this.alert = null;
+      this.alert(null);
       m.redraw();
     }, response => {
       this.loading(false);
-      m.redraw();
-      this.ready();
+      this.handleErrors(response.errors);
     });
   }
 }

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

@@ -7,13 +7,14 @@ export default class FormModal extends Component {
   constructor(props) {
     super(props);
 
-    this.alert = null;
+    this.alert = m.prop();
     this.loading = m.prop(false);
   }
 
   view(options) {
-    if (this.alert) {
-      this.alert.props.dismissible = false;
+    var alert = this.alert();
+    if (alert) {
+      alert.props.dismissible = false;
     }
 
     return m('div.modal-dialog', {className: options.className, config: this.element}, [
@@ -21,7 +22,7 @@ export default class FormModal extends Component {
         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()) : '',
+          alert ? m('div.modal-alert', alert) : '',
           m('div.modal-body', [
             m('div.form-centered', options.body)
           ]),
@@ -39,4 +40,19 @@ export default class FormModal extends Component {
   hide() {
     app.modal.close();
   }
+
+  handleErrors(errors) {
+    if (errors) {
+      this.alert(new Alert({
+        type: 'warning',
+        message: errors.map((error, k) => [error.detail, k < errors.length - 1 ? m('br') : ''])
+      }));
+    }
+
+    m.redraw();
+
+    if (errors) {
+      this.$('[name='+errors[0].path+']').select();
+    }
+  }
 }

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

@@ -67,6 +67,14 @@ export default class SignupModal extends FormModal {
     return vdom;
   }
 
+  ready() {
+    if (this.props.username) {
+      this.$('[name=email]').select();
+    } else {
+      super.ready();
+    }
+  }
+
   fadeIn(element, isInitialized) {
     if (isInitialized) { return; }
     $(element).hide().fadeIn();
@@ -86,9 +94,7 @@ export default class SignupModal extends FormModal {
       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();
+      this.handleErrors(response.errors);
     });
   }
 }

js/lib/model.js

@@ -34,6 +34,21 @@ export default class Model {
       }
     }
 
+    // clone the relevant parts of the model's old data so that we can revert
+    // back if the save fails
+    var oldData = {};
+    var currentData = this.data();
+    for (var i in data) {
+      if (i === 'links') {
+        oldData[i] = oldData[i] || {};
+        for (var j in newData[i]) {
+          oldData[i][j] = currentData[i][j];
+        }
+      } else {
+        oldData[i] = currentData[i];
+      }
+    }
+
     this.pushData(data);
 
     return app.request({
@@ -45,6 +60,9 @@ export default class Model {
     }).then(payload => {
       this.store.data[payload.data.type][payload.data.id] = this;
       return this.store.pushPayload(payload);
+    }, response => {
+      this.pushData(oldData);
+      throw response;
     });
   }