refactor: rename site to frontend

frontend/src/pages/continue-page.tsx

@@ -0,0 +1,107 @@
+import { Button, Code, Paper, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { Navigate } from "react-router";
+import { useUserContext } from "../context/user-context";
+import { Layout } from "../components/layouts/layout";
+import { ReactNode } from "react";
+import { isQueryValid } from "../utils/utils";
+import { useAppContext } from "../context/app-context";
+import { Trans, useTranslation } from "react-i18next";
+
+export const ContinuePage = () => {
+  const queryString = window.location.search;
+  const params = new URLSearchParams(queryString);
+  const redirectUri = params.get("redirect_uri") ?? "";
+
+  const { isLoggedIn } = useUserContext();
+  const { disableContinue } = useAppContext();
+  const { t } = useTranslation();
+
+  if (!isLoggedIn) {
+    return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
+  }
+
+  if (!isQueryValid(redirectUri)) {
+    return <Navigate to="/" />;
+  }
+
+  const redirect = () => {
+    notifications.show({
+      title: t("continueRedirectingTitle"),
+      message: t("continueRedirectingSubtitle"),
+      color: "blue",
+    });
+    setTimeout(() => {
+      window.location.href = redirectUri;
+    }, 500);
+  };
+
+  let uri;
+
+  try {
+    uri = new URL(redirectUri);
+  } catch {
+    return (
+      <ContinuePageLayout>
+        <Text size="xl" fw={700}>
+          {t("Invalid redirect")}
+        </Text>
+        <Text>{t("The redirect URL is invalid")}</Text>
+      </ContinuePageLayout>
+    );
+  }
+
+  if (disableContinue) {
+    window.location.href = redirectUri;
+    return (
+      <ContinuePageLayout>
+        <Text size="xl" fw={700}>
+          {t("continueRedirectingTitle")}
+        </Text>
+        <Text>{t("continueRedirectingSubtitle")}</Text>
+      </ContinuePageLayout>
+    );
+  }
+
+  if (window.location.protocol === "https:" && uri.protocol === "http:") {
+    return (
+      <ContinuePageLayout>
+        <Text size="xl" fw={700}>
+          {t("continueInsecureRedirectTitle")}
+        </Text>
+        <Text>
+          <Trans
+            i18nKey="continueInsecureRedirectSubtitle"
+            t={t}
+            components={{ Code: <Code /> }}
+          />
+        </Text>
+        <Button fullWidth mt="xl" color="yellow" onClick={redirect}>
+          {t("continueTitle")}
+        </Button>
+      </ContinuePageLayout>
+    );
+  }
+
+  return (
+    <ContinuePageLayout>
+      <Text size="xl" fw={700}>
+        {t("continueTitle")}
+      </Text>
+      <Text>{t("continueSubtitle")}</Text>
+      <Button fullWidth mt="xl" onClick={redirect}>
+        {t("continueTitle")}
+      </Button>
+    </ContinuePageLayout>
+  );
+};
+
+export const ContinuePageLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        {children}
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/pages/internal-server-error.tsx

@@ -0,0 +1,20 @@
+import { Button, Paper, Text } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+import { useTranslation } from "react-i18next";
+
+export const InternalServerError = () => {
+  const { t } = useTranslation();
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          {t("internalErrorTitle")}
+        </Text>
+        <Text>{t("internalErrorSubtitle")}</Text>
+        <Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
+          {t("internalErrorButton")}
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/pages/login-page.tsx

@@ -0,0 +1,128 @@
+import { Paper, Title, Text, Divider } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { useUserContext } from "../context/user-context";
+import { Navigate } from "react-router";
+import { Layout } from "../components/layouts/layout";
+import { OAuthButtons } from "../components/auth/oauth-buttons";
+import { LoginFormValues } from "../schemas/login-schema";
+import { LoginForm } from "../components/auth/login-forn";
+import { isQueryValid } from "../utils/utils";
+import { useAppContext } from "../context/app-context";
+import { useTranslation } from "react-i18next";
+
+export const LoginPage = () => {
+  const queryString = window.location.search;
+  const params = new URLSearchParams(queryString);
+  const redirectUri = params.get("redirect_uri") ?? "";
+
+  const { isLoggedIn } = useUserContext();
+  const { configuredProviders, title, genericName } = useAppContext();
+  const { t } = useTranslation();
+
+  const oauthProviders = configuredProviders.filter(
+    (value) => value !== "username",
+  );
+
+  if (isLoggedIn) {
+    return <Navigate to="/logout" />;
+  }
+
+  const loginMutation = useMutation({
+    mutationFn: (login: LoginFormValues) => {
+      return axios.post("/api/login", login);
+    },
+    onError: () => {
+      notifications.show({
+        title: t("loginFailTitle"),
+        message: t("loginFailSubtitle"),
+        color: "red",
+      });
+    },
+    onSuccess: async (data) => {
+      if (data.data.totpPending) {
+        window.location.replace(`/totp?redirect_uri=${redirectUri}`);
+        return;
+      }
+
+      notifications.show({
+        title: t("loginSuccessTitle"),
+        message: t("loginSuccessSubtitle"),
+        color: "green",
+      });
+
+      setTimeout(() => {
+        if (!isQueryValid(redirectUri)) {
+          window.location.replace("/");
+          return;
+        }
+
+        window.location.replace(`/continue?redirect_uri=${redirectUri}`);
+      }, 500);
+    },
+  });
+
+  const loginOAuthMutation = useMutation({
+    mutationFn: (provider: string) => {
+      return axios.get(
+        `/api/oauth/url/${provider}?redirect_uri=${redirectUri}`,
+      );
+    },
+    onError: () => {
+      notifications.show({
+        title: t("loginOauthFailTitle"),
+        message: t("loginOauthFailSubtitle"),
+        color: "red",
+      });
+    },
+    onSuccess: (data) => {
+      notifications.show({
+        title: t("loginOauthSuccessTitle"),
+        message: t("loginOauthSuccessSubtitle"),
+        color: "blue",
+      });
+      setTimeout(() => {
+        window.location.href = data.data.url;
+      }, 500);
+    },
+  });
+
+  const handleSubmit = (values: LoginFormValues) => {
+    loginMutation.mutate(values);
+  };
+
+  return (
+    <Layout>
+      <Title ta="center">{title}</Title>
+      <Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
+        {oauthProviders.length > 0 && (
+          <>
+            <Text size="lg" fw={500} ta="center">
+              {t("loginTitle")}
+            </Text>
+            <OAuthButtons
+              oauthProviders={oauthProviders}
+              isLoading={loginOAuthMutation.isLoading}
+              mutate={loginOAuthMutation.mutate}
+              genericName={genericName}
+            />
+            {configuredProviders.includes("username") && (
+              <Divider
+                label={t("loginDivider")}
+                labelPosition="center"
+                my="lg"
+              />
+            )}
+          </>
+        )}
+        {configuredProviders.includes("username") && (
+          <LoginForm
+            isLoading={loginMutation.isLoading}
+            onSubmit={handleSubmit}
+          />
+        )}
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/pages/logout-page.tsx

@@ -0,0 +1,84 @@
+import { Button, Code, Paper, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { useUserContext } from "../context/user-context";
+import { Navigate } from "react-router";
+import { Layout } from "../components/layouts/layout";
+import { capitalize } from "../utils/utils";
+import { useAppContext } from "../context/app-context";
+import { Trans, useTranslation } from "react-i18next";
+
+export const LogoutPage = () => {
+  const { isLoggedIn, username, oauth, provider } = useUserContext();
+  const { genericName } = useAppContext();
+  const { t } = useTranslation();
+
+  if (!isLoggedIn) {
+    return <Navigate to="/login" />;
+  }
+
+  const logoutMutation = useMutation({
+    mutationFn: () => {
+      return axios.post("/api/logout");
+    },
+    onError: () => {
+      notifications.show({
+        title: t("logoutFailTitle"),
+        message: t("logoutFailSubtitle"),
+        color: "red",
+      });
+    },
+    onSuccess: () => {
+      notifications.show({
+        title: t("logoutSuccessTitle"),
+        message: t("logoutSuccessSubtitle"),
+        color: "green",
+      });
+      setTimeout(() => {
+        window.location.replace("/login");
+      }, 500);
+    },
+  });
+
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          {t("logoutTitle")}
+        </Text>
+        <Text>
+          {oauth ? (
+            <Trans
+              i18nKey="logoutOauthSubtitle"
+              t={t}
+              components={{ Code: <Code /> }}
+              values={{
+                provider:
+                  provider === "generic" ? genericName : capitalize(provider),
+                username: username,
+              }}
+            />
+          ) : (
+            <Trans
+              i18nKey="logoutUsernameSubtitle"
+              t={t}
+              components={{ Code: <Code /> }}
+              values={{
+                username: username,
+              }}
+            />
+          )}
+        </Text>
+        <Button
+          fullWidth
+          mt="xl"
+          onClick={() => logoutMutation.mutate()}
+          loading={logoutMutation.isLoading}
+        >
+          {t("logoutTitle")}
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/pages/not-found-page.tsx

@@ -0,0 +1,20 @@
+import { Button, Paper, Text } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+import { useTranslation } from "react-i18next";
+
+export const NotFoundPage = () => {
+  const { t } = useTranslation();
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          {t("notFoundTitle")}
+        </Text>
+        <Text>{t("notFoundSubtitle")}</Text>
+        <Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
+          {t("notFoundButton")}
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/pages/totp-page.tsx

@@ -0,0 +1,66 @@
+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 { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { notifications } from "@mantine/notifications";
+import { useAppContext } from "../context/app-context";
+import { useTranslation } from "react-i18next";
+
+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();
+
+  if (isLoggedIn) {
+    return <Navigate to={`/logout`} />;
+  }
+
+  if (!totpPending) {
+    return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
+  }
+
+  const totpMutation = useMutation({
+    mutationFn: async (totp: { code: string }) => {
+      await axios.post("/api/totp", totp);
+    },
+    onError: () => {
+      notifications.show({
+        title: t("totpFailTitle"),
+        message: t("totpFailSubtitle"),
+        color: "red",
+      });
+    },
+    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>
+        <TotpForm
+          isLoading={totpMutation.isLoading}
+          onSubmit={(values) => totpMutation.mutate(values)}
+        />
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/pages/unauthorized-page.tsx

@@ -0,0 +1,55 @@
+import { Button, Code, Paper, Text } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+import { Navigate } from "react-router";
+import { isQueryValid } from "../utils/utils";
+import { Trans, useTranslation } from "react-i18next";
+
+export const UnauthorizedPage = () => {
+  const queryString = window.location.search;
+  const params = new URLSearchParams(queryString);
+  const username = params.get("username") ?? "";
+  const resource = params.get("resource") ?? "";
+
+  const { t } = useTranslation();
+
+  if (!isQueryValid(username)) {
+    return <Navigate to="/" />;
+  }
+
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          {t("Unauthorized")}
+        </Text>
+        <Text>
+          {isQueryValid(resource) ? (
+            <Text>
+              <Trans
+                i18nKey="unauthorizedResourceSubtitle"
+                t={t}
+                components={{ Code: <Code /> }}
+                values={{ resource, username }}
+              />
+            </Text>
+          ) : (
+            <Text>
+              <Trans
+                i18nKey="unauthorizedLoginSubtitle"
+                t={t}
+                values={{ username }}
+              />
+            </Text>
+          )}
+        </Text>
+        <Button
+          fullWidth
+          mt="xl"
+          onClick={() => window.location.replace("/login")}
+        >
+          {t("unauthorizedButton")}
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};