fixed a bit of stuff the current but API is broken again for logging in so will be fixing that with the next push

app/(auth)/login/login.module.css

@@ -0,0 +1,44 @@
+/* Login page specific styles */
+.loginForm {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 8px; /* Reduced spacing (was 15px) */
+}
+
+.input-container {
+  margin-bottom: 10px; /* Add consistent spacing between input fields */
+}
+
+.errorMessage {
+  color: #e53935;
+  margin-top: 10px;
+  margin-bottom: 10px; /* Add space after error message */
+  font-size: 0.875rem;
+}
+
+.register-button-container {
+  margin-top: 5px; /* Reduced spacing (was 10px) */
+}
+
+.auth-button {
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  background-color: #68543c; /* Changed back to 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;
+}
+
+/* You can also add other component-specific styles here */

app/(auth)/login/page.js

@@ -1,4 +1,5 @@
 "use client";
+
 import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
@@ -19,84 +20,39 @@ export default function Login() {
     try {
       console.log("Attempting to sign in with:", username);
 
-      // First try using the NextAuth signIn method
-      try {
-        const result = await signIn("credentials", {
-          redirect: false,
-          username,
-          password,
-          callbackUrl: "/team-selection",
-        });
+      const result = await signIn("credentials", {
+        redirect: false,
+        username,
+        password,
+        callbackUrl: `${window.location.origin}/team-selection`,
+      });
 
-        if (result?.error) {
-          throw new Error(result.error);
-        }
+      console.log("Sign in result:", result);
 
-        // If the user has a team, redirect directly to the team page
-        if (result?.url) {
-          // Extract the teamId from the URL or session data if available
-          // This part depends on how your auth system returns the result
-          router.push(`/${session?.user?.teamId || ""}`);
-        } else {
-          // Otherwise go to team selection
-          router.push("/team-selection");
-        }
-        return;
-      } catch (signInError) {
-        console.error("Error with signIn method:", signInError);
-        console.log("Falling back to direct API call");
-
-        // Fall back to direct fetch approach with explicit JSON content-type
-        const loginResponse = await fetch("/api/auth/callback/credentials", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            username,
-            password,
-            callbackUrl: "/team-selection",
-          }),
-          credentials: "include", // Important for cookie handling
-        });
-
-        if (!loginResponse.ok) {
-          const errorData = await loginResponse
-            .json()
-            .catch(() => ({ error: "Failed to parse error response" }));
-          throw new Error(
-            errorData.error ||
-              `Login failed with status ${loginResponse.status}`
-          );
-        }
-
-        // On successful login
-        const userData = await loginResponse
-          .json()
-          .catch(() => ({ url: "/team-selection" }));
-
-        // Allow time for cookie to be set
-        setTimeout(() => {
-          router.push(userData.url || "/team-selection");
-        }, 100);
+      if (result?.error) {
+        throw new Error(result.error);
       }
-    } catch (err) {
-      setError(err.message || "An unexpected error occurred");
-      console.error("Login error:", err);
+
+      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="page-header">
-        <div className="page-title">Login</div>
-        <div className="placeholder"></div>
-      </div>
-
       <div className="auth-container">
         <div className="auth-card">
-          <form onSubmit={handleLogin}>
+          <h2>Login to Treasure Hunt</h2>
+          <form onSubmit={handleLogin} className="loginForm">
             <div className="input-container">
               <input
                 type="text"
@@ -119,64 +75,61 @@ export default function Login() {
             </div>
             {error && <div className="error-message">{error}</div>}
             <button type="submit" className="auth-button" disabled={isLoading}>
-              {isLoading ? "Logging in..." : "Log In"}
+              {isLoading ? "Logging in..." : "Login"}
             </button>
           </form>
-          <Link href="/register">
-            <button className="auth-button">Register</button>
-          </Link>
+
+          {/* 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-page {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          height: 100vh;
-          overflow: hidden;
-        }
-        .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 {
-          width: 100%;
-          padding: 20px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          border-radius: 8px;
           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;
+          margin-bottom: 10px; /* Add consistent spacing between input fields */
         }
-        .auth-input {
-          width: 100%;
-          padding: 10px;
-          border: 1px solid #ccc;
-          border-radius: 4px;
+        .register-button-container {
+          margin-top: 5px; /* Reduced margin above register button (was 10px) */
         }
         .auth-button {
-          width: 100%;
           padding: 10px;
-          margin-top: 10px;
-          background-color: #68543c; /* Updated brown color */
-          color: white;
           border: none;
           border-radius: 4px;
+          background-color: #68543c; /* Dark brown */
+          color: white;
+          font-size: 16px;
           cursor: pointer;
-          text-align: center;
+          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: red;
+          color: #e53935;
           margin-top: 10px;
+          margin-bottom: 10px;
+          font-size: 0.875rem;
         }
       `}</style>
     </div>