From 0d4d447569aa3d36fcd9d60965ea8de1a2e7fb38 Mon Sep 17 00:00:00 2001
From: WilliamSoderberg <william@soderberg.tech>
Date: Sun, 19 Apr 2026 13:28:13 +0200
Subject: [PATCH] Updated so that the rules and class text can be updated
 through the admin page

---
 app/admin/AdminForm.tsx              | 32 +++++++++++++++++++++++-----
 app/admin/actions.ts                 |  5 ++++-
 app/beach/BeachClientPage.tsx        | 27 ++++++++++++-----------
 app/beach/BeachRegistrationForm.tsx  | 11 +++++-----
 app/beach/actions.ts                 |  2 +-
 app/components/Header.tsx            | 11 ++++++----
 app/components/HomeClientContent.tsx |  7 ++++--
 app/components/Modals/Member.tsx     |  4 +++-
 app/lib/config.ts                    | 23 ++++++++++++++++++--
 app/login/actions.ts                 |  2 +-
 data/site-config.json.example        | 18 +++++++++++-----
 11 files changed, 103 insertions(+), 39 deletions(-)

diff --git a/app/admin/AdminForm.tsx b/app/admin/AdminForm.tsx
index 5ad4829..df37517 100644
--- a/app/admin/AdminForm.tsx
+++ b/app/admin/AdminForm.tsx
@@ -5,8 +5,9 @@
 import { useActionState, useEffect, useState } from 'react';
 import { FaPlus, FaTrash, FaArrowUp, FaArrowDown } from 'react-icons/fa'; // Importera pilarna
 import { saveConfigAction } from './actions';
+import { SiteConfig } from '../lib/config';
 
