improvements: refactor org security settings tab to sso page and update doc images

2026-10-22 02:28:29 +00:00 · 2025-05-12 17:18:40 -07:00
parent 07df6803a5
commit d17d40ebd9
62 changed files with 255 additions and 53 deletions
@@ -0,0 +1,117 @@
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { FormControl, Select, SelectItem, Switch } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+import { MfaMethod } from "@app/hooks/api/auth/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+export const OrgGenericAuthSection = () => {
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
+  const { mutateAsync } = useUpdateOrg();
+
+  const handleEnforceMfaToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.enforceMfa) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        enforceMfa: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enforced" : "un-enforced"} MFA`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  const handleUpdateSelectedMfa = async (selectedMfaMethod: MfaMethod) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.enforceMfa) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        selectedMfaMethod
+      });
+
+      createNotification({
+        text: "Successfully updated selected MFA method",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <div className="py-4">
+        <div className="mb-2 flex justify-between">
+          <h3 className="text-md text-mineshaft-100">Enforce Multi-factor Authentication</h3>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Switch
+                id="enforce-org-mfa"
+                onCheckedChange={(value) => handleEnforceMfaToggle(value)}
+                isChecked={currentOrg?.enforceMfa ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Enforce members to authenticate with MFA in order to access the organization
+        </p>
+        {currentOrg?.enforceMfa && (
+          <FormControl label="Selected 2FA method" className="mt-3">
+            <Select
+              className="min-w-[20rem] border border-mineshaft-500"
+              onValueChange={handleUpdateSelectedMfa}
+              defaultValue={currentOrg.selectedMfaMethod ?? MfaMethod.EMAIL}
+            >
+              <SelectItem value={MfaMethod.EMAIL} key="mfa-method-email">
+                Email
+              </SelectItem>
+              <SelectItem value={MfaMethod.TOTP} key="mfa-method-totp">
+                Mobile Authenticator
+              </SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      </div>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can enforce user MFA if you switch to Infisical's Pro plan."
+      />
+    </div>
+  );
+};
@@ -0,0 +1,35 @@
+import { Link } from "@tanstack/react-router";
+
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
+
+import { OrgGenericAuthSection } from "./OrgGenericAuthSection";
+import { OrgUserAccessTokenLimitSection } from "./OrgUserAccessTokenLimitSection";
+
+export const OrgSecurityTab = withPermission(
+  () => {
+    return (
+      <>
+        <NoticeBannerV2
+          className="mx-auto mb-4"
+          titleClassName="text-base"
+          title="Single Sign-On (SSO) Settings"
+        >
+          <p className="mt-1 text-mineshaft-300">
+            SSO Settings have been relocated:{" "}
+            <Link
+              className="text-mineshaft-200 underline underline-offset-2"
+              to="/organization/sso"
+            >
+              Click here to view SSO Settings
+            </Link>
+          </p>
+        </NoticeBannerV2>
+        <OrgGenericAuthSection />
+        <OrgUserAccessTokenLimitSection />
+      </>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Sso }
+);
@@ -0,0 +1,170 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+const formSchema = z.object({
+  expirationValue: z.number().min(1, "Value must be at least 1"),
+  expirationUnit: z.enum(["m", "h", "d", "w"], {
+    invalid_type_error: "Please select a valid time unit"
+  })
+});
+
+type TForm = z.infer<typeof formSchema>;
+
+// Function to parse duration string like "30d" into value and unit
+const parseDuration = (duration: string): { value: number; unit: string } => {
+  const match = duration.match(/^(\d+)([mhdw])$/);
+  if (match) {
+    return {
+      value: parseInt(match[1], 10),
+      unit: match[2]
+    };
+  }
+  // Default to 30 days if invalid format
+  return { value: 30, unit: "d" };
+};
+
+// Function to format value and unit back to duration string
+const formatDuration = (value: number, unit: string): string => {
+  return `${value}${unit}`;
+};
+
+export const OrgUserAccessTokenLimitSection = () => {
+  const { mutateAsync: updateUserTokenExpiration } = useUpdateOrg();
+  const { currentOrg } = useOrganization();
+
+  // Parse the current duration or use default
+  const currentDuration = parseDuration(currentOrg?.userTokenExpiration || "30d");
+
+  const {
+    control,
+    formState: { isSubmitting, isDirty },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      expirationValue: currentDuration.value,
+      expirationUnit: currentDuration.unit as "m" | "h" | "d" | "w"
+    }
+  });
+
+  if (!currentOrg) return null;
+
+  const handleUserTokenExpirationSubmit = async (formData: TForm) => {
+    try {
+      const userTokenExpiration = formatDuration(formData.expirationValue, formData.expirationUnit);
+
+      await updateUserTokenExpiration({
+        userTokenExpiration,
+        orgId: currentOrg.id
+      });
+
+      createNotification({
+        text: "Successfully updated user token expiration",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed updating user token expiration",
+        type: "error"
+      });
+    }
+  };
+
+  // Units for the dropdown with readable labels
+  const timeUnits = [
+    { value: "m", label: "Minutes" },
+    { value: "h", label: "Hours" },
+    { value: "d", label: "Days" },
+    { value: "w", label: "Weeks" }
+  ];
+
+  return (
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex w-full items-center justify-between">
+        <p className="text-xl font-semibold">Session Length</p>
+      </div>
+      <p className="mb-4 mt-2 text-sm text-gray-400">
+        Specify the duration of each login session for users in this organization.
+      </p>
+      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+        {(isAllowed) => (
+          <form onSubmit={handleSubmit(handleUserTokenExpirationSubmit)} autoComplete="off">
+            <div className="flex max-w-md gap-4">
+              <div className="flex-1">
+                <Controller
+                  control={control}
+                  name="expirationValue"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      label="Expiration value"
+                    >
+                      <Input
+                        {...field}
+                        type="number"
+                        min={1}
+                        step={1}
+                        value={field.value}
+                        onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
+                        disabled={!isAllowed}
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex-1">
+                <Controller
+                  control={control}
+                  name="expirationUnit"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      label="Time unit"
+                    >
+                      <Select
+                        value={field.value}
+                        className="pr-2"
+                        onValueChange={field.onChange}
+                        placeholder="Select time unit"
+                        isDisabled={!isAllowed}
+                      >
+                        {timeUnits.map(({ value, label }) => (
+                          <SelectItem
+                            key={value}
+                            value={value}
+                            className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
+                          >
+                            <div className="ml-3 font-medium">{label}</div>
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isLoading={isSubmitting}
+              disabled={!isDirty}
+              className="mt-4"
+              isDisabled={!isAllowed}
+            >
+              Save
+            </Button>
+          </form>
+        )}
+      </OrgPermissionCan>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from "./OrgSecurityTab";