@bananacool467/authtics-host 0.2.8 → 0.2.9

package/README.md

@@ -1,6 +1,6 @@
 # Authtics Host
 
-Version 0.2.8, License: MIT
+Version 0.2.9, License: MIT
 
 Authtics Host is a web framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering), SSG (Static Site Generation), CSR (Client-Side Rendering) and SRTWS (Site Rendering Through WebSockets) and uses **Esbuild**. This is not to be confused with auth platforms.
 

package/dist/cli.js

@@ -425,6 +425,12 @@ export default class App {
                     message: "ok"
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/is-users-paused', async (req, res) => {
             let datMatched = false;
@@ -439,6 +445,12 @@ export default class App {
                     realInfo: usersPaused
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-dat-restriction-missing', async (req, res) => {
             let datMatched = false;
@@ -457,6 +469,12 @@ export default class App {
                     enabled: datRestrictedEnv
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-dat-matching', async (req, res) => {
             let datMatched = false;
@@ -487,6 +505,12 @@ export default class App {
                     heapTotal
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-user-settings', async (req, res) => {
             let datMatched = false;
@@ -500,6 +524,12 @@ export default class App {
                     showError: config_.showError !== undefined ? config_.showError : true
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-server-info", async (req, res) => {
             let datMatched = false;
@@ -513,6 +543,12 @@ export default class App {
                     uptime, totalRequests, users
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/restart", async (req, res) => {
             let datMatched = false;
@@ -522,17 +558,23 @@ export default class App {
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
-                res.end(JSON.stringify({ message: "Restarting..." }));
                 const { spawn } = await import('node:child_process');
                 const child = spawn(process.argv[0], process.argv.slice(1), {
                     detached: true,
                     stdio: 'inherit'
                 });
                 child.unref();
+                res.end(JSON.stringify({ message: "Restarting..." }));
                 this.server?.close(() => {
                     process.kill(process.pid, 'SIGTERM');
                 });
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/shutdown", async (req, res) => {
             let datMatched = false;
@@ -547,6 +589,12 @@ export default class App {
                     process.kill(process.pid, 'SIGTERM');
                 });
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-render-type", async (req, res) => {
             let datMatched = false;
@@ -560,6 +608,12 @@ export default class App {
                     renderType: config_.renderType
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-compiler", async (req, res) => {
             let datMatched = false;
@@ -573,6 +627,12 @@ export default class App {
                     compiler: config_.compilerType
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-host-ver", async (req, res) => {
             let datMatched = false;
@@ -591,6 +651,12 @@ export default class App {
                     version: packageJsonVersion
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-file-by-pathname", async (req, res) => {
             let datMatched = false;
@@ -628,6 +694,12 @@ export default class App {
                     filePath: (filePath ? filePath : "Cannot find file because autoPage is disabled.")
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/ping", async (req, res) => {
             let datMatched = false;
@@ -639,6 +711,12 @@ export default class App {
                 res.setHeader("Content-Type", "application/json");
                 res.end(JSON.stringify({ status: "ok" }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-connection', async (req, res) => {
             let datMatched = false;
@@ -652,6 +730,12 @@ export default class App {
                     httpVersion: req.httpVersion
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
     }
     async startServer() {

package/dist/devPanel.js

@@ -1,7 +1,91 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { ShieldCheck, Shield, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, Cog, TriangleAlert, Eye, Zap, Power, Check as Tick, CheckCircle2 } from 'lucide-react';
+import { ShieldCheck, Shield, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, Cog, TriangleAlert, Eye, Zap, Power, Check as Tick, CheckCircle2, EyeOff, Copy, CopyCheck } from 'lucide-react';
 import { TraceMap, originalPositionFor, sourceContentFor, } from "@jridgewell/trace-mapping";
+let pT, rT, sT;
+function Tab({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function TabBody({ children }) {
+    return (_jsx("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: children }));
+}
+function TabData({ title, titleColor, content, contentColor }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '6px 10px',
+            background: '#fff',
+            borderRadius: '50px',
+            border: '1px solid #eee',
+            fontSize: '12px',
+            color: '#333',
+        }, children: [_jsx("span", { style: { fontSize: '12px', color: titleColor ?? '#333' }, children: title }), _jsx("span", { style: { fontSize: '12px', color: contentColor ?? 'blue' }, children: content })] }));
+}
+function TabHeader({ title, icon, onBack, children }) {
+    return (_jsxs("div", { style: {
+            padding: '6px 8px',
+            borderBottom: '1px solid #ddd',
+            background: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            margin: '10px',
+            borderRadius: '100px'
+        }, children: [_jsxs("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex'
+                }, children: [_jsx(PanelButton, { onClick: () => { onBack(); }, style: { color: '#555' }, children: _jsx(ArrowLeft, { size: 12 }) }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [icon, " ", title] })] }), _jsx("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex'
+                }, children: children })] }));
+}
+async function increaseDots(dots, setter, type) {
+    return new Promise((r) => {
+        const t = setTimeout(() => {
+            if (type == 1) {
+                if (pT == null)
+                    r(0);
+            }
+            if (type == 2) {
+                if (rT == null)
+                    r(0);
+            }
+            if (type == 3) {
+                if (sT == null)
+                    r(0);
+            }
+            if (dots == 0)
+                r(0);
+            let newDots = dots;
+            if (dots < 6)
+                newDots++;
+            else
+                newDots = 1;
+            r(newDots);
+        }, 250);
+        if (type === 1)
+            pT = t;
+        if (type === 2)
+            rT = t;
+        if (type === 3)
+            sT = t;
+        setter(t);
+    });
+}
+function finalizeDots(text, dots) {
+    if (dots === 1)
+        return text + "   ";
+    if (dots === 2)
+        return text + ".  ";
+    if (dots === 3)
+        return text + ".. ";
+    if (dots === 4)
+        return text + "...";
+    if (dots === 5)
+        return text + " ..";
+    if (dots === 6)
+        return text + "  .";
+}
 export async function mapGeneratedLocation(location) {
     try {
         if (!location.file || !location.line || !location.column) {
@@ -458,7 +542,7 @@ function SecuredTab() {
     return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(CircleX, { size: 32, color: '#ff7d7d' }), _jsx("span", { style: { color: '#ff7d7d', fontSize: 24 }, children: "This tab is currently not accessible" }), _jsx("span", { style: { color: '#ff7d7d', fontSize: 12 }, children: "To access this tab, you need to set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart." })] }));
 }
 function ShutdownTab() {
-    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(Power, { size: 32, color: 'grey' }), _jsx("span", { style: { color: 'grey', fontSize: 24 }, children: "The server was shutdown by you." })] }));
+    return (_jsx(Tab, { children: _jsx(TabBody, { children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(Power, { size: 32, color: 'grey' }), _jsx("span", { style: { color: 'grey', fontSize: 24 }, children: "The server was shutdown by you." })] }) }) }));
 }
 function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled, background }) {
     const [hovered, setHovered] = useState(false);
@@ -472,7 +556,7 @@ function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled,
             }
         }, onMouseEnter: () => setHovered(true), onMouseLeave: () => { setHovered(false); setPressed(false); }, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
             cursor: 'pointer',
