peworkshop/app/(auth)/login/page.js

"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();

  const handleLogin = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError("");

    try {
      console.log("Attempting to sign in with:", username);

      const result = await signIn("credentials", {
        redirect: false,
        username,
        password,
        callbackUrl: `${window.location.origin}/team-selection`,
      });

      console.log("Sign in result:", result);

      if (result?.error) {
        throw new Error(result.error);
      }

      if (result?.ok) {
        console.log("Sign in successful, redirecting...");
        // Use router.push with { replace: true } to avoid history issues
        router.push("/team-selection", { replace: true });
        return;
      }
    } catch (error) {
      console.error("Login error:", error);
      setError(error.message || "Failed to login. Please try again.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <div className="auth-container">
        <div className="auth-card">
          <h2>Login to Treasure Hunt</h2>
          <form onSubmit={handleLogin} className="loginForm">
            <div className="input-container">
              <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
                className="auth-input"
              />
            </div>
            <div className="input-container">
              <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                className="auth-input"
              />
            </div>
            {error && <div className="error-message">{error}</div>}
            <button type="submit" className="auth-button" disabled={isLoading}>
              {isLoading ? "Logging in..." : "Login"}
            </button>
          </form>

          {/* Add separate div for register button with margin-top */}
          <div className="register-button-container">
            <Link href="/register">
              <button className="auth-button register-button">Register</button>
            </Link>
          </div>
        </div>
      </div>

      {/* Update styles to include spacing between buttons */}
      <style jsx>{`
        .auth-card {
          background-color: #fff;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .loginForm {
          display: flex;
          flex-direction: column;
          width: 100%;
          margin-bottom: 8px; /* Reduced margin below the form (was 15px) */
        }
        .input-container {
          margin-bottom: 10px; /* Add consistent spacing between input fields */
        }
        .register-button-container {
          margin-top: 5px; /* Reduced margin above register button (was 10px) */
        }
        .auth-button {
          padding: 10px;
          border: none;
          border-radius: 4px;
          background-color: #68543c; /* Dark brown */
          color: white;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s;
        }
        .auth-button:hover {
          background-color: #53402d; /* Darker brown on hover */
        }
        .auth-button:disabled {
          background-color: #cccccc;
          cursor: not-allowed;
        }
        .error-message {
          color: #e53935;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 0.875rem;
        }
      `}</style>
    </div>
  );
}