passwordstrengthextenderbehavior.js

AJAX 应用 实现页面的无刷新

            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.AboveLeft)
        {
            htmlElement.style.top = location.y - this.get_element().offsetHeight + "px";
            htmlElement.style.left = location.x - offsetAmount + "px";
        } else   // This fall through logic gets called if the DisplayPositon is "RightSide" or anything else for that matter
        {
            htmlElement.style.top = location.y + "px";
            htmlElement.style.left = location.x + this.get_element().offsetWidth + offsetAmount + "px";
        }
    },
    
    _setBarDisplayLocation : function(outerElement, innerElement) {
        
        // Re: issue #1893. If the target element has a display:none, the this.get_element().offsetHeight caclulation is 0, making
        // this.get_element().offsetHeight -2 an invalid size. This test circumvents the negative problem, and we also recalc/set the
        // inner and outer div height each time this routine is called.
        if (this.get_element().offsetHeight > 0) {

            var outerBorder = $common.getBorderBox(outerElement);
            var outerPadding = $common.getPaddingBox(outerElement);
            var leftIndent = outerBorder.left + outerPadding.left;
            var topIndent = outerBorder.top + outerPadding.top;
            
            innerElement.style.height = this.get_element().offsetHeight  + "px";    // why does IE only do a minimum height????
            outerElement.style.height = this.get_element().offsetHeight  + "px";
            

            var location = $common.getLocation(this.get_element());

            var offsetAmount = 15;
            
            if (this._displayPosition == AjaxControlToolkit.DisplayPosition.LeftSide)
            {
                // We need to work out how wide the outer/surrounding DIV element is so we can subtract that from the textbox x position.
                // For whatever reason, we need to make the outer DIV element visible before the width is accurately reported, otherwise
                // it always comes back as zero. Not sure if this is IE6 specific or not.
                // To circumvent this, we briefly make the control visible, get its width, then make it invisble again.
                
                // Fix bug where the bar was displayed initially but then hidden after the calculation.
                var initialVisibleState = $common.getVisible(this._barOuterDiv);
                
                // Get the content size so we take into account padding.
                $common.setVisible(this._barOuterDiv,true);        
                var barBounds = $common.getContentSize(outerElement);
                $common.setVisible(this._barOuterDiv, initialVisibleState);   
                
                var _barIndicatorWidth = barBounds.width;

                outerElement.style.top = location.y + "px";
                outerElement.style.left = location.x - parseInt(_barIndicatorWidth) - offsetAmount + "px";
                
                innerElement.style.top = location.y + topIndent + "px";
                innerElement.style.left = location.x - parseInt(_barIndicatorWidth) - offsetAmount + leftIndent + "px";
            } else if (this._displayPosition == AjaxControlToolkit.DisplayPosition.BelowRight)
            {
                outerElement.style.top = location.y + this.get_element().offsetHeight + "px";
                outerElement.style.left = location.x + this.get_element().offsetWidth + "px";
                
                innerElement.style.top = location.y + this.get_element().offsetHeight + topIndent + "px";
                innerElement.style.left = location.x + this.get_element().offsetWidth + leftIndent + "px";
            } else if (this._displayPosition == AjaxControlToolkit.DisplayPosition.BelowLeft)
            {
                outerElement.style.top = location.y + this.get_element().offsetHeight + "px";
                outerElement.style.left = location.x + "px";
                
                innerElement.style.top = location.y + this.get_element().offsetHeight + topIndent + "px";
                innerElement.style.left = location.x + leftIndent + "px";
            } else if (this._displayPosition == AjaxControlToolkit.DisplayPosition.AboveRight)
            {
                outerElement.style.top = location.y-this.get_element().offsetHeight + "px";
                outerElement.style.left = location.x + this.get_element().offsetWidth + "px";
                
                innerElement.style.top = location.y-this.get_element().offsetHeight + topIndent + "px";
                innerElement.style.left = location.x + this.get_element().offsetWidth + leftIndent + "px";

            } else if (this._displayPosition == AjaxControlToolkit.DisplayPosition.AboveLeft)
            {
                outerElement.style.top = location.y-this.get_element().offsetHeight + "px";
                outerElement.style.left = location.x + "px";
                
                innerElement.style.top = location.y-this.get_element().offsetHeight + topIndent + "px";
                innerElement.style.left = location.x + leftIndent + "px";
            } else   // This fall through logic gets called if the DisplayPositon is "RightSide" or anything else for that matter
            {
                outerElement.style.top = location.y + "px";
                outerElement.style.left = location.x + this.get_element().offsetWidth + offsetAmount + "px";
                
                innerElement.style.top = location.y + topIndent + "px";
                innerElement.style.left = location.x + this.get_element().offsetWidth + offsetAmount + leftIndent + "px";
            }
        }
    },

    // Determine what mode of dispay we are using and show the appropriate indicator
    _showStrength : function() {
    
        var e = this.get_element();
        
        // Here we check to see if the target element is in readonly mode. If so, then we dont want to
        // display the password strength indicator. we do it here because the application may dynamically
        // manipulate the readonly state so we need to ensure we check for it each time.
        if (e.readOnly == true)
            return;

        var pwdStrength = this._getPasswordStrength();
        
        if (this._strengthIndicator == AjaxControlToolkit.StrengthIndicatorTypes.BarIndicator)
        {
            
            // Set the visibility to true initially so that width and height calculations are accurate 
            $common.setVisible(this._barOuterDiv , true);
            $common.setVisible(this._barInnerDiv, true);

            var index = 0;
            if (this._styleArray != null && this._styleArray.length > 0)
            {
                index = parseInt(pwdStrength/100 * (this._styleArray.length-1));
            }
            this._setBarDisplayStyle(index);

            this._setBarDisplayLocation(this._barOuterDiv,this._barInnerDiv);
             
            this._showStrengthAsBarValue(pwdStrength);
            
            
        } else
        {
            this._createTextDescriptions(this._txtStrengthDescriptions);
      
            $common.setVisible(this._displayDiv, true);
            
            var index = parseInt(pwdStrength/100 * (this._levelArray.length-1));
            var pwdStrengthText = this._levelArray[index];
            
            this._setTextDisplayStyle(index);
            
            this._setTextDisplayLocation(this._displayDiv);
            
            this._showStrengthAsText(pwdStrengthText);   

        }
        
    },
    
    _showStrengthAsText : function(pwdStrengthVal) {
        this._displayDiv.innerHTML = this._prefixText + pwdStrengthVal;
    },
    
    _showStrengthAsBarValue : function(strengthValue) {
        var bounds = $common.getContentSize(this._barOuterDiv);
        var outerPadding = $common.getPaddingBox(this._barOuterDiv);
        var barLength = parseInt( bounds.width * (strengthValue / 100));
        this._barInnerDiv.style.width = barLength + "px";
    },
    
    _getPasswordStrength : function() {
        // work out how strong the text entered into the textbox is for a password
        // and return an integer in between 1 .. 100 (ie. a percentage value)
        // 1 = weakest
        // 100 = strongest
        // Note: Password determination involves
        //       Length (makes up 50% of score)
        //       Does it contain numbers (makes up 15% of score)
        //       Does it contain upper and lowercase (makes up 15% of score)
        //       Does it contain special symbols (makes up 20% of score)
        
        var pwd = AjaxControlToolkit.TextBoxWrapper.get_Wrapper(this.get_element()).get_Value();
        
        var pwdRequirements = '';  // This will contain what is required to make this password a 'strong' password.
        
        var percentTotal = 0;
        
        // Extract the password calculation weighting ratios
        var weights = this._calcWeightings.split(';');
        if (weights.length != 4)
            Sys.Debug.assert(null, AjaxControlToolkit.Resources.PasswordStrength_InvalidWeightingRatios);

        var _ratioLen = parseInt(weights[0]);
        var _ratioNum = parseInt(weights[1]);
        var _ratioCas = parseInt(weights[2]);
        var _ratioSym = parseInt(weights[3]);
        
        //***********************************************
        // Length Criteria
        // Any pwd with a length > 20 is a passphrase and is a good thing
        var ratio = pwd.length / this._preferredPasswordLength;
        if (ratio > 1)
            ratio = 1;
        
        var lengthStrength = (ratio * _ratioLen);
        
        // Add to our percentage total
        percentTotal += lengthStrength;
        
        if (ratio < 1)
            pwdRequirements = String.format(AjaxControlToolkit.Resources.PasswordStrength_RemainingCharacters, this._preferredPasswordLength - pwd.length);
            
        //***********************************************
        // Numeric Criteria
        // Does it contain numbers?
        if (this._minimumNumericCharacters > 0)
        {
            var numbersRegex = new RegExp("[0-9]", "g");
            var numCount = this._getRegexCount(numbersRegex,pwd);
            if ( numCount >= this._minimumNumericCharacters)
                percentTotal += _ratioNum;
            
            if (numCount < this._minimumNumericCharacters)
            {
                if (pwdRequirements != '')
                    pwdRequirements += ', ';
                pwdRequirements += String.format(AjaxControlToolkit.Resources.PasswordStrength_RemainingNumbers, this._minimumNumericCharacters - numCount);
            }
        } else
        {
            // If the user has not specified that the password should contain numerics, then we just figure out the ratio according
            // to the password length as that is always something
            percentTotal += (ratio * _ratioNum);
        }
            
        //***********************************************
        // Casing Criteria
        // Does it contain lowercase AND uppercase Text
        if (this._requiresUpperAndLowerCaseCharacters == true ||
            (typeof(this._requiresUpperAndLowerCaseCharacters) == 'String' && Boolean.parse(this._requiresUpperAndLowerCaseCharacters) == true) )
        {
            var lowercaseRegex = new RegExp("[a-z]", "g");
            var uppercaseRegex = new RegExp("[A-Z]", "g");
            
            var numLower = this._getRegexCount(lowercaseRegex,pwd);
            var numUpper = this._getRegexCount(uppercaseRegex,pwd);

            if (numLower > 0 || numUpper > 0)
            {
                if (numLower >= this._minLowerCaseChars && numUpper >= this._minUpperCaseChars)
                    percentTotal += _ratioCas;
                else
                {
                    if (this._minLowerCaseChars > 0 && (this._minLowerCaseChars - numLower) > 0)
                    {
                        if (pwdRequirements != '')
                            pwdRequirements += ', ';
                        pwdRequirements += String.format(AjaxControlToolkit.Resources.PasswordStrength_RemainingLowerCase, this._minLowerCaseChars - numLower);
                    }
                    if (this._minUpperCaseChars > 0 && (this._minUpperCaseChars - numUpper) > 0)
                    {
                        if (pwdRequirements != '')
                            pwdRequirements += ', ';
                        pwdRequirements += String.format(AjaxControlToolkit.Resources.PasswordStrength_RemainingUpperCase, this._minUpperCaseChars - numUpper);
                    }
                }
                
            }
            else
            {
                if (pwdRequirements != '')
                    pwdRequirements += ', ';
                pwdRequirements += AjaxControlToolkit.Resources.PasswordStrength_RemainingMixedCase;

            }
        } else
        {
            // If the user has not specified that the password should contain numerics, then we just figure out the ratio according
            // to the password length as  that is always something
            percentTotal += (ratio * _ratioCas);
        }


        //***********************************************
        // Symbol Criteria
        // Does it contain any special symbols?
        if (this._minimumSymbolCharacters > 0)
        {
            var symbolRegex = new RegExp("[^a-z,A-Z,0-9,\x20]", "g"); // related to work item 1034
            var numCount = this._getRegexCount(symbolRegex,pwd);
            if (numCount >= this._minimumSymbolCharacters)
                percentTotal += _ratioSym;
            
            if (numCount < this._minimumSymbolCharacters)
            {
                if (pwdRequirements != '')
                    pwdRequirements += ', ';
                pwdRequirements += String.format(AjaxControlToolkit.Resources.PasswordStrength_RemainingSymbols, this._minimumSymbolCharacters - numCount);
            }

        } else
        {
            // If the user has not specified that the password should contain numerics, then we just figure out the ratio according
            // to the password length as that is always something
            percentTotal += (ratio * _ratioSym);
        }
        
        this.set_HelpText(pwdRequirements);
        
        return percentTotal;
        
    },
    
    // *******************************************************
    // Determines the number of matches according to the regex spec and the test string
    _getRegexCount : function(regex,testString) {
        var cnt = 0;
        if (testString != null && testString != "")
        {
            var results = testString.match(regex);
            if (results != null)
                cnt = results.length;
        }
        return cnt;
    },

    // Extract the styles (if present) from out comma delimited list    
    _extractStyles : function() {
       // Get our styles for each text indicator in the array
        if (this._strengthStyles != null && this._strengthStyles != "" )
            this._styleArray = this._strengthStyles.split(this._txtseparator);

    },
    
    //************************************************************
    // ** Split the TextStrengthDescriptions property into our internal
    // ** array
    //************************************************************
    _createTextDescriptions : function(descriptions) {
        this._levelArray = this._txtStrengthDescriptions.split(this._txtseparator);
        
        this._extractStyles();
                
        // Make sure we have the same number of styles as per the number of actual text descriptions