Update vaadin

WIP: User management

src/main/frontend/components/administration/UserManagement.tsx

@@ -1,24 +1,39 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import ConfigFormField from "Frontend/components/administration/ConfigFormField";
 import withConfigPage from "Frontend/components/administration/withConfigPage";
 import Section from "Frontend/components/general/Section";
 import * as Yup from "yup";
+import {UserEndpoint} from "Frontend/generated/endpoints";
+import UserInfoDto from "Frontend/generated/de/grimsi/gameyfin/users/dto/UserInfoDto";
+import {UserCard} from "Frontend/components/general/UserCard";
 
 function UserManagementLayout({getConfig, formik}: any) {
+    const [users, setUsers] = useState<UserInfoDto[]>([]);
+
+    useEffect(() => {
+        UserEndpoint.getAllUsers().then(
+            (response) => setUsers(response as UserInfoDto[])
+        );
+    }, []);
+
     return (
         <div className="flex flex-col flex-grow">
 
-            <Section title="Users"/>
-            {/* TODO */}
-
             <Section title="Sign-Ups"/>
             <div className="flex flex-row">
                 <ConfigFormField configElement={getConfig("users.sign-ups.allow")}/>
                 <ConfigFormField configElement={getConfig("users.sign-ups.confirm")}
                                  isDisabled={!formik.values.users["sign-ups"].allow}/>
             </div>
+
+            <Section title="Users"/>
+            <div className="grid grid-flow-col grid-cols-4 gap-4">
+                {users.map((user) => <UserCard user={user} key={user.username}/>)}
+            </div>
+
         </div>
-    );
+    )
+        ;
 }
 
 const validationSchema = Yup.object({

src/main/frontend/components/general/UserCard.tsx

@@ -0,0 +1,21 @@
+import UserInfoDto from "Frontend/generated/de/grimsi/gameyfin/users/dto/UserInfoDto";
+import {Avatar, Card, Chip} from "@nextui-org/react";
+import {roleToColor, roleToRoleName} from "Frontend/util/utils";
+
+export function UserCard({user}: { user: UserInfoDto }) {
+    return (
+        <Card className="flex flex-row flex-grow items-center gap-4 p-2">
+            <Avatar classNames={{
+                base: "gradient-primary size-20",
+                icon: "text-background/80"
+            }}></Avatar>
+            <div className="flex flex-col gap-1">
+                <p className="font-semibold">{user.username}</p>
+                <p className="text-sm">{user.email}</p>
+                {user.roles?.map((role) =>
+                    <Chip key={role} size="sm" radius="sm"
+                          className={`text-xs bg-${roleToColor(role!)}-500`}>{roleToRoleName(role!)}</Chip>)}
+            </div>
+        </Card>
+    )
+}