anouma/components/meeting/JoinForm.tsx

"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { fieldClass, TextField, FormError } from "@/components/FormField";

export const MEETING_SESSION_KEY = "anouma-meeting-session";
const MEETING_CLIENT_ID_KEY = "anouma-meeting-client-id";

// A stable per-browser identity so a host's "kick" survives the removed
// participant simply reconnecting (which always gets a fresh participantId
// - see lib/meeting/token.ts). Deliberately in localStorage, not
// sessionStorage: it must outlive the "kicked" screen clearing the session
// and the "Erneut beitreten" link going back through this form again.
function getOrCreateClientId(): string {
  try {
    const existing = localStorage.getItem(MEETING_CLIENT_ID_KEY);
    if (existing) return existing;
    const created = crypto.randomUUID();
    localStorage.setItem(MEETING_CLIENT_ID_KEY, created);
    return created;
  } catch {
    // Storage unavailable (private browsing, etc.) - fall back to a
    // one-off id; kicks just won't stick across reconnects in that case.
    return crypto.randomUUID();
  }
}

export type StoredMeetingSession = {
  token: string;
  participantToken?: string;
  serverUrl?: string;
  participantId: string;
  role: "host" | "participant";
  name: string;
  eventTitle: string;
  eventSlug: string;
};

export function JoinForm({ slug }: { slug: string }) {
  const router = useRouter();
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const res = await fetch(`/api/meetings/${slug}/join`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, password, clientId: getOrCreateClientId() }),
        credentials: "include",
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "Beitritt leider nicht möglich.");
        setLoading(false);
        return;
      }

      const session: StoredMeetingSession = {
        token: data.token,
        participantToken: data.participantToken,
        serverUrl: data.serverUrl,
        participantId: data.participantId,
        role: data.role,
        name,
        eventTitle: data.eventTitle,
        eventSlug: slug,
      };
      sessionStorage.setItem(MEETING_SESSION_KEY, JSON.stringify(session));
      router.push(`/termine/${slug}/call`);
    } catch {
      setError("Verbindung fehlgeschlagen. Bitte versuche es erneut.");
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <TextField
        label="Dein Name"
        id="name"
        type="text"
        required
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name eingeben"
        autoComplete="name"
      />
      <div>
        <div className="mb-2 flex items-center justify-between">
          <label htmlFor="password" className="block text-sm font-medium text-anouma-plum">
            Meeting-Passwort
          </label>
          <button
            type="button"
            className="text-xs font-medium text-anouma-mauve-dark underline-offset-2 hover:underline"
            onClick={() => setShowPassword((visible) => !visible)}
            aria-pressed={showPassword}
          >
            {showPassword ? "Verbergen" : "Anzeigen"}
          </button>
        </div>
        <input
          id="password"
          className={fieldClass}
          type={showPassword ? "text" : "password"}
          required
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Passwort eingeben"
          autoComplete="off"
        />
      </div>
      {error && <FormError>{error}</FormError>}
      <button
        type="submit"
        disabled={loading}
        className="w-full rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium tracking-wide text-white transition-colors duration-300 hover:bg-anouma-plum disabled:opacity-60"
      >
        {loading ? "Wird geprüft …" : "Meeting betreten"}
      </button>
    </form>
  );
}