profile section to allow token generation

client/src/App.js

@@ -8,6 +8,7 @@ import Media from './pages/Media';
 import LoginPage from './pages/Login';
 import Panel from './pages/Panel';
 import Mobile from './pages/Mobile';
+import Profile from './pages/Profile';
 import { clearSession, fetchUser, setSession, logout } from './util/Util';
 import { PrivateRoute } from './Routes/Private';
 import { useLoginContext } from './Structures/UserContext';
@@ -17,7 +18,8 @@ import Upload from './pages/Upload';
 const User = ({user}) => {
     return (
         <div className='flex-container user-controls'>
-            <p className='no-margin'> {user.tag} </p>
+            <p className='no-margin'>  </p>
+            <NavLink className='navlink' to='/profile' >{user.tag}</NavLink>
             <button className='logout-btn' onClick={logout}>Logout</button>
         </div>
     );
@@ -104,6 +106,7 @@ function App() {
                             <Route exact path='/login' element={<LoginPage />} />
                             <Route path='/upload' element={<PrivateRoute><Upload /></PrivateRoute>} />
                             <Route path='/panel' element={<PrivateRoute><Panel /></PrivateRoute>} />
+                            <Route path='/profile' element={<PrivateRoute><Profile /></PrivateRoute>} />
                             <Route path='*' element={<NotFound />} />
 
                         </Routes>

client/src/css/Profile.css

@@ -0,0 +1,11 @@
+.profile {
+    
+}
+
+.token {
+    background-color: gray;
+    position: relative;
+    top: 2vh;
+    margin: auto;
+    width: 50%;
+}

client/src/css/index.css

@@ -82,3 +82,10 @@ code {
 a {
   color: var(--navy-blue);
 }
+
+code {
+  background-color: #7777778c;
+  border-radius: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+}

client/src/pages/Profile.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { useLoginContext } from "../Structures/UserContext";
+import '../css/Profile.css';
+
+const Token = ({ user }) => {
+    
+    const [token, updateToken] = useState(user?.token);
+    console.log(user);
+
+    const generateToken = async ({target: button}) => {
+
+        button.disabled = true;
+        const response = await fetch(`/api/user/token`, {
+            credentials: 'include'
+        });
+
+        button.disabled = true;
+
+        if (response.status !== 200) return;
+
+        const { token } = await response.json();
+        updateToken(token);
+
+    };
+
+    return (
+        <div >
+            
+            <p>
+                The upload token lets you send files directly to the <code>/api/upload</code> endpoint.<br />
+                The token needs to be under the <code>Authorization</code> header.
+            </p>
+
+            <div className='token'>
+                {!token ?
+                    <span><button onClick={generateToken}>Generate token</button> </span> :
+                    <span><p>{token}</p> <button onClick={generateToken}>Regenerate token</button></span>
+                }
+            </div>
+
+        </div>
+    );
+
+};
+
+const Profile = () => {
+
+    const [user] = useLoginContext();
+    
+    return (
+        <div className='profile'>
+            
+            <Token user={user} />
+
+        </div>
+    );
+
+};
+
+export default Profile;

client/src/pages/Upload.js

@@ -56,6 +56,7 @@ const Upload = () => {
                                 </td>
                                 <td>
                                     <input
+                                        autoFocus
                                         id='name'
                                         type='text'
                                         onChange={event => updateName(event.target.value)}