How to Toggle Password Visibility

[urayoan]

Hi:
  Any iedas how to implement this?

[Mike McLoughlin]

Have 2 fields - one with password attr and the other plain text.  Your "eye" button would flick between them using Reset and the Hide (Clarion) option.

Entering data in one field updates the other immediately.

Should be doable

Mike

[urayoan]

Thank you Mike, I was looking more to implement it using CSS.

Have 2 fields - one with password attr and the other plain text.  Your "eye" button would flick between them using Reset and the Hide (Clarion) option.

Entering data in one field updates the other immediately.

Should be doable

Mike

[Bruce]

Hi Ura,

I don't think it would be done with CSS - I think it would be done with JavaScript.
Setting, and removing, the password attribute for the entry field.

cheers
Bruce

[urayoan]

That's true Bruce. Was a mistake when i reply to Mike about it.

I have something, but the field is not found when the page load. I will post an example to see whats missing on my part or what i am doing wrong

Cheers

Hi Ura,

I don't think it would be done with CSS - I think it would be done with JavaScript.
Setting, and removing, the password attribute for the entry field.

cheers
Bruce

[urayoan]

Lets see, there is two files, one with the HTML of what i want, and one with the Clarion example of what i am getting.

What I am missing here?

Thanks!

[bshields]

Hi,

I tried your idea. I couldn't run your demo as i'm working on an older version on NT on this machine.

I added a button after the password on my login screen.

I mucked around with CSS so it sat nicely to the right.

Desktop Text: '<i class="far fa-eye" id="togglePasswordIcon"></i>'

No jquery styling

onClick(): 'togglePassword();'

I have my own JS file for bits and pieces just like this, i added:

function togglePassword() {
    const togglePassword = document.querySelector('#togglePasswordIcon');
    const password = document.querySelector('#lPassword');
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    togglePassword.classList.toggle('fa-eye-slash');
};

lPassword is my password field, i think yours was loc__password.

Regards
Bill

[urayoan]

Bill it looks like it is! In my case i was adding the button with this line in Clarion, the icon apears but in the console the togglePassword was not found in the js. I will try your idea.

Thank you very much!

5. Inside Value Routine
    packet.Append('<i class="far fa-eye" id="togglePassword"></i>')
    DO SendPacket

Hi,

I tried your idea. I couldn't run your demo as i'm working on an older version on NT on this machine.

I added a button after the password on my login screen.

I mucked around with CSS so it sat nicely to the right.

Desktop Text: '<i class="far fa-eye" id="togglePasswordIcon"></i>'

No jquery styling

onClick(): 'togglePassword();'

I have my own JS file for bits and pieces just like this, i added:

function togglePassword() {
    const togglePassword = document.querySelector('#togglePasswordIcon');
    const password = document.querySelector('#lPassword');
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    togglePassword.classList.toggle('fa-eye-slash');
};

lPassword is my password field, i think yours was loc__password.

Regards
Bill

[urayoan]

Thank you for the guidance guys. All success!