codey.lol/src/components/Login.jsx

import React, { useState, useRef, useEffect } from "react";
import Button from "@mui/joy/Button";
import { toast } from "react-toastify";
import { API_URL } from "@/config";

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
    return null;
}

function clearCookie(name) {
    document.cookie = `${name}=; Max-Age=0; path=/;`;
}

export default function LoginPage({ loggedIn = false, accessDenied = false, requiredRoles = [] }) {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [loading, setLoading] = useState(false);

    const passwordRef = useRef();

    useEffect(() => {
        if (passwordRef.current && password === "") {
            passwordRef.current.value = "";
        }
    }, []);

    async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        try {
            if (!username || !password) {
                setLoading(false);
                if (!toast.isActive("login-missing-data-toast")) {
                    toast.error("Username and password are required", {
                        toastId: "login-missing-data-toast",
                    });
                }
                return;
            }

            const formData = new URLSearchParams({
                username,
                password,
                grant_type: "password",
                scope: "",
                client_id: "",
                client_secret: "",
            });

            const resp = await fetch(`${API_URL}/auth/login`, {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                credentials: "include",
                body: formData.toString(),
            });

            if (resp.status === 401) {
                toast.error("Invalid username or password", {
                    toastId: "login-error-invalid-toast",
                });
                setLoading(false);
                return;
            }

            if (!resp.ok) {
                const data = await resp.json().catch(() => ({}));
                toast.error(data.detail ? `Login failed: ${data.detail}` : "Login failed", {
                    toastId: "login-error-failed-toast",
                });
                setLoading(false);
                return;
            }

            const data = await resp.json();
            if (data.access_token) {
                toast.success("Login successful!", {
                    toastId: "login-success-toast",
                });
                // Check for returnUrl in query params
                const urlParams = new URLSearchParams(window.location.search);
                const returnUrl = urlParams.get('returnUrl');
                // Validate returnUrl is a relative path (security: prevent open redirect)
                const returnTo = (returnUrl && returnUrl.startsWith('/')) ? returnUrl : '/';
                window.location.href = returnTo;
            } else {
                toast.error("Login failed: no access token received", {
                    toastId: "login-error-no-token-toast",
                });
                setLoading(false);
            }
        } catch (error) {
            toast.error("Network error during login", {
                toastId: "login-error-network-toast",
            });
            console.error("Login error:", error);
            setLoading(false);
        }
    }

    if (loggedIn) {
        const rolesList = Array.isArray(requiredRoles) ? requiredRoles : (requiredRoles ? requiredRoles.split(',') : []);
        return (
            <div className="flex items-center justify-center px-4 py-16">
                <div className="max-w-md w-full bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-xl shadow-neutral-900/5 dark:shadow-black/30 border border-neutral-200/60 dark:border-neutral-800/60 px-10 py-8 text-center">
                    <img className="logo-auth mx-auto mb-5" src="/images/zim.png" alt="Logo" />
                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-3 tracking-tight">Access Denied</h2>
                    <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
                        You don't have permission to access this resource.
                    </p>
                    {rolesList.length > 0 && (
                        <div className="mb-5 p-3 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200/60 dark:border-neutral-700/60">
                            <p className="text-sm text-neutral-500 dark:text-neutral-500 mb-2 font-medium">Required role{rolesList.length > 1 ? 's' : ''}:</p>
                            <div className="flex flex-wrap justify-center gap-2">
                                {rolesList.map((role, i) => (
                                    <span key={i} className="px-2.5 py-1 text-xs font-semibold bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 rounded-full">
                                        {role}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}
                    <p className="text-xs italic text-neutral-400 dark:text-neutral-500 mb-5">
                        If you believe this is an error, scream at codey.
                    </p>
                    <Button
                        className="w-full py-2.5 px-6 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 font-semibold rounded-xl hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors shadow-sm"
                        color="primary"
                        variant="solid"
                        onClick={() => (window.location.href = "/")}
                    >
                        Go Home
                    </Button>
                </div>
            </div>
        );
    }

    return (
        <div className="flex items-center justify-center px-4 py-16">
            <div className="max-w-md w-full bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-xl shadow-neutral-900/5 dark:shadow-black/30 border border-neutral-200/60 dark:border-neutral-800/60 px-10 py-8">
                <div className="text-center mb-8">
                    <img className="logo-auth mx-auto mb-4" src="/images/zim.png" alt="Logo" />
                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white tracking-tight">
                        Log In
                    </h2>
                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
                        Sign in to continue
                    </p>
                </div>

                <form className="space-y-5" onSubmit={handleSubmit} noValidate>
                    <div className="space-y-2">
                        <label htmlFor="username" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                            Username
                        </label>
                        <input
                            type="text"
                            id="username"
                            name="username"
                            autoComplete="off"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                            disabled={loading}
                            className="w-full border border-neutral-200 dark:border-neutral-700 rounded-xl px-4 py-3 bg-white dark:bg-neutral-900/50 text-neutral-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-all outline-none"
                            placeholder="Enter your username"
                        />
                    </div>

                    <div className="space-y-2">
                        <label htmlFor="password" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                            Password
                        </label>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            autoComplete="new-password"
                            spellCheck="false"
                            ref={passwordRef}
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                            disabled={loading}
                            className="w-full border border-neutral-200 dark:border-neutral-700 rounded-xl px-4 py-3 bg-white dark:bg-neutral-900/50 text-neutral-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-all outline-none"
                            placeholder="Enter your password"
                        />
                    </div>

                    <div className="pt-2">
                        <button
                            type="submit"
                            disabled={loading}
                            className={`w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-500/30 text-white rounded-xl font-semibold shadow-sm transition-all ${loading ? "opacity-60 cursor-not-allowed" : ""}`}
                        >
                            {loading ? "Signing In..." : "Sign In"}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}