JezK

Edit File: usermanagement.php

<?php
include "sidemenu-start.php";
?>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h1>User Management</h1>
        </div>
        <div class="col-md-6 text-end">
            <button type="button" data-bs-toggle="modal" data-bs-target="#addUser" class="de-btn-small text-uppercase">Add New User</button>

</div>
    </div>
    <!-- <div class="row mt-3">
        <div class="col-md-6 offset-md-6">
            <form class="d-flex justify-content-end">
                <div class="form">

<i class="fa fa-search"></i>
                    <input type="text" class="form-control form-input" placeholder="Search">
                </div>
            </form>
        </div>
    </div> -->
    <div class="row mt-3">
        <div class="col-md-12">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>S.no</th>
                        <th>Username</th>
                        <th>Email Id</th>
                        <th>User Id</th>

<th>Phone Number</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>

</tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="addUser" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">
            <form id="newUser">
                <div class="modal-header de-mh">
                    <h5 class="modal-title" id="exampleModalLabel">Add New User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-1">

<div class="mb-0">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" name="name" id="name">
                        <p class="error name_error"></p>
                    </div>
                    <div class="mb-0">
                        <label for="phone" class="form-label">Phone Number</label>
                        <input type="text" class="form-control" id="mobile" name="mobile">
                        <p class="error mobile_error"></p>
                    </div>
                    <div class="mb-0">
                        <label for="email" class="form-label">Email Address</label>
                        <input type="email" class="form-control" name="email" id="email">
                        <p class="error email_error"></p>
                    </div>
                    <div class="mb-4 position-relative">
                        <label for="password" class="form-label">Password</label>
                        <input type="text" class="form-control" onfocus="passwordGenerator()" name="password" id="password">
                        <span class="toggle-icon"><i class="fa fa-eye-slash"></i></span>

<div class="mb-0">
                        <label for="address" class="form-label">Address</label>
                        <textarea class="form-control" id="address" name="address" rows="3"></textarea>
                        <p class="error address_error"></p>
                    </div>
                    <div class="mb-0 d-flex justify-content-center">
                        <button type="submit" class="de-btn-small" name="submit" onclick="return validateNewUser()">ADD</button>

</div>
                </div>

</form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">

<div class="modal-header de-mh">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h1 class="modal-title text-center" id="exampleModalLabel">Do You want to Delete?</h1>
            </div>
            <div class="modal-footer">

<button type="button" class="de-btn-small yes" name="submit" onclick="deleteUser(this.value)">Yes</button>
                <button type="button" class="close-btn" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<?php
include "sidemenu-end.php";
?>

function blockLetterE(event) {

var input = event.target.value;
        console.log(input)
        if (input.includes('e') || input.includes('E')) {
            $(".mobile_error").html("Invalid input! The letter 'e' is not allowed.");
            // console.log('hi')
            // alert("Warning: The letter 'e' is not allowed.");
        }
    }

let datatable;
    $(document).ready(function() {
        datatable = $('#usersTable').DataTable({
            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' servermside processing mode.
            //"order": [], //Initial no order.
            "searching": true,
            "iDisplayLength": 10,
            "orderable": false,
            "ajax": {
                "url": 'app/getUsers.php',
                "type": "POST",
                "dataType": "json",
                "dataSrc": function(jsonData) {
                    return jsonData.data;
                }
            },
            "language": {
                searchPlaceholder: "Search",
                "search": '<div class="form user"><i class="fa fa-search"></i></div>',
                "paginate": {
                    "previous": '<i class="angles fa fa-angle-left"></i>',
                    "next": '<i class="angles fa fa-angle-right"></i>'
                }
            }

});
    });

function validateNewUser() {
        $(".error").html("");

let name = $("#name").val().trim();
        let mobile = $("#mobile").val().trim();
        let email = $("#email").val().trim();
        let password = $("#password").val().trim();
        let address = $("#address").val().trim();
        let check_email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (name == "") {
            $(".name_error").html("Please Enter Name");
            return false;
        }

if (name.length <= 2) {
            $(".name_error").html("Name Should Be Minimum 3 Letters Long");
            return false;
        }

if (mobile == "") {
            $(".mobile_error").html("Please Enter Phone Number");
            return false;
        }

if (mobile.includes("e")) {
            $(".mobile_error").html("Invalid input! The letter 'e' is not allowed.");
            return false;
        }

if (mobile.length != 10) {
            $(".mobile_error").html("Please enter valid mobile number");
            return false;
        }

if (email == "") {
            $(".email_error").html("Please enter Email");
            $("#email").focus();
            return false;
        }

if (password == "") {
            $(".password_error").html("Please Enter Password");
            return false;
        }

if (!checkPassword(password)) {
            $(".password_error").html(
                "Password must be at least 8 characters long and contain a combination of letters, numbers, and special characters."
            );
            return false;
        }

if (address == "") {
            $(".address_error").html("Please Enter Address");
            return false;
        }

return true;
    }
</script>

let password = $('#password').val();

if (password == "") {

let name = $('#name').val();
            let mobile = $('#mobile').val();

let usernamePrefix;
            let firstLetter;
            let secondLetter;
            let phoneNumberSuffix;

if (name.length < 4) {
                firstLetter = name.charAt(0).toUpperCase();
                secondLetter = name.charAt(1).toLowerCase();

phoneNumberSuffix = mobile.substring(mobile.length - 5);

password = firstLetter + secondLetter + name.substring(2) + "@" + phoneNumberSuffix;
            } else {
                usernamePrefix = name.substring(0, 4);
                firstLetter = usernamePrefix.charAt(0).toUpperCase();
                secondLetter = usernamePrefix.charAt(1).toLowerCase();
                phoneNumberSuffix = mobile.substring(mobile.length - 4);
                password = firstLetter + secondLetter + usernamePrefix.substring(2) + "@" + phoneNumberSuffix;

}

$('#password').val(password);
            return password;
        }

}

$('#newUser').submit(function(event) {
        event.preventDefault();

formData = $('#newUser').serialize();
        $.ajax({
            type: 'POST',
            url: 'app/addNewUser.php',
            data: formData,
            success: function(data) {
                if (data == 1) {
                    toastr.success('User added successfully');
                    datatable.draw();
                } else {
                    toastr.warning('User Exists');
                }

$('#addUser').modal('toggle')

document.getElementById("newUser").reset();
            }
        })
    })

function getUserId(id) {
        $('.yes').val(id);
    }

function deleteUser(id) {

$.ajax({
            url: 'app/deleteUser.php',
            type: 'POST',
            data: {
                deleteStatus: 'yes',
                id: id
            },
            success: function(response) {
                if (response == 1) {
                    $('#deleteModal').modal('toggle');
                    datatable.draw();
                    toastr.success('User Deleted');
                } else {
                    $('#deleteModal').modal('toggle');
                    toastr.error('Unable to delete');
                }
            }
        })
    }

const phoneInput = document.getElementById('mobile');

phoneInput.addEventListener('input', function() {
        // Remove non-numeric characters
        phoneInput.value = phoneInput.value.replace(/[^0-9]/g, '');
    });
</script>