From 2fd288af36ac71618995dd0288321e74130e41e4 Mon Sep 17 00:00:00 2001
From: ozfox <ozfox@posteo.de>
Date: Tue, 25 Jun 2024 10:20:58 +0200
Subject: [PATCH 1/5] frontend: fix build errors

---
 frontend/package-lock.json                | 14 +++++
 frontend/src/App.tsx                      |  7 ---
 frontend/src/Components/Footer.tsx        |  2 -
 frontend/src/Components/Friends.tsx       |  2 -
 frontend/src/Components/Inventory.tsx     |  2 -
 frontend/src/Components/Navbar/Navbar.tsx |  5 +-
 frontend/src/Components/PetPage.tsx       |  4 +-
 frontend/src/Components/Settings.tsx      |  8 +--
 frontend/src/Posts.tsx                    | 64 +++++++++++------------
 frontend/src/Profile.tsx                  | 20 +++----
 10 files changed, 63 insertions(+), 65 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2d27c99c..415b2faf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "^1.11.3",
         "oidc-client-ts": "^3.0.1",
+        "openapi-fetch": "^0.10.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-oidc-context": "^3.1.0",
@@ -2365,6 +2366,19 @@
         "wrappy": "1"
       }
     },
+    "node_modules/openapi-fetch": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/openapi-fetch/-/openapi-fetch-0.10.2.tgz",
+      "integrity": "sha512-GCzgKIZchnxZRnztiOlRTKk9tQT0NHvs5MNXYFtOwG7xaj1iCJOGDsTLbn/2QUP37PjGTT890qERFjvmjxzQMg==",
+      "dependencies": {
+        "openapi-typescript-helpers": "^0.0.9"
+      }
+    },
+    "node_modules/openapi-typescript-helpers": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/openapi-typescript-helpers/-/openapi-typescript-helpers-0.0.9.tgz",
+      "integrity": "sha512-BO2TvIDAO/FPVKz1Nj2gy+pUOHfaoENdK5UP3H0Jbh0VXBf3dwYMs58ZwOjiezrbHA2LamdquoyQgahTPvIxGA=="
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8212a856..0d080c05 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,19 +1,12 @@
-import React from "react";
 import { useAuth } from "react-oidc-context";
-import { useState } from "react";
 import "./App.css";
-import LinkDevice from "./Components/LinkDevice";
 import Footer from "./Components/Footer";
 import Navbar from "./Components/Navbar/Navbar";
