Prevent accidental resubmission in ValidatingForm (#186)

* 170 resubmission fix * prettier style change * moving button inside; disabled when successful * better variable naming * style, naming, and seperation of props * fixed typo
HackAtUCI · Jan 4, 2024 · b4486ae · b4486ae
1 parent e436ff2
commit b4486ae
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/apps/site/src/app/guest-login/components/VerificationForm.tsx b/apps/site/src/app/guest-login/components/VerificationForm.tsx
@@ -3,7 +3,6 @@
 import { useSearchParams } from "next/navigation";
 import clsx from "clsx";
 
-import Button from "@/lib/components/Button/Button";
 import ValidatingForm from "@/lib/components/ValidatingForm/ValidatingForm";
 import styles from "@/lib/components/ValidatingForm/ValidatingForm.module.scss";
 
@@ -19,8 +18,8 @@ function VerificationForm() {
 	}
 
 	return (
-		<ValidatingForm method="post" action={VERIFICATION_PATH}>
-			<div className="bg-white p-5 md:p-10 rounded-2xl mx-5 text-black">
+		<div className="bg-white p-5 md:p-10 rounded-2xl mx-5 text-black">
+			<ValidatingForm method="post" action={VERIFICATION_PATH}>
 				<div className="flex flex-col mb-5">
 					<input
 						type="email"
@@ -48,9 +47,8 @@ function VerificationForm() {
 						Sorry, that passphrase is invalid.
 					</p>
 				</div>
-				<Button text="Continue" />
-			</div>
-		</ValidatingForm>
+			</ValidatingForm>
+		</div>
 	);
 }
 

diff --git a/apps/site/src/app/login/components/LoginForm.tsx b/apps/site/src/app/login/components/LoginForm.tsx
@@ -1,6 +1,5 @@
 import clsx from "clsx";
 
-import Button from "@/lib/components/Button/Button";
 import ValidatingForm from "@/lib/components/ValidatingForm/ValidatingForm";
 import styles from "@/lib/components/ValidatingForm/ValidatingForm.module.scss";
 
@@ -10,8 +9,8 @@ const LOGIN_PATH = "/api/user/login";
 
 function LoginForm() {
 	return (
-		<ValidatingForm method="post" action={LOGIN_PATH}>
-			<div className="bg-white p-5 md:p-10 rounded-2xl mx-5 text-black">
+		<div className="bg-white p-5 md:p-10 rounded-2xl mx-5 text-black">
+			<ValidatingForm method="post" action={LOGIN_PATH}>
 				<div className="flex flex-col mb-5">
 					<label htmlFor="email">Email</label>
 					<input
@@ -32,9 +31,8 @@ function LoginForm() {
 						Sorry, that email address is invalid.
 					</p>
 				</div>
-				<Button text="Continue" />
-			</div>
-		</ValidatingForm>
+			</ValidatingForm>
+		</div>
 	);
 }
 

diff --git a/apps/site/src/lib/components/ValidatingForm/ValidatingForm.tsx b/apps/site/src/lib/components/ValidatingForm/ValidatingForm.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, PropsWithChildren, useState } from "react";
+import Button from "@/lib/components/Button/Button";
 
 import styles from "./ValidatingForm.module.scss";
 
@@ -11,12 +12,17 @@ interface FormProps {
 
 function ValidatingForm(props: PropsWithChildren<FormProps>) {
 	const [validated, setValidated] = useState<boolean>(false);
+	const [submitting, setSubmitting] = useState<boolean>(false);
+
+	const { children, ...rest } = props;
 
 	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
 		const form = event.currentTarget;
 		if (!form.checkValidity()) {
 			// prevent submission to display validation feedback
 			event.preventDefault();
+		} else {
+			setSubmitting(true);
 		}
 		setValidated(true);
 	};
@@ -27,8 +33,11 @@ function ValidatingForm(props: PropsWithChildren<FormProps>) {
 			noValidate // use custom validation feedback
 			className={validated ? styles.validated : styles.notYetValidated}
 			// validated={validated}
-			{...props}
-		/>
+			{...rest}
+		>
+			{children}
+			<Button text="Continue" disabled={submitting} />
+		</form>
 	);
 }