Alternação de senha app react

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

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

Solution

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

Solution

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.


Kind regards,

Rui Barradas

Nuno Reis wrote:

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

Hi Nuno,  

Good hahaha  

I implanted in that sense to see, and it gave a certain error

What will it be?


Thanks

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.


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  

var inputPassword = document.querySelector ('. login-password');


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,

Rui Barradas

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


Rui Barradas wrote:

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


Kind regards,

Rui Barradas

@Rui,

I did it, I ended up answering above for you.

Thank


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');  
}


Kind regards,

Rui Barradas

@Rui

I Tried
It 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.


Kind regards,

Rui Barradas

Rui Barradas wrote:

Hi Giovanna,

No problem, I'm glad that you managed to do it.


Kind regards,

Rui Barradas

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


Hi Giovanna,

Yes, of course you can.


Just link the if widget to your SenhaOnClick client action. Like this:


Kind regards,

Rui Barradas

Rui Barradas wrote:

Hi Giovanna,

Yes, of course you can.


Just link the if widget to your SenhaOnClick client action. Like this:


Kind regards,

Rui Barradas

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:


Kind regards,

Rui Barradas

Rui Barradas wrote:

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:


Kind regards,

Rui Barradas

Hi Rui,

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

Thank

Hello Giovanna,

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.


Kind regards,

Rui Barradas