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

Compare commits

base: Navy.gif:73de89ce322e9770c2cd96bd1e18cf014bca1e7f
Branches Tags
Navy.gif:master
...
compare: Navy.gif:d228597d0e3bb86c6b44d82775ad7a977b16ad22
Branches Tags
Navy.gif:master

7 Commits
73de89ce32 ... d228597d0e

Author SHA1 Message Date
Navy.gif
d228597d0e
bs 2022-11-20 18:40:25 +02:00
Navy.gif
dbd5a7a077
wip 2022-11-20 18:40:17 +02:00
Navy.gif
8cb9bee1d0
login flow now works 2022-11-20 18:40:03 +02:00
Navy.gif
1d4a183a3e
parsing headers 2022-11-20 18:39:49 +02:00
Navy.gif
976698e4b8
route stuff 2022-11-20 18:39:39 +02:00
Navy.gif
d03ea82458
index.html changes 2022-11-20 18:39:18 +02:00
Navy.gif
b44a8f3826
meta files 2022-11-20 18:39:02 +02:00
14 changed files with 9350 additions and 28754 deletions
Show Stats Expand all files Collapse all files

4
.eslintrc.json
View File

@ -113,7 +113,7 @@
"jsx-quotes": "off", "jsx-quotes": "off",
"key-spacing": "off", "key-spacing": "off",
"keyword-spacing": "off", "keyword-spacing": "off",
"line-comment-position": "error", "line-comment-position": "off",
"linebreak-style": "off", "linebreak-style": "off",
"lines-around-comment": "error", "lines-around-comment": "error",
"lines-between-class-members": "error", "lines-between-class-members": "error",
@ -165,7 +165,7 @@
"no-implicit-coercion": "error", "no-implicit-coercion": "error",
"no-implicit-globals": "error", "no-implicit-globals": "error",
"no-implied-eval": "error", "no-implied-eval": "error",
"no-inline-comments": "error", "no-inline-comments": "off",
"no-invalid-this": "error", "no-invalid-this": "error",
"no-iterator": "error", "no-iterator": "error",
"no-label-var": "error", "no-label-var": "error",

28711
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
public/index.html
View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Navy's framework frontend"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Framework dashboard</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

24
src/App.js
View File