-import Settings from "./Components/Settings";
-import CreatePetModal from "./Components/CreatePetModal";
-import PetPage from "./Components/PetPage";
 import type { paths } from "./web-backend-api";
 import createClient, { type Middleware } from "openapi-fetch";
 
 function App() {
   const auth = useAuth();
-  const [count, setCount] = useState(0);
 
   switch (auth.activeNavigator) {
     case "signinSilent":
diff --git a/frontend/src/Components/Footer.tsx b/frontend/src/Components/Footer.tsx
index 2baf73a3..c00aefc2 100644
--- a/frontend/src/Components/Footer.tsx
+++ b/frontend/src/Components/Footer.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 const Footer = () => (
     <div className="footer-content">
         <footer className="footer page-footer font-small pt-3 bg-light">
diff --git a/frontend/src/Components/Friends.tsx b/frontend/src/Components/Friends.tsx
index 3921a4bb..f0286a55 100644
--- a/frontend/src/Components/Friends.tsx
+++ b/frontend/src/Components/Friends.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Friends = () => (
   <div>
     <h1>Friends Page</h1>
diff --git a/frontend/src/Components/Inventory.tsx b/frontend/src/Components/Inventory.tsx
index 2f2d6c80..2fe68396 100644
--- a/frontend/src/Components/Inventory.tsx
+++ b/frontend/src/Components/Inventory.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Inventory = () => (
   <div>
     <h1>Inventory Page</h1>
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index c274b745..550c290b 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -1,12 +1,11 @@
-import React, { useState } from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import Inventory from "../Inventory.tsx";
 import Settings from "../Settings.tsx";
 import Friends from "../Friends.tsx";
 import PetPage from "../PetPage.tsx";
-import LinkDevice from "../LinkDevice.tsx";
 import { useAuth } from "react-oidc-context";
 import "./navbar.css";
+import { useState } from "react";
 
 const Navbar = () => {
   const auth = useAuth();
@@ -22,7 +21,7 @@ const Navbar = () => {
     marginRight: "20px",
   };
 
-  const handlePageClick = (page) => {
+  const handlePageClick = (page: string) => {
     setActivePage(page);
   };
 
diff --git a/frontend/src/Components/PetPage.tsx b/frontend/src/Components/PetPage.tsx
index bced19d0..300ab46d 100644
--- a/frontend/src/Components/PetPage.tsx
+++ b/frontend/src/Components/PetPage.tsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
 import petImage from "../assets/pet_frog.png";
 import { ProgressBar } from "react-progressbar-fancy";
-import type { paths } from "../../src/web-backend-api";
-import { useAuth } from "react-oidc-context";
 import CreatePetModal from "./CreatePetModal";
 
 // https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
 
-const PetPage = (client) => {
+const PetPage = (client: any) => {
   const [petData, setPetData] = useState([]);
 
   useEffect(() => {
diff --git a/frontend/src/Components/Settings.tsx b/frontend/src/Components/Settings.tsx
index a85add24..863b7983 100644
--- a/frontend/src/Components/Settings.tsx
+++ b/frontend/src/Components/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import profile_pic1 from '../Misc/8-bit-dog-nobg.png';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import LinkDevice from "../Components/LinkDevice";
@@ -17,9 +17,9 @@ function Settings(
     setItems(items.filter((_, i) => i !== index));
   };
 
-  const resetItem = (index: number) => {
-    setItems(items.map((item, i) => (i === index ? `Item ${index + 1}` : item)));
-  };
+  // const resetItem = (index: number) => {
+  //   setItems(items.map((item, i) => (i === index ? `Item ${index + 1}` : item)));
+  // };
 
   return (
     <div className='d-flex justify-content-center pt-4 pb-2'>
diff --git a/frontend/src/Posts.tsx b/frontend/src/Posts.tsx
index f6d96984..1e9e33c0 100644
--- a/frontend/src/Posts.tsx
+++ b/frontend/src/Posts.tsx
@@ -1,37 +1,37 @@
-import React from "react";
-import { useAuth } from "react-oidc-context";
+// import React from "react";
+// import { useAuth } from "react-oidc-context";
 
-const Posts = () => {
-    const auth = useAuth();
-    const [posts, setPosts] = React.useState(Array);
+// const Posts = () => {
+//     const auth = useAuth();
+//     const [posts, setPosts] = React.useState(Array);
 
-    React.useEffect(() => {
-        (async () => {
-            try {
-                const token = auth.user?.access_token;
-                const response = await fetch("https://api.example.com/posts", {
-                    headers: {
-                        Authorization: `Bearer ${token}`,
-                    },
-                });
-                setPosts(await response.json());
-            } catch (e) {
-                console.error(e);
-            }
-        })();
-    }, [auth]);
+//     React.useEffect(() => {
+//         (async () => {
+//             try {
+//                 const token = auth.user?.access_token;
+//                 const response = await fetch("https://api.example.com/posts", {
+//                     headers: {
+//                         Authorization: `Bearer ${token}`,
+//                     },
+//                 });
+//                 setPosts(await response.json());
+//             } catch (e) {
+//                 console.error(e);
+//             }
+//         })();
+//     }, [auth]);
 
-    if (!posts.length) {
-        return <div>Loading...</div>;
-    }
+//     if (!posts.length) {
+//         return <div>Loading...</div>;
+//     }
 
-    return (
-        <ul>
-        {posts.map((post, index) => {
-            return <li key={index}>{post}</li>;
-        })}
-        </ul>
-    );
-};
+//     return (
+//         <ul>
+//         {posts.map((post, index) => {
+//             return <li key={index}>{post}</li>;
+//         })}
+//         </ul>
+//     );
+// };
 
-export default Posts;
\ No newline at end of file
+// export default Posts;
diff --git a/frontend/src/Profile.tsx b/frontend/src/Profile.tsx
index cac224c1..821de2cf 100644
--- a/frontend/src/Profile.tsx
+++ b/frontend/src/Profile.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import { withAuth } from "react-oidc-context";
+// import React from "react";
+// import { withAuth } from "react-oidc-context";
 
-class Profile extends React.Component {
-    render() {
-        // `this.props.auth` has all the same properties as the `useAuth` hook
-        const auth = this.props.auth;
-        return <div>Hello {auth.user?.profile.sub}</div>;
-    }
-}
+// class Profile extends React.Component {
+//     render() {
+//         // `this.props.auth` has all the same properties as the `useAuth` hook
+//         const auth = this.props.auth;
+//         return <div>Hello {auth.user?.profile.sub}</div>;
+//     }
+// }
 
-export default withAuth(Profile);
\ No newline at end of file
+// export default withAuth(Profile);

From 3a7b06067646009d980bf86d865d6378c112f530 Mon Sep 17 00:00:00 2001
From: ozfox <ozfox@posteo.de>
Date: Mon, 1 Jul 2024 12:46:04 +0200
Subject: [PATCH 2/5] frontend: several updates

---
 frontend/src/App.tsx                          | 31 --------
 frontend/src/Components/PetDetails.tsx        | 25 ++++++
 .../src/Components/PetDetailsProgressBar.tsx  | 25 ++++++
 frontend/src/Components/PetPage.tsx           | 78 +++++++------------
 frontend/src/Posts.tsx                        | 37 ---------
 frontend/src/Profile.tsx                      | 12 ---
 frontend/src/lib/ConfigContext.ts             | 34 ++++++++
 .../api/backendApi.d.ts}                      |  0
 frontend/src/lib/api/client.ts                | 45 +++++++++++
 frontend/src/lib/api/useClient.ts             | 25 ++++++
 frontend/src/lib/api/useDeviceApi.ts          | 52 +++++++++++++
 frontend/src/lib/api/usePetApi.ts             | 65 ++++++++++++++++
 frontend/src/main.tsx                         | 16 ++--
 13 files changed, 307 insertions(+), 138 deletions(-)
 create mode 100644 frontend/src/Components/PetDetails.tsx
 create mode 100644 frontend/src/Components/PetDetailsProgressBar.tsx
 delete mode 100644 frontend/src/Posts.tsx
 delete mode 100644 frontend/src/Profile.tsx
 create mode 100644 frontend/src/lib/ConfigContext.ts
 rename frontend/src/{web-backend-api.d.ts => lib/api/backendApi.d.ts} (100%)
 create mode 100644 frontend/src/lib/api/client.ts
 create mode 100644 frontend/src/lib/api/useClient.ts
 create mode 100644 frontend/src/lib/api/useDeviceApi.ts
 create mode 100644 frontend/src/lib/api/usePetApi.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0d080c05..d71fcade 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,8 +2,6 @@ import { useAuth } from "react-oidc-context";
 import "./App.css";
 import Footer from "./Components/Footer";
 import Navbar from "./Components/Navbar/Navbar";
-import type { paths } from "./web-backend-api";
-import createClient, { type Middleware } from "openapi-fetch";
 
 function App() {
   const auth = useAuth();
@@ -25,32 +23,6 @@ function App() {
   }
 
   if (auth.isAuthenticated) {
-    // Client initialisation
-    const authMiddleware: Middleware = {
-      async onRequest({ request }) {
-        // add Authorization header to every request
-        request.headers.set(
-          "Authorization",
-          `Bearer ${auth.user?.access_token}`
-        );
-        return request;
-      },
-    };
-
-    const client = createClient<paths>({
-      baseUrl: "http://localhost:4000/backend",
-    });
-    client.use(authMiddleware);
-
-    // https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch
-    (async () => {
-      console.log("hi there!");
-      const { data, error } = await client.GET("/api/v1/devices/self", {});
-
-      console.log("data", data);
-      console.log("error", error);
-    })();
-
     return (
       <div style={{ backgroundColor: "#FFFFFF" }}>
         <div>
@@ -58,9 +30,6 @@ function App() {
             <Navbar />
           </div>
         </div>
-        {/* <div>
-          Hello USERNAME: {auth.user?.profile?.preferred_username || "User"}
-        </div> */}
         <Footer />
       </div>
     );
diff --git a/frontend/src/Components/PetDetails.tsx b/frontend/src/Components/PetDetails.tsx
new file mode 100644
index 00000000..a98cf00e
--- /dev/null
+++ b/frontend/src/Components/PetDetails.tsx
@@ -0,0 +1,25 @@
+import { Pet } from "../lib/api/usePetApi";
+import PetDetailsProgressBar from "./PetDetailsProgressBar";
+
+const PetDetails = (props: {pet: Pet, petImageSrc: string}) => {
+  const {pet, petImageSrc} = props;
+
+  if (!pet.state) return;
+  const petState = pet.state;
+
+  return (
+    <>
+      <div className="col-6">
+        <img className="img-fluid" src={petImageSrc} alt="Image showing the pet" />
+      </div>
+      <div className="col-6">
+        <div className="h2 px-3 py-4">{pet.name}</div>
+        <PetDetailsProgressBar value={petState.xp} color="green" />
+        <PetDetailsProgressBar value={petState.happiness} color="purple" />
+        <PetDetailsProgressBar value={petState.health} color="red" />
+      </div>
+    </>
+  );
+}
+
+export default PetDetails;
diff --git a/frontend/src/Components/PetDetailsProgressBar.tsx b/frontend/src/Components/PetDetailsProgressBar.tsx
new file mode 100644
index 00000000..edc48c86
--- /dev/null
+++ b/frontend/src/Components/PetDetailsProgressBar.tsx
@@ -0,0 +1,25 @@
+import { ProgressBar } from "react-progressbar-fancy";
+import { IProgressBarProps } from "react-progressbar-fancy/build/ProgressBar/ProgressBar.types";
+
+/**
+ * See https://github.com/RavinRau/react-progressbar-fancy
+ */
+const PetDetailsProgressBar = (props: {value?: number, color: IProgressBarProps["progressColor"]}) => {
+  return (
+    <>
+      {props.value != undefined && (
+        <div>
+          <div className="h5 px-3">{props.value}</div>
+          <ProgressBar
+            className="px-1"
+            hideText={true}
+            progressColor={props.color}
+            score={props.value}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+export default PetDetailsProgressBar;
diff --git a/frontend/src/Components/PetPage.tsx b/frontend/src/Components/PetPage.tsx
index 300ab46d..087b8560 100644
--- a/frontend/src/Components/PetPage.tsx
+++ b/frontend/src/Components/PetPage.tsx
@@ -1,65 +1,45 @@
 import { useEffect, useState } from "react";
 import petImage from "../assets/pet_frog.png";
-import { ProgressBar } from "react-progressbar-fancy";
 import CreatePetModal from "./CreatePetModal";
+import { Device, useDeviceApi } from "../lib/api/useDeviceApi";
+import { Pet, usePetApi } from "../lib/api/usePetApi";
+import PetDetails from "./PetDetails";
 
 // https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
 
-const PetPage = (client: any) => {
-  const [petData, setPetData] = useState([]);
+const PetPage = () => {
+  const [devices, setDevices] = useState<Device[]>([]);
+  const [pet, setPet] = useState<Pet | undefined>();
+  const deviceApi = useDeviceApi();
+  const petApi = usePetApi();
 
   useEffect(() => {
-    loadData();
-  }, []);
+    if (!deviceApi || !petApi) return;
 
-  const loadData = async () => {
-    const { response, error } = await client.GET("/api/v1/devices/self", {});
-    if (error != null) {
-      setPetData(await client.GET(`/api/v1/pets/self/${response.petId}`));
+    const fetchData = async () => {
+      const devices = await deviceApi.getDevices();
+      const defaultDevice = devices[0];
+
+      setDevices(devices);
+
+      if (defaultDevice && defaultDevice.petId) {
+        const pet = await petApi.getPetById(defaultDevice.petId);
+        setPet(pet);
+      }
     }
-  };
+
+    fetchData();
+  }, [deviceApi, petApi]);
+
+  console.log("loaded-devices", devices);
 
   return (
     <div className="container-fluid row p-5">
-      <div className="col-6">
-        {petData != null ? (
-          <img className="img-fluid" src={petImage} alt="pet name" />
-        ) : (
-          <div>
-            <CreatePetModal />
-          </div>
-        )}
-      </div>
-      <div className="col-6">
-        <div className="h2 px-3 py-4">( Pet name )</div>
-        <div>
-          <div className="h5 px-3">HP</div>
-          <ProgressBar
-            className="px-1 pb-3"
-            hideText={true}
-            progressColor={"red"}
-            score={100}
-          />
-        </div>
-        <div>
-          <div className="h5 px-3">Happiness</div>
-          <ProgressBar
-            className="px-1 pb-3"
-            hideText={true}
-            progressColor={"purple"}
-            score={50}
-          />
-        </div>
-        <div>
-          <div className="h5 px-3">XP</div>
-          <ProgressBar
-            className="px-1"
-            hideText={true}
-            progressColor={"green"}
-            score={80}
-          />
-        </div>
-      </div>
+      {pet != undefined ? (
+        <PetDetails pet={pet} petImageSrc={petImage} />
+      ) : (
+        <CreatePetModal />
+      )}
     </div>
   );
 };
diff --git a/frontend/src/Posts.tsx b/frontend/src/Posts.tsx
deleted file mode 100644
index 1e9e33c0..00000000
--- a/frontend/src/Posts.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// import React from "react";
-// import { useAuth } from "react-oidc-context";
-
-// const Posts = () => {
-//     const auth = useAuth();
-//     const [posts, setPosts] = React.useState(Array);
-
-//     React.useEffect(() => {
-//         (async () => {
-//             try {
-//                 const token = auth.user?.access_token;
-//                 const response = await fetch("https://api.example.com/posts", {
-//                     headers: {
-//                         Authorization: `Bearer ${token}`,
-//                     },
-//                 });
-//                 setPosts(await response.json());
-//             } catch (e) {
-//                 console.error(e);
-//             }
-//         })();
-//     }, [auth]);
-
-//     if (!posts.length) {
-//         return <div>Loading...</div>;
-//     }
-
-//     return (
-//         <ul>
-//         {posts.map((post, index) => {
-//             return <li key={index}>{post}</li>;
-//         })}
-//         </ul>
-//     );
-// };
-
-// export default Posts;
diff --git a/frontend/src/Profile.tsx b/frontend/src/Profile.tsx
deleted file mode 100644
index 821de2cf..00000000
--- a/frontend/src/Profile.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// import React from "react";
-// import { withAuth } from "react-oidc-context";
-
-// class Profile extends React.Component {
-//     render() {
-//         // `this.props.auth` has all the same properties as the `useAuth` hook
-//         const auth = this.props.auth;
-//         return <div>Hello {auth.user?.profile.sub}</div>;
-//     }
-// }
-
-// export default withAuth(Profile);
diff --git a/frontend/src/lib/ConfigContext.ts b/frontend/src/lib/ConfigContext.ts
new file mode 100644
index 00000000..04a02e18
--- /dev/null
+++ b/frontend/src/lib/ConfigContext.ts
@@ -0,0 +1,34 @@
+import { createContext } from 'react';
+import { AuthProviderProps } from 'react-oidc-context';
+
+type AppConfig = {
+  api: {
+    baseUrl: string,
+  }
+}
+
+function readEnvVars(envs: ImportMetaEnv): {
+  appConfig: AppConfig,
+  oidcConfig: AuthProviderProps
+} {
+  return {
+    appConfig: {
+      api: {
+        baseUrl: envs.VITE_API_BASE_URL,
+      }
+    },
+    oidcConfig: {
+      authority: envs.VITE_OIDC_AUTHORITY,
+      client_id: envs.VITE_OIDC_CLIENT_ID,
+      redirect_uri: envs.VITE_OIDC_REDIRECT_URI,
+    }
+  };
+}
+
+const ConfigContext = createContext<AppConfig | undefined>(undefined);
+
+export {
+  type AppConfig,
+  ConfigContext,
+  readEnvVars
+}
diff --git a/frontend/src/web-backend-api.d.ts b/frontend/src/lib/api/backendApi.d.ts
similarity index 100%
rename from frontend/src/web-backend-api.d.ts
rename to frontend/src/lib/api/backendApi.d.ts
diff --git a/frontend/src/lib/api/client.ts b/frontend/src/lib/api/client.ts
new file mode 100644
index 00000000..bc3d8945
--- /dev/null
+++ b/frontend/src/lib/api/client.ts
@@ -0,0 +1,45 @@
+import createClient, { type Middleware } from "openapi-fetch";
+import type { paths } from "./backendApi";
+import { AppConfig } from "../ConfigContext";
+
+const throwOnError: Middleware = {
+  async onResponse({ response }) {
+    if (response.status >= 400) {
+      const body = response.headers.get("content-type")?.includes("json")
+        ? await response.clone().json()
+        : await response.clone().text();
+      throw new Error(body);
+    }
+
+    return undefined;
+  },
+};
+
+type AuthMiddlewareFactory = (accessToken: string) => Middleware;
+
+const createAuthMiddleware: AuthMiddlewareFactory = (accessToken) => {
+  return {
+    onRequest: async ({ request }) => {
+      request.headers.set(
+        "Authorization",
+        `Bearer ${accessToken}`
+      );
+      return request;
+    }
+  }
+}
+
+type ApiClient = ReturnType<typeof createConfiguredClient>;
+
+const createConfiguredClient = (config: AppConfig["api"], accessToken: string) => {
+  const client = createClient<paths>({ baseUrl: config.baseUrl });
+  client.use(throwOnError);
+  client.use(createAuthMiddleware(accessToken));
+  return client;
+}
+
+
+export {
+  type ApiClient,
+  createConfiguredClient,
+}
diff --git a/frontend/src/lib/api/useClient.ts b/frontend/src/lib/api/useClient.ts
new file mode 100644
index 00000000..e0e33388
--- /dev/null
+++ b/frontend/src/lib/api/useClient.ts
@@ -0,0 +1,25 @@
+import { useContext, useEffect, useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { ApiClient, createConfiguredClient } from "./client";
+import { ConfigContext } from "../ConfigContext";
+
+function useClient() {
+  const auth = useAuth();
+  const [apiClient, setApiClient] = useState<ApiClient | undefined>();
+  const config = useContext(ConfigContext);
+
+  useEffect(() => {
+    if (!auth.user || !auth.user.access_token || !config) return;
+
+    const client = createConfiguredClient(config.api, auth.user.access_token);
+    setApiClient(client)
+
+  }, [auth.user, config]);
+
+  return apiClient;
+}
+
+export {
+  useClient,
+  type ApiClient
+}
diff --git a/frontend/src/lib/api/useDeviceApi.ts b/frontend/src/lib/api/useDeviceApi.ts
new file mode 100644
index 00000000..b4ec6167
--- /dev/null
+++ b/frontend/src/lib/api/useDeviceApi.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { ApiClient, useClient } from "./useClient";
+import { components } from "./backendApi";
+
+type Device = components["schemas"]["DeviceDTO"];
+
+class DeviceApi {
+  private apiClient?: ApiClient;
+
+  constructor(apiClient: ApiClient) {
+    this.apiClient = apiClient;
+  }
+  
+  public setApiClient(apiClient: ApiClient) {
+    this.apiClient = apiClient;
+  }
+
+  public async getDevices(): Promise<Device[]> {
+    const {data, error} = await this.withClient().GET("/api/v1/devices/self");
+
+    // TODO
+    console.log(data);
+    console.log(error);
+
+    return data == undefined ? [] : data;
+  }
+
+  private withClient() {
+    if (!this.apiClient) {
+      throw new Error("Client must be set.");
+    }
+
+    return this.apiClient;
+  }
+}
+
+function useDeviceApi() {
+  const apiClient = useClient();
+  const [deviceApi, setDeviceApi] = useState<DeviceApi | undefined>();
+
+  useEffect(() => {
+    if (!apiClient) return;
+    setDeviceApi(new DeviceApi(apiClient))
+  }, [apiClient]);
+
+  return deviceApi;
+}
+
+export {
+  type Device,
+  useDeviceApi,
+}
diff --git a/frontend/src/lib/api/usePetApi.ts b/frontend/src/lib/api/usePetApi.ts
new file mode 100644
index 00000000..85566b2f
--- /dev/null
+++ b/frontend/src/lib/api/usePetApi.ts
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { ApiClient, useClient } from "./useClient";
+import { components } from "./backendApi";
+
+type Pet = components["schemas"]["PetDTO"];
+
+class PetApi {
+  private apiClient?: ApiClient;
+
+  constructor(apiClient: ApiClient) {
+    this.apiClient = apiClient;
+  }
+  
+  public setApiClient(apiClient: ApiClient) {
+    this.apiClient = apiClient;
+  }
+
+  public async getPets(): Promise<Pet[]> {
+    const {data, error} = await this.withClient().GET("/api/v1/pets/self");
+
+    // TODO
+    console.log(data);
+    console.log(error);
+
+    return data == undefined ? [] : data;
+  }
+
+  public async getPetById(id: number): Promise<Pet|undefined> {
+    const {data, error} = await this.withClient().GET(
+      "/api/v1/pets/self/{petId}",
+      {params: {path: { petId: id }}}
+    );
+
+    // TODO
+    console.log(data);
+    console.log(error);
+
+    return data;
+  }
+
+  private withClient() {
+    if (!this.apiClient) {
+      throw new Error("Client must be set.");
+    }
+
+    return this.apiClient;
+  }
+}
+
+function usePetApi() {
+  const apiClient = useClient();
+  const [petApi, setPetApi] = useState<PetApi | undefined>();
+
+  useEffect(() => {
+    if (!apiClient) return;
+    setPetApi(new PetApi(apiClient))
+  }, [apiClient]);
+
+  return petApi;
+}
+
+export {
+  type Pet,
+  usePetApi,
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 8f8077ce..2ba35d45 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -5,18 +5,16 @@ import "./index.css";
 import { AuthProvider } from "react-oidc-context";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
+import { ConfigContext, readEnvVars } from "./lib/ConfigContext.ts";
 
-const oidcConfig = {
-  authority: "http://localhost:4000/kc/realms/teamagochi",
-  client_id: "teamagochi-webapp",
-  redirect_uri: "http://localhost:5173/teamagochi/",
-  // ...
-};
+const {appConfig, oidcConfig} = readEnvVars(import.meta.env);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <AuthProvider {...oidcConfig}>
-      <App />
-    </AuthProvider>
+    <ConfigContext.Provider value={appConfig}>
+      <AuthProvider {...oidcConfig}>
+        <App />
+      </AuthProvider>
+    </ConfigContext.Provider>
   </React.StrictMode>
 );

From d7c816f483d2f8a10be902e0567757f0ca5df0f0 Mon Sep 17 00:00:00 2001
From: ozfox <ozfox@posteo.de>
Date: Mon, 1 Jul 2024 13:29:35 +0200
Subject: [PATCH 3/5] chore: remove unneeded files

---
 package-lock.json | 1141 ---------------------------------------------
 package.json      |   12 -
 2 files changed, 1153 deletions(-)
 delete mode 100644 package-lock.json
 delete mode 100644 package.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index cd0c2d39..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,1141 +0,0 @@
-{
-  "name": "teamagochi",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "bootstrap": "^5.3.3",
-        "jquery": "^3.7.1",
-        "oidc-client-ts": "^3.0.1",
-        "popper.js": "^1.16.1",
-        "react-bootstrap": "^2.10.2",
-        "react-oidc-context": "^3.1.0",
-        "react-progressbar-fancy": "^1.1.4",
-        "vite": "^5.2.11"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.6.tgz",
-      "integrity": "sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
-      "cpu": [
-        "mips64el"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",
-      "integrity": "sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@restart/hooks": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
-      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@restart/ui": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.9.tgz",
-      "integrity": "sha512-mUbygUsJcRurjZCt1f77gg4DpheD1D+Sc7J3JjAkysUj7t8m4EBJVOqWC9788Qtbc69cJ+HlJc6jBguKwS8Mcw==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@popperjs/core": "^2.11.6",
-        "@react-aria/ssr": "^3.5.0",
-        "@restart/hooks": "^0.4.9",
-        "@types/warning": "^3.0.0",
-        "dequal": "^2.0.3",
-        "dom-helpers": "^5.2.0",
-        "uncontrollable": "^8.0.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
-      }
-    },
-    "node_modules/@restart/ui/node_modules/uncontrollable": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
-      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
-      "peerDependencies": {
-        "react": ">=16.14.0"
-      }
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
-      "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
-      "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
-      "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
-      "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
-      "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
-      "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
-      "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
-      "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
-      "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
-      "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
-      "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
-      "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
-      "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
-      "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
-      "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
-      "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.11",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
-      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.12",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
-    },
-    "node_modules/@types/react": {
-      "version": "18.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
-      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.10",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
-      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/warning": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
-      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
-    },
-    "node_modules/bootstrap": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "license": "MIT",
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
-    },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
-      }
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT"
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/jwt-decode": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
-      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/oidc-client-ts": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.0.1.tgz",
-      "integrity": "sha512-xX8unZNtmtw3sOz4FPSqDhkLFnxCDsdo2qhFEH2opgWnF/iXMFoYdBQzkwCxAZVgt3FT3DnuBY3k80EZHT0RYg==",
-      "dependencies": {
-        "jwt-decode": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
-    },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "dependencies": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14.0"
-      }
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-bootstrap": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.2.tgz",
-      "integrity": "sha512-UvB7mRqQjivdZNxJNEA2yOQRB7L9N43nBnKc33K47+cH90/ujmnMwatTCwQLu83gLhrzAl8fsa6Lqig/KLghaA==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.8",
-        "@types/react-transition-group": "^4.4.6",
-        "classnames": "^2.3.2",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.8.1",
-        "prop-types-extra": "^1.1.0",
-        "react-transition-group": "^4.4.5",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.14.8",
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "node_modules/react-oidc-context": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-3.1.0.tgz",
-      "integrity": "sha512-ceQztvDfdl28mbr0So31XF/tCJamyF1+nm4AQNIE/nub+Xs9PLtDqLy/+75Yx1ahI0/n3nsq0R2qcP0R2Laa3Q==",
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "oidc-client-ts": "^3.0.0",
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/react-progressbar-fancy": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/react-progressbar-fancy/-/react-progressbar-fancy-1.1.4.tgz",
-      "integrity": "sha512-Pgx6yecmWFHbIYI9IOYoJ+sskEiteC5IKJmc0KtTwEHlitQQwSwp8732xKbe10UrxfS6zR4qiHtZmqUwzVWKGw==",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-    },
-    "node_modules/rollup": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
-      "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
-      "dependencies": {
-        "@types/estree": "1.0.5"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.17.2",
-        "@rollup/rollup-android-arm64": "4.17.2",
-        "@rollup/rollup-darwin-arm64": "4.17.2",
-        "@rollup/rollup-darwin-x64": "4.17.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.17.2",
-        "@rollup/rollup-linux-arm64-musl": "4.17.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.17.2",
-        "@rollup/rollup-linux-x64-gnu": "4.17.2",
-        "@rollup/rollup-linux-x64-musl": "4.17.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.17.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.17.2",
-        "@rollup/rollup-win32-x64-msvc": "4.17.2",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
-    "node_modules/uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": ">=15.0.0"
-      }
-    },
-    "node_modules/vite": {
-      "version": "5.2.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
-      "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
-      "dependencies": {
-        "esbuild": "^0.20.1",
-        "postcss": "^8.4.38",
-        "rollup": "^4.13.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index 6ca99ca3..00000000
--- a/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "dependencies": {
-    "bootstrap": "^5.3.3",
-    "jquery": "^3.7.1",
-    "oidc-client-ts": "^3.0.1",
-    "popper.js": "^1.16.1",
-    "react-bootstrap": "^2.10.2",
-    "react-oidc-context": "^3.1.0",
-    "react-progressbar-fancy": "^1.1.4",
-    "vite": "^5.2.11"
-  }
-}

From d9d8938ca2ec4dd47a5e7259e14e6d1af678f1e3 Mon Sep 17 00:00:00 2001
From: ozfox <ozfox@posteo.de>
Date: Mon, 1 Jul 2024 14:47:30 +0200
Subject: [PATCH 4/5] frontend: minor fixes

---
 frontend/src/App.tsx                      | 2 +-
 frontend/src/Components/Navbar/Navbar.tsx | 4 ++--
 frontend/vite.config.ts                   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 82c3d034..d71fcade 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -27,7 +27,7 @@ function App() {
       <div style={{ backgroundColor: "#FFFFFF" }}>
         <div>
           <div>
-            <Navbar client={client} />
+            <Navbar />
           </div>
         </div>
         <Footer />
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index ed37f813..550c290b 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -7,7 +7,7 @@ import { useAuth } from "react-oidc-context";
 import "./navbar.css";
 import { useState } from "react";
 
-const Navbar = (client) => {
+const Navbar = () => {
   const auth = useAuth();
   const [activePage, setActivePage] = useState("Pet Page");
 
@@ -145,7 +145,7 @@ const Navbar = (client) => {
             }
           />
           <Route path="/Friends" element={<Friends />} />
-          <Route path="/PetPage" element={<PetPage client={client} />} />
+          <Route path="/PetPage" element={<PetPage />} />
         </Routes>
       </Router>
     </div>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 4e7ed675..0500ebfc 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/teamagochi/"
+  base: "/"
 })

From 8ab40a491396a2817e7ed3c1f5fe36ff31d3af3f Mon Sep 17 00:00:00 2001
From: ozfox <ozfox@posteo.de>
Date: Mon, 1 Jul 2024 14:57:38 +0200
Subject: [PATCH 5/5] frontend: add register device api

---
 frontend/src/lib/api/useDeviceApi.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend/src/lib/api/useDeviceApi.ts b/frontend/src/lib/api/useDeviceApi.ts
index b4ec6167..5fc19180 100644
--- a/frontend/src/lib/api/useDeviceApi.ts
+++ b/frontend/src/lib/api/useDeviceApi.ts
@@ -25,6 +25,24 @@ class DeviceApi {
     return data == undefined ? [] : data;
   }
 
+  public async registerDevice(registrationCode: string, deviceName: string) {
+    const {data, error} = await this.withClient()
+      .POST("/api/v1/devices/self/register/{registrationCode}/{deviceName}", {
+        params: {
+          path: {
+            registrationCode: registrationCode,
+            deviceName: deviceName,
+          }
+        }
+      });
+    
+    // TODO
+    console.log(data);
+    console.log(error);
+
+    return data;
+  }
+
   private withClient() {
     if (!this.apiClient) {
       throw new Error("Client must be set.");