Hello persons,
I am testing a password toggle using a button, in a reaction application, because I have researched that there is no reaction plug-in that does this toggle for me, I am testing to deploy directly to the application.
I don't know what could be happening, and I don't know if my idea is possible, could someone help me?
Thanks in advance!
Below is the error and development
Clicking the button...
var inputPassword = document.querySelector ('. login-password');var typeInputPassword = inputPassword.type;if (typeInputPassword === 'senha') { inputPassword.setAttribute ('type', 'text');} else { inputPassword.setAttribute ('type', 'password');}
I posted and as soon as I click the button ..
I don't know if this implantation is possible, but i would like some help.
Thanks
Hi,
@Nuno's idea is completely valid.
But your idea should work as well. I think that your problem is in this line:
var inputPassword = document.querySelector('. login-password');
You have a space between the dot and the "login" word. Try to replace it for this one:
var inputPassword = document.querySelector('.login-password');
The rest of the code seems okay.
Don't forget to use the class login-password in the input's style classes. Here's an example:
Kind regards,
Rui Barradas
Rui Barradas wrote:
Oi,
A ideia de @ Nuno é completamente válida.
Mas sua ideia deve funcionar também. Eu acho que seu problema está nesta linha:
var inputPassword = document.querySelector ('. login-password');
Você tem um espaço entre o ponto e a
O restante do código parece bom.
Não se esqueça de usar a senha de login da classe nas classes de estilo da entrada. Aqui está um exemplo:
Atenciosamente,
Hi Rui,
I removed the space and put the name of the class, but I follow without success.
Below the photos It does not show any error, but it also does not change the password. What can it be? :(
Thank
Hello.
Your idea is almost right.
My difference is that I pass the elementId as a parameter and I remove the login-password class.
This works both ways.
(example attached if the image isn't enough).
Nuno Reis wrote:
Hi Nuno,
Good hahaha
I implanted in that sense to see, and it gave a certain error
What will it be?
1. Yes, that space made the selector invalid.
2. I tried to make the code solid enough to work with two password inputs on the same screen. But the only scenario where that would happen is a "retype your password" on registration. A "see password" is not very relevant for that.
@Nuno, what you did made perfect sense to me :) and it's solid enough for N elements, since you pass the Element Id as an input parameter. But I agree with you, in this "see password" scenario where you only have one element, it's not that relevant.
Anyways I was just trying to explain why that code wasn't working and how to fix it in first place.
What are you sending as buttonid? It should be the buttoninput.id. You can see in the example I sent above.
@Giovanna,
Why don't you stick with your implementation? It is simpler for this scenario and everything was okay, you just need to remove the space in the line that I mentioned.
@Rui,
I did it, I ended up answering above for you.
Hi again Giovanna,
Can you try to use this code instead?
var inputPassword = document.querySelector('.login-password');var typeInputPassword = inputPassword.type;if(typeInputPassword === 'password') { inputPassword.setAttribute('type', 'text');} else { inputPassword.setAttribute('type', 'password'); }
@Rui
I TriedIt worked =D =D
Now I will deploy to the icon
Thank you!!!
Hi Giovanna,
No problem, I'm glad that you managed to do it.
Rui,
Just one question, can I deploy these js via an icon via an if or something?
Because I did the test with the button and now I will implement this action on the icon
Thank you very much in advance
I just got through a link to an action hahaha, but when I shoot to stop seeing the password it doesn't change the icon
After clicking on the icon
Yes, of course you can.
Just link the if widget to your SenhaOnClick client action. Like this:
Yesss, that's what I did = D
But when I shoot to stop seeing the password it doesn't change the icon
I tried that, but it didn't work
Thankss
Hello Giovanna,
What's the variable that you're using in your if statement?
You don't need to change the JavaScript. You just need to place an assign in your SenhaOnClick screen action, assigning your variable to its opposite. Here's an example:
worse than nothing, I was using true and false, but now that I put the variable, the icon is gone kkkkkkkk my god
I must use the isPasswordVisible variable for both icons, right?
Follow the photos
When you put the icons true and false, it looks normal, but remains the same as it does not change
I didn't change anything in js, just in the same action of placing or assigning
Don't use it in the visible property of your icons. That property should stay with the value True. You need to use that variable on the condition inside the if widget.
It will help you to define which icon you want to see.