lichess-org · ornicar · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/modules/team/src/main/ui/RequestUi.scala b/modules/team/src/main/ui/RequestUi.scala
@@ -27,7 +27,7 @@ final class RequestUi(helpers: Helpers, bits: TeamUi):
               )
             ),
             t.password.nonEmpty.so(
-              form3.passwordModified(form("password"), trt.entryCode())(
+              form3.passwordModified(form("password"), trt.entryCode(), reveal = false)(
                 autocomplete := "new-password"
               )
             ),

diff --git a/modules/ui/src/main/helper/Form3.scala b/modules/ui/src/main/helper/Form3.scala
@@ -178,8 +178,14 @@ final class Form3(formHelper: FormHelper & I18nHelper, flairApi: FlairApi):
   // allows disabling of a field that defaults to true
   def hiddenFalse(field: Field): Tag = hidden(field, "false".some)
 
-  def passwordModified(field: Field, content: Frag)(modifiers: Modifier*)(using Translate): Frag =
-    group(field, content)(input(_, typ = "password")(required)(modifiers))
+  def passwordModified(field: Field, content: Frag, reveal: Boolean = true)(
+      modifiers: Modifier*
+  )(using Translate): Frag =
+    group(field, content): f =>
+      div(cls := "password-wrapper")(
+        input(f, typ = "password")(required)(modifiers),
+        reveal.option(button(cls := "password-reveal", dataIcon := Icon.Eye))
+      )
 
   def passwordComplexityMeter(labelContent: Frag): Frag =
     div(cls := "password-complexity")(

diff --git a/ui/bits/css/build/bits.account.scss b/ui/bits/css/build/bits.account.scss
@@ -3,4 +3,5 @@
 @import '../../../common/css/form/form3';
 @import '../../../common/css/form/radio';
 @import '../../../common/css/form/emoji-picker';
+@import '../../../common/css/form/password';
 @import '../account';
diff --git a/ui/bits/css/build/bits.auth.scss b/ui/bits/css/build/bits.auth.scss
@@ -1,4 +1,5 @@
 @import '../../../common/css/plugin';
 @import '../../../common/css/form/form3';
 @import '../../../common/css/form/captcha';
+@import '../../../common/css/form/password';
 @import '../auth';
diff --git a/ui/bits/src/bits.account.ts b/ui/bits/src/bits.account.ts
@@ -1,12 +1,15 @@
 import * as licon from 'common/licon';
 import * as xhr from 'common/xhr';
+import { addPasswordVisibilityToggleListener } from 'common/password';
 import flairPicker from './load/flairPicker';
 
 site.load.then(() => {
   $('.emoji-details').each(function (this: HTMLElement) {
     flairPicker(this);
   });
 
+  addPasswordVisibilityToggleListener();
+
   const localPrefs: [string, string, string, boolean][] = [
     ['behavior', 'arrowSnap', 'arrow.snap', true],
     ['behavior', 'courtesy', 'courtesy', false],

diff --git a/ui/bits/src/bits.login.ts b/ui/bits/src/bits.login.ts
@@ -1,9 +1,12 @@
 import * as xhr from 'common/xhr';
 import debounce from 'common/debounce';
+import { addPasswordVisibilityToggleListener } from 'common/password';
 import { storedJsonProp } from 'common/storage';
 
 export function initModule(mode: 'login' | 'signup') {
   mode === 'login' ? loginStart() : signupStart();
+
+  addPasswordVisibilityToggleListener();
 }
 class LoginHistory {
   historyStorage = storedJsonProp<number[]>('login.history', () => []);
@@ -25,7 +28,6 @@ function loginStart() {
 
   const toggleSubmit = ($submit: Cash, v: boolean) =>
     $submit.prop('disabled', !v).toggleClass('disabled', !v);
-
   (function load() {
     const form = document.querySelector(selector) as HTMLFormElement,
       $f = $(form);

diff --git a/ui/common/css/form/_form3.scss b/ui/common/css/form/_form3.scss
@@ -114,23 +114,6 @@ textarea.form-control {
   border-top: $border;
 }
 
-.password-complexity {
-  margin-top: -2rem;
-  margin-bottom: 3rem;
-}
-
-.password-complexity-meter {
-  display: flex;
-  grid-gap: 0.25rem;
-  height: 0.4rem;
-  margin-top: 1rem;
-
-  > * {
-    background-color: gray;
-    width: 25%;
-  }
-}
-
 .form-fieldset {
   @extend %box-radius;
   margin: 1rem 0 3rem 0;

diff --git a/ui/common/css/form/_password.scss b/ui/common/css/form/_password.scss
@@ -0,0 +1,25 @@
+.password-complexity {
+  margin-top: -2rem;
+  margin-bottom: 3rem;
+}
+.password-complexity-meter {
+  display: flex;
+  grid-gap: 0.25rem;
+  height: 0.4rem;
+  margin-top: 1rem;
+
+  > * {
+    background-color: gray;
+    width: 25%;
+  }
+}
+
+.password-reveal {
+  @extend %button-none;
+  float: right;
+  margin-right: 1em;
+  margin-top: -2.2em;
+}
+.password-reveal.revealed {
+  color: $c-bad;
+}
diff --git a/ui/common/src/password.ts b/ui/common/src/password.ts
@@ -0,0 +1,13 @@
+export const addPasswordVisibilityToggleListener = () => {
+  $('.password-wrapper').each(function (this: HTMLElement) {
+    const $wrapper = $(this);
+    const $button = $wrapper.find('.password-reveal');
+    $button.on('click', function (e: Event) {
+      e.preventDefault();
+      const $input = $wrapper.find('input');
+      const type = $input.attr('type') === 'password' ? 'text' : 'password';
+      $input.attr('type', type);
+      $button.toggleClass('revealed', type == 'text');
+    });
+  });
+};