user_account_settings

mail@pastecode.io avatar
unknown
php
2 years ago
20 kB
4
Indexable
Never
<?php 
require 'session_init.php';
include 'user_ui_viewData.php';
include 'connection.php';
$user = $_SESSION['USER'];
$id = $_SESSION['USERID'];
$arrayUsers = array();
$sql = "SELECT username FROM users_tb";
$result = mysqli_query($connect, $sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        array_push($arrayUsers, $row['username']);
    }
}

$sql = "SELECT profile_id from users_tb where userid = '$id'";
$profile_id = null;
$recordstat = null;
$result = mysqli_query($connect, $sql);
if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
     $profile_id = $row['profile_id']; 
  }
}
else
  echo mysqli_error($connect);

$sql =  "SELECT record_status FROM residence_tb WHERE id = '$profile_id'";
$result = mysqli_query($connect, $sql);
if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
     $recordstat = $row['record_status']; 
  }
}
else
  echo mysqli_error($connect);
 ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Resident Account Settings - IBIMS</title>
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
    <link href="../css/styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var entry = '<tr><td><input class="form-control" type="text" name="fam_name[]" required></td><td> <select name="relationship[]" class="form-select form-select-lg mb-2" style="font-size: 15px;"><option value="Mother">Mother</option><option value="Father">Father</option><option value="Daughter">Daughter</option><option value="Son">Son</option><option value="Broher">Brother</option><option value="Sister">Sister</option></select></td><td><select name="samehs[]" class="form-select form-select-lg mb-2" style="font-size: 15px;"><option value="1">Yes</option><option value="0">No</option></select></td><td><input type="button" class="btn btn-danger" value="remove" name="delentry" id="delentry"> </td></tr>';
            $("#addentry").click(function() {
                $("#family_table").append(entry);
            });
            $("#family_table").on('click', '#delentry', function() {
                $(this).closest('tr').remove();
            });
        });

        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
    </script>
    


</head>