-            borderRadius: '10px',
+            borderRadius: '50px',
             padding: '6px 10px',
             fontSize: '11px',
             display: 'flex',
@@ -484,9 +568,9 @@ function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled,
             background: disabled
                 ? '#bdbdbd'
                 : pressed
-                    ? `color-mix(in srgb, ${background} 12%, transparent)`
+                    ? `color-mix(in srgb, ${background} 85%, transparent)`
                     : hovered
-                        ? `color-mix(in srgb, ${background} 6%, transparent)`
+                        ? `color-mix(in srgb, ${background} 95%, transparent)`
                         : background ?? '#fff',
             transition: 'background 0.15s ease',
             ...style,
@@ -512,7 +596,9 @@ export default function DevPanel() {
     const [panelCustomOpen, setPanelCustomOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [shutdown, setShutdown] = useState(false);
-    const [shuttingDown, setShuttingDown] = useState(false);
+    const [shuttingDown, setShuttingDown] = useState(0);
+    const [restarting, setRestarting] = useState(0);
+    const [pausing, setPausing] = useState(0);
     const [packageSecurityOpen, setPackageSecurityOpen] = useState(false);
     const [highRiskDeps, setHighRiskDeps] = useState([]);
     const [mediumRiskDeps, setMediumRiskDeps] = useState([]);
@@ -551,6 +637,7 @@ export default function DevPanel() {
     const [tokenHidden, setTokenHidden] = useState(true);
     const [locationMode, setLocationMode] = useState("approximate");
     const NOTIFICATION_SLEEP_MS = 10 * 60 * 1000;
+    const [copied, setCopied] = useState(false);
     const notificationSleepingUntilRef = useRef(0);
     const [notificationSleepingUntil, setNotificationSleepingUntil] = useState(0);
     const sleepErrorNotifications = () => {
@@ -567,6 +654,9 @@ export default function DevPanel() {
     const [isAtBottom, setIsAtBottom] = useState(true);
     const [datRestrictionMissing, setDatRestrictionMissing] = useState(true);
     const [heapResult, setHeapResult] = useState("0 Bytes / 0 Bytes");
+    const [shuttingDownTimeout, setShuttingDownTimeout] = useState();
+    const [restartingTimeout, setRestartingTimeout] = useState();
+    const [pausingTimeout, setPausingTimeout] = useState();
     const cookie = {
         set: (k, v, sS = "Lax", s = true, mA = null) => {
             const cookieParts = [`${encodeURIComponent(k)}=${encodeURIComponent(v)}`, "path=/"];
@@ -615,6 +705,32 @@ export default function DevPanel() {
             consoleScrollRef.current.scrollTop = consoleScrollRef.current.scrollHeight;
         }
     }, [filteredLogs, isAtBottom]);
+    useEffect(() => {
+        if (pausing == 0) {
+            clearTimeout(pausingTimeout);
+            clearTimeout(pT);
+            pT = null;
+        }
+        if (restarting == 0) {
+            clearTimeout(restartingTimeout);
+            clearTimeout(rT);
+            rT = null;
+        }
+        if (shuttingDown == 0) {
+            clearTimeout(shuttingDownTimeout);
+            clearTimeout(sT);
+            sT = null;
+        }
+        async function run() {
+            if (pausing != 0)
+                setPausing(await increaseDots(pausing, setPausingTimeout, 1));
+            if (restarting != 0)
+                setRestarting(await increaseDots(restarting, setRestartingTimeout, 2));
+            if (shuttingDown != 0)
+                setShuttingDown(await increaseDots(shuttingDown, setShuttingDownTimeout, 3));
+        }
+        run();
+    }, [pausing, restarting, shuttingDown]);
     const loop = () => {
         frameCount.current++;
         requestAnimationFrame(loop);
@@ -776,20 +892,27 @@ export default function DevPanel() {
         }, 250);
     }, []);
     const restart = async () => {
+        setRestarting(1);
         await fetch('/__authtics_host_apis__/restart', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({})
         });
+        setRestarting(0);
+        clearTimeout(restartingTimeout);
+        setRestartingTimeout(undefined);
+        window.location.reload();
     };
     const shutDown = async () => {
-        setShuttingDown(true);
+        setShuttingDown(1);
         await fetch('/__authtics_host_apis__/shutdown', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({})
         });
         setShutdown(true);
+        clearTimeout(shuttingDownTimeout);
+        setShuttingDownTimeout(undefined);
     };
     useEffect(() => {
         const animationId = requestAnimationFrame(loop);
@@ -877,6 +1000,16 @@ export default function DevPanel() {
         }, Math.max(remaining, 0));
         return () => window.clearTimeout(timer);
     }, [notificationSleepingUntil]);
