CODEWITHSUNDEEP
javascript.netasp.net-mvcasp.net-core-mvc
user2768586
user2768586

Reputation: 11

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

Upvotes: 0

Views: 601

Answers (3)

Yiyi You
Yiyi You

Reputation: 18139

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:

enter image description here

Upvotes: 1

user2768586
user2768586

Reputation: 11

$(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>

`

Upvotes: 1

Paramjot Singh
Paramjot Singh

Reputation: 705

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.

Upvotes: 0

Related Questions