<script>
    function login() {
        const email = document.getElementById("login_email").value;
        const password = document.getElementById("login_password").value;
        doLogin(email, password);
    }

    function doLogin(email, password) {
        const data = new URLSearchParams();
        data.append("action", "login");
        data.append("email", email);
        data.append("password", password);

        doAccountAction(data, "Login Successful!", "Login failed. Please check your credentials.");
    }

    function register() {
        const firstName = document.getElementById("register_firstName").value;
        const lastName = document.getElementById("register_lastName").value;
        const email = document.getElementById("register_email").value;
        const password = document.getElementById("register_password").value;
        const activationToken = document.getElementById("register_activationToken").value;

        const data = new URLSearchParams();
        data.append("action", "register");
        data.append("firstname", firstName);
        data.append("lastname", lastName);
        data.append("email", email);
        data.append("password", password);
        data.append("activation_token", activationToken);

        doRegister(data);
    }

    function doRegister(requestData) {
        doAccountAction(requestData, "Registration Successful!", "Registration failed.");
    }

</script>

<!-- Centralized Status Message -->
<p id="StatusMessage"></p>

<div class="form-container" id="loginForm">
    <h1>Login</h1>
    <form>
        <label for="login_email">Email:</label>
        <input type="email" id="login_email" name="email" required><br>

        <label for="login_password">Password:</label>
        <input type="password" id="login_password" name="password" required><br>

        <button type="button" onclick="login()">Login</button>
    </form>
</div>

<div class="form-container" id="register_Form">
    <h1>Register</h1>
    <form>
        <label for="register_firstName">First Name:</label>
        <input type="text" id="register_firstName" name="firstName" required><br>

        <label for="register_lastName">Last Name:</label>
        <input type="text" id="register_lastName" name="lastName" required><br>

        <label for="register_email">Email:</label>
        <input type="email" id="register_email" name="email" required><br>

        <label for="register_password">Password:</label>
        <input type="password" id="register_password" name="password" required><br>

        <label for="register_activationToken">Activation Token:</label>
        <input type="text" id="register_activationToken" name="activationToken" required><br>

        <button type="button" onclick="register()">Register</button>
    </form>
</div>