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/pages/totp-page.tsx

@@ -1,66 +1,69 @@
-import { Navigate } from "react-router";
-import { useUserContext } from "../context/user-context";
-import { Title, Paper, Text } from "@mantine/core";
-import { Layout } from "../components/layouts/layout";
-import { TotpForm } from "../components/auth/totp-form";
+import { TotpForm } from "@/components/auth/totp-form";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { TotpSchema } from "@/schemas/totp-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
-import { notifications } from "@mantine/notifications";
-import { useAppContext } from "../context/app-context";
+import { useId } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router";
+import { toast } from "sonner";
 
 export const TotpPage = () => {
-  const queryString = window.location.search;
-  const params = new URLSearchParams(queryString);
-  const redirectUri = params.get("redirect_uri") ?? "";
-
-  const { totpPending, isLoggedIn } = useUserContext();
-  const { title } = useAppContext();
   const { t } = useTranslation();
+  const { search } = useLocation();
+  const navigate = useNavigate();
+  const formId = useId();
 
-  if (isLoggedIn) {
-    return <Navigate to={`/logout`} />;
-  }
-
-  if (!totpPending) {
-    return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
-  }
+  const searchParams = new URLSearchParams(search);
+  const redirectUri = searchParams.get("redirect_uri");
 
   const totpMutation = useMutation({
-    mutationFn: async (totp: { code: string }) => {
-      await axios.post("/api/totp", totp);
+    mutationFn: (values: TotpSchema) => axios.post("/api/totp", values),
+    mutationKey: ["totp"],
+    onSuccess: () => {
+      toast.success(t("totpSuccessTitle"), {
+        description: t("totpSuccessSubtitle"),
+      });
+
+      setTimeout(() => {
+        navigate(
+          `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
+        );
+      }, 500);
     },
     onError: () => {
-      notifications.show({
-        title: t("totpFailTitle"),
-        message: t("totpFailSubtitle"),
-        color: "red",
+      toast.error(t("totpFailTitle"), {
+        description: t("totpFailSubtitle"),
       });
     },
-    onSuccess: () => {
-      notifications.show({
-        title: t("totpSuccessTitle"),
-        message: t("totpSuccessSubtitle"),
-        color: "green",
-      });
-      setTimeout(() => {
-        window.location.replace(`/continue?redirect_uri=${redirectUri}`);
-      }, 500);
-    },
   });
 
   return (
-    <Layout>
-      <Title ta="center">{title}</Title>
-      <Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
-        <Text size="lg" fw={500} mb="md" ta="center">
-          {t("totpTitle")}
-        </Text>
+    <Card className="min-w-xs sm:min-w-sm">
+      <CardHeader>
+        <CardTitle className="text-3xl">{t("totpTitle")}</CardTitle>
+        <CardDescription>{t("totpSubtitle")}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col items-center">
         <TotpForm
-          isPending={totpMutation.isPending}
+          formId={formId}
           onSubmit={(values) => totpMutation.mutate(values)}
+          loading={totpMutation.isPending}
         />
-      </Paper>
-    </Layout>
+      </CardContent>
+      <CardFooter className="flex flex-col items-stretch">
+        <Button form={formId} type="submit" loading={totpMutation.isPending}>
+          {t("continueTitle")}
+        </Button>
+      </CardFooter>
+    </Card>
   );
 };