Password input text field

Mobile
#1

I'm new to Retool and started playing with the Mobile App (Beta) framework and I want to create a login/registration form when users start the app for the first time. I can find the input text component but I cannot find a password input text component or I cannot find the property to set the input text type to password. Am I overlooking something? Any suggestions? Thanks.

#2

Hi @rgroothuis

Thanks for reaching out! It looks like we haven't created a mobile version of this component yet :disappointed:

We have a feature request for this on file internally. I'll post back here once we're able to ship this request!

#3

I made a rudimentary workaround for this limitation...
chrome_cLskjnV2EA

image

Just uses the 'change' event - and evaluates the current typed in text, and stores in in a local variable - overwrites what's on screen with '*'.

Feel free to clean up my dirty JS. lol

good enough for now...

1 Like
#4

turns out...on an actual android device, its not working quite right. it appears to capture all of the characters each time, rather than just the new ones for some reason. must be something to do with the handler :frowning:

back to the drawing board...

#5

OK - ive spent too long on this at this point, but this now actually appears to work in 'preview' mode as well as on an actual Android Device. iOS untested.

I had to do some goofy stuff with replacing chars after the 'change' event is firing - so it will briefly show a double letter before its properly replaced and actual text stored in the Temp var. Test it out and you will see what i mean...

var previousPass = passPlaceHolder.value.pass
var previousLen = passPlaceHolder.value.passlen
var currentText = password1.value;
var currentTextLen = password1.value.length

var replacedVal = currentText.replace(/./g, '*')

if(previousLen > currentTextLen){
  password1.setValue(replacedVal.substr(0,previousLen))
  passPlaceHolder.setIn(["pass"],previousPass.substr(0,currentTextLen))
  passPlaceHolder.setIn(["passlen"],replacedVal.length)
}else{
  password1.setValue(replacedVal.substr(0,previousLen+1))
  passPlaceHolder.setIn(["pass"],previousPass + currentText.substr(currentTextLen-1),1)
  passPlaceHolder.setIn(["passlen"],replacedVal.length)
}
1 Like