översättning

src/Auth/AuthAPI/Program.cs

@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Mvc;
 using AuthAPI;
 
 var builder = WebApplication.CreateBuilder(args);
+builder.Logging.SetMinimumLevel(LogLevel.Error);
 builder.Services.AddHttpClient();
 builder.Services.Configure<AuthSettings>(
     builder.Configuration.GetSection("EnvironmentVariables"));
@@ -18,7 +19,8 @@ app.MapPost("/validate", async (
     [FromBody] Request validationRequest,
     HttpClient httpClient,
     MemberValidationService memberService,
-    IOptions<AuthSettings> settings) =>
+    IOptions<AuthSettings> settings,
+    ILogger<Program> logger) =>
 {
     var request = memberService.GetRequestWithApiKey(validationRequest);
     if (request.IsFailure)
@@ -29,10 +31,12 @@ app.MapPost("/validate", async (
         request.Success);
 
     if (!response.IsSuccessStatusCode)
+    {
+        logger.LogError("Sverok validation returned non-success status code: {StatusCode}", (int)response.StatusCode);
         return Results.StatusCode((int)response.StatusCode);
+    }
 
     var content = await response.Content.ReadAsStringAsync();
-    Console.WriteLine($"[DEBUG] Sverok response: {content}");
     return content.Contains("\"member_found\":true") ? Results.Ok() : Results.NotFound();
 })
 .WithName("ValidateMember");

src/Registration/Registration.API/Configuration/VbytesRelayOptions.cs

@@ -3,9 +3,9 @@ namespace Registration.API.Configuration;
 public class VbytesRelayOptions
 {
     public string BaseUrl { get; set; } = string.Empty;
-    public string ParticipantRegisterPath { get; set; } = "/api/participant";
+    public string ParticipantRegisterPath { get; set; } = string.Empty;
     public string ApiKeyHeaderName { get; set; } = "X-Api-Key";
     public string ApiKey { get; set; } = string.Empty;
     public string ClientCertificatePfxPath { get; set; } = string.Empty;
-    public string VolunteerRegisterPath { get; set; } = "/api/volunteer";
+    public string VolunteerRegisterPath { get; set; } = string.Empty;
 }

src/Registration/Registration.API/Controllers/ParticipantController.cs

@@ -1,5 +1,7 @@
 using Microsoft.AspNetCore.Mvc;
+using Registration.API.RequestModels;
 using Registration.API.Services;
+using Registration.API.Validation;
 using Registration.Domain.Models;
 
 namespace Registration.API.Controllers;
@@ -11,8 +13,33 @@ public class ParticipantController(IVbytesParticipantRelayService relayService)
     private readonly IVbytesParticipantRelayService _relayService = relayService;
 
     [HttpPost("register")]
-    public async Task<IActionResult> RegisterForLan([FromBody] Participant participant, CancellationToken cancellationToken)
+    public async Task<IActionResult> RegisterForLan([FromBody] ParticipantRegistrationRequest request, CancellationToken cancellationToken)
     {
+        var normalizedGuardianPhone = InputNormalization.NormalizeSwedishMobile(request.GuardianPhoneNumber);
+
+        string? normalizedParticipantPhone = null;
+        if (!string.IsNullOrWhiteSpace(request.PhoneNumber))
+        {
+            normalizedParticipantPhone = InputNormalization.NormalizeSwedishMobile(request.PhoneNumber);
+        }
+
+        var participant = new Participant
+        {
+            IsMember = request.IsMember!.Value,
+            FirstName = request.FirstName.Trim(),
+            SurName = request.SurName.Trim(),
+            Grade = request.Grade.Trim(),
+            PhoneNumber = normalizedParticipantPhone,
+            Email = request.Email?.Trim(),
+            GuardianName = request.GuardianName.Trim(),
+            GuardianPhoneNumber = normalizedGuardianPhone,
+            GuardianEmail = request.GuardianEmail.Trim(),
+            IsVisitor = request.IsVisitor!.Value,
+            HasApprovedGdpr = request.HasApprovedGdpr!.Value,
+            Friends = request.Friends?.Trim(),
+            SpecialDiet = request.SpecialDiet?.Trim(),
+        };
+
         var result = await _relayService.RegisterParticipantAsync(participant, cancellationToken);
 
         if (result.StatusCode == 200 && !result.Message.Contains("401"))

src/Registration/Registration.API/Controllers/RegistrationController.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Registration.API.Services;
+using Registration.API.Validation;
 using Registration.Infra.Repositories;
 
 namespace Registration.API.Controllers
@@ -14,14 +15,24 @@ namespace Registration.API.Controllers
         [HttpGet("register/{ssn}")]
         public async Task<IActionResult> ValidateSsn(string ssn, CancellationToken cancellationToken)
         {
-            var isMember = await _authService.IsMemberAsync(ssn, cancellationToken);
+            if (!TryNormalizeSsn(ssn, out var normalizedSsn, out var errorResult))
+            {
+                return errorResult;
+            }
+
+            var isMember = await _authService.IsMemberAsync(normalizedSsn, cancellationToken);
             return isMember ? Ok() : NotFound();
         }
 
         [HttpPost("register/{ssn}")]
         public async Task<IActionResult> RegisterMember(string ssn)
         {
-            var added = await _memberRepository.AddRegistration(ssn);
+            if (!TryNormalizeSsn(ssn, out var normalizedSsn, out var errorResult))
+            {
+                return errorResult;
+            }
+
+            var added = await _memberRepository.AddRegistration(normalizedSsn);
 
             return added ? Ok() : Conflict();
         }
@@ -29,7 +40,12 @@ namespace Registration.API.Controllers
         [HttpGet("registered/{ssn}")]
         public async Task<IActionResult> IsMemberRegistered(string ssn)
         {
-            var isRegistered = await _memberRepository.GetIsRegistered(ssn);
+            if (!TryNormalizeSsn(ssn, out var normalizedSsn, out var errorResult))
+            {
+                return errorResult;
+            }
+
+            var isRegistered = await _memberRepository.GetIsRegistered(normalizedSsn);
             return isRegistered ? Conflict() : Ok();
         }
 
@@ -39,5 +55,25 @@ namespace Registration.API.Controllers
             await _memberRepository.ClearRegistrations();
             return Ok(new { Message = "All registrations cleared." });
         }
