Show/hide password in login form

[Richard I]

Hi all
Can I have help toggling the password field please, ideally with/including an icon.
Ive been chasing my tail over it and would rather not use Javascript or the two fields option.
I did get some code suggestion from Copilot which was silent on how to make it "Fire'
My existing field is a Password field.

code from a  working app would be wonderful.
Thanks
Richard
Clarion12 NT 14

[JohanR]

Hi Richard

I recently did some work on my login screen and your post got me to bring this functionality forward.
Also wanted to see how AI would handle this and use it as a learning exercise.

I know you mentioned you prefer no JS, but this worked quite nicely.

This was done with adding a JS file and some CSS , courtesy of AI
Let me know then I can adjust the CSS and JS to make sure it's generic for use on any other page with different naming

Still testing but working well so far.

regards

Johan

[Jane]

I've been doing this for some years.
The attached is an example I sent to somebody in 2022.
There's some stuff in the css that's not needed for the example (I didn't take time to clean it up) but it's a working NT12 example.

EDIT:  This NT12 example will require some modification to run on NT 14. 
NT14 example several posts down.

[Richard I]

Many thanks Jane and Johan,

Jane, wont compile and I cannot get to the webserver to populate the fields..?
95 errors all proxyserver etc.
Johan if you could - it might be a good place to learn JS
Cheers
Richard

[Jane]

@Richard - what version of NetTalk and Clarion?

[Richard I]

Hi Jane

Clarion 12.14000
NT 14.36

Thanks
Richard

[Jane]

Richard,
Here's a version that's built in NT14 (with the webhandler template that was changed from NT12).

Let me know if it compiles for you OK.

[Richard I]

HURRAH !!!
Many thanks Jane !
It compiles perfectly and works !
Now all I have to do is work out why it works and how you did it !

Can I suggest you send it to Bruce to incorporate into his next NT release examples?

With grateful regards,
Richard

[Jane]

I sent my little example to Bruce in June of 2022, Richard, in case he thought it useful.

Glad you were able to make it work.

It's a simple no-dictionary wizarded app.

Because I was lazy and just incorporating stuff from one of my production apps, I added two separate CSS files to the webserver template (in the Styles/Files tab) and one little bit of javascript on the webserver template Scripts tab.

You can see from my zip file where those files go inside the web folder.  There's also a PNG with the icons.  (And with a bunch of other junk, since I just took it from a different app.)

I didn't change any of the wizarded embed code in the LoginForm.

The changes are on fields.

Note in LOC:Password the suppress comment and span value/comment.  Also note that it is not last on line and not last in cell.
The name of the LOC:Password equate needs to match the password document.querySelector line in the javascript file.  NT translates a colon into a double underscore.  In my production apps I normally change that to something else, but this was intended to work with an out-of-the-box wizarded app.

The new button is last on line.
On the button tab, note the text in the HTML before image/text field.  The ID that's set there is what the javascript uses.
Function call in the Javascript onclick field in the button's OnClick tab.
One class on the button's CSS tab

If mine works and yours doesn't, you're doing something wrong