show cert auth setup after resource creation and on account modal if

credentials are cert

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/SshAccountForm.tsx

@@ -16,6 +16,7 @@ import { PamResourceType, TSSHAccount } from "@app/hooks/api/pam";
 import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 import { SSHAuthMethod } from "@app/hooks/api/pam/types/ssh-resource";
 
+import { SshCaSetupSection } from "../../../components/SshCaSetupSection";
 import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
 
 type Props = {
@@ -57,7 +58,7 @@ const formSchema = genericAccountFieldsSchema.extend({
 
 type FormData = z.infer<typeof formSchema>;
 
-const SshAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
+const SshAccountFields = ({ isUpdate, resourceId }: { isUpdate: boolean; resourceId: string }) => {
   const { control, setValue } = useFormContext();
   const [showPassword, setShowPassword] = useState(false);
 
@@ -185,17 +186,14 @@ const SshAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
         />
       )}
 
-      {authMethod === SSHAuthMethod.Certificate && (
+      {authMethod === SSHAuthMethod.Certificate && <SshCaSetupSection resourceId={resourceId} />}
-        <p className="mb-0 text-xs text-mineshaft-400">
-          Certificate-based authentication will use the certificate configured on the SSH resource.
-        </p>
-      )}
     </div>
   );
 };
 
-export const SshAccountForm = ({ account, onSubmit }: Props) => {
+export const SshAccountForm = ({ account, resourceId, onSubmit }: Props) => {
   const isUpdate = Boolean(account);
+  const effectiveResourceId = resourceId || account?.resource.id || "";
 
   const getDefaultCredentials = () => {
     if (!account) return undefined;
@@ -248,7 +246,7 @@ export const SshAccountForm = ({ account, onSubmit }: Props) => {
         }}
       >
         <GenericAccountFields />
-        <SshAccountFields isUpdate={isUpdate} />
+        <SshAccountFields isUpdate={isUpdate} resourceId={effectiveResourceId} />
         <div className="mt-6 flex items-center">
           <Button
             className="mr-4"

frontend/src/pages/pam/PamResourcesPage/components/PamAddResourceModal.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Modal, ModalContent } from "@app/components/v2";
 import { PamResourceType, TPamResource } from "@app/hooks/api/pam";
 
+import { SshCaSetupModal } from "../../components/SshCaSetupModal";
 import { PamResourceForm } from "./PamResourceForm";
 import { ResourceTypeSelect } from "./ResourceTypeSelect";
 
@@ -36,17 +37,41 @@ const Content = ({ onComplete, projectId }: ContentProps) => {
 };
 
 export const PamAddResourceModal = ({ isOpen, onOpenChange, projectId, onComplete }: Props) => {
+  const [caSetupModalResourceId, setCaSetupModalResourceId] = useState<string | null>(null);
+
+  const handleCaSetupModalClose = () => {
+    setCaSetupModalResourceId(null);
+  };
+
   return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <>
-      <ModalContent className="max-w-2xl" title="Add Resource" subTitle="Select a resource to add.">
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-        <Content
+        <ModalContent
-          projectId={projectId}
+          className="max-w-2xl"
-          onComplete={(resource) => {
+          title="Add Resource"
-            if (onComplete) onComplete(resource);
+          subTitle="Select a resource to add."
-            onOpenChange(false);
+        >
-          }}
+          <Content
+            projectId={projectId}
+            onComplete={(resource) => {
+              if (onComplete) onComplete(resource);
+              onOpenChange(false);
+
+              // Show CA setup modal for SSH resources
+              if (resource.resourceType === PamResourceType.SSH) {
+                setCaSetupModalResourceId(resource.id);
+              }
+            }}
+          />
+        </ModalContent>
+      </Modal>
+      {caSetupModalResourceId && (
+        <SshCaSetupModal
+          isOpen={Boolean(caSetupModalResourceId)}
+          onOpenChange={handleCaSetupModalClose}
+          resourceId={caSetupModalResourceId}
         />
-      </ModalContent>
+      )}
-    </Modal>
+    </>
   );
 };

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/SSHResourceForm.tsx

