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!

[Gerald]

This is exactly what I want, but I can't get the icon to show up.  Is there a using statement that I am missing, or a library that I need to include?

[Mihaela]

Hi Gerald, 

If you use font icons instead of SVG in your application, and the Kendo UI theme is referenced through the CDN, you need to include the following stylesheet:

<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">

Starting with version 2023 R3, the font icons are detached from the Kendo UI Themes CDN, so it is needed to include this additional stylesheet.

Here the the updated REPL example for your reference, where the type of the "eye" icon is font:

https://netcorerepl.telerik.com/wIvOHlbx26KWpbC256

Best,
Mihaela

[Gerald]

Thanks for the info.  As a matter of testing, I added a button identical to the one in the template after the maskedtextbox and the icon is showing up there on the button, so I don't think that is it.  The prefix and suffix on the maskedtextbox is not pulling it in though.  I just updated the project to the newest version (2024.3.806) since the application is still under development.

[Mihaela]

Hi Gerald,

Please share your code, so I can investigate the issue further. Also, make sure that the referenced Kendo UI scripts and theme file are updated for version 2024.3.806:

 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-ocean-blue.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.aspnetmvc.min.js"></script>

Best,
Mihaela

[Gerald]

I got it now - it was the fact that I was using an older version of jquery and the other includes.

[Mihaela]

Thank you for your update, Gerald. It is great that you managed to diagnose the issue and resolve it.

[Mike]

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