Reply To: password input field complexity validation and strength example

[Patrick Hume]

seams i got the cass wrong to make that work poperly –

smart-password-text-box {
    background-clip: content-box;
    box-sizing: border-box;
}

    smart-password-text-box[show-password-strength] {
        border: red solid 3px;
    }

        smart-password-text-box[show-password-strength] .smart-password-short {
            border: red solid 3px;
        }

        smart-password-text-box[show-password-strength] .smart-password-weak {
            border: #C27BA0 solid 3px;
        }

        smart-password-text-box[show-password-strength] .smart-password-far {
            border: orange solid 3px;
        }

        smart-password-text-box[show-password-strength] .smart-password-better {
            border: yellow solid 3px;
        }

        smart-password-text-box[show-password-strength] .smart-password-good {
            border: deepskyblue solid 3px;
        }

        smart-password-text-box[show-password-strength] .smart-password-strong {
            border: green solid 3px;
        }

    smart-password-text-box smart-tooltip .smart-tooltip-content {
        border-radius: 3px;
    }

then the js file needs to be

(function (global) {
    global.customStrength = function (dotNetObject) {
        let allowedSymbols = '<>@!#$%^&*()_+[]{}?:;|\'"\\,./~`-=';
        const passwordTextBox = document.querySelector("smart-password-text-box").messages = {
            'en': {
                'passwordStrength': 'Password strength',
                'short': 'Short',
                'weak': 'complexity Week - missing art least 1 symbol, ' + allowedSymbols,
                'far': 'complexity Fair - missing at least 1 numerical value, 0 - 9',
                'better': 'complexity Better - missing at least 1 upper case characture, A- Z',
                'good': 'complexity Good - missing at least 1 lower case characture, a - z',
                'strong': 'Strong =)',
                'showPassword': 'Show password'
            }
        };
        setTimeout(function () {
            passwordTextBox.passwordStrength = function (password, allowedSymbols) {
                const passwordLength = password.length;
                let message = null;
                // debugger;
                if (passwordLength < 7) {
                    message = 'short';
                } else if (!new RegExp(symbols).exec(password)) {
                    message = 'weak';
                } else if (!new RegExp(numerical).exec(password)) {
                    message = 'far';
                } else if (!new RegExp(upperCase).exec(password)) {
                    message = 'better';
                } else if (!new RegExp(lowerCase).exec(password)) {
                    message = 'good';
                }
                if (message) {
                    dotNetObject.invokeMethodAsync('CallbackComplexityCheck', false)
                    return message;
                }
                dotNetObject.invokeMethodAsync('CallbackComplexityCheck', true)
                return 'strong';
            }
        }, 0);
        return true;
    }
})(window);

This will allow one to customise the message in the tooltip template whilst still applying styling the the input