+
+        private bool TryNormalizeSsn(string ssn, out string normalizedSsn, out IActionResult errorResult)
+        {
+            normalizedSsn = InputNormalization.NormalizeSsn(ssn);
+            if (InputNormalization.IsValidSsn(normalizedSsn))
+            {
+                errorResult = Ok();
+                return true;
+            }
+
+            errorResult = BadRequest(new ValidationProblemDetails(new Dictionary<string, string[]>
+            {
+                ["ssn"] = ["SSN must contain 10 or 12 digits."]
+            })
+            {
+                Title = "One or more validation errors occurred.",
+                Status = StatusCodes.Status400BadRequest
+            });
+            return false;
+        }
     }
 }

src/Registration/Registration.API/Controllers/VolunteerController.cs

@@ -1,5 +1,7 @@
 using Microsoft.AspNetCore.Mvc;
+using Registration.API.RequestModels;
 using Registration.API.Services;
+using Registration.API.Validation;
 using Registration.Domain.Models;
 
 namespace Registration.API.Controllers;
@@ -11,8 +13,35 @@ public class VolunteerController(IVbytesVolunteerRelayService relayService) : Co
     private readonly IVbytesVolunteerRelayService _relayService = relayService;
 
     [HttpPost("register")]
-    public async Task<IActionResult> RegisterVolunteer([FromBody] Volunteer volunteer, CancellationToken cancellationToken)
+    public async Task<IActionResult> RegisterVolunteer([FromBody] VolunteerRegistrationRequest request, CancellationToken cancellationToken)
     {
+        var normalizedPhone = InputNormalization.NormalizeSwedishMobile(request.PhoneNumber);
+
+        var trimmedAreas = request.AreasOfInterest
+            .Select(area => area.Name.Trim())
+            .Where(name => !string.IsNullOrWhiteSpace(name))
+            .ToList();
+
+        if (trimmedAreas.Count == 0)
+        {
+            ModelState.AddModelError(nameof(request.AreasOfInterest), "At least one valid area of interest is required.");
+        }
+
+        if (!ModelState.IsValid)
+        {
+            return ValidationProblem(ModelState);
+        }
+
+        var volunteer = new Volunteer
+        {
+            FirstName = request.FirstName.Trim(),
+            SurName = request.SurName.Trim(),
+            PhoneNumber = normalizedPhone,
+            Email = request.Email.Trim(),
+            HasApprovedGdpr = request.HasApprovedGdpr!.Value,
+            AreasOfInterest = trimmedAreas.Select(name => new AreasOfInterest { Name = name }).ToList()
+        };
+
         var result = await _relayService.RegisterVolunteerAsync(volunteer, cancellationToken);
 
         if (result.StatusCode == 200 && !result.Message.Contains("401"))

src/Registration/Registration.API/Program.cs

@@ -4,6 +4,7 @@ using Registration.API.Configuration;
 using Registration.API.Services;
 
 var builder = WebApplication.CreateBuilder(args);
+builder.Logging.SetMinimumLevel(LogLevel.Error);
 
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();

src/Registration/Registration.API/RequestModels/AreaOfInterestRequest.cs

@@ -0,0 +1,9 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Registration.API.RequestModels;
+
+public class AreaOfInterestRequest
+{
+    [Required]
+    public string Name { get; set; } = string.Empty;
+}

src/Registration/Registration.API/RequestModels/ParticipantRegistrationRequest.cs

@@ -0,0 +1,43 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Registration.API.RequestModels;
+
+public class ParticipantRegistrationRequest
+{
+    [Required]
+    public bool? IsMember { get; set; }
+
+    [Required]
+    public string FirstName { get; set; } = string.Empty;
+
+    [Required]
+    public string SurName { get; set; } = string.Empty;
+
+    [Required]
+    public string Grade { get; set; } = string.Empty;
+
+    public string? PhoneNumber { get; set; }
+
+    [EmailAddress]
+    public string? Email { get; set; }
+
+    [Required]
+    public string GuardianName { get; set; } = string.Empty;
+
+    [Required]
+    public string GuardianPhoneNumber { get; set; } = string.Empty;
+
+    [Required]
+    [EmailAddress]
+    public string GuardianEmail { get; set; } = string.Empty;
+
+    [Required]
+    public bool? IsVisitor { get; set; }
+
+    [Required]
+    public bool? HasApprovedGdpr { get; set; }
+
+    public string? Friends { get; set; }
+
+    public string? SpecialDiet { get; set; }
+}

src/Registration/Registration.API/RequestModels/VolunteerRegistrationRequest.cs

@@ -0,0 +1,26 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Registration.API.RequestModels;
+
+public class VolunteerRegistrationRequest
+{
+    [Required]
+    public string FirstName { get; set; } = string.Empty;
+
+    [Required]
+    public string SurName { get; set; } = string.Empty;
+
+    [Required]
+    public string PhoneNumber { get; set; } = string.Empty;
+
+    [Required]
+    [EmailAddress]
+    public string Email { get; set; } = string.Empty;
+
+    [Required]
+    public bool? HasApprovedGdpr { get; set; }
+
+    [Required]
+    [MinLength(1)]
+    public List<AreaOfInterestRequest> AreasOfInterest { get; set; } = [];
+}

src/Registration/Registration.API/Services/VbytesParticipantRelayService.cs

@@ -9,7 +9,7 @@ public class VbytesParticipantRelayService(
     HttpClient httpClient,
     IOptions<VbytesRelayOptions> options,
     ILogger<VbytesParticipantRelayService> logger)
-    : VbytesRelayServiceBase(httpClient, options), IVbytesParticipantRelayService
+    : VbytesRelayServiceBase(httpClient, options, logger), IVbytesParticipantRelayService
 {
     public const string HttpClientName = "VbytesRelay";
 
@@ -20,24 +20,22 @@ public class VbytesParticipantRelayService(
         var configError = ValidateConfiguration();
         if (configError is not null)
         {
-            _logger.LogWarning("Relay configuration invalid: {Message}", configError.Message);
+            _logger.LogError("Relay configuration invalid: {Message}", configError.Message);
 
             return configError;
         }
 
         var payload = Map(participant);
-        _logger.LogInformation("Relaying participant to {Path}. Payload: {@Payload}", Options.ParticipantRegisterPath, payload);
 
         try
         {
             var result = await SendAsync(Options.ParticipantRegisterPath, payload, cancellationToken);
-            _logger.LogInformation("Relay response: {StatusCode} - {Message}", result.StatusCode, result.Message);
 
             return result;
         }
         catch (TaskCanceledException)
         {
-            _logger.LogWarning("Relay timed out calling {Path}", Options.ParticipantRegisterPath);
+            _logger.LogError("Relay timed out calling {Path}", Options.ParticipantRegisterPath);
 
             return new VbytesRelayResult(false, StatusCodes.Status504GatewayTimeout, "Upstream timeout.");
         }

src/Registration/Registration.API/Services/VbytesRelayServiceBase.cs

@@ -1,4 +1,3 @@
-using System.Text.Json;
 using Microsoft.Extensions.Options;
 using Registration.API.Configuration;
 
@@ -6,9 +5,11 @@ namespace Registration.API.Services;
 
 public abstract class VbytesRelayServiceBase(
     HttpClient httpClient,
-    IOptions<VbytesRelayOptions> options)
+    IOptions<VbytesRelayOptions> options,
+    ILogger logger)
 {
     private readonly HttpClient _httpClient = httpClient;
+    private readonly ILogger _logger = logger;
     protected readonly VbytesRelayOptions Options = options.Value;
 
     protected async Task<VbytesRelayResult> SendAsync(string path, object payload, CancellationToken cancellationToken)
@@ -22,16 +23,16 @@ public abstract class VbytesRelayServiceBase(
 
         using var response = await _httpClient.SendAsync(request, cancellationToken);
         var body = await response.Content.ReadAsStringAsync(cancellationToken);
+        var safeBody = body.Length > 600 ? body[..600] : body;
 
         if (response.IsSuccessStatusCode)
         {
-            Console.WriteLine($"[DEBUG] Relay success body: {body}");
             return new VbytesRelayResult(true, StatusCodes.Status200OK, body);
         }
 
         var statusCode = (int)response.StatusCode;
-        Console.WriteLine($"[DEBUG] Relay error body: {body}");
+        _logger.LogError("Outbound relay response error: {StatusCode}. Body: {Body}", statusCode, safeBody);
-        var message = body.Length > 600 ? body[..600] : body;
+        var message = safeBody;
         return new VbytesRelayResult(false, statusCode, string.IsNullOrWhiteSpace(message) ? "Upstream request failed." : message);
     }
 
@@ -60,17 +61,6 @@ public abstract class VbytesRelayServiceBase(
         return path.StartsWith('/') ? path : $"/{path}";
     }
 
-    private static async Task<string> ReadSafeErrorMessage(HttpResponseMessage response, CancellationToken cancellationToken)
-    {
-        var body = await response.Content.ReadAsStringAsync(cancellationToken);
-        if (string.IsNullOrWhiteSpace(body))
-        {
-            return "Upstream request failed.";
-        }
-
-        return body.Length > 600 ? body[..600] : body;
-    }
-
     protected static bool IsConfigured(string value)
     {
         return !string.IsNullOrWhiteSpace(value) && !value.StartsWith("__SET_", StringComparison.Ordinal);

src/Registration/Registration.API/Services/VbytesVolunteerRelayService.cs

@@ -9,7 +9,7 @@ public class VbytesVolunteerRelayService(
     HttpClient httpClient,
     IOptions<VbytesRelayOptions> options,
     ILogger<VbytesVolunteerRelayService> logger)
-    : VbytesRelayServiceBase(httpClient, options), IVbytesVolunteerRelayService
+    : VbytesRelayServiceBase(httpClient, options, logger), IVbytesVolunteerRelayService
 {
     private readonly ILogger<VbytesVolunteerRelayService> _logger = logger;
 

src/Registration/Registration.API/Validation/InputNormalization.cs

@@ -0,0 +1,31 @@
+using System.Text.RegularExpressions;
+
+namespace Registration.API.Validation;
+
+public static partial class InputNormalization
+{
+    public static string NormalizeSsn(string value)
+    {
+        var raw = value ?? string.Empty;
+        return NonDigitsRegex().Replace(raw, string.Empty);
+    }
+
+    public static bool IsValidSsn(string value)
+    {
+        return value.Length is 10 or 12;
+    }
+
+    public static string NormalizeSwedishMobile(string value)
+    {
+        var digitsOnly = NonDigitsRegex().Replace(value ?? string.Empty, string.Empty);
+
+        if (digitsOnly.StartsWith("0046")) return $"0{digitsOnly[4..]}";
+        if (digitsOnly.StartsWith("46")) return $"0{digitsOnly[2..]}";
+        if (digitsOnly.StartsWith('7')) return $"0{digitsOnly}";
+
+        return digitsOnly;
+    }
+
+    [GeneratedRegex("\\D")]
+    private static partial Regex NonDigitsRegex();
+}

src/Web/lan-frontend/app/layout.tsx

@@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Vbytes LAN Registration",
+  title: "Vbytes LAN-anmälan",
-  description: "Register for the upcoming Vbytes LAN event.",
+  description: "Anmäl dig till kommande LAN-evenemang hos Vbytes.",
 };
 
 export default function RootLayout({
@@ -24,7 +24,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="sv">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

src/Web/lan-frontend/app/page.tsx

@@ -40,7 +40,7 @@ export default function LandingPage() {
   return (
     <div className="min-h-screen bg-white text-gray-900 font-sans">
       {/* Hero Section */}
-      <header className="relative h-[70vh] flex items-center justify-center bg-black overflow-hidden">
+      <header className="relative h-[52vh] flex items-center justify-center bg-black overflow-hidden">
         <div className="absolute inset-0 opacity-50">
           <Image
             src="https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&q=80&w=2070"
@@ -60,15 +60,34 @@ export default function LandingPage() {
         </div>
       </header>
 
+      <div className="max-w-4xl mx-auto px-6 pt-6 flex justify-center">
+        <Image
+          src="/vBytes_Logotyp.png"
+          alt="vBytes"
+          width={320}
+          height={128}
+          className="h-auto w-40"
+          priority
+        />
+      </div>
+
       {/* Info Section */}
-      <main className="max-w-4xl mx-auto py-16 px-6 space-y-20">
+      <main className="max-w-4xl mx-auto py-12 px-6 space-y-20">
-        {(content.eventDate || content.eventTime || content.locationName || content.locationAddress || content.additionalInfo) && (
+        {(content.eventDate ||
+          content.eventTime ||
+          content.locationName ||
+          content.locationAddress ||
+          content.additionalInfo) && (
           <section className="space-y-6">
-            <h2 className="text-3xl font-bold border-b-2 border-blue-500 pb-2 inline-block">Information</h2>
+            <h2 className="text-3xl font-bold border-b-2 border-blue-500 pb-2 inline-block">
+              Information
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
               {(content.eventDate || content.eventTime) && (
                 <div className="space-y-2">
-                  <h3 className="font-semibold text-lg text-blue-600">Tid/Datum</h3>
+                  <h3 className="font-semibold text-lg text-blue-600">
+                    Tid/Datum
+                  </h3>
                   {content.eventDate && <p>{content.eventDate}</p>}
                   {content.eventTime && <p>{content.eventTime}</p>}
                 </div>
@@ -91,9 +110,14 @@ export default function LandingPage() {
 
         {content.whatToBring && (
           <section className="space-y-6">
-            <h2 className="text-3xl font-bold border-b-2 border-blue-500 pb-2 inline-block">Ta Med(bokad LAN-plats)</h2>
+            <h2 className="text-3xl font-bold border-b-2 border-blue-500 pb-2 inline-block">
+              Ta Med(bokad LAN-plats)
+            </h2>
             <ul className="list-disc list-inside space-y-3 text-lg text-gray-700">
-              {content.whatToBring.split('\n').filter(line => line.trim()).map((line, i) => (
+              {content.whatToBring
+                .split("\n")
+                .filter((line) => line.trim())
+                .map((line, i) => (
                   <li key={i}>{line}</li>
                 ))}
             </ul>
@@ -102,7 +126,9 @@ export default function LandingPage() {
 
         {content.rulesAndGdpr && (
           <section className="space-y-6">
-            <h2 className="text-3xl font-bold border-b-2 border-blue-500 pb-2 inline-block">Regler för LAN & GDPR</h2>
+            <h2 className="text-3xl font-bold border-b-2 border-blue-500 pb-2 inline-block">
+              Regler för LAN & GDPR
+            </h2>
             <p className="text-lg text-gray-700 leading-relaxed whitespace-pre-wrap">
               {content.rulesAndGdpr}
             </p>
@@ -114,7 +140,9 @@ export default function LandingPage() {
           <section className="flex flex-col items-center justify-center space-y-8 pt-12 border-t border-gray-100">
             <div className="text-center space-y-2">
               <h2 className="text-4xl font-bold">Vill du delta?</h2>
-              <p className="text-gray-600 text-lg">Begränsade platser, Säkra din plats idag!</p>
+              <p className="text-gray-600 text-lg">
+                Begränsade platser, Säkra din plats idag!
+              </p>
             </div>
             <Link
               href="/register"
@@ -137,7 +165,7 @@ export default function LandingPage() {
             Bli Funktionär
           </Link>
         </div>
-        <p>© 2026 Vbytes Gaming. All rights reserved.</p>
+        <p>© 2026 Vbytes Gaming. Alla rättigheter förbehållna.</p>
       </footer>
     </div>
   );

src/Web/lan-frontend/app/register/page.tsx

@@ -2,7 +2,9 @@
 
 import { useEffect, useState } from "react";
 
+import Image from "next/image";
 import Link from "next/link";
+import router from "next/router";
 
 interface EventContent {
   registrationEnabled: boolean;
@@ -10,6 +12,22 @@ interface EventContent {
   volunteerAreas: string;
 }
 
+const normalizeSsn = (value: string) =>
+  value.replace(/[\s\-+]/g, "").replace(/\D/g, "");
+const hasValidSsnLength = (value: string) =>
+  value.length === 10 || value.length === 12;
+const isValidEmail = (value: string) =>
+  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+const normalizeMobileNumber = (value: string) => {
+  const digitsOnly = value.replace(/\D/g, "");
+  if (digitsOnly.startsWith("0046")) return `0${digitsOnly.slice(4)}`;
+  if (digitsOnly.startsWith("46")) return `0${digitsOnly.slice(2)}`;
+  if (digitsOnly.startsWith("7")) return `0${digitsOnly}`;
+  return digitsOnly;
+};
+const isValidMobileNumber = (value: string) =>
+  /^07\d{8}$/.test(normalizeMobileNumber(value));
+
 export default function RegisterPage() {
   const [content, setContent] = useState<EventContent | null>(null);
   const [formData, setFormData] = useState({
@@ -30,6 +48,8 @@ export default function RegisterPage() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [message, setMessage] = useState({ type: "", text: "" });
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [showBecomeMemberCta, setShowBecomeMemberCta] = useState(false);
 
   useEffect(() => {
     fetch("/api/Content")
@@ -47,53 +67,143 @@ export default function RegisterPage() {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
         <div className="max-w-md w-full bg-white p-8 rounded-xl shadow-md text-center">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">Registreringen är stängd</h1>
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">
-          <p className="text-gray-600 mb-6">Vi tar tyvärr inte emot fler anmälningar just nu.</p>
+            Registreringen är stängd
-          <Link href="/" className="text-blue-600 hover:underline">Gå tillbaka till startsidan</Link>
+          </h1>
+          <p className="text-gray-600 mb-6">
+            Vi tar tyvärr inte emot fler anmälningar just nu.
+          </p>
+          <Link href="/" className="text-blue-600 hover:underline">
+            Gå tillbaka till startsidan
+          </Link>
         </div>
       </div>
     );
   }
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >,
+  ) => {
     const { name, value, type } = e.target;
-    const val = type === "checkbox" ? (e.target as HTMLInputElement).checked : value;
+    const val =
+      type === "checkbox" ? (e.target as HTMLInputElement).checked : value;
 
     setFormData((prev) => ({
       ...prev,
       [name]: val,
     }));
+
+    setFieldErrors((prev) => ({
+      ...prev,
+      [name]: "",
+    }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!formData.ssn) {
+    const normalizedSsn = normalizeSsn(formData.ssn);
-      setMessage({ type: "error", text: "SSN is required for registration." });
+    const trimmedFirstName = formData.firstName.trim();
+    const trimmedSurName = formData.surName.trim();
+    const trimmedGrade = formData.grade.trim();
+    const trimmedPhoneNumber = formData.phoneNumber.trim();
+    const trimmedGuardianName = formData.guardianName.trim();
+    const trimmedGuardianPhone = formData.guardianPhoneNumber.trim();
+    const trimmedGuardianEmail = formData.guardianEmail.trim();
+    const normalizedPhoneNumber = normalizeMobileNumber(trimmedPhoneNumber);
+    const normalizedGuardianPhone = normalizeMobileNumber(trimmedGuardianPhone);
+    const nextFieldErrors: Record<string, string> = {};
+
+    if (!normalizedSsn) {
+      nextFieldErrors.ssn = "Personnummer krävs för registrering.";
+    } else if (!hasValidSsnLength(normalizedSsn)) {
+      nextFieldErrors.ssn = "Personnummer måste vara 10 eller 12 siffror.";
+    }
+
+    if (!trimmedFirstName)
+      nextFieldErrors.firstName = "Förnamn är obligatoriskt.";
+    if (!trimmedSurName)
+      nextFieldErrors.surName = "Efternamn är obligatoriskt.";
+    if (!trimmedGrade) nextFieldErrors.grade = "Årskurs är obligatorisk.";
+    if (!trimmedGuardianName)
+      nextFieldErrors.guardianName = "Vårdnadshavares namn är obligatoriskt.";
+    if (!trimmedGuardianPhone)
+      nextFieldErrors.guardianPhoneNumber =
+        "Vårdnadshavares Mobilnummer är obligatoriskt.";
+    if (!trimmedGuardianEmail)
+      nextFieldErrors.guardianEmail = "Vårdnadshavares e-post är obligatorisk.";
+
+    if (trimmedPhoneNumber && !isValidMobileNumber(trimmedPhoneNumber)) {
+      nextFieldErrors.phoneNumber =
+        "Mobilnummer måste vara ett giltigt svenskt mobilnummer.";
+    }
+
+    if (trimmedGuardianPhone && !isValidMobileNumber(trimmedGuardianPhone)) {
+      nextFieldErrors.guardianPhoneNumber =
+        "Vårdnadshavares Mobilnummer måste vara ett giltigt svenskt mobilnummer.";
+    }
+
+    if (trimmedGuardianEmail && !isValidEmail(trimmedGuardianEmail)) {
+      nextFieldErrors.guardianEmail =
+        "Vårdnadshavarens e-postadress är ogiltig.";
+    }
+
+    if (formData.email.trim() && !isValidEmail(formData.email.trim())) {
+      nextFieldErrors.email = "Din e-postadress är ogiltig.";
+    }
+
+    if (Object.keys(nextFieldErrors).length > 0) {
+      setFieldErrors(nextFieldErrors);
+      setMessage({
+        type: "error",
+        text: "Kontrollera markerade fält och försök igen.",
+      });
       return;
     }
 
+    setFieldErrors({});
+    setShowBecomeMemberCta(false);
+
     setIsSubmitting(true);
-    setMessage({ type: "info", text: "Processing your registration..." });
+    setMessage({ type: "info", text: "Behandlar din anmälan..." });
 
     try {
       // Returns Ok (200) if NOT registered, Conflict (409) if registered
-      const checkRes = await fetch(`/api/Registration/registered/${formData.ssn}`);
+      const checkRes = await fetch(
+        `/api/Registration/registered/${normalizedSsn}`,
+      );
 
       if (checkRes.status === 409) {
-        setMessage({ type: "error", text: "This SSN is already registered for the LAN." });
+        setMessage({
+          type: "error",
+          text: "Detta personnummer är redan registrerat för LAN:et.",
+        });
         setIsSubmitting(false);
         return;
       }
 
       // Returns 200 (Ok) if member, 404 (NotFound) if not
-      const validateRes = await fetch(`/api/Registration/register/${formData.ssn}`);
+      const validateRes = await fetch(
+        `/api/Registration/register/${normalizedSsn}`,
+      );
       const isMember = validateRes.ok;
 
       const { ssn, ...participantData } = formData;
       const finalPayload = {
         ...participantData,
-        isMember: isMember
+        firstName: trimmedFirstName,
+        surName: trimmedSurName,
+        grade: trimmedGrade,
+        phoneNumber: normalizedPhoneNumber,
+        email: formData.email.trim(),
+        guardianName: trimmedGuardianName,
+        guardianPhoneNumber: normalizedGuardianPhone,
+        guardianEmail: trimmedGuardianEmail,
+        friends: formData.friends.trim(),
+        specialDiet: formData.specialDiet.trim(),
+        isMember: isMember,
       };
 
       const response = await fetch("/api/Participant/register", {
@@ -105,18 +215,28 @@ export default function RegisterPage() {
       });
 
       if (response.ok) {
-        setMessage({ type: "success", text: "Registrering slutförd!" });
+        setMessage({
+          type: "success",
+          text: "Registreringen är klar! Du är nu anmäld till LAN:et.",
+        });
+        setShowBecomeMemberCta(!isMember);
 
-        await fetch(`/api/Registration/register/${formData.ssn}`, {
+        await fetch(`/api/Registration/register/${normalizedSsn}`, {
           method: "POST",
         });
       } else {
         const errorData = await response.json();
-        setMessage({ type: "error", text: errorData.message || "Event registration failed." });
+        setMessage({
+          type: "error",
+          text: errorData.message || "Registreringen misslyckades.",
+        });
       }
     } catch (error) {
       console.error("Registration error:", error);
-      setMessage({ type: "error", text: "A connection error occurred. Please check your internet and try again." });
+      setMessage({
+        type: "error",
+        text: "Ett anslutningsfel uppstod. Kontrollera internet och försök igen.",
+      });
     } finally {
       setIsSubmitting(false);
     }
@@ -125,146 +245,264 @@ export default function RegisterPage() {
   return (
     <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md">
-        <div className="mb-6">
+        <div className="mb-3">
-          <Link href="/" className="text-blue-600 hover:text-blue-800 flex items-center gap-1 text-sm font-medium">
+          <button
-            ← Tillbaka till startsidan
+            type="button"
-          </Link>
+            onClick={() => router.push("/")}
+            className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+          >
+            <span>←</span>
+            <span className="sm:hidden">Tillbaka</span>
+            <span className="hidden sm:inline">Tillbaka till information</span>
+          </button>
+        </div>
+
+        <div className="flex justify-center mb-6">
+          <Image
+            src="/vBytes_Logotyp.png"
+            alt="vBytes"
+            width={320}
+            height={128}
+            className="h-auto w-44"
+            priority
+          />
         </div>
         <div className="text-center mb-10">
-          <h1 className="text-3xl font-bold text-gray-900">Lan Registrering</h1>
+          <h1 className="text-3xl font-bold text-gray-900">LAN-registrering</h1>
-          <p className="mt-2 text-gray-600">Vänligen fyll i detta formulär för att anmäla dig till lanet.</p>
+          <p className="mt-2 text-gray-600">
+            Vänligen fyll i detta formulär för att anmäla dig till lanet.
+          </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
-
             <div className="sm:col-span-2">
-              <label htmlFor="ssn" className="block text-sm font-medium text-gray-700">Personnummer*</label>
+              <label
+                htmlFor="ssn"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Personnummer*
+              </label>
               <input
                 type="text"
                 name="ssn"
                 id="ssn"
                 placeholder="YYYYMMDD-XXXX"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.ssn ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.ssn}
                 onChange={handleInputChange}
               />
-              <p className="mt-1 text-xs text-gray-500">Används endast för att kolla om du redan är medlem eller inte. Sparas ej.</p>
+              {fieldErrors.ssn && (
+                <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.
+                Sparas ej.
+              </p>
             </div>
 
             <div>
-              <label htmlFor="firstName" className="block text-sm font-medium text-gray-700">Förnamn *</label>
+              <label
+                htmlFor="firstName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Förnamn *
+              </label>
               <input
                 type="text"
                 name="firstName"
                 id="firstName"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.firstName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.firstName}
                 onChange={handleInputChange}
               />
+              {fieldErrors.firstName && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.firstName}
+                </p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="surName" className="block text-sm font-medium text-gray-700">Efternamn *</label>
+              <label
+                htmlFor="surName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Efternamn *
+              </label>
               <input
                 type="text"
                 name="surName"
                 id="surName"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.surName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.surName}
                 onChange={handleInputChange}
               />
+              {fieldErrors.surName && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.surName}
+                </p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="grade" className="block text-sm font-medium text-gray-700">Årskurs *</label>
+              <label
+                htmlFor="grade"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Årskurs *
+              </label>
               <input
                 type="text"
                 name="grade"
                 id="grade"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.grade ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.grade}
                 onChange={handleInputChange}
               />
+              {fieldErrors.grade && (
+                <p className="mt-1 text-xs text-red-600">{fieldErrors.grade}</p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-700">Mobilnummer</label>
+              <label
+                htmlFor="phoneNumber"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Mobilnummer
+              </label>
               <input
                 type="tel"
                 name="phoneNumber"
                 id="phoneNumber"
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                inputMode="tel"
+                placeholder="07XXXXXXXX"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.phoneNumber ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.phoneNumber}
                 onChange={handleInputChange}
               />
+              {fieldErrors.phoneNumber && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.phoneNumber}
+                </p>
+              )}
             </div>
 
             <div className="sm:col-span-2">
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-gray-700"
+              >
+                E-post
+              </label>
               <input
                 type="email"
                 name="email"
                 id="email"
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.email ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.email}
                 onChange={handleInputChange}
               />
+              {fieldErrors.email && (
+                <p className="mt-1 text-xs text-red-600">{fieldErrors.email}</p>
+              )}
             </div>
 
             <div className="sm:col-span-2 pt-4 border-t border-gray-100 mt-4">
-              <h3 className="text-lg font-medium text-gray-900 mb-4">Vårdnadshavares Information</h3>
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Vårdnadshavares Information
+              </h3>
             </div>
 
             <div>
-              <label htmlFor="guardianName" className="block text-sm font-medium text-gray-700">Vårdnadshavares Namn *</label>
+              <label
+                htmlFor="guardianName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Vårdnadshavares Namn *
+              </label>
               <input
                 type="text"
                 name="guardianName"
                 id="guardianName"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                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"}`}
                 value={formData.guardianName}
                 onChange={handleInputChange}
               />
+              {fieldErrors.guardianName && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.guardianName}
+                </p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="guardianPhoneNumber" className="block text-sm font-medium text-gray-700">Vårdnadshavares Mobilnummer *</label>
+              <label
+                htmlFor="guardianPhoneNumber"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Vårdnadshavares Mobilnummer *
+              </label>
               <input
                 type="tel"
                 name="guardianPhoneNumber"
                 id="guardianPhoneNumber"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                inputMode="tel"
+                placeholder="07XXXXXXXX"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.guardianPhoneNumber ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.guardianPhoneNumber}
                 onChange={handleInputChange}
               />
+              {fieldErrors.guardianPhoneNumber && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.guardianPhoneNumber}
+                </p>
+              )}
             </div>
 
             <div className="sm:col-span-2">
-              <label htmlFor="guardianEmail" className="block text-sm font-medium text-gray-700">Vårdnadshavares Email *</label>
+              <label
+                htmlFor="guardianEmail"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Vårdnadshavares E-post *
+              </label>
               <input
                 type="email"
                 name="guardianEmail"
                 id="guardianEmail"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.guardianEmail ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.guardianEmail}
                 onChange={handleInputChange}
               />
+              {fieldErrors.guardianEmail && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.guardianEmail}
+                </p>
+              )}
             </div>
 
             <div className="sm:col-span-2 pt-4 border-t border-gray-100 mt-4">
-              <h3 className="text-lg font-medium text-gray-900 mb-4">Yttrligare uppgifter</h3>
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Ytterligare uppgifter
+              </h3>
             </div>
 
             <div className="sm:col-span-2">
-              <label htmlFor="friends" className="block text-sm font-medium text-gray-700">"Önska" Vänner (att sitta jämte)</label>
+              <label
+                htmlFor="friends"
+                className="block text-sm font-medium text-gray-700"
+              >
+                "Önska" Vänner (att sitta jämte)
+              </label>
               <input
                 type="text"
                 name="friends"
@@ -276,7 +514,12 @@ export default function RegisterPage() {
             </div>
 
             <div className="sm:col-span-2">
-              <label htmlFor="specialDiet" className="block text-sm font-medium text-gray-700">Specialkost / Allergier</label>
+              <label
+                htmlFor="specialDiet"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Specialkost / Allergier
+              </label>
               <textarea
                 name="specialDiet"
                 id="specialDiet"
@@ -301,7 +544,12 @@ export default function RegisterPage() {
                   />
                 </div>
                 <div className="ml-3 text-sm">
-                  <label htmlFor="isVisitor" className="font-medium text-gray-700">Registrera dig som besökare</label>
+                  <label
+                    htmlFor="isVisitor"
+                    className="font-medium text-gray-700"
+                  >
+                    Registrera dig som besökare
+                  </label>
                   <p className="text-gray-500">
                     {content?.visitorOnly
                       ? "Just nu tillåts endast besöks-registreringar."
@@ -322,29 +570,53 @@ export default function RegisterPage() {
                   />
                 </div>
                 <div className="ml-3 text-sm">
-                  <label htmlFor="hasApprovedGdpr" className="font-medium text-gray-700">GDPR gokännande *</label>
+                  <label
-                  <p className="text-gray-500">Jag Godkänner att min personliga uppgifter sparas och hanteras i syfte för detta event.</p>
+                    htmlFor="hasApprovedGdpr"
+                    className="font-medium text-gray-700"
+                  >
+                    GDPR-godkännande *
+                  </label>
+                  <p className="text-gray-500">
+                    Jag godkänner att mina personuppgifter sparas och hanteras i
+                    syfte för detta event.
+                  </p>
                 </div>
               </div>
             </div>
           </div>
 
           {message.text && (
-            <div className={`p-4 rounded-md ${message.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
+            <div
-              message.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
+              className={`p-4 rounded-md ${
-                "bg-blue-50 text-blue-800 border border-blue-200"
+                message.type === "success"
-              }`}>
+                  ? "bg-green-50 text-green-800 border border-green-200"
+                  : message.type === "error"
+                    ? "bg-red-50 text-red-800 border border-red-200"
+                    : "bg-blue-50 text-blue-800 border border-blue-200"
+              }`}
+            >
               {message.text}
             </div>
           )}
 
+          {showBecomeMemberCta && message.type === "success" && (
+            <a
+              href="https://ebas.sverok.se/blimedlem/22393"
+              target="_blank"
+              rel="noreferrer"
+              className="w-full inline-flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-gray-800 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700"
+            >
+              Klicka här för att bli medlem i vBytes
+            </a>
+          )}
+
           <div className="pt-6">
             <button
               type="submit"
               disabled={isSubmitting}
               className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-400"
             >
-              {isSubmitting ? "Registering..." : "Register for LAN"}
+              {isSubmitting ? "Registrerar..." : "Anmäl dig till LAN"}
             </button>
           </div>
         </form>

src/Web/lan-frontend/app/volunteer/page.tsx

@@ -1,13 +1,27 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 interface EventContent {
   volunteerAreas: string;
 }
 
+const isValidEmail = (value: string) =>
+  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+const normalizeMobileNumber = (value: string) => {
+  const digitsOnly = value.replace(/\D/g, "");
+  if (digitsOnly.startsWith("0046")) return `0${digitsOnly.slice(4)}`;
+  if (digitsOnly.startsWith("46")) return `0${digitsOnly.slice(2)}`;
+  if (digitsOnly.startsWith("7")) return `0${digitsOnly}`;
+  return digitsOnly;
+};
+const isValidMobileNumber = (value: string) =>
+  /^07\d{8}$/.test(normalizeMobileNumber(value));
+
 export default function VolunteerPage() {
+  const router = useRouter();
   const [content, setContent] = useState<EventContent | null>(null);
   const [formData, setFormData] = useState({
     firstName: "",
@@ -20,6 +34,7 @@ export default function VolunteerPage() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [message, setMessage] = useState({ type: "", text: "" });
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
 
   useEffect(() => {
     fetch("/api/Content")
@@ -34,6 +49,11 @@ export default function VolunteerPage() {
       ...prev,
       [name]: type === "checkbox" ? checked : value,
     }));
+
+    setFieldErrors((prev) => ({
+      ...prev,
+      [name]: "",
+    }));
   };
 
   const handleAreaToggle = (area: string) => {
@@ -43,27 +63,69 @@ export default function VolunteerPage() {
         : [...prev.selectedAreas, area];
       return { ...prev, selectedAreas: areas };
     });
+
+    setFieldErrors((prev) => ({
+      ...prev,
+      selectedAreas: "",
+    }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    const trimmedFirstName = formData.firstName.trim();
+    const trimmedSurName = formData.surName.trim();
+    const trimmedPhoneNumber = formData.phoneNumber.trim();
+    const trimmedEmail = formData.email.trim();
+    const normalizedPhoneNumber = normalizeMobileNumber(trimmedPhoneNumber);
+    const nextFieldErrors: Record<string, string> = {};
+
+    if (!trimmedFirstName)
+      nextFieldErrors.firstName = "Förnamn är obligatoriskt.";
+    if (!trimmedSurName)
+      nextFieldErrors.surName = "Efternamn är obligatoriskt.";
+    if (!trimmedPhoneNumber)
+      nextFieldErrors.phoneNumber = "Mobilnummer är obligatoriskt.";
+    if (!trimmedEmail) nextFieldErrors.email = "E-post är obligatorisk.";
+
+    if (trimmedEmail && !isValidEmail(trimmedEmail)) {
+      nextFieldErrors.email = "E-postadressen är ogiltig.";
+    }
+
+    if (trimmedPhoneNumber && !isValidMobileNumber(trimmedPhoneNumber)) {
+      nextFieldErrors.phoneNumber =
+        "Mobilnummer måste vara ett giltigt svenskt mobilnummer.";
+    }
+
     if (formData.selectedAreas.length === 0) {
-      setMessage({ type: "error", text: "Vänligen välj minst ett område du vill hjälpa till med." });
+      nextFieldErrors.selectedAreas =
+        "Vänligen välj minst ett område du vill hjälpa till med.";
+    }
+
+    if (Object.keys(nextFieldErrors).length > 0) {
+      setFieldErrors(nextFieldErrors);
+      setMessage({
+        type: "error",
+        text: "Kontrollera markerade fält och försök igen.",
+      });
       return;
     }
 
+    setFieldErrors({});
+
     setIsSubmitting(true);
     setMessage({ type: "info", text: "Skickar in din ansökan..." });
 
     try {
       const payload = {
-        firstName: formData.firstName,
+        firstName: trimmedFirstName,
-        surName: formData.surName,
+        surName: trimmedSurName,
-        phoneNumber: formData.phoneNumber,
+        phoneNumber: normalizedPhoneNumber,
-        email: formData.email,
+        email: trimmedEmail,
         hasApprovedGdpr: formData.hasApprovedGdpr,
-        areasOfInterest: formData.selectedAreas.map(name => ({ name }))
+        areasOfInterest: formData.selectedAreas.map((name) => ({
+          name: name.trim(),
+        })),
       };
 
       const response = await fetch("/api/Volunteer/register", {
@@ -75,7 +137,10 @@ export default function VolunteerPage() {
       });
 
       if (response.ok) {
-        setMessage({ type: "success", text: "Tack för din ansökan! Vi kommer kontakta dig snart." });
+        setMessage({
+          type: "success",
+          text: "Tack för din ansökan! Vi kommer kontakta dig snart.",
+        });
         setFormData({
           firstName: "",
           surName: "",
@@ -86,90 +151,164 @@ export default function VolunteerPage() {
         });
       } else {
         const errorData = await response.json();
-        setMessage({ type: "error", text: errorData.message || "Ett fel uppstod vid registreringen." });
+        setMessage({
+          type: "error",
+          text: errorData.message || "Ett fel uppstod vid registreringen.",
+        });
       }
     } catch (error) {
       console.error("Volunteer registration error:", error);
-      setMessage({ type: "error", text: "Kunde inte ansluta till servern. Försök igen senare." });
+      setMessage({
+        type: "error",
+        text: "Kunde inte ansluta till servern. Försök igen senare.",
+      });
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  const areas = content?.volunteerAreas?.split("\n").filter(a => a.trim()) || [];
+  const areas =
+    content?.volunteerAreas?.split("\n").filter((a) => a.trim()) || [];
 
   return (
     <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md">
-        <div className="mb-6">
+        <div className="mb-3">
-          <Link href="/" className="text-blue-600 hover:text-blue-800 flex items-center gap-1 text-sm font-medium">
+          <button
-            ← Tillbaka till startsidan
+            type="button"
-          </Link>
+            onClick={() => router.push("/")}
+            className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+          >
+            <span>←</span>
+            <span className="sm:hidden">Tillbaka</span>
+            <span className="hidden sm:inline">Tillbaka till information</span>
+          </button>
+        </div>
+
+        <div className="flex justify-center mb-6">
+          <Image
+            src="/vBytes_Logotyp.png"
+            alt="vBytes"
+            width={320}
+            height={128}
+            className="h-auto w-44"
+            priority
+          />
         </div>
         <div className="text-center mb-10">
           <h1 className="text-3xl font-bold text-gray-900">Bli Funktionär</h1>
-          <p className="mt-2 text-gray-600">Fyll i formuläret för att anmäla ditt intresse som funktionär under LANet.</p>
+          <p className="mt-2 text-gray-600">
+            Fyll i formuläret för att anmäla ditt intresse som funktionär under
+            LANet.
+          </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
             <div>
-              <label htmlFor="firstName" className="block text-sm font-medium text-gray-700">Förnamn *</label>
+              <label
+                htmlFor="firstName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Förnamn *
+              </label>
               <input
                 type="text"
                 name="firstName"
                 id="firstName"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.firstName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.firstName}
                 onChange={handleInputChange}
               />
+              {fieldErrors.firstName && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.firstName}
+                </p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="surName" className="block text-sm font-medium text-gray-700">Efternamn *</label>
+              <label
+                htmlFor="surName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Efternamn *
+              </label>
               <input
                 type="text"
                 name="surName"
                 id="surName"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.surName ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.surName}
                 onChange={handleInputChange}
               />
+              {fieldErrors.surName && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.surName}
+                </p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-700">Mobilnummer *</label>
+              <label
+                htmlFor="phoneNumber"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Mobilnummer *
+              </label>
               <input
                 type="tel"
                 name="phoneNumber"
                 id="phoneNumber"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                inputMode="tel"
+                placeholder="07XXXXXXXX"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.phoneNumber ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.phoneNumber}
                 onChange={handleInputChange}
               />
+              {fieldErrors.phoneNumber && (
+                <p className="mt-1 text-xs text-red-600">
+                  {fieldErrors.phoneNumber}
+                </p>
+              )}
             </div>
 
             <div>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700">E-post *</label>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-gray-700"
+              >
+                E-post *
+              </label>
               <input
                 type="email"
                 name="email"
                 id="email"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border text-gray-900"
+                className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm p-2 border text-gray-900 ${fieldErrors.email ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}
                 value={formData.email}
                 onChange={handleInputChange}
               />
+              {fieldErrors.email && (
+                <p className="mt-1 text-xs text-red-600">{fieldErrors.email}</p>
+              )}
             </div>
 
             <div className="sm:col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-2">Områden jag kan hjälpa till med *</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                Områden jag kan hjälpa till med *
+              </label>
+              <div
+                className={`grid grid-cols-1 sm:grid-cols-2 gap-2 rounded-md ${fieldErrors.selectedAreas ? "border border-red-500 p-2" : ""}`}
+              >
                 {areas.map((area) => (
-                  <label key={area} className="flex items-center space-x-3 p-3 border rounded-md hover:bg-gray-50 cursor-pointer transition">
+                  <label
+                    key={area}
+                    className="flex items-center space-x-3 p-3 border rounded-md hover:bg-gray-50 cursor-pointer transition"
+                  >
                     <input
                       type="checkbox"
                       className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
@@ -180,6 +319,11 @@ export default function VolunteerPage() {
                   </label>
                 ))}
               </div>
+              {fieldErrors.selectedAreas && (
+                <p className="mt-2 text-xs text-red-600">
+                  {fieldErrors.selectedAreas}
+                </p>
+              )}
             </div>
 
             <div className="sm:col-span-2 space-y-4 pt-4 border-t border-gray-100">
@@ -189,25 +333,37 @@ export default function VolunteerPage() {
                     id="hasApprovedGdpr"
                     name="hasApprovedGdpr"
                     type="checkbox"
-                    required
                     className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
                     checked={formData.hasApprovedGdpr}
                     onChange={handleInputChange}
                   />
                 </div>
                 <div className="ml-3 text-sm">
-                  <label htmlFor="hasApprovedGdpr" className="font-medium text-gray-700">GDPR-godkännande *</label>
+                  <label
-                  <p className="text-gray-500">Jag godkänner att mina personuppgifter behandlas i syfte för detta evenemang.</p>
+                    htmlFor="hasApprovedGdpr"
+                    className="font-medium text-gray-700"
+                  >
+                    GDPR-godkännande *
+                  </label>
+                  <p className="text-gray-500">
+                    Jag godkänner att mina personuppgifter behandlas i syfte för
+                    detta evenemang.
+                  </p>
                 </div>
               </div>
             </div>
           </div>
 
           {message.text && (
-            <div className={`p-4 rounded-md ${message.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
+            <div
-              message.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
+              className={`p-4 rounded-md ${
-                "bg-blue-50 text-blue-800 border border-blue-200"
+                message.type === "success"
-              }`}>
+                  ? "bg-green-50 text-green-800 border border-green-200"
+                  : message.type === "error"
+                    ? "bg-red-50 text-red-800 border border-red-200"
+                    : "bg-blue-50 text-blue-800 border border-blue-200"
+              }`}
+            >
               {message.text}
             </div>
           )}