Layout updates

Added more themed components
Refactored Superadmin creation

frontend/views/MainLayout.tsx

@@ -2,7 +2,8 @@ import {useRouteMetadata} from 'Frontend/util/routing.js';
 import {useEffect} from 'react';
 import ProfileMenu from "Frontend/components/ProfileMenu";
 import {Outlet} from "react-router-dom";
-import {Card} from "@nextui-org/react";
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem} from "@nextui-org/react";
+import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
 
 export default function MainLayout() {
     const currentTitle = `Gameyfin - ${useRouteMetadata()?.title}` ?? 'Gameyfin';
@@ -12,16 +13,16 @@ export default function MainLayout() {
 
     return (
         <>
-            <Card className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2">
-                <div className="flex items-center justify-end text-blue-gray-900">
-                    <img
-                        className="absolute w-full content-center h-8"
-                        src="/images/Logo.svg"
-                        alt="Gameyfin"
-                    />
-                    <ProfileMenu/>
-                </div>
-            </Card>
+            <Navbar maxWidth="2xl" className="shadow">
+                <NavbarBrand>
+                    <GameyfinLogo className="h-10 fill-foreground"/>
+                </NavbarBrand>
+                <NavbarContent justify="end">
+                    <NavbarItem>
+                        <ProfileMenu/>
+                    </NavbarItem>
+                </NavbarContent>
+            </Navbar>
 
             <Outlet/>
         </>

frontend/views/SetupView.tsx

@@ -9,8 +9,7 @@ import {themes} from "Frontend/theming/themes";
 import {Card, Switch} from "@nextui-org/react";
 import {useTheme} from "next-themes";
 import {Theme} from "Frontend/theming/theme";
-
-const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+import {UserEndpoint} from "Frontend/generated/endpoints";
 
 function WelcomeStep() {
     return (
@@ -95,6 +94,11 @@ function UserStep() {
                         name="username"
                         type="text"
                     />
+                    <Input
+                        label="E-Mail"
+                        name="email"
+                        type="email"
+                    />
                     <Input
                         label="Password"
                         name="password"
@@ -126,10 +130,13 @@ const SetupView = () => (
     <div className="flex size-full bg-gradient-to-br from-primary-400 to-primary-700">
         <Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8">
             <Wizard
-                initialValues={{username: '', password: '', passwordRepeat: ''}}
-                onSubmit={async (values: any) =>
-                    sleep(300).then(() => alert(JSON.stringify(values, null, 2)))
-                }
+                initialValues={{username: '', email: '', password: '', passwordRepeat: ''}}
+                onSubmit={(values: any) => UserEndpoint.registerInitialSuperAdmin({
+                        username: values.username,
+                        password: values.password,
+                        email: values.email
+                    }
+                ).then(() => alert("Successfully registered!"))}
             >
                 <WizardStep icon={<HandWaving/>}>
                     <WelcomeStep/>
@@ -144,6 +151,9 @@ const SetupView = () => (
                         password: Yup.string()
                             .min(8, 'Password must be at least 8 characters long')
                             .required('Required'),
+                        email: Yup.string()
+                            .email()
+                            .required('Required'),
                         passwordRepeat: Yup.string()
                             .equals([Yup.ref('password')], 'Passwords do not match')
                             .required('Required')

frontend/views/TestView.tsx

@@ -2,7 +2,7 @@ import {Link} from "react-router-dom";
 
 export default function TestView() {
     return (
-        <div className="size-full flex justify-center">
+        <div className="flex grow justify-center">
             <Link to="/setup">Setup</Link>
         </div>
     );