mostly working

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">