mostly working

2026-01-07 17:53:21 -05:00
parent 5b0f6dba0f
commit 6a934880f9
13 changed files with 772 additions and 188 deletions
--- a/src/routes/api/auth/email-login-callback.ts
+++ b/src/routes/api/auth/email-login-callback.ts
@@ -1,6 +1,7 @@
 import type { APIEvent } from "@solidjs/start/server";
 import { appRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/utils";
+import { getResponseHeaders } from "vinxi/http";

 export async function GET(event: APIEvent) {
  const url = new URL(event.request.url);
@@ -8,53 +9,116 @@ export async function GET(event: APIEvent) {
  const token = url.searchParams.get("token");
  const rememberMeParam = url.searchParams.get("rememberMe");

+  console.log("[Email Login Callback] Request received:", {
+    email,
+    hasToken: !!token,
+    tokenLength: token?.length,
+    rememberMeParam
+  });
+
  // Parse rememberMe parameter
  const rememberMe = rememberMeParam === "true";

  if (!email || !token) {
+    console.error("[Email Login Callback] Missing required parameters:", {
+      hasEmail: !!email,
+      hasToken: !!token
+    });
    return new Response(null, {
      status: 302,
-      headers: { Location: "/login?error=missing_params" },
+      headers: { Location: "/login?error=missing_params" }
    });
  }

  try {
+    console.log("[Email Login Callback] Creating tRPC caller...");
    // Create tRPC caller to invoke the emailLogin procedure
    const ctx = await createTRPCContext(event);
    const caller = appRouter.createCaller(ctx);

+    console.log("[Email Login Callback] Calling emailLogin procedure...");
    // Call the email login handler
    const result = await caller.auth.emailLogin({
      email,
      token,
-      rememberMe,
+      rememberMe
    });

+    console.log("[Email Login Callback] Login result:", result);
+
    if (result.success) {
+      console.log(
+        "[Email Login Callback] Login successful, redirecting to:",
+        result.redirectTo
+      );
+
+      // Get the response headers that were set by the session (includes Set-Cookie)
+      const responseHeaders = getResponseHeaders(event.nativeEvent);
+      console.log(
+        "[Email Login Callback] Response headers from event:",
+        Object.keys(responseHeaders)
+      );
+
+      // Create redirect response with the session cookie
+      const redirectUrl = result.redirectTo || "/account";
+      const headers = new Headers({
+        Location: redirectUrl
+      });
+
+      // Copy Set-Cookie headers from the session response
+      if (responseHeaders["set-cookie"]) {
+        const cookies = Array.isArray(responseHeaders["set-cookie"])
+          ? responseHeaders["set-cookie"]
+          : [responseHeaders["set-cookie"]];
+
+        console.log("[Email Login Callback] Found cookies:", cookies.length);
+        cookies.forEach((cookie) => {
+          headers.append("Set-Cookie", cookie);
+          console.log(
+            "[Email Login Callback] Adding cookie:",
+            cookie.substring(0, 50) + "..."
+          );
+        });
+      } else {
+        console.error("[Email Login Callback] NO SET-COOKIE HEADER FOUND!");
+        console.error("[Email Login Callback] All headers:", responseHeaders);
+      }
+
      return new Response(null, {
        status: 302,
-        headers: { Location: result.redirectTo || "/account" },
+        headers
      });
    } else {
+      console.error(
+        "[Email Login Callback] Login failed (result.success=false)"
+      );
      return new Response(null, {
        status: 302,
-        headers: { Location: "/login?error=auth_failed" },
+        headers: { Location: "/login?error=auth_failed" }
      });
    }
  } catch (error) {
-    console.error("Email login callback error:", error);
-    
+    console.error("[Email Login Callback] Error caught:", error);
+
    // Check if it's a token expiration error
-    const errorMessage = error instanceof Error ? error.message : "server_error";
-    const isTokenError = errorMessage.includes("expired") || errorMessage.includes("invalid");
-    
+    const errorMessage =
+      error instanceof Error ? error.message : "server_error";
+    const isTokenError =
+      errorMessage.includes("expired") || errorMessage.includes("invalid");
+
+    console.error("[Email Login Callback] Error details:", {
+      errorMessage,
+      isTokenError,
+      errorType: error instanceof Error ? error.constructor.name : typeof error
+    });
+
    return new Response(null, {
      status: 302,
-      headers: { 
-        Location: isTokenError 
-          ? "/login?error=link_expired" 
-          : "/login?error=server_error" 
-      },
+      headers: {
+        Location: isTokenError
+          ? "/login?error=link_expired"
+          : "/login?error=server_error"
+      }
    });
  }
 }
--- a/src/routes/contact.tsx
+++ b/src/routes/contact.tsx
@@ -419,7 +419,6 @@ export default function ContactPage() {
                      initialRemainingTime={remainingTime()}
                      size={48}
                      strokeWidth={6}
-                      colors={"#60a5fa"}
                      onComplete={() => setRemainingTime(0)}
                    >
                      {renderTime}
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -1,24 +1,31 @@
-import { createSignal, createEffect, onCleanup, Show } from "solid-js";
+import { createSignal, createEffect, onCleanup, onMount, Show } from "solid-js";
 import {
  A,
  useNavigate,
  useSearchParams,
  redirect,
-  query
+  query,
+  createAsync
 } from "@solidjs/router";
 import { PageHead } from "~/components/PageHead";
 import { revalidateAuth } from "~/lib/auth-query";
-import { getEvent } from "vinxi/http";
+import { getEvent, getCookie } from "vinxi/http";
 import GoogleLogo from "~/components/icons/GoogleLogo";
 import GitHub from "~/components/icons/GitHub";
 import CountdownCircleTimer from "~/components/CountdownCircleTimer";
 import { isValidEmail, validatePassword } from "~/lib/validation";
 import { getClientCookie } from "~/lib/cookies.client";
 import { env } from "~/env/client";
-import { VALIDATION_CONFIG, COUNTDOWN_CONFIG } from "~/config";
+import {
+  VALIDATION_CONFIG,
+  COUNTDOWN_CONFIG,
+  COOLDOWN_TIMERS,
+  AUTH_CONFIG
+} from "~/config";
 import Input from "~/components/ui/Input";
 import PasswordInput from "~/components/ui/PasswordInput";
 import { Button } from "~/components/ui/Button";
+import { useCountdown } from "~/lib/useCountdown";

 const checkAuth = query(async () => {
  "use server";
@@ -33,10 +40,36 @@ const checkAuth = query(async () => {
  return { isAuthenticated };
 }, "loginAuthCheck");

+const getLoginData = query(async () => {
+  "use server";
+  const emailLinkExp = getCookie("emailLoginLinkRequested");
+  let remainingTime = 0;
+
+  if (emailLinkExp) {
+    const expires = new Date(emailLinkExp);
+    remainingTime = Math.max(0, (expires.getTime() - Date.now()) / 1000);
+  }
+
+  return { remainingTime };
+}, "login-data");
+
 export const route = {
  load: () => checkAuth()
 };

+// Helper to convert expiry string to human-readable format
+function expiryToHuman(expiry: string): string {
+  const value = parseInt(expiry);
+  if (expiry.endsWith("m")) {
+    return value === 1 ? "1 minute" : `${value} minutes`;
+  } else if (expiry.endsWith("h")) {
+    return value === 1 ? "1 hour" : `${value} hours`;
+  } else if (expiry.endsWith("d")) {
+    return value === 1 ? "1 day" : `${value} days`;
+  }
+  return expiry;
+}
+
 export default function LoginPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
@@ -44,55 +77,59 @@ export default function LoginPage() {
  const register = () => searchParams.mode === "register";
  const usePassword = () => searchParams.auth === "password";

+  // Load server data using createAsync
+  const loginData = createAsync(() => getLoginData(), {
+    deferStream: true
+  });
+
  const [error, setError] = createSignal("");
  const [loading, setLoading] = createSignal(false);
-  const [countDown, setCountDown] = createSignal(0);
  const [emailSent, setEmailSent] = createSignal(false);
+  const [loginCode, setLoginCode] = createSignal("");
+  const [codeError, setCodeError] = createSignal("");
+  const [codeLoading, setCodeLoading] = createSignal(false);
  const [showPasswordError, setShowPasswordError] = createSignal(false);
  const [showPasswordSuccess, setShowPasswordSuccess] = createSignal(false);
  const [passwordsMatch, setPasswordsMatch] = createSignal(false);
  const [password, setPassword] = createSignal("");
  const [passwordConf, setPasswordConf] = createSignal("");
+  const [jsEnabled, setJsEnabled] = createSignal(false);

  let emailRef: HTMLInputElement | undefined;
  let passwordRef: HTMLInputElement | undefined;
  let passwordConfRef: HTMLInputElement | undefined;
  let rememberMeRef: HTMLInputElement | undefined;
-  let timerInterval: number | undefined;

  const googleClientId = env.VITE_GOOGLE_CLIENT_ID;
  const githubClientId = env.VITE_GITHUB_CLIENT_ID;
  const domain = env.VITE_DOMAIN || "https://www.freno.me";

-  const calcRemainder = (timer: string) => {
-    const expires = new Date(timer);
-    const remaining = expires.getTime() - Date.now();
-    const remainingInSeconds = remaining / 1000;
+  const { remainingTime, startCountdown, setRemainingTime } = useCountdown();

-    if (remainingInSeconds <= 0) {
-      setCountDown(0);
-      if (timerInterval) {
-        clearInterval(timerInterval);
-      }
-    } else {
-      setCountDown(remainingInSeconds);
-    }
-  };
+  onMount(() => {
+    setJsEnabled(true);
+  });

  createEffect(() => {
-    const timer = getClientCookie("emailLoginLinkRequested");
-    if (timer) {
-      timerInterval = setInterval(
-        () => calcRemainder(timer),
-        1000
-      ) as unknown as number;
+    // Try server data first (more accurate)
+    const serverData = loginData();
+    if (serverData?.remainingTime && serverData.remainingTime > 0) {
+      const expirationTime = new Date(
+        Date.now() + serverData.remainingTime * 1000
+      );
+      startCountdown(expirationTime);
+      return;
    }

-    onCleanup(() => {
-      if (timerInterval) {
-        clearInterval(timerInterval);
+    // Fall back to client cookie if server data not available yet
+    const timer = getClientCookie("emailLoginLinkRequested");
+    if (timer) {
+      try {
+        startCountdown(timer);
+      } catch (e) {
+        console.error("Failed to start countdown from cookie:", e);
      }
-    });
+    }
  });

  createEffect(() => {
@@ -255,16 +292,12 @@ export default function LoginPage() {

        if (response.ok && result.result?.data?.success) {
          setEmailSent(true);
-          const timer = getClientCookie("emailLoginLinkRequested");
-          if (timer) {
-            if (timerInterval) {
-              clearInterval(timerInterval);
-            }
-            timerInterval = setInterval(
-              () => calcRemainder(timer),
-              1000
-            ) as unknown as number;
-          }
+
+          // Set countdown directly - cookie might not be readable immediately
+          const expirationTime = new Date(
+            Date.now() + COOLDOWN_TIMERS.EMAIL_LOGIN_LINK_MS
+          );
+          startCountdown(expirationTime);
        } else {
          const errorMsg =
            result.error?.message ||
@@ -282,6 +315,16 @@ export default function LoginPage() {
                ? "Please wait before requesting another email link"
                : errorMsg
            );
+
+            // Start the countdown timer when rate limited
+            const timer = getClientCookie("emailLoginLinkRequested");
+            if (timer) {
+              try {
+                startCountdown(timer);
+              } catch (e) {
+                console.error("Failed to start countdown from cookie:", e);
+              }
+            }
          } else {
            setError(errorMsg);
          }
@@ -296,9 +339,10 @@ export default function LoginPage() {
  };

  const renderTime = ({ remainingTime }: { remainingTime: number }) => {
+    const time = isNaN(remainingTime) ? 0 : Math.max(0, remainingTime);
    return (
      <div class="timer">
-        <div class="value">{remainingTime.toFixed(0)}</div>
+        <div class="value">{time.toFixed(0)}</div>
      </div>
    );
  };
@@ -318,6 +362,47 @@ export default function LoginPage() {
    checkForMatch(password(), target.value);
  };

+  const handleCodeSubmit = async (e: Event) => {
+    e.preventDefault();
+    setCodeLoading(true);
+    setCodeError("");
+
+    if (!emailRef || !loginCode() || loginCode().length !== 6) {
+      setCodeError("Please enter a valid 6-digit code");
+      setCodeLoading(false);
+      return;
+    }
+
+    const email = emailRef.value;
+    const rememberMe = rememberMeRef?.checked || false;
+
+    try {
+      const response = await fetch("/api/trpc/auth.emailCodeLogin", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, code: loginCode(), rememberMe })
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result.result?.data?.success) {
+        revalidateAuth();
+        navigate("/account", { replace: true });
+      } else {
+        const errorMsg =
+          result.error?.message ||
+          result.result?.data?.message ||
+          "Invalid code";
+        setCodeError(errorMsg);
+      }
+    } catch (err: any) {
+      console.error("Code login error:", err);
+      setCodeError(err.message || "An error occurred");
+    } finally {
+      setCodeLoading(false);
+    }
+  };
+
  return (
    <>
      <PageHead
@@ -470,7 +555,11 @@ export default function LoginPage() {

            <div class="flex justify-center py-4">
              <Show
-                when={!register() && !usePassword() && countDown() > 0}
+                when={
+                  !register() &&
+                  !usePassword() &&
+                  (remainingTime() > 0 || (loginData()?.remainingTime ?? 0) > 0)
+                }
                fallback={
                  <Button type="submit" loading={loading()} class="w-36">
                    {register()
@@ -481,15 +570,25 @@ export default function LoginPage() {
                  </Button>
                }
              >
-                <CountdownCircleTimer
-                  duration={COUNTDOWN_CONFIG.EMAIL_LOGIN_LINK_DURATION_S}
-                  initialRemainingTime={countDown()}
-                  size={48}
-                  strokeWidth={6}
-                  colors="var(--color-blue)"
+                <Show
+                  when={jsEnabled()}
+                  fallback={
+                    <div class="flex items-center justify-center text-sm text-zinc-400">
+                      Please wait {Math.ceil(loginData()?.remainingTime ?? 0)}s
+                      before requesting another link
+                    </div>
+                  }
                >
-                  {renderTime}
-                </CountdownCircleTimer>
+                  <CountdownCircleTimer
+                    duration={COUNTDOWN_CONFIG.EMAIL_LOGIN_LINK_DURATION_S}
+                    initialRemainingTime={remainingTime()}
+                    size={48}
+                    strokeWidth={6}
+                    onComplete={() => setRemainingTime(0)}
+                  >
+                    {renderTime}
+                  </CountdownCircleTimer>
+                </Show>
              </Show>

              <Show when={!register() && !usePassword()}>
@@ -531,6 +630,53 @@ export default function LoginPage() {
            <Show when={emailSent()}>Email Sent!</Show>
          </div>

+          {/* Code Input Section */}
+          <Show when={emailSent() && !register() && !usePassword()}>
+            <div class="bg-surface0 text-text mx-auto mt-6 w-full max-w-md rounded-lg border p-6">
+              <h3 class="mb-2 text-center text-lg font-semibold">
+                Enter Your Code
+              </h3>
+              <p class="text-surface2 mb-2 text-center text-sm">
+                Check your email for a 6-digit code
+              </p>
+              <p class="text-surface2 mb-4 text-center text-xs italic">
+                Code expires in{" "}
+                {expiryToHuman(AUTH_CONFIG.EMAIL_LOGIN_LINK_EXPIRY)}
+              </p>
+
+              <form onSubmit={handleCodeSubmit} class="flex flex-col gap-4">
+                <div>
+                  <input
+                    type="text"
+                    value={loginCode()}
+                    onInput={(e) =>
+                      setLoginCode(
+                        e.currentTarget.value.replace(/\D/g, "").slice(0, 6)
+                      )
+                    }
+                    placeholder="000000"
+                    maxLength={6}
+                    class="text-blue mx-auto block w-48 rounded-lg border border-zinc-300 bg-white px-4 py-3 text-center text-2xl font-bold tracking-widest dark:border-zinc-600 dark:bg-zinc-900"
+                    autocomplete="off"
+                  />
+                </div>
+
+                <Show when={codeError()}>
+                  <div class="text-red text-center text-sm">{codeError()}</div>
+                </Show>
+
+                <Button
+                  type="submit"
+                  loading={codeLoading()}
+                  disabled={loginCode().length !== 6}
+                  class="mx-auto w-full"
+                >
+                  Verify Code
+                </Button>
+              </form>
+            </div>
+          </Show>
+
          <div class="rule-around text-center">Or</div>

          <div class="my-2 flex justify-center">
--- a/src/routes/login/password-reset.tsx
+++ b/src/routes/login/password-reset.tsx
@@ -238,7 +238,6 @@ export default function PasswordResetPage() {
                  duration={COUNTDOWN_CONFIG.PASSWORD_RESET_SUCCESS_DURATION_S}
                  size={200}
                  strokeWidth={12}
-                  colors="var(--color-blue)"
                  onComplete={() => false}
                >
                  {({ remainingTime }) => renderTime(remainingTime)}
--- a/src/routes/login/request-password-reset.tsx
+++ b/src/routes/login/request-password-reset.tsx
@@ -137,7 +137,6 @@ export default function RequestPasswordResetPage() {
                initialRemainingTime={remainingTime()}
                size={48}
                strokeWidth={6}
-                colors="#60a5fa"
                onComplete={() => false}
              >
                {renderTime}