Switch to Hilla for UI

2026-06-16 08:15:48 +00:00 · 2024-03-06 23:35:41 +01:00
parent 73457aad0b
commit e79dd7a6df
44 changed files with 12778 additions and 429 deletions
@@ -0,0 +1,18 @@
+import router from 'Frontend/routes.js';
+import {AuthProvider} from 'Frontend/util/auth.js';
+import {RouterProvider} from 'react-router-dom';
+import "./main.css";
+import {ThemeProvider} from "@material-tailwind/react";
+import React from 'react';
+
+export default function App() {
+    return (
+        <React.StrictMode>
+            <ThemeProvider>
+                <AuthProvider>
+                    <RouterProvider router={router}/>
+                </AuthProvider>
+            </ThemeProvider>
+        </React.StrictMode>
+    );
+}
@@ -1,23 +1,25 @@
 <!DOCTYPE html>
-<!--
-This file is auto-generated by Vaadin.
-->
-
-<html>
+<html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-    body, #outlet {
-      height: 100vh;
-      width: 100%;
-      margin: 0;
-    }
-  </style>
-  <!-- index.ts is included here automatically (either by the dev server or during the build) -->
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Gameyfin</title>
+    <style>
+        body {
+            margin: 0;
+            width: 100vw;
+            height: 100vh;
+        }
+
+        #outlet {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+    <!-- index.ts is included here automatically (either by the dev server or during the build) -->
 </head>
+
 <body>
-  <!-- This outlet div is where the views are rendered -->
-  <div id="outlet"></div>
+<div id="outlet"></div>
 </body>
 </html>
