New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Password Strength Checker


 


Customized indicators



   

Custom calculated strength score

 
  • Change password strength settings:

Properties of the PasswordStrengthSettings:

  • ShowIndicator - enable/disable the indication. By default ShowIndicator is set to "false". In order to show the indication set the proprty to "true"
  • PreferredPasswordLength - Preferred length of the password.
  • MinimumNumericCharacters - Minimum numeric characters that user has to enter in order his password to be considered as stronger
  • MinimumUpperCaseCharacters - Minimum upper case characters
  • MinimumLowerCaseCharacters - Minimum lower case characters
  • MinimumSymbolCharacters - Minimal symbol characters
  • CalculationWeightings - List of 4 semi-colon separated numeric values used to determine the weighting of a strength characteristic. Total of the 4 values should be 100. The default they are defined as 50;15;15;20. This means that password length will determinate the 50% of the strength calculation, Numeric criteria is 15% of strength calculation, casing criteria is 15% of calculation, and symbol criteria is 20% of calculation. So the format is "A;B;C;D" where A = length weighting, B = numeric weighting, C = casing weighting, D = symbol weighting.
  • RequiresUpperAndLowerCaseCharacters - Specifies whether upper and lower case characters are required. By default the property is set to "true". When is false, the MinimumLowerCaseCharacters and MinimumUpperCaseCharacters properties does not effect the calculation of the password.
  • IndicatorElementID - set div or span element to which indication to be applied. If this property is not set, such element will be created automatically
  • IndicatorElementBaseStyle - Name of CSS class that will be used for styling the indicator element.
  • TextStrengthDescriptions - List of five semi-colon separated descriptions that will be used for showing the password strength. By default TextStrengthDescriptions is set to "Very Weak;Weak;Medium;Strong;Very Strong"
  • TextStrengthDescriptionStyles - List of six semi-colon separated CSS classes that will be applied depending on the calculated password strength. By default the property is "riStrengthBarL0;riStrengthBarL1;riStrengthBarL2;riStrengthBarL3;riStrengthBarL4;riStrengthBarL5;"
  • IndicatorWidth - specifies the width of the indicator element. By default the property value is 100px.
  • OnClientPasswordStrengthCalculating - client event fired when password calculation is performing.

When handling the OnClientPasswordStrengthCalculating event, the following properties of the event arguments can be used:

  • get_passwordText - get password entered by the user.
  • get_strengthScore - get calculated password strength.
  • set_strengthScore - set custom calculated password strength.
  • set_indicatorText - set text that will be used in the indicator element instead of the corresponding one from TextStrengthDescriptions.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.TextBoxExamplesCS.PasswordStrengthChecker.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script src="scripts.js" type="text/javascript"></script>
        <script type="text/javascript">
            function pageLoad() {
                demo.textBox1 = $find("<%=PasswordInput1.ClientID %>");
                demo.textBox2 = $find("<%=PasswordInput2.ClientID %>");
            }
        </script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <asp:Panel ID="Panel1" runat="server" CssClass="upper-container">
            <div class="control-container">
                <label for="RadtextBox1">RadTextBox</label>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox1" TextMode="Password" Width="300px">
                    <PasswordStrengthSettings ShowIndicator="true"></PasswordStrengthSettings>
                </telerik:RadTextBox>
            </div>
            <div class="control-container">
                <label for="TextBox1">ASP.NET TextBox extended with RadInputManager</label>
                <br />
                <asp:TextBox runat="server" ID="TextBox1" TextMode="Password"></asp:TextBox>
                <br />
                <telerik:RadInputManager RenderMode="Lightweight" runat="server" ID="RadInputManager1">
                    <telerik:TextBoxSetting>
                        <TargetControls>
                            <telerik:TargetInput ControlID="TextBox1"></telerik:TargetInput>
                        </TargetControls>
                        <PasswordStrengthSettings ShowIndicator="true"></PasswordStrengthSettings>
                    </telerik:TextBoxSetting>
                </telerik:RadInputManager>
            </div>
        </asp:Panel>
        <div class="customizedInd">
            <div class="control-container">
                <h3>Customized indicators</h3>
                <telerik:RadTextBox RenderMode="Lightweight" ID="PasswordInput1" Width="350px" runat="server" PasswordStrengthSettings-IndicatorWidth="0px" Label="Enter password:"
                    TextMode="Password" onkeyup="demo.checkPasswordMatch()">
                    <PasswordStrengthSettings ShowIndicator="true" TextStrengthDescriptions="Level1;Level2;Level3;Level4;Level5"
                        IndicatorElementBaseStyle="Base" TextStrengthDescriptionStyles="L0;L1;L2;L3;L4;L5"
                        IndicatorElementID="CustomIndicator"></PasswordStrengthSettings>
                </telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" ID="PasswordInput2" Width="350px" runat="server" Label="Repeat password:"
                    TextMode="Password" onkeyup="demo.checkPasswordMatch()">                    
                </telerik:RadTextBox>
                <br />
                <span id="CustomIndicator">&nbsp;</span> <span id="PasswordRepeatedIndicator" class="Base L0">&nbsp;</span>
            </div>
            <div class="control-container">
                <h3>Custom calculated strength score</h3>
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox2" Width="300px" EmptyMessage="Enter Password">
                    <PasswordStrengthSettings ShowIndicator="true" OnClientPasswordStrengthCalculating="demo.CalculatingStrength"></PasswordStrengthSettings>
                </telerik:RadTextBox>
            </div>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
            UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"
            MinDisplayTime="200">
        </telerik:RadAjaxLoadingPanel>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Change password strength settings:"
        Expanded="true" Style="overflow: hidden;">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboPreferredPasswordLength" runat="server" AutoPostBack="True" MaxHeight="250px"
                                Label="Preferred password length" OnSelectedIndexChanged="ComboPreferredPasswordLength_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox ID="ComboMinimumSymbolCharacters" runat="server" AutoPostBack="True" MaxHeight="250px"
                                Label="Minimum symbol characters" OnSelectedIndexChanged="ComboMinimumSymbolCharacters_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox ID="ComboMinimumLowerCaseNumericCharacters" runat="server" AutoPostBack="True" MaxHeight="250px"
                                Label="Minimum lower case characters" OnSelectedIndexChanged="ComboMinimumLowerCaseCharacters_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboMinimumNumericCharacters" runat="server" AutoPostBack="True" MaxHeight="250px"
                                Label="Minimum numeric characters" OnSelectedIndexChanged="ComboMinimumNumericCharacters_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox ID="ComboMinimumUpperCaseCharacters" runat="server" AutoPostBack="True" MaxHeight="250px"
                                Label="Minimum upper case characters" OnSelectedIndexChanged="ComboMinimumUpperCaseCharacters_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox ID="ComboCalculationWeightings" runat="server" AutoPostBack="True" MaxHeight="250px"
                                Label="Calculation Weightings" OnSelectedIndexChanged="ComboCalculationWeightings_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxPasswordMode" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxPasswordMode_CheckedChanged"
                                    Text="Show TextBoxes in Password TextMode" Checked="true" CssClass="checkboxes"></asp:CheckBox></span></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxIndication" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxIndication_CheckedChanged"
                                    Text="Enable password strength indication" Checked="true" CssClass="checkboxes"></asp:CheckBox></span></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxUpperAndLower" runat="server" AutoPostBack="true" Text="Requires upper and lower case characters"
                                    Checked="true" OnCheckedChanged="CheckBoxUpperAndLower_CheckedChanged" CssClass="checkboxes"></asp:CheckBox></span></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance