solved merge conflicts

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAuth0ClientSecretRotationGeneratedCredentials.tsx

@@ -1,8 +1,6 @@
-import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
-import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { TAuth0ClientSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/auth0-client-secret-rotation";
 
-import { ViewRotationGeneratedCredentialsDisplay } from "./shared";
+import { CredentialDisplay, ViewRotationGeneratedCredentialsDisplay } from "./shared";
 
 type Props = {
   generatedCredentialsResponse: TAuth0ClientSecretRotationGeneratedCredentialsResponse;
@@ -17,40 +15,23 @@ export const ViewAuth0ClientSecretRotationGeneratedCredentials = ({
   const inactiveCredentials = generatedCredentials[inactiveIndex];
 
   return (
-    <>
-      <ViewRotationGeneratedCredentialsDisplay
-        activeCredentials={
-          <>
-            <CredentialDisplay label="Client ID">{activeCredentials?.clientId}</CredentialDisplay>
-            <CredentialDisplay isSensitive label="Client Secret">
-              {activeCredentials?.clientSecret}
-            </CredentialDisplay>
-          </>
-        }
-        inactiveCredentials={
-          <>
-            <CredentialDisplay label="Client ID">{inactiveCredentials?.clientId}</CredentialDisplay>
-            <CredentialDisplay isSensitive label="Client Secret">
-              {inactiveCredentials?.clientSecret}
-            </CredentialDisplay>
-          </>
-        }
-      />
-      <NoticeBannerV2 title="Auth0 Retired Credentials Behavior">
-        <p className="text-sm text-mineshaft-300">
-          Due to how Auth0 client secrets are rotated, retired credentials will not be able to
-          authenticate with Auth0 during their{" "}
-          <a
-            target="_blank"
-            href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
-            rel="noopener noreferrer"
-            className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
-          >
-            inactive period
-          </a>
-          . This is a limitation of the Auth0 platform and cannot be rectified by Infisical.
-        </p>
-      </NoticeBannerV2>
-    </>
+    <ViewRotationGeneratedCredentialsDisplay
+      activeCredentials={
+        <>
+          <CredentialDisplay label="Client ID">{activeCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Client Secret">
+            {activeCredentials?.clientSecret}
+          </CredentialDisplay>
+        </>
+      }
+      inactiveCredentials={
+        <>
+          <CredentialDisplay label="Client ID">{inactiveCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Client Secret">
+            {inactiveCredentials?.clientSecret}
+          </CredentialDisplay>
+        </>
+      }
+    />
   );
 };

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewLdapPasswordRotationGeneratedCredentials.tsx

@@ -0,0 +1,41 @@
+import { TLdapPasswordRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/ldap-password-rotation";
+
+import { CredentialDisplay, ViewRotationGeneratedCredentialsDisplay } from "./shared";
+
+type Props = {
+  generatedCredentialsResponse: TLdapPasswordRotationGeneratedCredentialsResponse;
+};
+
+export const ViewLdapPasswordRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <ViewRotationGeneratedCredentialsDisplay
+      activeCredentials={
+        <>
+          <CredentialDisplay label="Distinguished Name (DN)">
+            {activeCredentials?.dn}
+          </CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {activeCredentials?.password}
+          </CredentialDisplay>
+        </>
+      }
+      inactiveCredentials={
+        <>
+          <CredentialDisplay label="Distinguished Name (DN)">
+            {inactiveCredentials?.dn}
+          </CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {inactiveCredentials?.password}
+          </CredentialDisplay>
+        </>
+      }
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -4,8 +4,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ViewAuth0ClientSecretRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAuth0ClientSecretRotationGeneratedCredentials";
+import { ViewLdapPasswordRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewLdapPasswordRotationGeneratedCredentials";
 import { Modal, ModalContent, Spinner } from "@app/components/v2";
-import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
+import {
+  IS_ROTATION_DUAL_CREDENTIALS,
+  SECRET_ROTATION_CONNECTION_MAP,
+  SECRET_ROTATION_MAP
+} from "@app/helpers/secretRotationsV2";
 import {
   SecretRotation,
   TSecretRotationV2,
@@ -68,6 +75,13 @@ const Content = ({ secretRotation }: ContentProps) => {
         />
       );
       break;
+    case SecretRotation.LdapPassword:
+      Component = (
+        <ViewLdapPasswordRotationGeneratedCredentials
+          generatedCredentialsResponse={generatedCredentialsResponse}
+        />
+      );
+      break;
     case SecretRotation.AwsIamUserSecret:
       Component = (
         <ViewAwsIamUserSecretRotationGeneratedCredentials
@@ -79,9 +93,28 @@ const Content = ({ secretRotation }: ContentProps) => {
       throw new Error("Unhandled View Generated Credential Rotation Type");
   }
 
+  const appName = APP_CONNECTION_MAP[SECRET_ROTATION_CONNECTION_MAP[type]].name;
+
   return (
     <div className="flex flex-col gap-y-4">
       {Component}
+      {!IS_ROTATION_DUAL_CREDENTIALS[type] && (
+        <NoticeBannerV2 title={`${appName} Retired Credentials Behavior`}>
+          <p className="text-sm text-mineshaft-300">
+            Due to {SECRET_ROTATION_MAP[type].name} Rotations utilizing a single credential set,
+            retired credentials will not be able to authenticate with {appName} during their{" "}
+            <a
+              target="_blank"
+              href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
+              rel="noopener noreferrer"
+              className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+            >
+              inactive period
+            </a>
+            . This is a limitation of {appName} and cannot be rectified by Infisical.
+          </p>
+        </NoticeBannerV2>
+      )}
       {nextRotationAt && (
         <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
           <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx

@@ -0,0 +1,169 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { DEFAULT_PASSWORD_REQUIREMENTS } from "@app/components/secret-rotations-v2/forms/schemas/shared";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const LdapPasswordRotationParametersFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.LdapPassword;
+    }
+  >();
+
+  return (
+    <>
+      <Controller
+        name="parameters.dn"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Distinguished Name (DN)"
+          >
+            <Input
+              value={value}
+              onChange={onChange}
+              placeholder="CN=John,OU=Users,DC=example,DC=com"
+            />
+          </FormControl>
+        )}
+      />
+      <div className="flex flex-col gap-3">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Password Requirements</span>
+        </div>
+        <div className="grid grid-cols-2 gap-3 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 py-2">
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.length"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.length}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Password Length"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="The length of the password to generate"
+              >
+                <Input
+                  type="number"
+                  min={1}
+                  max={250}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.digits"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.digits}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Digit Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="Minimum number of digits"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.lowercase"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.lowercase}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Lowercase Character Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="Minimum number of lowercase characters"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.uppercase"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.uppercase}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Uppercase Character Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="Minimum number of uppercase characters"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.symbols"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.symbols}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Symbol Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="Minimum number of symbols"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.allowedSymbols"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.allowedSymbols}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Symbols"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="Symbols to use in generated password"
+              >
+                <Input
+                  placeholder="-_.~!*"
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(e.target.value)}
+                />
+              </FormControl>
+            )}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx

@@ -5,12 +5,14 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 import { TSecretRotationV2Form } from "../schemas";
 import { Auth0ClientSecretRotationParametersFields } from "./Auth0ClientSecretRotationParametersFields";
 import { AwsIamUserSecretRotationParametersFields } from "./AwsIamUserSecretRotationParametersFields";
+import { LdapPasswordRotationParametersFields } from "./LdapPasswordRotationParametersFields";
 import { SqlCredentialsRotationParametersFields } from "./shared";
 
 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationParametersFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationParametersFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationParametersFields,
+  [SecretRotation.LdapPassword]: LdapPasswordRotationParametersFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationParametersFields
 };
 

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/LdapPasswordRotationReviewFields.tsx

@@ -0,0 +1,29 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationReviewSection } from "./shared";
+
+export const LdapPasswordRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.LdapPassword;
+    }
+  >();
+
+  const [parameters, { dn, password }] = watch(["parameters", "secretsMapping"]);
+
+  return (
+    <>
+      <SecretRotationReviewSection label="Parameters">
+        <GenericFieldLabel label="Distinguished Name (DN)">{parameters.dn}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+      <SecretRotationReviewSection label="Secrets Mapping">
+        <GenericFieldLabel label="Distinguished Name (DN)">{dn}</GenericFieldLabel>
+        <GenericFieldLabel label="Password">{password}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx

@@ -8,12 +8,14 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
 import { Auth0ClientSecretRotationReviewFields } from "./Auth0ClientSecretRotationReviewFields";
 import { AwsIamUserSecretRotationReviewFields } from "./AwsIamUserSecretRotationReviewFields";
+import { LdapPasswordRotationReviewFields } from "./LdapPasswordRotationReviewFields";
 import { SqlCredentialsRotationReviewFields } from "./shared";
 
 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationReviewFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationReviewFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationReviewFields,
+  [SecretRotation.LdapPassword]: LdapPasswordRotationReviewFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationReviewFields
 };
 

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/LdapPasswordRotationSecretsMappingFields.tsx

@@ -0,0 +1,58 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretsMappingTable } from "./shared";
+
+export const LdapPasswordRotationSecretsMappingFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.LdapPassword;
+    }
+  >();
+
+  const { rotationOption } = useSecretRotationV2Option(SecretRotation.LdapPassword);
+
+  const items = [
+    {
+      name: "DN",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.dn}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.dn"
+        />
+      )
+    },
+    {
+      name: "Password",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.password}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.password"
+        />
+      )
+    }
+  ];
+
+  return <SecretsMappingTable items={items} />;
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx

