Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Navy.gif:d228597d0e3bb86c6b44d82775ad7a977b16ad22
Branches Tags
Navy.gif:master
...
compare: Navy.gif:bb26e84f9060377befb4dbc7d931da1dbd1fe01b
Branches Tags
Navy.gif:master

5 Commits
d228597d0e ... bb26e84f90

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
13 changed files with 291 additions and 39 deletions
Show Stats Expand all files Collapse all files

2
.eslintrc.json
View File

@ -226,7 +226,7 @@
"no-useless-return": "error", "no-useless-return": "error",
"no-var": "error", "no-var": "error",
"no-void": "error", "no-void": "error",
"no-warning-comments": "error", "no-warning-comments": "warn",
"no-whitespace-before-property": "error", "no-whitespace-before-property": "error",
"nonblock-statement-body-position": "error", "nonblock-statement-body-position": "error",
"object-curly-newline": "error", "object-curly-newline": "error",

2
public/index.html
View File

@ -26,7 +26,7 @@
--> -->
<title>Framework dashboard</title> <title>Framework dashboard</title>
</head> </head>
<body> <body class="is-full-screen">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

3
src/App.js
View File

@ -30,7 +30,7 @@ function App() {
]; ];
return ( return (
<div className='app'> <div className='app is-full-screen'>
<header> <header>
<UserControls /> <UserControls />
@ -42,7 +42,6 @@ function App() {
{user ? {user ?
<Sidebar> <Sidebar>
SIDEBAR
<SidebarMenu menuItems={menuItems} /> <SidebarMenu menuItems={menuItems} />
</Sidebar> </Sidebar>
: null} : null}

2
src/components/Sidebar.js
View File

@ -4,7 +4,7 @@ import NavLink from '../structures/NavLink';
const Sidebar = ({children}) => { const Sidebar = ({children}) => {
return <div className='sidebar'> return <div className='sidebar card'>
{children} {children}
</div>; </div>;

10
src/css/App.css
View File

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

2
src/css/components/Sidebar.css
View File

@ -1,7 +1,7 @@
.sidebar { .sidebar {
min-width: 200px; min-width: 200px;
height: 100%; height: 100%;
background-color: var(--background-secondary); margin-right: 10px;
} }
.sidebar-menu { .sidebar-menu {

33
src/css/index.css
View File

@ -3,7 +3,7 @@
:root { :root {
--bg-color: #232323; --bg-color: #232323;
--bg-secondary-color: #343434; --bg-secondary-color: #343434;
--color-primary: #00377e; --color-primary: #2760aa;
--color-lightGrey: #d2d6dd; --color-lightGrey: #d2d6dd;
--color-grey: #ccc; --color-grey: #ccc;
--color-darkGrey: #777; --color-darkGrey: #777;
@ -17,8 +17,35 @@
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace; --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
} }
* { .flex {
/* outline: red dashed 1px; */ 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 { .card {

2
src/css/pages/Login.css
View File

@ -7,7 +7,7 @@ input{
.logoImg{ .logoImg{
max-height: 120px; max-height: 120px;
} }
.row>div{ .dingus{
max-width: 407px; max-width: 407px;
} }
.methodsWrapper{ .methodsWrapper{

11
src/css/pages/Users.css Normal file
View File

@ -0,0 +1,11 @@
.user-page {
height: 100%;
}
.user-list {
height: 95%;
}
li input {
margin: 0;
}

15
src/pages/Login.js
View File

@ -18,7 +18,6 @@ const CredentialFields = () => {
const [, setUser] = useLoginContext(); const [, setUser] = useLoginContext();
const [fail, setFail] = useState(false); const [fail, setFail] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
console.log(fail);
const loginClick = async () => { const loginClick = async () => {
const username = document.getElementById('username').value; const username = document.getElementById('username').value;
@ -27,12 +26,12 @@ const CredentialFields = () => {
const result = await post('/api/login', { username, password }); const result = await post('/api/login', { username, password });
console.log(result); console.log(result);
if (!result.success) { if (![200, 302].includes(result.status)) {
setFail(true); setFail(true);
return; return;
} }
if (!result.twoFactor) { if (!result.data.twoFactor) {
setUser(await fetchUser()); setUser(await fetchUser());
return navigate('/home'); return navigate('/home');
} }
@ -45,7 +44,7 @@ const CredentialFields = () => {
<img className="logoImg mb-4" src={logoImg}></img> <img className="logoImg mb-4" src={logoImg}></img>
</div> </div>
<div className="card mb-3 is-center dir-column"> <div className="card mb-3 is-center dir-column">
{fail ? 'Invalid credentials' : ''} {fail ? <p>Invalid credentials</p> : null}
<h2>Log in</h2> <h2>Log in</h2>
<input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus /> <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
@ -72,6 +71,7 @@ const CredentialFields = () => {
const TwoFactor = () => { const TwoFactor = () => {
const [fail, setFail] = useState(false);
const [, setUser] = useLoginContext(); const [, setUser] = useLoginContext();
const navigate = useNavigate(); const navigate = useNavigate();
const twoFactorClick = async () => { const twoFactorClick = async () => {
@ -80,14 +80,15 @@ const TwoFactor = () => {
const result = await post('/api/login/verify', { code }); const result = await post('/api/login/verify', { code });
console.log(result); console.log(result);
if (result.success) { if (result.status === 200) {
setUser(await fetchUser()); setUser(await fetchUser());
return navigate('/home', { replace: true }); return navigate('/home', { replace: true });
} }
// else throw error? setFail(true);
}; };
return <div className="card mb-3 is-center dir-column"> return <div className="card mb-3 is-center dir-column">
{fail ? <p>Invalid code</p> : null}
<h2>Verification code</h2> <h2>Verification code</h2>
<input autoComplete='off' placeholder='Code' required id='2faCode' type='password' /> <input autoComplete='off' placeholder='Code' required id='2faCode' type='password' />
<button onClick={twoFactorClick}>Enter</button> <button onClick={twoFactorClick}>Enter</button>
@ -98,7 +99,7 @@ const Login = () => {
document.body.classList.add('bg-triangles'); document.body.classList.add('bg-triangles');
return <div className="row is-center is-full-screen is-marginless"> 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> <Routes>
<Route path='/' element={<CredentialFields />} /> <Route path='/' element={<CredentialFields />} />

206
src/pages/Users.js
View File

@ -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 = () => { const Users = () => {
return <div> const [users, setUsers] = useState([]);
USERS 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>; </div>;
}; };

6
src/util/ErrorBoundary.js
View File

@ -8,12 +8,12 @@ class ErrorBoundary extends React.Component {
} }
componentDidCatch(error, errorInfo) { componentDidCatch(error, errorInfo) {
this.sate.error = true; this.setState({error: true});
console.log(error, errorInfo); console.error(error, errorInfo);
} }
render() { 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; return this.props.children;
} }

26
src/util/Util.js
View File

@ -20,26 +20,31 @@ export const fetchUser = async (force = false) => {
const user = getUser(); const user = getUser();
if (!force && user) return user; if (!force && user) return user;
const result = await fetch('/api/user'); const result = await get('/api/user');
if (result.status === 200) { if (result.status === 200) {
const data = await result.json(); setSession(result.data);
setSession(data); return result.data;
return data;
} }
return null; return null;
}; };
const parseResponse = async (response) => { const parseResponse = async (response) => {
const { headers: rawHeaders, status } = response; const { headers: rawHeaders, status } = response;
// Fetch returns heders as an interable for some reason
const headers = [...rawHeaders].reduce((acc, [key, val]) => { const headers = [...rawHeaders].reduce((acc, [key, val]) => {
acc[key.toLowerCase()] = val; acc[key.toLowerCase()] = val;
return acc; return acc;
}, {}); }, {});
const success = status >= 200 && status < 400; const success = status >= 200 && status < 300;
const base = { success, status }; const base = { success, status };
if (headers['content-type']?.includes('application/json')) { if (headers['content-type']?.includes('application/json')) {
const data = await response.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() }; return { ...base, message: await response.text() };
}; };
@ -52,5 +57,14 @@ export const post = async (url, body) => {
}, },
body: JSON.stringify(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); return parseResponse(response);
}; };