<!--[if lte IE 7]>
<style type="text/css">
    .bttn_right                   {float:left;}
    .options_form_table_fixed td  {margin:0;padding:0;padding:2px 0px;}
</style>
<![endif]-->
<!--[if lte IE 8]>
<style type="text/css">
    body {height:auto !important;}
</style>
<![endif]-->
<!--[if IE 9]>
<style type="text/css">
    .optionsPanel_top_title {padding:3px 0px 0px 7px;}
</style>
<![endif]-->
    
<style type="text/css">
.options_password_shell    {position:relative;width:100%;height:19px;background:#E6E6E6;border:1px solid #ccc;overflow:hidden;margin-top:5px;}
.options_password_bar      {position:relative;top:0;left:0;height:16px;font-size:10px;font-weight:bold;color:#000;padding-top:3px;}
	
.pw_very_weak   {background:#CC0000;width:17%;}
.pw_weak        {background:#F0B600;width:33%;}
.pw_medium      {background:#FFFF00;width:50%;}
.pw_average     {background:#C9E400;width:66%}
.pw_strong      {background:#7EBF00;width:83%;}
.pw_very_strong {background:#339900;width:100%;}
</style>

<table class="options_form_table" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td class="options_form_table_label"><div class="options_form_label" id="lblLogin"></div></td>
    <td><input id="PasswordUserName" name="PasswordUserName" class="textfield" type="text" readonly="true" style="background-color:#EEE;color:#444" value=""/></td>
    </tr>
    <tr>
    <td class="options_form_table_label"><div class="options_form_label" id="lblCurrentPassword"></div></td>
    <td><input name="CurrentPassword" type="password" id="CurrentPassword" class="textfield" autocomplete="current-password" /></td>
    </tr>
    <tr>
    <td class="options_form_table_label"><div class="options_form_gap"></div></td>
    <td><div class="options_form_gap"></div></td>
    </tr>
    <tr>
    <td class="options_form_table_label"><div class="options_form_label" id="lblNewPassword"></div></td>
    <td><input name="NewPassword" type="password" id="NewPassword" class="textfield" onkeyup="ShowPasswordStrength();TestPassword()" autocomplete="new-password" /></td>
    </tr>
    <tr>
    <td class="options_form_table_label"><div class="options_form_label" id="lblConfirmPassword"></div></td>
    <td><input name="ConfirmNewPassword" type="password" id="ConfirmNewPassword" class="textfield" autocomplete="new-password" /></td>
    </tr>
    <tr>
        <td class="options_form_table_label"></td>
        <td>
			<!-- Password Strength Check -->
            <table class="options_form_table" id="tblPasswordStrength" border="0" cellspacing="0" style="width:99%;display:none" cellpadding="0">
            <tr>
                <td class="options_form_table_label"><div class="options_form_label" style="color:#333;padding-top:4px;" id="lblPasswordStrength"></div></td>
                <td>
                    <div class="options_password_shell">
                        <div id="strength" class="options_password_bar pw_very_weak">&nbsp;&nbsp;</div>
                    </div>
                </td>
            </tr>
            </table>
        </td>
    </tr>                                      
</table>

<script type="text/javascript">
    var oChangePasswordDialog = null;

    function ShowPasswordStrength()
    {
        $('#tblPasswordStrength').css('display', '');
    }

    function TestPassword() {
        var sPass = document.getElementById('NewPassword').value;
            
        var hasupper = sPass.match(/[A-Z]/) ? 1 : 0;
        var haslower = sPass.match(/[a-z]/) ? 1 : 0;
        var hasnumber = sPass.match(/[0-9]/) ? 1 : 0;
        var hassymbol = sPass.match(/[\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]/) ? 1 : 0;
        var hasmix = (hasupper && haslower) ? 1 : 0;
        var strength = hasupper + haslower + hassymbol + hasnumber + hasmix;
            
        if (sPass.length>7)
        {
            strength++;
        }

        var oS = document.getElementById('strength');
            
        switch (strength) {
            case 0:
                oS.className = 'options_password_bar pw_very_weak';
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-VeryWeak]');
                break;
            case 1:
                oS.className = "options_password_bar pw_very_weak";
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-VeryWeak]');
                break;
            case 2:
                oS.className = "options_password_bar pw_weak";
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-Weak]');
                break;
            case 3:
                oS.className = "options_password_bar pw_medium";
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-Medium]');
                break;
            case 4:
                oS.className = "options_password_bar pw_average";
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-Average]');
                break;
            case 5:
                oS.className = "options_password_bar pw_strong";
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-Strong]');
                break;
            default:
                oS.className = "options_password_bar pw_very_strong";
                oS.innerHTML = '&nbsp;&nbsp; ' + t_('[ME_TXT-VeryStrong]');
                break;                 
        }
    }


    function doPasswordChange(UserName, CurrentPassword, NewPassword) {
        //issue ajax request to change password
        ErrorValue = '';
        ErrorDetails = '';
        $.ajax({
            type: 'POST',
            url: getAppServletURL() + '?v=' + Date.now() + '&ME_VALIDATIONTOKEN=' + getTopAppWindow().g_opt['ME_VALIDATIONTOKEN'],
            data: { Cmd: 'CHANGE-PASSWORD', Password: CurrentPassword, NewPassword: NewPassword },
            success: function (result) {
                ErrorValue = $(result).find("RETURNVALUE").text();
                ErrorDetails = $(result).find("ERRORDETAILS").text();
            },
            async: false
        });

        if (ErrorValue == '1') {
            alert('Password Changed Successfully');
            //reset flag to revoke password change prompt?
            return true;
        } else {
            alert('Failed: ' + ErrorDetails);
            return false;
        }
    }

    function TryChangePassword() {
        if ($('#NewPassword').val() != $('#ConfirmNewPassword').val()) {
            alert('Passwords do not match');
            return false;
        }
        else {
            return doPasswordChange($('#PasswordUserName').val(), $('#CurrentPassword').val(), $('#NewPassword').val())
        }
    }


    function LocalizePasswordFields() {
        $('#PasswordUserName').val(getTopAppWindow().g_opt['Mailbox'] + '@' + getTopAppWindow().g_opt['Postoffice']);
        $('#lblLogin').text(t_('[ME_TXT-Username]') + ':');
        $('#lblPasswordStrength').text(t_('[ME_TXT-Passwordstrength]') + ':');
        $('#lblCurrentPassword').text(t_('[ME_TXT-CurrentPassword]') + ':');
        $('#lblNewPassword').text(t_('[ME_TXT-NewPassword]') + ':');
        $('#lblConfirmPassword').text(t_('[ME_TXT-ConfirmNewPassword]') + ':');
    }

</script>