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

Compare commits

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

No commits in common. "bb26e84f9060377befb4dbc7d931da1dbd1fe01b" and "d228597d0e3bb86c6b44d82775ad7a977b16ad22" have entirely different histories.
bb26e84f90 ... d228597d0e

13 changed files with 39 additions and 291 deletions
Show Stats Expand all files Collapse all files

2
.eslintrc.json
View File

@ -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",

2
public/index.html
View File

@ -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>
<!--

3
src/App.js
View File

@ -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}

2
src/components/Sidebar.js
View File

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

10
src/css/App.css
View File

@ -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);
}

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

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

33
src/css/index.css
View File

@ -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 {

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

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

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

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

15
src/pages/Login.js
View File

@ -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 />} />

206
src/pages/Users.js
View File

@ -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>;
};

6
src/util/ErrorBoundary.js
View File

@ -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;
}

26
src/util/Util.js
View File

@ -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);
};