feat: invalid domain warning (#332)

* wip

* refactor: update domain warning layout

* i18n: add domain warning translations

* refactor: rework hooks usage

* feat: clear timeouts

* fix: use useeffect to cleanup timeout

* refactor: rework redirects and history storage

* refactor: rename domain to root domain

frontend/src/components/domain-warning/domain-warning.tsx

@@ -0,0 +1,56 @@
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import { Button } from "../ui/button";
+import { Trans, useTranslation } from "react-i18next";
+import { useLocation } from "react-router";
+
+interface Props {
+  onClick: () => void;
+  appUrl: string;
+  currentUrl: string;
+}
+
+export const DomainWarning = (props: Props) => {
+  const { onClick, appUrl, currentUrl } = props;
+  const { t } = useTranslation();
+  const { search } = useLocation();
+
+  const searchParams = new URLSearchParams(search);
+  const redirectUri = searchParams.get("redirect_uri");
+
+  return (
+    <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
+      <CardHeader>
+        <CardTitle className="text-3xl">{t("domainWarningTitle")}</CardTitle>
+        <CardDescription>
+          <Trans
+            t={t}
+            i18nKey="domainWarningSubtitle"
+            values={{ appUrl, currentUrl }}
+            components={{ code: <code /> }}
+          />
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="flex flex-col items-stretch gap-2">
+        <Button onClick={onClick} variant="warning">
+          {t("ignoreTitle")}
+        </Button>
+        <Button
+          onClick={() =>
+            window.location.assign(
+              `${appUrl}/login?redirect_uri=${encodeURIComponent(redirectUri || "")}`,
+            )
+          }
+          variant="outline"
+        >
+          {t("goToCorrectDomainTitle")}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};

frontend/src/components/layout/layout.tsx

@@ -1,8 +1,10 @@
 import { useAppContext } from "@/context/app-context";
 import { LanguageSelector } from "../language/language";
 import { Outlet } from "react-router";
+import { useCallback, useState } from "react";
+import { DomainWarning } from "../domain-warning/domain-warning";
 
-export const Layout = () => {
+const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   const { backgroundImage } = useAppContext();
 
   return (
@@ -15,7 +17,38 @@ export const Layout = () => {
       }}
     >
       <LanguageSelector />
-      <Outlet />
+      {children}
     </div>
   );
 };
+
+export const Layout = () => {
+  const { appUrl } = useAppContext();
+  const [ignoreDomainWarning, setIgnoreDomainWarning] = useState(() => {
+    return window.sessionStorage.getItem("ignoreDomainWarning") === "true";
+  });
+  const currentUrl = window.location.origin;
+
+  const handleIgnore = useCallback(() => {
+    window.sessionStorage.setItem("ignoreDomainWarning", "true");
+    setIgnoreDomainWarning(true);
+  }, [setIgnoreDomainWarning]);
+
+  if (!ignoreDomainWarning && appUrl !== currentUrl) {
+    return (
+      <BaseLayout>
+        <DomainWarning
+          appUrl={appUrl}
+          currentUrl={currentUrl}
+          onClick={() => handleIgnore()}
+        />
+      </BaseLayout>
+    );
+  }
+
+  return (
+    <BaseLayout>
+      <Outlet />
+    </BaseLayout>
+  );
+};

frontend/src/components/ui/button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         warning:
-          "bg-amber-500 text-white shadow-xs hover:bg-amber-400 focus-visible:ring-amber-200/20 dark:focus-visible:ring-amber-400/40 dark:bg-amber-600",
+          "bg-amber-500 text-white shadow-xs hover:bg-amber-400 focus-visible:ring-amber-200/20 dark:focus-visible:ring-amber-400/40",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",