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="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>

<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>
                    
                    <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>

<div class="tab-content">

<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">

<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 ">
                                            <p class="acct-txt">Don't have an account? &nbsp;&nbsp; <span><a
                                                        href="registration.php" class="register-btn">Register</a></span>
                                            </p>
                                        </div>

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

<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 ">
                                            <p class="acct-txt">Don't have an account? &nbsp;&nbsp; <a
                                                    class="register-btn text-clr"
                                                    href="registration.php?id=2">Register</a></p>
                                        </div>

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

</div>

</div>
                
            </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>