wip: bunch of small improvements and fixes

core/components/WebServer/middlewares/authMws.ts

@@ -6,18 +6,22 @@ import { InitializedCtx } from '../ctxTypes';
 const console = consoleFactory(modulename);
 
 const webLogoutPage = `<style>
-    .notice {
-        font-family: sans-serif;
-        font-size: 1.5em;
-        text-align: center;
-        background-color: #1F1F1F;
-        color: #fff;
-        padding: 2em;
-        border-radius: 0.25em;
-    }
-    .notice a {
-        color: #42428A;
-    }
+body {
+    margin: 0;
+}
+.notice {
+    font-family: sans-serif;
+    font-size: 1.5em;
+    text-align: center;
+    background-color: #222326;
+    color: #F7F7F8;
+    padding: 2em;
+    border: 1px solid #333539;
+    border-radius: 0.5em;
+}
+.notice a {
+    color: #F00A53;
+}
 </style>
     <p class="notice">
         User logged out. <br>

docs/dev_notes.md

@@ -193,7 +193,7 @@ setTimeout(() => {
     - [x] when logging out, create an effect to close all sheets and dialogs
     - [x] disable menu links based on permissions
     - [x] flow to refresh the permissions on the client side
-- [ ][2d] full setup flow (legacy) - fazer isso no mainrouter?
+- [ ][2d] full setup flow (legacy)
 - [ ][1d] full deployer flow (legacy)
 - [ ][1d] add the new logos to shell+auth pages
 > BETA RELEASE
@@ -211,6 +211,9 @@ setTimeout(() => {
 - [ ][2h] fine tune `panel/vite.config.ts`
 
 Quickies
+- [ ] move the socket.io stuff from mainshell to a dedicated component child of mainshell
+- [ ] fix: /server/[setup/deployer] opens another tx inside iframe
+- [ ] desabilitar controles com sv não configurado
 - [ ] fix the console bg on light mode
 - [ ] commit the fixes for the player ids and god mode issues
 - [ ] fix the tsc build

panel/src/hooks/auth.ts

@@ -6,6 +6,7 @@ import { accountModalOpenAtom, confirmDialogOpenAtom, promptDialogOpenAtom } fro
 import { isGlobalMenuSheetOpenAtom, isPlayerlistSheetOpenAtom, isServerSheetOpenAtom } from './sheets';
 import { playerModalOpenAtom } from './playerModal';
 import { globalStatusAtom } from './status';
+import { txToast } from '@/components/TxToaster';
 
 
 /**
@@ -125,6 +126,7 @@ export const logoutWatcher = atomEffect((get, set) => {
     set(isPlayerlistSheetOpenAtom, false);
     set(playerModalOpenAtom, false);
     set(globalStatusAtom, null);
+    txToast.dismiss(); //making sure we don't have any pending toasts
 
     //TODO: maybe also erase playerlist/mutex?
 });

panel/src/hooks/pages.ts

@@ -40,7 +40,6 @@ const pageTitleAtom = atom(DEFAULT_TITLE);
 export const useSetPageTitle = () => {
     const setPageTitle = useSetAtom(pageTitleAtom);
     return (title?: string) => {
-        console.log('setPageTitle', title);
         if (title) {
             setPageTitle(title);
         } else {

panel/src/layout/DesktopNavbar.tsx

@@ -82,9 +82,9 @@ export default function DesktopHeader() {
                     <HeaderMenuLink href="/players">
                         Players
                     </HeaderMenuLink>
-                    <HeaderMenuLink href="/history" className='text-accent'>
+                    {/* <HeaderMenuLink href="/history" className='text-accent'>
                         History
-                    </HeaderMenuLink>
+                    </HeaderMenuLink> */}
                     <HeaderMenuLink href="/whitelist">
                         Whitelist
                     </HeaderMenuLink>
@@ -100,7 +100,15 @@ export default function DesktopHeader() {
             <NavigationMenu>
                 <NavigationMenuList>
                     <NavigationMenuItem>
-                        <NavigationMenuTrigger>
+                        <NavigationMenuTrigger
+                            onClick={(e) => {
+                                //To prevent very annoying behavior where you go click on the menu 
+                                //item and it will close the menu because it just opened on hover
+                                if(e.currentTarget.dataset['state'] === 'open') { 
+                                    e.preventDefault();
+                                }
+                            }}
+                        >
                             System
                         </NavigationMenuTrigger>
                         <NavigationMenuContent asChild={true}>

panel/src/layout/MainSheets.tsx

@@ -31,9 +31,9 @@ export function GlobalMenuSheet() {
                         <MenuNavLink href="/players">
                             <UsersIcon className="mr-2 h-4 w-4" />Players
                         </MenuNavLink>
-                        <MenuNavLink href="/history" className="text-accent">
+                        {/* <MenuNavLink href="/history" className="text-accent">
                             <ScrollIcon className="mr-2 h-4 w-4" />History
-                        </MenuNavLink>
+                        </MenuNavLink> */}
                         <MenuNavLink href="/whitelist">
                             <ClipboardCheckIcon className="mr-2 h-4 w-4" />Whitelist
                         </MenuNavLink>

panel/src/layout/MainShell.tsx

@@ -13,11 +13,12 @@ import { getSocket } from '@/lib/utils';
 import { useProcessPlayerlistEvents } from '@/hooks/playerlist';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import PromptDialog from '@/components/PromptDialog';
-import TxToaster, { txToast } from '../components/TxToaster';
+import TxToaster from '@/components/TxToaster';
 import AccountDialog from '@/components/AccountDialog';
 import { useOpenAccountModal } from '@/hooks/dialogs';
 import PlayerModal from './playerModal/PlayerModal';
 import { useOpenPlayerModal } from '@/hooks/playerModal';
+import { navigate as setLocation } from 'wouter/use-location';
 
 
 export default function MainShell() {
@@ -33,6 +34,8 @@ export default function MainShell() {
             openAccountModal();
         } else if (e.data.type === 'openPlayerModal') {
             openPlayerModal(e.data.ref);
+        } else if (e.data.type === 'navigateToPage') {
+            setLocation(e.data.href);
         }
     });
 
@@ -44,8 +47,6 @@ export default function MainShell() {
 
     //Runing on mount only
     useEffect(() => {
-        txToast.dismiss(); //making sure we don't have any pending toasts
-
         //SocketIO
         const rooms = window.txConsts.isWebInterface ? ['status', 'playerlist'] : ['status'];
         const socket = getSocket(rooms);

panel/src/layout/WarningBar.tsx

@@ -7,7 +7,7 @@ import { FaDiscord } from "react-icons/fa";
 
 const LOCALSTORAGE_KEY = 'tsUpdateDismissed';
 const MAJOR_DISMISSAL_TIME = 12 * 60 * 60 * 1000;
-const MINOR_DISMISSAL_TIME = 24 * 60 * 60 * 1000;
+const MINOR_DISMISSAL_TIME = 48 * 60 * 60 * 1000;
 
 const getTsUpdateDismissed = () => {
     const stored = localStorage.getItem(LOCALSTORAGE_KEY);

panel/src/layout/playerlistSidebar/PlayerlistSummary.tsx

@@ -1,7 +1,6 @@
 import { playerCountAtom } from "@/hooks/playerlist";
 import { useAtomValue } from "jotai";
 import { UsersIcon } from "lucide-react";
-import { useEffect, useRef } from "react";
 
 
 export default function PlayerlistSummary() {

panel/src/layout/serverSidebar/ServerControls.tsx

@@ -32,7 +32,7 @@ const controlButtonsVariants = cva(
     }
 );
 
-export default function ServerControls({ isSheet }: { isSheet?: boolean }) {
+export default function ServerControls() {
     const processInstantiated = useAtomValue(processInstantiatedAtom);
     const openConfirmDialog = useOpenConfirmDialog();
     const openPromptDialog = useOpenPromptDialog();

panel/src/layout/serverSidebar/ServerSidebar.tsx

@@ -26,7 +26,7 @@ export function ServerSidebar({ isSheet }: ServerSidebarProps) {
                 !isSheet && 'rounded-xl border border-border bg-card text-card-foreground shadow-sm p-4',
                 'flex flex-col gap-4'
             )}>
-                <ServerControls isSheet />
+                <ServerControls />
                 <ServerStatus />
                 <ServerSchedule />
             </div>

panel/src/lib/utils.ts

@@ -137,3 +137,12 @@ export const handleExternalLinkClick = (event: React.MouseEvent<HTMLElement, Mou
     event.preventDefault();
     openExternalLink(href);
 }
+
+
+/**
+ * Returns a random hsl() color - useful for testing react rendering stuff
+ */
+export const createRandomHslColor = () => {
+    const hue = Math.floor(Math.random() * 360);
+    return `hsl(${hue}, 90%, 65%)`;
+}

web/main/console.ejs

@@ -89,9 +89,6 @@
                         <button type="button" id="clearConsole" class="btn btn-outline-light btn-sm mb-2">
                             Clear Console
                         </button>
-                        <button type="button" id="announcementBtn" class="btn btn-outline-warning btn-sm mb-2" <%= disableAnnouncement %>>
-                            Announcement
-                        </button>
                     </div>
                 </form>
             </div>
@@ -124,7 +121,6 @@
         const historyDiv = document.getElementById('cmdHistoryDiv');
         const historyElement = document.getElementById('cmdHistory');
         const autoScrollBtn = document.getElementById("autoScrollBtn");
-        const announcementBtn = document.getElementById("announcementBtn");
         let commandHistory = [];
         let commandCache = [];
         let autoScroll = true;
@@ -273,42 +269,6 @@
         });
 
         //Buttons
-        announcementBtn.addEventListener("click", async (event) => {
-            const message = await txAdminPrompt({
-                modalColor: 'orange',
-                confirmBtnClass: 'btn-warning',
-                title: 'Announcement',
-                description: 'Type the message to be broadcasted to all players.', 
-                placeholder: 'the server will restart in xxx minutes...'
-            });
-
-            if(message == false) return;
-            if(message.length <= 6){
-                $.notify({ message: 'This message is too short!'}, {type: 'danger'});
-                return;
-            }
-
-            const notify = $.notify({ message: 'Executing Command...' }, {});
-            txAdminAPI({
-                type: "POST",
-                url: '/fxserver/commands',
-                data: {
-                    action: 'admin_broadcast',
-                    parameter: message
-                },
-                success: function (data) {
-                    notify.update('progress', 0);
-                    notify.update('type', data.type);
-                    notify.update('message', data.message);
-                },
-                error: function (xmlhttprequest, textstatus, message) {
-                    notify.update('progress', 0);
-                    notify.update('type', 'danger');
-                    notify.update('message', message);
-                }
-            });
-        });
-
         autoScrollBtn.addEventListener("click", (event) => {
             event.preventDefault();
             autoscrollToggle(true);

web/main/dashboard.ejs

@@ -30,12 +30,12 @@
 
     /* Chart stuff */
     #d3-container {
-        height: 340px;
+        height: 500px;
         margin: auto;
         overflow: hidden;
     }
     #d3-container svg {
-        height: 340px;
+        height: 500px;
         width: 100%;
         margin: auto;
         overflow: hidden;
@@ -103,7 +103,6 @@
 
     .dashboard-chart {
         width: 100% !important; 
-        max-width: 890px !important;
     }
 </style>
 
@@ -135,7 +134,7 @@
 <!-- Chart stuff -->
 <div class="row justify-content-center">
     <div class="dashboard-chart">
-        <div class="card card-accent-info">
+        <div class="card">
             <div class="card-body p-1">
                 <div class="text-center axisTitle d-flex">
                     <div class="mt-1x">

web/main/masterActions.ejs

@@ -233,7 +233,7 @@
                 success: function (data) {
                     if (checkApiLogoutRefresh(data)) return;
                     if(data.success == true){
-                        window.location = '/setup';
+                        navigateParentTo('/server/setup');
                         return;
                     }else{
                         updateMarkdownNotification(data, notify);

web/main/serverLog.ejs

@@ -64,7 +64,6 @@
     @media (min-width: 1250px) and (max-width: 1450px)  {
         .override-bootstrap {
             flex: 0 0 auto !important;
-            max-width: 65% !important;
         }
     }
 
@@ -73,10 +72,10 @@
 
 
 <div class="row">
-    <div class="col-xl-3 col-lg-12 card-containers" style="min-width: 235px;">
-        <div class="card border-primary" >
+    <div class="col-lg-3 col-md-12 card-containers" style="min-width: 235px;">
+        <div class="card" >
             <div class="card-body text-center">
-                <div id="cardstatus" class="d-nonex">
+                <div id="cardstatus">
                     <h4>Mode: <span class="text-success" id="modeLabel">LIVE</span></h4>
                     <p>
                         <strong>From:</strong> <span id="histLogStart">--</span> <br>
@@ -102,7 +101,7 @@
                 <div class='section-title'>
                     <button
                       style='margin-left: 10px;'
-                      class='btn btn-info filter-show-toggle rounded'
+                      class='btn btn-outline-info filter-show-toggle rounded'
                       data-toggle='collapse'
                       href="#filter-control-container"
                       role='button'
@@ -190,8 +189,8 @@
             </div>
         </div>
     </div>
-    <div class="col-xl-9 col-lg-12 card-containers override-bootstrap">
-        <div class="card border-primary">
+    <div class="col-lg-9 col-md-12 card-containers override-bootstrap">
+        <div class="card">
             <div class="card-body p-3" style="position: relative">
                 <pre id="logContainer" class="thin-scroll pre-log-content <%= isWebInterface ? '' : 'nui-height' %>"></pre>
                 <div id="autoScrollDiv">

web/main/settings.ejs

@@ -299,7 +299,7 @@
                                         <strong class="text-secondary">Discord Guild Roles:</strong> Checks if the player joining has a <code>discord:</code> identifier and is present in the Discord guild configured in the Discord Tab and has at least one of the roles specified below.
                                     </p>
                                     <p class="form-text text-muted mb-2">
-                                        <strong class="text-secondary">Approved License:</strong> The player <code>license:</code> identifier must be whitelisted by a txAdmin administrator. This can be done through the <a href="/whitelist">Whitelist page</a>, or the <code>/whitelist</code> Discord bot slash command.
+                                        <strong class="text-secondary">Approved License:</strong> The player <code>license:</code> identifier must be whitelisted by a txAdmin administrator. This can be done through the <a href="#" onclick="navigateParentTo('/whitelist')">Whitelist page</a>, or the <code>/whitelist</code> Discord bot slash command.
                                     </p>
                                 </span>
                             </div>

web/main/whitelist.ejs

@@ -42,7 +42,7 @@
             <div class="alert alert-warning text-center" role="alert">
                 <strong>Warning: The server is not in the "Approved License" whitelist mode.</strong> <br>
                 This means that any changes made in this page will not reflect in the ability of players to connect to the server while the whitelist is in another mode or disabled. <br>
-                This can be changed in the page <a href="/settings">Settings > Player Manager</a>.
+                This can be changed in the page <a href="#" onclick="navigateParentTo('/settings')">Settings > Player Manager</a>.
             </div>
         </div>
     </div>

web/public/js/txadmin/base.js

@@ -30,6 +30,11 @@ const convertMarkdown = (input, inline = false) => {
         .replaceAll('>', '>');
 };
 
+//Navigates parent without refreshing the page
+const navigateParentTo = (href) => {
+    return window.parent.postMessage({ type: 'navigateToPage', href});
+};
+
 //================================================================
 //================================================= Event Handlers
 //================================================================