From cf9265c127fe9a97b34a833f9104867cab544b1b Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Tue, 13 Oct 2026 04:48:30 +0200
Subject: [PATCH] feat(auth): enable submit buttons only when form fields are
 complete

---
 app/(auth)/login/page.tsx    | 49 ++++++++++++++++++------------
 app/(auth)/register/page.tsx | 59 +++++++++++++++++++++++++++---------
 2 files changed, 73 insertions(+), 35 deletions(-)

diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 00a3491..b1b8aa2 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,6 +1,6 @@
 /**
  * @file app/(auth)/login/page.tsx
- * @description Client component providing a user login interface utilizing the auth service and ActionButton.
+ * @description Client component providing a user login interface utilizing the auth service, ActionButton, and form completion tracking.
  */
 
 "use client";
@@ -14,7 +14,7 @@ import { Loader2, UserCheck, KeyRound } from "lucide-react";
 
 /**
  * Renders the login page containing the authentication form, error handling,
- * and navigation links for user sign-in.
+ * input completion checks, and navigation links for user sign-in.
  *
  * @returns {JSX.Element} The rendered login page component.
  */
@@ -25,13 +25,24 @@ export default function LoginPage() {
     "credentials" | "guest" | null
   >(null);
 
+  // Controlled form state tracking for input completion validation
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const isFormValid = email.trim() !== "" && password.trim() !== "";
+
   /**
-   * Clears active error state when user modifies input fields.
+   * Clears active error state and updates local state values when user modifies input fields.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
    */
-  const handleInputChange = () => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (error) {
       setError(null);
     }
+    const { name, value } = e.target;
+    if (name === "email") setEmail(value);
+    if (name === "password") setPassword(value);
   };
 
   /**
@@ -39,19 +50,19 @@ export default function LoginPage() {
    * Redirects to the summary page upon success or sets an error message on failure.
    *
    * @async
-   * @param {string} email - The email address for login.
-   * @param {string} password - The account password.
+   * @param {string} emailAddress - The email address for login.
+   * @param {string} pass - The account password.
    * @param {"credentials" | "guest"} type - The authentication trigger source type.
    */
   const handleSignIn = async (
-    email: string,
-    password: string,
+    emailAddress: string,
+    pass: string,
     type: "credentials" | "guest",
   ) => {
     setError(null);
     setLoadingType(type);
 
-    const result = await loginUser(email, password);
+    const result = await loginUser(emailAddress, pass);
 
     if (result.error) {
       setError(result.error);
@@ -65,13 +76,11 @@ export default function LoginPage() {
    * Handles traditional credential-based form submissions.
    *
    * @async
-   * @param {React.SubmitEvent<HTMLFormElement>} e - The form submission event.
+   * @param {React.FormEvent<HTMLFormElement>} e - The form submission event.
    */
-  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const email = formData.get("email") as string;
-    const password = formData.get("password") as string;
+    if (!isFormValid) return;
     await handleSignIn(email, password, "credentials");
   };
 
@@ -134,11 +143,7 @@ export default function LoginPage() {
           </div>
         )}
 
-        <form
-          onSubmit={handleSubmit}
-          onChange={handleInputChange}
-          className="space-y-4"
-        >
+        <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-1.5">
             <label
               htmlFor="email"
@@ -150,7 +155,9 @@ export default function LoginPage() {
               id="email"
               name="email"
               type="email"
+              value={email}
               placeholder="name@example.com"
+              onChange={handleInputChange}
               maxLength={255}
               autoComplete="email"
               required
@@ -169,7 +176,9 @@ export default function LoginPage() {
               id="password"
               name="password"
               type="password"
+              value={password}
               placeholder="••••••••••••"
+              onChange={handleInputChange}
               maxLength={72}
               autoComplete="current-password"
               required
@@ -180,7 +189,7 @@ export default function LoginPage() {
           <ActionButton
             type="submit"
             variant="primary"
-            disabled={loadingType !== null}
+            disabled={loadingType !== null || !isFormValid}
             icon={loadingType === "credentials" ? Loader2 : KeyRound}
             className="w-full sm:w-full"
           >
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 91c61d7..803fef0 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -1,6 +1,6 @@
 /**
  * @file app/(auth)/register/page.tsx
- * @description Client component providing a user registration interface with client-side validation, autocomplete, and ActionButton integration.
+ * @description Client component providing a user registration interface with client-side validation, field completion checks, autocomplete, and ActionButton integration.
  */
 
 "use client";
@@ -15,7 +15,7 @@ import { JSX } from "react/jsx-runtime";
 
 /**
  * Renders the registration page featuring a sign-up form, client-side validation,
- * error feedback, and routing logic to the summary view upon successful account creation.
+ * input completion tracking, error feedback, and routing logic upon successful account creation.
  *
  * @returns {JSX.Element} The rendered registration page component.
  */
@@ -24,28 +24,51 @@ export default function RegisterPage(): JSX.Element {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
+  // Controlled form state tracking for input completion validation
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const isFormValid =
+    firstName.trim() !== "" &&
+    lastName.trim() !== "" &&
+    email.trim() !== "" &&
+    password.trim() !== "" &&
+    confirmPassword.trim() !== "";
+
   /**
-   * Clears active error state when user modifies input fields.
+   * Clears active error state and updates corresponding input values on user modification.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
    */
-  const handleInputChange = () => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (error) {
       setError(null);
     }
+    const { name, value } = e.target;
+    if (name === "firstName") setFirstName(value);
+    if (name === "lastName") setLastName(value);
+    if (name === "email") setEmail(value);
+    if (name === "password") setPassword(value);
+    if (name === "confirmPassword") setConfirmPassword(value);
   };
 
   /**
-   * Handles user registration form submission, validates form data via auth service,
-   * and navigates to summary page on successful registration.
+   * Handles user registration form submission, validates password equality, delegates registration
+   * to the auth service, and navigates to the summary page upon success.
    *
    * @async
-   * @function handleSubmit
-   * @param {React.SubmitEvent<HTMLFormElement>} event - The form submission event.
+   * @param {React.FormEvent<HTMLFormElement>} event - The form submission event.
    * @returns {Promise<void>} Resolves when registration handling completes.
    */
   async function handleSubmit(
-    event: React.SubmitEvent<HTMLFormElement>,
+    event: React.FormEvent<HTMLFormElement>,
   ): Promise<void> {
     event.preventDefault();
+    if (!isFormValid) return;
+
     setError(null);
 
     const formData = new FormData(event.currentTarget);
@@ -109,11 +132,7 @@ export default function RegisterPage(): JSX.Element {
           </div>
         )}
 
-        <form
-          onSubmit={handleSubmit}
-          onChange={handleInputChange}
-          className="space-y-4"
-        >
+        <form onSubmit={handleSubmit} className="space-y-4">
           <div className="grid grid-cols-2 gap-2.5">
             <div className="space-y-1">
               <label
@@ -126,7 +145,9 @@ export default function RegisterPage(): JSX.Element {
                 id="firstName"
                 name="firstName"
                 type="text"
+                value={firstName}
                 placeholder="John"
+                onChange={handleInputChange}
                 maxLength={50}
                 autoComplete="given-name"
                 required
@@ -145,7 +166,9 @@ export default function RegisterPage(): JSX.Element {
                 id="lastName"
                 name="lastName"
                 type="text"
+                value={lastName}
                 placeholder="Doe"
+                onChange={handleInputChange}
                 maxLength={50}
                 autoComplete="family-name"
                 required
@@ -165,7 +188,9 @@ export default function RegisterPage(): JSX.Element {
               id="email"
               name="email"
               type="email"
+              value={email}
               placeholder="name@example.com"
+              onChange={handleInputChange}
               maxLength={255}
               autoComplete="email"
               required
@@ -184,7 +209,9 @@ export default function RegisterPage(): JSX.Element {
               id="password"
               name="password"
               type="password"
+              value={password}
               placeholder="••••••••••••"
+              onChange={handleInputChange}
               maxLength={72}
               autoComplete="new-password"
               required
@@ -203,7 +230,9 @@ export default function RegisterPage(): JSX.Element {
               id="confirmPassword"
               name="confirmPassword"
               type="password"
+              value={confirmPassword}
               placeholder="••••••••••••"
+              onChange={handleInputChange}
               maxLength={72}
               autoComplete="new-password"
               required
@@ -214,7 +243,7 @@ export default function RegisterPage(): JSX.Element {
           <ActionButton
             type="submit"
             variant="primary"
-            disabled={loading}
+            disabled={loading || !isFormValid}
             icon={loading ? Loader2 : UserPlus}
             className="w-full sm:w-full"
           >