update perms button + favicon

src/pages/Users.js

@@ -1,22 +1,28 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Route, Routes, useNavigate, useParams } from "react-router";
 import ErrorBoundary from "../util/ErrorBoundary";
-import { get } from '../util/Util';
+import { get, post } from '../util/Util';
 import '../css/pages/Users.css';
 import { Table, TableListEntry } from "../components/Table";
 
-const Permission = ({name, value}) => {
+const Permission = ({ name, value, chain, updatePerms }) => {
+    const inputRef = useRef();
+    const onChange = () => {
+        const val = inputRef.current.value;
+        updatePerms(chain, val);
+    };
+
     return <li className="flex is-vertical-align">
         <label>{name}</label>
-        <input max={10} min={0} type='number' defaultValue={value}></input>
+        <input ref={inputRef} onChange={onChange} max={10} min={0} type='number' defaultValue={value}></input>
     </li>;
 };
 
-const PermissionGroup = ({ name, value }) => {
+const PermissionGroup = ({ name, value, chain, updatePerms }) => {
     const elements = [];
 
     for (const [perm, val] of Object.entries(value)) {
-        const props = { key: perm, name: perm, value: val };
+        const props = { key: perm, name: perm, value: val, updatePerms, chain: `${chain}:${perm}` };
         if(typeof val ==='object') elements.push(<PermissionGroup {...props} />);
         else elements.push(<Permission {...props} />);
     }
@@ -30,12 +36,12 @@ const PermissionGroup = ({ name, value }) => {
     </li>;
 };
 
-const Permissions = ({ perms }) => {
+const Permissions = ({ perms, updatePerms }) => {
 
     const elements = [];
     const keys = Object.keys(perms);
     for (const perm of keys) {
-        const props = { key: perm, name: perm, value: perms[perm] };
+        const props = { key: perm, name: perm, value: perms[perm], chain: perm, updatePerms };
         let Elem = null;
         switch (typeof perms[perm]) {
             case 'number':
@@ -96,6 +102,7 @@ const User = ({ user }) => {
     
     const navigate = useNavigate();
     const [apps, updateApps] = useState([]);
+    const perms = {...user.permissions};
 
     useEffect(() => {
         (async () => {
@@ -104,6 +111,22 @@ const User = ({ user }) => {
         })();
     }, []);
 
+    const updatePerms = (chain, value) => {
+        value = parseInt(value);
+        if (isNaN(value)) return;
+
+        let selected = perms;
+        const keys = chain.split(':');
+        for (const key of keys) {
+            if (key === keys[keys.length - 1]) selected[key] = value;
+            else selected = selected[key];
+        }
+    };
+
+    const commitPerms = async () => {
+        await post(`/api/users/${user.id}/permissions`, perms);
+    };
+
     const ApplicationWrapper = () => {
         const { appid } = useParams();
         const app = apps.find(a => a.id === appid);
@@ -130,17 +153,12 @@ const User = ({ user }) => {
                 <p><b>2FA: </b>{user.twoFactor.toString()}</p>
                 <p><b>Disabled: </b>{user.disabled.toString()}</p>
 
-                <label htmlFor='username'>Username:</label>
+                <label htmlFor='username'>Username</label>
-                <input autoComplete='off' id='username' defaultValue={user.username} />
+                <input autoComplete='off' id='username' defaultValue={user.name} />
 
-                <label htmlFor='displayName'>Display Name:</label>
+                <label htmlFor='displayName'>Display Name</label>
                 <input autoComplete='off' id='displayName' placeholder='Name to display instead of username' defaultValue={user.displayName} />
 
-                <select>
-                    <option>User</option>
-                    <option>Bob</option>
-                </select>
-
                 <h3 className="mt-5">Applications</h3>
                 <Routes>
                     <Route path='/' element={<ApplicationList apps={apps} />} />
@@ -150,7 +168,8 @@ const User = ({ user }) => {
             </div>
 
             <div className="col-6-lg col-12">
-                <Permissions perms={user.permissions} />
+                <Permissions updatePerms={updatePerms} perms={user.permissions} />
+                <button onClick={commitPerms} className="button primary">Update</button>
             </div>
         </div>