+    const handleCopy = async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
     useEffect(() => {
         installConsoleInterceptor();
         installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-499), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setEventSources(prev => [...prev.slice(-499), f]), (f) => setEventSources(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setWebSockets(prev => [...prev.slice(-499), f]), (f) => setWebSockets(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => [...prev.slice(-499), f]), (f) => setResourcesFound(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => prev.filter(p => p.id !== f.id)), (sent) => {
@@ -1016,6 +1149,7 @@ export default function DevPanel() {
         __();
     }, []);
     const pause_Resume_Users = async () => {
+        setPausing(1);
         if (usersPausedRealInfo) {
             const resp = await fetch('/__authtics_host_apis__/set-users-paused', {
                 method: 'POST',
@@ -1040,6 +1174,9 @@ export default function DevPanel() {
                 setUsersPausedRealInfo(true);
             }
         }
+        setPausing(0);
+        clearTimeout(pausingTimeout);
+        setPausingTimeout(undefined);
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'absolute',
@@ -1173,10 +1310,10 @@ export default function DevPanel() {
                             maxHeight: drawerHeight,
                             opacity: open ? 1 : 0,
                             pointerEvents: open ? 'auto' : 'none',
-                            overflow: (!consoleOpen && !networkOpen && !aboutHostOpen && !webpageInfoOpen && !clientInfoOpen ? 'hidden auto' : 'hidden'),
                             borderRadius: '10px',
                             transition: 'max-height 0.35s ease, opacity 0.25s ease',
                             border: '1px solid #e6e3e3',
+                            overflow: (!consoleOpen && !packageSecurityOpen && !settingsOpen && !panelCustomOpen && !serverInfoOpen && !routeOpen && !networkOpen && !aboutHostOpen && !webpageInfoOpen && !clientInfoOpen ? 'hidden auto' : 'hidden'),
                         }, children: _jsxs("div", { style: {
                                 background: '#f7f7f7',
                                 borderRadius: '10px',
@@ -1193,7 +1330,7 @@ export default function DevPanel() {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 gap: '6px',
-                                            }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), _jsxs("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: [filteredLogs.length, " message", filteredLogs.length !== 1 ? 's' : '', " shown, ", logs.length, " in total"] }), _jsx(PanelButton, { onClick: () => setLogs([]), style: { color: '#aaa', marginLeft: 'auto' }, children: "Clear" })] }), _jsx("div", { style: {
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), _jsxs("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: [logs.length, " log", logs.length !== 1 ? 's' : ''] }), _jsx(PanelButton, { onClick: () => setLogs([]), style: { color: '#aaa', marginLeft: 'auto' }, children: "Clear" })] }), _jsx("div", { style: {
                                                 display: 'flex',
                                                 gap: '4px',
                                                 padding: '5px 8px',
@@ -1242,7 +1379,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1300,7 +1437,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1309,16 +1446,17 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
+                                                        overflowWrap: 'break-word', wordBreak: 'break-word',
                                                     }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "File Path" }), _jsx("span", { style: { color: 'blue', fontFamily: 'monospace' }, children: path })] }), _jsxs("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1334,7 +1472,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1343,7 +1481,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1352,7 +1490,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1361,7 +1499,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1377,7 +1515,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1386,7 +1524,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1395,7 +1533,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1406,12 +1544,12 @@ export default function DevPanel() {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 gap: '6px',
-                                            }, children: [_jsxs(PanelButton, { onClick: () => setPanelCustomOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Configuration"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Colors" }), _jsxs("div", { style: {
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setPanelCustomOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Customization"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Colors" }), _jsxs("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         alignItems: 'center'
                                                     }, children: [_jsxs("div", { style: { background: '#16a34a', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #15803d', gap: '8px' }, onClick: () => {
@@ -1450,7 +1588,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1459,16 +1597,16 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Made By" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: "bananakitssu" })] }), _jsxs("a", { style: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Made By" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: "bananakitssu ( bananacool467 )" })] }), _jsxs("a", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1486,7 +1624,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1495,7 +1633,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1504,7 +1642,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1535,16 +1673,34 @@ export default function DevPanel() {
                                                 maxHeight: '260px',
                                                 flexDirection: 'column',
                                             }, children: [_jsxs("div", { style: {
-                                                        justifyContent: 'space-between',
+                                                        flexDirection: "column",
                                                         padding: '6px 10px',
                                                         background: '#fff',
                                                         borderRadius: '10px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                        display: 'flex'
+                                                        display: 'flex',
+                                                        gap: "8px"
                                                     }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333', position: 'relative' }, children: "DAT (Developer Access Token)" }), _jsxs("div", { style: { position: 'relative',
-                                                                display: 'inline-flex' }, children: [_jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: token }), tokenHidden && (_jsxs("div", { style: {
+                                                                display: 'inline-flex' }, children: [_jsxs("span", { style: { fontSize: '12px', color: 'blue', display: "flex", justifyContent: "space-between" }, children: [token, !tokenHidden && (_jsxs("div", { style: {
+                                                                                position: 'absolute',
+                                                                                marginTop: '-2.5px',
+                                                                                height: '100%',
+                                                                                backdropFilter: 'blur(10px)',
+                                                                                backgroundColor: 'rgba(255,255,255,0.3)',
+                                                                                cursor: 'pointer',
+                                                                                padding: '2.5px 2.5px',
+                                                                                borderRadius: '8px',
+                                                                                textAlign: 'center',
+                                                                                display: 'flex',
+                                                                                justifyContent: 'center',
+                                                                                alignItems: 'center',
+                                                                                gap: '4px',
+                                                                                paddingLeft: 5,
+                                                                                paddingRight: 5,
+                                                                                right: 0
+                                                                            }, onClick: () => setTokenHidden(true), children: [_jsx(EyeOff, { size: 12 }), "Hide"] }))] }), tokenHidden && (_jsxs("div", { style: {
                                                                         position: 'absolute',
                                                                         top: 0, left: 0,
                                                                         marginTop: '-2.5px',
@@ -1559,7 +1715,9 @@ export default function DevPanel() {
                                                                         justifyContent: 'center',
                                                                         alignItems: 'center',
                                                                         gap: '4px'
-                                                                    }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
+                                                                    }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] }), _jsxs(PanelButton, { onClick: () => {
+                                                                handleCopy(token || "");
+                                                            }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#00b2ed' }, children: [copied ? (_jsx(CopyCheck, { size: 16 })) : (_jsx(Copy, { size: 16 })), " ", copied ? "Copied!" : "Copy"] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
                                                             display: 'flex',
                                                             background: '#ba4e4e',
                                                             borderRadius: '10px',
@@ -1579,7 +1737,7 @@ export default function DevPanel() {
                                                             gap: '6px',
                                                             color: '#fff',
                                                             flexDirection: 'row',
-                                                        }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Restart App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Restarting the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: shuttingDown ? "Shutting Down App" : "Shut Down App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Shutting down the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: (datRestrictionMissing ? '#fff' : '#333'), justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#f2f2f2') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) : (_jsx(_Fragment, {}))] }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
+                                                        }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: _jsx("pre", { children: restarting ? String(finalizeDots("Restarting App", restarting)) : "Restart App" }) }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Restarting the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: _jsx("pre", { children: shuttingDown ? String(finalizeDots("Shutting Down App", shuttingDown)) : "Shut Down App" }) }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Shutting down the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: (datRestrictionMissing ? '#fff' : '#333'), justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#f2f2f2') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: _jsx("pre", { children: pausing ? String(finalizeDots("Pausing", pausing)) : usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) : (_jsx(_Fragment, {}))] }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Authtics Host, A Next.js-inspired web framework for Node.js and React with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",