From 1dd852795e3cfdde8c552f0b281cd511b1671ef5 Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Mon, 22 Dec 2025 10:55:08 -0500
Subject: [PATCH] login fixes

---
 src/components/Bars.tsx             |  39 +++++--
 src/components/blog/PostForm.tsx    |  50 +++++----
 src/components/blog/TextEditor.tsx  |  10 +-
 src/routes/login/password-reset.tsx | 154 +++++++++++++++++-----------
 src/server/api/routers/auth.ts      |  48 ++++++++-
 5 files changed, 204 insertions(+), 97 deletions(-)

diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index 24c04f8..a6f3077 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -39,6 +39,7 @@ interface ContributionDay {
 }
 
 export function RightBarContent() {
+  const { setLeftBarVisible } = useBars();
   const [githubCommits, setGithubCommits] = createSignal<GitCommit[]>([]);
   const [giteaCommits, setGiteaCommits] = createSignal<GitCommit[]>([]);
   const [githubActivity, setGithubActivity] = createSignal<ContributionDay[]>(
@@ -47,6 +48,12 @@ export function RightBarContent() {
   const [giteaActivity, setGiteaActivity] = createSignal<ContributionDay[]>([]);
   const [loading, setLoading] = createSignal(true);
 
+  const handleLinkClick = () => {
+    if (typeof window !== "undefined" && window.innerWidth < 768) {
+      setLeftBarVisible(false);
+    }
+  };
+
   onMount(() => {
     // Fetch all data client-side only to avoid hydration mismatch
     const fetchData = async () => {
@@ -83,7 +90,9 @@ export function RightBarContent() {
       <Typewriter keepAlive={false} class="z-50 px-4 md:pt-4">
         <ul class="flex flex-col gap-4">
           <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-            <a href="/contact">Contact Me</a>
+            <a href="/contact" onClick={handleLinkClick}>
+              Contact Me
+            </a>
           </li>
           <li>
             <a
@@ -114,6 +123,7 @@ export function RightBarContent() {
           <li>
             <a
               href="/resume"
+              onClick={handleLinkClick}
               class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
             >
               <span class="shaker rounded-full p-2">
@@ -177,6 +187,12 @@ export function LeftBar() {
   const [isMounted, setIsMounted] = createSignal(false);
   const [signOutLoading, setSignOutLoading] = createSignal(false);
 
+  const handleLinkClick = () => {
+    if (typeof window !== "undefined" && window.innerWidth < 768) {
+      setLeftBarVisible(false);
+    }
+  };
+
   const handleSignOut = async () => {
     setSignOutLoading(true);
     try {
@@ -337,7 +353,9 @@ export function LeftBar() {
       <div class="flex h-full flex-col overflow-y-auto">
         <Typewriter speed={10} keepAlive={10000} class="z-50 pr-8 pl-4">
           <h3 class="hover:text-subtext0 w-fit pt-6 text-center text-3xl underline transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105">
-            <a href="/">{formatDomainName(env.VITE_DOMAIN)}</a>
+            <a href="/" onClick={handleLinkClick}>
+              {formatDomainName(env.VITE_DOMAIN)}
+            </a>
           </h3>
         </Typewriter>
 
@@ -368,6 +386,7 @@ export function LeftBar() {
                   {(post) => (
                     <a
                       href={`/blog/${post.title}`}
+                      onClick={handleLinkClick}
                       class="hover:text-subtext0 block transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
                     >
                       <Typewriter class="flex flex-col" keepAlive={false}>
@@ -402,17 +421,25 @@ export function LeftBar() {
             <Typewriter keepAlive={false}>
               <ul class="flex flex-col gap-4 py-6">
                 <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                  <a href="/">Home</a>
+                  <a href="/" onClick={handleLinkClick}>
+                    Home
+                  </a>
                 </li>
                 <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                  <a href="/blog">Blog</a>
+                  <a href="/blog" onClick={handleLinkClick}>
+                    Blog
+                  </a>
                 </li>
                 <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
                   <Show
                     when={isMounted() && userInfo()?.isAuthenticated}
-                    fallback={<a href="/login">Login</a>}
+                    fallback={
+                      <a href="/login" onClick={handleLinkClick}>
+                        Login
+                      </a>
+                    }
                   >
-                    <a href="/account">
+                    <a href="/account" onClick={handleLinkClick}>
                       Account
                       <Show when={userInfo()?.email}>
                         <span class="text-subtext0 text-sm font-normal">
diff --git a/src/components/blog/PostForm.tsx b/src/components/blog/PostForm.tsx
index beef31b..938aa32 100644
--- a/src/components/blog/PostForm.tsx
+++ b/src/components/blog/PostForm.tsx
@@ -52,6 +52,9 @@ export default function PostForm(props: PostFormProps) {
     props.initialData?.body
   );
   const [hasSaved, setHasSaved] = createSignal(props.mode === "edit");
+  const [createdPostId, setCreatedPostId] = createSignal<number | undefined>(
+    props.postId
+  );
 
   // Mark initial load as complete after data is loaded (for edit mode)
   createEffect(() => {
@@ -75,12 +78,13 @@ export default function PostForm(props: PostFormProps) {
           )) as string;
         }
 
-        if (props.mode === "edit") {
+        if (props.mode === "edit" || createdPostId()) {
+          // Update existing post (either in edit mode or if already created)
           await api.database.updatePost.mutate({
-            id: props.postId!,
+            id: createdPostId() || props.postId!,
             title: titleVal.replaceAll(" ", "_"),
             subtitle: subtitle() || "",
-            body: body() || "",
+            body: body() || "Hello, World!",
             banner_photo:
               bannerImageKey !== ""
                 ? bannerImageKey
@@ -92,20 +96,19 @@ export default function PostForm(props: PostFormProps) {
             author_id: props.userID
           });
         } else {
-          // Create mode: only save once
-          if (!hasSaved()) {
-            await api.database.createPost.mutate({
-              category: "blog",
-              title: titleVal.replaceAll(" ", "_"),
-              subtitle: subtitle() || null,
-              body: body() || null,
-              banner_photo: bannerImageKey !== "" ? bannerImageKey : null,
-              published: published(),
-              tags: tags().length > 0 ? tags() : null,
-              author_id: props.userID
-            });
-            setHasSaved(true);
-          }
+          // Create mode: only save once (first autosave)
+          const result = await api.database.createPost.mutate({
+            category: "blog",
+            title: titleVal.replaceAll(" ", "_"),
+            subtitle: subtitle() || null,
+            body: body() || "Hello, World!",
+            banner_photo: bannerImageKey !== "" ? bannerImageKey : null,
+            published: published(),
+            tags: tags().length > 0 ? tags() : null,
+            author_id: props.userID
+          });
+          setCreatedPostId(result.data as number);
+          setHasSaved(true);
         }
 
         showAutoSaveTrigger();
@@ -216,12 +219,13 @@ export default function PostForm(props: PostFormProps) {
         )) as string;
       }
 
-      if (props.mode === "edit") {
+      if (props.mode === "edit" || createdPostId()) {
+        // Update existing post (either in edit mode or if autosave created it)
         await api.database.updatePost.mutate({
-          id: props.postId!,
+          id: createdPostId() || props.postId!,
           title: title().replaceAll(" ", "_"),
           subtitle: subtitle() || null,
-          body: body() || null,
+          body: body() || "Hello, World!",
           banner_photo:
             bannerImageKey !== ""
               ? bannerImageKey
@@ -233,16 +237,18 @@ export default function PostForm(props: PostFormProps) {
           author_id: props.userID
         });
       } else {
-        await api.database.createPost.mutate({
+        // Create new post
+        const result = await api.database.createPost.mutate({
           category: "blog",
           title: title().replaceAll(" ", "_"),
           subtitle: subtitle() || null,
-          body: body() || null,
+          body: body() || "Hello, World!",
           banner_photo: bannerImageKey !== "" ? bannerImageKey : null,
           published: published(),
           tags: tags().length > 0 ? tags() : null,
           author_id: props.userID
         });
+        setCreatedPostId(result.data as number);
       }
 
       navigate(`/blog/${encodeURIComponent(title().replaceAll(" ", "_"))}`);
diff --git a/src/components/blog/TextEditor.tsx b/src/components/blog/TextEditor.tsx
index 4500ec1..ff2c8c5 100644
--- a/src/components/blog/TextEditor.tsx
+++ b/src/components/blog/TextEditor.tsx
@@ -1382,7 +1382,7 @@ export default function TextEditor(props: TextEditorProps) {
             {/* Language Selector Dropdown */}
             <Show when={showLanguageSelector()}>
               <div
-                class="language-selector bg-mantle text-text border-surface2 fixed z-[110] max-h-64 w-48 overflow-y-auto rounded border shadow-lg"
+                class="language-selector bg-mantle text-text border-surface2 fixed z-110 max-h-64 w-48 overflow-y-auto rounded border shadow-lg"
                 style={{
                   top: `${languageSelectorPosition().top}px`,
                   left: `${languageSelectorPosition().left}px`
@@ -1405,7 +1405,7 @@ export default function TextEditor(props: TextEditorProps) {
             {/* Table Grid Selector */}
             <Show when={showTableMenu()}>
               <div
-                class="table-menu fixed z-[110]"
+                class="table-menu fixed z-110"
                 style={{
                   top: `${tableMenuPosition().top}px`,
                   left: `${tableMenuPosition().left}px`
@@ -1418,7 +1418,7 @@ export default function TextEditor(props: TextEditorProps) {
             {/* Mermaid Template Selector */}
             <Show when={showMermaidTemplates()}>
               <div
-                class="mermaid-menu bg-mantle text-text border-surface2 fixed z-[110] max-h-96 w-56 overflow-y-auto rounded border shadow-lg"
+                class="mermaid-menu bg-mantle text-text border-surface2 fixed z-110 max-h-96 w-56 overflow-y-auto rounded border shadow-lg"
                 style={{
                   top: `${mermaidMenuPosition().top}px`,
                   left: `${mermaidMenuPosition().left}px`
@@ -1897,11 +1897,11 @@ export default function TextEditor(props: TextEditorProps) {
       {/* Keyboard Help Modal */}
       <Show when={showKeyboardHelp()}>
         <div
-          class="bg-opacity-50 fixed inset-0 z-[110] flex items-center justify-center bg-black"
+          class="bg-opacity-50 fixed inset-0 z-110 flex items-center justify-center bg-black"
           onClick={() => setShowKeyboardHelp(false)}
         >
           <div
-            class="bg-base border-surface2 max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-lg border p-6 shadow-2xl"
+            class="bg-base border-surface2 max-h-[80dvh] w-full max-w-2xl overflow-y-auto rounded-lg border p-6 shadow-2xl"
             onClick={(e) => e.stopPropagation()}
           >
             {/* Header */}
diff --git a/src/routes/login/password-reset.tsx b/src/routes/login/password-reset.tsx
index aa3ba90..09cad70 100644
--- a/src/routes/login/password-reset.tsx
+++ b/src/routes/login/password-reset.tsx
@@ -5,6 +5,7 @@ import CountdownCircleTimer from "~/components/CountdownCircleTimer";
 import Eye from "~/components/icons/Eye";
 import EyeSlash from "~/components/icons/EyeSlash";
 import { validatePassword } from "~/lib/validation";
+import { api } from "~/lib/api";
 
 export default function PasswordResetPage() {
   const navigate = useNavigate();
@@ -67,32 +68,26 @@ export default function PasswordResetPage() {
     setPasswordChangeLoading(true);
 
     try {
-      const response = await fetch("/api/trpc/auth.resetPassword", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          token: token,
-          newPassword,
-          newPasswordConfirmation: newPasswordConf
-        })
+      const result = await api.auth.resetPassword.mutate({
+        token: token,
+        newPassword,
+        newPasswordConfirmation: newPasswordConf
       });
 
-      const result = await response.json();
-
-      if (response.ok && result.result?.data) {
+      if (result.success) {
         setCountDown(true);
       } else {
-        const errorMsg = result.error?.message || "Failed to reset password";
-        if (errorMsg.includes("expired") || errorMsg.includes("token")) {
-          setShowRequestNewEmail(true);
-          setError("Token has expired");
-        } else {
-          setError(errorMsg);
-        }
+        setError("Failed to reset password");
       }
-    } catch (err) {
+    } catch (err: any) {
       console.error("Password reset error:", err);
-      setError("An error occurred. Please try again.");
+      const errorMsg = err.message || "An error occurred. Please try again.";
+      if (errorMsg.includes("expired") || errorMsg.includes("token")) {
+        setShowRequestNewEmail(true);
+        setError("Token has expired");
+      } else {
+        setError(errorMsg);
+      }
     } finally {
       setPasswordChangeLoading(false);
     }
@@ -192,27 +187,48 @@ export default function PasswordResetPage() {
         >
           <div class="flex w-full max-w-md flex-col justify-center px-4">
             {/* New Password Input */}
-            <div class="input-group relative mx-4">
-              <input
-                ref={newPasswordRef}
-                name="newPassword"
-                type={showPasswordInput() ? "text" : "password"}
-                required
-                onInput={handleNewPasswordChange}
-                onBlur={handlePasswordBlur}
-                disabled={passwordChangeLoading()}
-                placeholder=" "
-                class="underlinedInput w-full bg-transparent pr-10"
-              />
-              <span class="bar"></span>
-              <label class="underlinedInputLabel">New Password</label>
+            <div class="flex justify-center">
+              <div class="input-group mx-4 flex">
+                <input
+                  ref={newPasswordRef}
+                  name="newPassword"
+                  type={showPasswordInput() ? "text" : "password"}
+                  required
+                  autofocus
+                  onInput={handleNewPasswordChange}
+                  onBlur={handlePasswordBlur}
+                  disabled={passwordChangeLoading()}
+                  placeholder=" "
+                  class="underlinedInput bg-transparent"
+                />
+                <span class="bar"></span>
+                <label class="underlinedInputLabel">New Password</label>
+              </div>
               <button
                 type="button"
-                onClick={() => setShowPasswordInput(!showPasswordInput())}
-                class="absolute top-2 right-0 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+                onClick={() => {
+                  setShowPasswordInput(!showPasswordInput());
+                  newPasswordRef?.focus();
+                }}
+                class="absolute mt-14 ml-60"
               >
-                <Show when={showPasswordInput()} fallback={<Eye />}>
-                  <EyeSlash />
+                <Show
+                  when={showPasswordInput()}
+                  fallback={
+                    <EyeSlash
+                      height={24}
+                      width={24}
+                      strokeWidth={1}
+                      class="stroke-zinc-900 dark:stroke-white"
+                    />
+                  }
+                >
+                  <Eye
+                    height={24}
+                    width={24}
+                    strokeWidth={1}
+                    class="stroke-zinc-900 dark:stroke-white"
+                  />
                 </Show>
               </button>
             </div>
@@ -221,34 +237,54 @@ export default function PasswordResetPage() {
             <div
               class={`${
                 showPasswordLengthWarning() ? "" : "opacity-0 select-none"
-              } mt-2 text-center text-sm text-red-500 transition-opacity duration-200 ease-in-out`}
+              } text-center text-red-500 transition-opacity duration-200 ease-in-out`}
             >
               Password too short! Min Length: 8
             </div>
 
             {/* Password Confirmation Input */}
-            <div class="input-group relative mx-4 mt-6">
-              <input
-                ref={newPasswordConfRef}
-                name="newPasswordConf"
-                onInput={handlePasswordConfChange}
-                type={showPasswordConfInput() ? "text" : "password"}
-                required
-                disabled={passwordChangeLoading()}
-                placeholder=" "
-                class="underlinedInput w-full bg-transparent pr-10"
-              />
-              <span class="bar"></span>
-              <label class="underlinedInputLabel">Password Confirmation</label>
+            <div class="-mt-4 flex justify-center">
+              <div class="input-group mx-4 flex">
+                <input
+                  ref={newPasswordConfRef}
+                  name="newPasswordConf"
+                  onInput={handlePasswordConfChange}
+                  type={showPasswordConfInput() ? "text" : "password"}
+                  required
+                  disabled={passwordChangeLoading()}
+                  placeholder=" "
+                  class="underlinedInput bg-transparent"
+                />
+                <span class="bar"></span>
+                <label class="underlinedInputLabel">
+                  Password Confirmation
+                </label>
+              </div>
               <button
                 type="button"
-                onClick={() =>
-                  setShowPasswordConfInput(!showPasswordConfInput())
-                }
-                class="absolute top-2 right-0 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+                onClick={() => {
+                  setShowPasswordConfInput(!showPasswordConfInput());
+                  newPasswordConfRef?.focus();
+                }}
+                class="absolute mt-14 ml-60"
               >
-                <Show when={showPasswordConfInput()} fallback={<Eye />}>
-                  <EyeSlash />
+                <Show
+                  when={showPasswordConfInput()}
+                  fallback={
+                    <EyeSlash
+                      height={24}
+                      width={24}
+                      strokeWidth={1}
+                      class="stroke-zinc-900 dark:stroke-white"
+                    />
+                  }
+                >
+                  <Eye
+                    height={24}
+                    width={24}
+                    strokeWidth={1}
+                    class="stroke-zinc-900 dark:stroke-white"
+                  />
                 </Show>
               </button>
             </div>
@@ -262,7 +298,7 @@ export default function PasswordResetPage() {
                 newPasswordConfRef.value.length >= 6
                   ? ""
                   : "opacity-0 select-none"
-              } mt-2 text-center text-sm text-red-500 transition-opacity duration-200 ease-in-out`}
+              } text-center text-red-500 transition-opacity duration-200 ease-in-out`}
             >
               Passwords do not match!
             </div>
diff --git a/src/server/api/routers/auth.ts b/src/server/api/routers/auth.ts
index 5546b97..843870e 100644
--- a/src/server/api/routers/auth.ts
+++ b/src/server/api/routers/auth.ts
@@ -600,8 +600,8 @@ export const authRouter = createTRPCRouter({
 
       const conn = ConnectionFactory();
       const res = await conn.execute({
-        sql: "SELECT * FROM User WHERE email = ? AND provider = ?",
-        args: [email, "email"]
+        sql: "SELECT * FROM User WHERE email = ?",
+        args: [email]
       });
 
       if (res.rows.length === 0) {
@@ -629,6 +629,17 @@ export const authRouter = createTRPCRouter({
         });
       }
 
+      // If provider is unknown/null, update it to "email" since they're logging in with password
+      if (
+        !user.provider ||
+        !["email", "google", "github", "apple"].includes(user.provider)
+      ) {
+        await conn.execute({
+          sql: "UPDATE User SET provider = ? WHERE id = ?",
+          args: ["email", user.id]
+        });
+      }
+
       // Create JWT token with appropriate expiry
       const expiresIn = rememberMe ? "14d" : "12h";
       const token = await createJWT(user.id, expiresIn);
@@ -940,11 +951,38 @@ export const authRouter = createTRPCRouter({
         const conn = ConnectionFactory();
         const passwordHash = await hashPassword(newPassword);
 
-        await conn.execute({
-          sql: "UPDATE User SET password_hash = ? WHERE id = ?",
-          args: [passwordHash, payload.id]
+        // Get user to check current provider
+        const userRes = await conn.execute({
+          sql: "SELECT provider FROM User WHERE id = ?",
+          args: [payload.id]
         });
 
+        if (userRes.rows.length === 0) {
+          throw new TRPCError({
+            code: "NOT_FOUND",
+            message: "User not found"
+          });
+        }
+
+        const currentProvider = (userRes.rows[0] as any).provider;
+
+        // Only update provider to "email" if it's null, undefined, or not a known OAuth provider
+        if (
+          !currentProvider ||
+          !["google", "github", "apple"].includes(currentProvider)
+        ) {
+          await conn.execute({
+            sql: "UPDATE User SET password_hash = ?, provider = ? WHERE id = ?",
+            args: [passwordHash, "email", payload.id]
+          });
+        } else {
+          // Keep existing OAuth provider, just update password
+          await conn.execute({
+            sql: "UPDATE User SET password_hash = ? WHERE id = ?",
+            args: [passwordHash, payload.id]
+          });
+        }
+
         // Clear any session cookies
         setCookie(ctx.event.nativeEvent, "emailToken", "", {
           maxAge: 0,