<body class="sb-nav-fixed" style="background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../assets/img/seahorsesogod.png');background-repeat: no-repeat;background-size: cover; backdrop-filter: blur(1.5px);">
<script>
        var element = document.getElementById("dashboard");
        element.classList.add("active");
    </script>
    <!-- Enter Main Body content here-->
    <div id="layoutSidenav_content">
        <main>
            <nav class="navbar navbar-expand-md navbar-dark justify-content-center" style="background:#192841;">
                    <a class="navbar-brand abs">IBIMS</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse" id="collapsingNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" id="navHome" href="../residentpage.php">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="navProfile" href="./user_profile_management.php">Resident Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="navAnnouncements" href="../resident_events_management.php" onclick=noAccess()>Announcements and Events</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="navReq" href="../resident_document_requests.php" onclick=noAccess()>Request Document</a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link active" href="./user_account_settings.php"><?php echo ($_SESSION['USER'])?><i class="fas fa-user fa-fw"></i></a>
                            </li>
                        </ul>
                    </div>
                </nav>

                <script>
                  function noAccess()
                  {
                  var recordstat = '<?php echo $recordstat?>';
                  if (recordstat == '0' || '2' || null) // tanggalin mo nalang quotation kung di gumana
                  {
                  document.getElementById('navAnnouncements').href = "#";
                  document.getElementById('navReq').href = "#";
                    alert("You are not eligible to use this feature. You must have a verified profile first.");
                  }
                  else
                  {
                    document.getElementById('navAnnouncements').href = "../resident_events_management.php";
                    document.getElementById('navReq').href = "../resident_document_requests.php";
                  }
                }
                </script>
        <br>
        <!-- 1st Card -->
        <div class="m-5">
        <div class="card border-0">
            <br>
            <!-- Account settings start -->
            <?php
                        require_once './connection.php';
                        $arrayUsers = array();
                        $arrayEmails = array();
                        $sql = "SELECT username, email FROM users_tb";
                        $result = mysqli_query($connect, $sql);
                        if ($result->num_rows > 0) {
                            while ($row = $result->fetch_assoc()) {
                                array_push($arrayUsers, $row['username']);
                                array_push($arrayEmails, $row['email']);
                            }
                        }
                    ?>
            <div class="container">
            <h3>Account Settings</h3>
                <hr>
                <?php
                                include './connection.php';
                                $query=mysqli_query($connect,"SELECT * FROM users_tb WHERE userid='$id' AND username='$user'");
                                $row=mysqli_fetch_array($query);
                                ?>
                <div class="row text-start px-3">
                <form action="user_account.php" method="POST">
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Username</label>
                        <div class="col-sm-6">
                            <input required disabled minlength="5" maxlength="20" type="text" class="form-control" id="username" name="username" style="height: 36px;" onkeypress="return /^[a-z0-9]+$/i.test(event.key)" value="<?php echo $row['username'];?>" >
                            <div hidden class="invalid-feedback" id="user_exist" style="display: block;">
                                Username already exists!
                            </div> 
                            <div hidden class="valid-feedback" id="user_avail" style="display: block;">
                                Username available!
                            </div> 
                            <div hidden class="invalid-feedback" id="user_input" style="display: block;">
                                Input username with a minimun of 6 characters and maximum of 25 characters.
                            </div>
                        </div>
                            <div hidden class="spinner-border text-primary col-sm-4" id="loadingicon" role="status">
                                <span class="visually-hidden" >Loading...</span>
                            </div>
                </div>

                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-6">
                            <input required disabled type="email" class="form-control" id="email" name="email" style="height: 36px;" value="<?php echo $row['email'];?>">
                            <div hidden class="invalid-feedback" id="email_exist" style="display: block;">
                                Email already exists!
                            </div> 
                            <div hidden class="valid-feedback" id="email_avail" style="display: block;">
                                Email available!
                            </div> 
                            <div hidden class="invalid-feedback" id="email_input" style="display: block;">
                                Please input valid email.
                            </div>
                        </div>
                            <div hidden class="spinner-border text-primary col-sm-4" id="loadingeicon" role="status">
                                <span class="visually-hidden" >Loading...</span>
                            </div>
                </div>

                <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-2 col-form-label">Current Password</label>
                    <div class="col-sm-6">
                        <input disabled type="password" class="form-control" id="old_password" name="old_password" style="height: 36px;" required placeholder="Enter Current Password">
                        <span toggle="#password-field" class="fas fa-eye field-icon toggle-password" onclick="toggleVisibility()"></span>
                    </div> 
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-2 col-form-label">New Password</label>
                    <div class="col-sm-6">
                        <input disabled type="password" class="form-control" id="new_password" name="new_password" style="height: 36px;" placeholder="Enter New Password">
                        <span toggle="#password-field" class="fas fa-eye field-icon toggle-password" onclick="toggleVisibility1()"></span>
                    </div>  
                </div>
                <div class="form-group row justify-content-end">
                    <div class="col-sm-6" id="editdiv" style="padding: 0px 40px 0px 40px;">
                        <button class="btn btn-primary d-block btn-user" type="button" style="margin: 20px 0px 0px 0px; font-size: 15px; width: 100%;" name="edit" id="editbtn" onclick="editAccount()">Edit</button>
                    </div>
                    <div hidden class="col-sm-6" id="updatediv" style="padding: 0px 40px 0px 40px;">
                        <button disabled class="btn btn-primary d-block btn-user" type="submit" style="margin: 20px 0px 0px 0px; font-size: 15px; width: 100%; " name="update" id="updatebtn">Update</button>
                    </div>
                    <div class="col-sm-6" style="padding: 0px 40px 0px 40px;">
                        <button disabled class="btn btn-secondary d-block btn-user" type="button" style="margin: 20px 0px 0px 0px; font-size: 15px; width: 100%;" name="cancel" id="cancelbtn" onclick="window.location.href='user_account_settings.php'">Cancel</button>
                    </div>
                </div>
                </form>

                
                <br><br>
                </div>
               
            </div>
            <br> 
        </div>
        <br>
        <!-- 2nd Card -->
    <div class="mt-6 card border-0" style="background:transparent;">
        <br>
        <div class="container">
            <div class="row px-3">
                <div class="col-mb-3 text-center">
                    <button type="button" class="col-2 btn btn-danger text-white" onclick="window.location.href='./logout.php'">Logout</button>
                    <button type="button" class="col-2 btn btn-secondary text-white" onclick="window.location.href='../residentpage.php'">Back</button>
                </div>

                <br><br>
                
            </div>
        </div>
        <br>
    </div>

   


