registration page

src/App.js

@@ -14,6 +14,7 @@ import { UnauthedRoute } from './structures/UnauthedRoute';
 import Users from './pages/Users';
 import Admin from './pages/Admin';
 import TitledPage from './components/TitledPage';
+import Register from './pages/Register';
 
 function App() {
 
@@ -29,7 +30,7 @@ function App() {
   }, []);
 
   const menuItems = [
-    { to: '/home', label: 'Home' },
+    { to: '/home', label: 'Home', items: [{ to: '/profile', label: 'Profile', relative: false }] },
     { to: '/users', label: 'Users' },
     { to: '/admin', label: 'Admin' }
   ];
@@ -38,10 +39,10 @@ function App() {
 
   return (
     <div className='app is-full-screen'>
-      
+
       <div className='background'>
 
-          <BrowserRouter>
+        <BrowserRouter>
 
           {user ? 
             <div>
@@ -54,34 +55,45 @@ function App() {
             </div>
             : null}
 
-            <div className='main-content'>
-              <ErrorBoundary>
-                <Routes>
-                  <Route path='/home/*' element={<PrivateRoute>
-                    <TitledPage title='Home'>
-                      <Home />
-                    </TitledPage>
-                  </PrivateRoute >} />
-                  <Route path='/users/*' element={<PrivateRoute>
-                    <TitledPage title='Users' >
-                      <Users />
-                    </TitledPage>
-                  </PrivateRoute >} />
-                  <Route path='/admin/*' element={<PrivateRoute>
-                    <Admin />
-                  </PrivateRoute >} />
-                  <Route path='/login/*' element={<UnauthedRoute>
-                    <Login />
-                  </UnauthedRoute>} />
-                  <Route path='*' element={<Navigate to='/home' />} />
-                </Routes>
-              </ErrorBoundary>
-            </div>
+          <div className='main-content'>
+            <ErrorBoundary>
+              <Routes>
+                
+                <Route path='/home/*' element={<PrivateRoute>
+                  <TitledPage title='Home'>
+                    <Home />
+                  </TitledPage>
+                </PrivateRoute >} />
+                
+                <Route path='/users/*' element={<PrivateRoute>
+                  <TitledPage title='Users' >
+                    <Users />
+                  </TitledPage>
+                </PrivateRoute >} />
+                
+                <Route path='/admin/*' element={<PrivateRoute>
+                  <Admin />
+                </PrivateRoute >} />
 
+                <Route path='/login/*' element={<UnauthedRoute>
+                  <Login />
+                </UnauthedRoute>} />
 
-          </BrowserRouter>
+                <Route path='/register/*' element={<UnauthedRoute>
+                  <Register />
+                </UnauthedRoute>} />
+                
+                <Route path='*' element={<Navigate to='/home' />} />
+                
+              </Routes>
+            </ErrorBoundary>
+            
+          </div>
 
-        </div>
+        </BrowserRouter>
+
+      </div>
+      
     
     </div>
   );

src/css/index.css

@@ -18,6 +18,10 @@
   --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 a:hover:not(.button){
   opacity: 1 !important;
   color: #C4C4C4;

src/pages/Login.js

@@ -25,17 +25,17 @@ const CredentialFields = () => {
         if (!username.length || !password.length) return;
 
         const result = await post('/api/login', { username, password });
-        console.log(result);
+        
         if (![200, 302].includes(result.status)) {
             setFail(true);
             return;
         }
 
-        if (!result.data.twoFactor) {
+        if (!result.data?.twoFactor) {
             setUser(await fetchUser());
             return navigate('/home');
         }
-        return navigate('/login/verify');
+        return navigate('verify');
 
     };
 
@@ -43,13 +43,21 @@ const CredentialFields = () => {
         <div className="is-center">
             <img className="logoImg mb-4" src={logoImg}></img>
         </div>
+
         <div className="card mb-3 is-center dir-column">
             {fail ? <p>Invalid credentials</p> : null}
             <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>
+            <form>
+                <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
+                <input autoComplete='off' placeholder='Password' required id='password' type='password' />
+                <input value='Enter' type='button' onClick={loginClick} />
+            </form>
+
+            <div>
+                Don&apos;t ave an account? <a onClick={() => navigate('/register')} className="clickable">Register</a> instead
+            </div>
+
         </div>
 
         <div className="card is-center dir-column">

src/pages/Register.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { post } from "../util/Util";
+
+// TODO: Make this page look similar to the login page, probably generalise the components
+const Register = () => {
+
+    const [error, setError] = useState();
+    const [params] = useSearchParams();
+    const navigate = useNavigate();
+
+    document.body.classList.add('bg-triangles');
+    const code = params.get('code');
+
+    const submit = async () => {
+        const username = document.getElementById('username').value;
+        const password = document.getElementById('password').value;
+        if (!username.length || !password.length) return;
+
+        const response = await post('/api/register', { username, password, code });
+        if (response.status !== 200) return setError(response.message);
+        navigate('/login');
+    };
+
+    return <div className="row is-center is-full-screen is-marginless">
+
+        <div className='dingus col-6 col-6-md col-3-lg'>
+            <div className="card mb-3 is-center dir-column">
+                <h2>Register</h2>
+
+                {error && <p>{error}</p>}
+                
+                <form action="/api/user">
+                    <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
+                    <input autoComplete='off' placeholder='Password' required id='password' type='password' />
+                    <input onClick={submit} className="button" type='button' value='Register' />
+                </form>
+
+                <div>
+                    Have an account? <a onClick={() => navigate('/login')} className="clickable">Log in</a> instead
+                </div>
+
+            </div>
+        </div>
+    </div>;
+
+};
+
+export default Register;