From bd77a9fcc513075dbef7d3b489ae680207f32604 Mon Sep 17 00:00:00 2001
From: Astatin3 <77305074+Astatin3@users.noreply.github.com>
Date: Tue, 20 Feb 2024 10:25:34 -0700
Subject: [PATCH] Finally done!

---
 README.md                         |   0
 html/login.html                   |  24 +--
 html/nav.html                     |  17 +-
 html/src/auth.js                  |  16 +-
 html/src/main.js                  |  15 +-
 html/src/pico.min.css             |   0
 html/src/style.css                |  20 ++-
 html/src/utils.js                 |  33 ++--
 modules/chat/chat.html            |  33 ----
 modules/chat/main.py              |  12 --
 modules/chat/module.json          |  20 ---
 modules/example/example.html      |  12 +-
 modules/example/main.py           |   0
 modules/example/module.json       |   0
 modules/main/Dashboard.html       |  16 +-
 modules/main/adminSettings.html   | 249 +++++++++++++++++++++++++++++-
 modules/main/main.py              | 197 ++++++++++++++++++++---
 modules/main/module.json          |   8 +-
 modules/main/programSettings.html |  11 --
 modules/main/userSettings.html    |  69 ++++++---
 src/auth.py                       |  17 +-
 src/modules.py                    |  81 +++++++++-
 src/utils.py                      |   8 +
 src/web.py                        |   2 +-
 24 files changed, 645 insertions(+), 215 deletions(-)
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 html/src/pico.min.css
 delete mode 100644 modules/chat/chat.html
 delete mode 100644 modules/chat/main.py
 delete mode 100644 modules/chat/module.json
 mode change 100644 => 100755 modules/example/example.html
 mode change 100644 => 100755 modules/example/main.py
 mode change 100644 => 100755 modules/example/module.json
 mode change 100644 => 100755 modules/main/Dashboard.html
 mode change 100644 => 100755 modules/main/adminSettings.html
 mode change 100644 => 100755 modules/main/main.py
 mode change 100644 => 100755 modules/main/module.json
 delete mode 100644 modules/main/programSettings.html
 mode change 100644 => 100755 modules/main/userSettings.html
 mode change 100644 => 100755 src/modules.py
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/html/login.html b/html/login.html
index 73fed11..8b911a2 100755
--- a/html/login.html
+++ b/html/login.html
@@ -14,29 +14,13 @@
 </section>
 
 <script>
-//let socket = io()
-usernamebox = document.getElementById('usernamebox')
-passwordbox = document.getElementById('passwordbox')
-
 function submit(){
+  const usernamebox = utils.getel('usernamebox')
+  const passwordbox = utils.getel('passwordbox')
+
   authLogin(usernamebox.value, passwordbox.value)
 }
 
-
-// function submit() {
-//   time = (new Date().getTime())
-
-//   hashpacket = usernamebox.value+sha256(passwordbox.value).toUpperCase()+time
-
-//   packet = {
-//     data: sha256(hashpacket),
-//     time: time
-//   }
-//   socket.emit('authreq', JSON.stringify(packet))
-//   //alert(sha256(passwordbox.value))
-//   //passwordbox.value = sha256(passwordbox.value)
-// }
-
-
+window.main = ()=>{}
 
 </script>
\ No newline at end of file
diff --git a/html/nav.html b/html/nav.html
index 6952e34..435113e 100755
--- a/html/nav.html
+++ b/html/nav.html
@@ -1,21 +1,23 @@
-<!DOCTYPE html>
+<html data-theme="dark">
 <head>
   <link href="/src/pico.min.css" rel="stylesheet">
   <link href="/src/style.css" rel="stylesheet">
-
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark" />
   <title><!--Place title here!!!--></title>
 </head>
 <body>
-  <nav class="navbar text-white noselect">
+  <nav class="navbar text-invert noselect">
     <ul class="nav">
       <!--Place tabs here!!!-->
-      <h2 class="navconntext text-white" id="connecticon" onclick="window.location.reload()" style="cursor:pointer;">
+      <h2 class="navconntext text-invert" id="connecticon" onclick="window.location.reload()" style="cursor:pointer;">
         Disconnected
       </h2>
     </ul>
   </nav>
-  <div class="navpanel text-white noselect">
-      <a href="<!--Place defaultPage here!!!-->" class="text-white navTitle">
+  <div class="navpanel text-invert noselect">
+      <a href="<!--Place defaultPage here!!!-->" class="text-invert navTitle">
         <!--Place title here!!!-->
       </a>
       <hr>
@@ -27,4 +29,5 @@
   </div>
   <div id="popupBox" class="popupBox">  </div>
   <script type="module" src="/src/main.js"></script>
