ether/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New frontend, whitelist if user is admin and code improvements

Browse source
This commit is contained in:
Amy 2025-01-02 14:36:01 +01:00
parent 9aea1828e9
commit 4bcf9ab134
11 changed files with 6549 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6399
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

18
pnpm-lock.yaml generated
View file

@ -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-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-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)(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

51
src/app/components/Navbar.css Normal file
View file

@ -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;
}

32
src/app/components/Navbar.tsx Normal file
View file

@ -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;

25
src/app/globals.css
View file

@ -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%);
}

13
src/app/images/upload/page.css
View file

@ -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;

13
src/app/images/upload/page.tsx
View file

@ -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) {
ev.preventDefault();
const dragOver: React.DragEventHandler<HTMLDivElement> = (e) => {
e.preventDefault();
}
@ -80,8 +79,7 @@ export default function Page() {
};
return (
//@ts-expect-error the thing breaks idfk
<Theme appearance="dark" onDrop={dropFile} onDragOver={dragOverHandler}>
<Theme appearance="dark" onDrop={dropFile} onDragOver={dragOver}>
<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}/>

11
src/app/layout.tsx
View file

@ -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",
description: "Generated by create next app",
title: "Tappo",
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>
);

21
src/app/login/page.tsx
View file

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

3
src/app/main.css
View file

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

21
src/app/page.tsx
View file

@ -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">
<Image alt="logo" className="logo" src="./main.png" />
</div>
<div className="textleft">
<Text size="6">Tappo</Text>
<Text size="3">Tappo</Text>
<div className="mainpage">
<div className="page">
<Heading as="h2">Welcome</Heading>
</div>
</div>
</Theme>
);
}
};