EVOLUTION-NINJA

Edit File: update_faculty_password.php

<?php echo view('includes/faculty_header'); ?>

<div class="row my_header">
        <h3 style="padding-bottom:10px;border-bottom:2px dashed #ccc;margin-bottom:20px; font-weight: bold;">UPDATE PASSWORD</h3>
        <div class="col-md-2"></div>
  <a href="javascript:history.back()" class="btn btn-primary" style="float:right;margin-bottom:30px; margin-right:15px;">Back</a>
        <div class="col-md-8" style="width:50%; margin-top:5%;">
            <form class="form-horizontal" id="update_password_form">

<input class="form-control" name="encrypted_id" type="hidden" value="<?= current_url(true)->getSegment(5) ?>" required>

<div class="form-group">
                    <label class="control-label col-sm-4">Enter New Password</label>
                    <div class="col-sm-8 view_faculty input-group">
                        <input class="form-control" name="password1" id="password1" title="Minimum 6, Maximum 8 characters, one uppercase, one lowercase, one number and one special character:" type="password" required>
                        
                        <i id="togglePassword" class="eye-icon fas fa-eye-slash"></i>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Confirm Password</label>
                    <div class="col-sm-8 view_faculty input-group">
                        <input class="form-control" name="password2" id="password2" title="Minimum 6, Maximum 8 characters, one uppercase, one lowercase, one number and one special character:" type="password" required>
                        
                        <i id="togglePassword2" class="eye-icon fas fa-eye-slash"></i>
                    </div>
                </div>

<div class=" row view_faculty" style="margin-left:30%;">
                                <div class="col-sm-6">
                               <center><button type="submit" class="btn btn-primary submit">Submit</button></center>
                                </div>
                                <div class="col-sm-6">
                           <button type="button" id="cancel" class="btn btn-danger center-block cancel cancel_1">Cancel</button>
                            </div>
                            </div>
            </form>

</div>

</div>

//     if (passwordInput.type === 'password') {
    //         passwordInput.type = 'text';
    //         eyeIcon.classList.remove('fa-eye');
    //         eyeIcon.classList.add('fa-eye-slash');
    //     } else {
    //         passwordInput.type = 'password';
    //         eyeIcon.classList.remove('fa-eye-slash');
    //         eyeIcon.classList.add('fa-eye');
    //     }
    // }

const passwordInput = document.getElementById('password1');
        const togglePasswordButton = document.getElementById('togglePassword');

togglePasswordButton.addEventListener('click', function() {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                togglePasswordButton.classList.remove('fa-eye-slash');
                togglePasswordButton.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                togglePasswordButton.classList.remove('fa-eye');
                togglePasswordButton.classList.add('fa-eye-slash');
            }
        });

const passwordInput2 = document.getElementById('password2');
        const togglePasswordButton2 = document.getElementById('togglePassword2');

togglePasswordButton2.addEventListener('click', function() {
            if (passwordInput2.type === 'password') {
                passwordInput2.type = 'text';
                togglePasswordButton2.classList.remove('fa-eye-slash');
                togglePasswordButton2.classList.add('fa-eye');
            } else {
                passwordInput2.type = 'password';
                togglePasswordButton2.classList.remove('fa-eye');
                togglePasswordButton2.classList.add('fa-eye-slash');
            }
        });

$(document).ready(function() {

$('#update_password_form').submit(function(e) {
            e.preventDefault();

formdata = new FormData($(this)[0]);

$(".submit").attr('disabled', 'disabled');
            $(".submit").text("Submitting...");

$.ajax({

type: 'post',
                url: '<?php echo site_url("reset_password_faculty") ?>',
                data: formdata,
                contentType: false,
                processData: false,
                dataType: 'json', // Ensure that the response is treated as JSON

success: function(response) {
                    //   response=jQuery.parseJSON(response);
                    console.log(response);

if (response.result == 1) {
                        toastr["success"](response.message);
                        $('#update_password_form')[0].reset();
                        $(".submit").text("Submit");
                        $(".submit").removeAttr('disabled');

if (response.data.user_type_id == '1') {
                            setTimeout(function wait() {
                                window.location = '<?php echo site_url("/admin") ?>';
                            }, 1000);
                        } else if (response.data.user_type_id == '2') {
                            setTimeout(function wait() {
                                window.location = '<?php echo site_url("/faculty") ?>';
                            }, 1000);
                        } else {
                            setTimeout(function wait() {
                                window.location = '<?php echo site_url("/") ?>';
                            }, 1000);
                        }
                    } else if (response.result == 2) {
                        toastr["error"](response.message);
                        $(".submit").text("Submit");
                        $(".submit").removeAttr('disabled');
                    } else {
                        toastr["error"](response.message);
                        $(".submit").text("Submit");
                        $(".submit").removeAttr('disabled');
                    }

}

});

});
    });

const cancelButton = document.getElementById("cancel");

// Add a click event listener to the cancel button
cancelButton.addEventListener("click", function() {
  // Clear the form data
  document.forms[0].reset();
});

</script>

<?php echo view('includes/faculty_footer'); ?>
<style>
    #FrmGrid_list2 {
        width: 100% !important;
    }

.ui-jqdialog .ui-jqdialog-titlebar {
        height: 29px !important;
        background-color: #001a00;
        color: white;
        padding-left: 10px;
    }

.fm-button {
        height: 21px !important;
        padding: 1px;
        margin-right: 10px !important;
        height: 21px !important;
        width: 43%;
        margin-top: -7px !important;
    }

.fas {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: relative !important;
            top: -23px !important;
            float: right !important;
            left: -9px !important;
            z-index: 5;
        }

.ui-jqdialog-content td.navButton {
        padding-top: 12px !important;
    }

.ui-jqgrid .ui-jqgrid-titlebar {
        height: 27px !important;
        background: #1e7ad7 !important;
        color: white !important;
    }

.ui-jqgrid-bdiv {
        height: auto !important;

}

.ui-widget-overlay {
        z-index: 0 !important;
    }

.ui-widget-header {
        background: #1e7ad7 !important;
    }

.ui-jqgrid-hdiv ui-state-default {
        /* width: 873px !important;  */
        cursor: default !important
    }

ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #fed22f;
        background: #ffe45c;
    }

.ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        font-weight: bold;
        color: black;
    }

/* .ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: scroll;
    overflow-x: scroll ;
} */
    /* 
.ui-jqgrid-htable{
    width: 100% !important;
}
#list2{
    width: 100% !important;
} */
    @media only screen and (min-width:320px) and (max-width:640px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }
    }