AMS_airline_1 - Posts

<!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.0"> <title>Login Page</title>  <style> body { background-color: teal; /* Page background color */ color: white; /* Font color */ font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }

    .login-container {
        width: 420px;
        background: transparent;
        border: 2px solid white;
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        padding: 40px;
        text-align: center;
    }

    .input-container {
        margin: 20px 0;
        position: relative;
    }

    .input-container input {
        width: calc(100% - 40px);
        padding: 10px;
        border: none;
        border-radius: 5px;
        outline: none;
        margin-left: 30px;
        font-size: 16px;
    }

    .input-container i {
        position: absolute;
        left: 10px;
        top: 10px;
        color: white;
    }

    .login-button {
        width: 100%;
        padding: 15px;
        background-color: teal;
        border: none;
        border-radius: 70px;
        color: white;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .login-button:hover {
        background-color: black; /* On hover background color */
    }

    .error-message {
        color: red;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .register {
        margin-top: 20px;
    }

    .login-options {
        margin: 20px 0;
    }

    .login-options label {
        margin-right: 20px;
    }
</style>
<!-- Link to Boxicons -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

</head> <body> <div class="login-container"> <div id="error-message" class="error-message"></div>  <form id="loginForm"> <div class="login-options"> <label> <input type="radio" name="loginType" value="user" checked> Login as User </label> <label> <input type="radio" name="loginType" value="admin"> Login as Admin </label> </div> <div class="input-container"> <i class='bx bxs-user'></i> <input type="text" id="userId" placeholder="User ID" maxlength="5"> </div> <div class="input-container"> <i class='bx bxs-lock'></i> <input type="password" id="password" placeholder="Password" maxlength="30"> </div> <button type="button" id="loginButton" class="login-button">Login</button> </form> <div class="register"> <p>New User? <a href="register.html">Register Yourself</a></p>  </div> </div>

<!-- Internal JavaScript for form validation -->
<script>
    document.getElementById('loginButton').addEventListener('click', function () {
        var userId = document.getElementById('userId').value;
        var password = document.getElementById('password').value;
        var loginType = document.querySelector('input[name="loginType"]:checked').value; // Get login type
        var errorMessage = document.getElementById('error-message');

        // Clear the error message
        errorMessage.innerHTML = '';

        // User data (Static)
        var users = {
            "user": { "12345": "password123", "23456": "mysecretpwd", "34567": "testpass456" },
            "admin": { "11111": "adminpass1", "22222": "adminpass2", "33333": "adminpass3" }
        };

        // Validation
        if (!userId || !password) {
            errorMessage.innerHTML = "Both ID and password are required.";
            return;
        }

        if (isNaN(userId) || userId.length > 5) {
            errorMessage.innerHTML = "ID should be numeric and up to 5 digits.";
            return;
        }

        if (password.length < 6 || password.length > 30) {
            errorMessage.innerHTML = "Password must be between 6 and 30 characters.";
            return;
        }

        // Login Logic based on user type
        if (users[loginType][userId] === undefined) {
            errorMessage.innerHTML = "ID not valid";
        } else if (users[loginType][userId] !== password) {
            errorMessage.innerHTML = "Password not valid";
        } else {
            // Successful login - redirect to the appropriate Home Page based on user type
            if (loginType === "user") {
                window.location.href = "home_user.html"; // Replace with the actual home page URL for users
            } else if (loginType === "admin") {
                window.location.href = "home_admin.html"; // Replace with the actual home page URL for admins
            }
        }
    });
</script>

</body> </html>