Finally done!

html/src/auth.js

@@ -5,6 +5,11 @@ let c = null
 
 export function authClient(rawClient) {
   c = this
+  this.username = null
+  this.permGroups = null
+  this.accountCreated = null
+  this.passwordUpdated = null
+  this.id = null
   this.rawClient = rawClient
 
   this.login = (username, password)=>{
@@ -21,10 +26,6 @@ export function authClient(rawClient) {
     })
   }
 
-  this.send = (data)=>{
-    
-  }
-
   this.clidata = (data)=>{
     const session = utils.getCookie('session')
     if(session != ''){
@@ -45,6 +46,13 @@ export function authClient(rawClient) {
   }
 
   this.reauth = (data)=>{
+
+    this.username = data.data.username
+    this.id = data.data.id
+    this.permGroups = data.data.permGroups
+    this.accountCreated = data.data.created
+    this.passwordUpdated = data.data.passwordUpdated
+
     if(window.location.pathname == "/login"){
       utils.popupSuccess('Connection', 'Successfully logged in!')
     }

html/src/main.js

@@ -7,21 +7,20 @@ const hostname = window.location.href.split('/')[2]
 
 //import * as crypto from "/src/crypto-js.min.js"
 
-let rawClient = new packets.rawClient('/listen')
-let client = new auth.authClient(rawClient)
+let client = new packets.rawClient('/listen')
+let authClient = new auth.authClient(client)
 
 window.utils = utils
 window.packets = packets
 window.auth = auth
 window.jsonpack = jsonpack
 
-window.rawClient = rawClient
-window.authClient = client
+window.client = client
+window.authClient = authClient
 
-window.authLogin = client.login
-window.sendAuth = client.send
-window.sendRaw = rawClient.send
-window.addListener = rawClient.addRawTypeListener
+window.authLogin = authClient.login
+window.send = client.send
+window.addListener = client.addRawTypeListener
 
 window.addListener('popupInfo', (data)=>{
   window.utils.popupInfo(data.data.title, data.data.msg)

html/src/style.css

@@ -11,21 +11,24 @@
     --background-0: #212529;
     --background-1: #404040;
 
+    --nav-color: rgba(0,0,0,0.3);
+
     --text-0: #242424;
     --text-1: #d3d3d3;
 
     --text-black: #242424;
-    --text-white: #d3d3d3;
+    --text-white: var(--pico-primary-inverse);
 
     --success-1:#059100;
     --warning-1:#ffdc3e;
     --error-1: #b60f0f;
 
     --font: "UbuntuMono";
+    --pico-font-family: UbuntuMono, regular;
 }
 
 * { 
-    font-family: var(--font);
+    font-family: var(--font) !important;
 }
 
 body {
@@ -44,17 +47,18 @@ body {
     width: calc(100% - var(--sidenavwidth));
     height: calc(100% - var(--topnavheight));
     padding: 5px;
+    overflow: scroll;
 }
 
-.text-white {
-    color: var(--text-white) !important;
+.text-invert {
+    color: var(--pico-primary-inverse) !important;
     font-family: var(--font);
 }
 
-.text-black {
+/* .text-black {
     color: var(--text-black) !important;
     font-family: var(--font);
-}
+} */
 
 .half-left {
     position: relative;
@@ -80,7 +84,7 @@ body {
     padding:5px;
     padding-left: calc(var(--sidenavwidth) + 10px);
     z-index: 10;
-    background-color: var(--background-0);
+    background-color: var(--nav-color);
 }
 
 .navbar ul {
@@ -115,7 +119,7 @@ body {
     height:100%;
     resize: left;
     z-index: 20;
-    background-color: var(--background-0);
+    background-color: var(--nav-color);
 }
 
 .navpanel details {

html/src/utils.js

@@ -1,4 +1,4 @@
-export const getEl = (id)=>{return document.getElementById(id)}
+export const getel = (id)=>{return document.getElementById(id)}
 
 export const setCookie = (name, value, hours = 1, path = '/') => {
   const expires = new Date(Date.now() + hours * 6e4).toUTCString()
@@ -66,13 +66,22 @@ export function iconauth() {
 
 // }
 
-export function modal(elem, identifier, bgcolor, header, textColor, title, innerHTML) {
+export function getatribinarr(arr, atribname, value){
+  for(let i=0;i<arr.length;i++){
+    if(arr[i][atribname] == value){
+      return arr[i]
+    }
+  }
+  return null
+}
+
+export function modal(elem, bgcolor, header, textColor, title, innerHTML) {
   elem.innerHTML += `
   <dialog class="example ${textColor}" open>
     <article style="background-color:${bgcolor};">
       <header style="background-color:${header};">
-        <p class='noselect' style='font-size:10px;opacity:0.75'>${formatTime(getUnixTime())}</p>
-        <a class="close ${textColor}" onclick="${identifier}.removeChild(this.parentElement.parentElement.parentElement)"></a>
+        <p class='noselect ${textColor}' style='font-size:10px;opacity:0.75'>${formatTime(getUnixTime())}</p>
+        <a class="close ${textColor}" onclick="this.parentElement.parentElement.parentElement.remove()"></a>
         ${title}
       </header>
       ${innerHTML}
@@ -87,12 +96,12 @@ export function addPopup(bgcolor, isDark, title, content) {
   let textColor
   if(isDark){
     header = 'rgba(255,255,255,0.05)'
-    textColor = 'text-white'
+    textColor = "text-invert"
   }else{
     header = 'rgba(0,0,0,0.2)'
-    textColor = 'text-black'
+    textColor = ""
   }
-  modal(elem, "document.getElementById('popupBox')", bgcolor, header, textColor, title, `<p class='${textColor}'>${content}</p>`)
+  modal(elem, bgcolor, header, textColor, title, `<p class='${textColor}'>${content}</p>`)
 
 }
 
@@ -118,14 +127,14 @@ export function confirmBox(bgcolor, isDark, title, yesFunc, noFunc) {
   let textColor
   if(isDark){
     header = 'rgba(255,255,255,0.05)'
-    textColor = 'text-white'
+    textColor = "text-invert"
   }else{
     header = 'rgba(0,0,0,0.2)'
-    textColor = 'text-black'
+    textColor = ""
   }
-  modal(elem, 'document.body', bgcolor,  header, textColor, title, `
-  <button class="outline half-left" onclick="document.body.removeChild(this.parentElement.parentElement);${yesFunc}">Yes</button>
-  <button class="half-right" onclick="document.body.removeChild(this.parentElement.parentElement);${noFunc}">No</button>`)
+  modal(elem, bgcolor,  header, textColor, title, `
+  <button class="outline half-left" onclick="${yesFunc};document.body.removeChild(this.parentElement.parentElement)">Yes</button>
+  <button class="half-right" onclick="${noFunc};document.body.removeChild(this.parentElement.parentElement)">No</button>`)
 }
 
 export function getUnixTime() {