diff --git a/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx b/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx index 3aa91f17f6..54c6bfcee2 100644 --- a/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx +++ b/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx @@ -44,6 +44,7 @@ function VoiceCloneRequestPage(props: Props) { const [optionalExtraComments, setOptionalExtraComments] = useState(""); // Form submission state + const [formErrorMessage, setFormErrorMessage] = useState(""); const [formWasSubmitted, setFormWasSubmitted] = useState(false); // Previous form submission state @@ -151,19 +152,24 @@ function VoiceCloneRequestPage(props: Props) { const handleSubmit = async (ev: React.FormEvent) => { ev.preventDefault(); + if (!emailAddress.trim() || !emailAddress.includes("@")) { + setFormErrorMessage("Email address is invalid"); + return false; + } + let request : CreateVoiceCloneApplicationRequest = { idempotency_token: uuidv4(), // Contact - email_address: emailAddress, - discord_username: discord, + email_address: emailAddress.trim(), + discord_username: discord.trim(), // Visibility is_for_private_use: isForPrivateUse, is_for_public_use: isForPublicUse, // Use - is_for_studio: false, + is_for_studio: false, // TODO is_for_twitch_tts: isForTwitchTts, is_for_api_use: isForApiUse, is_for_music: isForMusic, @@ -180,25 +186,26 @@ function VoiceCloneRequestPage(props: Props) { }; if (!!optionalNotesOnUse) { - request.optional_notes_on_use = optionalNotesOnUse; + request.optional_notes_on_use = optionalNotesOnUse.trim(); } if (!!notesOnSubject) { - request.optional_notes_on_subject = notesOnSubject; + request.optional_notes_on_subject = notesOnSubject.trim(); } if (!!optionalQuestions) { - request.optional_questions = optionalQuestions; + request.optional_questions = optionalQuestions.trim(); } if (!!optionalExtraComments) { - request.optional_extra_comments = optionalExtraComments; + request.optional_extra_comments = optionalExtraComments.trim(); } const response = await CreateVoiceCloneApplication(request) if (CreateVoiceCloneApplicationIsSuccess(response)) { setFormWasSubmitted(true); + setFormErrorMessage(""); } else if (CreateVoiceCloneApplicationIsError(response)) { // TODO } @@ -270,7 +277,19 @@ function VoiceCloneRequestPage(props: Props) { (Especially if you have another voice for us!) -
+ + ); + } + + let errorMessage = <>; + if (!!formErrorMessage) { + errorMessage = ( + <> +
+
+ Error with form: {formErrorMessage} +
+
); } @@ -537,6 +556,8 @@ function VoiceCloneRequestPage(props: Props) {
+ {errorMessage} +