Feat/new UI (#153)

* wip

* feat: make forms functional

* feat: finalize pages

* chore: remove unused translations

* feat: app context

* feat: user context

* feat: finalize username login

* fix: use correct tab order in login form

* feat: add oauth logic

* chore: update readme and assets

* chore: rename docs back to assets

* feat: favicons

* feat: custom background image config option

* chore: add acknowledgements for background image

* feat: sanitize redirect URL

* feat: sanitize redirect URL on check

* chore: fix dependabot config

* refactor: bot suggestions

* fix: correctly redirect to app and check for untrusted redirects

* fix: run oauth auto redirect only when there is a redirect URI

* refactor: change select color

* fix: fix dockerfiles

* fix: fix hook rendering

* chore: remove translations cdn

* chore: formatting

* feat: validate api response against zod schema

* fix: use axios error instead of generic error in login page

frontend/src/context/app-context.tsx

@@ -1,40 +1,42 @@
+import {
+  appContextSchema,
+  AppContextSchema,
+} from "@/schemas/app-context-schema";
+import { createContext, useContext } from "react";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import React, { createContext, useContext } from "react";
 import axios from "axios";
-import { AppContextSchemaType } from "../schemas/app-context-schema";
 
-const AppContext = createContext<AppContextSchemaType | null>(null);
+const AppContext = createContext<AppContextSchema | null>(null);
 
 export const AppContextProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const {
-    data: userContext,
-    isLoading,
-    error,
-  } = useSuspenseQuery({
-    queryKey: ["appContext"],
-    queryFn: async () => {
-      const res = await axios.get("/api/app");
-      return res.data;
-    },
+  const { isFetching, data, error } = useSuspenseQuery({
+    queryKey: ["app"],
+    queryFn: () => axios.get("/api/app").then((res) => res.data),
   });
 
-  if (error && !isLoading) {
+  if (error && !isFetching) {
     throw error;
   }
 
+  const validated = appContextSchema.safeParse(data);
+
+  if (validated.success === false) {
+    throw validated.error;
+  }
+
   return (
-    <AppContext.Provider value={userContext}>{children}</AppContext.Provider>
+    <AppContext.Provider value={validated.data}>{children}</AppContext.Provider>
   );
 };
 
 export const useAppContext = () => {
   const context = useContext(AppContext);
 
-  if (context === null) {
+  if (!context) {
     throw new Error("useAppContext must be used within an AppContextProvider");
   }
 

frontend/src/context/user-context.tsx

@@ -1,41 +1,47 @@
+import {
+  userContextSchema,
+  UserContextSchema,
+} from "@/schemas/user-context-schema";
+import { createContext, useContext } from "react";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import React, { createContext, useContext } from "react";
 import axios from "axios";
-import { UserContextSchemaType } from "../schemas/user-context-schema";
 
-const UserContext = createContext<UserContextSchemaType | null>(null);
+const UserContext = createContext<UserContextSchema | null>(null);
 
 export const UserContextProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const {
-    data: userContext,
-    isLoading,
-    error,
-  } = useSuspenseQuery({
-    queryKey: ["userContext"],
-    queryFn: async () => {
-      const res = await axios.get("/api/user");
-      return res.data;
-    },
+  const { isFetching, data, error } = useSuspenseQuery({
+    queryKey: ["user"],
+    queryFn: () => axios.get("/api/user").then((res) => res.data),
   });
 
-  if (error && !isLoading) {
+  if (error && !isFetching) {
     throw error;
   }
 
+  const validated = userContextSchema.safeParse(data);
+
+  if (validated.success === false) {
+    throw validated.error;
+  }
+
   return (
-    <UserContext.Provider value={userContext}>{children}</UserContext.Provider>
+    <UserContext.Provider value={validated.data}>
+      {children}
+    </UserContext.Provider>
   );
 };
 
 export const useUserContext = () => {
   const context = useContext(UserContext);
 
-  if (context === null) {
-    throw new Error("useUserContext must be used within a UserContextProvider");
+  if (!context) {
+    throw new Error(
+      "useUserContext must be used within an UserContextProvider",
+    );
   }
 
   return context;