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:73de89ce322e9770c2cd96bd1e18cf014bca1e7f
Branches Tags
Navy.gif:master

No commits in common. "d228597d0e3bb86c6b44d82775ad7a977b16ad22" and "73de89ce322e9770c2cd96bd1e18cf014bca1e7f" have entirely different histories.
d228597d0e ... 73de89ce32

14 changed files with 28754 additions and 9350 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": "off", "line-comment-position": "error",
"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": "off", "no-inline-comments": "error",
"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 Normal file
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="Navy's framework frontend" content="Web site created using create-react-app"
/> />
<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>Framework dashboard</title> <title>React App</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, Navigate, Route, Routes} from 'react-router-dom'; import { BrowserRouter, 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,10 +9,6 @@ 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() {
@ -23,7 +19,7 @@ function App() {
}, []); }, []);
const menuItems = [ const menuItems = [
{ to: '/home', label: 'Home' }, { to: '/', label: 'Home' },
{ to: '/users', label: 'Users' }, { to: '/users', label: 'Users' },
{ to: '/admin', label: 'Admin' } { to: '/admin', label: 'Admin' }
@ -36,25 +32,22 @@ function App() {
<UserControls /> <UserControls />
</header> </header>
<div className='background'> {user ?
<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 path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} /> <Route exact path='/' element={<Home />} />
<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>
@ -63,6 +56,7 @@ function App() {
</BrowserRouter> </BrowserRouter>
</div> </div>
: <Login />}
</div> </div>
); );

5
src/components/UserControls.js
View File

@ -5,13 +5,12 @@ 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'>
<div> Hello {user.displayName}
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,11 +16,6 @@
--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
View File

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

95
src/pages/Login.js
View File

@ -1,9 +1,7 @@
import React, { useState } from "react"; import React 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 { useLoginContext } from "../structures/UserContext"; import { post } from "../util/Util";
import { fetchUser, post } from "../util/Util";
const loginMethods = [ const loginMethods = [
{ {
@ -12,52 +10,35 @@ const loginMethods = [
} }
]; ];
const Login = () => {
const CredentialFields = () => { document.body.classList.add('bg-triangles');
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;
const result = await post('/api/login', { username, password }); 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> return <div className="row is-center is-full-screen is-marginless">
<div className="is-center"> <div className='col-6 col-6-md col-3-lg'>
<img className="logoImg mb-4" src={logoImg}></img> <div className="is-center">
</div> <img className="logoImg mb-4" src={logoImg}></img>
<div className="card mb-3 is-center dir-column"> </div>
{fail ? 'Invalid credentials' : ''} <div className="card mb-3 is-center dir-column">
<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}
@ -65,45 +46,9 @@ const CredentialFields = () => {
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
View File

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

9
src/structures/UnauthedRoute.js
View File

@ -1,9 +0,0 @@
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,41 +16,23 @@ export const setSession = (user) => {
sessionStorage.setItem('user', JSON.stringify(user)); sessionStorage.setItem('user', JSON.stringify(user));
}; };
export const fetchUser = async (force = false) => { export const fetchUser = async () => {
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;
}; };
const parseResponse = async (response) => { export const post = (url, body) => {
const { headers: rawHeaders, status } = response; return fetch(url, {
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
View File

File diff suppressed because it is too large Load Diff