env validation

2025-12-21 12:48:12 -05:00
parent f916cb1d52
commit e761844e6f
7 changed files with 107 additions and 104 deletions
--- a/src/routes/blog/index.tsx
+++ b/src/routes/blog/index.tsx
@@ -22,7 +22,7 @@ export default function BlogIndex() {

      <div class="mx-auto pt-8 pb-24">
        <Suspense fallback={<TerminalSplash />}>
-          <div class="flex flex-row justify-around gap-4">
+          <div class="flex flex-row justify-around gap-4 px-4">
            <PostSortingSelect />

            <Show when={data() && Object.keys(data()!.tagMap).length > 0}>
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -10,7 +10,7 @@ export default function Home() {
        content="Michael Freno - Software Engineer based in Brooklyn, NY. Passionate about dev tooling, game development, and open source software."
      />

-      <main class="flex h-full flex-col gap-8 p-4 pt-16 text-xl">
+      <main class="flex h-full flex-col gap-8 text-xl">
        <div class="flex-1">
          <Typewriter speed={30} keepAlive={2000}>
            <div class="text-4xl">Hey!</div>
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -15,6 +15,7 @@ import EyeSlash from "~/components/icons/EyeSlash";
 import CountdownCircleTimer from "~/components/CountdownCircleTimer";
 import { isValidEmail, validatePassword } from "~/lib/validation";
 import { getClientCookie } from "~/lib/cookies.client";
+import { env } from "~/env/client";

 const checkAuth = cache(async () => {
  "use server";
@@ -63,9 +64,9 @@ export default function LoginPage() {
  let timerInterval: number | undefined;

  // Environment variables
-  const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
-  const githubClientId = import.meta.env.VITE_GITHUB_CLIENT_ID;
-  const domain = import.meta.env.VITE_DOMAIN || "https://www.freno.me";
+  const googleClientId = env.VITE_GOOGLE_CLIENT_ID;
+  const githubClientId = env.VITE_GITHUB_CLIENT_ID;
+  const domain = env.VITE_DOMAIN || "https://www.freno.me";

  // Calculate remaining time from cookie
  const calcRemainder = (timer: string) => {
@@ -91,12 +92,13 @@ export default function LoginPage() {
        () => calcRemainder(timer),
        1000
      ) as unknown as number;
-      onCleanup(() => {
-        if (timerInterval) {
-          clearInterval(timerInterval);
-        }
-      });
    }
+
+    onCleanup(() => {
+      if (timerInterval) {
+        clearInterval(timerInterval);
+      }
+    });
  });

  // Check for OAuth/callback errors in URL
@@ -329,7 +331,7 @@ export default function LoginPage() {
      />
      <div class="flex h-dvh flex-row justify-evenly">
        {/* Main content */}
-        <div class="pt-24 md:pt-48">
+        <div class="pt-12 md:pt-24">
          {/* Error message */}
          <div class="absolute -mt-12 text-center text-3xl text-red-400 italic">
            <Show when={error() === "passwordMismatch"}>
@@ -347,7 +349,7 @@ export default function LoginPage() {
          <Show
            when={!register()}
            fallback={
-              <div class="py-4 text-center md:min-w-[475px]">
+              <div class="py-4 text-center md:min-w-118.75">
                Already have an account?
                <button
                  onClick={() => {
@@ -361,7 +363,7 @@ export default function LoginPage() {
              </div>
            }
          >
-            <div class="py-4 text-center md:min-w-[475px]">
+            <div class="py-4 text-center md:min-w-118.75">
              Don't have an account yet?
              <button
                onClick={() => {
@@ -381,7 +383,7 @@ export default function LoginPage() {
            <div class="flex justify-center">
              <div class="input-group mx-4">
                <input
-                  type="text"
+                  type="email"
                  required
                  ref={emailRef}
                  placeholder=" "
--- a/src/routes/login/request-password-reset.tsx
+++ b/src/routes/login/request-password-reset.tsx
@@ -42,12 +42,13 @@ export default function RequestPasswordResetPage() {
        () => calcRemainder(timer),
        1000
      ) as unknown as number;
-      onCleanup(() => {
-        if (timerInterval) {
-          clearInterval(timerInterval);
-        }
-      });
    }
+
+    onCleanup(() => {
+      if (timerInterval) {
+        clearInterval(timerInterval);
+      }
+    });
  });

  // Form submission handler
@@ -125,90 +126,88 @@ export default function RequestPasswordResetPage() {
        name="description"
        content="Request a password reset link to regain access to your account. Enter your email to receive reset instructions."
      />
-      <div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
-        <div class="pt-24 text-center text-xl font-semibold text-slate-800 dark:text-slate-100">
-          Password Reset Request
-        </div>
+      <div class="pt-24 text-center text-xl font-semibold">
+        Password Reset Request
+      </div>

-        <form
-          onSubmit={(e) => requestPasswordResetTrigger(e)}
-          class="mt-4 flex w-full justify-center"
-        >
-          <div class="flex flex-col justify-center">
-            {/* Email Input */}
-            <div class="input-group mx-4">
-              <input
-                ref={emailRef}
-                name="email"
-                type="text"
-                required
+      <form
+        onSubmit={(e) => requestPasswordResetTrigger(e)}
+        class="mt-4 flex w-full justify-center"
+      >
+        <div class="flex flex-col justify-center">
+          {/* Email Input */}
+          <div class="input-group mx-4">
+            <input
+              ref={emailRef}
+              name="email"
+              type="email"
+              required
+              disabled={loading()}
+              placeholder=" "
+              class="underlinedInput w-full bg-transparent"
+            />
+            <span class="bar"></span>
+            <label class="underlinedInputLabel">Enter Email</label>
+          </div>
+
+          {/* Countdown Timer or Submit Button */}
+          <Show
+            when={countDown() > 0}
+            fallback={
+              <button
+                type="submit"
                disabled={loading()}
-                placeholder=" "
-                class="underlinedInput w-full bg-transparent"
-              />
-              <span class="bar"></span>
-              <label class="underlinedInputLabel">Enter Email</label>
-            </div>
-
-            {/* Countdown Timer or Submit Button */}
-            <Show
-              when={countDown() > 0}
-              fallback={
-                <button
-                  type="submit"
-                  disabled={loading()}
-                  class={`${
-                    loading()
-                      ? "bg-zinc-400"
-                      : "bg-blue-400 hover:bg-blue-500 active:scale-90 dark:bg-blue-600 dark:hover:bg-blue-700"
-                  } my-6 flex justify-center rounded px-4 py-2 font-medium text-white transition-all duration-300 ease-out`}
-                >
-                  {loading() ? "Sending..." : "Request Password Reset"}
-                </button>
-              }
-            >
-              <div class="mx-auto pt-4">
-                <CountdownCircleTimer
-                  isPlaying={true}
-                  duration={300}
-                  initialRemainingTime={countDown()}
-                  size={48}
-                  strokeWidth={6}
-                  colors="#60a5fa"
-                  onComplete={() => false}
-                >
-                  {renderTime}
-                </CountdownCircleTimer>
-              </div>
-            </Show>
-          </div>
-        </form>
-
-        {/* Success Message */}
-        <div
-          class={`${
-            showSuccessMessage() ? "" : "opacity-0 select-none"
-          } flex justify-center text-green-500 italic transition-opacity duration-300 ease-in-out`}
-        >
-          If email exists, you will receive an email shortly!
-        </div>
-
-        {/* Error Message */}
-        <Show when={error()}>
-          <div class="mt-4 flex justify-center">
-            <div class="text-sm text-red-500 italic">{error()}</div>
-          </div>
-        </Show>
-
-        {/* Back to Login Link */}
-        <div class="mt-6 flex justify-center">
-          <A
-            href="/login"
-            class="text-blue-500 underline underline-offset-4 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+                class={`${
+                  loading()
+                    ? "bg-zinc-400"
+                    : "bg-blue hover:brightness-125 active:scale-90"
+                } my-6 flex justify-center rounded px-4 py-2 font-medium text-white transition-all duration-300 ease-out`}
+              >
+                {loading() ? "Sending..." : "Request Password Reset"}
+              </button>
+            }
          >
-            Back to Login
-          </A>
+            <div class="mx-auto pt-4">
+              <CountdownCircleTimer
+                isPlaying={true}
+                duration={300}
+                initialRemainingTime={countDown()}
+                size={48}
+                strokeWidth={6}
+                colors="#60a5fa"
+                onComplete={() => false}
+              >
+                {renderTime}
+              </CountdownCircleTimer>
+            </div>
+          </Show>
        </div>
+      </form>
+
+      {/* Success Message */}
+      <div
+        class={`${
+          showSuccessMessage() ? "" : "opacity-0 select-none"
+        } text-green flex justify-center italic transition-opacity duration-300 ease-in-out`}
+      >
+        If email exists, you will receive an email shortly!
+      </div>
+
+      {/* Error Message */}
+      <Show when={error()}>
+        <div class="mt-4 flex justify-center">
+          <div class="text-red text-sm italic">{error()}</div>
+        </div>
+      </Show>
+
+      {/* Back to Login Link */}
+      <div class="mt-6 flex justify-center">
+        <A
+          href="/login"
+          class="text-blue underline underline-offset-4 transition-colors hover:brightness-125"
+        >
+          Back to Login
+        </A>
      </div>
    </>
  );