Layout updates

Added more themed components
Refactored Superadmin creation

frontend/components/ProfileMenu.tsx

@@ -1,11 +1,9 @@
 import {useAuth} from "Frontend/util/auth";
-import {useNavigate} from "react-router-dom";
 import {GearFine, Question, SignOut, User} from "@phosphor-icons/react";
 import {Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger} from "@nextui-org/react";
 
 export default function ProfileMenu() {
     const {state, logout} = useAuth();
-    const navigate = useNavigate();
 
     const profileMenuItems = [
         {
@@ -17,7 +15,7 @@ export default function ProfileMenu() {
             label: "Administration",
             icon: <GearFine/>,
             onClick: () => alert("Administration"),
-            showIf: state.user?.authorities?.some(a => a?.includes("ADMIN"))
+            showIf: state.user?.roles?.some(a => a?.includes("ADMIN"))
         },
         {
             label: "Help",
@@ -35,7 +33,15 @@ export default function ProfileMenu() {
     return (
         <Dropdown placement="bottom-end">
             <DropdownTrigger>
-                <Avatar showFallback radius="full" as="button" className="transition-transform"/>
+                <Avatar showFallback
+                        radius="full"
+                        as="button"
+                        className="transition-transform size-8"
+                        classNames={{
+                            base: "bg-gradient-to-br from-primary-400 to-primary-700",
+                            icon: "text-background/80"
+                        }}
+                />
             </DropdownTrigger>
             <DropdownMenu>
                 {/* @ts-ignore */}
@@ -48,7 +54,7 @@ export default function ProfileMenu() {
                                 startContent={<div color={color}>{icon}</div>}
                                 /* @ts-ignore */
                                 color={color ? color : ""}
-                                className={`text-${color}`}
+                                className={`text-${color} hover:bg-primary/20`}
                             >
                                 {label}
                             </DropdownItem> : null

frontend/components/theming/ThemePreview.tsx

@@ -1,6 +1,5 @@
 import {Theme} from "Frontend/theming/theme";
-import {Card, Tooltip} from "@nextui-org/react";
-import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
+import {Tooltip} from "@nextui-org/react";
 
 export default function ThemePreview({theme, mode, isSelected}: {
     theme: Theme,
@@ -11,26 +10,9 @@ export default function ThemePreview({theme, mode, isSelected}: {
         <Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
             <div className={`
                 ${theme.name}-${mode}
-                bg-primary p-6 border-2 rounded-md
+                bg-primary p-6 border-2 rounded-full
                 ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
             />
         </Tooltip>
     );
-}
-
-/*
-<svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars[resolvedTheme].background}/>
-    <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
-    <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
-    <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
-    <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
-    <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-    <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
-    <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
-    <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
-    <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
-    <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-    <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-</svg>
-*/
+}

frontend/components/wizard/Wizard.tsx

@@ -7,7 +7,7 @@ import {Step, Stepper} from "@material-tailwind/react";
 const Wizard = ({children, initialValues, onSubmit}: {
     children: ReactNode,
     initialValues: any,
-    onSubmit: (values: any, bag: FormikHelpers<any> | FormikBag<any, any>) => Promise<void>
+    onSubmit: (values: any, bag: FormikHelpers<any> | FormikBag<any, any>) => Promise<any>
 }) => {
     const [stepNumber, setStepNumber] = useState(0);
     const steps = React.Children.toArray(children);

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