@@ -1,17 +1,11 @@
-import { useEffect, useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import { faCopy } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ChevronDownIcon, ShieldIcon } from "lucide-react";
-import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
-import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, ModalClose } from "@app/components/v2";
-import { Button, FormControl, IconButton, Input, ModalClose } from "@app/components/v2";
 import { PamResourceType, TSSHResource } from "@app/hooks/api/pam";
-import { getAuthToken } from "@app/hooks/api/reactQuery";
 
+import { SshCaSetupSection } from "../../../components/SshCaSetupSection";
 import { GenericResourceFields, genericResourceFieldsSchema } from "./GenericResourceFields";
 
 type Props = {
@@ -32,21 +26,8 @@ const formSchema = genericResourceFieldsSchema.extend({
 type FormData = z.infer<typeof formSchema>;
 
 export const SSHResourceForm = ({ resource, onSubmit }: Props) => {
-  const { protocol, hostname, port } = window.location;
-  const portSuffix = port && port !== "80" ? `:${port}` : "";
-  const siteURL = `${protocol}//${hostname}${portSuffix}`;
-
   const isUpdate = Boolean(resource);
 
-  const [setupSshCaCommand, setSetupSshCaCommand] = useState("");
-  const [cmdOpen, setCmdOpen] = useState(false);
-
-  useEffect(() => {
-    setSetupSshCaCommand(
-      `curl -H "Authorization: Bearer ${getAuthToken()}" "${siteURL}/api/v1/pam/resources/ssh/${resource?.id}/ssh-ca-setup" | sudo bash`
-    );
-  }, [siteURL, resource]);
-
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
     defaultValues: resource ?? {
@@ -100,72 +81,7 @@ export const SSHResourceForm = ({ resource, onSubmit }: Props) => {
             />
           </div>
         </div>
-        <button
+        {isUpdate && <SshCaSetupSection resourceId={resource!.id} isOptional className="mb-4" />}
-          type="button"
-          onClick={() => setCmdOpen(!cmdOpen)}
-          className="mb-4 flex w-full cursor-pointer flex-col rounded-md border border-mineshaft-500 bg-mineshaft-700 p-3 text-sm hover:bg-mineshaft-600"
-        >
-          <div className="flex gap-2.5">
-            <ShieldIcon className="mt-0.5 size-6 shrink-0 text-info" />
-            <div className="flex w-full flex-col">
-              <div className="flex justify-between gap-2 pr-1">
-                <div className="flex flex-col text-left">
-                  <span className="text-base">Certificate-Based Authentication</span>
-                  <span className="text-sm text-mineshaft-300">
-                    Optional: Install CA certificate if you plan to use certificate authentication
-                    for user accounts
-                  </span>
-                </div>
-                <ChevronDownIcon
-                  className={twMerge(
-                    "shrink-0 text-mineshaft-400 transition-transform duration-200 ease-in-out",
-                    cmdOpen && "rotate-180"
-                  )}
-                />
-              </div>
-              <div
-                className={twMerge(
-                  "grid transition-all duration-200 ease-in-out",
-                  cmdOpen ? "mt-2 grid-rows-[1fr]" : "mt-0 grid-rows-[0fr]"
-                )}
-              >
-                <div className="overflow-hidden">
-                  <div className="flex flex-col text-left">
-                    <span className="mt-2 text-sm text-mineshaft-300">
-                      Run this command on the target host:
-                    </span>
-                    <div className="mt-1 flex items-center gap-1">
-                      <Input value={setupSshCaCommand} isDisabled />
-                      <IconButton
-                        ariaLabel="copy"
-                        variant="plain"
-                        colorSchema="secondary"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigator.clipboard.writeText(setupSshCaCommand);
-                          createNotification({
-                            text: "Command copied to clipboard",
-                            type: "info"
-                          });
-                        }}
-                        className="size-8 shrink-0"
-                      >
-                        <FontAwesomeIcon icon={faCopy} className="text-mineshaft-200" />
-                      </IconButton>
-                    </div>
-                    <div className="mt-4 flex flex-col gap-1 text-xs text-mineshaft-300">
-                      <span>This command will:</span>
-                      <span>• Install the resource CA certificate</span>
-                      <span>• Configure SSH to trust certificate-based authentication</span>
-                      <span>• Enable seamless access for authorized users</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </button>
         <div className="mt-6 flex items-center">
           <Button
             className="mr-4"

frontend/src/pages/pam/components/SshCaSetupModal.tsx

@@ -0,0 +1,28 @@
+import { Button, Modal, ModalContent } from "@app/components/v2";
+
+import { SshCaSetupSection } from "./SshCaSetupSection";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  resourceId: string;
+};
+
+export const SshCaSetupModal = ({ isOpen, onOpenChange, resourceId }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        className="max-w-2xl"
+        title="Certificate Authentication Setup"
+        subTitle="If you plan to use certificate-based authentication, configure the target host to trust the CA certificate."
+      >
+        <SshCaSetupSection resourceId={resourceId} isOptional />
+        <div className="mt-6 flex justify-end">
+          <Button colorSchema="secondary" onClick={() => onOpenChange(false)}>
+            Done
+          </Button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/pam/components/SshCaSetupSection.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { faCopy } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ChevronDownIcon, ShieldIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { IconButton, Input } from "@app/components/v2";
+import { getAuthToken } from "@app/hooks/api/reactQuery";
+
+type Props = {
+  resourceId: string;
+  isOptional?: boolean;
+  className?: string;
+};
+
+export const SshCaSetupSection = ({ resourceId, isOptional = false, className }: Props) => {
+  const { protocol, hostname, port } = window.location;
+  const portSuffix = port && port !== "80" ? `:${port}` : "";
+  const siteURL = `${protocol}//${hostname}${portSuffix}`;
+
+  const [cmdOpen, setCmdOpen] = useState(false);
+
+  const setupSshCaCommand = `curl -H "Authorization: Bearer ${getAuthToken()}" "${siteURL}/api/v1/pam/resources/ssh/${resourceId}/ssh-ca-setup" | sudo bash`;
+
+  return (
+    <button
+      type="button"
+      onClick={() => setCmdOpen(!cmdOpen)}
+      className={twMerge(
+        "flex w-full cursor-pointer flex-col rounded-md border border-mineshaft-500 bg-mineshaft-700 p-3 text-sm hover:bg-mineshaft-600",
+        className
+      )}
+    >
+      <div className="flex gap-2.5">
+        <ShieldIcon className="mt-0.5 size-6 shrink-0 text-info" />
+        <div className="flex w-full flex-col">
+          <div className="flex justify-between gap-2 pr-1">
+            <div className="flex flex-col text-left">
+              <span className="text-base">Certificate-Based Authentication</span>
+              <span className="text-sm text-mineshaft-300">
+                {isOptional
+                  ? "Optional: Install CA certificate if you plan to use certificate authentication for user accounts"
+                  : "Required: Install CA certificate on the target host for certificate authentication"}
+              </span>
+            </div>
+            <ChevronDownIcon
+              className={twMerge(
+                "shrink-0 text-mineshaft-400 transition-transform duration-200 ease-in-out",
+                cmdOpen && "rotate-180"
+              )}
+            />
+          </div>
+          <div
+            className={twMerge(
+              "grid transition-all duration-200 ease-in-out",
+              cmdOpen ? "mt-2 grid-rows-[1fr]" : "mt-0 grid-rows-[0fr]"
+            )}
+          >
+            <div className="overflow-hidden">
+              <div className="flex flex-col text-left">
+                <span className="mt-2 text-sm text-mineshaft-300">
+                  Run this command on the target host:
+                </span>
+                <div className="mt-1 flex items-center gap-1">
+                  <Input value={setupSshCaCommand} isDisabled />
+                  <IconButton
+                    ariaLabel="copy"
+                    variant="plain"
+                    colorSchema="secondary"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigator.clipboard.writeText(setupSshCaCommand);
+                      createNotification({
+                        text: "Command copied to clipboard",
+                        type: "info"
+                      });
+                    }}
+                    className="size-8 shrink-0"
+                  >
+                    <FontAwesomeIcon icon={faCopy} className="text-mineshaft-200" />
+                  </IconButton>
+                </div>
+                <div className="mt-4 flex flex-col gap-1 text-xs text-mineshaft-300">
+                  <span>This command will:</span>
+                  <span>• Install the resource CA certificate</span>
+                  <span>• Configure SSH to trust certificate-based authentication</span>
+                  <span>• Enable seamless access for authorized users</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+};