NetTalk Central

NetTalk Web Server => Web Server - Ask For Help => Topic started by: urayoan on September 18, 2020, 09:12:56 AM

Title: How to Toggle Password Visibility
Post by: urayoan on September 18, 2020, 09:12:56 AM: Hi:
Any iedas how to implement this?
Title: Re: How to Toggle Password Visibility
Post by: Mike McLoughlin on September 18, 2020, 12:20:31 PM: 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
Title: Re: How to Toggle Password Visibility
Post by: urayoan on September 21, 2020, 03:58:56 AM: Thank you Mike, I was looking more to implement it using CSS.

Quote from: Mike McLoughlin on September 18, 2020, 12:20:31 PM
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
Title: Re: How to Toggle Password Visibility
Post by: Bruce on September 21, 2020, 10:43:10 PM: 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
Title: Re: How to Toggle Password Visibility
Post by: urayoan on September 22, 2020, 03:35:18 AM: 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

Quote from: Bruce on September 21, 2020, 10:43:10 PM
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
Title: Re: How to Toggle Password Visibility
Post by: urayoan on September 22, 2020, 04:00:19 AM: 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!
Title: Re: How to Toggle Password Visibility
Post by: bshields on September 22, 2020, 05:36:18 AM: 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: ''

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
Title: Re: How to Toggle Password Visibility
Post by: urayoan on September 22, 2020, 07:24:00 AM: 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('')
DO SendPacket

Quote from: bshields on September 22, 2020, 05:36:18 AM
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: ''

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
Title: Re: How to Toggle Password Visibility
Post by: urayoan on September 22, 2020, 10:25:45 AM: Thank you for the guidance guys. All success!