feat: finalize pages

frontend/src/pages/continue-page.tsx

@@ -6,6 +6,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Code } from "@/components/ui/code";
 import { isValidUrl } from "@/lib/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { Navigate, useNavigate } from "react-router";
@@ -47,9 +48,7 @@ export const ContinuePage = () => {
               i18nKey="untrustedRedirectSubtitle"
               t={t}
               components={{
-                code: (
-                  <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold" />
-                ),
+                code: <Code />,
               }}
               values={{ domain }}
             />
@@ -82,9 +81,7 @@ export const ContinuePage = () => {
               i18nKey="continueInsecureRedirectSubtitle"
               t={t}
               components={{
-                code: (
-                  <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold" />
-                ),
+                code: <Code />,
               }}
             />
           </CardDescription>
@@ -105,7 +102,7 @@ export const ContinuePage = () => {
   }
 
   return (
-    <Card className="min-w-xs md:max-w-sm">
+    <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-3xl">{t("continueTitle")}</CardTitle>
         <CardDescription>{t("continueSubtitle")}</CardDescription>

frontend/src/pages/error-page.tsx

@@ -10,7 +10,7 @@ export const ErrorPage = () => {
   const { t } = useTranslation();
 
   return (
-    <Card className="min-w-xs md:max-w-sm">
+    <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-3xl">{t("errorTitle")}</CardTitle>
         <CardDescription>{t("errorSubtitle")}</CardDescription>

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

@@ -11,7 +11,7 @@ export const ForgotPasswordPage = () => {
   const { t } = useTranslation();
 
   return (
-    <Card className="min-w-xs md:max-w-sm">
+    <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-3xl">{t("forgotPasswordTitle")}</CardTitle>
         <CardDescription>

frontend/src/pages/login-page.tsx

@@ -24,7 +24,7 @@ export const LoginPage = () => {
   const userAuthConfigured = configuredProviders.includes("username");
 
   return (
-    <Card className="max-w-xs md:max-w-sm">
+    <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-center text-3xl">{title}</CardTitle>
         {configuredProviders.length > 0 && (
@@ -33,17 +33,29 @@ export const LoginPage = () => {
           </CardDescription>
         )}
       </CardHeader>
-      <CardContent className="flex flex-col gap-5">
+      <CardContent className="flex flex-col gap-4">
         {oauthConfigured && (
-          <div className="flex flex-row flex-wrap gap-3 items-center justify-center">
+          <div className="flex flex-col gap-2 items-center justify-center">
             {configuredProviders.includes("google") && (
-              <OAuthButton title="Google" icon={<GoogleIcon />} />
+              <OAuthButton
+                title="Google"
+                icon={<GoogleIcon />}
+                className="w-full"
+              />
             )}
             {configuredProviders.includes("github") && (
-              <OAuthButton title="Github" icon={<GithubIcon />} />
+              <OAuthButton
+                title="Github"
+                icon={<GithubIcon />}
+                className="w-full"
+              />
             )}
             {configuredProviders.includes("generic") && (
-              <OAuthButton title="Generic" icon={<GenericIcon />} />
+              <OAuthButton
+                title="Generic"
+                icon={<GenericIcon />}
+                className="w-full"
+              />
             )}
           </div>
         )}

frontend/src/pages/logout-page.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Code } from "@/components/ui/code";
+import { capitalize } from "@/utils/utils";
+import { Trans, useTranslation } from "react-i18next";
+
+export const LogoutPage = () => {
+  const { t } = useTranslation();
+
+  const provider = "google";
+  const genericName = "generic";
+  const username = "username";
+  const email = "smbd@example.com";
+
+  return (
+    <Card className="min-w-xs sm:min-w-sm">
+      <CardHeader>
+        <CardTitle className="text-3xl">{t("logoutTitle")}</CardTitle>
+        <CardDescription>
+          {provider !== "username" ? (
+            <Trans
+              i18nKey="logoutOauthSubtitle"
+              t={t}
+              components={{
+                code: <Code />,
+              }}
+              values={{
+                username: email,
+                provider:
+                  provider === "generic" ? genericName : capitalize(provider),
+              }}
+            />
+          ) : (
+            <Trans
+              i18nKey="logoutUsernameSubtitle"
+              t={t}
+              components={{
+                code: <Code />,
+              }}
+              values={{
+                username: username,
+              }}
+            />
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="flex flex-col items-stretch">
+        <Button>{t("logoutTitle")}</Button>
+      </CardFooter>
+    </Card>
+  );
+};

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

@@ -14,7 +14,7 @@ export const NotFoundPage = () => {
   const navigate = useNavigate();
 
   return (
-    <Card className="min-w-xs md:max-w-sm">
+    <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-3xl">{t("notFoundTitle")}</CardTitle>
         <CardDescription>{t("notFoundSubtitle")}</CardDescription>

frontend/src/pages/totp-page.tsx

@@ -20,7 +20,7 @@ export const TotpPage = () => {
   };
 
   return (
-    <Card className="min-w-xs md:max-w-sm">
+    <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-3xl">{t("totpTitle")}</CardTitle>
         <CardDescription>{t("totpSubtitle")}</CardDescription>

frontend/src/pages/unauthorized-page.tsx

@@ -0,0 +1,60 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Code } from "@/components/ui/code";
+import { Trans, useTranslation } from "react-i18next";
+import { Navigate } from "react-router";
+
+export const UnauthorizedPage = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  const username = searchParams.get("username");
+  const resource = searchParams.get("resource");
+  const groupErr = searchParams.get("groupErr");
+
+  const { t } = useTranslation();
+
+  if (!username) {
+    return <Navigate to="/" />;
+  }
+
+  let i18nKey = "unaothorizedLoginSubtitle";
+
+  if (resource) {
+    i18nKey = "unauthorizedResourceSubtitle";
+  }
+
+  if (groupErr === "true") {
+    i18nKey = "unauthorizedGroupsSubtitle";
+  }
+
+  return (
+    <Card className="min-w-xs sm:min-w-sm">
+      <CardHeader>
+        <CardTitle className="text-3xl">{t("unauthorizedTitle")}</CardTitle>
+        <CardDescription>
+          <Trans
+            i18nKey={i18nKey}
+            t={t}
+            components={{
+              code: <Code />,
+            }}
+            values={{
+              username: username,
+              resource: resource,
+            }}
+          />
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="flex flex-col items-stretch">
+        <Button onClick={() => window.location.replace("/")}>
+          {t("unauthorizedButton")}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};