# Show/Hide Password using Eye Icon on the login page

**URL:** <https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780>\
**Category:** Product\
**Tags:** configuration\
**Created:** [May 25, 2023, 2:15pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780 "2023-05-25T14:15:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![philip](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/philip/32/123_2.png) [@philip](https://forum.communityhealthtoolkit.org/u/philip)\
**Post date:** [May 25, 2023, 2:15pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/1 "2023-05-25T14:15:28Z")

</div>

Dear all, in one of the UATs CHWs have reccomended enabling of the password eye icon on the password field to enable them determine they are making the right input. This is moreso because the phone screen is small,length and complexity of password as well as other factors like visual challenges. I would love to hear if anyone has tried this on CHT based apps or has a solution to the same. See screenshot below

 ![Screenshot -login page](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/c/c3b9212439ff234b0001d51e60c1bd9cec4f361c.png)

---

<div class="post-metadata">

**Author:** ![michael](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/michael/32/319_2.png) [@michael](https://forum.communityhealthtoolkit.org/u/michael)\
**Post date:** [June 5, 2023, 3:31pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/2 "2023-06-05T15:31:08Z")

</div>

Thanks @philip … Couple questions for you:

In production…

1. …will these users see the **Log out** option\* once they log in the first time?
2. …will users be logging in with username/passwords or will they be using [Magic Links](https://docs.communityhealthtoolkit.org/apps/concepts/access/#magic-links-for-logging-in-token-login)?

\*_This is controlled by the `can_log_out_on_android` [permission](https://docs.communityhealthtoolkit.org/apps/reference/app-settings/user-permissions/)_

![Screenshot 2023-06-05 at 11.20.48 AM](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/c/c6bff7bbf4474740c3df5092df4c380b393752d5.png)

---

<div class="post-metadata">

**Author:** ![philip](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/philip/32/123_2.png) [@philip](https://forum.communityhealthtoolkit.org/u/philip)\
**Post date:** [June 6, 2023, 10:29am UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/3 "2023-06-06T10:29:32Z")

</div>

Thanks @Michael for the questions. See responses below

1. Users will not see the LOG OUT button once they login in for the first time.This is to ensure they are not locked out incase they have logged out but can’t access connectivity at the time of trying to access the app
2. Login mode- password.

---

<div class="post-metadata">

**Author:** ![derick](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/derick/32/78_2.png) [@derick](https://forum.communityhealthtoolkit.org/u/derick)\
**Post date:** [June 6, 2023, 12:30pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/4 "2023-06-06T12:30:10Z")

</div>

@philip this is a great use case for using [magic links](https://docs.communityhealthtoolkit.org/apps/concepts/access/#magic-links-for-logging-in-token-login). However, this would need setting up a mobile gateway (either phone or aggregator).

Once caveat is that the use magic links is currently [broken](https://forum.communityhealthtoolkit.org/t/any-users-of-magic-links-and-android-12-theyre-broken-and-medic-wonders-how-quick-we-should-fix-them/2805/1) from Android 12

---

<div class="post-metadata">

**Author:** ![Nicole\_Orlowski](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/nicole_orlowski/32/385_2.png) [@Nicole\_Orlowski](https://forum.communityhealthtoolkit.org/u/Nicole_Orlowski)\
**Post date:** [June 8, 2023, 5:56pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/5 "2023-06-08T17:56:04Z")

</div>

+1 on having the show password functionality as an [accessibility best practice](https://m3.material.io/components/text-fields/accessibility#269880b5-9a83-4509-9c02-d836cdd7538f). Is this a quick win possibility @Jennifer_Quesada?

---

<div class="post-metadata">

**Author:** ![gareth](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/gareth/32/62_2.png) [@gareth](https://forum.communityhealthtoolkit.org/u/gareth)\
**Post date:** [June 8, 2023, 10:51pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/6 "2023-06-08T22:51:04Z")

</div>

I think this is a quick win. The solution is simply to change the `type` of the input from `password` to `text`. You need a little visual styling to get the “reveal” icon to look right but it should be easy enough.

---

<div class="post-metadata">

**Author:** ![Jennifer\_Quesada](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/jennifer_quesada/32/553_2.png) [@Jennifer\_Quesada](https://forum.communityhealthtoolkit.org/u/Jennifer_Quesada)\
**Post date:** [June 9, 2023, 3:40am UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/7 "2023-06-09T03:40:02Z")

</div>

I’ve created a [ticket](https://github.com/medic/cht-core/issues/8311) for tracking. cc: @michael

---

<div class="post-metadata">

**Author:** ![hulkk](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/hulkk/32/2558_2.png) [@hulkk](https://forum.communityhealthtoolkit.org/u/hulkk)\
**Post date:** [September 13, 2023, 6:23am UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/8 "2023-09-13T06:23:56Z")

</div>

I believe implementing a password eye icon for easier [login](https://depositphotos.com/vectors/login.html) verification on CHT-based apps is a thoughtful suggestion, especially considering small screens and potential visual challenges. However, the feasibility of this feature largely depends on the app’s design and functionality. While it might not have a ready-made solution, the app’s developers or moderators could explore this idea further. It’s worth discussing with them to enhance user experience and accessibility. Collaboration between users and app creators can lead to valuable improvements.

---

<div class="post-metadata">

**Author:** ![diana](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/diana/32/2049_2.png) [@diana](https://forum.communityhealthtoolkit.org/u/diana)\
**Post date:** [September 13, 2023, 9:20pm UTC](https://forum.communityhealthtoolkit.org/t/show-hide-password-using-eye-icon-on-the-login-page/2780/9 "2023-09-13T21:20:33Z")

</div>

I believe this has already been worked on as is available from 4.3.0 onwards: [Show password when clicking on the eye icon · Issue #8311 · medic/cht-core · GitHub](https://github.com/medic/cht-core/issues/8311)
