diff --git a/client/src/components/support/CreateTicketFlow.tsx b/client/src/components/support/CreateTicketFlow.tsx index 9110c5fb..fa7e8bdf 100644 --- a/client/src/components/support/CreateTicketFlow.tsx +++ b/client/src/components/support/CreateTicketFlow.tsx @@ -4,11 +4,12 @@ import { Dropdown, Form, Icon, + Label, Message, TextArea, } from "semantic-ui-react"; import useGlobalError from "../error/ErrorHooks"; -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import axios from "axios"; import { CentralIdentityApp, SupportTicket } from "../../types"; import { Controller, get, useForm } from "react-hook-form"; @@ -56,6 +57,8 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { const [files, setFiles] = useState([]); const [turnstileToken, setTurnstileToken] = useState(""); const [challengePassed, setChallengePassed] = useState(true); + const [confirmEmail, setConfirmEmail] = useState(""); + const [startedConfirming, setStartedConfirming] = useState(false); useEffect(() => { const searchParams = new URLSearchParams(location.search); @@ -109,6 +112,7 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { }, []); const submitDisabled = useMemo(() => { + if (loading) return true; if ((!user || !user.uuid) && !challengePassed) { return true; } @@ -122,6 +126,10 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { ) { return true; } + + if (getValues("guest.email") !== confirmEmail) { + return true; + } } if ( @@ -271,29 +279,43 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { /> -
-
- -
-
- -
+
+ +
+
+ +
+
+ { + setConfirmEmail(e.target.value); + setStartedConfirming(true); + }} + required + /> + {startedConfirming && + confirmEmail !== watch("guest.email") && ( +

Emails do not match

+ )}