From 53c6f6448c5e5e5ea5fb5c63c0963667acc61ccc Mon Sep 17 00:00:00 2001
From: "Navy.gif" <navydotgif@gmail.com>
Date: Sat, 26 Mar 2022 14:18:16 +0200
Subject: [PATCH] profile section to allow token generation

---
 client/src/App.js           |  5 +++-
 client/src/css/Profile.css  | 11 +++++++
 client/src/css/index.css    |  7 +++++
 client/src/pages/Profile.js | 60 +++++++++++++++++++++++++++++++++++++
 client/src/pages/Upload.js  |  1 +
 5 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 client/src/css/Profile.css
 create mode 100644 client/src/pages/Profile.js

diff --git a/client/src/App.js b/client/src/App.js
index 6af69ab..ed0b1ac 100644
--- a/client/src/App.js
+++ b/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>
diff --git a/client/src/css/Profile.css b/client/src/css/Profile.css
new file mode 100644
index 0000000..ba4e37b
--- /dev/null
+++ b/client/src/css/Profile.css
@@ -0,0 +1,11 @@
+.profile {
+    
+}
+
+.token {
+    background-color: gray;
+    position: relative;
+    top: 2vh;
+    margin: auto;
+    width: 50%;
+}
\ No newline at end of file
diff --git a/client/src/css/index.css b/client/src/css/index.css
index 7a2ac48..1703562 100644
--- a/client/src/css/index.css
+++ b/client/src/css/index.css
@@ -81,4 +81,11 @@ code {
 
 a {
   color: var(--navy-blue);
+}
+
+code {
+  background-color: #7777778c;
+  border-radius: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
\ No newline at end of file
diff --git a/client/src/pages/Profile.js b/client/src/pages/Profile.js
new file mode 100644
index 0000000..356be18
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/pages/Upload.js b/client/src/pages/Upload.js
index 7b9b9b6..ace3229 100644
--- a/client/src/pages/Upload.js
+++ b/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)}