infisical/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx

import { useMemo, useState } from "react";
import { faCopy } from "@fortawesome/free-regular-svg-icons";
import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import ms from "ms";

import { createNotification } from "@app/components/notifications";
import { FormLabel, IconButton, Input, Modal, ModalContent } from "@app/components/v2";
import { PamResourceType, TPamAccount } from "@app/hooks/api/pam";

type Props = {
  account?: TPamAccount;
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
};

export const PamAccessAccountModal = ({ isOpen, onOpenChange, account }: Props) => {
  const [duration, setDuration] = useState("4h");

  const isDurationValid = useMemo(() => duration && ms(duration || "1s") > 0, [duration]);

  const command = useMemo(
    () =>
      account && account.resource.resourceType === PamResourceType.Postgres
        ? `infisical pam db access-account ${account.id} --duration ${duration}`
        : "",
    [account, duration]
  );

  if (!account) return null;

  return (
    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
      <ModalContent
        className="max-w-2xl pb-2"
        title="Access Account"
        subTitle={`Access ${account.name} using a CLI command.`}
      >
        <FormLabel
          label="Duration"
          tooltipText="The maximum duration of your session. Ex: 1h, 3w, 30d"
        />
        <Input
          value={duration}
          onChange={(e) => setDuration(e.target.value)}
          placeholder="permanent"
          isError={!isDurationValid}
        />
        <FormLabel label="CLI Command" className="mt-4" />
        <div className="flex gap-2">
          <Input value={command} isDisabled className="opacity-50" />
          <IconButton
            ariaLabel="copy"
            variant="outline_bg"
            colorSchema="secondary"
            onClick={() => {
              navigator.clipboard.writeText(command);

              createNotification({
                text: "Command copied to clipboard",
                type: "info"
              });

              onOpenChange(false);
            }}
            className="w-10"
          >
            <FontAwesomeIcon icon={faCopy} />
          </IconButton>
        </div>
        <a
          href="https://infisical.com/docs/cli/overview"
          target="_blank"
          className="mt-2 flex h-4 w-fit items-center gap-2 border-b border-mineshaft-400 text-sm text-mineshaft-400 transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
          rel="noreferrer"
        >
          <span>Install the Infisical CLI</span>
          <FontAwesomeIcon icon={faUpRightFromSquare} className="size-3" />
        </a>
      </ModalContent>
    </Modal>
  );
};