bs

wip
login flow now works
2022-11-20 18:40:25 +02:00 · 2022-11-20 18:40:17 +02:00 · 2022-11-20 18:40:03 +02:00 · 2022-11-20 18:39:49 +02:00 · 2022-11-20 18:39:39 +02:00 · 2022-11-20 18:39:18 +02:00
14 changed files with 9350 additions and 28754 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -113,7 +113,7 @@
        "jsx-quotes": "off",
        "key-spacing": "off",
        "keyword-spacing": "off",
-        "line-comment-position": "error",
+        "line-comment-position": "off",
        "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": "error",
+        "no-inline-comments": "off",
        "no-invalid-this": "error",
        "no-iterator": "error",
        "no-label-var": "error",
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/index.html
+++ b/public/index.html
@ -7,7 +7,7 @@
    <meta name="theme-color" content="#000000" />
    <meta
      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" />
    <!--
@ -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>React App</title>
+    <title>Framework dashboard</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.js
+++ b/src/App.js
@ -1,5 +1,5 @@
 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 Home from './pages/Home';
@ -9,6 +9,10 @@ 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() {

@ -19,7 +23,7 @@ function App() {
  }, []);

  const menuItems = [
-    { to: '/', label: 'Home' },
+    { to: '/home', label: 'Home' },
    { to: '/users', label: 'Users' },
    { to: '/admin', label: 'Admin' }

@ -32,22 +36,25 @@ function App() {
        <UserControls />
      </header>
      
-      {user ?
      <div className='background'>

          <BrowserRouter>

+          {user ? 
            <Sidebar>
              SIDEBAR
-              <SidebarMenu menuItems={menuItems}>
-
-              </SidebarMenu>
+              <SidebarMenu menuItems={menuItems} />
            </Sidebar>
+            : null}

            <div className='main-content'>
              <ErrorBoundary>
                <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>
              </ErrorBoundary>
            </div>
@ -56,7 +63,6 @@ function App() {
          </BrowserRouter>

        </div>
-      : <Login />}
    
    </div>
  );
--- a/src/components/UserControls.js
+++ b/src/components/UserControls.js
@ -5,12 +5,13 @@ 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> 
    </div>;

 };
--- a/src/css/components/UserControls.css
+++ b/src/css/components/UserControls.css
@ -1,3 +1,3 @@
 .user-controls {
-    
+    display: flex;
 }
--- a/src/css/index.css
+++ b/src/css/index.css
@ -16,6 +16,11 @@
  --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;
--- a/src/index.js
+++ b/src/index.js
@ -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);
--- a/src/pages/Admin.js
+++ b/src/pages/Admin.js
@ -0,0 +1,11 @@
+import React from "react";
+
+const Admin = () => {
+
+    return <div>
+        ADMIN
+    </div>;
+
+};
+
+export default Admin;
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@ -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 logoImg from '../img/logo.png';
-import { post } from "../util/Util";
+import { useLoginContext } from "../structures/UserContext";
+import { fetchUser, post } from "../util/Util";

 const loginMethods = [
 {
@ -10,24 +12,40 @@ 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 username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        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">
-        <div className='col-6 col-6-md col-3-lg'>
+    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>

            <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
@ -39,6 +57,7 @@ const Login = () => {
            <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}
@ -48,7 +67,43 @@ const Login = () => {
                />)}
            </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>;
--- a/src/pages/Users.js
+++ b/src/pages/Users.js
@ -0,0 +1,11 @@
+import React from "react";
+
+const Users = () => {
+
+    return <div>
+        USERS
+    </div>;
+
+};
+
+export default Users;
--- a/src/structures/UnauthedRoute.js
+++ b/src/structures/UnauthedRoute.js
@ -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;
+};
--- a/src/util/Util.js
+++ b/src/util/Util.js
@ -16,23 +16,41 @@ export const setSession = (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');
    if (result.status === 200) {
        const data = await result.json();
        setSession(data);
        return data;
    }
+    return null;
 };

-export const post = (url, body) => {
-    return fetch(url, {
+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, {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(body)
    });
-
-
+    return parseResponse(response);
 };
--- a/yarn.lock
+++ b/yarn.lock
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