Merge branch 'main' into feat/point-in-time-revamp

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -32,7 +32,7 @@ const formSchema = z.object({
   environments: z
     .object({
       name: z.string().trim().min(1),
-      slug: slugSchema({ min: 1, max: 32 })
+      slug: slugSchema({ min: 1, max: 64 })
     })
     .array()
     .nullish()

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx

@@ -21,7 +21,7 @@ import {
 import { slugSchema } from "@app/lib/schemas";
 
 const formSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
+  name: slugSchema({ min: 1, max: 64, field: "Name" }),
   description: z.string().max(500).optional()
 });
 

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

@@ -18,9 +18,7 @@ export const ViewLdapPasswordRotationGeneratedCredentials = ({
     <ViewRotationGeneratedCredentialsDisplay
       activeCredentials={
         <>
-          <CredentialDisplay label="Distinguished Name (DN)">
-            {activeCredentials?.dn}
-          </CredentialDisplay>
+          <CredentialDisplay label="DN/UPN">{activeCredentials?.dn}</CredentialDisplay>
           <CredentialDisplay isSensitive label="Password">
             {activeCredentials?.password}
           </CredentialDisplay>
@@ -28,9 +26,7 @@ export const ViewLdapPasswordRotationGeneratedCredentials = ({
       }
       inactiveCredentials={
         <>
-          <CredentialDisplay label="Distinguished Name (DN)">
-            {inactiveCredentials?.dn}
-          </CredentialDisplay>
+          <CredentialDisplay label="DN/UPN">{inactiveCredentials?.dn}</CredentialDisplay>
           <CredentialDisplay isSensitive label="Password">
             {inactiveCredentials?.password}
           </CredentialDisplay>

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

@@ -48,7 +48,8 @@ const FORM_TABS: { name: string; key: string; fields: (keyof TSecretRotationV2Fo
       "rotateAtUtc"
     ]
   },
-  { name: "Parameters", key: "parameters", fields: ["parameters"] },
+  // @ts-expect-error temporary parameters aren't present on all forms
+  { name: "Parameters", key: "parameters", fields: ["parameters", "temporaryParameters"] },
   { name: "Mappings", key: "secretsMapping", fields: ["secretsMapping"] },
   { name: "Details", key: "details", fields: ["name", "description"] },
   { name: "Review", key: "review", fields: [] }
@@ -75,7 +76,7 @@ export const SecretRotationV2Form = ({
   const { rotationOption } = useSecretRotationV2Option(type);
 
   const formMethods = useForm<TSecretRotationV2Form>({
-    resolver: zodResolver(SecretRotationV2FormSchema),
+    resolver: zodResolver(SecretRotationV2FormSchema(Boolean(secretRotation))),
     defaultValues: secretRotation
       ? {
           ...secretRotation,

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

@@ -2,40 +2,135 @@ 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 { FormControl, Input, Select, SelectItem } from "@app/components/v2";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import { LdapPasswordRotationMethod } from "@app/hooks/api/secretRotationsV2/types/ldap-password-rotation";
 
 export const LdapPasswordRotationParametersFields = () => {
-  const { control } = useFormContext<
+  const { control, watch, setValue } = useFormContext<
     TSecretRotationV2Form & {
       type: SecretRotation.LdapPassword;
     }
   >();
 
+  const [id, rotationMethod] = watch(["id", "parameters.rotationMethod"]);
+  const isUpdate = Boolean(id);
+
   return (
     <>
       <Controller
-        name="parameters.dn"
+        name="parameters.rotationMethod"
         control={control}
+        defaultValue={LdapPasswordRotationMethod.ConnectionPrincipal}
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl
-            isError={Boolean(error)}
+            tooltipText={
+              <>
+                <span>Determines how the rotation will be performed:</span>
+                <ul className="ml-4 mt-2 flex list-disc flex-col gap-2">
+                  <li>
+                    <span className="font-medium">Connection Principal</span> - The Connection
+                    principal will rotate the target principal&#39;s password.
+                  </li>
+                  <li>
+                    <span className="font-medium">Target Principal</span> - The target principal
+                    will rotate their own password.
+                  </li>
+                </ul>
+              </>
+            }
+            tooltipClassName="max-w-sm"
             errorText={error?.message}
-            label="Distinguished Name (DN)"
+            isError={Boolean(error?.message)}
+            label="Rotation Method"
+            helperText={
+              // eslint-disable-next-line no-nested-ternary
+              isUpdate
+                ? "Cannot be updated."
+                : value === LdapPasswordRotationMethod.ConnectionPrincipal
+                  ? "The connection principal will rotate the target principal's password"
+                  : "The target principal will rotate their own password"
+            }
           >
-            <Input
+            <Select
+              isDisabled={isUpdate}
               value={value}
-              onChange={onChange}
-              placeholder="CN=John,OU=Users,DC=example,DC=com"
-            />
+              onValueChange={(val) => {
+                setValue(
+                  "temporaryParameters",
+                  val === LdapPasswordRotationMethod.TargetPrincipal
+                    ? {
+                        password: ""
+                      }
+                    : undefined
+                );
+                onChange(val);
+              }}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              dropdownContainerClassName="max-w-none"
+            >
+              {Object.values(LdapPasswordRotationMethod).map((method) => {
+                return (
+                  <SelectItem value={method} className="capitalize" key={method}>
+                    {method.replace("-", " ")}
+                  </SelectItem>
+                );
+              })}
+            </Select>
           </FormControl>
         )}
       />
+      <div className="flex gap-3">
+        <Controller
+          name="parameters.dn"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              className="flex-1"
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Target Principal's DN/UPN"
+              tooltipText="The DN/UPN of the principal that you want to perform password rotation on."
+              tooltipClassName="max-w-sm"
+              helperText={isUpdate ? "Cannot be updated." : undefined}
+            >
+              <Input
+                isDisabled={isUpdate}
+                value={value}
+                onChange={onChange}
+                placeholder="CN=John,OU=Users,DC=example,DC=com"
+              />
+            </FormControl>
+          )}
+        />
+        {rotationMethod === LdapPasswordRotationMethod.TargetPrincipal && !isUpdate && (
+          <Controller
+            name="temporaryParameters.password"
+            control={control}
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                className="flex-1"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                label="Target Principal's Password"
+              >
+                <Input
+                  value={value}
+                  onChange={onChange}
+                  type="password"
+                  placeholder="****************"
+                />
+              </FormControl>
+            )}
+          />
+        )}
+      </div>
       <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">
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
           <Controller
             control={control}
             name="parameters.passwordRequirements.length"
@@ -45,7 +140,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 label="Password Length"
                 isError={Boolean(error)}
                 errorText={error?.message}
-                helperText="The length of the password to generate"
+                tooltipText="The length of the password to generate"
               >
                 <Input
                   type="number"
@@ -67,7 +162,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 label="Digit Count"
                 isError={Boolean(error)}
                 errorText={error?.message}
-                helperText="Minimum number of digits"
+                tooltipText="Minimum number of digits"
               >
                 <Input
                   type="number"
@@ -88,7 +183,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 label="Lowercase Character Count"
                 isError={Boolean(error)}
                 errorText={error?.message}
-                helperText="Minimum number of lowercase characters"
+                tooltipText="Minimum number of lowercase characters"
               >
                 <Input
                   type="number"
@@ -109,7 +204,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 label="Uppercase Character Count"
                 isError={Boolean(error)}
                 errorText={error?.message}
-                helperText="Minimum number of uppercase characters"
+                tooltipText="Minimum number of uppercase characters"
               >
                 <Input
                   type="number"
@@ -130,7 +225,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 label="Symbol Count"
                 isError={Boolean(error)}
                 errorText={error?.message}
-                helperText="Minimum number of symbols"
+                tooltipText="Minimum number of symbols"
               >
                 <Input
                   type="number"
@@ -151,7 +246,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 label="Allowed Symbols"
                 isError={Boolean(error)}
                 errorText={error?.message}
-                helperText="Symbols to use in generated password"
+                tooltipText="Symbols to use in generated password"
               >
                 <Input
                   placeholder="-_.~!*"

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

@@ -15,13 +15,35 @@ export const LdapPasswordRotationReviewFields = () => {
 
   const [parameters, { dn, password }] = watch(["parameters", "secretsMapping"]);
 
+  const { passwordRequirements } = parameters;
+
   return (
     <>
       <SecretRotationReviewSection label="Parameters">
-        <GenericFieldLabel label="Distinguished Name (DN)">{parameters.dn}</GenericFieldLabel>
+        <GenericFieldLabel label="DN/UPN">{parameters.dn}</GenericFieldLabel>
       </SecretRotationReviewSection>
+      {passwordRequirements && (
+        <SecretRotationReviewSection label="Password Requirements">
+          <GenericFieldLabel label="Length">{passwordRequirements.length}</GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Digits">
+            {passwordRequirements.required.digits}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Lowercase Characters">
+            {passwordRequirements.required.lowercase}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Uppercase Characters">
+            {passwordRequirements.required.uppercase}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Symbols">
+            {passwordRequirements.required.symbols}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Allowed Symbols">
+            {passwordRequirements.allowedSymbols}
+          </GenericFieldLabel>
+        </SecretRotationReviewSection>
+      )}
       <SecretRotationReviewSection label="Secrets Mapping">
-        <GenericFieldLabel label="Distinguished Name (DN)">{dn}</GenericFieldLabel>
+        <GenericFieldLabel label="DN/UPN">{dn}</GenericFieldLabel>
         <GenericFieldLabel label="Password">{password}</GenericFieldLabel>
       </SecretRotationReviewSection>
     </>

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

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 
 type Props = {
-  label: "Parameters" | "Secrets Mapping";
+  label: "Parameters" | "Secrets Mapping" | "Password Requirements";
   children: ReactNode;
 };
 

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

@@ -17,7 +17,7 @@ export const LdapPasswordRotationSecretsMappingFields = () => {
 
   const items = [
     {
-      name: "DN",
+      name: "DN/UPN",
       input: (
         <Controller
           render={({ field: { value, onChange }, fieldState: { error } }) => (

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

@@ -6,16 +6,36 @@ import { AzureClientSecretRotationSchema } from "@app/components/secret-rotation
 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";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import { LdapPasswordRotationMethod } from "@app/hooks/api/secretRotationsV2/types/ldap-password-rotation";
 
-const SecretRotationUnionSchema = z.discriminatedUnion("type", [
-  Auth0ClientSecretRotationSchema,
-  AzureClientSecretRotationSchema,
-  PostgresCredentialsRotationSchema,
-  MsSqlCredentialsRotationSchema,
-  LdapPasswordRotationSchema,
-  AwsIamUserSecretRotationSchema
-]);
+export const SecretRotationV2FormSchema = (isUpdate: boolean) =>
+  z
+    .intersection(
+      z.discriminatedUnion("type", [
+        Auth0ClientSecretRotationSchema,
+        AzureClientSecretRotationSchema,
+        PostgresCredentialsRotationSchema,
+        MsSqlCredentialsRotationSchema,
+        LdapPasswordRotationSchema,
+        AwsIamUserSecretRotationSchema
+      ]),
+      z.object({ id: z.string().optional() })
+    )
+    .superRefine((val, ctx) => {
+      if (val.type !== SecretRotation.LdapPassword || isUpdate) return;
 
-export const SecretRotationV2FormSchema = SecretRotationUnionSchema;
+      // this has to go on union or breaks discrimination
+      if (
+        val.parameters.rotationMethod === LdapPasswordRotationMethod.TargetPrincipal &&
+        !val.temporaryParameters?.password
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Password required",
+          path: ["temporaryParameters", "password"]
+        });
+      }
+    });
 
-export type TSecretRotationV2Form = z.infer<typeof SecretRotationV2FormSchema>;
+export type TSecretRotationV2Form = z.infer<ReturnType<typeof SecretRotationV2FormSchema>>;

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

@@ -2,8 +2,9 @@ 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 { DistinguishedNameRegex, UserPrincipalNameRegex } from "@app/helpers/string";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import { LdapPasswordRotationMethod } from "@app/hooks/api/secretRotationsV2/types/ldap-password-rotation";
 
 export const LdapPasswordRotationSchema = z
   .object({
@@ -12,13 +13,24 @@ export const LdapPasswordRotationSchema = z
       dn: z
         .string()
         .trim()
-        .regex(DistinguishedNameRegex, "Invalid Distinguished Name format")
-        .min(1, "Distinguished Name (DN) required"),
-      passwordRequirements: PasswordRequirementsSchema.optional()
+        .min(1, "DN/UPN required")
+        .refine(
+          (value) => DistinguishedNameRegex.test(value) || UserPrincipalNameRegex.test(value),
+          {
+            message: "Invalid DN/UPN format"
+          }
+        ),
+      passwordRequirements: PasswordRequirementsSchema.optional(),
+      rotationMethod: z.nativeEnum(LdapPasswordRotationMethod).optional()
     }),
     secretsMapping: z.object({
-      dn: z.string().trim().min(1, "Distinguished Name (DN) required"),
+      dn: z.string().trim().min(1, "DN/UPN required"),
       password: z.string().trim().min(1, "Password required")
-    })
+    }),
+    temporaryParameters: z
+      .object({
+        password: z.string().min(1, "Password required")
+      })
+      .optional()
   })
   .merge(BaseSecretRotationSchema);

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

@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+export type TPasswordRequirements = z.infer<typeof PasswordRequirementsSchema>;
+
 export const PasswordRequirementsSchema = z
   .object({
     length: z

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -2,16 +2,23 @@ import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Spinner, Tooltip } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
+import { usePopUp } from "@app/hooks";
 import { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
 
+import { UpgradePlanModal } from "../license/UpgradePlanModal";
+
 type Props = {
   onSelect: (destination: SecretSync) => void;
 };
 
 export const SecretSyncSelect = ({ onSelect }: Props) => {
+  const { subscription } = useSubscription();
   const { isPending, data: secretSyncOptions } = useSecretSyncOptions();
 
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -23,14 +30,17 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
 
   return (
     <div className="grid grid-cols-4 gap-2">
-      {secretSyncOptions?.map(({ destination }) => {
+      {secretSyncOptions?.map(({ destination, enterprise }) => {
         const { image, name } = SECRET_SYNC_MAP[destination];
         return (
           <button
             type="button"
-            key={destination}
-            onClick={() => onSelect(destination)}
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            onClick={() =>
+              enterprise && !subscription.enterpriseSecretSyncs
+                ? handlePopUpOpen("upgradePlan")
+                : onSelect(destination)
+            }
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -45,6 +55,11 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
           </button>
         );
       })}
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use every Secret Sync if you switch to Infisical's Enterprise plan."
+      />
       <Tooltip
         side="bottom"
         className="max-w-sm py-4"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/1PasswordSyncFields.tsx

@@ -0,0 +1,74 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import {
+  TOnePassVault,
+  useOnePassConnectionListVaults
+} from "@app/hooks/api/appConnections/1password";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const OnePassSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.OnePass }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+
+  const { data: vaults, isLoading: isVaultsLoading } = useOnePassConnectionListVaults(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.vaultId", "");
+        }}
+      />
+
+      <Controller
+        name="destinationConfig.vaultId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Vault"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure the vault exists in the connection's OnePass instance URL."
+              >
+                <div>
+                  <span>Don&#39;t see the vault you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isVaultsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={vaults?.find((v) => v.id === value) ?? null}
+              onChange={(option) => onChange((option as SingleValue<TOnePassVault>)?.id ?? null)}
+              options={vaults}
+              placeholder="Select a vault..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -3,6 +3,7 @@ import { useFormContext } from "react-hook-form";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 import { TSecretSyncForm } from "../schemas";
+import { OnePassSyncFields } from "./1PasswordSyncFields";
 import { AwsParameterStoreSyncFields } from "./AwsParameterStoreSyncFields";
 import { AwsSecretsManagerSyncFields } from "./AwsSecretsManagerSyncFields";
 import { AzureAppConfigurationSyncFields } from "./AzureAppConfigurationSyncFields";
@@ -55,6 +56,8 @@ export const SecretSyncDestinationFields = () => {
       return <TeamCitySyncFields />;
     case SecretSync.OCIVault:
       return <OCIVaultSyncFields />;
+    case SecretSync.OnePass:
+      return <OnePassSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -49,6 +49,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Windmill:
     case SecretSync.HCVault:
     case SecretSync.TeamCity:
+    case SecretSync.OnePass:
     case SecretSync.OCIVault:
       AdditionalSyncOptionsFieldsComponent = null;
       break;

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OnePassSyncReviewFields.tsx

@@ -0,0 +1,12 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const OnePassSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.OnePass }>();
+  const vaultId = watch("destinationConfig.vaultId");
+
+  return <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>;
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -24,6 +24,7 @@ import { GitHubSyncReviewFields } from "./GitHubSyncReviewFields";
 import { HCVaultSyncReviewFields } from "./HCVaultSyncReviewFields";
 import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
 import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
+import { OnePassSyncReviewFields } from "./OnePassSyncReviewFields";
 import { TeamCitySyncReviewFields } from "./TeamCitySyncReviewFields";
 import { TerraformCloudSyncReviewFields } from "./TerraformCloudSyncReviewFields";
 import { VercelSyncReviewFields } from "./VercelSyncReviewFields";
@@ -96,6 +97,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.OCIVault:
       DestinationFieldsComponent = <OCIVaultSyncReviewFields />;
       break;
+    case SecretSync.OnePass:
+      DestinationFieldsComponent = <OnePassSyncReviewFields />;
+      break;
     default:
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/schemas/1password-sync-destination-schema.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const OnePassSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.OnePass),
+    destinationConfig: z.object({
+      vaultId: z.string().trim().min(1, "Vault ID required")
+    })
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+import { OnePassSyncDestinationSchema } from "./1password-sync-destination-schema";
 import { AwsParameterStoreSyncDestinationSchema } from "./aws-parameter-store-sync-destination-schema";
 import { AwsSecretsManagerSyncDestinationSchema } from "./aws-secrets-manager-sync-destination-schema";
 import { AzureAppConfigurationSyncDestinationSchema } from "./azure-app-configuration-sync-destination-schema";
@@ -31,7 +32,8 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   WindmillSyncDestinationSchema,
   HCVaultSyncDestinationSchema,
   TeamCitySyncDestinationSchema,
-  OCIVaultSyncDestinationSchema
+  OCIVaultSyncDestinationSchema,
+  OnePassSyncDestinationSchema
 ]);
 
 export const SecretSyncFormSchema = SecretSyncUnionSchema;

frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx

@@ -51,6 +51,7 @@ type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
   isVisible?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
+  canEditButNotView?: boolean;
   secretPath?: string;
   environment?: string;
   containerClassName?: string;
@@ -70,6 +71,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       containerClassName,
       secretPath: propSecretPath,
       environment: propEnvironment,
+      canEditButNotView,
       ...props
     },
     ref
@@ -273,6 +275,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         <Popover.Trigger asChild>
           <SecretInput
             {...props}
+            canEditButNotView={canEditButNotView}
             ref={handleRef}
             onKeyDown={handleKeyDown}
             value={value}

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -3,6 +3,7 @@ import { forwardRef, TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { useToggle } from "@app/hooks";
+import { HIDDEN_SECRET_VALUE } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem";
 
 const REGEX = /(\${([a-zA-Z0-9-_.]+)})/g;
 const replaceContentWithDot = (str: string) => {
@@ -51,6 +52,7 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   containerClassName?: string;
+  canEditButNotView?: boolean;
 };
 
 const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
@@ -66,6 +68,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       isDisabled,
       isReadOnly,
       onFocus,
+      canEditButNotView,
       ...props
     },
     ref
@@ -93,7 +96,15 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             onFocus={(evt) => {
               onFocus?.(evt);
               setIsSecretFocused.on();
-              evt.currentTarget.select();
+              if (canEditButNotView && value === HIDDEN_SECRET_VALUE) {
+                evt.currentTarget.select();
+              }
+            }}
+            onMouseDown={(e) => {
+              if (canEditButNotView && value === HIDDEN_SECRET_VALUE) {
+                e.preventDefault();
+                e.currentTarget.select();
+              }
             }}
             disabled={isDisabled}
             spellCheck={false}