@ -1,5 +1,5 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { BrowserRouter, Route, Routes} from 'react-router-dom'; import { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
import './css/App.css'; import './css/App.css';
import Home from './pages/Home'; import Home from './pages/Home';
@ -9,6 +9,10 @@ import UserControls from './components/UserControls';
import { useLoginContext } from './structures/UserContext'; import { useLoginContext } from './structures/UserContext';
import Login from './pages/Login'; import Login from './pages/Login';
import { fetchUser } from './util/Util'; import { fetchUser } from './util/Util';
import PrivateRoute from './structures/PrivateRoute';
import { UnauthedRoute } from './structures/UnauthedRoute';
import Users from './pages/Users';
import Admin from './pages/Admin';
function App() { function App() {
@ -19,7 +23,7 @@ function App() {
}, []); }, []);
const menuItems = [ const menuItems = [
{ to: '/', label: 'Home' }, { to: '/home', label: 'Home' },
{ to: '/users', label: 'Users' }, { to: '/users', label: 'Users' },
{ to: '/admin', label: 'Admin' } { to: '/admin', label: 'Admin' }
@ -32,22 +36,25 @@ function App() {
<UserControls /> <UserControls />
</header> </header>
{user ? <div className='background'>
<div className='background'>
<BrowserRouter> <BrowserRouter>
{user ?
<Sidebar> <Sidebar>
SIDEBAR SIDEBAR
<SidebarMenu menuItems={menuItems}> <SidebarMenu menuItems={menuItems} />
</SidebarMenu>
</Sidebar> </Sidebar>
: null}
<div className='main-content'> <div className='main-content'>
<ErrorBoundary> <ErrorBoundary>
<Routes> <Routes>
<Route exact path='/' element={<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> </Routes>
</ErrorBoundary> </ErrorBoundary>
</div> </div>
@ -56,7 +63,6 @@ function App() {
</BrowserRouter> </BrowserRouter>
</div> </div>
: <Login />}
</div> </div>
); );

5
src/components/UserControls.js
View File

@ -5,12 +5,13 @@ import { useLoginContext } from "../structures/UserContext";
const UserControls = () => { const UserControls = () => {
const [user] = useLoginContext(); const [user] = useLoginContext();
console.log(user);
if (!user) return; if (!user) return;
return <div className='user-controls'> return <div className='user-controls'>
Hello {user.displayName} <div>
Hello {user.displayName}
</div>
</div>; </div>;
}; };

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

@ -1,3 +1,3 @@
.user-controls { .user-controls {
display: flex;
} }

5
src/css/index.css
View File

@ -16,6 +16,11 @@
--font-family-sans: sans-serif; --font-family-sans: sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace; --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
} }
* {
/* outline: red dashed 1px; */
}
.card { .card {
background: var(--bg-secondary-color); background: var(--bg-secondary-color);
box-shadow: 0 1px 3px #00000085; box-shadow: 0 1px 3px #00000085;

2
src/index.js
View File

@ -15,4 +15,4 @@ root.render(<React.StrictMode>
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(console.log); // reportWebVitals(console.log);

11
src/pages/Admin.js Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const Admin = () => {
return <div>
ADMIN
</div>;
};
export default Admin;

97
src/pages/Login.js
View File

@ -1,7 +1,9 @@
import React from "react"; import React, { useState } from "react";
import { Route, Routes, useNavigate } from "react-router";
import '../css/pages/Login.css'; import '../css/pages/Login.css';
import logoImg from '../img/logo.png'; import logoImg from '../img/logo.png';
import { post } from "../util/Util"; import { useLoginContext } from "../structures/UserContext";
import { fetchUser, post } from "../util/Util";
const loginMethods = [ const loginMethods = [
{ {
@ -10,35 +12,52 @@ const loginMethods = [
} }
]; ];
const Login = () => {
document.body.classList.add('bg-triangles'); const CredentialFields = () => {
const [, setUser] = useLoginContext();
const [fail, setFail] = useState(false);
const navigate = useNavigate();
console.log(fail);
const loginClick = async () => { const loginClick = async () => {
const username = document.getElementById('username').value; const username = document.getElementById('username').value;
const password = document.getElementById('password').value; const password = document.getElementById('password').value;
if (!username.length || !password.length) return; if (!username.length || !password.length) return;
await post('/api/login', {username, password}); const result = await post('/api/login', { username, password });
console.log(result);
if (!result.success) {
setFail(true);
return;
}
if (!result.twoFactor) {
setUser(await fetchUser());
return navigate('/home');
}
return navigate('/login/verify');
}; };
return <div className="row is-center is-full-screen is-marginless"> return <div>
<div className='col-6 col-6-md col-3-lg'> <div className="is-center">
<div className="is-center"> <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' : ''}
<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 />
<input autoComplete='off' placeholder='Password' required id='password' type='password' /> <input autoComplete='off' placeholder='Password' required id='password' type='password' />
<button onClick={loginClick}>Enter</button> <button onClick={loginClick}>Enter</button>
</div> </div>
<div className="card is-center dir-column"> <div className="card is-center dir-column">
<b>Alternate login methods</b> <b>Alternate login methods</b>
<div className="methodsWrapper is-center flex-wrap"> <div className="methodsWrapper is-center flex-wrap">
{loginMethods.map(method => <img {loginMethods.map(method => <img
crossOrigin="anonymous"
className='third-party-login' className='third-party-login'
key={method.name} key={method.name}
alt={method.name} alt={method.name}
@ -46,10 +65,46 @@ const Login = () => {
width={48} height={48} width={48} height={48}
onClick={() => { window.location.pathname = `/api/login/${method.name}`; }} onClick={() => { window.location.pathname = `/api/login/${method.name}`; }}
/>)} />)}
</div>
</div> </div>
</div>
</div>;
};
const TwoFactor = () => {
const [, setUser] = useLoginContext();
const navigate = useNavigate();
const twoFactorClick = async () => {
const code = document.getElementById('2faCode').value;
if (!code) return;
const result = await post('/api/login/verify', { code });
console.log(result);
if (result.success) {
setUser(await fetchUser());
return navigate('/home', { replace: true });
}
// else throw error?
};
return <div className="card mb-3 is-center dir-column">
<h2>Verification code</h2>
<input autoComplete='off' placeholder='Code' required id='2faCode' type='password' />
<button onClick={twoFactorClick}>Enter</button>
</div>;
};
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'>
<Routes>
<Route path='/' element={<CredentialFields />} />
<Route path='/verify' element={<TwoFactor />} />
</Routes>
</div> </div>
</div>; </div>;

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

@ -0,0 +1,11 @@
import React from "react";
const Users = () => {
return <div>
USERS
</div>;
};
export default Users;

9
src/structures/UnauthedRoute.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import { Navigate } from "react-router-dom";
import { getUser } from "../util/Util";
export const UnauthedRoute = ({ children }) => {
const user = getUser();
if (user) return <Navigate to='/home' replace />;
return children;
};

28
src/util/Util.js
View File

@ -16,23 +16,41 @@ export const setSession = (user) => {
sessionStorage.setItem('user', JSON.stringify(user)); sessionStorage.setItem('user', JSON.stringify(user));
}; };
export const fetchUser = async () => { export const fetchUser = async (force = false) => {
const user = getUser();
if (!force && user) return user;
const result = await fetch('/api/user'); const result = await fetch('/api/user');
if (result.status === 200) { if (result.status === 200) {
const data = await result.json(); const data = await result.json();
setSession(data); setSession(data);
return data; return data;
} }
return null;
}; };
export const post = (url, body) => { const parseResponse = async (response) => {
return fetch(url, { const { headers: rawHeaders, status } = response;
const headers = [...rawHeaders].reduce((acc, [key, val]) => {
acc[key.toLowerCase()] = val;
return acc;
}, {});
const success = status >= 200 && status < 400;
const base = { success, status };
if (headers['content-type']?.includes('application/json')) {
const data = await response.json();
return {...base, ...data};
}
return { ...base, message: await response.text() };
};
export const post = async (url, body) => {
const response = await fetch(url, {
method: 'post', method: 'post',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(body) body: JSON.stringify(body)
}); });
return parseResponse(response);
}; };

9191
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff