0
217
Viewshow do i show password value when editing user details in MVC
I am working on a MVC core project. I have a view on which user can edit user details. I have a input field of type password. When we are creating the user, it works fine in hiding the characters as one type in the textbox, but when I want to edit the user details, the password input does not show a value.
How do I enable an input of type password to show or have a value when editing and at the same time I want to include the show and hide password functionality on the input.
3 answers
Answer question0
$(document).ready(function() {
let model = @Html.Raw(Json.Serialize(Model));
let passwordEl = $("#Password");
let showHide = $('#showHidePassword');
let showHideSpan = $('.icon');
if (model.InstitutionModel.InstitutionSMTP.Id == 0) {
passwordEl.attr('type', 'password');
} else if (model.InstitutionModel.InstitutionSMTP.Id > 0) {
passwordEl.attr('type', 'password');
}
showHide.click(function (e) {
let type = passwordEl.attr('type') === 'password' ? 'text' : 'password';
passwordEl.attr('type', type);
if (showHideSpan.hasClass('fa fa-eye')) {
showHideSpan.removeClass('fa fa-eye').addClass('fa fa-eye-slash');
} else {
showHideSpan.removeClass('fa fa-eye-slash').addClass('fa fa-eye')
}
})
}) <div class="form-group row ">
<label class="col-sm-3 col-form-label control-label" for="accountHolder">Password</label>
<div class="col-sm-9 input-group required_field">
<input asp-for="Password" id="Password" class="form-control border border-secondary" type="text" />
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="showHidePassword" style="height:38px;">
<span class="fa fa-eye icon"></span>
</button>
</div>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>`
0
You can use a button to change the type of the input,here is a demo:
html:
<input type="password" id="passwd" name="passwd">
<button type="button" id="eye" onclick="ShowPassword()">
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>
js:
function ShowPassword() {
var s = document.getElementById("passwd");
s.type = s.type == "password" ? "text" : "password";
}
result:
0
Although, it is not recommended to directly show the user's password, instead you should ask user to enter old password and also have fields for new password.
In order to show value of input password field, you can set type attribute of input field to text.