<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset User Password</title>
    <!-- Consider adding a link to a CSS file for styling -->
</head>
<body>
    <h1>Reset User Password</h1>
    
    <form id="reset-password-form" action="/admin_reset_password" method="post">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" required><br>
    
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>
    
        <label for="retype_password">Retype Password:</label>
        <input type="password" id="retype_password" name="retype_password" required><br>
    
        <!-- Error Messages -->
        <p id="email-error" style="color: red;"></p>
        <p id="password-error" style="color: red;"></p>

        <button onclick="window.location.href='/dashboard'" style="background-color: white; color: black;">Return to Dashboard</button>
        <button type="submit" style="background-color: green; color: white;">Reset Password</button>
    </form>

    <script>
        // Function to check for any errors in the URL and display appropriate messages
        function checkURLForErrors() {
            const url = new URL(window.location.href);
            const error = url.searchParams.get("error");

            // Reset previous error messages
            document.getElementById("email-error").innerText = "";
            document.getElementById("password-error").innerText = "";

            // Display error messages based on URL
            if (error) {
                if (error === "email") {
                    document.getElementById("email-error").innerText = "Email doesn't exist.";
                } 
                if (error === "password") {
                    document.getElementById("password-error").innerText = "Passwords don't match.";
                }
            }
        }

        // Check for errors on initial page load
        checkURLForErrors();

        // Listen for changes to the URL (e.g., after a form submission that redirects)
        window.addEventListener('popstate', checkURLForErrors);
    </script>
    
</body>
</html>
