wip: fixed page title/favicon outside MainShell

tabarra · Dec 27, 2023 · 4109888 · 4109888
1 parent 2c615c1
commit 4109888
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/panel/src/hooks/pages.ts b/panel/src/hooks/pages.ts
@@ -1,12 +1,13 @@
-import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atom, useSetAtom } from 'jotai';
 import { atomEffect } from 'jotai-effect'
-import faviconDefault from '/favicon_default.svg';
-import faviconOnline from '/favicon_online.svg';
-import faviconPartial from '/favicon_partial.svg';
-import faviconOffline from '/favicon_offline.svg';
+import faviconDefault from '/favicon_default.svg?url';
+import faviconOnline from '/favicon_online.svg?url';
+import faviconPartial from '/favicon_partial.svg?url';
+import faviconOffline from '/favicon_offline.svg?url';
 import { globalStatusAtom } from './status';
 import { playerCountAtom } from './playerlist';
 
+
 /**
  * This atom is used to change the key of the main page error boundry, which also resets the router 
  * as a side effect. This is used to reset the page that errored as well as resetting the current 
@@ -32,12 +33,23 @@ export const pageErrorStatusAtom = atom(false);
 /**
  * Page title management
  */
+const DEFAULT_TITLE = 'txAdmin';
 const faviconEl = document.getElementById('favicon') as HTMLLinkElement;
-const pageTitleAtom = atom('txAdmin');
+const pageTitleAtom = atom(DEFAULT_TITLE);
 
 export const useSetPageTitle = () => {
     const setPageTitle = useSetAtom(pageTitleAtom);
-    return (title = 'txAdmin') => setPageTitle(title);
+    return (title?: string) => {
+        console.log('setPageTitle', title);
+        if (title) {
+            setPageTitle(title);
+        } else {
+            // probably logout, pageTitleWatcher is not watching!
+            setPageTitle(DEFAULT_TITLE);
+            document.title = DEFAULT_TITLE;
+            faviconEl.href = faviconDefault;
+        }
+    };
 }
 
 export const pageTitleWatcher = atomEffect((get, set) => {
@@ -48,20 +60,15 @@ export const pageTitleWatcher = atomEffect((get, set) => {
 
     if (!globalStatus) {
         faviconEl.href = faviconDefault;
-        document.title = 'txAdmin';
+        document.title = DEFAULT_TITLE;
     } else {
-        if(globalStatus.server.status === 'ONLINE'){
+        if (globalStatus.server.status === 'ONLINE') {
             faviconEl.href = faviconOnline;
-        }else if(globalStatus.server.status === 'PARTIAL'){
+        } else if (globalStatus.server.status === 'PARTIAL') {
             faviconEl.href = faviconPartial;
         } else {
             faviconEl.href = faviconOffline;
         }
         document.title = `(${playerCount}) ${globalStatus.server.name} · ${pageTitle}`;
     }
-
-    return () => {
-        faviconEl.href = faviconDefault;
-        document.title = 'txAdmin';
-    }
 });
diff --git a/panel/src/pages/auth/Login.tsx b/panel/src/pages/auth/Login.tsx
@@ -14,6 +14,7 @@ import { ApiOauthRedirectResp, ApiVerifyPasswordReq, ApiVerifyPasswordResp } fro
 import { useAuth } from '@/hooks/auth';
 import './components/cfxreLoginButton.css';
 import { useLocation } from "wouter";
+import { useSetPageTitle } from '@/hooks/pages';
 
 
 export default function Login() {
@@ -22,6 +23,7 @@ export default function Login() {
     const passwordRef = useRef<HTMLInputElement>(null);
     const [errorMessage, setErrorMessage] = useState<string | undefined>();
     const setLocation = useLocation()[1];
+    const setPageTitle = useSetPageTitle();
 
     const onError = (error: Error) => {
         if (error.message.startsWith('NetworkError')) {
@@ -103,6 +105,7 @@ export default function Login() {
 
     //Prefill username/password if dev pass enabled
     useEffect(() => {
+        setPageTitle();
         try {
             const rawLocalStorageStr = localStorage.getItem('authCredsAutofill');
             if (rawLocalStorageStr) {