Sindbad~EG File Manager

{% extends 'users/layout.html' %}
{% block head %}  
{% endblock %}
{% block title %}Change Password{% endblock %} 
{% block content %}
<div class="row justify-content-center ">
    <div class="col-md-9">
           <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-1">
                    </div>
                    <div class="col-lg-10">
                            <form method="post" id="change_frm" action="{{url_for('user.PostChangePwd',conf_id=conf_id,conf_key=conf_key)}}">
                                <div class="  container my-5 rounded ">          
                                    <h2 class="text-center font-weight-bold text-primary">Change Password</h2>
                                    <div class="row justify-content-center">
                                        <div class="col-md-12 form-group">
                                            <label>Old Password : </label>
                                            <div class="input-group">
                                                <input type="password" name="old_password" id="old_password" class="form-control ">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary" onclick="old_pwd()" id="old_pwd_btn" type="button"><i class="fa-solid fa-eye"></i></button>
                                                </div>
                                            </div>
                                            <label id="old_password-error" class="error" for="old_password"></label><br>
                                            <a  href="{{ url_for('user.ForgetPwd',society_id = Auth.get_conference(conf_id).get('society_id'),conf_id=conf_id,conf_key=conf_key) }}">Forget old password?</a>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-md-12 form-group">
                                            <label>New Password : </label>
                                            <div class="input-group">
                                                <input type="password" name="password" id="password" class="form-control">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary" id="new_pwd_btn" onclick="new_pwd()" type="button"><i class="fa-solid fa-eye"></i></button>
                                                </div>
                                            </div>
                                            <label id="password-error" class="error" for="password"></label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 form-group">
                                            <label>Confirm New Password : </label>
                                            <div class="input-group">
                                                <input type="password" name="confirm_password" id="confirm_password" class="form-control">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary" id="confirm_pwd_btn" onclick="confirm_pwd()" type="button"><i class="fa-solid fa-eye"></i></button>
                                                </div>
                                            </div>
                                            <label id="confirm_password-error" class="error" for="confirm_password"></label>
                                        </div>
                                    </div>
                                    <div class="row text-center">
                                        <div class="col-md-12">
                                            <input type="submit" value="Change Password" id="submit_btn" class="btn btn-primary btn-lg btn-block">
                                        </div>
                                        <br>
                                    </div>
                                </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block script %}
<script type="text/javascript">
    $(document).ready(function(){
        $("#submit_btn").click(function() {
            validate_change_frm()
            if(!$("#change_frm").valid())
            {
                return false  
            }
        })
           
    })       
    function validate_change_frm()
    {
        errorclass : 'error',
        $("#change_frm").validate({
               
            rules : {
                old_password     : "required",
                password         : "required",
                confirm_password : {
                    required : true,
                    equalTo : "#password"
                },
            },
            messages : {
                old_password        : "Please enter the old Password",
                password            : "Please enter the Password",
                confirm_password    : {
                    required :"Please enter the Confirm Password",
                    equalTo : "Confirm Password does not match with New Password"
                },
            },
            highlight: function(element) {
                $(element).parent().addClass('error')
            },
        
            unhighlight: function(element) {
                $(element).parent().removeClass('error')
            },
    
            submitHandler: function(form) {
                form.submit();
            }
        })
               
    }
    function old_pwd() {
    var x = document.getElementById("old_password");
    if (x.type === "password") {
        x.type = "text";
        $("#old_pwd_btn").html('<i class="fa-regular fa-eye-slash"></i>')
    } else {
        x.type = "password";
        $("#old_pwd_btn").html('<i class="fa-regular fa-eye"></i>')
    }
    }
    function new_pwd() {
    var x = document.getElementById("password");
    if (x.type === "password") {
        x.type = "text";
        $("#new_pwd_btn").html('<i class="fa-regular fa-eye-slash"></i>')
    } else {
        x.type = "password";
        $("#new_pwd_btn").html('<i class="fa-regular fa-eye"></i>')
    }
    }
    function confirm_pwd() {
    var x = document.getElementById("confirm_password");
    if (x.type === "password") {
        x.type = "text";
        $("#confirm_pwd_btn").html('<i class="fa-regular fa-eye-slash"></i>')
    } else {
        x.type = "password";
        $("#confirm_pwd_btn").html('<i class="fa-regular fa-eye"></i>')
    }
    }
        </script>

<script type="text/javascript">
    window.setTimeout("document.getElementById('successMessage').style.display='none';", 10000); 
</script>   
{% endblock %}