From 8f26ae7b7d8fd137eee758d4247d65ea032d0e52 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:11:02 -0600
Subject: [PATCH] UX: refactor password reset page (#30323)

---
 .../app/controllers/password-reset.js         |  25 +++
 .../app/templates/password-reset.hbs          | 165 +++++++++---------
 .../tests/acceptance/password-reset-test.js   |   4 +-
 .../common/base/login-signup-page.scss        |   8 +-
 app/assets/stylesheets/common/base/login.scss |  34 ++--
 5 files changed, 128 insertions(+), 108 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/password-reset.js b/app/assets/javascripts/discourse/app/controllers/password-reset.js
index 6de634dc621..5d5a18509ed 100644
--- a/app/assets/javascripts/discourse/app/controllers/password-reset.js
+++ b/app/assets/javascripts/discourse/app/controllers/password-reset.js
@@ -29,6 +29,7 @@ export default class PasswordResetController extends Controller.extend(
   requiresApproval = false;
   redirected = false;
   maskPassword = true;
+  passwordValidationVisible = false;
 
   lockImageUrl = getURL("/images/lock.svg");
 
@@ -65,6 +66,30 @@ export default class PasswordResetController extends Controller.extend(
     return getURL(redirectTo || "/");
   }
 
+  @discourseComputed(
+    "passwordValidation.ok",
+    "passwordValidation.reason",
+    "passwordValidationVisible"
+  )
+  showPasswordValidation(
+    passwordValidationOk,
+    passwordValidationReason,
+    passwordValidationVisible
+  ) {
+    return (
+      passwordValidationOk ||
+      (passwordValidationReason && passwordValidationVisible)
+    );
+  }
+
+  @action
+  togglePasswordValidation() {
+    this.set(
+      "passwordValidationVisible",
+      Boolean(this.passwordValidation.reason)
+    );
+  }
+
   @action
   done(event) {
     if (wantsNewWindow(event)) {
diff --git a/app/assets/javascripts/discourse/app/templates/password-reset.hbs b/app/assets/javascripts/discourse/app/templates/password-reset.hbs
index 5145212e6e3..29c4f512e7b 100644
--- a/app/assets/javascripts/discourse/app/templates/password-reset.hbs
+++ b/app/assets/javascripts/discourse/app/templates/password-reset.hbs
@@ -2,11 +2,7 @@
 {{hide-application-sidebar}}
 {{hide-application-header-buttons "search" "login" "signup" "menu"}}
 <div class="container password-reset clearfix">
-  <div class="pull-left col-image">
-    <img src={{this.lockImageUrl}} class="password-reset-img" alt="" />
-  </div>
-
-  <div class="pull-left col-form">
+  <form class="change-password-form login-left-side">
     {{#if this.successMessage}}
       <p>{{this.successMessage}}</p>
 
@@ -22,92 +18,95 @@
         {{/unless}}
       {{/if}}
     {{else}}
-      <form class="change-password-form">
-        {{#if this.securityKeyOrSecondFactorRequired}}
-          <h2>{{i18n "user.change_password.title"}}</h2>
-          <p>
-            {{i18n "user.change_password.verify_identity"}}
-          </p>
-          {{#if this.errorMessage}}
-            <div class="alert alert-error">{{this.errorMessage}}</div>
-            <br />
-          {{/if}}
+      {{#if this.securityKeyOrSecondFactorRequired}}
+        <h2>{{i18n "user.change_password.title"}}</h2>
+        <p>
+          {{i18n "user.change_password.verify_identity"}}
+        </p>
+        {{#if this.errorMessage}}
+          <div class="alert alert-error">{{this.errorMessage}}</div>
+          <br />
+        {{/if}}
 
-          {{#if this.displaySecurityKeyForm}}
-            <SecurityKeyForm
-              @setSecondFactorMethod={{fn
-                (mut this.selectedSecondFactorMethod)
-              }}
-              @backupEnabled={{this.backupEnabled}}
-              @totpEnabled={{this.secondFactorRequired}}
-              @otherMethodAllowed={{this.otherMethodAllowed}}
-              @action={{this.authenticateSecurityKey}}
-            />
-          {{else}}
-            <SecondFactorForm
-              @secondFactorMethod={{this.selectedSecondFactorMethod}}
-              @secondFactorToken={{this.secondFactorToken}}
-              @backupEnabled={{this.backupEnabled}}
-              @totpEnabled={{this.secondFactorRequired}}
-              @isLogin={{false}}
-            >
-              <SecondFactorInput
-                {{on
-                  "input"
-                  (with-event-value (fn (mut this.secondFactorToken)))
-                }}
-                @secondFactorMethod={{this.selectedSecondFactorMethod}}
-                value={{this.secondFactorToken}}
-                id="second-factor"
-              />
-            </SecondFactorForm>
-          {{/if}}
-
-          {{#unless this.displaySecurityKeyForm}}
-            <DButton
-              @action={{action "submit"}}
-              @label="submit"
-              type="submit"
-              class="btn-primary"
-            />
-          {{/unless}}
+        {{#if this.displaySecurityKeyForm}}
+          <SecurityKeyForm
+            @setSecondFactorMethod={{fn (mut this.selectedSecondFactorMethod)}}
+            @backupEnabled={{this.backupEnabled}}
+            @totpEnabled={{this.secondFactorRequired}}
+            @otherMethodAllowed={{this.otherMethodAllowed}}
+            @action={{this.authenticateSecurityKey}}
+          />
         {{else}}
-          <h2>{{i18n "user.change_password.choose"}}</h2>
-          {{#if this.errorMessage}}
-            <div class="alert alert-error">{{this.errorMessage}}</div>
-            <br />
-          {{/if}}
-
-          <div class="input">
-            <PasswordField
-              @value={{this.accountPassword}}
-              @capsLockOn={{this.capsLockOn}}
-              type={{if this.maskPassword "password" "text"}}
-              autofocus="autofocus"
-              autocomplete="new-password"
-              id="new-account-password"
+          <SecondFactorForm
+            @secondFactorMethod={{this.selectedSecondFactorMethod}}
+            @secondFactorToken={{this.secondFactorToken}}
+            @backupEnabled={{this.backupEnabled}}
+            @totpEnabled={{this.secondFactorRequired}}
+            @isLogin={{false}}
+          >
+            <SecondFactorInput
+              {{on
+                "input"
+                (with-event-value (fn (mut this.secondFactorToken)))
+              }}
+              @secondFactorMethod={{this.selectedSecondFactorMethod}}
+              value={{this.secondFactorToken}}
+              id="second-factor"
             />
+          </SecondFactorForm>
+        {{/if}}
+
+        {{#unless this.displaySecurityKeyForm}}
+          <DButton
+            @action={{action "submit"}}
+            @label="submit"
+            type="submit"
+            class="btn-primary"
+          />
+        {{/unless}}
+      {{else}}
+        <h2>{{i18n "user.change_password.choose_new"}}</h2>
+        {{#if this.errorMessage}}
+          <div class="alert alert-error">{{this.errorMessage}}</div>
+          <br />
+        {{/if}}
+
+        <div class="input">
+          <PasswordField
+            @value={{this.accountPassword}}
+            {{on "focusout" this.togglePasswordValidation}}
+            @capsLockOn={{this.capsLockOn}}
+            type={{if this.maskPassword "password" "text"}}
+            autofocus="autofocus"
+            autocomplete="new-password"
+            id="new-account-password"
+          />
+          <div class="change-password__password-info">
+            <div class="change-password_tip-validation">
+              {{#if this.showPasswordValidation}}
+                <InputTip @validation={{this.passwordValidation}} />
+              {{/if}}
+              <div
+                class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}"
+              >
+                {{d-icon "triangle-exclamation"}}
+                {{i18n "login.caps_lock_warning"}}
+              </div>
+            </div>
             <TogglePasswordMask
               @maskPassword={{this.maskPassword}}
               @togglePasswordMask={{this.togglePasswordMask}}
             />
-
-            <div class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}">
-              {{d-icon "triangle-exclamation"}}
-              {{i18n "login.caps_lock_warning"}}
-            </div>
           </div>
+        </div>
 
-          <InputTip @validation={{this.passwordValidation}} />
-
-          <DButton
-            @action={{action "submit"}}
-            @label="user.change_password.set_password"
-            type="submit"
-            class="btn-primary"
-          />
-        {{/if}}
-      </form>
+        <DButton
+          @action={{action "submit"}}
+          @label="user.change_password.set_password"
+          type="submit"
+          class="btn-primary"
+        />
+      {{/if}}
     {{/if}}
-  </div>
+  </form>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/tests/acceptance/password-reset-test.js b/app/assets/javascripts/discourse/tests/acceptance/password-reset-test.js
index a5eb587ebcd..54e5e6c0cd9 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/password-reset-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/password-reset-test.js
@@ -1,4 +1,4 @@
-import { click, fillIn, visit } from "@ember/test-helpers";
+import { blur, click, fillIn, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import sinon from "sinon";
 import PreloadStore from "discourse/lib/preload-store";
@@ -71,6 +71,8 @@ acceptance("Password Reset", function (needs) {
     assert.dom(".password-reset .tip.good").exists("input looks good");
 
     await fillIn(".password-reset input", "123");
+    await blur(".password-reset input");
+
     assert.dom(".password-reset .tip.bad").exists("input is not valid");
     assert.dom(".password-reset .tip.bad").includesHtml(
       i18n("user.password.too_short", {
diff --git a/app/assets/stylesheets/common/base/login-signup-page.scss b/app/assets/stylesheets/common/base/login-signup-page.scss
index 7cae704c50f..e24e5646d98 100644
--- a/app/assets/stylesheets/common/base/login-signup-page.scss
+++ b/app/assets/stylesheets/common/base/login-signup-page.scss
@@ -11,7 +11,8 @@
 
 body.login-page,
 body.signup-page,
-body.invite-page {
+body.invite-page,
+body.password-reset-page {
   & ~ .powered-by-discourse,
   .above-main-container-outlet {
     display: none;
@@ -25,7 +26,8 @@ body.signup-page {
 
 .login-fullpage,
 .signup-fullpage,
-.invites-show {
+.invites-show,
+.password-reset-page {
   .signup-body,
   .login-body {
     display: flex;
@@ -241,8 +243,6 @@ body.signup-page {
   .caps-lock-warning {
     color: var(--danger);
     font-size: var(--font-down-1);
-    font-weight: bold;
-    margin-top: 0.5em;
   }
 
   .create-account__password-info {
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 8c875842ea0..f3f860c56f5 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -33,28 +33,22 @@ body.invite-page {
   // the second button can wrap in some locales, and this helps alignment
 }
 
-.password-reset {
-  .instructions {
-    label {
-      color: var(--primary-medium);
-    }
-  }
-  #new-account-password {
-    width: 15em;
-  }
-  .tip {
-    margin: 0 0 0.5em;
-  }
-  .toggle-password-mask {
-    margin-left: 0.25em;
-  }
-}
-
 .password-reset-page {
-  .caps-lock-warning {
-    display: inline;
-  }
   .change-password-form {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    input {
+      padding: 0.75em 0.77em;
+      min-width: 250px;
+      margin-bottom: 0.25em;
+      width: 100%;
+    }
+    .input {
+      position: relative;
+      margin-bottom: 1em;
+    }
     .tip {
       display: block;
     }