fixes

src/App.js

@@ -13,6 +13,7 @@ import PrivateRoute from './structures/PrivateRoute';
 import { UnauthedRoute } from './structures/UnauthedRoute';
 import Users from './pages/Users';
 import Admin from './pages/Admin';
+import TitledPage from './components/TitledPage';
 
 function App() {
 
@@ -56,10 +57,22 @@ function App() {
             <div className='main-content'>
               <ErrorBoundary>
                 <Routes>
-                  <Route path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} />
+                  <Route path='/home/*' element={<PrivateRoute>
-                  <Route path='/users/*' element={<PrivateRoute><Users /></PrivateRoute >} />
+                    <TitledPage title='Home'>
-                  <Route path='/admin/*' element={<PrivateRoute><Admin /></PrivateRoute >} />
+                      <Home />
-                  <Route path='/login/*' element={<UnauthedRoute><Login /></UnauthedRoute>} />
+                    </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>

src/components/TitledPage.js

@@ -0,0 +1,14 @@
+import React from "react";
+import '../css/pages/Empty.css';
+
+const TitledPage = ({title, children}) => {
+
+    return <div className="page">
+        <h2 className="pageTitle">{title}</h2>
+        <div className='card'>
+            {children}
+        </div>
+    </div>;
+};
+
+export default TitledPage;

src/pages/Empty.js

@@ -1,13 +0,0 @@
-import React from "react";
-import '../css/pages/Empty.css';
-
-const Empty = () => {
-
-    return <div className="user-page">
-        <h2 className="pageTitle">Empty</h2>
-        <div className='card'>
-        </div>
-    </div>;
-};
-
-export default Empty;

src/pages/Home.js

@@ -5,14 +5,11 @@ import { get } from "../util/Util";
 const Home = () => {
 
     return <div className="user-page">
-        <h2 className="pageTitle">Home</h2>
-        <div className='card'>
         <button onClick={async () => {
             console.log(await get('/api/test'));
         }}>
             Test
         </button>
-        </div>
     </div>;
 };
 

src/pages/Users.js

@@ -186,7 +186,7 @@ const CreateUserField = () => {
             <input autoComplete="off" type='text' id='username' />
 
             <label htmlFor="password">Password</label>
-            <input autoComplete="off" type='password' id='username' />
+            <input autoComplete="off" type='password' id='password' />
         </form>
     </div>;
 
@@ -245,22 +245,14 @@ const Users = () => {
         </div>;
     };
 
-    return <div className="user-page">
+    return <div className="user-list">
-        <h2 className="pageTitle">Users</h2>
         {error && <p>{error}</p>}
-
-        <div className='card'>
-            <div className="user-list">
         <ErrorBoundary>
             <Routes>
                 <Route path='/:id/*' element={<UserWrapper />} />
                 <Route path='/' element={<UserListWrapper />} />
             </Routes>
         </ErrorBoundary>
-            </div>
-
-        </div>
-        
     </div>;
 
 };