codey.lol/src/components/Login.jsx

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

export default function LoginPage() {
    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) {
                setLoading(false);
                return toast.error("Username is required");
            }
            if (!password) {
                setLoading(false);
                return toast.error("Password is required");
            }

            const formData = new URLSearchParams();
            formData.append("username", username);
            formData.append("password", password);
            formData.append("grant_type", "password");
            formData.append("scope", "");
            formData.append("client_id", "");
            formData.append("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");
                setLoading(false);
                return;
            }

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

            const data = await resp.json();
            if (data.access_token) {
                toast.success("Login successful!");
                window.location.href = "/TRip"; // TODO: fix, hardcoded
            } else {
                toast.error("Login failed: no access token received");
                setLoading(false);
            }
        } catch (error) {
            toast.error("Network error during login");
            console.error("Login error:", error);
            setLoading(false);
        }
    }

    return (
        <div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-10">
            <div className="max-w-md w-full bg-white dark:bg-[#1E1E1E] rounded-2xl shadow-xl px-10 pb-6">
                <h2 className="flex flex-col items-center text-3xl font-semibold text-gray-900 dark:text-white mb-8 font-sans">
                    <img className="logo-auth mb-4" src="/images/kode.png" alt="Logo" />
                    Authentication Required
                </h2>

                <form className="space-y-6 relative" onSubmit={handleSubmit} noValidate>
                    {/* Username */}
                    <div className="relative">
                        <input
                            type="text"
                            id="username"
                            name="username"
                            autoComplete="off"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                            disabled={loading}
                            className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                        <label
                            htmlFor="username"
                            className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
              peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
              peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
                        >
                            Username
                        </label>
                    </div>

                    {/* Password */}
                    <div className="relative">
                        <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="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                        <label
                            htmlFor="password"
                            className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
              peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
              peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
                        >
                            Password
                        </label>
                    </div>

                    <button
                        type="submit"
                        disabled={loading}
                        className={`w-full py-3 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 text-white rounded-lg font-semibold shadow-md transition-colors ${loading ? "opacity-60 cursor-not-allowed" : ""
                            }`}
                    >
                        {loading ? "Signing In..." : "Sign In"}
                    </button>
                </form>
            </div>
        </div>
    );
}