JezK
Edit File: index.php
<?php session_start(); ?> <!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="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> <script src="js/validations.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 position-relative"> <p class="login-bg m-0"></p> <img src="images/loginlogo.png" class="logo-cls-masteradmin"> </div> <!--form --> <div class="col-md-6 h-100 bg-white pt-5"> <div class="justify-content-center h-100"> <div class="row d-flex justify-content-center"><div class=""> <p class="text-center text-clr-blue">Login</p> </div></div> <!-- button --> <!-- <div class="row d-flex justify-content-center"> <div class="offset-md-2 col-md-8 col-8"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#owner" ><span class="pr-2"><img src="images/owner_unselect.png" alt="owner"></span>Login as a Owner</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#customer"><span class="pr-2"><img src="images/customer_ubselect.png" alt="owner"></span>Login as a Customer</a> </li> </ul> </div> </div> --> <!-- button --> <!-- tab content --> <div class="tab-content"> <!-- owner form --> <div id="owner" class="container tab-pane active"><br> <form class="form" action="app/loginapp.php" method="post"> <div class="log-body"> <div style="color: #F00;text-align: center;"><?php if(isset($_SESSION['msg'])){ echo $_SESSION['msg']; } unset($_SESSION['msg']);?></div> <div class="row h-100 ml-3"> <div class="col-md-12 mb-4 pr-0"> <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" autofocus="" required=""> </div> <div class="error email_error"></div> </div> <div class="col-md-12 mb-1 pr-0"> <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" required> <i class="fa fa-eye 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 pr-0"> <a href="forgetpassword.php" class="forgot-txt">Forgot Password?</a> </div> <div class="col-md-12 mb-4 pr-0 py-2"> <input type="submit" name="loginRequest" value="Login" class="btn btn-primary w-100 btn-login py-2" onclick="return validateLogin();"/> </div> <!-- <div class="col-md-12 mb-4 pr-0"> <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" class="container tab-pane"><br> <form class="form" action="app/loginapp.php" method="post"> <div class="log-body"> <div class="row h-100 ml-3"> <div class="col-md-12 mb-4 pr-0"> <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="name@domain.com" autofocus="" > </div> <div class="error email_error"></div> </div> <div class="col-md-12 mb-1 pr-0"> <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="•••••••"> <i class="fa fa-eye icon icon-display" id="togglePassword2"></i> <div class="error password_error"></div> </div> </div> <div class="col-md-12 text-right mb-4 pr-0"> <a href="" class="forgot-txt">Forgot Password?</a> </div> <div class="col-md-12 mb-4 pr-0 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 pr-0"> <p class="acct-txt">Don't have an account? <a class="register-btn text-clr" href="registration.php">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'); }); if($('.nav-link').hasClass('active')) { $('.active img').attr('src','images/owner_select.png'); } else { $('.active img').attr('src','images/owner_unselect.png'); } </script>