Untitled

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>PG Admission Portal</title>
    <link rel = "icon" th:href ="@{/images/logo-aust.png}" type = "image/x-icon">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet"
          th:href="@{https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    <script th:src="@{https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/layout.css}">
    <style>

        ul, li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .invalid {
            padding-left: 22px;
            line-height: 24px;
            color: #ec3f41;
        }

        .valid {
            padding-left: 22px;
            line-height: 24px;
            color: #3a7d34;
        }
        #togglePassword {
            float: right;
            margin-bottom: -30px;
        }


    </style>
</head>
<body>
<div class="container login-wrapper">
    <div class="row">
        <div class="col-md-8 col-sm-7 hidden-xs login-left"></div>
        <div class="col-sm-12 login-right">
            <div class="row"  align="center" style="display: block; text-align: center; padding-bottom: 10px">
                <h2 class="login-head-title">AUST Postgraduate Admission System</h2>
            </div>

            <div class="row" align="center" style="display: block; text-align: center; padding-bottom: 5px"><img th:src="@{/images/logo-aust.png}"
                                                                                                                 title="AMAS" alt="AMAS" height="92"></div>
            <!--    <div class="row" style="display: block; text-align: center;">
                        <span class="IUMS-slogan">Ahsanullah University of Science and Technology (AUST)</span>
                </div>-->

            <div class="IUMS-sub-head">Please Provide your Password.</div>


            <div th:if="${errorMsgToken}" class="alert alert-danger">
                <span th:text="${errorMsgToken}"></span>
            </div>

            <div th:if="${ResetPassMsg}" class="alert alert-success">
                <span th:text="${ResetPassMsg}"></span>
            </div>

            <form th:action="@{/reset-password}" th:object="${passwordResetForm}" method="post" th:if="!${errorMsgToken} and !${ResetPassMsg}"
            >
                <div class="form-group">
                    <input type="hidden" name="token" th:value="${token}"/>
                    <label for="password" class="contact-label">Password</label>
                    <input id="password"
                           class="form-control"
                           placeholder="password"
                           type="password"
                           th:field="*{password}"/>
                    <i class="bi bi-eye-slash" id="togglePassword"></i>
                    <br>
                    <label for="confirmPassword" class="contact-label">Confirm Password</label>
                    <input id="confirmPassword"
                           class="form-control"
                           placeholder="Confirm password"
                           type="password"
                           th:field="*{confirmPassword}"/>
                    <span class='error' style='display:none; color: red' id='mismatchError'>
                                    Password does not match
                                </span>
                </div>

                <div id="pswd_info" class="form-group">

                    <div class="col-md-12">
                        <p>Password must meet the following requirements:</p>
                        <ul>
                            <li id="letter" class="invalid">At least <strong>one letter</strong>
                            </li>
                            <li id="capital" class="invalid">At least <strong>one capital
                                letter</strong></li>
                            <li id="number" class="invalid">At least <strong>one number</strong>
                            </li>
                            <li id="length" class="invalid">Be at least <strong>8
                                characters</strong>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="text-center mt-0">
                    <input class="btn" type="submit" id="btn_change_password" value="Reset Password"/>
                </div>
            </form>
            <div class="text-center mt-0" th:if="${errorMsgToken}">
                <a class="btn" th:href="@{/forgot-password}">Back to Forgot Password</a>
            </div>
            <div class="text-center mt-0" th:if="${ResetPassMsg}">
                <a class="btn" th:href="@{/pgas/login}">Back to Login</a>
            </div>

            <p class="copy-right"><br/>
                <span class="newYear">2021</span> &copy; - Ahsanullah University of Science and Technology</p>
        </div>
    </div>
</div>
</body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        let totalValid = 0;
        $("#password").keyup(function () {
            let pswd = $(this).val();
            totalValid = 0;

            //validate the length
            if (pswd.length < 8) {
                $('#length').removeClass('valid').addClass('invalid');
            } else {
                $('#length').removeClass('invalid').addClass('valid');
                totalValid++;
            }

            //validate letter
            if (pswd.match(/[a-z]/)) {
                $('#letter').removeClass('invalid').addClass('valid');
                totalValid++;
            } else {
                $('#letter').removeClass('valid').addClass('invalid');

            }

            //validate uppercase letter
            if (pswd.match(/[A-Z]/)) {
                $('#capital').removeClass('invalid').addClass('valid');
                totalValid++;
            } else {
                $('#capital').removeClass('valid').addClass('invalid');
            }

            //validate number
            if (pswd.match(/\d/)) {
                $('#number').removeClass('invalid').addClass('valid');
                totalValid++;
            } else {
                $('#number').removeClass('valid').addClass('invalid');
            }
        });
        let matchValid = 0;
        $("#confirmPassword").keyup(function () {
            matchValid = 0;
            let confirmPswd = $(this).val();
            let password = $("#password").val();
            if (confirmPswd === password) {
               $('#mismatchError').hide();
                matchValid = 1;
            } else {
                $('#mismatchError').show();
                matchValid = 0;
            }
            if (totalValid == 4 && matchValid == 1)
                enableDisableButton("enable");
            else
                enableDisableButton("disable");
        });

        function enableDisableButton(op) {
            if (op == "enable") {
                $("#btn_change_password").removeClass("disabled");
                $("#btn_change_password").attr("disabled", false);
            } else {
                $("#btn_change_password").addClass("disabled");
                $("#btn_change_password").attr("disabled", true);
            }
        }

        enableDisableButton("disable");

    });

</script>
</html>