@@ -5,12 +5,14 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 import { TSecretRotationV2Form } from "../schemas";
 import { Auth0ClientSecretRotationSecretsMappingFields } from "./Auth0ClientSecretRotationSecretsMappingFields";
 import { AwsIamUserSecretRotationSecretsMappingFields } from "./AwsIamUserSecretRotationSecretsMappingFields";
+import { LdapPasswordRotationSecretsMappingFields } from "./LdapPasswordRotationSecretsMappingFields";
 import { SqlCredentialsRotationSecretsMappingFields } from "./shared";
 
 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationSecretsMappingFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationSecretsMappingFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationSecretsMappingFields,
+  [SecretRotation.LdapPassword]: LdapPasswordRotationSecretsMappingFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationSecretsMappingFields
 };
 

frontend/src/components/secret-rotations-v2/forms/schemas/index.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 
 import { Auth0ClientSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/auth0-client-secret-rotation-schema";
 import { AwsIamUserSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/aws-iam-user-secret-rotation-schema";
+import { LdapPasswordRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/ldap-password-rotation-schema";
 import { MsSqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema";
 import { PostgresCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema";
 
@@ -9,6 +10,7 @@ const SecretRotationUnionSchema = z.discriminatedUnion("type", [
   PostgresCredentialsRotationSchema,
   MsSqlCredentialsRotationSchema,
   Auth0ClientSecretRotationSchema,
+  LdapPasswordRotationSchema,
   AwsIamUserSecretRotationSchema
 ]);
 

frontend/src/components/secret-rotations-v2/forms/schemas/ldap-password-rotation-schema.ts

@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { PasswordRequirementsSchema } from "@app/components/secret-rotations-v2/forms/schemas/shared";
+import { DistinguishedNameRegex } from "@app/helpers/string";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const LdapPasswordRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.LdapPassword),
+    parameters: z.object({
+      dn: z
+        .string()
+        .trim()
+        .regex(DistinguishedNameRegex, "Invalid Distinguished Name format")
+        .min(1, "Distinguished Name (DN) required"),
+      passwordRequirements: PasswordRequirementsSchema.optional()
+    }),
+    secretsMapping: z.object({
+      dn: z.string().trim().min(1, "Distinguished Name (DN) required"),
+      password: z.string().trim().min(1, "Password required")
+    })
+  })
+  .merge(BaseSecretRotationSchema);

frontend/src/components/secret-rotations-v2/forms/schemas/shared/index.ts

@@ -1 +1,2 @@
+export * from "./password-requirements-schema";
 export * from "./sql-credentials-rotation-schema";

frontend/src/components/secret-rotations-v2/forms/schemas/shared/password-requirements-schema.ts

@@ -0,0 +1,47 @@
+import { z } from "zod";
+
+export const PasswordRequirementsSchema = z
+  .object({
+    length: z
+      .number()
+      .min(1, "Password length must be a positive number")
+      .max(250, "Password length must be less than 250"),
+    required: z.object({
+      digits: z.number().min(0, "Digit count must be non-negative"),
+      lowercase: z.number().min(0, "Lowercase count must be non-negative"),
+      uppercase: z.number().min(0, "Uppercase count must be non-negative"),
+      symbols: z.number().min(0, "Symbol count must be non-negative")
+    }),
+    allowedSymbols: z
+      .string()
+      .regex(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/, "Invalid symbols")
+      .optional()
+      .transform((value) => value || "-_.~!*")
+  })
+  .refine(
+    (data) => {
+      return Object.values(data.required).some((count) => count > 0);
+    },
+    {
+      message: "At least one character type must be required",
+      path: ["required.digits"]
+    }
+  )
+  .refine(
+    (data) => {
+      const total = Object.values(data.required).reduce((sum, count) => sum + count, 0);
+      return total <= data.length;
+    },
+    { message: "Sum of required characters cannot exceed the total length", path: ["length"] }
+  );
+
+export const DEFAULT_PASSWORD_REQUIREMENTS = {
+  length: 48,
+  required: {
+    lowercase: 1,
+    uppercase: 1,
+    digits: 1,
+    symbols: 0
+  },
+  allowedSymbols: "-_.~!*"
+};

frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx

@@ -0,0 +1,113 @@
+import { ReactNode, useEffect, useState } from "react";
+
+import { useToggle } from "@app/hooks";
+
+import { Button } from "../Button";
+import { FormControl } from "../FormControl";
+import { Input } from "../Input";
+import { Modal, ModalClose, ModalContent } from "../Modal";
+
+type Props = {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onChange?: (isOpen: boolean) => void;
+  confirmKey: string;
+  title: string;
+  subTitle?: string;
+  onConfirmed: () => Promise<void>;
+  buttonText?: string;
+  formContent?: ReactNode;
+  children?: ReactNode;
+  confirmationMessage?: ReactNode;
+};
+
+export const ConfirmActionModal = ({
+  isOpen,
+  onClose,
+  onChange,
+  confirmKey,
+  onConfirmed,
+  title,
+  subTitle = "This action is irreversible.",
+  buttonText = "Yes",
+  formContent,
+  confirmationMessage,
+  children
+}: Props): JSX.Element => {
+  const [inputData, setInputData] = useState("");
+  const [isLoading, setIsLoading] = useToggle();
+
+  useEffect(() => {
+    setInputData("");
+  }, [isOpen]);
+
+  const onDelete = async () => {
+    setIsLoading.on();
+    try {
+      await onConfirmed();
+    } finally {
+      setIsLoading.off();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(isOpenState) => {
+        setInputData("");
+        if (onChange) onChange(isOpenState);
+      }}
+    >
+      <ModalContent
+        title={title}
+        subTitle={subTitle}
+        footerContent={
+          <div className="mx-2 flex items-center">
+            <Button
+              className="mr-4"
+              isDisabled={!(confirmKey === inputData) || isLoading}
+              onClick={onDelete}
+              isLoading={isLoading}
+            >
+              {buttonText}
+            </Button>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        }
+        onClose={onClose}
+      >
+        {formContent}
+        <form
+          onSubmit={(evt) => {
+            evt.preventDefault();
+            if (confirmKey === inputData) onDelete();
+          }}
+        >
+          <FormControl
+            label={
+              <div className="break-words pb-2 text-sm">
+                {confirmationMessage || (
+                  <>
+                    Type <span className="font-bold">{confirmKey}</span> to perform this action
+                  </>
+                )}
+              </div>
+            }
+            className="mb-0"
+          >
+            <Input
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              placeholder={`Type ${confirmKey} here`}
+            />
+          </FormControl>
+          {children}
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/v2/ConfirmActionModal/index.tsx

@@ -0,0 +1 @@
+export { ConfirmActionModal } from "./ConfirmActionModal";

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -14,7 +14,7 @@ export const PageHeader = ({ title, description, children, className }: Props) =
       <div className="w-full">
         <h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
       </div>
-      <div className="flex items-center">{children}</div>
+      <div className="flex items-center gap-2">{children}</div>
     </div>
     <div className="mt-2 text-gray-400">{description}</div>
   </div>

frontend/src/components/v2/index.tsx

@@ -6,6 +6,7 @@ export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./ConfirmActionModal";
 export * from "./ContentLoader";
 export * from "./DatePicker";
 export * from "./DeleteActionModal";