# UI notification window with password input

**URL:** <https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215>\
**Category:** Dashboard\
**Created:** [1 September 2022 12:09 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215 "2022-09-01T12:09:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![plouc](https://avatars.discourse-cdn.com/v4/letter/p/f19dbf/32.png) [@plouc](https://discourse.nodered.org/u/plouc)\
**Post date:** [1 September 2022 12:09 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/1 "2022-09-01T12:09:58Z")

</div>

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](https://discourse.nodered.org/t/notification-node-dialog-input-field-as-password/53494):
>
> 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](https://paulund.co.uk/style-text-like-passwords-with-css)**
>
> Webkit have lots of experimental CSS properties that you can currently use on your website, one of the properties we are

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!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 September 2022 13:47 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/2 "2022-09-01T13:47:25Z")

</div>

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

[\<input type="password"\> - HTML: HyperText Markup Language | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#browser_compatibility)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86f68eec37b94d1d6b9a2c4b44b7658dc29ec0b6.png)

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).

---

<div class="post-metadata">

**Author:** ![plouc](https://avatars.discourse-cdn.com/v4/letter/p/f19dbf/32.png) [@plouc](https://discourse.nodered.org/u/plouc)\
**Post date:** [5 September 2022 07:26 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/3 "2022-09-05T07:26:00Z")

</div>

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.

 ![Capture d’écran 2022-09-05 à 09.19.21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/aeba08a4257e45e9ae56c867d4a96806d32e8bbf.png)

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!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 September 2022 08:27 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/4 "2022-09-05T08:27:40Z")

</div>

> [@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?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 September 2022 11:36 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/5 "2022-09-05T11:36:16Z")

</div>

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

```auto
[{"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":[]}]

```

---

<div class="post-metadata">

**Author:** ![plouc](https://avatars.discourse-cdn.com/v4/letter/p/f19dbf/32.png) [@plouc](https://discourse.nodered.org/u/plouc)\
**Post date:** [5 September 2022 11:59 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/6 "2022-09-05T11:59:24Z")

</div>

![Capture d’écran 2022-09-05 à 13.56.46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8d01d178ff2608749b9986d743964655b751c00b.png)  
I tried it as well, and could not find a way to have the dots instead of the letters...

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 September 2022 12:02 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/7 "2022-09-05T12:02:51Z")

</div>

Works for me.

 ![chrome_screenshot_1662379307587](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03a4b0aea973ba78aa15e396cc846e6ead9b5c5c.png)

---

<div class="post-metadata">

**Author:** ![plouc](https://avatars.discourse-cdn.com/v4/letter/p/f19dbf/32.png) [@plouc](https://discourse.nodered.org/u/plouc)\
**Post date:** [5 September 2022 13:51 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/8 "2022-09-05T13:51:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [6 September 2022 00:46 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/9 "2022-09-06T00:46:46Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aabace2b2047c4ea48586132944d46c7be43226b.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d5b2bc2b240ccde2007d13558b3615f57a41a0b0.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/548a03ab98dfeb59e9064a84277c65d37ea6a632.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/5146f19146f193a4a623ae9e0e8a6535cbb1e473.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 October 2022 00:46 UTC](https://discourse.nodered.org/t/ui-notification-window-with-password-input/67215/10 "2022-10-06T00:46:59Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.