From 086b1e82e486b20143d27a14baa4bf017c0dfca4 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Tue, 17 Dec 2024 11:12:41 -0600
Subject: [PATCH] UX: move to icon for password masking (#30321)

---
 .../discourse/app/components/local-login-form.hbs  | 14 +++++++-------
 .../app/components/modal/create-account.hbs        |  9 ++++-----
 .../app/components/toggle-password-mask.hbs        |  4 ++--
 .../discourse/app/templates/invites/show.hbs       | 10 +++++-----
 .../javascripts/discourse/app/templates/signup.hbs |  9 ++++-----
 app/assets/stylesheets/common/base/login.scss      | 12 ++++++++----
 6 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/local-login-form.hbs b/app/assets/javascripts/discourse/app/components/local-login-form.hbs
index 5491d106894..9f42ace95fb 100644
--- a/app/assets/javascripts/discourse/app/components/local-login-form.hbs
+++ b/app/assets/javascripts/discourse/app/components/local-login-form.hbs
@@ -48,6 +48,13 @@
       <label class="alt-placeholder" for="login-account-password">
         {{i18n "login.password"}}
       </label>
+      {{#if @loginPassword}}
+        <TogglePasswordMask
+          @maskPassword={{this.maskPassword}}
+          @togglePasswordMask={{this.togglePasswordMask}}
+          tabindex="3"
+        />
+      {{/if}}
       <div class="login__password-links">
         <a
           href
@@ -57,13 +64,6 @@
         >
           {{i18n "forgot_password.action"}}
         </a>
-        {{#if @loginPassword}}
-          <TogglePasswordMask
-            @maskPassword={{this.maskPassword}}
-            @togglePasswordMask={{this.togglePasswordMask}}
-            tabindex="3"
-          />
-        {{/if}}
       </div>
       <div class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}">
         {{d-icon "triangle-exclamation"}}
diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
index 6dd531dd87e..7666fa6b341 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
@@ -138,7 +138,10 @@
               <label class="alt-placeholder" for="new-account-password">
                 {{i18n "user.password.title"}}
               </label>
-
+              <TogglePasswordMask
+                @maskPassword={{this.maskPassword}}
+                @togglePasswordMask={{this.togglePasswordMask}}
+              />
               <div class="create-account__password-info">
                 <div class="create-account__password-tip-validation">
                   {{#if this.showPasswordValidation}}
@@ -163,10 +166,6 @@
                     {{i18n "login.caps_lock_warning"}}
                   </div>
                 </div>
-                <TogglePasswordMask
-                  @maskPassword={{this.maskPassword}}
-                  @togglePasswordMask={{this.togglePasswordMask}}
-                />
               </div>
             {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs b/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs
index e86047665da..d6d62d82243 100644
--- a/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs
+++ b/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs
@@ -1,10 +1,10 @@
 <DButton
   @action={{@togglePasswordMask}}
-  @label={{if @maskPassword "login.show_password" "login.hide_password"}}
+  @icon={{if @maskPassword "far-eye" "far-eye-slash"}}
   @title={{if
     @maskPassword
     "login.show_password_title"
     "login.hide_password_title"
   }}
-  class="btn-link toggle-password-mask"
+  class="btn-transparent toggle-password-mask"
 />
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index 90a056474d1..1f68bc63bec 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -134,6 +134,11 @@
                   <label class="alt-placeholder" for="new-account-password">
                     {{i18n "invites.password_label"}}
                   </label>
+                  <TogglePasswordMask
+                    @maskPassword={{this.maskPassword}}
+                    @togglePasswordMask={{this.togglePasswordMask}}
+                    @parentController="invites-show"
+                  />
                   <div class="create-account__password-info">
                     <div class="create-account__password-tip-validation">
                       <InputTip
@@ -148,11 +153,6 @@
                         {{i18n "login.caps_lock_warning"}}
                       </div>
                     </div>
-                    <TogglePasswordMask
-                      @maskPassword={{this.maskPassword}}
-                      @togglePasswordMask={{this.togglePasswordMask}}
-                      @parentController="invites-show"
-                    />
                   </div>
                 </div>
               {{/unless}}
diff --git a/app/assets/javascripts/discourse/app/templates/signup.hbs b/app/assets/javascripts/discourse/app/templates/signup.hbs
index c42a80bca76..b51bfb1189b 100644
--- a/app/assets/javascripts/discourse/app/templates/signup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/signup.hbs
@@ -134,7 +134,10 @@
               <label class="alt-placeholder" for="new-account-password">
                 {{i18n "user.password.title"}}
               </label>
-
+              <TogglePasswordMask
+                @maskPassword={{this.maskPassword}}
+                @togglePasswordMask={{this.togglePasswordMask}}
+              />
               <div class="create-account__password-info">
                 <div class="create-account__password-tip-validation">
                   {{#if this.showPasswordValidation}}
@@ -159,10 +162,6 @@
                     {{i18n "login.caps_lock_warning"}}
                   </div>
                 </div>
-                <TogglePasswordMask
-                  @maskPassword={{this.maskPassword}}
-                  @togglePasswordMask={{this.togglePasswordMask}}
-                />
               </div>
             {{/if}}
 
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 91277a932e6..8c875842ea0 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -61,13 +61,17 @@ body.invite-page {
   }
 }
 
+.signup-fullpage .input-group input[type="password"] {
+  padding-right: 3em;
+}
+
 .toggle-password-mask {
-  align-self: start;
-  line-height: 1.4; // aligns with input description text
+  position: absolute;
+  right: 0;
+  padding: 0.75em 0.77em; // alligns with input padding
   .ios-device & {
     // reset form-item-sizing mixin styles
-    padding-top: 0;
-    padding-bottom: 0;
+    padding: 0.7em;
     font-size: var(--font-0);
   }
 }