13 changed files with 39 additions and 291 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -226,7 +226,7 @@
        "no-useless-return": "error",
        "no-var": "error",
        "no-void": "error",
-        "no-warning-comments": "warn",
+        "no-warning-comments": "error",
        "no-whitespace-before-property": "error",
        "nonblock-statement-body-position": "error",
        "object-curly-newline": "error",
--- a/public/index.html
+++ b/public/index.html
@ -26,7 +26,7 @@
    -->
    <title>Framework dashboard</title>
  </head>
-  <body class="is-full-screen">
+  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
--- a/src/App.js
+++ b/src/App.js
@ -30,7 +30,7 @@ function App() {
 ];

  return (
-    <div className='app is-full-screen'>
+    <div className='app'>
      
      <header>
        <UserControls />
@ -42,6 +42,7 @@ function App() {

          {user ? 
            <Sidebar>
+              SIDEBAR
              <SidebarMenu menuItems={menuItems} />
            </Sidebar>
            : null}
@ -49,11 +50,11 @@ function App() {
            <div className='main-content'>
              <ErrorBoundary>
                <Routes>
-                  <Route path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} />
-                  <Route path='/users/*' element={<PrivateRoute><Users /></PrivateRoute >} />
-                  <Route path='/admin/*' element={<PrivateRoute><Admin /></PrivateRoute >} />
-                  <Route path='/login/*' element={<UnauthedRoute><Login /></UnauthedRoute>} />
-                  <Route path='*' element={<Navigate to='/home' />} />
+                <Route path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} />
+                <Route path='/users/*' element={<PrivateRoute><Users /></PrivateRoute >} />
+                <Route path='/admin/*' element={<PrivateRoute><Admin /></PrivateRoute >} />
+                <Route path='/login/*' element={<UnauthedRoute><Login /></UnauthedRoute>} />
+                <Route path='*' element={<Navigate to='/home' />} />
                </Routes>
              </ErrorBoundary>
            </div>
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@ -4,7 +4,7 @@ import NavLink from '../structures/NavLink';

 const Sidebar = ({children}) => {

-    return <div className='sidebar card'>
+    return <div className='sidebar'>
        {children}
    </div>;

--- a/src/css/App.css
+++ b/src/css/App.css
@ -1,14 +1,14 @@
 .app {
+    width: 100vw;
+    height: 100vh;
    background-color: var(--background-primary);
  }
  
  header {
-    position: absolute;
-    right: 0;
    display: flex;
    flex-direction: row;
    text-align: center;
-    height: 50px;
+    height: var(--header-height);
    background-color: var(--background-tertiary);
  }
  
@ -20,7 +20,7 @@
  
  .main-content {
    width: 100%;
-    height: 100%;
-    padding-right: 30px;
+    height: 91%;
+    margin: 20px;
    background-color: var(--background-secondary);
  }
--- a/src/css/components/Sidebar.css
+++ b/src/css/components/Sidebar.css
@ -1,7 +1,7 @@
 .sidebar {
    min-width: 200px;
    height: 100%;
-    margin-right: 10px;
+    background-color: var(--background-secondary);
 }

 .sidebar-menu {
--- a/src/css/index.css
+++ b/src/css/index.css
@ -3,7 +3,7 @@
 :root {
  --bg-color: #232323;
  --bg-secondary-color: #343434;
-  --color-primary: #2760aa;
+  --color-primary: #00377e;
  --color-lightGrey: #d2d6dd;
  --color-grey: #ccc;
  --color-darkGrey: #777;
@ -17,35 +17,8 @@
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }

-.flex {
-  display: flex;
-  gap: 10px;
-}
-
-html {
-  height: 100%;
-}
-
-ul {
-  list-style-type: none;
-  /* padding: 0; */
-}
-
-tbody tr:hover {
-  background-color: rgba(0, 0, 0, 0.199) !important;
-}
-
-/* * {
-  outline: red dashed 1px;
-} */
-
-#root {
-  height: 100%;
-}
-
-.is-full-screen {
-  height: 100%;
-  min-height: unset;
+* {
+  /* outline: red dashed 1px; */
 }

 .card {
--- a/src/css/pages/Login.css
+++ b/src/css/pages/Login.css
@ -7,7 +7,7 @@ input{
 .logoImg{
    max-height: 120px;
 }
-.dingus{
+.row>div{
    max-width: 407px;
 }
 .methodsWrapper{
--- a/src/css/pages/Users.css
+++ b/src/css/pages/Users.css
@ -1,11 +0,0 @@
-.user-page {
-    height: 100%;
-}
-
-.user-list {
-    height: 95%;
-}
-
-li input {
-    margin: 0;
-}
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@ -18,6 +18,7 @@ const CredentialFields = () => {
    const [, setUser] = useLoginContext();
    const [fail, setFail] = useState(false);
    const navigate = useNavigate();
+    console.log(fail);

    const loginClick = async () => {
        const username = document.getElementById('username').value;
@ -26,12 +27,12 @@ const CredentialFields = () => {

        const result = await post('/api/login', { username, password });
        console.log(result);
-        if (![200, 302].includes(result.status)) {
+        if (!result.success) {
            setFail(true);
            return;
        }

-        if (!result.data.twoFactor) {
+        if (!result.twoFactor) {
            setUser(await fetchUser());
            return navigate('/home');
        }
@ -44,7 +45,7 @@ const CredentialFields = () => {
            <img className="logoImg mb-4" src={logoImg}></img>
        </div>
        <div className="card mb-3 is-center dir-column">
-            {fail ? <p>Invalid credentials</p> : null}
+            {fail ? 'Invalid credentials' : ''}
            <h2>Log in</h2>

            <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
@ -71,7 +72,6 @@ const CredentialFields = () => {

 const TwoFactor = () => {

-    const [fail, setFail] = useState(false);
    const [, setUser] = useLoginContext();
    const navigate = useNavigate();
    const twoFactorClick = async () => {
@ -80,15 +80,14 @@ const TwoFactor = () => {

        const result = await post('/api/login/verify', { code });
        console.log(result);
-        if (result.status === 200) {
+        if (result.success) {
            setUser(await fetchUser());
            return navigate('/home', { replace: true });
        }
-        setFail(true);
+        // else throw error?
    };

    return <div className="card mb-3 is-center dir-column">
-        {fail ? <p>Invalid code</p> : null}
        <h2>Verification code</h2>
        <input autoComplete='off' placeholder='Code' required id='2faCode' type='password' />
        <button onClick={twoFactorClick}>Enter</button>
@ -99,7 +98,7 @@ const Login = () => {
    document.body.classList.add('bg-triangles');

    return <div className="row is-center is-full-screen is-marginless">
-        <div className='dingus col-6 col-6-md col-3-lg'>
+        <div className='col-6 col-6-md col-3-lg'>
            
            <Routes>
                <Route path='/' element={<CredentialFields />} />
--- a/src/pages/Users.js
+++ b/src/pages/Users.js
@ -1,209 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { Route, Routes, useNavigate, useParams } from "react-router";
-import ErrorBoundary from "../util/ErrorBoundary";
-import { get } from '../util/Util';
-import '../css/pages/Users.css';
-
-const Permission = ({name, value}) => {
-    return <li className="flex is-vertical-align">
-        <label>{name}</label>
-        <input max={10} min={0} type='number' style={{maxWidth: '60px'}} defaultValue={value}></input>
-    </li>;
-};
-
-const PermissionGroup = ({ name, value }) => {
-    const elements = [];
-
-    for (const [perm, val] of Object.entries(value)) {
-        const props = { key: perm, name: perm, value: val };
-        if(typeof val ==='object') elements.push(<PermissionGroup {...props} />);
-        else elements.push(<Permission {...props} />);
-    }
-    return <li>
-        <b>Group: {name}</b>
-        <ul>
-            {elements}
-        </ul>
-    </li>;
-};
-
-const Permissions = ({ perms }) => {
-
-    const elements = [];
-    const keys = Object.keys(perms);
-    for (const perm of keys) {
-        const props = { key: perm, name: perm, value: perms[perm] };
-        let Elem = null;
-        switch (typeof perms[perm]) {
-            case 'number':
-                Elem = Permission;
-                break;
-            case 'object':
-                Elem = PermissionGroup;
-                break;
-            default:
-                // eslint-disable-next-line react/display-name
-                Elem = () => {
-                    return <p>Uknown permission structure</p>;
-                };
-                break;
-        }
-        elements.push(<Elem {...props} />);
-    }
-
-    return <div>
-        <h4>Permissions </h4>
-        <ul>
-            {elements}
-        </ul>
-    </div>;
-};
-
-// TODO: Make generic table list component and use it here and the user list
-const ApplicationList = ({ apps }) => {
-
-
-};
-
-const Application = ({ app }) => {
-     
-
-};
-
-const User = ({ user }) => {
-    
-    const navigate = useNavigate();
-    const [apps, updateApps] = useState([]);
-
-    useEffect(() => {
-        (async () => {
-            const response = await get(`/api/users/${user._id}/applications`);
-            if(response.status === 200) updateApps(response.data);
-        })();
-    }, [user]);
-
-    return <div className='user-card'>
-
-        <div className="row">
-            <div className="col-6">
-                <div className="flex">
-                    <button className="button primary" onClick={() => {
-                        navigate(-1);
-                    }}>Back</button>
-                    <h3>User {user._id}</h3>
-                </div>
-                <label htmlFor='username'>Username:</label>
-                <input id='username' defaultValue={user.username} />
-
-                <label htmlFor='displayName'>Display Name:</label>
-                <input id='displayName' placeholder='Name to display instead of username' defaultValue={user.displayName} />
-
-                <select>
-                    <option>User</option>
-                    <option>Bob</option>
-                </select>
-
-                <h4>Applications</h4>
-                <Routes>
-                    <Route path='/' element={<ApplicationList apps={apps} />} />
-                </Routes>
-                {apps.map(app => <Application key={app._id} app={app} />)}
-
-            </div>
-
-            <div className="col-6">
-                <Permissions perms={user.permissions} />
-            </div>
-        </div>
-
-        <button className="button primary">
-            Save
-        </button>
-        
-    </div>;
-};
-
-const UserListEntry = ({ user }) => {
-    
-    const navigate = useNavigate();
-
-    const onClick = () => {
-        navigate(`/users/${user._id}`);
-    };
-    
-    return <tr onClick={onClick} style={{cursor: 'pointer'}}>
-        <td>{user.username}</td>
-        <td>{user._id}</td>
-    </tr>;
-
-};
-
-// TODO: Make table list generic component
-const UserList = ({ users }) => {
-    
-    return <table className="striped" style={{maxWidth: '30em', marginBottom: '10px'}}>
-        <thead>
-            <tr>
-                <th>Username</th>
-                <th>ID</th>
-            </tr>
-        </thead>
-        <tbody>
-            {users.map(user => <UserListEntry key={user._id} user={user} />)}
-        </tbody>
-    </table>;
-
-};
+import React from "react";

 const Users = () => {

-    const [users, setUsers] = useState([]);
-    const [page, setPage] = useState(1);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        (async () => {
-            const result = await get('/api/users', { page });
-            if (result.success) {
-                setError(null);
-                setUsers(result.data);
-            } else setError(result.message);
-        })();
-    }, [page]);
-    
-    const UserWrapper = () => {
-        const { id } = useParams();
-        const user = users.find(u => u._id === id);
-        if (!user) return null;
-        return <User user={user} />;
-    };
-
-    const UserListWrapper = () => {
-        return <div className="user-list-wrapper">
-            <UserList users={users} />
-            <div className='flex is-vertical-align page-controls'>
-                <button className="col-1 button dark" onClick={() => setPage(page - 1 || 1)}>Previous</button>
-                <p>Page: {page}</p>
-                <button className="col-1 button dark" onClick={() => {
-                    if (users.length === 10) setPage(page + 1);
-                }}>Next</button>
-            </div>
-        </div>;
-    };
-
-    return <div className="user-page">
-        <p>USERS</p>
-        {error && <p>{error}</p>}
-
-        <div className='user-list card'>
-            <ErrorBoundary>
-                <Routes>
-                    <Route path='/:id/*' element={<UserWrapper />} />
-                    <Route path='/' element={<UserListWrapper />} />
-                </Routes>
-            </ErrorBoundary>
-        </div>
-        
+    return <div>
+        USERS
    </div>;

 };
--- a/src/util/ErrorBoundary.js
+++ b/src/util/ErrorBoundary.js
@ -8,12 +8,12 @@ class ErrorBoundary extends React.Component {
    }

    componentDidCatch(error, errorInfo) {
-        this.setState({error: true});
-        console.error(error, errorInfo);
+        this.sate.error = true;
+        console.log(error, errorInfo);
    }

    render() {
-        if (this.state.error) return <h1>Something went wrong :/</h1>;
+        if (this.state.error) return <h1>Something went wrong :(</h1>;
        return this.props.children;
    }

--- a/src/util/Util.js
+++ b/src/util/Util.js
@ -20,31 +20,26 @@ export const fetchUser = async (force = false) => {
    const user = getUser();
    if (!force && user) return user;

-    const result = await get('/api/user');
+    const result = await fetch('/api/user');
    if (result.status === 200) {
-        setSession(result.data);
-        return result.data;
+        const data = await result.json();
+        setSession(data);
+        return data;
    }
    return null;
 };

 const parseResponse = async (response) => {
    const { headers: rawHeaders, status } = response;
-    // Fetch returns heders as an interable for some reason
    const headers = [...rawHeaders].reduce((acc, [key, val]) => {
        acc[key.toLowerCase()] = val;
        return acc;
    }, {});
-    const success = status >= 200 && status < 300;
+    const success = status >= 200 && status < 400;
    const base = { success, status };
    if (headers['content-type']?.includes('application/json')) {
        const data = await response.json();
-        if (status === 401) {
-            // const currentPath = window.location.pathname;
-            // if (data.twoFactor && !currentPath.includes('/login/verify')) window.location.pathname = '/login/verify';
-            // else if(!data.twoFactor && !currentPath.includes('/login')) window.location.pathname = '/login';
-        }
-        return {...base, data};
+        return {...base, ...data};
    }
    return { ...base, message: await response.text() };
 };
@ -57,14 +52,5 @@ export const post = async (url, body) => {
        },
        body: JSON.stringify(body)
    });
-    console.log(response);
-    return parseResponse(response);
-};
-
-export const get = async (url, params) => {
-    if (params) url += '?' + Object.entries(params)
-        .map(([key, val]) => `${key}=${val}`)
-        .join('&');
-    const response = await fetch(url);
    return parseResponse(response);
 };