This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Password field
#1
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
Reply
#2
See this: https://forum.logicmachine.net/showthread.php?tid=2339
Reply
#3
(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 ?
Reply
#4
This is CSS not JS.
Reply
#5
(13.10.2022, 14:13)admin Wrote: This is CSS not JS.

Thought so.
How can I use it then ?
Reply
#6
Vis. graphics > Edit Custom CSS
Reply
#7
(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 ?

Attached Files Thumbnail(s)
   
Reply
#8
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.
------------------------------
Ctrl+F5
Reply
#9
(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

Attached Files Thumbnail(s)
   
Reply
#10
do you have two elements on top of each other?
------------------------------
Ctrl+F5
Reply
#11
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: "*****";
}
Reply
#12
(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 Big Grin
Reply


Forum Jump: