EVOLUTION-NINJA

Edit File: profile.php

<?php echo view('includes/sidebar'); ?>
<script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script>
<script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script>
<link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> 
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/createproject.css');?>">
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/font-awesome.min.css');?>">
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/sidebar.css');?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

@media (min-width: 768px) and (max-width: 1024px) {
        .div-img--contents {
            width: 90%;
        }

.inpfieldname {
            font-size: 15px;
        }
    }

@media only screen and (max-width:620px) {
        .fieldsbox {
            width: 100%
        }

.emp2 {
            margin-top: 100px !important;
        }

.home-section {
            height: 100%
        }

.addemployeedetail {
            margin: auto;
        }

.addemployeedetail>div {
            margin-top: 13px;
        }

.submit,
        .cancel {
            width: 110px
        }
    }
</style>
<section class="home-section fullpage">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>
    <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Change password</h1>
        </div>
    </div>

<label for="phone">Old Password:</label>
                <input type="text" id="oldpass" name="oldpassword" required>

<label for="phone">New Password:</label>
                <input type="text" id="newpass" name="newpassword"required>
                
                 <label for="phone">Confirm Password:</label>
                <input type="text" id="confirmpass" name="confirmpassword" required>
                
                <button type="submit">Update</button>
            </form>
     
    </div>
</section>

const newpassword = $("#newpass").val();
            const confirmpassword = $("#confirmpass").val();

// Password validation regex: at least 8 characters, one uppercase, one lowercase, one special character
            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}$/;

if (!passwordRegex.test(newpassword)) {
                Swal.fire({
                    icon: "error",
                    title: "Invalid Password",
                    text: "Password must be at least 8 characters long, include uppercase and lowercase letters, and at least one special character.",
                    timer: 3000,
                    position: "center",
                    showConfirmButton: false
                });
                return; // Stop the form submission
            }

if (newpassword !== confirmpassword) {
                Swal.fire({
                    icon: "error",
                    title: "Password Mismatch",
                    text: "New password and confirm password must be the same. Please try again.",
                    timer: 3000,
                    position: "center",
                    showConfirmButton: false
                });
                return; // Stop the form submission
            }

const formData = $(this).serialize();
            const updateUrl = "update"; // Update this to your actual endpoint

$.ajax({
                url: updateUrl,
                type: "POST",
                data: formData,
                success: function (response) {
                    if (response.result === 1) {
                        Swal.fire({
                            icon: "success",
                            title: response.message,
                            timer: 3000,
                            showConfirmButton: false,
                            timerProgressBar: true
                        });
                        $("#profile-update")[0].reset();
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: response.message
                        });
                    }
                },
                error: function (xhr, status, error) {
                    Swal.fire({
                        icon: "error",
                        title: "Profile Update Failed",
                        text: xhr.responseText || error
                    });
                }
            });
        });
    });
</script>

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