To Show / Hide password with eye icon on Registration / Recovery Password / Edit Profile / Login pages

Need help with the Administration of your Joomla! 3.x site? This is the spot for you.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
joomleb
Joomla! Ace
Joomla! Ace
Posts: 1009
Joined: Sat Aug 20, 2005 8:53 am
Location: Panamá

To Show / Hide password with eye icon on Registration / Recovery Password / Edit Profile / Login pages

Post by joomleb » Sun May 24, 2020 12:58 am

Hi guys,
about the Password fiels and referring to the pages:
--- Registration
--- Recovery Password
--- Edit Profile
--- Login

To have a show / hide eye icon, on the right, into the password / confirm password fields like this one it is really a must:

--- as far as I know, to run it, I can add this JS code into the template Custom JS:

Code: Select all

function showpsw() {
  var x = document.getElementById("#jform_password1");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

function showpsw() {
  var x = document.getElementById("#jform_password2");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
Am I right ?


Please, Can anyone help on adding the Fontawesome 5 eye icons show / hide into the fields where: onclick="showpsw()" ?!?

 
User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 9039
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: To Show / Hide password with eye icon on Registration / Recovery Password / Edit Profile / Login pages

Post by sozzled » Sun May 24, 2020 2:20 am

Before people rush blindly thinking this this idea as a must-have (or, worse, believe that using what is called a password reveal will let them think that what is hidden is someone's password) ... stop.

Yes, it's true that the Javascript will toggle the state of the data elements identified as "#jform_password1" (or "#jform_password2)" if they exist on the page, from password to plain text and vice versa. If these elements do not exist on the page then the Javascript will do nothing. For examply, try this with Protostar.

Secondly, the idea is already implemented in J! 4, with the Casseopia and Atum templates (so, if it's a must-have, then why re-invent the wheel?

Thirdly, the Javascript only renders the value of the of the element as the text is entered by the user (or from whatever may be stored within the browsers password store (if stored passwords are implemented by the browser and used by the user on that device). The value is not populated from the database (even if reverse-engineering a user's password were possible, which it isn't).

Using an "eye" icon (or, properly, a glyph) is easy enough. It simply requires adding a CSS class to the elements, such as

Code: Select all

eye-open:before {
	content: "\f06e";
	font-family: FontAwesome;
}
... assuming your template has loaded FontAwesome. Not all templates use FontAwesome fonts; your template has to make sure these font are loaded. (FontAwesome is not used, by default, in Protostar or Isis for example.) Isis uses Icomoon fonts (the hex-code value for an "eye" glyph using Icomoon is "\3c")

The CSS code snippet above is just an example; it won't work without extra effort.

If you want to use different glyphs depending on whether the current state of those elements, you need to also add additional CSS class values to the elements within the Javascript, when the toggle is triggered, something like this:

Code: Select all

function showpsw() {
  .
  .
  .
  if (x.type === "password") {
    x.type = "text";
    x.classname = "eye-closed"
  } else {
    x.type = "password";
    x.classname = "eye-open"
  }
  .
  .
  .
}
Good luck.
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

joomleb
Joomla! Ace
Joomla! Ace
Posts: 1009
Joined: Sat Aug 20, 2005 8:53 am
Location: Panamá

Re: To Show / Hide password with eye icon on Registration / Recovery Password / Edit Profile / Login pages

Post by joomleb » Sun May 24, 2020 3:16 am

Hi sozzled,
Yes, you are right, thank you for the clarification to all readers here.

"J! 4, with the Casseopia and Atum templates", ...I am getting old, you are absolutely right, I'm going to investigate them to understand how the feature has been implemented.

Template - Yes, I'm using Helix Ultimate right now that is loading last Font Awesome 5

Last, but not least, many thanks for the use of different glyphs depending on whether the current state of those elements suggestion. I hadn't thought of it, but very useful.

I'll be back here reporting the results...

 

Post Reply

Return to “Administration Joomla! 3.x”