va-tracker-middleware/views/forgot_password.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DocVA | Reset Password</title>

    <style>
        :root[data-theme="light"] {
            --bg: #ffffff;
            --text: #111827;
            --card-bg: #ffffff;
            --border: #e5e7eb;
            --btn-bg: #0a0a8f;
            --btn-text: #ffffff;
        }

        :root[data-theme="dark"] {
            --bg: #121212;
            --text: #f9fafb;
            --card-bg: #1e1e1e;
            --border: #334155;
            --btn-bg: #3b82f6;
            --btn-text: #ffffff;
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: "Inter", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            text-align: center;
            width: 100%;
            max-width: 380px;
        }

        .logo {
            width: 170px;
            margin-bottom: 1.5rem;
            transition: opacity 0.3s;
        }

        .card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: background 0.3s, border-color 0.3s;
        }

        h2 {
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 1rem;
        }

        input {
            box-sizing: border-box;
            width: 100%;
            padding: 0.8rem;
            margin-bottom: 1.2rem;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: #fff;
            color: #111;
            font-size: 0.9rem;
            transition: border 0.3s;
        }

        :root[data-theme="dark"] input {
            background: #0f172a;
            color: #fff;
            border: 1px solid #475569;
        }

        button {
            width: 100%;
            background: var(--btn-bg);
            color: var(--btn-text);
            border: none;
            padding: 0.8rem;
            border-radius: 8px;
            font-size: 0.95rem;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        button:hover {
            opacity: 0.9;
        }

        a {
            display: block;
            margin-top: 1rem;
            font-size: 0.85rem;
            color: var(--text);
            text-decoration: none;
            opacity: 0.8;
        }

        a:hover {
            opacity: 1;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>DocTracker</h2>
        <form class="card">
            <h2>Reset your password</h2>
            <input type="email" placeholder="Enter your email address*" required />
            <button type="submit">Send password reset code</button>
            <a href="/client/login">Go back to login</a>
        </form>
    </div>

    <script>
        (function () {
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
            const logo = document.getElementById("logo");

            function applyTheme(isDark) {
                const theme = isDark ? "dark" : "light";
                document.documentElement.setAttribute("data-theme", theme);
                // logo.src = isDark ? "/public/images/logo-white-vertical.svg" : "/public/images/logo-colored-vertical.svg";
            }

            // Initial set
            applyTheme(prefersDark.matches);

            // Watch for changes
            prefersDark.addEventListener("change", (e) => applyTheme(e.matches));
        })();


        document.addEventListener("DOMContentLoaded", () => {
            const form = document.querySelector(".card"); // assuming .card wraps your form elements
            const emailInput = form.querySelector("input[type='email']");
            const button = form.querySelector("button");

            form.addEventListener("submit", async (e) => {
                e.preventDefault();

                const email = emailInput.value.trim();
                if (!email) {
                    alert("Please enter your email address.");
                    return;
                }

                button.disabled = true;
                button.textContent = "Sending...";

                try {
                    const response = await fetch("/api/v1/client/forgot-password", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({ email }),
                    });

                    const data = await response.json();

                    if (response.ok) {
                        if(confirm('Please Check your mail inbox for password reset link')) {
                            window.location.href = "/client/login"; // Redirect to reset password page
                        }
                    } else {
                        alert("❌ " + (data.message || "Failed to send reset link."));
                    }
                } catch (err) {
                    console.error("Error:", err);
                    alert("Something went wrong. Please try again later.");
                } finally {
                    button.disabled = false;
                    button.textContent = "Send password reset code";
                }
            });
        });
    </script>
</body>

</html>