passwordstrengthextenderbehavior.js

AJAX 应用 实现页面的无刷新

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.


/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
/// <reference path="../ExtenderBase/BaseScripts.js" />
/// <reference path="../Common/Common.js" />


Type.registerNamespace('AjaxControlToolkit');

AjaxControlToolkit.PasswordStrengthExtenderBehavior = function(element) {
    AjaxControlToolkit.PasswordStrengthExtenderBehavior.initializeBase(this, [element]);

    // The array holding the default textual descriptions for the password strength levels
    this._levelArray = new Array();
    this._styleArray = new Array();
    
    this._txtPwdStrengthCssClass = null;
    this._barBorderCssClass = null;
    this._barIndicatorCssClass = null;
    this._displayPosition = AjaxControlToolkit.DisplayPosition.RightSide;
    this._strengthIndicator = AjaxControlToolkit.StrengthIndicatorTypes.Text;
    
    this._preferredPasswordLength = 0;
    this._minimumNumericCharacters = 0;
    this._minimumSymbolCharacters = 0;
    this._requiresUpperAndLowerCaseCharacters = false;
    this._helpHandleCssClass = '';
    this._helpHandlePosition =  AjaxControlToolkit.DisplayPosition.AboveRight;
    this._helpText = '';
    this._helpStatusLabelID = null;
    
    this._displayDiv = null; // The DIV for displaying the textual indicator
    this._helpDiv = null;  // The DIV that the user can click on to display the password requirements
    
    this._barOuterDiv = null;  // The outer DIV for the bar indicator
    this._barInnerDiv = null;  // The Inner DIV for the bar indicator
    
    this._keyPressHandler = null;
    this._blurHandler = null;
    this._helpClickHandler = null;
    this._prefixText = AjaxControlToolkit.Resources.PasswordStrength_StrengthPrompt;
    
    // The default set of textual strength descriptions
    this._txtStrengthDescriptions = AjaxControlToolkit.Resources.PasswordStrength_DefaultStrengthDescriptions;
    this._strengthStyles = '';
    this._barIndicatorStyles = '';
    this._txtseparator = ';';
    this._MIN_TXT_LEVEL_COUNT = 2;
    this._MAX_TXT_LEVEL_COUNT = 10;
    
    // The default weighting/ratio used for password strength calculation.
    // ...Password Length = 50%
    // ...Numerics = 15%
    // ...Casing = 15%
    // ...Symbols = 20%
    this._calcWeightings = "50;15;15;20";

    this._minLowerCaseChars = 0;
    this._minUpperCaseChars = 0;
}
        
