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/main.tsx

@@ -1,54 +1,83 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { App } from "./App.tsx";
-import { MantineProvider } from "@mantine/core";
-import { Notifications } from "@mantine/notifications";
-import "@mantine/core/styles.css";
-import "@mantine/notifications/styles.css";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Route } from "react-router";
-import { Routes } from "react-router";
-import { UserContextProvider } from "./context/user-context.tsx";
-import { LoginPage } from "./pages/login-page.tsx";
-import { LogoutPage } from "./pages/logout-page.tsx";
-import { ContinuePage } from "./pages/continue-page.tsx";
-import { NotFoundPage } from "./pages/not-found-page.tsx";
-import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
-import { InternalServerError } from "./pages/internal-server-error.tsx";
-import { TotpPage } from "./pages/totp-page.tsx";
-import { AppContextProvider } from "./context/app-context.tsx";
-import "./lib/i18n/i18n.ts";
-import { ForgotPasswordPage } from "./pages/forgot-password-page.tsx";
 import "./index.css";
+import { Layout } from "./components/layout/layout.tsx";
+import { createBrowserRouter, RouterProvider } from "react-router";
+import { LoginPage } from "./pages/login-page.tsx";
+import { App } from "./App.tsx";
+import { ErrorPage } from "./pages/error-page.tsx";
+import { NotFoundPage } from "./pages/not-found-page.tsx";
+import { ContinuePage } from "./pages/continue-page.tsx";
+import { TotpPage } from "./pages/totp-page.tsx";
+import { ForgotPasswordPage } from "./pages/forgot-password-page.tsx";
+import { LogoutPage } from "./pages/logout-page.tsx";
+import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppContextProvider } from "./context/app-context.tsx";
+import { UserContextProvider } from "./context/user-context.tsx";
+import { Toaster } from "@/components/ui/sonner";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/login",
+    element: <LoginPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/logout",
+    element: <LogoutPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/continue",
+    element: <ContinuePage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/totp",
+    element: <TotpPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/forgot-password",
+    element: <ForgotPasswordPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/unauthorized",
+    element: <UnauthorizedPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/error",
+    element: <ErrorPage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "*",
+    element: <NotFoundPage />,
+    errorElement: <ErrorPage />,
+  },
+]);
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <MantineProvider defaultColorScheme="auto">
-      <QueryClientProvider client={queryClient}>
-        <Notifications />
-        <AppContextProvider>
-          <UserContextProvider>
-            <BrowserRouter>
-              <Routes>
-                <Route path="/" element={<App />} />
-                <Route path="/login" element={<LoginPage />} />
-                <Route path="/totp" element={<TotpPage />} />
-                <Route path="/logout" element={<LogoutPage />} />
-                <Route path="/continue" element={<ContinuePage />} />
-                <Route path="/unauthorized" element={<UnauthorizedPage />} />
-                <Route path="/error" element={<InternalServerError />} />
-                <Route
-                  path="/forgot-password"
-                  element={<ForgotPasswordPage />}
-                />
-                <Route path="*" element={<NotFoundPage />} />
-              </Routes>
-            </BrowserRouter>
-          </UserContextProvider>
-        </AppContextProvider>
-      </QueryClientProvider>
-    </MantineProvider>
+    <QueryClientProvider client={queryClient}>
+      <AppContextProvider>
+        <UserContextProvider>
+          <Layout>
+            <RouterProvider router={router} />
+            <Toaster />
+          </Layout>
+        </UserContextProvider>
+      </AppContextProvider>
+    </QueryClientProvider>
   </StrictMode>,
 );