login fixes

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

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,21 +96,20 @@ export default function PostForm(props: PostFormProps) {
             author_id: props.userID
           });
         } else {
-          // Create mode: only save once
+          // Create mode: only save once (first autosave)
-          if (!hasSaved()) {
+          const result = await api.database.createPost.mutate({
-            await api.database.createPost.mutate({
             category: "blog",
             title: titleVal.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);
           setHasSaved(true);
         }
-        }
 
         showAutoSaveTrigger();
       } catch (err) {
@@ -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(" ", "_"))}`);

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 */}

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", {
+      const result = await api.auth.resetPassword.mutate({
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
         token: token,
         newPassword,
         newPasswordConfirmation: newPasswordConf
-        })
       });
 
-      const result = await response.json();
+      if (result.success) {
-
-      if (response.ok && result.result?.data) {
         setCountDown(true);
       } else {
-        const errorMsg = result.error?.message || "Failed to reset password";
+        setError("Failed to reset password");
+      }
+    } catch (err: any) {
+      console.error("Password reset error:", err);
+      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);
       }
-      }
-    } catch (err) {
-      console.error("Password reset error:", err);
-      setError("An error occurred. Please try again.");
     } 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">
+            <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 w-full bg-transparent pr-10"
+                  class="underlinedInput bg-transparent"
                 />
                 <span class="bar"></span>
                 <label class="underlinedInputLabel">New Password</label>
+              </div>
               <button
                 type="button"
-                onClick={() => setShowPasswordInput(!showPasswordInput())}
+                onClick={() => {
-                class="absolute top-2 right-0 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+                  setShowPasswordInput(!showPasswordInput());
+                  newPasswordRef?.focus();
+                }}
+                class="absolute mt-14 ml-60"
               >
-                <Show when={showPasswordInput()} fallback={<Eye />}>
+                <Show
-                  <EyeSlash />
+                  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,13 +237,14 @@ 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">
+            <div class="-mt-4 flex justify-center">
+              <div class="input-group mx-4 flex">
                 <input
                   ref={newPasswordConfRef}
                   name="newPasswordConf"
@@ -236,19 +253,38 @@ export default function PasswordResetPage() {
                   required
                   disabled={passwordChangeLoading()}
                   placeholder=" "
-                class="underlinedInput w-full bg-transparent pr-10"
+                  class="underlinedInput bg-transparent"
                 />
                 <span class="bar"></span>
-              <label class="underlinedInputLabel">Password Confirmation</label>
+                <label class="underlinedInputLabel">
+                  Password Confirmation
+                </label>
+              </div>
               <button
                 type="button"
-                onClick={() =>
+                onClick={() => {
-                  setShowPasswordConfInput(!showPasswordConfInput())
+                  setShowPasswordConfInput(!showPasswordConfInput());
-                }
+                  newPasswordConfRef?.focus();
-                class="absolute top-2 right-0 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+                }}
+                class="absolute mt-14 ml-60"
               >
-                <Show when={showPasswordConfInput()} fallback={<Eye />}>
+                <Show
-                  <EyeSlash />
+                  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>

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 = ?",
+        sql: "SELECT * FROM User WHERE email = ?",
-        args: [email, "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,10 +951,37 @@ export const authRouter = createTRPCRouter({
         const conn = ConnectionFactory();
         const passwordHash = await hashPassword(newPassword);
 
+        // 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", "", {