AjaxControlToolkit.PasswordStrengthExtenderBehavior.prototype = {
    
    
    initialize : function() {
        AjaxControlToolkit.PasswordStrengthExtenderBehavior.callBaseMethod(this, 'initialize');
        
        this._createIndicatorDisplayElement();
        
        var e = this.get_element();

        // Create our delegates
        this._keyPressHandler = Function.createDelegate(this, this._onKeyPress);
        this._blurHandler = Function.createDelegate(this, this._onBlur);
        

        // Attach events/associate the events with the delegates already defined above
        $addHandler(e,'keyup', this._keyPressHandler);
        $addHandler(e,'blur', this._blurHandler);
        
        // Set some defaults
        if (this._preferredPasswordLength == null || this._preferredPasswordLength == '' || this._preferredPasswordLength <= 0) {
            this._preferredPasswordLength = 10;  // Set to at least 10 chars as a preferred pwd length, even though this is very small.
                                           // Ideally, it should be set to 20 or greater for a passphrase type scenario. Remember this is preferred, NOT minimum
            this.raisePropertyChanged('PreferredPasswordLength');
        }
        if (this._calcWeightings == null || this._calcWeightings == "") {
            this._calcWeightings = "50;15;15;20";
            this.raisePropertyChanged('CalculationWeightings');
        }
        
        // Get our initial password strength calculated values. This performsn an initial calculation and sets up the helptext.
        this._getPasswordStrength();

    },
    
    _createIndicatorDisplayElement : function() {
            
        if (this._strengthIndicator == AjaxControlToolkit.StrengthIndicatorTypes.BarIndicator)
            this._createBarIndicatorDisplayElement();
        else
            this._createTextDisplayElement();
        
        // If the Help display DIV was created ok, then set its position.
        if (this._createHelpDisplayElement() == true)
        {
            // We need to do this first as we need to find its bounding area and can only do that after its been made visible
             $common.setVisible(this._helpDiv,true);

            
            var bounds = $common.getBounds(this.get_element());
            
            var helpBounds = $common.getBounds(this._helpDiv);
            var posY;
            var posX;
            var offset = 3;  // 3 pixels for a very small amount of overlap to "connect" the help icon to the textbox

            if (this._helpHandlePosition == "LeftSide")
            {
                posY = bounds.y + ((bounds.height / 2) - (helpBounds.height / 2));
                posX = bounds.x - helpBounds.width;
            } else if (this._helpHandlePosition == "BelowRight")
            {
                posY = bounds.y + bounds.height - offset;   // Just one pixel for a small overlap
                posX = bounds.x + bounds.width - offset;
            } else if (this._helpHandlePosition == "BelowLeft")
            {
                posY = bounds.y + bounds.height - offset;
                posX = bounds.x - helpBounds.width + offset;
            } else if (this._helpHandlePosition == "RightSide")
            {
                posY = bounds.y + ((bounds.height / 2) - (helpBounds.height / 2));
                posX = bounds.x + bounds.width;
            } else if (this._helpHandlePosition == "AboveLeft")
            {
                posY = bounds.y - helpBounds.height + offset;
                posX = bounds.x - helpBounds.width + offset;

            } else   // This fall through logic gets called if the Help position is "AboveRight" or anything else for that matter
            {
                posY = bounds.y  - helpBounds.height + offset;
                posX = bounds.x + bounds.width - offset;
            }

            this._helpDiv.style.top = posY + 'px';
            this._helpDiv.style.left = posX + 'px';

        }

    },
    
    _createTextDisplayElement : function() {
        //*******************************************************************************
        // **** Create the element for textual display
        //********************************************************************************
        // Create a DIV element so we can place our own content in there.
        // This is for the textual display.
        var p = document.createElement("label");  
        p.style.position= "absolute"; 
        p.style.visibility="hidden";
        p.style.display = "none";

        // Create the control id        
        if (this.get_element().id) {
            p.id = this.get_element().id + "_PasswordStrength";
        }
        
        this._displayDiv = p;
        

        this._setTextDisplayLocation(p);
        
        // Add the DIV element to the document
        document.body.appendChild(p);
        
        this._setTextDisplayStyle(0);
        
    },
    
    _setTextDisplayStyle : function(index) {
        //*******************************************************************************
        // **** Takes care of setting the appropriate CSS class style for the textual strength display
        //********************************************************************************
        if (this._styleArray.length == 0)
        {
            if (this._txtPwdStrengthCssClass != null && this._txtPwdStrengthCssClass != '')
                this._displayDiv.className = this._txtPwdStrengthCssClass;
            else
                this._displayDiv.style.backgroundColor = "yellow";
        } else
        {
            this._displayDiv.style.backgroundColor = "";
            if ( (this._txtPwdStrengthCssClass != null && this._txtPwdStrengthCssClass != '') &&
                Sys.UI.DomElement.containsCssClass(this._displayDiv,this._txtPwdStrengthCssClass))
            {
                Sys.UI.DomElement.removeCssClass(this._displayDiv,this._txtPwdStrengthCssClass)
            }
            this._displayDiv.className = this._styleArray[index];
        }
        
    },
    
    _setBarDisplayStyle : function(index) {
        //*******************************************************************************
        // **** Takes care of setting the appropriate CSS class style for the textual strength display
        //********************************************************************************
        if (this._barBorderCssClass != '')
            this._barOuterDiv.className = this._barBorderCssClass;
        else
        {
            d1.style.width="200px";
            d1.style.borderStyle="solid";
            d1.style.borderWidth="1px";
        }

        if (this._styleArray.length == 0)
        {
            if (this._barIndicatorCssClass != '')
                this._barInnerDiv.className = this._barIndicatorCssClass;
            else
                this._barInnerDiv.style.backgroundColor = "red";
        } else
        {
            if ( (this._barIndicatorCssClass != null && this._barIndicatorCssClass != '') &&
                Sys.UI.DomElement.containsCssClass(this._barInnerDiv,this._barIndicatorCssClass))
            {
                Sys.UI.DomElement.removeCssClass(this._barInnerDiv,this._barIndicatorCssClass)
            }
            this._barInnerDiv.className = this._styleArray[index];
            
        }
        
    },

    _createBarIndicatorDisplayElement : function() {
        //*******************************************************************************
        // **** Create the element for BarIndicator display
        //********************************************************************************
        var d1 = document.createElement("div");  // outer div
        d1.style.position= "absolute"; 
        d1.style.visibility="hidden";
        d1.style.display = "none";

        var d2 = document.createElement("div");  // inner div, the bar itself
        d2.style.position= "absolute"; 
        d2.style.visibility="hidden";
        d2.style.display = "none";
        
        d1.style.height = this.get_element().offsetHeight+4 + "px";

        if (this.get_element().id) {
            d1.id = this.get_element().id + "_PasswordStrengthBar1";
            d2.id = this.get_element().id + "_PasswordStrengthBar2";
        }

        this._barOuterDiv = d1;
        this._barInnerDiv = d2;
        
        this._extractStyles();
        
        this._setBarDisplayStyle(0);

        document.body.appendChild(d1);
        document.body.appendChild(d2);

        this._setBarDisplayLocation(d1,d2);
        
    },

    // Create the DIV element that is used to represent the image to click on to display
    // the password requirements. If the _requirementsHandleCssClass is set then
    // its created and appended to the document and returns true, otherwise it returns
    // false and wont be displayed.
    _createHelpDisplayElement : function() {
        if (this._helpHandleCssClass != '')
        {
            var req = document.createElement("a");
            
            req.style.position= "absolute"; 
            req.style.visibility="hidden";
            req.style.display = "none";
            req.href = "#"; // fix for work item #8217
            req.title = AjaxControlToolkit.Resources.PasswordStrength_GetHelpRequirements;

            if (this.get_element().id) {
                req.id = this.get_element().id + "_PasswordStrengthReqDisplay";
            }

            this._helpClickHandler = Function.createDelegate(this,this._onHelpClick);
            $addHandler(req,'click',this._helpClickHandler);

            this._helpDiv = req;
            
        
            this._helpDiv.className = this._helpHandleCssClass;
            if (this.get_element().parentElement != null && this.get_element().parentElement.canHaveChildren)
                this.get_element().parentElement.appendChild(req);
            else
                document.body.appendChild(req);
            
            return true;
        } else
            return false;
    },

    _setTextDisplayLocation : function(htmlElement) {
        // Whats our current position of the textbox
        var location = $common.getLocation(this.get_element());
        var bounds = $common.getBounds(this.get_element());
        var offsetAmount = 15;
        
        if (this._displayPosition == AjaxControlToolkit.DisplayPosition.LeftSide)
        {
            htmlElement.style.top = location.y + "px";
            htmlElement.style.left = location.x - bounds.width - offsetAmount + "px"; 
        } else if (this._displayPosition == "BelowRight")
        {
            htmlElement.style.top = location.y + this.get_element().offsetHeight + "px";
            htmlElement.style.left = location.x + this.get_element().offsetWidth - (this.get_element().offsetWidth/4) + "px";
        } else if (this._displayPosition == AjaxControlToolkit.DisplayPosition.BelowLeft)
        {
            htmlElement.style.top = location.y + this.get_element().offsetHeight + "px";
            htmlElement.style.left = location.x - offsetAmount + "px";
        } else if (this._displayPosition == AjaxControlToolkit.DisplayPosition.AboveRight)
        {