Password input text field

Feature Requests
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!

1 Like
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)
}
2 Likes
6

Is this actually working for you?

I ended up abandoning it - because it seemed to not work quite right.

Especially if the string had the character 'i' in it, it would duplicate it.

for example if hidden text was: "iwantthistowork"

it would encode "iiwantthiistowork" - I tried every way I could think of to fix it, and ended up just scraping it. Do you run into the same? Something to do with retools internal use of 'i' as an indexable parameter?

Thanks!

7

Hi @msd5079

Thanks for resurfacing this!

First, in regards to the feature request. We did ship something else that could potentially solve for this on the Enterprise side. In case anyone is interested in upgrading for this feature, it would allow you to customize the login page of any white-labelled apps. Outside of that feature, if anyone is able to share the use case for how they'd like to use a password component, I'd love to share that with our team. Is the intention to connect this password input to a resource? Wondering if we could explore a workaround there!

Hmm, from my testing this works, but if I type my password really quickly it can get out of sync