-export default function AdminForm({ initialConfig }: { initialConfig: any }) {
+export default function AdminForm({ initialConfig }: { initialConfig: SiteConfig }) {
     const [state, formAction, isPending] = useActionState(saveConfigAction, null);
     const [showToast, setShowToast] = useState(false);
 
@@ -49,9 +50,12 @@ export default function AdminForm({ initialConfig }: { initialConfig: any }) {
 
     useEffect(() => {
         if (state?.success) {
-            setShowToast(true);
-            const timer = setTimeout(() => setShowToast(false), 3000);
-            return () => clearTimeout(timer);
+            const showTimer = setTimeout(() => setShowToast(true), 0);
+            const hideTimer = setTimeout(() => setShowToast(false), 3000);
+            return () => {
+                clearTimeout(showTimer);
+                clearTimeout(hideTimer);
+            };
         }
     }, [state]);
 
@@ -87,9 +91,17 @@ export default function AdminForm({ initialConfig }: { initialConfig: any }) {
                     </div>
                 </div>
 
+                <div>
+                    <label className="block text-sm font-bold mb-1">Regeltext (HTML tillåtet)</label>
+                    <p className="text-xs text-gray-500 mb-2">
+                        Du kan använda <b>{"<a target=\"_blank\" href=\"länk\">text</a>"}</b> för länkar och <b>{"<i>text</i>"}</b> för kursiv text.
+                    </p>
+                    <textarea name="rulesText" defaultValue={initialConfig.beachPage.rulesText} className="w-full border p-2 rounded h-48" />
+                </div>
+
                 <div>
                     <label className="block text-sm font-bold mb-1">Meddelande vid stängd anmälan</label>
-                    <textarea name="closeReason" defaultValue={initialConfig.beachPage.closeReason} className="w-full border p-2 rounded h-20" />
+                    <textarea name="closeReason" defaultValue={initialConfig.beachPage.closeReason} className="w-full border p-2 rounded h-32" />
                 </div>
 
                 <div>
@@ -121,6 +133,11 @@ export default function AdminForm({ initialConfig }: { initialConfig: any }) {
                     </button>
                 </div>
 
+                <div>
+                    <label className="block text-sm font-bold mb-1">Intro-text ovanför klasserna</label>
+                    <textarea name="classesIntroText" defaultValue={initialConfig.beachPage.classesIntroText} className="w-full border p-2 rounded h-16" />
+                </div>
+
                 <div className="space-y-3">
                     {classes.map((c, index) => (
                         <div key={index} className="flex flex-col md:flex-row gap-3 items-center w-full">
@@ -180,6 +197,11 @@ export default function AdminForm({ initialConfig }: { initialConfig: any }) {
                     )}
                 </div>
 
+                <div className="mt-2">
+                    <label className="block text-sm font-bold mb-1">Avslutande text under klasserna</label>
+                    <textarea name="classesOutroText" defaultValue={initialConfig.beachPage.classesOutroText} className="w-full border p-2 rounded h-16" />
+                </div>
+
                 {/* Dold JSON-sträng för Server Action */}
                 <input type="hidden" name="classesJSON" value={JSON.stringify(classes)} />
             </section>
diff --git a/app/admin/actions.ts b/app/admin/actions.ts
index db9f525..48b9e9c 100644
--- a/app/admin/actions.ts
+++ b/app/admin/actions.ts
@@ -5,7 +5,7 @@
 import { getConfig, updateConfig } from '../lib/config';
 import { revalidatePath } from 'next/cache';
 
-export async function saveConfigAction(prevState: any, formData: FormData) {
+export async function saveConfigAction(prevState: { success?: boolean } | null | unknown, formData: FormData) {
     const config = await getConfig();
 
     let parsedClasses = [];
@@ -26,6 +26,9 @@ export async function saveConfigAction(prevState: any, formData: FormData) {
             closeReason: formData.get('closeReason') as string,
             otherInfo: formData.get('otherInfo') as string,
             prizesText: formData.get('prizesText') as string,
+            rulesText: formData.get('rulesText') as string,
+            classesIntroText: formData.get('classesIntroText') as string,
+            classesOutroText: formData.get('classesOutroText') as string,
             isClosedOverride: formData.get('isClosedOverride') === 'on',
             classes: parsedClasses,
         }
diff --git a/app/beach/BeachClientPage.tsx b/app/beach/BeachClientPage.tsx
index 5341a0c..141e3ac 100644
--- a/app/beach/BeachClientPage.tsx
+++ b/app/beach/BeachClientPage.tsx
@@ -8,8 +8,12 @@ import { IoIosMail } from "react-icons/io";
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 import BeachRegistrationForm from './BeachRegistrationForm';
+import { SiteConfig } from '../lib/config';
+import Image from 'next/image';
+import matsommar from "../../public/images/hk-mosf.webp";
 
-export default function BeachClientPage({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
+
+export default function BeachClientPage({ config, turnstileSiteKey }: { config: SiteConfig, turnstileSiteKey: string }) {
     const [timeInfo, setTimeInfo] = useState({
         dateStr: 'Laddar...',
         matchStr: 'Laddar...',
@@ -54,9 +58,9 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
                     {/* Logotyp med subtil hover-effekt */}
                     <div className="relative group cursor-default">
                         <div className="absolute -inset-4 bg-white/20 blur-2xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
-                        <img
+                        <Image
                             className="w-full max-w-62.5 md:max-w-75 relative drop-shadow-2xl transform hover:scale-105 transition-transform duration-500"
-                            src="/images/hk-mosf.webp"
+                            src={matsommar}
                             alt="Mat- & Sommarfesten"
                         />
                     </div>
@@ -130,20 +134,19 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
                                     <FaClipboardList size={24} />
                                     <h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Regler</h4>
                                 </div>
-                                <p className="text-gray-700 text-base leading-relaxed">
-                                    Matcherna spelas 4v4 med <a target="_blank" rel="noreferrer" className="text-[#39979f] font-bold hover:underline" href="https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/volleyboll">inomhusregler</a>,
-                                    förutom poängräkningen som följer reglerna för <a target="_blank" rel="noreferrer" className="text-[#39979f] font-bold hover:underline" href="https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/beachvolley">beachvolley</a>.
-                                    Turneringsformen som kommer spelas är <span className='italic'>Double Elimination</span> vilket betyder att alla lag spelar minst två matcher under dagen.
-                                </p>
+                                <div
+                                    className="text-gray-700 text-base leading-relaxed [&_a]:text-[#39979f] [&_a]:font-bold [&_a:hover]:underline [&_i]:italic [&_em]:italic"
+                                    dangerouslySetInnerHTML={{ __html: config.beachPage?.rulesText || "" }}
+                                />
 
                                 <div className="flex items-center gap-3 text-[#cc8124] mt-6">
                                     <FaUsers size={24} />
                                     <h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Klasser</h4>
                                 </div>
                                 <div className="text-gray-700 text-sm space-y-3">
-                                    <p className="leading-snug">Turneringen kommer att delas upp i flera olika klasser beroende på antal anmälda lag och dess nivå:</p>
+                                    <p className="leading-snug">{config.beachPage?.classesIntroText}</p>
                                     <div className="flex gap-2 flex-wrap">
-                                        {classesData.map((c: any, i: number) => (
+                                        {classesData.map((c: { name: string; color: string; desc?: string }, i: number) => (
                                             <span
                                                 key={i}
                                                 className="px-2.5 py-1 rounded-md font-bold border text-xs tracking-wider"
@@ -153,7 +156,7 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
                                             </span>
                                         ))}
                                     </div>
-                                    <p className="italic text-xs text-gray-500">Gör en gissning på er nivå i anmälan – skriv gärna något extra om ni är osäkra. Vi meddelar om det skulle bli ändringar.</p>
+                                    <p className="italic text-xs text-gray-500">{config.beachPage?.classesOutroText}</p>
                                 </div>
                             </div>
 
@@ -233,6 +236,6 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
             </main>
 
             <Footer />
-        </div>
+        </div >
     );
 }
\ No newline at end of file
diff --git a/app/beach/BeachRegistrationForm.tsx b/app/beach/BeachRegistrationForm.tsx
index 29e4bd3..126e2a6 100644
--- a/app/beach/BeachRegistrationForm.tsx
+++ b/app/beach/BeachRegistrationForm.tsx
@@ -6,8 +6,9 @@ import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 import React, { useRef, useActionState, useEffect } from 'react';
 import { FaUser, FaEnvelope, FaPhone, FaUsers, FaTrophy, FaCheckCircle, FaExclamationTriangle } from "react-icons/fa";
 import { submitRegistration } from './actions';
+import { SiteConfig } from '../lib/config';
 
-export default function BeachRegistrationForm({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
+export default function BeachRegistrationForm({ config, turnstileSiteKey }: { config: SiteConfig, turnstileSiteKey: string }) {
     const [state, formAction, isPending] = useActionState(submitRegistration, null);
     const formRef = useRef<HTMLFormElement>(null);
     const turnstileRef = useRef<TurnstileInstance>(null);
@@ -107,7 +108,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
                         <div className="flex-2">
                             <label className="font-bold text-[#39979f] mb-3 block text-sm uppercase">Välj klass</label>
                             <div className={`grid grid-cols-2 md:grid-cols-${Math.min(classesData.length, 3)} gap-3`}>
-                                {classesData.map((c: any) => (
+                                {classesData.map((c: { name: string; color: string; desc?: string }) => (
                                     <LevelButton
                                         key={c.name}
                                         value={c.name}
@@ -130,7 +131,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
 
                     <input type="text" name="website" className="hidden" tabIndex={-1} />
 
-                    <div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} options={{ theme: 'light' }}/></div>
+                    <div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} options={{ theme: 'light' }} /></div>
 
                     {state && (
                         <div className={`flex items-center gap-3 p-5 rounded-2xl font-bold transition-all ${state.success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
@@ -153,7 +154,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
 }
 
 // Uppdaterad med defaultChecked support
-function LevelButton({ value, label, desc, color, defaultChecked }: any) {
+function LevelButton({ value, label, desc, color, defaultChecked }: { value: string; label: string; desc?: string; color: string; defaultChecked?: boolean }) {
     return (
         <label className="cursor-pointer flex-1 relative" style={{ '--class-color': color } as React.CSSProperties}>
             <input
@@ -173,7 +174,7 @@ function LevelButton({ value, label, desc, color, defaultChecked }: any) {
     );
 }
 
-function InputGroup({ icon, ...props }: any) {
+function InputGroup({ icon, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { icon: React.ReactNode }) {
     return (
         <div className="relative group">
             <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[#e6be8a] group-focus-within:text-[#39979f] transition-colors">
diff --git a/app/beach/actions.ts b/app/beach/actions.ts
index 24922ce..b85e2a5 100644
--- a/app/beach/actions.ts
+++ b/app/beach/actions.ts
@@ -4,7 +4,7 @@
 
 import nodemailer from 'nodemailer';
 
-export async function submitRegistration(prevState: any, formData: FormData) {
+export async function submitRegistration(prevState: unknown, formData: FormData) {
     // 1. Spara all rådata direkt för att kunna skicka tillbaka den vid fel
     const rawData = {
         name: formData.get('name') as string,
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index df4d84c..9f653c9 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,15 +1,18 @@
 // app/components/Header.tsx
 import Link from 'next/link';
+import Image from 'next/image';
+import logo from '../../public/images/logo.svg';
 
 export default function Header() {
     return (
         <header className="bg-black flex justify-center sticky top-0 z-40 shadow-lg">
-            <div className="w-85 mx-auto text-center">
+            <div className="w-fit mx-auto text-center">
                 <Link href="/" className="inline-block group">
-                    <img
-                        src="/images/logo.svg"
+                    <Image
+                        src={logo}
+                        loading="eager"
                         alt="Lerbergets Volleybollsällskap"
-                        className="max-h-32 min-h-16 my-4 md:max-h-52 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
+                        className="max-h-24 min-h-16 my-4 md:max-h-32 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
                     />
                 </Link>
             </div>
diff --git a/app/components/HomeClientContent.tsx b/app/components/HomeClientContent.tsx
index 35274c4..961f4cd 100644
--- a/app/components/HomeClientContent.tsx
+++ b/app/components/HomeClientContent.tsx
@@ -10,6 +10,9 @@ import MemberModal from './Modals/Member';
 import SubscribeModal from './Modals/Subscribe';
 import { FaFacebookSquare, FaInstagram } from "react-icons/fa";
 import { IoIosMail } from "react-icons/io";
+import Image from 'next/image';
+import player from "../../public/images/player.svg";
+import laget from "../../public/images/laget.se.svg";
 
 export default function HomeClientContent() {
     const [activeModal, setActiveModal] = useState<'member' | 'subscribe' | null>(null);
@@ -36,7 +39,7 @@ export default function HomeClientContent() {
                         </div>
                     </div>
                     <div className="hidden md:flex md:relative w-64 md:w-75 player-animation">
-                        <img src="/images/player.svg" alt="Spelare" className="w-full h-auto" />
+                        <Image src={player} alt="Spelare" className="w-full h-auto" />
                     </div>
                 </div>
             </section>
@@ -73,7 +76,7 @@ export default function HomeClientContent() {
                         </SocialIcon>
 
                         <SocialIcon title="Laget.se" href="https://www.laget.se/LVS">
-                            <img src="/images/laget.se.svg" alt="Laget.se" className="h-18 w-18" />
+                            <Image src={laget} alt="Laget.se" className="h-18 w-18" />
                         </SocialIcon>
                     </div>
 
diff --git a/app/components/Modals/Member.tsx b/app/components/Modals/Member.tsx
index b9c268e..392c030 100644
--- a/app/components/Modals/Member.tsx
+++ b/app/components/Modals/Member.tsx
@@ -3,11 +3,13 @@
 import { ModalProps } from "@/app/types";
 import Modal from "./Modal";
 import ModalAction from "./ModalAction";
+import Image from 'next/image';
+import logo from "../../../public/images/logo-black.svg";
 
 export default function MemberModal({ onClose }: ModalProps) {
     return (
         <Modal onClose={onClose}>
-            <img src="/images/logo-black.svg" alt="Logo" className="h-25" />
+            <Image src={logo} alt="Logo" className="h-25 max-w-fit" />
             <h2 className="text-[#406185] my-2.5 text-2xl font-bold uppercase">Registrera dig</h2>
             <p className="text-[#406185] my-2.5">Trycka på knappen nedan för att starta registreringen. Du kommer att skickas till laget.se</p>
 
diff --git a/app/lib/config.ts b/app/lib/config.ts
index 969a79e..f44d7eb 100644
--- a/app/lib/config.ts
+++ b/app/lib/config.ts
@@ -5,11 +5,27 @@ import path from 'node:path';
 
 const configPath = path.join(process.cwd(), 'data', 'site-config.json');
 
+export interface SiteConfig {
+    showBeachPromo: boolean;
+    beachPage: {
+        matchStart: string;
+        festivalLink: string;
+        closeReason: string;
+        otherInfo: string;
+        prizesText: string;
+        rulesText?: string;
+        classesIntroText?: string;
+        classesOutroText?: string;
+        isClosedOverride: boolean;
+        classes: Array<{ name: string; color: string; desc: string }>;
+    };
+}
+
 export async function getConfig() {
     try {
         const data = await fs.readFile(configPath, 'utf-8');
         return JSON.parse(data);
-    } catch (error) {
+    } catch {
         return {
             showBeachPromo: true,
             beachPage: {
@@ -17,6 +33,9 @@ export async function getConfig() {
                 isClosedOverride: false,
                 closeReason: "Det är hela 26 lag anmälda och vi kan tyvärr inte ta emot fler anmälningar.\r\n\r\nVi är glada över förväntan och bjuder in alla andra till att komma och kolla men vi har tyvärr inte kapaciteten till att ha med fler lag.",
                 festivalLink: "https://www.kullahalvon.com/upptacka--uppleva/kultur--noje/evenemang-pa-kullahalvon/mat---sommarfesten.html",
+                rulesText: "Matcherna spelas 4v4 med <a target=\"_blank\" href=\"https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/volleyboll\">inomhusregler</a>, förutom poängräkningen som följer reglerna för <a target=\"_blank\" href=\"https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/beachvolley\">beachvolley</a>. Turneringsformen som kommer spelas är <i>Double Elimination</i> vilket betyder att alla lag spelar minst två matcher under dagen.",
+                classesIntroText: "Turneringen kommer att delas upp i flera olika klasser beroende på antal anmälda lag och dess nivå:",
+                classesOutroText: "Gör en gissning på er nivå i anmälan – skriv gärna något extra om ni är osäkra. Vi meddelar om det skulle bli ändringar.",
                 otherInfo: "Turneringen uppskattas hålla på till ca 17-18 tiden\r\nDet kommer finnas duschmöjligheter i anslutning till stranden.",
                 prizesText: "Det kommer att finnas fina priser till alla pallplatser! 🏆"
             }
@@ -25,6 +44,6 @@ export async function getConfig() {
 }
 
 
-export async function updateConfig(newConfig: any) {
+export async function updateConfig(newConfig: SiteConfig) {
     await fs.writeFile(configPath, JSON.stringify(newConfig, null, 2));
 }
\ No newline at end of file
diff --git a/app/login/actions.ts b/app/login/actions.ts
index 4738992..e0a6443 100644
--- a/app/login/actions.ts
+++ b/app/login/actions.ts
@@ -5,7 +5,7 @@
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-export async function loginAction(prevState: any, formData: FormData) {
+export async function loginAction(prevState: { success?: boolean } | null | unknown, formData: FormData) {
     const password = formData.get('password');
 
     if (password === process.env.ADMIN_PASSWORD) {
diff --git a/data/site-config.json.example b/data/site-config.json.example
index 5dc8ddc..343c038 100644
--- a/data/site-config.json.example
+++ b/data/site-config.json.example
@@ -3,14 +3,17 @@
   "beachPage": {
     "matchStart": "2026-06-13T10:00",
     "isClosedOverride": false,
-    "closeReason": "Det är hela 26 lag anmälda och vi kan tyvärr inte ta emot fler anmälningar. Vi är glada över förväntan och bjuder in alla andra till att komma och kolla men vi har tyvärr inte kapaciteten till att ha med fler lag.",
+    "closeReason": "Det är hela 26 lag anmälda och vi kan tyvärr inte ta emot fler anmälningar.\r\n\r\nVi är glada över förväntan och bjuder in alla andra till att komma och kolla men vi har tyvärr inte kapaciteten till att ha med fler lag.",
     "festivalLink": "https://www.kullahalvon.com/upptacka--uppleva/kultur--noje/evenemang-pa-kullahalvon/mat---sommarfesten.html",
-    "otherInfo": "Turneringen uppskattas hålla på till ca 17-18 tiden\r\nDet kommer finnas duschmöjligheter i anslutning till stranden.",
-    "prizesText": "Det kommer att finnas fina priser till alla pallplatser!",
+    "rulesText": "Matcherna spelas 4v4 med <a target=\"_blank\" href=\"https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/volleyboll\">inomhusregler</a>, förutom poängräkningen som följer reglerna för <a target=\"_blank\" href=\"https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/beachvolley\">beachvolley</a>. Turneringsformen som kommer spelas är <i>Double Elimination</i> vilket betyder att alla lag spelar minst två matcher under dagen.",
+    "classesIntroText": "Turneringen kommer att delas upp i flera olika klasser beroende på antal anmälda lag och dess nivå:",
+    "classesOutroText": "Gör en gissning på er nivå i anmälan – skriv gärna något extra om ni är osäkra. Vi meddelar om det skulle bli ändringar.",
+    "otherInfo": "Turneringen uppskattas hålla på till ca 17-18 tiden\r\nDet kommer finnas duschmöjligheter i anslutning till stranden.\r\nDet kommer fotograferas och filmas under dagen.",
+    "prizesText": "Fina priser väntar för alla som kniper en pallplats!",
     "classes": [
       {
         "name": "Grön",
-        "color": "#07be15",
+        "color": "#16a34a",
         "desc": "Nybörjare"
       },
       {
@@ -18,10 +21,15 @@
         "color": "#2563eb",
         "desc": "Spelat lite"
       },
+      {
+        "name": "Röd",
+        "color": "#e22400",
+        "desc": "Spelat mycket"
+      },
       {
         "name": "Svart",
         "color": "#111827",
-        "desc": "Spelat mycket"
+        "desc": "Elit"
       }
     ]
   }