From b4486aef2c54ec814031e1c205ba85fc87535132 Mon Sep 17 00:00:00 2001
From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com>
Date: Thu, 4 Jan 2024 14:18:34 -0800
Subject: [PATCH] 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
---
 .../app/guest-login/components/VerificationForm.tsx | 10 ++++------
 apps/site/src/app/login/components/LoginForm.tsx    | 10 ++++------
 .../components/ValidatingForm/ValidatingForm.tsx    | 13 +++++++++++--
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/apps/site/src/app/guest-login/components/VerificationForm.tsx b/apps/site/src/app/guest-login/components/VerificationForm.tsx
index d9cb5674..ba5dced6 100644
--- 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
index f74b570b..b7f8a1e5 100644
--- 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
index 542feee4..b1cea545 100644
--- 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>
 	);
 }