Remove outfit selection from register form and fix terms checkbox not toggling

src/app/register/page.tsx

@@ -13,26 +13,16 @@ export default async function RegisterPage({
   const t = await getTranslations("pages.register");
   const { error } = await searchParams;
 
-  const [hotelName, imager, captcha, femaleFigures, maleFigures] = await Promise.all([
+  const [hotelName, captcha] = await Promise.all([
     siteSettings.get("hotel_name", "Atom"),
-    siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage"),
     captchaConfig(),
-    siteSettings.get("register_female_figures", "hr-100-45.hd-180-1.ch-215-62.lg-270-62.sh-290-62,hr-130-45.hd-180-2.ch-220-62.lg-280-62.sh-305-62,hr-140-45.hd-180-3.ch-225-62.lg-270-62.sh-310-62,hr-165-45.hd-180-1.ch-210-62.lg-270-62.sh-290-62,hr-190-45.hd-180-2.ch-215-62.lg-270-62.sh-305-62"),
-    siteSettings.get("register_male_figures", "hr-100-61.hd-180-1.ch-210-66.lg-270-110.sh-305-62,hr-105-61.hd-190-2.ch-215-66.lg-280-110.sh-310-62,hr-110-61.hd-200-3.ch-220-66.lg-290-110.sh-320-62,hr-115-61.hd-185-1.ch-210-66.lg-275-110.sh-315-62,hr-120-61.hd-180-2.ch-205-66.lg-285-110.sh-305-62"),
   ]);
 
-  const allFigures = [
-    ...(femaleFigures?.split(",").filter(Boolean) || []),
-    ...(maleFigures?.split(",").filter(Boolean) || []),
-  ];
-
   return (
     <main className="flex min-h-[calc(100vh-200px)] items-center justify-center px-4 py-8">
       <div className="w-full">
         <h1 className="sr-only">{t("title")}</h1>
         <RegisterForm
-          initialFigures={allFigures}
-          imager={imager ?? ""}
           hotelName={hotelName ?? "Atom"}
           captcha={captcha}
           error={error}

src/components/auth/register-form.tsx

@@ -1,22 +1,17 @@
 "use client";
 
-import { useActionState, ChangeEvent } from "react";
+import { useActionState } from "react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { register } from "@/actions/register";
-import { AvatarCarousel } from "@/components/auth/avatar-carousel";
 
 interface RegisterFormProps {
-  initialFigures: string[];
-  imager: string;
   hotelName: string;
   captcha: { provider: string; siteKey?: string };
   error?: string;
 }
 
 export function RegisterForm({
-  initialFigures,
-  imager,
   hotelName,
   captcha,
   error,
@@ -63,9 +58,6 @@ export function RegisterForm({
           </div>
         )}
 
-        {/* Avatar hidden input */}
-        <input type="hidden" name="look" defaultValue={initialFigures[0] || ""} />
-
         {/* Username & Email */}
         <div className="w-full flex flex-col md:flex-row gap-4">
           <div className="w-full md:w-1/2">
@@ -158,24 +150,6 @@ export function RegisterForm({
           </div>
         </div>
 
-        {/* Avatar Selection */}
-        <div className="w-full rounded-md p-4" style={{
-          backgroundColor: "color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
-          border: "1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
-        }}>
-          <legend className="text-sm font-semibold mb-3" style={{ color: "var(--color-text)" }}>
-            {t("selectOutfit")}
-          </legend>
-          <AvatarCarousel
-            figures={initialFigures}
-            imager={imager}
-            onSelect={(figure) => {
-              const input = document.querySelector<HTMLInputElement>('input[name="look"]');
-              if (input) input.value = figure;
-            }}
-          />
-        </div>
-
         {/* Terms */}
         <div className="rounded-md p-3 flex flex-col gap-3" style={{
           backgroundColor: "color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
@@ -185,14 +159,12 @@ export function RegisterForm({
               id="terms"
               name="terms"
               type="checkbox"
-              className="w-4 h-4 border-gray-300 rounded focus:ring-0"
+              className="w-4 h-4 border-gray-300 rounded focus:ring-0 shrink-0"
               style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 30%, transparent)" }}
               required
             />
-            <label htmlFor="terms" className="font-semibold" style={{ color: "var(--color-text)" }}>
-              <a href="/help-center/rules" target="_blank" rel="noopener noreferrer" className="hover:underline" style={{ color: "var(--color-text)" }}>
-                {t("termsAccept", { hotel: hotelName })}
-              </a>
+            <label htmlFor="terms" className="font-semibold cursor-pointer" style={{ color: "var(--color-text)" }}>
+              {t("termsAccept", { hotel: hotelName })}
             </label>
           </fieldset>
         </div>

src/lib/services/site-settings.ts

@@ -4,7 +4,7 @@ import { prisma } from "@/lib/prisma";
 // so the app still renders (e.g. local dev without a DATABASE_URL).
 const DEFAULTS: Record<string, string> = {
   hotel_name: "Atom",
-  habbo_imaging_url: "https://epicnabbo.nl/imaging/",
+  habbo_imaging_url: "https://www.habbo.com/habbo-imaging/avatarimage",
   logo_url: "",
   nitro_client_url: "",
 };