make resource rotation account credentials write-only

frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx

@@ -11,8 +11,8 @@ import {
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 import { formatDistance } from "date-fns";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";

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

@@ -31,17 +31,25 @@ export const PostgresResourceForm = ({ resource, onSubmit }: Props) => {
 
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
-    defaultValues: resource ?? {
-      resourceType: PamResourceType.Postgres,
-      connectionDetails: {
-        host: "",
-        port: 5432,
-        database: "default",
-        sslEnabled: true,
-        sslRejectUnauthorized: true,
-        sslCertificate: undefined
-      }
-    }
+    defaultValues: resource
+      ? {
+          ...resource,
+          rotationAccountCredentials: {
+            ...resource.rotationAccountCredentials,
+            password: "******"
+          }
+        }
+      : {
+          resourceType: PamResourceType.Postgres,
+          connectionDetails: {
+            host: "",
+            port: 5432,
+            database: "default",
+            sslEnabled: true,
+            sslRejectUnauthorized: true,
+            sslCertificate: undefined
+          }
+        }
   });
 
   const {
@@ -62,7 +70,7 @@ export const PostgresResourceForm = ({ resource, onSubmit }: Props) => {
           selectedTabIndex={selectedTabIndex}
           setSelectedTabIndex={setSelectedTabIndex}
         />
-        <SqlRotateAccountFields />
+        <SqlRotateAccountFields isUpdate={isUpdate} />
         <div className="mt-6 flex items-center">
           <Button
             className="mr-4"

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlRotateAccountFields.tsx

@@ -6,11 +6,10 @@ import {
   AccordionItem,
   AccordionTrigger,
   FormControl,
-  Input,
-  SecretInput
+  Input
 } from "@app/components/v2";
 
-export const SqlRotateAccountFields = () => {
+export const SqlRotateAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
   const { control } = useFormContext();
 
   return (
@@ -49,9 +48,21 @@ export const SqlRotateAccountFields = () => {
                   isError={Boolean(error?.message)}
                   label="Password"
                 >
-                  <SecretInput
-                    containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                  <Input
                     {...field}
+                    type="password"
+                    onFocus={(e) => {
+                      if (isUpdate && field.value === "******") {
+                        field.onChange("");
+                      }
+                      e.target.type = "text";
+                    }}
+                    onBlur={(e) => {
+                      if (isUpdate && field.value === "") {
+                        field.onChange("******");
+                      }
+                      e.target.type = "password";
+                    }}
                   />
                 </FormControl>
               )}