Show/Hide Password in TextBoxFor

[Mike]

I have a page with a handful of .TextBoxFor(m => m.PropertyX) and they work perfect when binding existing data to the property and thus the rendered Text Box.  However, one of the text boxes should be hidden (like a password box) and then revealed on a click (again, like password box).  All the examples have it as this:

@(Html.Kendo().TextBox()
    .Name("PropertyX")
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

This does work, however the existing data is not bound to the text box (because the text box is not bound to the property).  When I do this:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

it does not work - the show/hide is not rendered.

I've even tried this:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .Value(Model.PropertyX)
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

The show/hide icon ONLY shows up if there is no data in the text box (newly entered form and I'm typing in for the first time).  If I'm editing a form and data already exists, the icon DOES NOT show up.

Is there a way to have the icon show up all the time regardless if I'm entering new data or editing existing data?

[Mihaela]

Hello Mike,

I have tested the TextBoxFor() configuration, and it appears that the "PropertyX" binds as expected and its value is hidden at my end. I am attaching a runnable sample for your reference.

Would you please review it and modify it based on your code to replicate the behavior your are experiencing? It would help me to debug the issue locally.

On a separate note, as of the latest version (2024.1.130), the TextBox component supports a Suffix() configuration that allows you to define the toggle password icon as per the example below:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" })
    .SuffixOptions(suffix => suffix.Icon("eye"))
    )

Looking forward to hearing back form you.

[Mike]

I just saw the new addition of Suffixes.  I like it, thank you.  However, the issue I'm running into now is the clicking event (clicking on the eye or even on the text box) is not happening or revealing the password/sensitive data.  Is there an easy way to do that?

[Mihaela]

Hi Mike,

You can reveal the password as per any of the following approaches:

• Handle the Click event of the Button and change the type of the input element:

<script type="text/x-kendo-template" id="passwordPreviewTemplate">
    @(Html.Kendo().Button()
            .Name("previewPasswordBtn")
            .Icon("eye")
            .FillMode(ButtonFillMode.Flat)
            .ThemeColor(ThemeColor.Primary)
            .Events(ev => ev.Click("onClick"))
            .ToClientTemplate()
        )
</script>

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" })
    .SuffixOptions(suffix => suffix.TemplateId("passwordPreviewTemplate"))
    )

<script>
    var shownPass = false;
    function onClick() {
        if (!shownPass) {
            $("#PropertyX").attr("type", "text");
            shownPass = true;
        } else {
            shownPass = false;
            $("#PropertyX").attr("type", "password");
        }
    }
</script>

• Handle the "mouseup" and "mousedown" events of the suffix button and the input element to show/hide the entered password when the user holds the mouse key:

<script type="text/x-kendo-template" id="passwordPreviewTemplate">
    @(Html.Kendo().Button()
            .Name("previewPasswordBtn")
            .Icon("eye")
            .FillMode(ButtonFillMode.Flat)
            .ThemeColor(ThemeColor.Primary)
            .ToClientTemplate()
        )
</script>

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" })
    .SuffixOptions(suffix => suffix.TemplateId("passwordPreviewTemplate"))
    )

<script>
    $(document).ready(function(){
        $("#previewPasswordBtn, #PropertyX").mousedown(function () {
            $("#PropertyX").attr("type", "text");
        });
        $("#previewPasswordBtn, #PropertyX").mouseup(function () {
            $("#PropertyX").attr("type", "password");
        });
    })
</script>

Here is a REPL sample that demonstrates these examples:

https://netcorerepl.telerik.com/mIaQQhvI26EvB0qs20

Best,

Mihaela

[Mike]

Thank you, the top solution is exactly what I needed.  Thanks again!

[Mike]

The last comment was what I was trying to achieve.  Thank you again!