[Feature] Password Show/Hide

[arnaveenkumar]

Hello Lichess Team,

Can you add Password Show/Hide feature?

It would be a useful feature for the registered users. It prevents the user from entering wrong password in the first attempt.

Thank you.

[Carbrex]

Add good first issue label

[joeyksclark]

I'm a new contributor, going to take a stab at this.

[SDalsberg]

It seems that this has been added :)

edit: it works on Edge, not on Chrome or Firefox

[Carbrex]

It seems that this has been added :)

edit: it works on Edge, not on Chrome or Firefox

Yeah, that is edge's "feature". It has not been added in lichess.

[arnaveenkumar]

Hi,

Make this feature available on Chrome, Firefox, or Brave too.

Thanks.

[joeyksclark]

ACK

[arnaveenkumar]

Let me know about the status of this issue.

[joeyksclark]

Apologies for the delay on the PR. I'll have it up today or tomorrow, or communicate otherwise.

[arnaveenkumar]

Existing solution (For password visibility): Firefox: Right click in the password field and select 'Reveal Password' option from the list. Chrome & Brave: If you've already saved a password, Right click in the password field and select 'Show all saved passwords' option from the list.

A straightforward approach is to develop a password show/hide (eye icon) feature in the password field would be better. Let me know your thoughts in this regard!

[joeyksclark]

Sorry once again for the delay. I have time to work on this change today. I'm having some trouble finding the UI file that this change would be made in. Can someone point me to where the UI for the login page is?

[Carbrex]

https://github.com/lichess-org/lila/blob/master/app/controllers/Auth.scala#L170 https://github.com/lichess-org/lila/blob/master/app/views/auth/signup.scala#L11 https://github.com/lichess-org/lila/blob/master/ui/pagelets/src/login.ts

[Carbrex]

This is a simple function that you can make in login.ts and call inside loginStart() and signupStart(). You could make changes to this function and write some css for this

function passwordShowHide() {
  $('#form3-password').each(function (this: HTMLElement) {
    const $input = $(this);
    const $button = $('<button class="show-hide-password" title="Show/hide password">hi</button>').insertAfter($input);
    $button.on('click', function (e: Event) {
      e.preventDefault();
      const type = $input.attr('type') === 'password' ? 'text' : 'password';
      $input.attr('type', type);
      $button.toggleClass('show', type === 'text');
    });
  });
}

[joeyksclark]

Thanks, I'll get to tinkering with this. Appreciate your help.

[joeyksclark]

Quick work log before I take a break:

• Added a visibility toggle element to the scala - https://github.com/lichess-org/lila/blob/master/app/views/auth/bits.scala#L27.
• Wrote a toggle function similar to the one above in login.ts, and got a naive version working.
• Added some rudimentary CSS as a proof of concept to https://github.com/lichess-org/lila/blob/master/ui/pagelets/css/_auth.scss.
• Attempted to add the icon within the password input with CSS, but didn't get it working. I'm sure I can given some more time and research.
• Thought about different icon options. I'm trying to steer away from text (like Show/Hide) due to i18n concerns. There is an CSS library that contains the eye icon that I'm trying to install called fontawesome, but I'm getting an error. I'm using Gitpod, and within the lila repo, I'm running npm install @fortawesome/fontawesome-free. Since this is free software, this library should be clear to use for Lichess if it isn't already.

[fitztrev]

For the icon, consider finding one from https://game-icons.net/ and adding it to the Lichess font. To see other icons currently in use, visit /oops/font.html on your dev instance.

[arnaveenkumar]

Are we still working on this issue? @joeyksclark Let me know if you need any help, I can spend some time for this issue to be resolved.

[joeyksclark]

The amount of time I'm going to be able to devote to this issue is diminishing - I've just moved and started a new job. If you want to sync about what I've had, let me know. If not, feel free to tackle.

[arnaveenkumar]

@joeyksclark Congrats for your new job!

Yes, I would like to see what you had done, so that I can test and build if I can.

[joeyksclark]

Sure, I'll write up what I did when I get a chance.

[joeyksclark]

Apologies again for the delay on this. Apparently the Gitpod workspace got reaped automatically, likely due to inactivity. @arnaveenkumar if you have any questions about what I did, documented above, I'd be happy to help.

[Aryananand04]

I am new to open source , I'll try to work on this issue if no one else is working on it. Do let me know

[arnaveenkumar]

Why not? Go ahead and try it! Please check the above comments to get more insights about this issue. Most importantly, follow the contribution guide which is on the lichess GitHub page. Feel free to ask for any queries, I can help a bit.

[Aryananand04]

sure . Thanks , I'll look into it . Can i get a lead on which folder do i need to edit

[arnaveenkumar]

You will get a lead if you read all the above comments :) Fyi,

https://github.com/lichess-org/lila/blob/master/app/controllers/Auth.scala#L170 https://github.com/lichess-org/lila/blob/master/app/views/auth/signup.scala#L11 https://github.com/lichess-org/lila/blob/master/ui/pagelets/src/login.ts

[DrBake]

@Aryananand04 are you still working on the issue? I am starting my Open Source journey.

[Aryananand04]

@Aryananand04 are you still working on the issue? I am starting my Open Source journey.

no brother you can work on it if you want , I still don't have enough knowledge to solve them , will return to this org after i have enough coz its a good platform and i want to contribute to it , unlike chess.com which is paid

[Jonathan-Ma]

Hi @ornicar, I'm new to open source and Scala 3, I have been looking for projects to contribute to and this looks interesting. Is it cool if you assign this to me?

[schlawg]

If you'd like to tackle it, then do so and submit a PR if it works. I think maybe we should leave it unassigned because something about this one seems to scare people off mid-effort.