Extending Password Strength Checker with RadRating

Thread is closed for posting
2 posts, 0 answers
  1. AF879573-C93C-44CE-85EC-E384C9A19A99
    AF879573-C93C-44CE-85EC-E384C9A19A99 avatar
    110 posts
    Member since:
    Jul 2012

    Posted 14 Jul 2011 Link to this post

    Requirements
    RadControls version 2011 Q2
    .NET version 3.5 and 4.0
    Visual Studio version 2010
    programming language JavaScript
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    When I first see Password Strength Checker functionality I decide to add some visual richness. Here is how I implement this with help of RadRating.
    <script type="text/javascript">
        function updateRating(sender, args) {
            var calculatedScore = args.get_strengthScore();
            var radRating = $find("<%=RadRating1.ClientID %>");
            if (radRating != null) {
                var ratingItemCount = radRating._itemCount;
                var theValue = calculatedScore / (100 / ratingItemCount);
                radRating.set_value(theValue);
            }
        }
    </script>
    <telerik:RadTextBox ID="PasswordInput1" Width="250px" runat="server" Label="Enter password:"
        TextMode="Password">
        <PasswordStrengthSettings ShowIndicator="true" OnClientPasswordStrengthCalculating="updateRating"
            IndicatorElementID="dummySpan" />
    </telerik:RadTextBox>
    <span id="dummySpan" style="visibility: hidden;"></span>
    <telerik:RadRating ID="RadRating1" runat="server" Precision="Exact" ItemCount="5"
        ReadOnly="True" />

    Some notes

    1. If you do not set ShowIndicator to true updateRating is not fired.
    2. When setting ShowIndicator to true but not setting IndicatorElementID property, default IndicatorElement is shown as well, which is not our goal. So I had to set IndicatorElementID to a dummy, invisible span object.
    3. null checking of radRating is required because, updateRating is fired for the initial load of page and radRating is null for the first time.

    Any improvements are welcome.

  3. 7DF664E8-B36E-4DD1-B788-9D72771FC20A
    7DF664E8-B36E-4DD1-B788-9D72771FC20A avatar
    2481 posts
    Member since:
    Dec 2019

    Posted 14 Jul 2011 Link to this post

    Hi Barbaros,

    Thanks for your submission. Indeed this is an interesting approach.

    If I could suggest a tip, it is to not use a span but to directly set IndicatorElementID to some dummy ID. This way would be a little more optimized since otherwise, the password strength checker would change the span's style each time it makes a calculation. At the same time, it performs a check on the existence of the element, so no errors would occur if it does not find the <span> on the page.

    Greetings,
    Tsvetina
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.