UI notification window with password input

[plouc]

Hello, i am trying to have a ui notification with a password field that will simply hide the text entered.

Looking at the forum i've found this post:

Notification Node Dialog Input field as Password

Is it possible to influence the input field in the dialog supported by the notification dialog to be of type "password" instead of "text". Meaning that the input is just shown as **** instead of readable text? I didn't find an option for that in the help of the node! Thanks in advance!

However it doesn't seems supported by all browsers, and indeed doesn't work with firefox.

Style Text Like Passwords With CSS - Paulund

So i was wondering if it was a simple way to implement it, i've tried to add something like this as class input type="password"

and it doesn't work either.

Does anyone have another idea?

Thanks for your help!

[TotallyInformation]

The password field obfuscation absolutely does work on Firefox. And on every other browser.

<input type="password"> - HTML: HyperText Markup Language | MDN (mozilla.org)

HOWEVER, that is not really a Security feature, it only hides the password from shoulder surfers. Don't forget that you need to take extra care when trying to implement logins. That includes only ever using TLS (HTTPS) and removing the login data from memory as quickly as possible. You also need to do the usual sanitisation of the user input data to ensure that only valid data is entered, it is constrained to a sensible length (e.g. visible characters only, max 255 characters, etc).

[plouc]

Hello, and thanks a lot for your answer, and sorry for the delay.

So yes, of course the password fileed works on every browser, i didn't explained well that it simply doesn't format the input of the ui notification node.

of course, this is just a shoulder security, and only prevent someone which doesn't know what he is doing to acidentally access parts of the node-red dashboard. It certainely will be hackable.

however, i could also use the password text input and ui control. I was just wondering if it was a simple way to do so with a notification.

Thanks again!

[TotallyInformation]

@plouc

I was just wondering if it was a simple way to do so with a notification.

The settings there suggest that you can tick the box and then pass raw HTML as input to format the dialog - have you tried that?

[E1cid]

As @TotallyInformation suggests you can format the input using <style> tags inthe incoming payload. e.g.

[{"id":"304ae7d3.8cf568","type":"inject","z":"6c3072aefaf68405","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<style>input {     text-security: circle; /* IE/Safari */     -moz-text-security: circle; /* FireFox */     -webkit-text-security: circle; /* Chrome/Safari  */ }</style>Enter Paassword","payloadType":"str","x":350,"y":140,"wires":[["32aa36df.3cf492"]]},{"id":"32aa36df.3cf492","type":"ui_toast","z":"6c3072aefaf68405","position":"prompt","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"Cancel","raw":true,"className":"","topic":"","name":"","x":540,"y":140,"wires":[["ead4bbb4.8515b"]]},{"id":"ead4bbb4.8515b","type":"debug","z":"6c3072aefaf68405","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":200,"wires":[]}]

[plouc]

I tried it as well, and could not find a way to have the dots instead of the letters...

[E1cid]

Works for me.

[plouc]

ok, firefox seems to be the problem. Tested on safari and it is perfect!

[smanjunath211]