misc fixes n shit

users page
css
2022-11-23 00:39:43 +02:00 · 2022-11-23 00:39:19 +02:00 · 2022-11-23 00:38:56 +02:00 · 2022-11-21 12:50:44 +02:00 · 2022-11-21 12:50:21 +02:00
13 changed files with 291 additions and 39 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -226,7 +226,7 @@
        "no-useless-return": "error",
        "no-var": "error",
        "no-void": "error",
-        "no-warning-comments": "error",
+        "no-warning-comments": "warn",
        "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>
+  <body class="is-full-screen">
    <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'>
+    <div className='app is-full-screen'>
      
      <header>
        <UserControls />
@ -42,7 +42,6 @@ function App() {

          {user ? 
            <Sidebar>
-              SIDEBAR
              <SidebarMenu menuItems={menuItems} />
            </Sidebar>
            : null}
--- 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'>
+    return <div className='sidebar card'>
        {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: var(--header-height);
+    height: 50px;
    background-color: var(--background-tertiary);
  }
  
@ -20,7 +20,7 @@
  
  .main-content {
    width: 100%;
-    height: 91%;
-    margin: 20px;
+    height: 100%;
+    padding-right: 30px;
    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%;
-    background-color: var(--background-secondary);
+    margin-right: 10px;
 }

 .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: #00377e;
+  --color-primary: #2760aa;
  --color-lightGrey: #d2d6dd;
  --color-grey: #ccc;
  --color-darkGrey: #777;
@ -17,8 +17,35 @@
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }

-* {
-  /* outline: red dashed 1px; */
+.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;
 }

 .card {
--- a/src/css/pages/Login.css
+++ b/src/css/pages/Login.css
@ -7,7 +7,7 @@ input{
 .logoImg{
    max-height: 120px;
 }
-.row>div{
+.dingus{
    max-width: 407px;
 }
 .methodsWrapper{
--- a/src/css/pages/Users.css
+++ b/src/css/pages/Users.css
@ -0,0 +1,11 @@
+.user-page {
+    height: 100%;
+}
+
+.user-list {
+    height: 95%;
+}
+
+li input {
+    margin: 0;
+}
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@ -18,7 +18,6 @@ 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;
@ -27,12 +26,12 @@ const CredentialFields = () => {

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

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

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

 const TwoFactor = () => {

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

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

    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>
@ -98,7 +99,7 @@ const Login = () => {
    document.body.classList.add('bg-triangles');

    return <div className="row is-center is-full-screen is-marginless">
-        <div className='col-6 col-6-md col-3-lg'>
+        <div className='dingus col-6 col-6-md col-3-lg'>
            
            <Routes>
                <Route path='/' element={<CredentialFields />} />
--- a/src/pages/Users.js
+++ b/src/pages/Users.js
@ -1,9 +1,209 @@
-import React from "react";
+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>;
+
+};

 const Users = () => {

-    return <div>
-        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>
+        
    </div>;

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

    componentDidCatch(error, errorInfo) {
-        this.sate.error = true;
-        console.log(error, errorInfo);
+        this.setState({error: true});
+        console.error(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,26 +20,31 @@ export const fetchUser = async (force = false) => {
    const user = getUser();
    if (!force && user) return user;

-    const result = await fetch('/api/user');
+    const result = await get('/api/user');
    if (result.status === 200) {
-        const data = await result.json();
-        setSession(data);
-        return data;
+        setSession(result.data);
+        return result.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 < 400;
+    const success = status >= 200 && status < 300;
    const base = { success, status };
    if (headers['content-type']?.includes('application/json')) {
        const data = await response.json();
-        return {...base, ...data};
+        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, message: await response.text() };
 };
@ -52,5 +57,14 @@ 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);
 };
Author	SHA1	Message	Date
Navy.gif	bb26e84f90	misc fixes n shit	2022-11-23 00:39:43 +02:00
Navy.gif	c16b3cd047	users page	2022-11-23 00:39:19 +02:00
Navy.gif	ae24a41328	css	2022-11-23 00:38:56 +02:00
Navy.gif	94db871b67	get method for util	2022-11-21 12:50:44 +02:00
Navy.gif	ae2a4ddbcc	fix error boundary	2022-11-21 12:50:21 +02:00