New frontend, whitelist if user is admin and code improvements

pnpm-lock.yaml

@@ -3302,8 +3302,8 @@ snapshots:
       '@typescript-eslint/parser': 8.17.0(eslint@8.57.1)(typescript@5.7.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0(eslint@8.57.1)
@@ -3322,37 +3322,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.3.0
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.17.0(eslint@8.57.1)(typescript@5.7.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -3363,7 +3363,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3

src/app/components/Navbar.css

@@ -0,0 +1,51 @@
+nav {
+    position: fixed;
+    top: 0;
+    background-color: #1a1a1a;
+    padding: 1rem;
+    z-index: 1000;
+    width: 100%;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+nav li {
+    margin: 0 0.5rem;
+}
+
+nav a {
+    color: white;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+nav a:hover {
+    background-color: #2a2a2a;
+}
+
+.navbar-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.navbar-logo {
+    height: 40px;
+    margin-right: 1rem;
+}
+
+.left-side {
+    display: flex;
+    flex-grow: 1;
+}
+
+.right-side {
+    margin-left: auto;
+}

src/app/components/Navbar.tsx

@@ -0,0 +1,32 @@
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
+import './Navbar.css';
+
+import logo from '@/../public/main.png';
+import Image from 'next/image';
+
+const Navbar = () => {
+    return (
+        <NavigationMenu.Root>
+            <div className="navbar-container">
+                <Image alt='Logo' src={logo} width={40} height={40}></Image>
+
+                {/* Left Side */}
+                <NavigationMenu.List className='left-side'>
+                    <NavigationMenu.Item>
+                        <NavigationMenu.Link href="/">Home</NavigationMenu.Link>
+                    </NavigationMenu.Item>
+                    <NavigationMenu.Item>
+                        <NavigationMenu.Link href="/images/upload">Upload</NavigationMenu.Link>
+                    </NavigationMenu.Item>
+                </NavigationMenu.List>
+
+                {/* Right Side */}
+                <NavigationMenu.List className='right-side'>
+                    <NavigationMenu.Link href="/login">Login</NavigationMenu.Link>
+                </NavigationMenu.List>
+            </div>
+        </NavigationMenu.Root>
+    );
+};
+
+export default Navbar;

src/app/globals.css

@@ -40,3 +40,28 @@ a {
     color-scheme: dark;
   }
 }
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.mainpage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/app/images/upload/page.css

@@ -1,16 +1,3 @@
-.page {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.mainpage {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
 .info {
     opacity: 50%;
     margin-bottom: 10px;

src/app/images/upload/page.tsx

@@ -26,7 +26,7 @@ function useApiKey(): ()=>Promise<string> {
 
 
 export default function Page() {
-    const [file, setFile] = useState(null);
+    const [file, setFile] = useState<File | null>(null);
     const apiKey = useApiKey();
     const [message, setMessage] = useState('');
 
@@ -37,16 +37,15 @@ export default function Page() {
     };
 
 
-    const dropFile = (e: DragEvent) => {
+    const dropFile: React.DragEventHandler<HTMLDivElement> = (e) => {
         e.preventDefault();
         const files = e.dataTransfer?.files ?? []
         if(files.length > 0)
-            //@ts-expect-error the thing breaks idfk
             setFile(files[0])
     }
 
-    function dragOverHandler(ev: DragEvent) {
+    const dragOver: React.DragEventHandler<HTMLDivElement> = (e) => {
-        ev.preventDefault();
+        e.preventDefault();
     }
       
 
@@ -80,8 +79,7 @@ export default function Page() {
     };
 
     return (
-        //@ts-expect-error the thing breaks idfk
+        <Theme appearance="dark" onDrop={dropFile} onDragOver={dragOver}>
-        <Theme appearance="dark" onDrop={dropFile} onDragOver={dragOverHandler}>
             <div className="mainpage">
                 <div className="page">
                     <Heading color="crimson" as="h2">Upload a File</Heading>
@@ -89,7 +87,6 @@ export default function Page() {
                 <div className="page">
                     <label htmlFor="file-upload" className="file-upload fadeonhover">
                         Drag files here
-                        {/*@ts-expect-error ts is sucking ):*/}
                         <p className="filename">{file != null ? file.name : ''}</p>
                     </label>
                     <input id="file-upload" type="file" style={{display: "none"}} onChange={handleFileChange}/>

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import Navbar from "./components/Navbar";
+
 import "./globals.css";
 
 const geistSans = localFont({
@@ -14,8 +16,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Tappo",
-  description: "Generated by create next app",
+  description: "File Hosting",
 };
 
 export default function RootLayout({
@@ -26,7 +28,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
+        <div className="layout">
+          <Navbar />
+          <main className="content">{children}</main>
+        </div>
       </body>
     </html>
   );

src/app/login/page.tsx

@@ -4,18 +4,15 @@ import {Button, Text, Theme} from "@radix-ui/themes";
 export default function Page() {
     return (
         <Theme appearance="dark">
-            <center>
+            <div className="mainpage">
-                <Text>
+                <div className="page">
-                    idk what to put here lmao
+                    <a href={process.env.API_URL + "/login"}>
-                </Text>
+                        <Button color="crimson" variant="soft">
-                <br/>
+                            Login
-                <br/>
+                        </Button>
-                <a href="https://google.com">
+                    </a>
-                    <Button color="crimson" variant="soft">
+                </div>
-                        Login
+            </div>
-                    </Button>
-                </a>
-            </center>
         </Theme>
     );
 }

src/app/main.css

@@ -1,12 +1,13 @@
-
 .logo {
     width: 200px;
 }
+
 .leftside{
     float: left;
     margin-top: 5em;
     margin-left: 5em;
 }
+
 .textleft{
     float: left;
     margin-top: 5em;

src/app/page.tsx

@@ -1,21 +1,18 @@
 import "./main.css"
-import 'dotenv/config'
-import { cookies } from 'next/headers'
 import "@radix-ui/themes/styles.css";
-import {Text, Theme} from "@radix-ui/themes";
+
-import Image from "next/image";
+import 'dotenv/config'
+
+import {Heading, Theme} from "@radix-ui/themes";
 
 export default async function Home() {
-    console.log((await cookies()).get("access_token"))
     return (
         <Theme appearance="dark">
-            <div className="leftside">
+            <div className="mainpage">
-                <Image alt="logo" className="logo" src="./main.png" />
+                <div className="page">
-            </div>
+                    <Heading as="h2">Welcome</Heading>
-            <div className="textleft">
+                </div>
-                <Text size="6">Tappo</Text>
-                <Text size="3">Tappo</Text>
             </div>
         </Theme>
     );
-}
+};