diff --git a/app/ui/AccountForm.tsx b/app/ui/AccountForm.tsx index 03c17d3..b17d4e8 100644 --- a/app/ui/AccountForm.tsx +++ b/app/ui/AccountForm.tsx @@ -1,6 +1,6 @@ "use client"; -import { FC } from "react"; +import { FC, useState } from "react"; import { UserProfile } from "../lib/db-types"; import { updateUserProfile } from "../lib/actions/userProfileActions"; import { useFormState, useFormStatus } from "react-dom"; @@ -23,6 +23,21 @@ const FormFields: FC = ({ profile, errors, message }) => { const t = useTranslations("account-form"); const locale = useLocale(); + // Track current form values for real-time validation + const [formValues, setFormValues] = useState({ + firstName: profile?.firstName ?? "", + lastName: profile?.lastName ?? "", + address: profile?.address ?? "", + iban: profile?.iban ?? "", + }); + + const handleInputChange = (field: keyof typeof formValues, value: string) => { + setFormValues(prev => ({ ...prev, [field]: value })); + }; + + // Check if any required field is missing + const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !formValues.iban; + return ( <>
@@ -42,6 +57,7 @@ const FormFields: FC = ({ profile, errors, message }) => { placeholder={t("first-name-placeholder")} className="input input-bordered w-full" defaultValue={profile?.firstName ?? ""} + onChange={(e) => handleInputChange("firstName", e.target.value)} disabled={pending} />
@@ -65,6 +81,7 @@ const FormFields: FC = ({ profile, errors, message }) => { placeholder={t("last-name-placeholder")} className="input input-bordered w-full" defaultValue={profile?.lastName ?? ""} + onChange={(e) => handleInputChange("lastName", e.target.value)} disabled={pending} />
@@ -87,6 +104,7 @@ const FormFields: FC = ({ profile, errors, message }) => { className="textarea textarea-bordered w-full" placeholder={t("address-placeholder")} defaultValue={profile?.address ?? ""} + onChange={(e) => handleInputChange("address", e.target.value)} disabled={pending} >
@@ -110,6 +128,7 @@ const FormFields: FC = ({ profile, errors, message }) => { placeholder={t("iban-placeholder")} className="input input-bordered w-full" defaultValue={profile?.iban ?? ""} + onChange={(e) => handleInputChange("iban", e.target.value)} disabled={pending} />
@@ -130,6 +149,15 @@ const FormFields: FC = ({ profile, errors, message }) => { )}
+ {hasMissingData && ( +
+ + + + {t("warning-missing-data")} +
+ )} +