Fix auth modal feedback and production deploy config

Dockerfile

@@ -10,7 +10,7 @@ WORKDIR /opt/michess/
 COPY . .
 
 RUN corepack enable && \
-    corepack prepare pnpm@latest --activate && \
+    corepack prepare pnpm@9.15.9 --activate && \
     pnpm config set store-dir /opt/michess/.pnpm-store && \
     pnpm install --no-frozen-lockfile
 

client/src/components/auth/AuthModal.tsx

@@ -16,40 +16,43 @@ export default function AuthModal() {
   const [buttonLoading, setButtonLoading] = useState(false);
   const modalToggleRef = useRef<HTMLInputElement>(null);
 
-  async function submitAuth(e: FormEvent<HTMLFormElement>) {
+  function closeModal() {
-    e.preventDefault();
-
-    const target = e.target as HTMLFormElement;
-    if (activeTab === "guest") {
-      const guestName = target.elements.namedItem("guestName") as HTMLInputElement;
-      if (!guestName || !guestName.value) return;
-
-      setButtonLoading(true);
-      const user = await setGuestSession(guestName.value);
-      if (user) {
-        session?.setUser(user);
     if (modalToggleRef.current?.checked) {
       modalToggleRef.current.checked = false;
     }
   }
+
+  async function submitAuth(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const target = e.target as HTMLFormElement;
+    setServerMessage(null);
+    setButtonLoading(true);
+
+    try {
+      if (activeTab === "guest") {
+        const guestName = target.elements.namedItem("guestName") as HTMLInputElement;
+        if (!guestName || !guestName.value) return;
+
+        const user = await setGuestSession(guestName.value);
+        if (typeof user === "string") {
+          setServerMessage(user);
+        } else if (user?.id) {
+          session?.setUser(user);
+          closeModal();
           guestName.value = "";
+        }
       } else if (activeTab === "login") {
         const loginName = target.elements.namedItem("loginName") as HTMLInputElement;
         const loginPassword = target.elements.namedItem("loginPassword") as HTMLInputElement;
         if (!loginName || !loginName.value || !loginPassword || !loginPassword.value) return;
 
-      setButtonLoading(true);
         const user = await login(loginName.value, loginPassword.value);
         if (typeof user === "string") {
           setServerMessage(user);
         } else if (user?.id) {
           session?.setUser(user);
-        if (serverMessage) {
+          closeModal();
-          setServerMessage(null);
-        }
-        if (modalToggleRef.current?.checked) {
-          modalToggleRef.current.checked = false;
-        }
         }
       } else if (activeTab === "register") {
         const registerName = target.elements.namedItem("registerName") as HTMLInputElement;
@@ -59,7 +62,6 @@ export default function AuthModal() {
           return;
         }
 
-      setButtonLoading(true);
         const user = await register(
           registerName.value,
           registerPassword.value,
@@ -70,16 +72,13 @@ export default function AuthModal() {
           setServerMessage(user);
         } else if (user?.id) {
           session?.setUser(user);
-        if (serverMessage) {
+          closeModal();
-          setServerMessage(null);
-        }
-        if (modalToggleRef.current?.checked) {
-          modalToggleRef.current.checked = false;
-        }
         }
       }
+    } finally {
       setButtonLoading(false);
     }
+  }
 
   useEffect(() => {
     setServerMessage(null);

client/src/lib/auth.ts

@@ -1,6 +1,19 @@
 import { API_URL } from "@/config";
 import type { User } from "@michess/types";
 
+const readErrorMessage = async (res: Response, fallback: string) => {
+    try {
+        const body = await res.json();
+        if (typeof body?.message === "string") {
+            return body.message;
+        }
+    } catch (err) {
+        // Response did not include a JSON error body.
+    }
+
+    return fallback;
+};
+
 export const fetchSession = async () => {
     try {
         const res = await fetch(`${API_URL}/v1/auth`, {
@@ -30,8 +43,10 @@ export const setGuestSession = async (name: string) => {
             const user: User = await res.json();
             return user;
         }
+        return await readErrorMessage(res, "Could not start guest session.");
     } catch (err) {
         console.error(err);
+        return "Could not reach the server. Please try again.";
     }
 };
 
@@ -48,12 +63,11 @@ export const register = async (name: string, password: string, email?: string) =
         if (res.status === 201) {
             const user: User = await res.json();
             return user;
-        } else if (res.status === 409) {
-            const { message } = await res.json();
-            return message as string;
         }
+        return await readErrorMessage(res, "Registration failed. Please try again.");
     } catch (err) {
         console.error(err);
+        return "Could not reach the server. Please try again.";
     }
 };
 
@@ -70,12 +84,11 @@ export const login = async (name: string, password: string) => {
         if (res.status === 200) {
             const user: User = await res.json();
             return user;
-        } else if (res.status === 404 || res.status === 401) {
-            const { message } = await res.json();
-            return message as string;
         }
+        return await readErrorMessage(res, "Login failed. Please try again.");
     } catch (err) {
         console.error(err);
+        return "Could not reach the server. Please try again.";
     }
 };
 
@@ -107,11 +120,10 @@ export const updateUser = async (name?: string, email?: string, password?: strin
         if (res.status === 200) {
             const user: User = await res.json();
             return user;
-        } else if (res.status === 409) {
-            const { message } = await res.json();
-            return message as string;
         }
+        return await readErrorMessage(res, "Could not update settings. Please try again.");
     } catch (err) {
         console.error(err);
+        return "Could not reach the server. Please try again.";
     }
 };

docker-compose.yml

@@ -12,7 +12,7 @@ services:
       PGPASSWORD: ${POSTGRES_PASSWORD:-changeme}
       PORT: 3001
       SESSION_SECRET: ${SESSION_SECRET:-change-this-secret-in-production}
-      CORS_ORIGIN: ${CORS_ORIGIN:-http://localhost:3000}
+      CORS_ORIGIN: ${CORS_ORIGIN:-https://michess.mischlabs.de}
       ADMIN_EMAIL: ${ADMIN_EMAIL:-}
       APP_DIR: /opt/michess
     ports: