Ocultar Senha

Queria algo para ocultar o campo ou mascarar com asterisco ao digitar a senha. Alguém tem alguma solução. Tentei via CSS mas não consegui.

If you are talking about the built in password security, then it should already be masked when you type.
If you are talking about creating your own password security, then no, there is no native way to mask the text in an entry component. Maybe there is a way with CSS or a much more complicated way by creating your own keypad with and inline list. I don’t have any examples of this though.

BUT…Since you had concerns about security in an earlier post…I feel obligated to mention, that creating your own password security or creating a sign in process that works around or avoids any of Glide’s secure sign in processes, is not secure at all. For a password system like that to work, all data would have to be downloaded to a user’s device to check if the password is valid or not. At that point, security of the data has already been breached because a copy of the data is already downloaded and someone with the right skills could find and expose all of that data in less than a minute.

If security of data is important, then I recommend never creating a sign in process that avoids the sign in option that glide provides. Also, in the documentation I shared in your other post, it’s best to use Private Pro if you need to restrict who will have access to the app in the first place. Also apply Row Owners for data that needs to stay secure among the certain users that do have access to the app.

2 Likes

We do have a way to do that via CSS, but as you said, it looks like OP is trying to store password in the database and in no way would I recommend doing so.

2 Likes

Como seria o metodo via CSS ?

[data-test="app-text-field"] {
    -webkit-text-security: disc;
}

image

However, before applying that, please consider all the possible problems we said above.

3 Likes

This would convert all text boxes to password.
I suggest using something like


[data-test="app-text-field"] > div:nth-of-type(1) > div:nth-of-type(1) {
 -webkit-text-security: disc;
}

This convert only the first box text box to password.

https://i.imgur.com/uUd89oi.png
1 Like

Vlw, testei aqui e funcionou do jeito que eu queria, muito obrigado !
Como o CSS aplica em todas as Text Areas entao criei um action text que substitui a text area do usuario ao começar a digitar a senha e mostra a Rich Text com o codigo para ser aplicado na senha.
image

Interessante, vou testar esse metodo tambem, vlw!

1 Like

You can read here for more info about the method Manan mentioned.

1 Like

Is this CSS not working anymore?

@ThinhDinh

Still working for me.

Thanks. I wasn’t using the first line of CSS that you have written on the screenshot.

Also, if I want to convert the 4th or 5th text box to password box instead of first one, how do I do that?

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(4) > div >div > div:nth-of-type(1) > div:nth-of-type(1) {
 -webkit-text-security: disc;
}

funcionou dentro da plataforma glideapps, porém quando abre no aplicativo publicado o valor não fica mascarado

The DOM structure did change in the past year, I haven’t checked but I think it contributes to the problem you mentioned. Still, I wouldn’t use CSS going forward since it would break at some point with the transition from Apps to Pages.