Password field - Printable Version

Password field - Printable Version

+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: OLD visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Password field (/showthread.php?tid=4295)

Password field - benjii - 13.10.2022

Hey everybody,

I'm looking to display a login widget on the visualisation, containing a username box and a password box
my question is, how to put a password field in the visualisation ? Meaning not showing the password as it is being typen in, like with * or # for example

Thanks in advance

RE: Password field - admin - 13.10.2022

See this: https://forum.logicmachine.net/showthread.php?tid=2339

RE: Password field - benjii - 13.10.2022

(13.10.2022, 13:02)admin Wrote: See this: https://forum.logicmachine.net/showthread.php?tid=2339

Thanks a lot Big Grin

I tried to implement the Javascript Code at the end of the thread

Code:
.password .value {
  color: transparent;
  position: relative;
}

.password .value:after {
  color: #333;
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  content: "*****";
}

and used 'password' as an additional class to the objects but didn't work
do you know the reason why ?

RE: Password field - admin - 13.10.2022

This is CSS not JS.

RE: Password field - benjii - 13.10.2022

(13.10.2022, 14:13)admin Wrote: This is CSS not JS.

Thought so.
How can I use it then ?

RE: Password field - admin - 13.10.2022

Vis. graphics > Edit Custom CSS

RE: Password field - benjii - 13.10.2022

(13.10.2022, 14:17)admin Wrote: Vis. graphics > Edit Custom CSS

hmm it doesn't work
while typing it is working but not masking the value
maybe I'm doing something wrong
Do you have an Idea ?

RE: Password field - Daniel - 13.10.2022

Try this CSS

Code:
.password.item-value {
  color: transparent ;
  position: relative ;
}

.password.item-value:after {
  color: #333;
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  width: 50px;
  content: "*****" ;
}

keep the JS as before.

RE: Password field - benjii - 13.10.2022

(13.10.2022, 15:10)Daniel Wrote: Try this CSS

Code:
.password.item-value { color: transparent ; position: relative ; } .password.item-value:after { color: #333; position: absolute; left: 0; right: 0; top: 3px; width: 50px; content: "*****" ; }
keep the JS as before.

Hey thanks!
almost worked look

however it is still showing the text

RE: Password field - Daniel - 13.10.2022

do you have two elements on top of each other?

RE: Password field - admin - 14.10.2022

Try this CSS:

Code:
.password.item-value {
  color: transparent !important;
  width: 50px;
}
.password.item-value:after {
  color: #333;
  position: absolute;
  left: 3px;
  right: 0;
  top: 8px;
  width: 50px;
  content: "*****";
}

RE: Password field - benjii - 14.10.2022

(14.10.2022, 06:07)admin Wrote: Try this CSS:

Code:
.password.item-value { color: transparent !important; width: 50px; } .password.item-value:after { color: #333; position: absolute; left: 3px; right: 0; top: 8px; width: 50px; content: "*****"; }

Yes perfect! This worked! Thanks a lot Big Grin