@@ -0,0 +1,5 @@
+import {createRoot} from 'react-dom/client';
+import {createElement} from "react";
+import App from "Frontend/App";
+
+createRoot(document.getElementById('outlet')!).render(createElement(App));
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -0,0 +1,21 @@
+import {protectRoutes} from '@hilla/react-auth';
+import {createBrowserRouter, RouteObject} from 'react-router-dom';
+import LoginView from "Frontend/views/LoginView";
+import MainLayout from "Frontend/views/MainLayout";
+import TestView from "Frontend/views/TestView";
+
+export const routes = protectRoutes([
+    {
+        element: <MainLayout/>,
+        handle: {title: 'Main', requiresLogin: true},
+        children: [
+            {path: '/', element: <TestView/>, handle: {title: 'Gameyfin', requiresLogin: true}},
+        ],
+    },
+    {
+        path: '/login',
+        element: <LoginView/>
+    }
+]) as RouteObject[];
+
+export default createBrowserRouter(routes);
@@ -1,12 +0,0 @@
-window.applyTheme = () => {
-    const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "";
-    document.documentElement.setAttribute("theme", theme);
-};
-window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener('change', function () {
-        window.applyTheme()
-    });
-window.applyTheme();
@@ -1,6 +0,0 @@
-.header-logo {
-    width: 100%;
-    height: 40px;
-    position: absolute;
-    align-self: center;
-}
@@ -0,0 +1,10 @@
+import {configureAuth} from '@hilla/react-auth';
+import {UserEndpoint} from 'Frontend/generated/endpoints';
+
+// Configure auth to use `UserInfoService.getUserInfo`
+const auth = configureAuth(UserEndpoint.getUserInfo);
+
+// Export auth provider and useAuth hook, which are automatically
+// typed to the result of `UserInfoService.getUserInfo`
+export const useAuth = auth.useAuth;
+export const AuthProvider = auth.AuthProvider;
@@ -0,0 +1,15 @@
+import { useMatches } from 'react-router-dom';
+
+type RouteMetadata = {
+  [key: string]: any;
+};
+
+/**
+ * Returns the `handle` object containing the metadata for the current route,
+ * or undefined if the route does not have defined a handle.
+ */
+export function useRouteMetadata(): RouteMetadata | undefined {
+  const matches = useMatches();
+  const match = matches[matches.length - 1];
+  return match?.handle as RouteMetadata | undefined;
+}
@@ -0,0 +1,83 @@
+import {useAuth} from "Frontend/util/auth";
+import {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {Button, Card, Input, Typography} from "@material-tailwind/react";
+
+export default function LoginView() {
+    const {state, login} = useAuth();
+    const [hasError, setError] = useState<boolean>();
+    const [username, setUsername] = useState<string>();
+    const [password, setPassword] = useState<string>();
+    const [url, setUrl] = useState<string>();
+    const navigate = useNavigate();
+
+    if (state.user && url) {
+        const path = new URL(url, document.baseURI).pathname;
+        navigate(path, {replace: true});
+    }
+
+    return (
+        <div className="flex h-screen">
+            <div className="fixed h-full w-full bg-gradient-to-br from-gf-primary to-gf-secondary"></div>
+            <Card className="m-auto p-12" shadow={true}>
+                <img
+                    className="h-28 w-full content-center"
+                    src="/images/Logo.svg"
+                />
+                <div className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96">
+                    <form
+                        className="mb-1 flex flex-col gap-6"
+                        onSubmit={async e => {
+                            e.preventDefault();
+                            if (typeof username === "string" && password != null) {
+                                const {defaultUrl, error, redirectUrl} = await login(username, password);
+                                if (error) {
+                                    setError(true);
+                                    alert("Wrong username and/or password!");
+                                } else {
+                                    setUrl(redirectUrl ?? defaultUrl ?? '/');
+                                }
+                            }
+                        }}
+                    >
+                        <Typography variant="h6" color="blue-gray" className="-mb-3">
+                            Username
+                        </Typography>
+                        <Input
+                            onChange={(event) => {
+                                setUsername(event.target.value);
+                            }}
+                            size="lg"
+                            className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
+                            labelProps={{
+                                className: "before:content-none after:content-none",
+                            }}
+                            crossOrigin="" //TODO: see https://github.com/creativetimofficial/material-tailwind/issues/427
+                        />
+                        <Typography variant="h6" color="blue-gray" className="-mb-3">
+                            Password
+                        </Typography>
+                        <Input
+                            onChange={(event) => {
+                                setPassword(event.target.value);
+                            }}
+                            type="password"
+                            size="lg"
+                            className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
+                            labelProps={{
+                                className: "before:content-none after:content-none",
+                            }}
+                            crossOrigin="" //TODO: see https://github.com/creativetimofficial/material-tailwind/issues/427
+                        />
+                        <Button
+                            type="submit"
+                            size="lg"
+                            fullWidth>
+                            Log in
+                        </Button>
+                    </form>
+                </div>
+            </Card>
+        </div>
+    );
+}
@@ -0,0 +1,52 @@
+import {AppLayout} from '@hilla/react-components/AppLayout.js';
+import {Avatar} from '@hilla/react-components/Avatar.js';
+import {Button} from '@hilla/react-components/Button.js';
+import {DrawerToggle} from '@hilla/react-components/DrawerToggle.js';
+import {useAuth} from 'Frontend/util/auth.js';
+import {useRouteMetadata} from 'Frontend/util/routing.js';
+import {useEffect} from 'react';
+import {Outlet} from 'react-router-dom';
+
+const navLinkClasses = ({isActive}: any) => {
+    return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
+};
+
+export default function MainLayout() {
+    const currentTitle = useRouteMetadata()?.title ?? 'My App';
+    useEffect(() => {
+        document.title = currentTitle;
+    }, [currentTitle]);
+
+    const {state, logout} = useAuth();
+    return (
+        <AppLayout primarySection="drawer">
+            <div slot="drawer" className="flex flex-col justify-between h-full p-m">
+                <header className="flex flex-col gap-m">
+                    <h1 className="text-l m-0">My App</h1>
+                    <nav>
+                    </nav>
+                </header>
+                <footer className="flex flex-col gap-s">
+                    {state.user ? (
+                        <>
+                            <div className="flex items-center gap-s">
+                                <Avatar theme="xsmall" name={state.user.name}/>
+                                {state.user.name}
+                            </div>
+                            <Button onClick={async () => logout()}>Sign out</Button>
+                        </>
+                    ) : (
+                        <a href="/login">Sign in</a>
+                    )}
+                </footer>
+            </div>
+
+            <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
+            <h2 slot="navbar" className="text-l m-0">
+                {currentTitle}
+            </h2>
+
+            <Outlet/>
+        </AppLayout>
+    );
+}
@@ -0,0 +1,5 @@
+export default function TestView() {
+    return (
+        <h1>Hello Gameyfin!</h1>
+    );
+}