feat: add support for required oauth groups

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

@@ -42,6 +42,7 @@
     "unauthorizedTitle": "Unauthorized",
     "unauthorizedResourceSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to access the resource <Code>{{resource}}</Code>.",
     "unaothorizedLoginSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to login.",
+    "unauthorizedGroupsSubtitle": "The user with username <Code>{{username}}</Code> is not in the groups required by the resource <Code>{{resource}}</Code>.",
     "unauthorizedButton": "Try again",
     "untrustedRedirectTitle": "Untrusted redirect",
     "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<Code>{{domain}}</Code>). Are you sure you want to continue?",

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

@@ -42,6 +42,7 @@
     "unauthorizedTitle": "Unauthorized",
     "unauthorizedResourceSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to access the resource <Code>{{resource}}</Code>.",
     "unaothorizedLoginSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to login.",
+    "unauthorizedGroupsSubtitle": "The user with username <Code>{{username}}</Code> is not in the groups required by the resource <Code>{{resource}}</Code>.",
     "unauthorizedButton": "Try again",
     "untrustedRedirectTitle": "Untrusted redirect",
     "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<Code>{{domain}}</Code>). Are you sure you want to continue?",

frontend/src/pages/unauthorized-page.tsx

@@ -3,11 +3,13 @@ import { Layout } from "../components/layouts/layout";
 import { Navigate } from "react-router";
 import { isQueryValid } from "../utils/utils";
 import { Trans, useTranslation } from "react-i18next";
+import React from "react";
 
 export const UnauthorizedPage = () => {
   const queryString = window.location.search;
   const params = new URLSearchParams(queryString);
   const username = params.get("username") ?? "";
+  const groupErr = params.get("groupErr") ?? "";
   const resource = params.get("resource") ?? "";
 
   const { t } = useTranslation();
@@ -16,6 +18,47 @@ export const UnauthorizedPage = () => {
     return <Navigate to="/" />;
   }
 
+  if (isQueryValid(resource) && !isQueryValid(groupErr)) {
+    return (
+      <UnauthorizedLayout>
+          <Trans
+            i18nKey="unauthorizedResourceSubtitle"
+            t={t}
+            components={{ Code: <Code /> }}
+            values={{ resource, username }}
+          />
+      </UnauthorizedLayout>
+    );
+  }
+
+  if (isQueryValid(groupErr) && isQueryValid(resource)) {
+    return (
+      <UnauthorizedLayout>
+        <Trans
+        i18nKey="unauthorizedGroupsSubtitle"
+        t={t}
+        components={{ Code: <Code /> }}
+        values={{ username, resource }}
+         />
+      </UnauthorizedLayout>
+    )
+  }
+
+  return (
+    <UnauthorizedLayout>
+      <Trans
+        i18nKey="unaothorizedLoginSubtitle"
+        t={t}
+        components={{ Code: <Code /> }}
+        values={{ username }}
+      />
+    </UnauthorizedLayout>
+  );
+};
+
+const UnauthorizedLayout = ({ children }: { children: React.ReactNode }) => {
+  const { t } = useTranslation();
+
   return (
     <Layout>
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
@@ -23,25 +66,7 @@ export const UnauthorizedPage = () => {
           {t("Unauthorized")}
         </Text>
         <Text>
-          {isQueryValid(resource) ? (
-            <Text>
-              <Trans
-                i18nKey="unauthorizedResourceSubtitle"
-                t={t}
-                components={{ Code: <Code /> }}
-                values={{ resource, username }}
-              />
-            </Text>
-          ) : (
-            <Text>
-              <Trans
-                i18nKey="unaothorizedLoginSubtitle"
-                t={t}
-                components={{ Code: <Code /> }}
-                values={{ username }}
-              />
-            </Text>
-          )}
+        {children}
         </Text>
         <Button
           fullWidth