diff --git a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx index 485024b73..40645a07e 100644 --- a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx +++ b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx @@ -1,5 +1,7 @@ import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; @@ -7,11 +9,13 @@ import { createNotification } from "@app/components/notifications"; import { Button, FormControl, + FormLabel, Input, Modal, ModalContent, Select, - SelectItem + SelectItem, + Tooltip } from "@app/components/v2"; import { useWorkspace } from "@app/context"; import { @@ -191,7 +195,27 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => { defaultValue="" render={({ field: { onChange, ...field }, fieldState: { error } }) => ( + + When a template is selected, the details provided are validated + against the template policies. + + } + > + + + } + /> + + } errorText={error?.message} isError={Boolean(error)} className="mt-4" diff --git a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx index 91b103123..3666627e5 100644 --- a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx +++ b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx @@ -1,5 +1,7 @@ import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; +import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; @@ -7,11 +9,13 @@ import { createNotification } from "@app/components/notifications"; import { Button, FormControl, + FormLabel, Input, Modal, ModalContent, Select, - SelectItem + SelectItem, + Tooltip } from "@app/components/v2"; import { useWorkspace } from "@app/context"; import { @@ -241,7 +245,27 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) => name="commonName" render={({ field, fieldState: { error } }) => ( + + This field accepts limited regular expressions: spaces, *, ., @, -, \ + (for escaping), and alphanumeric characters only + + } + > + + + } + /> + + } isError={Boolean(error)} errorText={error?.message} isRequired @@ -256,7 +280,27 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) => name="subjectAlternativeName" render={({ field, fieldState: { error } }) => ( + + This field accepts limited regular expressions: spaces, *, ., @, -, \ + (for escaping), and alphanumeric characters only + + } + > + + + } + /> + + } isError={Boolean(error)} errorText={error?.message} isRequired