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",
"key-spacing": "off",
"keyword-spacing": "off",
"line-comment-position": "off",
"line-comment-position": "error",
"linebreak-style": "off",
"lines-around-comment": "error",
"lines-between-class-members": "error",
@ -165,7 +165,7 @@
"no-implicit-coercion": "error",
"no-implicit-globals": "error",
"no-implied-eval": "error",
"no-inline-comments": "off",
"no-inline-comments": "error",
"no-invalid-this": "error",
"no-iterator": "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="description"
content="Navy's framework frontend"
content="Web site created using create-react-app"
/>
<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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Framework dashboard</title>
<title>React App</title>
</head>
<body>
<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 { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
import { BrowserRouter, Route, Routes} from 'react-router-dom';
import './css/App.css';
import Home from './pages/Home';
@ -9,10 +9,6 @@ import UserControls from './components/UserControls';
import { useLoginContext } from './structures/UserContext';
import Login from './pages/Login';
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() {
@ -23,7 +19,7 @@ function App() {
}, []);
const menuItems = [
{ to: '/home', label: 'Home' },
{ to: '/', label: 'Home' },
{ to: '/users', label: 'Users' },
{ to: '/admin', label: 'Admin' }
@ -36,25 +32,22 @@ function App() {
<UserControls />
</header>
<div className='background'>
{user ?
<div className='background'>
<BrowserRouter>
{user ?
<Sidebar>
SIDEBAR
<SidebarMenu menuItems={menuItems} />
<SidebarMenu menuItems={menuItems}>
</SidebarMenu>
</Sidebar>
: null}
<div className='main-content'>
<ErrorBoundary>
<Routes>
<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' />} />
<Route exact path='/' element={<Home />} />
</Routes>
</ErrorBoundary>
</div>
@ -63,6 +56,7 @@ function App() {
</BrowserRouter>
</div>
: <Login />}
</div>
);

5
src/components/UserControls.js
View File

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

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

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

5
src/css/index.css
View File

@ -16,11 +16,6 @@
--font-family-sans: sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}
* {
/* outline: red dashed 1px; */
}
.card {
background: var(--bg-secondary-color);
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
// to log results (for example: reportWebVitals(console.log))
// 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;

97
src/pages/Login.js
View File

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

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));
};
export const fetchUser = async (force = false) => {
const user = getUser();
if (!force && user) return user;
export const fetchUser = async () => {
const result = await fetch('/api/user');
if (result.status === 200) {
const data = await result.json();
setSession(data);
return data;
}
return null;
};
const parseResponse = async (response) => {
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, {
export const post = (url, body) => {
return fetch(url, {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
return parseResponse(response);
};

9191
yarn.lock
View File

File diff suppressed because it is too large Load Diff