Add Statistics and Admin Portal to README.md

Author: Sean-Der

.env

@@ -4,7 +4,7 @@
 
 # HTTP_ADDRESS=:8080
 # HTTPS_REDIRECT_PORT=80
-# HTTP_ENABLE_REDIRECT=TRUE
+# ENABLE_HTTP_REDIRECT=TRUE
 # NETWORK_TEST_ON_START=TRUE
 # INCLUDE_PUBLIC_IP_IN_NAT_1_TO_1_IP=TRUE
 
@@ -20,9 +20,9 @@
 # AUTHORIZATION
 # ################
 
-# LOCAL STREAM PROFILE 
-# STREAM_PROFILE_ACTIVE=TRUE
+# LOCAL STREAM PROFILES
 # STREAM_PROFILE_PATH=./profiles
+# STREAM_PROFILE_POLICY=ANYONE_WITH_RESERVED
 
 # WEBHOOK AUTHORIZATION
 # WEBHOOK_URL=http://your-server
@@ -33,6 +33,7 @@
 
 # DISABLE_FRONTEND=TRUE
 # FRONTEND_PATH="./web/build"
+# FRONTEND_ADMIN_TOKEN=ChangeMe
 
 # ################
 # DEBUGGING

.env.development

@@ -4,7 +4,7 @@
 
 # HTTP_ADDRESS=:8080
 # HTTPS_REDIRECT_PORT=80
-# HTTP_ENABLE_REDIRECT=TRUE
+# ENABLE_HTTP_REDIRECT=TRUE
 # NETWORK_TEST_ON_START=FALSE
 # INCLUDE_PUBLIC_IP_IN_NAT_1_TO_1_IP=TRUE
 
@@ -20,9 +20,9 @@
 # AUTHORIZATION
 # ################
 
-# LOCAL STREAM PROFILE 
-# STREAM_PROFILE_ACTIVE=TRUE
+# LOCAL STREAM PROFILES
 # STREAM_PROFILE_PATH=./profiles
+# STREAM_PROFILE_POLICY=ANYONE_WITH_RESERVED
 
 # WEBHOOK AUTHORIZATION
 # WEBHOOK_URL=http://your-server
@@ -33,6 +33,7 @@
 
 # DISABLE_FRONTEND=TRUE
 # FRONTEND_PATH="./web/build"
+# FRONTEND_ADMIN_TOKEN=ChangeMe
 
 # ################
 # STUN

.env.production

@@ -4,7 +4,7 @@
 
 # HTTP_ADDRESS=:8080
 # HTTPS_REDIRECT_PORT=80
-# HTTP_ENABLE_REDIRECT=TRUE
+# ENABLE_HTTP_REDIRECT=TRUE
 # NETWORK_TEST_ON_START=TRUE
 # INCLUDE_PUBLIC_IP_IN_NAT_1_TO_1_IP=TRUE
 
@@ -20,9 +20,9 @@
 # AUTHORIZATION
 # ################
 
-# LOCAL STREAM PROFILE
-# STREAM_PROFILE_ACTIVE=TRUE
+# LOCAL STREAM PROFILES
 # STREAM_PROFILE_PATH=./profiles
+# STREAM_PROFILE_POLICY=ANYONE_WITH_RESERVED
 
 # WEBHOOK AUTHORIZATION
 # WEBHOOK_URL=http://your-server
@@ -33,6 +33,7 @@
 
 # DISABLE_FRONTEND=TRUE
 # FRONTEND_PATH="./web/build"
+# FRONTEND_ADMIN_TOKEN=ChangeMe
 
 # ################
 # DEBUGGING

.github/img/adminPortal.png

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { LocaleContext } from "../../../providers/LocaleProvider";
 import {
   clearAdminToken,
@@ -9,8 +9,9 @@ import {
 const StatusPage = () => {
   const { locale } = useContext(LocaleContext)
   const [response, setResponse] = useState<StatusResult[]>()
+  const statusRefreshIntervalMs = 5000
 
-  const refreshStatus = () => {
+  const refreshStatus = useCallback(() => {
     fetch(`/api/admin/status`, {
       method: "GET",
       headers: {
@@ -28,11 +29,14 @@ const StatusPage = () => {
       .then((result) => {
         setResponse(() => result)
       });
-  };
+  }, []);
 
   useEffect(() => {
     refreshStatus()
-  }, [])
+    const interval = setInterval(refreshStatus, statusRefreshIntervalMs);
+
+    return () => clearInterval(interval);
+  }, [refreshStatus, statusRefreshIntervalMs])
 
   return (
     <div className="p-6 w-full max-w-6xl mx-auto">