refactor: update domain warning screen

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

@@ -1,12 +1,12 @@
 import {
   Card,
-  CardDescription,
+  CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "../ui/card";
 import { Button } from "../ui/button";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
 
 interface Props {
@@ -24,23 +24,26 @@ export const DomainWarning = (props: Props) => {
   const redirectUri = searchParams.get("redirect_uri");
 
   return (
-    <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
+    <Card role="alert" aria-live="assertive">
       <CardHeader>
-        <CardTitle className="text-3xl">{t("domainWarningTitle")}</CardTitle>
+        <CardTitle className="text-xl">{t("domainWarningTitle")}</CardTitle>
-        <CardDescription>
-          <Trans
-            t={t}
-            i18nKey="domainWarningSubtitle"
-            values={{ appUrl, currentUrl }}
-            components={{ code: <code /> }}
-            shouldUnescape={true}
-          />
-        </CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch gap-2">
+      <CardContent className="flex flex-col gap-3 text-sm mb-1.25">
-        <Button onClick={onClick} variant="warning">
+        <p className="text-muted-foreground">{t("domainWarningSubtitle")}</p>
-          {t("ignoreTitle")}
+        <pre>
-        </Button>
+          <span className="text-muted-foreground">
+            {t("domainWarningExpected")}&nbsp;
+            <span className="text-primary">{appUrl}</span>
+          </span>
+        </pre>
+        <pre>
+          <span className="text-muted-foreground">
+            {t("domainWarningCurrent")}&nbsp;
+            <span className="text-primary">{currentUrl}</span>
+          </span>
+        </pre>
+      </CardContent>
+      <CardFooter className="flex flex-col items-stretch gap-3">
         <Button
           onClick={() =>
             window.location.assign(
@@ -51,6 +54,9 @@ export const DomainWarning = (props: Props) => {
         >
           {t("goToCorrectDomainTitle")}
         </Button>
+        <Button onClick={onClick} variant="warning">
+          {t("ignoreTitle")}
+        </Button>
       </CardFooter>
     </Card>
   );

frontend/src/components/layout/layout.tsx

@@ -25,7 +25,7 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
         <ThemeToggle />
         <LanguageSelector />
       </div>
-      <div className="max-w-sm">{children}</div>
+      <div className="max-w-sm md:min-w-sm min-w-xs">{children}</div>
     </div>
   );
 };

frontend/src/index.css

@@ -160,7 +160,7 @@ code {
 }
 
 pre {
-  @apply bg-accent border border-border rounded-md p-2 whitespace-break-spaces;
+  @apply bg-accent border border-border rounded-md p-2 whitespace-break-spaces break-all;
 }
 
 .lead {

frontend/src/lib/i18n/locales/en-US.json

@@ -57,7 +57,9 @@
     "fieldRequired": "This field is required",
     "invalidInput": "Invalid input",
     "domainWarningTitle": "Invalid Domain",
-    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "domainWarningSubtitle": "You are accessing this instance from an incorrect domain. If you proceed, you may encounter issues with authentication.",
+    "domainWarningCurrent": "Current:",
+    "domainWarningExpected": "Expected:",
     "ignoreTitle": "Ignore",
     "goToCorrectDomainTitle": "Go to correct domain",
     "authorizeTitle": "Authorize",

frontend/src/lib/i18n/locales/en.json

@@ -57,7 +57,9 @@
     "fieldRequired": "This field is required",
     "invalidInput": "Invalid input",
     "domainWarningTitle": "Invalid Domain",
-    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "domainWarningSubtitle": "You are accessing this instance from an incorrect domain. If you proceed, you may encounter issues with authentication.",
+    "domainWarningCurrent": "Current:",
+    "domainWarningExpected": "Expected:",
     "ignoreTitle": "Ignore",
     "goToCorrectDomainTitle": "Go to correct domain",
     "authorizeTitle": "Authorize",

frontend/src/pages/authorize-page.tsx

@@ -154,7 +154,7 @@ export const AuthorizePage = () => {
   return (
     <Card>
       <CardHeader className="mb-2">
-        <div className="flex flex-col gap-3 items-center justify-center">
+        <div className="flex flex-col gap-3 items-center justify-center text-center">
           <div className="bg-accent-foreground text-muted text-xl font-bold font-sans rounded-lg px-4 py-3">
             {getClientInfo.data?.name.slice(0, 1)}
           </div>
@@ -163,7 +163,7 @@ export const AuthorizePage = () => {
               app: getClientInfo.data?.name || "Unknown",
             })}
           </CardTitle>
-          <CardDescription className="text-sm max-w-sm text-center">
+          <CardDescription className="text-sm max-w-sm">
             {scopes.includes("openid")
               ? t("authorizeSubtitle")
               : t("authorizeSubtitleOAuth")}

frontend/src/pages/continue-page.tsx

@@ -94,7 +94,7 @@ export const ContinuePage = () => {
   if (showUntrustedWarning) {
     return (
       <Card role="alert" aria-live="assertive">
-        <CardHeader>
+        <CardHeader className="gap-1.5">
           <CardTitle className="text-xl">
             {t("continueUntrustedRedirectTitle")}
           </CardTitle>
@@ -133,8 +133,8 @@ export const ContinuePage = () => {
   if (showInsecureWarning) {
     return (
       <Card role="alert" aria-live="assertive">
-        <CardHeader>
+        <CardHeader className="gap-1.5">
-          <CardTitle className="text-3xl">
+          <CardTitle className="text-xl">
             {t("continueInsecureRedirectTitle")}
           </CardTitle>
           <CardDescription>
@@ -168,7 +168,7 @@ export const ContinuePage = () => {
   }
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">
           {t("continueRedirectingTitle")}
@@ -176,8 +176,8 @@ export const ContinuePage = () => {
         <CardDescription>{t("continueRedirectingSubtitle")}</CardDescription>
       </CardHeader>
       {showRedirectButton && (
-        <CardFooter className="flex flex-col items-stretch">
+        <CardFooter>
-          <Button onClick={handleRedirect}>
+          <Button className="w-full" onClick={handleRedirect}>
             {t("continueRedirectManually")}
           </Button>
         </CardFooter>

frontend/src/pages/error-page.tsx

@@ -14,7 +14,7 @@ export const ErrorPage = () => {
   const error = searchParams.get("error") ?? "";
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("errorTitle")}</CardTitle>
         <CardDescription className="flex flex-col gap-3">

frontend/src/pages/forgot-password-page.tsx

@@ -2,16 +2,20 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { useAppContext } from "@/context/app-context";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
+import { useNavigate } from "react-router";
 
 export const ForgotPasswordPage = () => {
   const { forgotPasswordMessage } = useAppContext();
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   return (
     <Card>
@@ -27,6 +31,17 @@ export const ForgotPasswordPage = () => {
           </Markdown>
         </CardDescription>
       </CardContent>
+      <CardFooter>
+        <Button
+          className="w-full"
+          variant="outline"
+          onClick={() => {
+            navigate("/login");
+          }}
+        >
+          {t("notFoundButton")}
+        </Button>
+      </CardFooter>
     </Card>
   );
 };

frontend/src/pages/login-page.tsx

@@ -220,7 +220,7 @@ export const LoginPage = () => {
     );
   }
   return (
-    <Card className="md:min-w-sm">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-center text-xl">{title}</CardTitle>
         {providers.length > 0 && (
@@ -264,14 +264,16 @@ export const LoginPage = () => {
         )}
       </CardContent>
       <CardFooter>
-        <Button
+        {userAuthConfigured && (
-          className="w-full"
+          <Button
-          type="submit"
+            className="w-full"
-          form={formId}
+            type="submit"
-          loading={loginIsPending || oauthIsPending}
+            form={formId}
-        >
+            loading={loginIsPending || oauthIsPending}
-          {t("loginSubmit")}
+          >
-        </Button>
+            {t("loginSubmit")}
+          </Button>
+        )}
       </CardFooter>
     </Card>
   );

frontend/src/pages/logout-page.tsx

@@ -52,7 +52,7 @@ export const LogoutPage = () => {
   }
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("logoutTitle")}</CardTitle>
         <CardDescription>
@@ -84,8 +84,10 @@ export const LogoutPage = () => {
           )}
         </CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
         <Button
+          className="w-full"
+          variant="outline"
           loading={logoutMutation.isPending}
           onClick={() => logoutMutation.mutate()}
         >

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

@@ -21,13 +21,18 @@ export const NotFoundPage = () => {
   };
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("notFoundTitle")}</CardTitle>
         <CardDescription>{t("notFoundSubtitle")}</CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
-        <Button onClick={handleRedirect} loading={loading}>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleRedirect}
+          loading={loading}
+        >
           {t("notFoundButton")}
         </Button>
       </CardFooter>

frontend/src/pages/totp-page.tsx

@@ -83,8 +83,13 @@ export const TotpPage = () => {
           onSubmit={(values) => totpMutation.mutate(values)}
         />
       </CardContent>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
-        <Button form={formId} type="submit" loading={totpMutation.isPending}>
+        <Button
+          className="w-full"
+          form={formId}
+          type="submit"
+          loading={totpMutation.isPending}
+        >
           {t("continueTitle")}
         </Button>
       </CardFooter>

frontend/src/pages/unauthorized-page.tsx

@@ -47,7 +47,7 @@ export const UnauthorizedPage = () => {
   }
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("unauthorizedTitle")}</CardTitle>
         <CardDescription>
@@ -65,8 +65,13 @@ export const UnauthorizedPage = () => {
           />
         </CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
-        <Button onClick={handleRedirect} loading={loading}>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleRedirect}
+          loading={loading}
+        >
           {t("unauthorizedButton")}
         </Button>
       </CardFooter>