password show/hide simplify scala,html,scss,ts

lichess-org · Jun 26, 2024 · 71b2b35 · 71b2b35
1 parent 7770169
commit 71b2b35
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 31 deletions.
diff --git a/modules/ui/src/main/helper/Form3.scala b/modules/ui/src/main/helper/Form3.scala
@@ -179,7 +179,11 @@ final class Form3(formHelper: FormHelper & I18nHelper, flairApi: FlairApi):
  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))
+ group(field, content): f =>
+ div(cls := "password-wrapper")(
+ input(f, typ = "password")(required)(modifiers),
+ button(cls := "show-hide-password", dataIcon := Icon.Eye)
+ )
 
  def passwordComplexityMeter(labelContent: Frag): Frag =
  div(cls := "password-complexity")(

diff --git a/modules/web/src/main/ui/AuthUi.scala b/modules/web/src/main/ui/AuthUi.scala
@@ -350,13 +350,8 @@ body { margin-top: 45px; }
  form3.input(f)(autofocus, required, autocomplete := "username"),
  register.option(p(cls := "error username-exists none")(trans.site.usernameAlreadyUsed()))
  ),
- div(cls := "password-wrapper")(
- form3.passwordModified(password, trans.site.password())(
- autocomplete := (if register then "new-password" else "current-password")
- ),
- button(cls := "show-hide-password")(
- i(dataIcon := Icon.Eye)
- )
+ form3.passwordModified(password, trans.site.password())(
+ autocomplete := (if register then "new-password" else "current-password")
  ),
  register.option(form3.passwordComplexityMeter(trans.site.newPasswordStrength())),
  email.map: email =>

diff --git a/ui/bits/css/_auth.scss b/ui/bits/css/_auth.scss
@@ -65,26 +65,12 @@
  }
 }
 
-.password-wrapper {
- position: relative;
-}
-
 .show-hide-password {
- position: absolute;
- right: 10px;
- top: 50%;
- background: none;
- border: none;
- cursor: pointer;
+ @extend %button-none;
+ float: right;
+ margin-right: 1em;
+ margin-top: -2.2em;
 }
-
-.show-hide-password.strikethrough::before {
- content: '';
- position: absolute;
- width: 100%;
- height: 2px;
- background-color: currentColor;
- transform: rotate(45deg);
- top: 50%;
- left: 0;
+.show-hide-password.revealed {
+ color: $c-bad;
 }
diff --git a/ui/bits/src/bits.login.ts b/ui/bits/src/bits.login.ts
@@ -117,14 +117,13 @@ function signupStart() {
 function addPasswordVisibilityToggleListener() {
  $('.password-wrapper').each(function (this: HTMLElement) {
  const $wrapper = $(this);
- const $input = $wrapper.find('input[type="password"], input[type="text"]');
  const $button = $wrapper.find('.show-hide-password');
  $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('show', type === 'text');
- $button.toggleClass('strikethrough');
+ $button.toggleClass('revealed', type == 'text');
  });
  });
 }