<!--                                                                  -->
<!--  Copyright (C) 2009 RoyaltyShare, Inc.   All Rights Reserved     -->
<!--                                                                  -->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:template name="passwordRequirements">
<table>
    <tr>
        <td><img src="/production/images/icons/office/Cancel-Grey-(16x16).png" height="16" width="16" class="closeButton" id="NewPasswordLength"/></td>
        <td>At least 12 characters.</td>
    </tr>
    <tr>
        <td><img src="/production/images/icons/office/Cancel-Grey-(16x16).png" height="16" width="16" class="closeButton" id="NewPasswordSpaces"/></td>
        <td>No spaces.</td>
    </tr>
    <tr>
        <td><img src="/production/images/icons/office/Cancel-Grey-(16x16).png" height="16" width="16" class="closeButton" id="NewPasswordRepeat" /></td>
        <td>No repeating characters.<br/></td>
    </tr>
    <tr>
        <td style="vertical-align:top"><img src="/production/images/icons/office/Cancel-Grey-(16x16).png" height="16" width="16" class="closeButton" id="NewPasswordChars" /></td>
        <td>At least 3 of the following types of characters:<br/>
<img src='/production/images/bullet.gif'/>Lowercase letter<br/>
<img src='/production/images/bullet.gif'/>Uppercase letter<br/>
<img src='/production/images/bullet.gif'/>Number<br/>
<img src='/production/images/bullet.gif'/>@#$!%*?<![CDATA[&]]><br/>
</td>
    </tr>
</table>
    </xsl:template>

    <xsl:template name="passwordToggleLogic">
        <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
        <style>
        .toggle-password-eye {
            float: right;
            top: -25px;
            right: 5px;
            position: relative;
            cursor: pointer;
        }
        </style>
        <script type="text/javascript">
        const togglePasswordEye = '<i class="fa fa-eye toggle-password-eye"></i>';
        const togglePasswordEyeSlash = '<i class="fa fa-eye-slash toggle-password-eye"></i>';

        $(togglePasswordEyeSlash).insertAfter('input[type=password]');
        $('input[type=password]').addClass('hidden-pass-input')

        $('body').on('click', '.toggle-password-eye', function (e) {
            let password = $(this).prev('.hidden-pass-input');

            if (password.attr('type') === 'password') {
                password.attr('type', 'text');
                $(this).addClass('fa-eye').removeClass('fa-eye-slash');
            } else {
                password.attr('type', 'password');
                $(this).addClass('fa-eye-slash').removeClass('fa-eye');
            }
        })
        </script>
    </xsl:template>

</xsl:stylesheet>
