@bananacool467/authtics-host 0.2.3 → 0.2.5

package/README.md

@@ -1,7 +1,6 @@
 # Authtics Host
 
-Version 0.2.3
-License: MIT
+Version 0.2.5, License: MIT
 
 Authtics Host is a web framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild. This is not to be confused with auth platforms.
 
@@ -37,7 +36,7 @@ To make your app, with auto paging and auto filing, your file tree should look l
             index.tsx
 ```
 
-**(NOTE: the public folder is for auto filing)**
+**(Note: the public folder is for auto filing)**
 
 `index.ts` should look like:
 ```ts
@@ -115,9 +114,9 @@ export default function App() {
   )
 }
 ```
-**(NOTE: You can change the `statusCode` to anything you want, the property is optional, it either gives 404 or 200 if the `statusCode` is missing.)**
+**(Note: You can change the `statusCode` to anything you want, the property is optional, it either gives 404 or 200 if the `statusCode` is missing.)**
 
-**(NOTE: To make an 404 page you can use:**
+**(Note: To make an 404 page you can use:**
 ```tsx
 <Route statusCode={404} page={NotFound} />
 ```
@@ -167,7 +166,7 @@ The Developer Panel is what you could use to help you debug your code. The Devel
 
 The information the Developer Panel shows outside of the tabs is just your **DAT** (Developer Access Token).
 
-**(NOTE: If you do not set DAT restriction (Which will be explained on how to set it up in the next section), you will only get access to the Console and Network tabs)**
+**(Note: If you do not set DAT restriction (Which will be explained on how to set it up in the next section), you will only get access to the Console and Network tabs)**
 
 The Developer Panel also have remote buttons:
 
@@ -229,6 +228,8 @@ export function Component() {
 
 The developer might also redesign the UI for the DevPanel using [UI Tools](https://npmjs.com/package/@bananakitssu/ui-tools).
 
+And also maybe, add Developer Panel customization.
+
 > **Warning**:
 > Asking AI about HostJS is not recommended, it will give an Auth platform and call HostJS/Authtics Host a typo, say it doesn't exist, say it was renamed, it is private, or the account doesn't exist. Or if it knows, it may swap your server script with regular **Node.js**/**ExpressJS**/**Next.js** or use **Next.js-like** code because this framework is **Next.js-inspired**
 
@@ -254,7 +255,7 @@ But if you have multiple DATs, then use:
 
 There isn't any limit of DATs you can add.
 
-**(NOTE: Adding your DAT will give you access to Restart and Shutdown and Pause/Resume Users and other features in the Developer Panel)**
+**(Note: Adding your DAT will give you access to Restart and Shutdown and Pause/Resume Users and other features in the Developer Panel)**
 
 ## Reasons for the name, Authtics Host
 

package/dist/cli.js

@@ -143,9 +143,9 @@ export default class App {
         this.startServer();
         this.post('/__authtics_host_apis__/set-users-paused', async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 usersPaused = req.body.paused;
@@ -157,9 +157,9 @@ export default class App {
         });
         this.post('/__authtics_host_apis__/is-users-paused', async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             res.writeHead(200, { "Content-Type": "application/json" });
             if (datMatched) {
@@ -172,11 +172,11 @@ export default class App {
         this.post('/__authtics_host_apis__/get-dat-restriction-missing', async (req, res) => {
             let datMatched = false;
             let datRestrictedEnv = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
             if (config_.dat == undefined)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 if (config_.dat !== undefined)
@@ -189,11 +189,11 @@ export default class App {
         });
         this.post('/__authtics_host_apis__/get-dat-matching', async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
             if (config_.dat == undefined)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             res.writeHead(200, { "Content-Type": "application/json" });
             res.end(JSON.stringify({
@@ -202,9 +202,9 @@ export default class App {
         });
         this.post('/__authtics_host_apis__/get-cpu_memory', async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 const { heapUsed, heapTotal, rss } = process.memoryUsage();
@@ -212,15 +212,16 @@ export default class App {
                 res.writeHead(200, { "Content-Type": "application/json" });
                 res.end(JSON.stringify({
                     cpuUsage,
-                    heapUsed
+                    heapUsed,
+                    heapTotal
                 }));
             }
         });
         this.post('/__authtics_host_apis__/get-user-settings', async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -231,9 +232,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/get-server-info", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -244,9 +245,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/restart", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -257,14 +258,16 @@ export default class App {
                     stdio: 'inherit'
                 });
                 child.unref();
-                process.kill(process.pid, 'SIGTERM');
+                this.server.close(() => {
+                    process.kill(process.pid, 'SIGTERM');
+                });
             }
         });
         this.post("/__authtics_host_apis__/shutdown", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -276,9 +279,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/get-is-ssr", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -289,9 +292,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/get-compiler", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -302,9 +305,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/get-host-ver", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 const packageJsonPath = path.join(__dirname, '../package.json');
@@ -320,9 +323,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/get-file-by-pathname", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 const pathname = req.body.pathname;
@@ -357,9 +360,9 @@ export default class App {
         });
         this.post("/__authtics_host_apis__/ping", async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.setHeader("Content-Type", "application/json");
@@ -368,9 +371,9 @@ export default class App {
         });
         this.post('/__authtics_host_apis__/get-connection', async (req, res) => {
             let datMatched = false;
-            if (config_.dat && config_.dat == req.cookies.dat)
+            if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
-            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.cookies.dat))
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(req.dat))
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
@@ -552,7 +555,7 @@ async function start() {
         }
         const routeKey = `${method}:${pathname}`;
         if (routes.has(routeKey)) {
-            if (Array.isArray(config_.dat) && !config_.dat.includes(req.cookies.dat) && usersPaused && !routeKey.endsWith('.js')) {
+            if (Array.isArray(config_.dat) && !config_.dat.includes(req.dat) && usersPaused && !routeKey.endsWith('.js')) {
                 if (autoPaging) {
                     const pausedTsxFile = pagesDir ? path.join(pagesDir, "_paused.tsx") : undefined;
                     if (fs.existsSync(pausedTsxFile || "")) {
@@ -562,7 +565,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.dat, config_.dat);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -605,7 +608,7 @@ async function start() {
                     message: "unhandled request"
                 }));
             }
-            if (config_.dat !== req.cookies.dat && usersPaused && !routeKey.endsWith('.js')) {
+            if (config_.dat !== req.dat && usersPaused && !routeKey.endsWith('.js') && !Array.isArray(config_.dat)) {
                 if (autoPaging) {
                     const pausedTsxFile = pagesDir ? path.join(pagesDir, "_paused.tsx") : undefined;
                     if (fs.existsSync(pausedTsxFile || "")) {
@@ -679,7 +682,7 @@ async function start() {
             req.on('close', () => { hmrClients.delete(res); users--; });
             return;
         }
-        if (Array.isArray(config_.dat) && !config_.dat.includes(req.cookies.dat) && usersPaused) {
+        if (Array.isArray(config_.dat) && !config_.dat.includes(req.dat) && usersPaused) {
             if (autoPaging) {
                 const pausedTsxFile = pagesDir ? path.join(pagesDir, "_paused.tsx") : undefined;
                 if (fs.existsSync(pausedTsxFile || "")) {
@@ -732,7 +735,7 @@ async function start() {
                 message: "unhandled request"
             }));
         }
-        if (config.dat !== req.cookies.dat && usersPaused) {
+        if (config.dat !== req.dat && usersPaused && !Array.isArray(config_.dat)) {
             if (autoPaging) {
                 const pausedTsxFile = pagesDir ? path.join(pagesDir, "_paused.tsx") : undefined;
                 if (fs.existsSync(pausedTsxFile || "")) {

package/dist/devPanel.js

@@ -367,6 +367,7 @@ export default function DevPanel() {
     const datRestrictionMissingRef = useRef(true);
     const cpuUsage = useRef(0);
     const heapUsage = useRef(0);
+    const heapTotal = useRef(0);
     const [datMatch, setDatMatch] = useState(false);
     const [compilerType, setCompilerType] = useState("?");
     const [httpVersion, setHttpVersion] = useState("v?.?");
@@ -384,6 +385,7 @@ export default function DevPanel() {
     const consoleScrollRef = useRef(null);
     const [isAtBottom, setIsAtBottom] = useState(true);
     const [datRestrictionMissing, setDatRestrictionMissing] = useState(true);
+    const [heapResult, setHeapResult] = useState("0 Bytes / 0 Bytes");
     const cookie = {
         set: (k, v) => document.cookie = `${k}=${v}; path=/`,
         get: (k) => Object.fromEntries(document.cookie.split(";")
@@ -484,6 +486,7 @@ export default function DevPanel() {
                 const data = await resp.json();
                 cpuUsage.current = data.cpuUsage;
                 heapUsage.current = data.heapUsed;
+                heapTotal.current = data.heapTotal;
             }
         };
         const getHostVersion = async () => {
@@ -630,19 +633,31 @@ export default function DevPanel() {
         }, 1000);
         return () => clearInterval(interval);
     }, []);
+    const formatBytes = (b, d = 2, r = false) => {
+        if (b === 0)
+            return r ? 'Bytes' : '0 Bytes';
+        const k = 1024;
+        const dm = d < 0 ? 0 : d;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+        const i = Math.floor(Math.log(b) / Math.log(k));
+        return r ? sizes[i] : parseFloat((b / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    };
     useEffect(() => {
         const interval = setInterval(() => {
             const s = pendingSent.current;
             const r = pendingReceived.current;
             const c = cpuUsage.current;
-            const h = heapUsage.current;
+            const h = formatBytes(heapUsage.current);
+            const t = ` ${formatBytes(heapUsage.current, 0, true)} / ` + formatBytes(heapTotal.current);
+            setHeapResult(t);
+            const h_num = Number(h.split(" ")[0]);
             const f = frames.current;
             pendingSent.current = 0;
             pendingReceived.current = 0;
             cpuUsage.current = 0;
             heapUsage.current = 0;
             setCpuUsageHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), c]);
-            setHeapUsageHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), h]);
+            setHeapUsageHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), h_num]);
             setSentHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), s]);
             setReceivedHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), r]);
             setFpsHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), f]);
@@ -667,11 +682,7 @@ export default function DevPanel() {
             ;
         };
         try {
-            let existingToken = null;
-            try {
-                existingToken = localStorage.getItem('dat');
-            }
-            catch (e) { }
+            const existingToken = cookie.get('dat');
             if (existingToken) {
                 setToken(existingToken);
                 let length_ = existingToken?.split('');
@@ -685,22 +696,12 @@ export default function DevPanel() {
                 const serverDatRestricted = cfg?.datRestricted === true;
                 if (serverDevMode && !serverDatRestricted) {
                     const newToken = generateToken();
-                    try {
-                        let localStorageToken;
-                        try {
-                            localStorageToken = localStorage.getItem('dat');
-                        }
-                        catch (e) { }
-                        cookie.set('dat', localStorageToken || newToken);
-                        setToken(newToken);
-                        let length_ = newToken?.split('');
-                        let length;
-                        length = length_?.length;
-                        setTokenLength(length);
-                    }
-                    catch (error) {
-                        console.error('[Authtics Host] Error storing token in localStorage:', error);
-                    }
+                    cookie.set('dat', newToken);
+                    setToken(newToken);
+                    let length_ = newToken?.split('');
+                    let length;
+                    length = length_?.length;
+                    setTokenLength(length);
                 }
             }
         }
@@ -1168,7 +1169,7 @@ export default function DevPanel() {
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total current users" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: users })] }), _jsx(Sparkline, { data: cpuUsageHistory, color: "#3b82f6", label: "CPU Usage", unit: "" }), _jsx(Sparkline, { data: heapUsageHistory, color: "#3b82f6", label: "Heap Used", unit: "" })] })] })) : !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px', gap: '4px', display: 'flex', flexDirection: 'column' }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), logs.length > 0 && (_jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: logs.length }))] }), _jsxs(PanelButton, { onClick: () => setRouteOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsxs("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }, children: [datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" }), pathName] })] }), _jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsx(PanelButton, { onClick: () => setNetworkOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] }) }), _jsxs(PanelButton, { onClick: () => setClientInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setAboutHostOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About HostJS"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setServerInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] })] }), _jsxs("div", { style: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total current users" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: users })] }), _jsx(Sparkline, { data: cpuUsageHistory, color: "#3b82f6", label: "CPU Usage", unit: "" }), _jsx(Sparkline, { data: heapUsageHistory, color: "#3b82f6", label: "Heap Used", unit: heapResult })] })] })) : !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px', gap: '4px', display: 'flex', flexDirection: 'column' }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), logs.length > 0 && (_jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: logs.length }))] }), _jsxs(PanelButton, { onClick: () => setRouteOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsxs("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }, children: [datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" }), pathName] })] }), _jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsx(PanelButton, { onClick: () => setNetworkOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] }) }), _jsxs(PanelButton, { onClick: () => setClientInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setAboutHostOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About HostJS"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setServerInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] })] }), _jsxs("div", { style: {
                                                 padding: '6px 8px',
                                                 borderTop: '1px solid #ddd',
                                                 background: '#fff',
@@ -1222,7 +1223,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: "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: "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: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/package.json

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