PKI revamp EST improvements and fixes

2026-10-22 02:28:29 +00:00 · 2025-10-18 03:16:36 -03:00
parent ebac93e500
commit 0df3181308
29 changed files with 1994 additions and 839 deletions
@@ -0,0 +1,101 @@
+import { Control, Controller } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
+
+import {
+  FrontendSanType,
+  getSanPlaceholder,
+  getSanTypeLabels,
+  SubjectAltName
+} from "./certificateUtils";
+
+type SubjectAltNamesFieldProps = {
+  control: Control<any>;
+  allowedSanTypes: FrontendSanType[];
+  error?: string;
+};
+
+export const SubjectAltNamesField = ({
+  control,
+  allowedSanTypes,
+  error
+}: SubjectAltNamesFieldProps) => {
+  const sanTypeLabels = getSanTypeLabels();
+
+  return (
+    <Controller
+      control={control}
+      name="subjectAltNames"
+      render={({ field: { onChange, value } }) => (
+        <FormControl
+          label="Subject Alternative Names (SANs)"
+          errorText={error}
+          isError={Boolean(error)}
+        >
+          <div className="space-y-2">
+            {value.map((san: SubjectAltName, index: number) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={`subject-alt-name-${index}`} className="flex items-center gap-2">
+                <Select
+                  value={san.type}
+                  onValueChange={(newType) => {
+                    const newValue = [...value];
+                    newValue[index] = {
+                      ...san,
+                      type: newType as FrontendSanType
+                    };
+                    onChange(newValue);
+                  }}
+                  className="w-24"
+                >
+                  {allowedSanTypes.map((sanType) => (
+                    <SelectItem key={sanType} value={sanType}>
+                      {sanTypeLabels[sanType]}
+                    </SelectItem>
+                  ))}
+                </Select>
+                <Input
+                  value={san.value}
+                  onChange={(e) => {
+                    const newValue = [...value];
+                    newValue[index] = { ...san, value: e.target.value };
+                    onChange(newValue);
+                  }}
+                  placeholder={getSanPlaceholder(san.type)}
+                  className="flex-1"
+                />
+                <IconButton
+                  ariaLabel="Remove SAN"
+                  variant="plain"
+                  size="sm"
+                  onClick={() => {
+                    const newValue = value.filter((_: any, i: number) => i !== index);
+                    onChange(newValue);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            ))}
+            <Button
+              type="button"
+              variant="outline_bg"
+              size="xs"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => {
+                const defaultType =
+                  allowedSanTypes.length > 0 ? allowedSanTypes[0] : FrontendSanType.DNS;
+                onChange([...value, { type: defaultType, value: "" }]);
+              }}
+              className="w-full"
+            >
+              Add SAN
+            </Button>
+          </div>
+        </FormControl>
+      )}
+    />
+  );
+};