JezK
Edit File: login.php
<?php include_once("app/adminObj.php"); include_once("app/checkSession.php"); $type = isset($_GET["id"])?$_GET["id"]:1 ; $active =""; if($type == 2) { $active = 'active'; } ?> <!DOCTYPE html> <html lang="en" class="h-100"> <head> <title>Uflexit</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="stylesheet" href="css/font-awesome.min.css"> --> <link rel="icon" href="images/fav.png" type="image/gif" sizes="16x16"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/login.css"> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body class="login h-100"> <div class="container-fluid h-100"> <div class="row h-100"> <div class="col-md-6 p-0 h-100"> <div class="img-div"> <img src="images/businesslogin.png" class="login-bg m-0"></div> <img src="images/Customer_croppings/loginlogo.png" class="logo-cls"> <!-- <p class="login-bg m-0"></p> --> </div> <!--form --> <div class="col-md-6 h-100 bg-white login-secondBlock pt-5 pl-0"> <div class="justify-content-center h-100"> <div class="row d-flex justify-content-center"> <div class=""> <p class="text-center text-clr-blue " id="field1">Business Login</p> </div> </div> <!-- button --> <div class="row w-100"> <div class="d-flex justify-content-center col-md-12 col-12 pl-0"> <ul class="nav nav-tabs log-body d-flex justify-content-between w-100"> <li class="nav-item"> <a id="owner" class="nav-link b-customer text-center <?php if($type=='' or $type!=2) echo 'active'; ?>" data-toggle="tab" href="#owner"><span class="pr-1"><img src="images/Business_select.png" alt="owner"></span>Business</a> </li> <li class="nav-item"> <a id="customer" class="nav-link i-customer text-center <?php echo $active; ?>" id="field2" data-toggle="tab" href="#customer"><span class="pr-2"><img src="images/Individual.png" alt="owner"></span>Individual</a> </li> </ul> </div> </div> <!-- button --> <!-- tab content --> <div class="tab-content"> <!-- owner form --> <div id="owner_div" class="container tab-pane active pl-0 mt-4"> <?php if($type==1) { echo $customerObj->flashMessage(); } ?><br> <form class="form" action="app/loginapp.php" method="post"> <input type="hidden" name="type" value="1" /> <div class="log-body"> <div class="row h-100"> <div class="col-md-12 mb-4 "> <label for="inputEmail" class="inpt-label">Email</label> <div class="input-container"> <input type="email" id="email" name="email" value="" class="form-control frm-input" placeholder="Enter Email Address" autofocus=""> </div> <div class="error email_error"></div> </div> <div class="col-md-12 mb-1 "> <label for="inputEmail" class="inpt-label">Password</label> <div class="input-container"> <input type="password" id="password" name="password" value="" class="form-control frm-input" placeholder="Enter Password"> <i class="fa fa-eye-slash icon icon-display" id="togglePassword"></i> <!-- <i class="fa fa-eye icon icon-display" id="icon1" onclick="showPassword(1)"></i> --> </div> <div class="error password_error"></div> </div> <div class="col-md-12 text-right mb-4 "> <a href="forgetpassword_user.php" class="forgot-txt">Forgot Password?</a> </div> <div class="col-md-12 mb-4 py-2"> <input type="submit" name="loginBussinessRequest" value="Login" class="btn btn-primary w-100 btn-login py-2" onclick="return validateLogin();" /> </div> <div class="col-md-12 mb-4 "> <p class="acct-txt">Don't have an account? <span><a href="registration.php" class="register-btn">Register</a></span> </p> </div> </div> </div> </form> </div> <!-- Owner form --> <!-- Customer form --> <div id="customer_div" class="container tab-pane pl-0 mt-4"><br> <form class="form" action="app/loginapp.php" method="post"> <input type="hidden" name="type" value="2" /> <div class="log-body"> <?php if($type==2) { echo $customerObj->flashMessage(); } ?> <div class="row h-100"> <div class="col-md-12 mb-4 "> <label for="inputEmail" class="inpt-label">Email</label> <div class="input-container"> <input type="email" id="customerEmail" name="email" value="" class="form-control frm-input" placeholder="Enter Email Address" autofocus=""> </div> <div class="error email_error"></div> </div> <div class="col-md-12 mb-1 "> <label for="inputEmail" class="inpt-label">Password</label> <div class="input-container"> <input type="password" id="customerPassword" name="password" value="" class="form-control frm-input" placeholder="Enter Password"> <i class="fa fa-eye-slash icon icon-display" id="togglePassword2"></i> </div> <div class="error password_error"></div> </div> <div class="col-md-12 text-right mb-4 "> <a href="forgetpassword.php" class="forgot-txt">Forgot Password?</a> </div> <div class="col-md-12 mb-4 py-2"> <input type="submit" name="customerLoginRequest" value="Login" class="btn btn-primary w-100 btn-login py-2" onclick="return validateCustomerLogin();" /> </div> <div class="col-md-12 mb-4 "> <p class="acct-txt">Don't have an account? <a class="register-btn text-clr" href="registration.php?id=2">Register</a></p> </div> </div> </div> </form> </div> <!-- Customer form --> </div> <!-- tab content --> </div> <!-- Form --> </div> </div> </div> </body> </html> <?php include_once("scriptsLinks.php");?> <script> // const togglePassword = document.querySelector('#togglePassword'); // const password = document.querySelector('#password'); // const togglePassword2 = document.querySelector('#togglePassword2'); // const password2= document.querySelector('#customerPassword'); // togglePassword.addEventListener('click', function (e) { // // toggle the type attribute // const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; // password.setAttribute('type', type); // // toggle the eye slash icon // this.classList.toggle('fa-eye-slash'); // }); // togglePassword2.addEventListener('click', function (e) { // // toggle the type attribute // const type = password2.getAttribute('type') === 'password' ? 'text' : 'password'; // password2.setAttribute('type', type); // // toggle the eye slash icon // this.classList.toggle('fa-eye-slash'); // }); $(document).on('click', '#togglePassword', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#password"); input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password') }); $(document).on('click', '#togglePassword2', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#customerPassword"); input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password') }); $(".nav-link").click(function() { if ($('.b-customer').hasClass('active')) { $('.b-customer img').attr('src', 'images/Business.png'); $('.i-customer img').attr('src', 'images/Individual-selected.png'); } else { $('.b-customer img').attr('src', 'images/Business_select.png'); $('.i-customer img').attr('src', 'images/Individual.png'); } }); $("#owner").click(function() { $("p#field1").html("Business Login"); $("#owner_div").show(); $("#customer_div").hide(); }); $("#customer").click(function() { $("p#field1").html("Individual Login"); $("#owner_div").hide(); $("#customer_div").show(); }); $(document).ready(function() { let searchParams = new URLSearchParams(window.location.search) let type = searchParams.get("id") if (type == 2) { $("#customer").click(); $('.b-customer img').attr('src', 'images/Business.png'); $('.i-customer img').attr('src', 'images/Individual-selected.png'); } else { $("#owner").click(); $('.b-customer img').attr('src', 'images/Business_select.png'); $('.i-customer img').attr('src', 'images/Individual.png'); } }) </script>