Merge pull request #3154 from Infisical/misc/gov-banner-and-consent-reqs

misc: add instance banner and consent support

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -19,7 +19,8 @@ import {
   Tab,
   TabList,
   TabPanel,
-  Tabs
+  Tabs,
+  TextArea
 } from "@app/components/v2";
 import { useServerConfig, useUser } from "@app/context";
 import {
@@ -55,7 +56,9 @@ const formSchema = z.object({
   trustSamlEmails: z.boolean(),
   trustLdapEmails: z.boolean(),
   trustOidcEmails: z.boolean(),
-  defaultAuthOrgId: z.string()
+  defaultAuthOrgId: z.string(),
+  authConsentContent: z.string().optional(),
+  pageFrameContent: z.string().optional()
 });
 
 type TDashboardForm = z.infer<typeof formSchema>;
@@ -80,7 +83,9 @@ export const OverviewPage = () => {
       trustSamlEmails: config.trustSamlEmails,
       trustLdapEmails: config.trustLdapEmails,
       trustOidcEmails: config.trustOidcEmails,
-      defaultAuthOrgId: config.defaultAuthOrgId ?? ""
+      defaultAuthOrgId: config.defaultAuthOrgId ?? "",
+      authConsentContent: config.authConsentContent,
+      pageFrameContent: config.pageFrameContent
     }
   });
 
@@ -95,7 +100,14 @@ export const OverviewPage = () => {
   const isNotAllowed = !user?.superAdmin;
   const onFormSubmit = async (formData: TDashboardForm) => {
     try {
-      const { allowedSignUpDomain, trustSamlEmails, trustLdapEmails, trustOidcEmails } = formData;
+      const {
+        allowedSignUpDomain,
+        trustSamlEmails,
+        trustLdapEmails,
+        trustOidcEmails,
+        authConsentContent,
+        pageFrameContent
+      } = formData;
 
       await updateServerConfig({
         defaultAuthOrgId: defaultAuthOrgId || null,
@@ -103,7 +115,9 @@ export const OverviewPage = () => {
         allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null,
         trustSamlEmails,
         trustLdapEmails,
-        trustOidcEmails
+        trustOidcEmails,
+        authConsentContent,
+        pageFrameContent
       });
       createNotification({
         text: "Successfully changed sign up setting.",
@@ -324,6 +338,51 @@ export const OverviewPage = () => {
                         }}
                       />
                     </div>
+
+                    <div className="flex flex-col justify-start">
+                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">Notices</div>
+                      <div className="mb-4 max-w-lg text-sm text-mineshaft-400">
+                        Configure system-wide notification banners and security messages. These
+                        settings control the text displayed to users during authentication and
+                        throughout their session
+                      </div>
+                      <Controller
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                            label="Auth Consent Content"
+                          >
+                            <TextArea
+                              placeholder="Auth Consent Message"
+                              {...field}
+                              rows={3}
+                              className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
+                            />
+                          </FormControl>
+                        )}
+                        control={control}
+                        name="authConsentContent"
+                      />
+                      <Controller
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                            label="Page Frame Content"
+                          >
+                            <TextArea
+                              placeholder="Page Frame Content"
+                              {...field}
+                              rows={3}
+                              className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
+                            />
+                          </FormControl>
+                        )}
+                        control={control}
+                        name="pageFrameContent"
+                      />
+                    </div>
                     <Button
                       type="submit"
                       isLoading={isSubmitting}

frontend/src/pages/middlewares/restrict-login-signup.tsx

@@ -1,7 +1,15 @@
-import { createFileRoute, redirect, stripSearchParams } from "@tanstack/react-router";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { createFileRoute, Outlet, redirect, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
+import { addSeconds, formatISO } from "date-fns";
+import DOMPurify from "dompurify";
+import rehypeRaw from "rehype-raw";
 import { z } from "zod";
 
+import { Button } from "@app/components/v2";
+import { SessionStorageKeys } from "@app/const";
+import { useServerConfig } from "@app/context";
 import { authKeys, fetchAuthToken } from "@app/hooks/api/auth/queries";
 import { setAuthToken } from "@app/hooks/api/reactQuery";
 import { ProjectType } from "@app/hooks/api/workspace/types";
@@ -10,6 +18,56 @@ const QueryParamsSchema = z.object({
   callback_port: z.coerce.number().optional().catch(undefined)
 });
 
+export const AuthConsentWrapper = () => {
+  const { config } = useServerConfig();
+  const [hasConsented, setHasConsented] = useState(() => {
+    const consentInfo = sessionStorage.getItem(SessionStorageKeys.AUTH_CONSENT);
+    if (!consentInfo) {
+      return false;
+    }
+
+    const { expiry, data } = JSON.parse(consentInfo);
+    if (new Date() > new Date(expiry)) {
+      sessionStorage.removeItem(SessionStorageKeys.AUTH_CONSENT);
+      return false;
+    }
+
+    return data === "true";
+  });
+
+  const handleConsent = () => {
+    sessionStorage.setItem(
+      SessionStorageKeys.AUTH_CONSENT,
+      JSON.stringify({
+        expiry: formatISO(addSeconds(new Date(), 60)),
+        data: "true"
+      })
+    );
+
+    setHasConsented(true);
+  };
+
+  return (
+    <>
+      {config.authConsentContent && !hasConsented && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-mineshaft-700/80 bg-opacity-90">
+          <div className="max-h-[80vh] w-4/12 overflow-y-auto rounded-lg bg-bunker-800 p-6 text-white">
+            <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+              {DOMPurify.sanitize(config.authConsentContent)}
+            </ReactMarkdown>
+            <div className="mt-6 flex justify-end">
+              <Button onClick={handleConsent} colorSchema="secondary">
+                OK
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+      <Outlet />
+    </>
+  );
+};
+
 export const Route = createFileRoute("/_restrict-login-signup")({
   validateSearch: zodValidator(QueryParamsSchema),
   search: {
@@ -45,5 +103,6 @@ export const Route = createFileRoute("/_restrict-login-signup")({
     throw redirect({
       to: `/organization/${ProjectType.SecretManager}/overview` as const
     });
-  }
+  },
+  component: AuthConsentWrapper
 });