Create a button in MVC to hide labels and replace it with '******'

Question

brief background, my application is a password manager and has a page where it displays labels,a services e.g. gmail and the password saved associated to it. I am trying to find a way to have a button or checkbox to show or hide the passwords so the user can see their passwords and then press a button to hide the passwords and mask them with a series of asterisks. I was hoping someone might have a jquery or razor idea to help em out?

   <div class="panel-body">
                    <table class="table table-bordered table-responsive table-hover">
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.Website)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Password)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.DateSaved)
                            </th>
                            <th></th>
                        </tr>

                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Website)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Password)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.DateSaved)
                                </td>
                                <td>
                                    @Html.ActionLink(" Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-primary btn-sm glyphicon glyphicon-pencil" })
                                    @Html.ActionLink(" Details", "Details", new { id = item.Id }, new { @class = "btn btn-info btn-sm glyphicon glyphicon-eye-open" })
                                    @Html.ActionLink(" Delete", "Delete", new { id = item.Id }, new { @class = "btn btn-danger btn-sm glyphicon glyphicon-trash" })
                                    @Html.ActionLink(" Strength Check", "Index", "StrengthCheck", new { id = item.Id }, new { @class = "btn btn-warning btn-sm" })
                                </td>
                            </tr>
                        }

                    </table>

Hello! Please show us what you've tried! – Pablo Recalde Apr 20 '20 at 10:36 — Pablo Recalde, Apr 20 '20 at 10:36

score 0 · Answer 1 · answered Apr 20 '20 at 11:45

You could use a simple JQuery function to toggle the field between asterisks and the real password value. The trick will be making sure each password field is uniquely identifiable so you only show that one password when you click the button (I'm assuming there will be multiple passwords on the screen since it's in a table)

Change the foreach loop to this so you have access to the index. This gives you easy access to a unique value for each row:

foreach (var item in Model.Select((value, i) => new { i, value }))
{
    // You access the values like this now
    var value = item.value;
    var index = item.i;
}

See this answer for reference (the answer beneath the approved answer): How do you get the index of the current iteration of a foreach loop?

In the html table put:

<td>
    <span id="password-@item.i" style="display: none;">@item.value.Password</span>
    <span id="hidden-password-@item.i">*******</span>

    <button onclick="showHidePassword('@item.i')">Toggle</button>
</td>

And somewhere on the page add the following javascript:

function showHidePassword(i) {    
  if ($('#password-' + i).is(':visible')) {
    $('#password-' + i).hide();
    $('#hidden-password-' + i).show();
  } else {
    $('#password-' + i).show();
    $('#hidden-password-' + i).hide();
  }
}

Hope this helps. To make reusability easier you could move this to a html extension method depending on how you're building out the rest of the page

Create a button in MVC to hide labels and replace it with '******'

1 Answers1