FEATURE: redesign the change password page to use javascript and validations

test/javascripts/acceptance/password-reset-test.js.es6

@@ -0,0 +1,64 @@
+import { acceptance } from "helpers/qunit-helpers";
+import PreloadStore from 'preload-store';
+import { parsePostData } from "helpers/create-pretender";
+
+acceptance("Password Reset", {
+  setup() {
+    const response = (object) => {
+      return [
+        200,
+        {"Content-Type": "application/json"},
+        object
+      ];
+    };
+
+    server.get('/users/confirm-email-token/myvalidtoken.json', () => { //eslint-disable-line
+      return response({success: "OK"});
+    });
+
+    server.put('/users/password-reset/myvalidtoken.json', request => { //eslint-disable-line
+      const body = parsePostData(request.requestBody);
+      if (body.password === "jonesyAlienSlayer") {
+        return response({success: false, errors: {password: ["is the name of your cat"]}});
+      } else {
+        return response({success: "OK", message: I18n.t('password_reset.success')});
+      }
+    });
+  }
+});
+
+test("Password Reset Page", () => {
+  PreloadStore.store('password_reset', {is_developer: false});
+
+  visit("/users/password-reset/myvalidtoken");
+  andThen(() => {
+    ok(exists(".password-reset input"), "shows the input");
+    ok(find('.password-reset .instructions').html().trim().includes(`${Discourse.SiteSettings.min_password_length} char`), "shows correct min length");
+  });
+
+  fillIn('.password-reset input', 'perf3ctly5ecur3');
+  andThen(() => {
+    ok(exists(".password-reset .tip.good"), "input looks good");
+  });
+
+  fillIn('.password-reset input', '123');
+  andThen(() => {
+    ok(exists(".password-reset .tip.bad"), "input is not valid");
+    ok(find(".password-reset .tip.bad").html().trim().includes(I18n.t('user.password.too_short')), "password too short");
+  });
+
+  fillIn('.password-reset input', 'jonesyAlienSlayer');
+  click('.password-reset form button');
+  andThen(() => {
+    ok(exists(".password-reset .tip.bad"), "input is not valid");
+    ok(find(".password-reset .tip.bad").html().trim().includes("is the name of your cat"), "server validation error message shows");
+  });
+
+  fillIn('.password-reset input', 'perf3ctly5ecur3');
+  click('.password-reset form button');
+  andThen(() => {
+    ok(!exists(".password-reset form"), "form is gone");
+    ok(exists(".password-reset .btn"), "button is shown");
+  });
+});
+

test/javascripts/controllers/create-account-test.js.es6

@@ -11,7 +11,7 @@ test('basicUsernameValidation', function() {
   var subject = this.subject;
 
   var testInvalidUsername = function(username, expectedReason) {
-    var controller = subject();
+    var controller = subject({ siteSettings: Discourse.SiteSettings });
     controller.set('accountUsername', username);
     equal(controller.get('basicUsernameValidation.failed'), true, 'username should be invalid: ' + username);
     equal(controller.get('basicUsernameValidation.reason'), expectedReason, 'username validation reason: ' + username + ', ' + expectedReason);
@@ -21,7 +21,7 @@ test('basicUsernameValidation', function() {
   testInvalidUsername('x', I18n.t('user.username.too_short'));
   testInvalidUsername('123456789012345678901', I18n.t('user.username.too_long'));
 
-  var controller = subject();
+  var controller = subject({ siteSettings: Discourse.SiteSettings });
   controller.set('accountUsername',   'porkchops');
   controller.set('prefilledUsername', 'porkchops');
   equal(controller.get('basicUsernameValidation.ok'), true, 'Prefilled username is valid');
@@ -31,7 +31,7 @@ test('basicUsernameValidation', function() {
 test('passwordValidation', function() {
   var subject = this.subject;
 
-  var controller = subject();
+  var controller = subject({ siteSettings: Discourse.SiteSettings });
   controller.set('passwordRequired', true);
   controller.set('accountEmail', 'pork@chops.com');
   controller.set('accountUsername', 'porkchops');
@@ -42,7 +42,7 @@ test('passwordValidation', function() {
   equal(controller.get('passwordValidation.reason'), I18n.t('user.password.ok'), 'Password is valid');
 
   var testInvalidPassword = function(password, expectedReason) {
-    var c = subject();
+    var c = subject({ siteSettings: Discourse.SiteSettings });
     c.set('accountPassword', password);
     equal(c.get('passwordValidation.failed'), true, 'password should be invalid: ' + password);
     equal(c.get('passwordValidation.reason'), expectedReason, 'password validation reason: ' + password + ', ' + expectedReason);

test/javascripts/helpers/create-pretender.js.es6

@@ -1,7 +1,7 @@
 import storePretender from 'helpers/store-pretender';
 import fixturePretender from 'helpers/fixture-pretender';
 
-function parsePostData(query) {
+export function parsePostData(query) {
   const result = {};
   query.split("&").forEach(function(part) {
     const item = part.split("=");
@@ -18,7 +18,7 @@ function parsePostData(query) {
 
   });
   return result;
-}
+};
 
 function response(code, obj) {
   if (typeof code === "object") {