C#•10mo ago

Button showing password.

I want to add button that shows password. How can I do that? This is my code:

 string encryptedPassword = "";

 for (int i = 0; i < Model.Password.Length; i++)
 {
     encryptedPassword += "*";
 }
 
 <p ALIGN="LEFT"><b>Id:</b> @Model.Id </p>
 <p ALIGN="LEFT"><b>Rank: </b> @Model.Ranks</p>
 <p ALIGN="LEFT"><b>Nick: </b> @Model.Nick</p>
 <p ALIGN="LEFT"><b>Email:</b> @Model.Login. </p>
 <p ALIGN="LEFT"><b>Password:</b> @encryptedPassword </p>
 <button ALIGN="LEFT" type="button">Show password</button>

 string encryptedPassword = "";

 for (int i = 0; i < Model.Password.Length; i++)
 {
     encryptedPassword += "*";
 }
 
 <p ALIGN="LEFT"><b>Id:</b> @Model.Id </p>
 <p ALIGN="LEFT"><b>Rank: </b> @Model.Ranks</p>
 <p ALIGN="LEFT"><b>Nick: </b> @Model.Nick</p>
 <p ALIGN="LEFT"><b>Email:</b> @Model.Login. </p>
 <p ALIGN="LEFT"><b>Password:</b> @encryptedPassword </p>
 <button ALIGN="LEFT" type="button">Show password</button>

9 Replies

Hazel 🌊💃•10mo ago

Is this Blazor?

Murten•10mo ago

Looks like it.

RafcordOP•10mo ago

I don't know what blasor is. This is in cshtml file.

Hazel 🌊💃•10mo ago

The simple answer is to toggle between displaying encryptedPassword and Model.Password. It's simple enough to add a bool which is toggled on button click.

RafcordOP•10mo ago

This is my idea, but I don't know how to toggle after pressing the button.

string encryptedPassword = "";
bool isPasswordShown = false;

for (int i = 0; i < Model.Password.Length; i++)
{
    encryptedPassword += "*";
}

<p ALIGN="LEFT"><b>Id:</b> @Model.Id </p>
<p ALIGN="LEFT"><b>Rank: </b> @Model.Ranks</p>
<p ALIGN="LEFT"><b>Nick: </b> @Model.Nick</p>
<p ALIGN="LEFT"><b>Email:</b> @Model.Login. </p>

if (isPasswordShown)
{
    <p ALIGN="LEFT"><b>Password:</b> @Model.Password </p>
}
else
{
    <p ALIGN="LEFT"><b>Password:</b> @encryptedPassword </p>
}

<div align="left">
    <input type="button" id="0" value="Show password" style="border-radius: 7px;background-color: #E9987D; color: white;" onclick="!isPasswordShown " />
</div>

string encryptedPassword = "";
bool isPasswordShown = false;

for (int i = 0; i < Model.Password.Length; i++)
{
    encryptedPassword += "*";
}

<p ALIGN="LEFT"><b>Id:</b> @Model.Id </p>
<p ALIGN="LEFT"><b>Rank: </b> @Model.Ranks</p>
<p ALIGN="LEFT"><b>Nick: </b> @Model.Nick</p>
<p ALIGN="LEFT"><b>Email:</b> @Model.Login. </p>

if (isPasswordShown)
{
    <p ALIGN="LEFT"><b>Password:</b> @Model.Password </p>
}
else
{
    <p ALIGN="LEFT"><b>Password:</b> @encryptedPassword </p>
}

<div align="left">
    <input type="button" id="0" value="Show password" style="border-radius: 7px;background-color: #E9987D; color: white;" onclick="!isPasswordShown " />
</div>

Hazel 🌊💃•10mo ago

You're not updating isPasswordShown to its negated value. You have to assign the result of that negation. I'd start with that.

RafcordOP•10mo ago

This code doesn't work. So what should it look like?

 string encryptedPassword = "";
 bool isPasswordShown = false;

 for (int i = 0; i < Model.Password.Length; i++)
 {
     encryptedPassword += "*";
 }
 
 <p ALIGN="LEFT"><b>Id:</b> @Model.Id </p>
 <p ALIGN="LEFT"><b>Rank: </b> @Model.Ranks</p>
 <p ALIGN="LEFT"><b>Nick: </b> @Model.Nick</p>
 <p ALIGN="LEFT"><b>Email:</b> @Model.Login. </p>

 if (isPasswordShown)
 {
     <p ALIGN="LEFT"><b>Password:</b> @Model.Password </p>
 }
 else
 {
     <p ALIGN="LEFT"><b>Password:</b> @encryptedPassword </p>
 }

 <div align="left">
     <input type="button" id="0" value="Show password" style="border-radius: 7px;background-color: #E9987D; color: white;" onclick="isPasswordShown = !isPasswordShown " />
 </div>

 string encryptedPassword = "";
 bool isPasswordShown = false;

 for (int i = 0; i < Model.Password.Length; i++)
 {
     encryptedPassword += "*";
 }
 
 <p ALIGN="LEFT"><b>Id:</b> @Model.Id </p>
 <p ALIGN="LEFT"><b>Rank: </b> @Model.Ranks</p>
 <p ALIGN="LEFT"><b>Nick: </b> @Model.Nick</p>
 <p ALIGN="LEFT"><b>Email:</b> @Model.Login. </p>

 if (isPasswordShown)
 {
     <p ALIGN="LEFT"><b>Password:</b> @Model.Password </p>
 }
 else
 {
     <p ALIGN="LEFT"><b>Password:</b> @encryptedPassword </p>
 }

 <div align="left">
     <input type="button" id="0" value="Show password" style="border-radius: 7px;background-color: #E9987D; color: white;" onclick="isPasswordShown = !isPasswordShown " />
 </div>

Hazel 🌊💃•10mo ago

How to assign a value to a variable on button click in razor pages (or cshtml if you're not sure on tech).

I don't deal with razor/blazor enough to know for sure without researching it myself.

Pobiega•10mo ago

if this is razor, it won't do anything, since razor isn't reactive

Gaming

Programming

Button showing password.