don't show login when reloginToken exists

Author: oleflb

frontend/src/app.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from "preact/hooks";
-import { connect, currentUser, fetchTeams } from "./store";
+import { connect, currentUser, fetchTeams, authError } from "./store";
 import { Auth } from "./components/Auth";
 import { TalkList } from "./components/TalkList";
+import { Loading } from "./components/Loading";
 import "./mopad.css";
 
 export function App() {
@@ -10,5 +11,12 @@ export function App() {
     connect();
   }, []);
 
+  const hasToken = !!localStorage.getItem("reloginToken");
+  const isRestoring = hasToken && !currentUser.value && !authError.value;
+
+  if (isRestoring) {
+    return <Loading />;
+  }
+
   return <>{currentUser.value ? <TalkList /> : <Auth />}</>;
 }

frontend/src/components/Loading.tsx

@@ -0,0 +1,9 @@
+export function Loading() {
+  return (
+    <div id="loading" className="center">
+      <h1>MOPAD</h1>
+      <div className="spinner"></div>
+      <div>Booting chestboard...</div>
+    </div>
+  );
+}

frontend/src/mopad.css

@@ -598,3 +598,43 @@ body.center,
         width: calc((96rem - 7rem) / 6);
     }
 }
+
+#loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center; /* Added for better centering */
+    padding: 2rem 1rem;
+    height: 100vh; /* Full height for the loading screen */
+
+    & h1 {
+        font-size: 3rem;
+        font-weight: 500;
+        margin-bottom: 1rem;
+    }
+    & div {
+        font-size: 0.85rem;
+        color: var(--text-muted);
+        font-weight: 500;
+    }
+}
+
+/* Add this NEW class for the spinner */
+.spinner {
+    width: 3rem;
+    height: 3rem;
+    border: 0.25rem solid var(--color-primary-light);
+    border-top: 0.25rem solid var(--color-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

frontend/src/store.ts

@@ -16,13 +16,32 @@ setInterval(() => {
 }, 60000);
 
 let socket: WebSocket | null = null;
+let pendingAuthCommand: AuthCommand | null = null;
 
 export function connect() {
+  // 1. Clean up existing connection to prevent phantom "disconnected" events
+  if (socket) {
+    socket.onclose = null; // Remove listener so we don't trigger state change
+    socket.close();
+    socket = null;
+  }
+
+  connectionStatus.value = "connecting";
+
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   socket = new WebSocket(`${protocol}//${window.location.host}/api`);
 
   socket.onopen = () => {
     connectionStatus.value = "connected";
+
+    // Priority 1: Manual Login/Register
+    if (pendingAuthCommand) {
+      sendAuth(pendingAuthCommand);
+      pendingAuthCommand = null;
+      return;
+    }
+
+    // Priority 2: Auto-Relogin
     const token = localStorage.getItem("reloginToken");
     if (token) {
       sendAuth({ Relogin: { token } });
@@ -40,12 +59,18 @@ export function connect() {
   };
 }
 
+export function loginOrRegister(cmd: AuthCommand) {
+  // Queue the command and force a fresh connection
+  localStorage.removeItem("reloginToken");
+  pendingAuthCommand = cmd;
+  authError.value = null;
+  connect();
+}
+
 function handleMessage(msg: any) {
   if (msg.AuthenticationSuccess) {
     const { user_id, roles, token } = msg.AuthenticationSuccess;
     localStorage.setItem("reloginToken", token);
-    // We need to wait for the Users update to fully hydrate the current user object
-    // But we can store the ID for now or handle it when users arrive
     effect(() => {
       if (users.value[user_id]) {
         currentUser.value = { ...users.value[user_id], roles };
@@ -56,10 +81,7 @@ function handleMessage(msg: any) {
     localStorage.removeItem("reloginToken");
   } else if (msg.Users) {
     const newUsers: Record<number, User> = {};
-    // Rust BTreeMap serializes to a JSON Object, not an Array.
-    // We use Object.values() to iterate over the users.
     Object.values(msg.Users.users).forEach((u: any) => {
-      // u is the User object { id: 1, name: "...", team: "..." }
       newUsers[u.id] = { ...u, roles: [] };
     });
     users.value = newUsers;
@@ -115,7 +137,6 @@ function patchTalk(id: number, changes: Partial<Talk>) {
 }
 
 export function sendAuth(cmd: AuthCommand) {
-  console.log(cmd);
   socket?.send(JSON.stringify(cmd));
 }