wip: auto reset some states on logout

docs/dev_notes.md

@@ -182,24 +182,20 @@ setTimeout(() => {
         - [x] make sure it is responsive
         - [x] check behavior on error (invalid player, 500, etc)
         - [x] clean legacy modal and playerlist code
-- [ ][5d] full auth flow
+- [ ][5d] fauth stuff
     - [x] password login
     - [x] cfx.re login
     - [x] error page
     - [x] master account pin add page
     - [x] master account bkp password page
+    - [x] disable player modal buttons based on permissions
+    - [x] flow to refresh the page if invalidated auth
     - [ ] disable menu links based on permissions
-    - [ ] disable player modal buttons based on permissions
     - [ ] flow to refresh the permissions on the client side
-    - [ ] flow to refresh the page if invalidated auth
-- [ ][2d] full setup flow (legacy)
+    - [x] when logging out, create an effect to close all sheets and dialogs
+- [ ][2d] full setup flow (legacy) - fazer isso no mainrouter?
 - [ ][1d] full deployer flow (legacy)
 - [ ][1d] add the new logos to shell+auth pages
-- [ ][3h] full cleanup of legacy code
-    - [ ] removing the replaced page templates
-    - [ ] remove playerlist code
-    - [ ] remove password change modal
-    - [ ] disable code for host live status
 > BETA RELEASE
 
 - [ ][3d] NEW PAGE: Dashboard
@@ -215,24 +211,23 @@ setTimeout(() => {
 - [ ][2h] fine tune `panel/vite.config.ts`
 
 Quickies
-- [ ] fix the tsc build
+- [ ] fix the console bg on light mode
 - [ ] commit the fixes for the player ids and god mode issues
+- [ ] fix the tsc build
 - [ ] disable testing page in prod build
 - [ ] check if strict mode is indeed disabled in prod build
-- [ ] put in server name in the login page, to help lost admins notice they are in the wrong txAdmin
+> BETA RELEASE
 
-- [ ] when logging out, create a neffect to close all sheets and dialogs
+- [ ] put in server name in the login page, to help lost admins notice they are in the wrong txAdmin
 - [ ] talk to r* and make sure the new build process wipes the old cache
-- [ ] make sure some user input is truncated (server name, player name)
+- [ ] make sure some user input based fields are truncated (server name, player name)
 - [ ] layout on 4k and ultrawide screens
 - [ ] check again for the need of lazy loading
 - [ ] Cache stuff:
     - [ ] add `maxage` to `koa-static` config
     - [ ] add `cache-control` and/or `vary` to all pages
 - [ ] deprecate StatisticsManager.pageViews as its now untrackable?
 - [ ] easter egg with some old music? https://www.youtube.com/watch?v=nNoaXej0Jeg
-
-Bugs
 - [ ] make sure the playerlist scroll works if the playergen is stopped (therefore, not re-rendering the component)
 
 

panel/src/hooks/auth.ts

@@ -1,6 +1,11 @@
 import { ApiLogoutResp, ReactAuthDataType } from '@shared/authApiTypes';
 import { useMutation } from '@tanstack/react-query';
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { atomEffect } from 'jotai-effect';
+import { accountModalOpenAtom, confirmDialogOpenAtom, promptDialogOpenAtom } from './dialogs';
+import { isGlobalMenuSheetOpenAtom, isPlayerlistSheetOpenAtom, isServerSheetOpenAtom } from './sheets';
+import { playerModalOpenAtom } from './playerModal';
+import { globalStatusAtom } from './status';
 
 
 /**
@@ -14,7 +19,7 @@ const csrfTokenAtom = atom((get) => {
 });
 const adminPermissionsAtom = atom((get) => {
     const authData = get(authDataAtom);
-    if(!authData) return undefined;
+    if (!authData) return undefined;
     return {
         permissions: authData.permissions,
         isMaster: authData.isMaster,
@@ -41,7 +46,7 @@ export const useAdminPerms = () => {
     const permsData = useAtomValue(adminPermissionsAtom);
 
     const hasPerm = (perm: string) => {
-        if(!permsData) return false;
+        if (!permsData) return false;
         try {
             if (perm === 'master') {
                 return permsData.isMaster;
@@ -100,3 +105,21 @@ export const useAuth = () => {
         }
     }
 };
+
+//Effect to on logout, automagically close all dialogs/modals and reset globalState
+export const logoutWatcher = atomEffect((get, set) => {
+    const isAuthenticated = get(isAuthenticatedAtom);
+    if (isAuthenticated) return;
+
+    console.info('[logoutWatcher] Logout Detected, closing all dialogs and modals.');
+    set(accountModalOpenAtom, false);
+    set(confirmDialogOpenAtom, false);
+    set(promptDialogOpenAtom, false);
+    set(isGlobalMenuSheetOpenAtom, false);
+    set(isServerSheetOpenAtom, false);
+    set(isPlayerlistSheetOpenAtom, false);
+    set(playerModalOpenAtom, false);
+    set(globalStatusAtom, null);
+
+    //TODO: maybe also erase playerlist/mutex?
+});

panel/src/hooks/dialogs.ts

@@ -8,7 +8,7 @@ import { ReactElement } from "react";
 /**
  * Account Modal Stuff
  */
-const accountModalOpenAtom = atom(false);
+export const accountModalOpenAtom = atom(false);
 const accountModalTabAtom = atom<undefined | string>(undefined);
 
 export const useAccountModal = () => {
@@ -52,7 +52,7 @@ type ConfirmDialogType = {
     onCancel?: () => void;
 }
 
-const confirmDialogOpenAtom = atom(false);
+export const confirmDialogOpenAtom = atom(false);
 const confirmDialogDataAtom = atomWithReset<ConfirmDialogType>({
     title: '',
     onConfirm: () => { },
@@ -103,7 +103,7 @@ type PromptDialogType = {
     onSubmit: (input: string) => void;
     onCancel?: () => void;
 }
-const promptDialogOpenAtom = atom(false);
+export const promptDialogOpenAtom = atom(false);
 const promptDialogDataAtom = atomWithReset<PromptDialogType>({
     title: '',
     onSubmit: () => { },

panel/src/hooks/sheets.ts

@@ -4,9 +4,9 @@ import { atom, useAtom, useSetAtom } from 'jotai';
 /**
  * Atoms
  */
-const isGlobalMenuSheetOpenAtom = atom(false);
-const isServerSheetOpenAtom = atom(false);
-const isPlayerlistSheetOpenAtom = atom(false);
+export const isGlobalMenuSheetOpenAtom = atom(false);
+export const isServerSheetOpenAtom = atom(false);
+export const isPlayerlistSheetOpenAtom = atom(false);
 
 
 /**

panel/src/layout/MainShell.tsx

@@ -9,8 +9,6 @@ import WarningBar from './WarningBar';
 import { useEffect, useRef } from 'react';
 import { useSetGlobalStatus } from '@/hooks/status';
 import { useProcessUpdateAvailableEvent, useSetOfflineWarning } from '@/hooks/useWarningBar';
-import { pageTitleWatcher } from '@/hooks/pages';
-import { useAtomValue } from 'jotai';
 import { getSocket } from '@/lib/utils';
 import { useProcessPlayerlistEvents } from '@/hooks/playerlist';
 import ConfirmDialog from '@/components/ConfirmDialog';
@@ -23,7 +21,6 @@ import { useOpenPlayerModal } from '@/hooks/playerModal';
 
 
 export default function MainShell() {
-    useAtomValue(pageTitleWatcher);
     const expireSession = useExpireAuthData();
     const openAccountModal = useOpenAccountModal();
     const openPlayerModal = useOpenPlayerModal();

panel/src/main.tsx

@@ -7,13 +7,15 @@ import './globals.css'
 
 import MainShell from './layout/MainShell.tsx'
 import { AppErrorFallback } from './components/ErrorFallback.tsx';
-import { useIsAuthenticated } from './hooks/auth.ts';
+import { logoutWatcher, useIsAuthenticated } from './hooks/auth.ts';
 import AuthShell from './layout/AuthShell.tsx';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { isValidRedirectPath } from './lib/utils.ts';
 import ThemeProvider from './components/ThemeProvider.tsx';
 import { StrictMode } from 'react';
 import { isMobile } from 'is-mobile';
+import { useAtomValue } from 'jotai';
+import { pageTitleWatcher } from './hooks/pages.ts';
 
 //Detecting if the user is on a mobile device
 try {
@@ -36,6 +38,8 @@ const isAuthRoute = (pathname: string) => {
 }
 
 export function AuthContextSwitch() {
+    useAtomValue(logoutWatcher);
+    useAtomValue(pageTitleWatcher);
     const isAuthenticated = useIsAuthenticated();
 
     if (isAuthenticated) {

panel/src/pages/auth/Login.tsx

@@ -14,7 +14,6 @@ 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() {
@@ -23,7 +22,6 @@ 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')) {
@@ -105,7 +103,6 @@ export default function Login() {
 
     //Prefill username/password if dev pass enabled
     useEffect(() => {
-        setPageTitle();
         try {
             const rawLocalStorageStr = localStorage.getItem('authCredsAutofill');
             if (rawLocalStorageStr) {