diff --git a/src/Web/lan-frontend/app/register/page.tsx b/src/Web/lan-frontend/app/register/page.tsx index acea8f7..612bfe3 100644 --- a/src/Web/lan-frontend/app/register/page.tsx +++ b/src/Web/lan-frontend/app/register/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; @@ -48,7 +48,8 @@ export default function RegisterPage() { grade: "", phoneNumber: "", email: "", - guardianName: "", + guardianFirstName: "", + guardianLastName: "", guardianPhoneNumber: "", guardianEmail: "", isVisitor: false, @@ -62,6 +63,13 @@ export default function RegisterPage() { const [message, setMessage] = useState({ type: "", text: "" }); const [fieldErrors, setFieldErrors] = useState>({}); const [showBecomeMemberCta, setShowBecomeMemberCta] = useState(false); + const successRef = useRef(null); + + useEffect(() => { + if (message.type === "success" && successRef.current) { + successRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); + } + }, [message.type]); useEffect(() => { fetch("/api/Content") @@ -121,7 +129,10 @@ export default function RegisterPage() { const trimmedSurName = formData.surName.trim(); const trimmedGrade = formData.grade.trim(); const trimmedPhoneNumber = formData.phoneNumber.trim(); - const trimmedGuardianName = formData.guardianName.trim(); + const trimmedGuardianFirstName = formData.guardianFirstName.trim(); + const trimmedGuardianLastName = formData.guardianLastName.trim(); + const trimmedGuardianName = + `${trimmedGuardianFirstName} ${trimmedGuardianLastName}`.trim(); const trimmedGuardianPhone = formData.guardianPhoneNumber.trim(); const trimmedGuardianEmail = formData.guardianEmail.trim(); const normalizedPhoneNumber = normalizeMobileNumber(trimmedPhoneNumber); @@ -146,8 +157,12 @@ export default function RegisterPage() { if (!trimmedSurName) nextFieldErrors.surName = "Efternamn är obligatoriskt."; if (!trimmedGrade) nextFieldErrors.grade = "Årskurs är obligatorisk."; - if (!trimmedGuardianName) - nextFieldErrors.guardianName = "Vårdnadshavares namn är obligatoriskt."; + if (!trimmedGuardianFirstName) + nextFieldErrors.guardianFirstName = + "Vårdnadshavares förnamn är obligatoriskt."; + if (!trimmedGuardianLastName) + nextFieldErrors.guardianLastName = + "Vårdnadshavares efternamn är obligatoriskt."; if (!trimmedGuardianPhone) nextFieldErrors.guardianPhoneNumber = "Vårdnadshavares Mobilnummer är obligatoriskt."; @@ -170,7 +185,8 @@ export default function RegisterPage() { } if (!formData.hasApprovedGdpr) { - nextFieldErrors.hasApprovedGdpr = "Du måste godkänna GDPR för att anmäla dig."; + nextFieldErrors.hasApprovedGdpr = + "Du måste godkänna GDPR för att anmäla dig."; } if (Object.keys(nextFieldErrors).length > 0) { @@ -217,7 +233,8 @@ export default function RegisterPage() { grade: trimmedGrade, phoneNumber: normalizedPhoneNumber, email: formData.email.trim(), - guardianName: trimmedGuardianName, + guardianName: + `${trimmedGuardianFirstName} ${trimmedGuardianLastName}`.trim(), guardianPhoneNumber: normalizedGuardianPhone, guardianEmail: trimmedGuardianEmail, friends: formData.friends.trim(), @@ -296,9 +313,11 @@ export default function RegisterPage() { {message.type === "success" && ( -
+
-
{showBecomeMemberCta ? "⏳" : "🎉"}
+
+ {showBecomeMemberCta ? "⏳" : "🎉"} +

{showBecomeMemberCta ? "Nästan Klart!" : "Klart!"}

@@ -352,8 +371,8 @@ export default function RegisterPage() {

{fieldErrors.ssn}

)}

- Används endast för att kolla om du redan är medlem eller inte. - Sparas ej. + Används endast för att kontrollera om du redan är medlem eller + inte. Sparas ej.

@@ -491,23 +510,46 @@ export default function RegisterPage() {
- {fieldErrors.guardianName && ( + {fieldErrors.guardianFirstName && (

- {fieldErrors.guardianName} + {fieldErrors.guardianFirstName} +

+ )} +
+ +
+ + + {fieldErrors.guardianLastName && ( +

+ {fieldErrors.guardianLastName}

)}