Sneaking password in a textbox

[Eric Moreau]

Hi

In winforms, is it possible to have the little "eye" on the right of a RadTextbox to let the user sneak the password?

I have found https://www.telerik.com/support/kb/winforms/tools/details/showpassword-button-for-radtextbox-with-textmode-password?_ga=2.217538326.1876351049.1570721637-455345866.1542726605 which is under winforms but seems to apply to ASP.Net/Ajax.

[Dess | Tech Support Engineer, Principal]

Hello, Eric,      

In order to achieve your goal, it is suitable to use a RadButtonTextBox which provides a very convenient way to add buttons either on the left or on the right side of the text box. Additional information for RadButtonTextBox is available in the online documentation:
https://docs.telerik.com/devtools/winforms/controls/editors/buttontextbox/buttontextbox
https://docs.telerik.com/devtools/winforms/controls/editors/buttontextbox/populating-with-items/adding-items-programmatically

For the icon that shows/hides the password, it is suitable to use a custom font, e.g. TelerikWebUI and assign an appropriate glyph. Please refer to the following code snippet which result is illustrated in the attached gif file: 

        public RadForm1()
        {
            InitializeComponent();

            this.radButtonTextBox1.Text = "123456";
            this.radButtonTextBox1.UseSystemPasswordChar = true;

            RadButtonElement btn = new RadButtonElement();
            btn.Click += btn_Click;
            this.radButtonTextBox1.RightButtonItems.Add(btn);
            btn.ButtonFillElement.Visibility = ElementVisibility.Collapsed;
            btn.BorderElement.Visibility = ElementVisibility.Collapsed;
            var font1 = ThemeResolutionService.GetCustomFont("TelerikWebUI");
            btn.CustomFont = font1.Name;
            btn.Text = "\ue13D";
        }

        private void btn_Click(object sender, EventArgs e)
        {
            this.radButtonTextBox1.UseSystemPasswordChar = !this.radButtonTextBox1.UseSystemPasswordChar ;
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Eric Moreau]

Works really great. Thanks Dess

[Eric Moreau]

Hi. I have a new issue with this. I am not sure when it started. Surely after one of the updates. It looks like the designer is adding a line to the designer file:
Me.txtPassword.PasswordChar = Global.Microsoft.VisualBasic.ChrW(9679)

The result is that when I click on the eye (and I am sure that the Click event is triggered), I don't see clear text, I only see the exact same dots.

Removing that line from the designer file shows me the correct behavior.

I have tried to set the PasswordChar to an empty string in the designer file but it shows an compilation error.

How, from the code, can I fix this issue?

[Nadya | Tech Support Engineer]

Hello, Eric,

I created a new project in VB using the latest Telerik version in order to test what is serialized in the designer file. However, I didn't have such line code serialized in Designer.vb file. The project is working fine. I attached my test project for your reference and a gif that illustrates the result on my end. 

If the specified line of code produces a problem on your side, you can remove it from the designer.

I hope this information helps. Should you have further questions please let me know.

Regards,
Nadya
Progress Telerik

[Eric Moreau]

Hi Nadya. Yes I found that deleting the line from the designer file solves the issue but as soon as we re-open the form's desgn, the line gets re-added (and we need to modify the designer file again which we will end up forgetting!). This is why I am asking how to solve the issue by code so I can add it in my inherited control.

[Nadya | Tech Support Engineer]

Hello, Eric,

It is strange that you received this line of code serialized in the designer file every time you re-open the form. Did you set the RadButtonTextBox.PasswordChart property at design time either via the Edit UI Elements window or Properties window? As you can see from the provided project in my previous reply I didn't have such a line serialized in this example.

I can suggest setting PasswordChar property in the constructor of the form, not in the designer:

Public Sub New()
    InitializeComponent()
    Me.RadButtonTextBox1.PasswordChar = ""
    'or
    Me.RadButtonTextBox1.PasswordChar = ControlChars.NullChar
End Sub

I hope this helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

[Eric Moreau]

Hi Nadya. The line appears in the designer file whenever I open the designer and save it. Not sure why but I have seen this behavior with other controls in the past. I have inherited the RadButtonTextBox in my own control (in C# used by a VB application). Setting the PasswordChar in the constructor of that control has no impact but ... setting it in the Click event handler of the button fixes the issue.

Thanks Nadya.

[Nadya | Tech Support Engineer]

Hello, Eric,

I am glad to hear that you managed to fix the issue you were facing. If you have any other questions do not hesitate to contact me.

Regards,
Nadya
Progress Telerik