Password input text field

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.

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

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

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

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

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!

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

Hello everyone,

I would like to revisit the topic from the following post.

I urgently need a password input field where the content is hidden with a different character.

@Tess asked about a specific purpose. I want to store different credentials for other services for each user in a “Settings Page.” When new credentials are stored there, the existing ones should not appear in plain text. And even when entering the password, it also should not appear in plain text.

I have been hoping for almost three years that this feature will finally be implemented. Could you perhaps tell me why it has not been implemented? It shouldn't be a big problem in terms of effort, should it?

I last tried it today with version 3.300.8 on premise and couldn't find a way to do it.

Especially since this component already exists in Retool Web. Unfortunately, it's not available for mobile. And I don't quite understand why.

Thank you so much!

Kind Regards
Hendrik

Hey @Hendrik - thanks for reaching out! I've reopened this topic and moved your new post into it in order to keep the conversation in one place.

The short answer as to why this hasn't been implemented is that we've instead focused mostly on developing net new features for web apps and backend automation. I'll definitely reach out internally and bump the internal feature request on your behalf, but don't necessarily expect this to be a priority.

In the meantime, one (admittedly extreme) option is to rearchitect your current mobile app as a mobile-friendly web app. It's also technically possible to recreate this behavior through scripting, although it's pretty tedious and works best for displaying - not inputting - sensitive data.