<script>
        var users = <?php echo json_encode($arrayUsers) ?>;
        var emails = <?php echo json_encode($arrayEmails) ?>;
        var inputuser = document.getElementById('username');
        var inputemail = document.getElementById('email');
        var current_username = inputuser.value;
        var current_email = inputemail.value;
        
        
        $(document).ready(function() {
            $("#username").on("input", function() {
                document.getElementById('loadingicon').hidden = false;
                document.getElementById('user_avail').hidden = true;
                document.getElementById('user_exist').hidden = true;
                document.getElementById('user_input').disabled = true;
                document.getElementById('updatebtn').disabled = true;
                var delayInMilliseconds = 1500; //1 second

                setTimeout(function() {
                    if (users.includes(inputuser.value) && inputuser.value != current_username) {
                        document.getElementById('loadingicon').hidden = true;
                        document.getElementById('user_avail').hidden = true;
                        document.getElementById('user_exist').hidden = false;
                        document.getElementById('updatebtn').disabled = true;
                    } else if (inputuser.value == current_username) {
                        document.getElementById('loadingicon').hidden = true;
                        document.getElementById('user_avail').hidden = true;
                        document.getElementById('user_exist').hidden = true;
                        document.getElementById('user_input').hidden = true;
                        document.getElementById('updatebtn').disabled = true;
                    } else if (inputuser.value == "" || inputuser.value == null) {
                        document.getElementById('loadingicon').hidden = true;
                        document.getElementById('user_avail').hidden = true;
                        document.getElementById('user_exist').hidden = true;
                        document.getElementById('user_input').hidden = false;
                        document.getElementById('updatebtn').disabled = true;
                    } else if (inputuser.value.length > 5) {
                        document.getElementById('loadingicon').hidden = true;
                        document.getElementById('user_avail').hidden = false;
                        document.getElementById('user_exist').hidden = true;
                        document.getElementById('user_input').hidden = true;
                        document.getElementById('updatebtn').disabled = false;
                    }
                }, delayInMilliseconds);
            });
        });

        $(document).ready(function() {
            $("#email").on("input", function() {
                document.getElementById('loadingeicon').hidden = false;
                document.getElementById('email_avail').hidden = true;
                document.getElementById('email_exist').hidden = true;
                document.getElementById('email_input').disabled = true;
                document.getElementById('updatebtn').disabled = false;
                var delayInMilliseconds = 1500; //1 second

                setTimeout(function() {
                    if (emails.includes(inputemail.value) && inputuser.value != current_username) {
                        document.getElementById('loadingeicon').hidden = true;
                        document.getElementById('email_avail').hidden = true;
                        document.getElementById('email_exist').hidden = false;
                        document.getElementById('email_input').hidden = true;
                        document.getElementById('updatebtn').disabled = true;
                    } else if (inputemail.value == current_email) {
                        document.getElementById('loadingeicon').hidden = true;
                        document.getElementById('email_avail').hidden = true;
                        document.getElementById('email_exist').hidden = true;
                        document.getElementById('email_input').hidden = true;
                        document.getElementById('updatebtn').disabled = true;
                    } else if (inputemail.value == "" || inputemail.value == null) {
                        document.getElementById('loadingeicon').hidden = true;
                        document.getElementById('email_avail').hidden = true;
                        document.getElementById('email_exist').hidden = true;
                        document.getElementById('email_input').hidden = false;
                        document.getElementById('updatebtn').disabled = true;
                    } 
                }, delayInMilliseconds);
            });
        });

        function toggleVisibility() {
            var x = document.getElementById("old_password");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }

        function toggleVisibility1() {
            var x = document.getElementById("new_password");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }

        function editAccount() {
            document.getElementById('updatediv').hidden = false;
            document.getElementById('editdiv').hidden = true;
            document.getElementById('username').disabled = false;
            document.getElementById('email').disabled = false;
            document.getElementById('old_password').disabled = false;
            document.getElementById('new_password').disabled = false;
            document.getElementById('cancelbtn').disabled = false;
        }
    </script>

    
        </div>
        </main> 

    </div>
</body>