Add first and last namne to guardian

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<Record<string, string>>({});
   const [showBecomeMemberCta, setShowBecomeMemberCta] = useState(false);
+  const successRef = useRef<HTMLDivElement>(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)
+    if (!trimmedGuardianFirstName)
-      nextFieldErrors.guardianName = "Vårdnadshavares namn är obligatoriskt.";
+      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() {
         </div>
 
         {message.type === "success" && (
-          <div className="mb-8 space-y-6">
+          <div ref={successRef} className="mb-8 space-y-6">
             <div className="p-6 rounded-lg text-center bg-green-50 text-green-800 border border-green-200">
-              <div className="text-4xl mb-4">{showBecomeMemberCta ? "⏳" : "🎉"}</div>
+              <div className="text-4xl mb-4">
+                {showBecomeMemberCta ? "⏳" : "🎉"}
+              </div>
               <h2 className="text-xl font-bold mb-2">
                 {showBecomeMemberCta ? "Nästan Klart!" : "Klart!"}
               </h2>
@@ -352,8 +371,8 @@ export default function RegisterPage() {
                 <p className="mt-1 text-xs text-red-600">{fieldErrors.ssn}</p>
               )}
               <p className="mt-1 text-xs text-gray-500">
-                Används endast för att kolla om du redan är medlem eller inte.
+                Används endast för att kontrollera om du redan är medlem eller
-                Sparas ej.
+                inte. Sparas ej.
               </p>
             </div>
 
@@ -491,23 +510,46 @@ export default function RegisterPage() {
 
             <div>
               <label
-                htmlFor="guardianName"
+                htmlFor="guardianFirstName"
                 className="block text-sm font-medium text-gray-700"
               >
-                Vårdnadshavares Namn *
+                Vårdnadshavares Förnamn *
               </label>
               <input
                 type="text"
-                name="guardianName"
+                name="guardianFirstName"
-                id="guardianName"
+                id="guardianFirstName"
                 required
-                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.guardianName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.guardianFirstName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
-                value={formData.guardianName}
+                value={formData.guardianFirstName}
                 onChange={handleInputChange}
               />
-              {fieldErrors.guardianName && (
+              {fieldErrors.guardianFirstName && (
                 <p className="mt-1 text-xs text-red-600">
-                  {fieldErrors.guardianName}
+                  {fieldErrors.guardianFirstName}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="guardianLastName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Vårdnadshavares Efternamn *
+              </label>
+              <input
+                type="text"
+                name="guardianLastName"
+                id="guardianLastName"
+                required
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.guardianLastName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
+                value={formData.guardianLastName}
+                onChange={handleInputChange}
+              />
+              {fieldErrors.guardianLastName && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.guardianLastName}
                 </p>
               )}
             </div>