-</body>
\ No newline at end of file
+</body>
+</html>
\ No newline at end of file
diff --git a/html/src/auth.js b/html/src/auth.js
index 7b6d2db..94e5f7c 100755
--- a/html/src/auth.js
+++ b/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!')
     }
diff --git a/html/src/main.js b/html/src/main.js
index 12cb5f6..1067bb7 100755
--- a/html/src/main.js
+++ b/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)
diff --git a/html/src/pico.min.css b/html/src/pico.min.css
old mode 100644
new mode 100755
diff --git a/html/src/style.css b/html/src/style.css
index f57e778..35e1263 100755
--- a/html/src/style.css
+++ b/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 {
diff --git a/html/src/utils.js b/html/src/utils.js
index 6dc1bb0..870b6e0 100755
--- a/html/src/utils.js
+++ b/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() {
diff --git a/modules/chat/chat.html b/modules/chat/chat.html
deleted file mode 100644
index 411c45c..0000000
--- a/modules/chat/chat.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<link rel="stylesheet" href="https://unpkg.com/xterm@4.11.0/css/xterm.css"/>
-<script src="https://unpkg.com/xterm@4.11.0/lib/xterm.js"></script>
-<script src="https://unpkg.com/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
-<script src="https://unpkg.com/xterm-addon-web-links@0.4.0/lib/xterm-addon-web-links.js"></script>
-<script src="https://unpkg.com/xterm-addon-search@0.8.0/lib/xterm-addon-search.js"></script>
-
-<h4>This is an example chat module</h4>
-<div id="term"></div>
-<script>
-
-  window.main = ()=>{
-    const term = new Terminal({
-      cursorBlink: true,
-      macOptionIsMeta: true,
-      scrollback: true,
-    });
-
-    const fit = new FitAddon.FitAddon()
-    term.loadAddon(fit)
-    term.loadAddon(new WebLinksAddon.WebLinksAddon())
-    term.loadAddon(new SearchAddon.SearchAddon())
-
-    term.open(utils.getEl("term"))
-    fit.fit()
-
-    term.onData((data) => {
-      term.write(data);
-    })
-
-    function resize(){fit.fit()}
-    window.onresize = resize
-  }
-</script>
\ No newline at end of file
diff --git a/modules/chat/main.py b/modules/chat/main.py
deleted file mode 100644
index b27a687..0000000
--- a/modules/chat/main.py
+++ /dev/null
@@ -1,12 +0,0 @@
-mm = None
-
-def test(ac, data):
-  mm.sendPopupColor(ac.rawClient, 'test!', 'test!', '#600060', True)
-  
-def init(moduleMaster):
-  global mm
-  mm = moduleMaster
-  mm.addAuthEventListener('exampleTest', test)
-
-def main():
-  pass
\ No newline at end of file
diff --git a/modules/chat/module.json b/modules/chat/module.json
deleted file mode 100644
index 881a6d3..0000000
--- a/modules/chat/module.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "chat",
-  "creators": ["ASTATIN3"],
-  "version": "1.0",
-  "entrypoint": "modules/chat/main.py",
-  "tabs": [
-      {
-          "name": "chat",
-          "defaultPage": "chat",
-          "pages": [
-                {
-                    "type": "page",
-                    "name": "chat",
-                    "requiredPermGroup": "",
-                    "location": "modules/chat/chat.html"
-                }
-          ]
-      }
-  ]
-}
\ No newline at end of file
diff --git a/modules/example/example.html b/modules/example/example.html
old mode 100644
new mode 100755
index f23c222..c5ba841
--- a/modules/example/example.html
+++ b/modules/example/example.html
@@ -1,10 +1,16 @@
-<h4>This is a very simple example module!</h4>
-<button id="testButton" onclick="testFunc()">test!</button>
+
+<main class="container">
+  <h4>This is a very simple example module!</h4>
+  <button id="testButton" onclick="testFunc()">test!</button>
+</main>
+
 <script>
+  window.main = ()=>{}
+
   function getel(el) {return document.getElementById(el)}
 
   function testFunc() {
-    window.sendRaw('test1', {
+    window.send('exampleTest', {
       data: 'test!'
     })
   }
diff --git a/modules/example/main.py b/modules/example/main.py
old mode 100644
new mode 100755
diff --git a/modules/example/module.json b/modules/example/module.json
old mode 100644
new mode 100755
diff --git a/modules/main/Dashboard.html b/modules/main/Dashboard.html
old mode 100644
new mode 100755
index 1f00026..eb13ad6
--- a/modules/main/Dashboard.html
+++ b/modules/main/Dashboard.html
@@ -1,11 +1,5 @@
-<p>Test!</p>
-<button id="testButton" onclick="testFunc()">test!</button>
-<script>
-  function getel(el) {return document.getElementById(el)}
-
-  function testFunc() {
-    window.sendRaw('test1', {
-      data: 'test!'
-    })
-  }
-</script>
\ No newline at end of file
+<main class="container">
+  <h1><!--Place title here!!!--></h1>
+  <h5>A very dynamic dashboard, with many features</h5>
+  <p>Check back later for the docs, but for now you can look at the pre-existing modules as examples.</p>
+</main>
\ No newline at end of file
diff --git a/modules/main/adminSettings.html b/modules/main/adminSettings.html
old mode 100644
new mode 100755
index 1f00026..8bcd8a5
--- a/modules/main/adminSettings.html
+++ b/modules/main/adminSettings.html
@@ -1,11 +1,248 @@
-<p>Test!</p>
-<button id="testButton" onclick="testFunc()">test!</button>
+<main class="container">
+  <h3>User Settings</h3>
+  <h4>Users</h4>
+  <table role="grid">
+    <thead>
+      <tr>
+        <th scope="col">Username</th>
+        <th scope="col">Created</th>
+        <th scope="col">Pass Updated</th>
+        <th scope="col">Groups</th>
+        <th scope="col">Manage</th>
+      </tr>
+    </thead>
+    <tbody id="userTable"></tbody>
+  </table>
+  <h4>Sessions</h4>
+  <table role="grid">
+    <thead>
+      <tr>
+        <th scope="col">Username</th>
+        <th scope="col">Address</th>
+        <th scope="col">Path</th>
+        <th scope="col">Expires</th>
+        <th scope="col">Manage</th>
+      </tr>
+    </thead>
+    <tbody id="sessionTable"></tbody>
+  </table>
+  <button onclick="addUser()">Add New User</button>
+</main>
 <script>
-  function getel(el) {return document.getElementById(el)}
+  let userData = {}
 
-  function testFunc() {
-    window.sendRaw('test1', {
-      data: 'test!'
+  function promptUnauth(clientid) {
+    utils.confirmBox('var(--card-sectionning-background-color)', true, 'Are you sure you want to log this session out?', `unauthSession('${clientid}')`, '')
+  }
+
+  function unauthSession(id) {
+    window.send('unauth', id)
+  }
+
+  function addUser() {
+    const elem = document.body
+    const bgcolor = 'var(--card-sectionning-background-color)'
+    const header = 'rgba(255,255,255,0.05)'
+    const textColor = 'text-white'
+    const title = "Add user"
+    
+    utils.modal(elem, bgcolor,  header, textColor, title, `
+    <input autocomplete="new-password" id="username" placeholder="Username"></input>
+    <input autocomplete="new-password" id="groups" placeholder="User groups (Users, Admins, ...)"></input>
+    <input autocomplete="new-password" id="password1" type="password" placeholder="New Password"></input>
+    <input autocomplete="new-password" id="password2" type="password" placeholder="Retype new Password"></input>
+    <button class="outline half-left" onclick="this.parentElement.parentElement.remove()">Cancel</button>
+    <button class="half-right" onclick="addUserPrompt()">Submit</button>`)
+    // For some reason, after opening a second modal, the first one is not deleted.
+    // So I have to maually delete it using document.body.children[5].remove()
+  }
+
+  function addUserPrompt() {
+    const username = utils.getel("username").value
+    const groups = utils.getel("groups").value
+    const password1 = utils.getel("password1").value
+    const password2 = utils.getel("password2").value
+
+    document.body.children[5].remove()
+
+    if(username == "" || password1 == "" || password2 == ""){
+      utils.popupError("Error", "Please fill out all areas of form")
+      return
+    }else if(password1 != password2){
+      utils.popupError("Error", "Passwords don't match")
+      return
+    }
+
+    const elem = document.body
+    const bgcolor = 'var(--card-sectionning-background-color)'
+    const header = 'rgba(255,255,255,0.05)'
+    const textColor = 'text-white'
+    const title = "Add user"
+    
+    utils.modal(elem, bgcolor, header, textColor, title, `
+    <p>Are you sure you want to add this user?</p>
+    <p>Username: ${username}</p>
+    <p>Groups: ${groups}</p>
+    <p>Password: (hidden)</p>
+    <br>
+    <button class="outline half-left" onclick="addUserSubmit('${username}','${groups}','${password1}');this.parentElement.parentElement.remove()">Yes</button>
+    <button class="half-right" onclick="this.parentElement.parentElement.remove()">No</button>`)
+    return
+  }
+
+  function addUserSubmit(username, groups, password) {
+    client.send("addUserRequest", {
+      username: username,
+      groups: groups.split(", "),
+      password: utils.sha256(password)
     })
   }
+
+  function manageUser(id) {
+    const elem = document.body
+    const bgcolor = 'var(--card-sectionning-background-color)'
+    const header = 'rgba(255,255,255,0.05)'
+    const textColor = 'text-white'
+    const title = "Manage user"
+    
+    utils.modal(elem, bgcolor, textColor, header, title, `
+    <button onclick="promptDisconnectSessions('${id}')">Disconnect all sessions</button>
+    <button onclick="promptChangePassword('${id}');this.parentElement.parentElement.remove()">Edit Password</button>
+    <button onclick="promptChangeGroups('${id}');this.parentElement.parentElement.remove()">Edit Groups</button>
+    <button onclick="promptRemoveUser('${id}');this.parentElement.parentElement.remove()">Delete</button>
+    <button class="outline" onclick="this.parentElement.parentElement.remove()">Cancel</button>
+    `)
+  }
+
+  function promptDisconnectSessions(id) {
+    document.body.children[5].remove()
+    utils.confirmBox('var(--card-sectionning-background-color)', true, 'Are you sure you want to disconnect all sessions for this user?', `disconnectSessions('${id}')`, '')
+  }
+
+  function disconnectSessions(id) {
+    client.send("disconnectAllSessions", {
+      id: id
+    })
+  }
+
+  function promptChangePassword(id) {
+    document.body.children[5].remove()
+
+    const elem = document.body
+    const bgcolor = 'var(--card-sectionning-background-color)'
+    const header = 'rgba(255,255,255,0.05)'
+    const textColor = 'text-white'
+    const title = "Manage user"
+    
+    utils.modal(elem, bgcolor, textColor, header, title, `
+    <input autocomplete="new-password" id="password1" type="password" placeholder="New Password"></input>
+    <input autocomplete="new-password" id="password2" type="password" placeholder="Retype new Password"></input>
+    <button class="outline half-left" onclick="this.parentElement.parentElement.remove()">Cancel</button>
+    <button class="half-right" onclick="changePassword('${id}')">Submit</button>
+    `)
+  }
+
+  function changePassword(id) {
+    const password1 = utils.getel("password1").value
+    const password2 = utils.getel("password2").value
+
+    document.body.children[5].remove()
+
+    if(password1 == "" || password2 == ""){
+      utils.popupError("Error", "Please fill out all areas of form")
+      return
+    }else if(password1 != password2){
+      utils.popupError("Error", "Passwords don't match")
+      return
+    }
+
+    client.send("passwordChangeRequest", {
+      id: id,
+      new: utils.sha256(password1)
+    })
+  }
+
+  function promptChangeGroups(id) {
+    document.body.children[5].remove()
+
+    const user = utils.getatribinarr(userData, 'id', id)
+
+    const elem = document.body
+    const bgcolor = 'var(--card-sectionning-background-color)'
+    const header = 'rgba(255,255,255,0.05)'
+    const textColor = 'text-white'
+    const title = "Edit groups"
+    
+    utils.modal(elem, bgcolor, textColor, header, title, `
+    <input autocomplete="new-password" id="groups" placeholder="User groups (Users, Admins, ...)" value="${user.permGroups.join(", ")}"></input>
+    <button class="half-left" onclick="this.parentElement.parentElement.remove()">Cancel</button>
+    <button class="outline half-right" onclick="changeGroups('${id}')">Submit</button>
+    `)
+  }
+
+  function changeGroups(id) {
+    const groups = utils.getel("groups").value
+
+    document.body.children[5].remove()
+
+    if(groups == ""){
+      utils.popupError("Error", "Please fill out all areas of form")
+      return
+    }
+
+    client.send("changeGroupsRequest", {
+      id: id,
+      groups: groups.split(", ")
+    })
+  }
+
+  function promptRemoveUser(id) {
+    document.body.children[5].remove()
+    utils.confirmBox('var(--card-sectionning-background-color)', true, 'Are you sure you want to remove this user?', `removeUser('${id}')`, '')
+  }
+  
+  function removeUser(id) {
+    client.send("deleteUserRequest", {
+      id: id
+    })
+  }
+
+  window.main = ()=>{
+
+  window.addListener("sessions", (data)=>{
+    users = data.data.users
+    html = ""
+    userData = users
+    for(let i=0;i<users.length;i++){
+      html += `
+        <tr>
+          <td>${users[i].username}</td>
+          <td>${utils.formatTime(users[i].created)}</td>
+          <td>${utils.formatTime(users[i].passwordUpdated)}</td>
+          <td>${users[i].permGroups.join(", ")}</td>
+          <td><a href="#" onclick="manageUser('${users[i].id}')">Manage</a></td>
+        </tr>
+      `
+    }
+    utils.getel('userTable').innerHTML = html
+
+    sessions = data.data.sessions
+    html = ""
+    for(let i=0;i<sessions.length;i++){
+      html += `
+        <tr>
+          <td>${sessions[i].username}</td>
+          <td>${sessions[i].address}</td>
+          <td>${sessions[i].currentPage}</td>
+          <td>${utils.formatTime(sessions[i].timeout)}</td>
+          <td><a href="#" onclick="promptUnauth('${sessions[i].clientid}')">Logout</a></td>
+        </tr>
+      `
+    }
+    
+    utils.getel('sessionTable').innerHTML = html
+  })
+  
+  }
+
 </script>
\ No newline at end of file
diff --git a/modules/main/main.py b/modules/main/main.py
old mode 100644
new mode 100755
index b1cc43a..f3ea7b3
--- a/modules/main/main.py
+++ b/modules/main/main.py
@@ -1,10 +1,54 @@
 mm = None
 
+
+
+def init(moduleMaster):
+  global mm
+  mm = moduleMaster
+
+  # User settings
+  mm.addAuthEventListener('logout', logout)
+  mm.addAuthEventListener('unauth', unauth)
+  
+  mm.addAuthEventListener('passwordChangeRequest', changePassword)
+  
+  # Admin settings
+  mm.addAuthEventListener('addUserRequest', addUser)
+  mm.addAuthEventListener('disconnectAllSessions', disconnectAllSessions)
+  mm.addAuthEventListener('changeGroupsRequest', changeGroups)
+  mm.addAuthEventListener('deleteUserRequest', deleteUser)
+  # mm.addAuthEventListener('login', disconnectAllSessions)
+  
+  mm.addPageEventListener('/main/User', loadSessions)
+  mm.addPageEventListener('/main/Admin', loadSessionsAdmin)
+
+
+
+def main():
+  pass
+
+
+
 def logout(ac, data):
-  ac.send('redir', {
-    "location": "/"
-  })
-  mm.authServer.unauth(ac)
+  mm.unauth(ac)
+
+
+
+def unauth(ac, data):
+  removeClient = mm.getAuthClientByID(data['data'])
+  if removeClient == None:
+    return
+  if removeClient.user != ac.user and not mm.userInGroup(ac, "Admins"):
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  mm.unauth(removeClient)
+  mm.sendPopupSuccess(ac.rawClient, "Success", "Client removed!")
+  if(ac.currentPage == "/main/Admin" and mm.userInGroup(ac, "Admins")):
+    loadSessionsAdmin(ac)
+  else:
+    loadSessions(ac)
+
+
 
 def loadSessions(ac):
   obj = []
@@ -21,23 +65,136 @@ def loadSessions(ac):
     # obj.append(client.session)
   ac.send('sessions', obj)
 
-def unauth(ac, data):
-  removeClient = mm.getAuthClientByID(data['data'])
-  if removeClient == None:
+
+
+def changePassword(ac, data): 
+  # If the account is not an admin, and the username is the same, and the password is correct => Change password
+  # If the account is not an admin, and the username is the same, and the password not correct and => Incorrect Password
+  # If the account is not an admin, and the username is not the same => Access denied
+  # If the account is an admin, and the username is the same, and the password is correct => Change password
+  # If the account is an admin, and the username is the same, and the password is not correct => Incorrect Password
+  # If the account is an admin, and the username is not the same => Change password
+
+  isAdmin = mm.userInGroup(ac, 'Admins')
+  correctName = ac.user.id == data['data']['id']
+  
+  
+  if isAdmin and not 'old' in data['data']:
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
     return
-  if removeClient.user == ac.user:
-    removeClient.send('redir', {
-      "location": "/"
+  
+  
+  if isAdmin or correctName:
+    if not isAdmin and ac.user.sha256passwordhash != data['data']['old']:
+      mm.sendPopupError(ac.rawClient, "Error", "Incorrect Password")
+      return
+    elif isAdmin and correctName and ac.user.sha256passwordhash != data['data']['old']:
+      mm.sendPopupError(ac.rawClient, "Error", "Incorrect Password")
+      return
+  else:
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  user = mm.getUserById(data['data']['id'])
+  if user == None:
+    mm.sendPopupError(ac.rawClient, "Error", "Invalid id")
+    return 
+  
+  mm.setUserPassword(user, data['data']['new'])
+  mm.sendPopupSuccess(ac.rawClient, "Success", "Password updated!")
+  
+  if isAdmin:
+    loadSessionsAdmin(ac)
+
+
+
+def loadSessionsAdmin(ac):
+  if not mm.userInGroup(ac, 'Admins'):
+    return
+  
+  obj = {
+    'users': [],
+    'sessions': []
+  }
+  for client in mm.authServer.clients:
+    obj['sessions'].append({
+      'username': client.username,
+      'address': client.rawClient.address,
+      'currentPage': client.currentPage,
+      'clientid': client.rawClient.clientid,
+      'timeout': client.timeout
     })
-    mm.unauth(removeClient)
-    loadSessions(ac)
+  for user in mm.authServer.users:
+    obj['users'].append({
+      'username': user.username,
+      'permGroups': user.permGroups,
+      'id': user.id,
+      'created': user.created,
+      'passwordUpdated': user.passwordUpdated
+    })
+  ac.send('sessions', obj)
 
-def init(moduleMaster):
-  global mm
-  mm = moduleMaster
-  mm.addAuthEventListener('logout', logout)
-  mm.addAuthEventListener('unauth', unauth)
-  mm.addPageEventListener('/main/User', loadSessions)
 
-def main():
-  pass
\ No newline at end of file
+
+def addUser(ac, data):
+  if not mm.userInGroup(ac, 'Admins'):
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  mm.addUser(
+    data['data']['username'],
+    data['data']['groups'],
+    data['data']['password'])
+  loadSessionsAdmin(ac)
+
+
+
+def disconnectAllSessions(ac, data):
+  if not mm.userInGroup(ac, 'Admins'):
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  user = mm.getUserById(data['data']['id'])
+  
+  for client in mm.authServer.clients:
+    if client.user == user:
+      mm.unauth(client)
+  loadSessionsAdmin(ac)
+
+
+
+def changeGroups(ac, data):
+  if not mm.userInGroup(ac, 'Admins'):
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  user = mm.getUserById(data['data']['id'])
+  if user == None:
+    mm.sendPopupError(ac.rawClient, "Error", "Invalid id")
+    return
+  if user == ac.user:
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  mm.setUserGroups(user, data['data']['groups'])
+  mm.sendPopupSuccess(ac.rawClient, "Success", "Groups updated!")  
+  loadSessionsAdmin(ac)
+
+
+
+def deleteUser(ac, data):
+  if not mm.userInGroup(ac, 'Admins'):
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  user = mm.getUserById(data['data']['id'])
+  if user == None:
+    mm.sendPopupError(ac.rawClient, "Error", "Invalid id")
+    return
+  if user == ac.user:
+    mm.sendPopupError(ac.rawClient, "Error", "You are not authorised")
+    return
+  
+  mm.deleteUser(user)
+  mm.sendPopupSuccess(ac.rawClient, "Success", "User deleted!")  
+  loadSessionsAdmin(ac)
\ No newline at end of file
diff --git a/modules/main/module.json b/modules/main/module.json
old mode 100644
new mode 100755
index 18ac352..d828bfa
--- a/modules/main/module.json
+++ b/modules/main/module.json
@@ -24,16 +24,10 @@
                             "requiredPermGroup": "",
                             "location": "modules/main/userSettings.html"
                         },
-                        {
-                            "type": "page",
-                            "name": "Program",
-                            "requiredPermGroup": "Admin",
-                            "location": "modules/main/programSettings.html"
-                        },
                         {
                             "type": "page",
                             "name": "Admin",
-                            "requiredPermGroup": "Admin",
+                            "requiredPermGroup": "Admins",
                             "location": "modules/main/adminSettings.html"
                         }
                     ]
diff --git a/modules/main/programSettings.html b/modules/main/programSettings.html
deleted file mode 100644
index 1f00026..0000000
--- a/modules/main/programSettings.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<p>Test!</p>
-<button id="testButton" onclick="testFunc()">test!</button>
-<script>
-  function getel(el) {return document.getElementById(el)}
-
-  function testFunc() {
-    window.sendRaw('test1', {
-      data: 'test!'
-    })
-  }
-</script>
\ No newline at end of file
diff --git a/modules/main/userSettings.html b/modules/main/userSettings.html
old mode 100644
new mode 100755
index 3985015..9cf6c49
--- a/modules/main/userSettings.html
+++ b/modules/main/userSettings.html
@@ -1,6 +1,7 @@
 <main class="container">
   <h3>User Settings</h3>
-  <p>Sessions</p>
+  <div id="details"></div>
+  <h4>Sessions</h4>
   <table role="grid">
     <thead>
       <tr>
@@ -8,7 +9,7 @@
         <th scope="col">Address</th>
         <th scope="col">Path</th>
         <th scope="col">Expires</th>
-        <th scope="col">Remove</th>
+        <th scope="col">Manage</th>
       </tr>
     </thead>
     <tbody id="sessionTable"></tbody>
@@ -26,12 +27,12 @@
   }
 
   function logout() {
-    window.sendRaw('logout', {})
+    window.send('logout', {})
     utils.setCookie('session', '')
   }
 
-  function unauthClient(id) {
-    window.sendRaw('unauth', id)
+  function unauthSession(id) {
+    window.send('unauth', id)
   }
 
   function changePassword() {
@@ -41,16 +42,45 @@
     const textColor = 'text-white'
     const title = "Change password"
     
-    utils.modal(elem, 'document.body',bgcolor,  header, textColor, title, `
-    <input type="password" placeholder="Old Password"></input>
-    <input type="password" placeholder="New Password"></input>
-    <input type="password" placeholder="Retype new Password"></input>
-    <button>Submit</button>`)
+    utils.modal(elem, bgcolor,  header, textColor, title, `
+    <input id="oldPassword" type="password" placeholder="Old Password"></input>
+    <input autocomplete="new-password" id="password1" type="password" placeholder="New Password"></input>
+    <input autocomplete="new-password" id="password2" type="password" placeholder="Retype new Password"></input>
+    <button onclick="passwordSubmit();document.body.removeChild(this.parentElement.parentElement)">Submit</button>`)
   }
 
+  function passwordSubmit() {
+    const oldPassword = utils.getel("oldPassword").value
+    const password1 = utils.getel("password1").value
+    const password2 = utils.getel("password2").value
+
+    if(oldPassword == "" || password1 == "" || password2 == ""){
+      utils.popupError("Error", "Please fill out all areas of form")
+      return
+    }else if(password1 != password2){
+      utils.popupError("Error", "Passwords don't match")
+      return
+    }
+
+    client.send("passwordChangeRequest", {
+      id: authClient.id,
+      old: utils.sha256(oldPassword),
+      new: utils.sha256(password1)
+    })
+  }
+
+
   window.main = ()=>{
 
-  const sessionTable = document.getElementById('sessionTable')
+
+  window.addListener("reauth", (data)=>{
+    let details = utils.getel('details')
+
+    details.innerHTML += "<p>Username: " + authClient.username + "</p>"
+    details.innerHTML += "<p>Groups: " + authClient.permGroups.join(", ") + "</p>"
+    details.innerHTML += "<p>Created: " + utils.formatTime(authClient.accountCreated) + "</p>"
+    details.innerHTML += "<p>Password Updated: " + utils.formatTime(authClient.passwordUpdated) + "</p>"
+  })
 
   window.addListener("sessions", (data)=>{
     sessions = data.data
@@ -62,25 +92,14 @@
           <td>${sessions[i].address}</td>
           <td>${sessions[i].currentPage}</td>
           <td>${utils.formatTime(sessions[i].timeout)}</td>
-          <td><a href="#" onclick="promptUnauth('${sessions[i].clientid}')">Logout</a></td>
+          <td><a href="#" onclick="unauthSession('${sessions[i].clientid}')">Logout</a></td>
         </tr>
       `
     }
-    sessionTable.innerHTML = html
+    utils.getel('sessionTable').innerHTML = html
     
   })
   
   }
 
-</script>
-<!-- 
-#################################################
-New Credentials - THESE ONLY WILL BE PRINTED ONCE
-########
-Username: User
-Password: 67FFCdfb9dB827fB
-########
-Username: Admin
-Password: eB0BB402900DfE5A
-#################################################
--->
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/auth.py b/src/auth.py
index 6c705ad..68626e5 100755
--- a/src/auth.py
+++ b/src/auth.py
@@ -12,7 +12,10 @@ class authUser:
   def __init__(self):
     self.username = None
     self.permGroups = []
+    self.id = None
     self.sha256passwordhash = None
+    self.passwordUpdated = None
+    self.created = None
 
 class authClient:
   def __init__(self):
@@ -21,7 +24,7 @@ class authClient:
     self.currentPage = "/login"
     self.user = None
 
-    self.timeout = utils.getUnixTime() + (60 * 60 * 1000)
+    self.timeout = utils.getUnixTime() + (6 * 60 * 60 * 1000)
     self.loginTime = utils.getUnixTime()
     self.lastReauth = utils.getUnixTime()
 
@@ -58,7 +61,11 @@ class authServer:
     isValid = False
     validAcc = None
     for acc in self.users:
-      hash = utils.hash(str(acc.username)+str(acc.sha256passwordhash)+str(data['data']['salt']))
+      hash = utils.hash( 
+                        str(acc.username)+
+                        str(acc.sha256passwordhash)+
+                        str(data['data']['salt']))
+
       if hash == str(data['data']['data']):
         isValid = True
         validAcc = acc
@@ -115,7 +122,10 @@ class authServer:
 
     ac.send('reauth', {
       'username': ac.username,
+      'id': ac.user.id,
       'permGroups': ac.user.permGroups,
+      'created': ac.user.created,
+      'passwordUpdated': ac.user.passwordUpdated,
       'timeout': ac.timeout
     })
 
@@ -174,6 +184,9 @@ class authServer:
     for acc in data:
       user = authUser()
       user.username = acc['username']
+      user.id = acc['id']
       user.sha256passwordhash = acc['sha256passwordhash']
       user.permGroups = acc['permGroups']
+      user.created = acc['created']
+      user.passwordUpdated = acc['passwordUpdated']
       self.users.append(user)
\ No newline at end of file
diff --git a/src/modules.py b/src/modules.py
old mode 100644
new mode 100755
index 4cc97cb..843464d
--- a/src/modules.py
+++ b/src/modules.py
@@ -97,8 +97,6 @@ class moduleMaster():
     # for tab in webserv.webtabs:
     #   tab.compileHtml('User')
 
-
-
   def initModules(self, webserv):
     self.webserv = webserv
     self.app = webserv.app
@@ -114,9 +112,79 @@ class moduleMaster():
     for module in self.modules:
       module.run()
 
-  def runModules(self):
-    for module in self.modules:
-      module.run()
+
+
+
+  def reloadUsers(self):
+    self.authServer.reloadUsers()
+
+  def editUser(self, user, varname, value):
+    path = utils.getRoot('data/')+'creds.json'
+    logins = json.loads(utils.readFile(path))
+    for userdata in logins:
+      if userdata['username'] == user.username:
+        userdata[varname] = value
+    
+    utils.writeFile(path, json.dumps(logins, sort_keys=True, indent=2))
+  
+  def setUserPassword(self, user, hash):
+    for ac in self.authServer.clients:
+      if ac.user == user:
+        self.unauth(ac)
+    self.editUser(user, 'sha256passwordhash', hash)
+    self.editUser(user, 'passwordUpdated', utils.getUnixTime())
+    self.authServer.reloadUsers()
+
+  def setUserGroups(self, user, groups):
+    for ac in self.authServer.clients:
+      if ac.user == user:
+        self.unauth(ac)
+    self.editUser(user, 'permGroups', groups)
+    self.authServer.reloadUsers()
+
+  def addUser(self, user, groups, hash):
+    path = utils.getRoot('data/')+'creds.json'
+    time = utils.getUnixTime()
+    logins = json.loads(utils.readFile(path))
+    logins.append({
+      'username': user,
+      'permGroups': groups,
+      'created': time,
+      'id': utils.randID(16),
+      'passwordUpdated': time,
+      'sha256passwordhash': hash
+    })
+    utils.writeFile(path, json.dumps(logins, sort_keys=True, indent=2))
+    self.authServer.reloadUsers()
+
+  def deleteUser(self, user):
+    path = utils.getRoot('data/')+'creds.json'
+    time = utils.getUnixTime()
+    logins = json.loads(utils.readFile(path))
+    for login in logins:
+      if login['id'] == user.id:
+        logins.remove(login)
+    utils.writeFile(path, json.dumps(logins, sort_keys=True, indent=2))
+    self.authServer.reloadUsers()
+
+  def userInGroup(self, ac, group):
+    if not self.authServer.validAc(ac):
+      return False
+    if (group != "") and not (group in ac.user.permGroups):
+      return  False
+    return True
+  
+
+  
+  def getUserByName(self, name):
+    returnArr = []
+    for user in self.authServer.users:
+      if user.username == name:
+        returnArr.append(user)
+    return returnArr
+
+  def getUserById(self, id):
+    return utils.getatribinarr(self.authServer.users, 'id', id)
 
 
 
@@ -173,6 +241,9 @@ class moduleMaster():
 
 
   def unauth(self, ac):
+    ac.send('redir', {
+      "location": "/"
+    })
     self.authServer.unauth(ac)
 
 
diff --git a/src/utils.py b/src/utils.py
index c459e21..fe5180f 100755
--- a/src/utils.py
+++ b/src/utils.py
@@ -79,6 +79,8 @@ def genDefaultAccounts():
   print(f'Password: {adminPassword}')
   print('#################################################')
 
+  time = getUnixTime()
+
   return json.dumps(
     [
       {
@@ -86,6 +88,9 @@ def genDefaultAccounts():
         'permGroups': [
           'Users'
         ],
+        'id': randID(16),
+        'created': time,
+        'passwordUpdated': time,
         'sha256passwordhash': hash(userPassword)
       },
       {
@@ -94,6 +99,9 @@ def genDefaultAccounts():
           'Users',
           'Admins'
         ],
+        'id': randID(16),
+        'created': time,
+        'passwordUpdated': time,
         'sha256passwordhash': hash(adminPassword)
       }
     ], sort_keys=True, indent=2)
diff --git a/src/web.py b/src/web.py
index 74e7c59..5c6189f 100755
--- a/src/web.py
+++ b/src/web.py
@@ -52,7 +52,7 @@ class webpage():
   
   def compileHtml(self, tabname, permGroups):
     html = '<li'
-    if self.requiredPermGroup == '' or (self.requiredPermGroup in permGroups):
+    if (self.requiredPermGroup == '') or (self.requiredPermGroup in permGroups):
       html += f' onclick=\'window.location="/{tabname}/{self.name}"\'>' +\
         self.name
     else:
