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

"use client"; // Mark as a Client Component
import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";

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

  const handleRegister = async (e) => {
    e.preventDefault();

    // Basic validation
    if (!username || !password) {
      setError("Username and password are required");
      return;
    }

    setIsLoading(true);
    setError("");

    try {
      // First register the user
      const response = await fetch("/api/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });

      const result = await response.json();

      if (!response.ok) {
        setError(result.error || "Failed to register");
        setIsLoading(false);
        return;
      }

      // Then try to sign in
      const signInResult = await signIn("credentials", {
        redirect: false,
        username,
        password,
        callbackUrl: "/team-selection",
      });

      if (signInResult?.error) {
        setError(`Login failed: ${signInResult.error}`);
        setIsLoading(false);
      } else {
        // Successful login
        router.push(signInResult?.url || "/team-selection");
      }
    } catch (err) {
      console.error("Registration/login error:", err);
      setError("An unexpected error occurred. Please try again.");
      setIsLoading(false);
    }
  };

  return (
    <div className="auth-page">
      {/* Decorative square */}
      <div className="decorative-square"></div>

      <div className="auth-container">
        <div className="auth-card">
          <h2>Register for Treasure Hunt</h2>
          <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
            onClick={handleRegister}
            className="auth-button"
            disabled={isLoading}
          >
            {isLoading ? "Registering..." : "Register"}
          </button>
          <Link href="/login">
            <button className="auth-button">Log In</button>
          </Link>
        </div>
      </div>

      <style jsx>{`
        .auth-page {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          overflow: hidden;
          background-image: url("/images/decor.svg");
          background-size: auto 100%;
          background-repeat: repeat-x;
          background-position: center;
          background-color: #f4e9dc;
        }
        .auth-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          max-width: 400px;
          padding: 20px;
          box-sizing: border-box;
        }
        .auth-card {
          background-color: #fff;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .input-container {
          margin-bottom: 10px;
        }
        .auth-input {
          width: 100%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
        .auth-button {
          width: 100%;
          padding: 10px;
          margin-top: 10px;
          background-color: #68543c; /* Dark brown */
          color: white;
          font-size: 16px;
          border: none;
          border-radius: 4px;
          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;
        }
        .decorative-square {
          position: absolute;
          top: calc(50% - 240px);
          left: calc(50% + 95px);
          width: 150px;
          height: 150px;
          background-image: url("/images/pirate-hat.svg");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 4px;
          z-index: 2;
        }
      `}</style>
    </div>
  );
}