Improve authentication recovery and mobile gameplay

2026-10-07 11:10:29 +05:00
parent 233e4d57f0
commit ce26e6fdbc
22 changed files with 763 additions and 97 deletions
--- a/components/AccountSettings.tsx
+++ b/components/AccountSettings.tsx
@@ -134,7 +134,7 @@ export function AccountSettings({
        )}
        <PasswordForm />
        <div className="settings-recovery">
-          <h3>{t("Signed up with an email link?")}</h3>
+          <h3>{t("Forgot your password?")}</h3>
          <p className="muted">
            {t(
              "Set your first password, or recover a forgotten one, using a link sent to your account email.",
--- a/components/Game.tsx
+++ b/components/Game.tsx
@@ -9,6 +9,7 @@ import {
  MousePointer2,
  Move,
  MapPin,
+  Map as MapIcon,
 } from "lucide-react";
 import { Brand } from "./Brand";
 import { Panorama } from "./Panorama";
@@ -174,6 +175,7 @@ export function Game({ id }: { id: string }) {
    setSession(null);
    setResult(null);
    setPin(null);
+    setExpanded(false);
    setLoaded({ panorama: false, map: false });
    timingOut.current = false;
    setError("");
@@ -228,40 +230,56 @@ export function Game({ id }: { id: string }) {
      </div>
      {session && (
        <div className={"game-map " + (expanded ? "expanded" : "")}>
-          <div className="map-topline">
-            <span>{t("↑ N · PLACE YOUR GUESS")}</span>
-            <button
-              aria-label={expanded ? t("Collapse map") : t("Expand map")}
-              onClick={() => setExpanded((v) => !v)}
-            >
-              {expanded ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
-            </button>
-          </div>
-          <GuessMap
-            key={"map-" + session.round}
-            bounds={session.bounds}
-            image={session.map}
-            pin={result ? result.guess : pin}
-            actual={result?.actual}
-            onPin={setPin}
-            onReady={mapReady}
-            onError={onError}
-            disabled={!!result || busy}
-          />
-          <div className="map-actions">
-            <small>
-              {pin
-                ? `X ${Math.round(pin.x)} · Z ${Math.round(pin.z)}`
-                : t("Click the map to drop a pin")}
-            </small>
-            <button
-              className="button primary full"
-              disabled={!pin || busy || !!result || !current?.deadline}
-              onClick={() => guess()}
-            >
-              <MapPin size={15} />
-              {busy ? t("Checking your guess…") : t("Submit guess")}
-            </button>
+          <button
+            className="mobile-map-toggle"
+            aria-expanded={expanded}
+            aria-controls="guess-map-panel"
+            onClick={() => setExpanded(true)}
+          >
+            <MapIcon size={20} aria-hidden="true" />
+            <span>{pin ? t("Edit your guess") : t("Open guess map")}</span>
+            {pin && (
+              <small>
+                X {Math.round(pin.x)} · Z {Math.round(pin.z)}
+              </small>
+            )}
+          </button>
+          <div className="game-map-content" id="guess-map-panel">
+            <div className="map-topline">
+              <span>{t("↑ N · PLACE YOUR GUESS")}</span>
+              <button
+                aria-label={expanded ? t("Collapse map") : t("Expand map")}
+                onClick={() => setExpanded((v) => !v)}
+              >
+                {expanded ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
+              </button>
+            </div>
+            <GuessMap
+              key={"map-" + session.round}
+              bounds={session.bounds}
+              image={session.map}
+              pin={result ? result.guess : pin}
+              actual={result?.actual}
+              onPin={setPin}
+              onReady={mapReady}
+              onError={onError}
+              disabled={!!result || busy}
+            />
+            <div className="map-actions">
+              <small>
+                {pin
+                  ? `X ${Math.round(pin.x)} · Z ${Math.round(pin.z)}`
+                  : t("Click the map to drop a pin")}
+              </small>
+              <button
+                className="button primary full"
+                disabled={!pin || busy || !!result || !current?.deadline}
+                onClick={() => guess()}
+              >
+                <MapPin size={15} />
+                {busy ? t("Checking your guess…") : t("Submit guess")}
+              </button>
+            </div>
          </div>
        </div>
      )}
--- a/components/GuessMap.tsx
+++ b/components/GuessMap.tsx
@@ -59,7 +59,11 @@ export function GuessMap({
          zoomSnap: 0,
          maxBounds: b.pad(0.15),
          attributionControl: false,
+          zoomControl: false,
        });
+        L.control
+          .zoom({ zoomInTitle: t("Zoom in"), zoomOutTitle: t("Zoom out") })
+          .addTo(m);
        // Install cleanup immediately, including when later initialization fails.
        let observer: ResizeObserver | undefined;
        cleanup = () => {
--- a/components/LegacyPasswordNotice.tsx
+++ b/components/LegacyPasswordNotice.tsx
@@ -0,0 +1,147 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import { Copy, KeyRound } from "lucide-react";
+import { useI18n } from "./I18nProvider";
+import { api } from "@/lib/client-api";
+import { generateInitialPassword } from "@/shared/initial-password";
+
+export function LegacyPasswordNotice({ enabled }: { enabled: boolean }) {
+  const { t } = useI18n();
+  const pathname = usePathname();
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [needed, setNeeded] = useState(false);
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    if (!enabled || pathname?.startsWith("/auth/") || password) return;
+    let active = true;
+    api<{ needed: boolean }>("auth/initial-password")
+      .then((data) => {
+        if (active) setNeeded(data.needed);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [enabled, pathname, password]);
+  useEffect(() => {
+    if (!needed) return;
+    const element = dialog.current;
+    element?.showModal();
+    return () => {
+      element?.close();
+    };
+  }, [needed]);
+  async function generate() {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    const generated = generateInitialPassword();
+    try {
+      await api("auth/initial-password", { password: generated });
+      // Only keep the confirmed password in this mounted dialog's memory.
+      setPassword(generated);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  function dismiss() {
+    setNeeded(false);
+    setPassword("");
+    setSaved(false);
+    setCopied(false);
+    setError("");
+  }
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(password);
+      setCopied(true);
+    } catch {
+      setError("Select the password and copy it manually.");
+    }
+  }
+  if (!needed) return null;
+  return (
+    <dialog
+      ref={dialog}
+      className="report-dialog legacy-password-dialog"
+      aria-labelledby="legacy-password-title"
+      onCancel={(event) => {
+        if (password || busy) event.preventDefault();
+        else dismiss();
+      }}
+    >
+      <KeyRound size={28} aria-hidden="true" />
+      <h2 id="legacy-password-title">
+        {password
+          ? t("Your one-time password screen.")
+          : t("Your account needs a password.")}
+      </h2>
+      <p>
+        {password
+          ? t(
+              "Save this password now. After you close this screen, it cannot be shown again. You can change it in account settings.",
+            )
+          : t(
+              "You joined before passwords were required. Create a strong password for email-and-password login.",
+            )}
+      </p>
+      {password ? (
+        <>
+          <label className="field">
+            {t("Your new account password")}
+            <input
+              readOnly
+              value={password}
+              autoComplete="off"
+              spellCheck={false}
+            />
+          </label>
+          <button className="button" onClick={copy}>
+            <Copy size={16} aria-hidden="true" />
+            {copied ? t("Copied") : t("Copy password")}
+          </button>
+          <label className="password-saved">
+            <input
+              type="checkbox"
+              checked={saved}
+              onChange={(e) => setSaved(e.target.checked)}
+            />
+            {t("I saved this password somewhere safe.")}
+          </label>
+          <button
+            className="button primary full"
+            disabled={!saved}
+            onClick={dismiss}
+          >
+            {t("Done — I saved it")}
+          </button>
+        </>
+      ) : (
+        <>
+          <button
+            className="button primary full"
+            disabled={busy}
+            onClick={generate}
+          >
+            {busy ? t("Creating password…") : t("Create and show my password")}
+          </button>
+          <button className="text-link" disabled={busy} onClick={dismiss}>
+            {t("Not now")}
+          </button>
+        </>
+      )}
+      {error && (
+        <p role="alert" className="error-message">
+          {t(error)}
+        </p>
+      )}
+    </dialog>
+  );
+}
--- a/components/Panorama.tsx
+++ b/components/Panorama.tsx
@@ -39,21 +39,21 @@ export function Panorama({
    const element = mount.current!;
    view.current = { yaw: 0, pitch: 0, fov: 80 };
    const down = (e: PointerEvent) => {
-        if (e.button !== 0) return;
+        if (e.button !== 0 || drag) return;
        element.setPointerCapture(e.pointerId);
-        drag = { x: e.clientX, y: e.clientY };
+        drag = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
      },
      move = (e: PointerEvent) => {
-        if (!drag) return;
+        if (!drag || drag.pointerId !== e.pointerId) return;
        view.current.yaw -= (e.clientX - drag.x) * 0.003;
        view.current.pitch = Math.max(
          -1.5,
          Math.min(1.5, view.current.pitch + (e.clientY - drag.y) * 0.003),
        );
-        drag = { x: e.clientX, y: e.clientY };
+        drag = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
      },
-      up = () => {
-        drag = null;
+      up = (e: PointerEvent) => {
+        if (drag?.pointerId === e.pointerId) drag = null;
      },
      wheel = (e: WheelEvent) => {
        if (!zoom) return;
@@ -70,7 +70,7 @@ export function Panorama({
        "The panorama graphics context was lost. Reconnect to restore the view.",
      );
    };
-    let drag: { x: number; y: number } | null = null;
+    let drag: { x: number; y: number; pointerId: number } | null = null;
    if (urls.length !== 6) {
      callbacks.current.onError(
        "This panorama is missing one or more of its six faces.",
@@ -133,6 +133,7 @@ export function Panorama({
        element.addEventListener("pointermove", move);
        element.addEventListener("pointerup", up);
        element.addEventListener("pointercancel", up);
+        element.addEventListener("lostpointercapture", up);
        element.addEventListener("wheel", wheel, { passive: false });
        callbacks.current.onReady();
      })
@@ -150,6 +151,7 @@ export function Panorama({
      element.removeEventListener("pointermove", move);
      element.removeEventListener("pointerup", up);
      element.removeEventListener("pointercancel", up);
+      element.removeEventListener("lostpointercapture", up);
      element.removeEventListener("wheel", wheel);
      geometry?.dispose();
      material?.dispose();
--- a/components/ReportContent.tsx
+++ b/components/ReportContent.tsx
@@ -4,6 +4,7 @@ import { useI18n } from "@/components/I18nProvider";
 import { useEffect, useRef, useState } from "react";
 import { api } from "./StartGame";
 import { reportCategories } from "@/shared/moderation";
+import { Flag } from "lucide-react";

 export function ReportContent({
  datasetId,
@@ -66,14 +67,16 @@ export function ReportContent({
  return (
    <>
      <button
-        className="button"
+        className="button report-trigger"
+        aria-label={t("Report content")}
        onClick={() => {
          setOpen(true);
          setError("");
          setMessage("");
        }}
      >
-        {t("Report content")}
+        <Flag className="report-icon" size={18} aria-hidden="true" />
+        <span>{t("Report content")}</span>
      </button>
      {message && (
        <p role="status" className="success-message">
--- a/components/SignIn.tsx
+++ b/components/SignIn.tsx
@@ -7,7 +7,7 @@ import { ArrowRight, Compass, Mail, ShieldCheck } from "lucide-react";
 import { api } from "./StartGame";
 import { authActionSchema, authDestination } from "@/shared/account";

-type Mode = "login" | "signup" | "recover" | "magic";
+type Mode = "login" | "signup" | "recover";
 export function SignIn({
  next = "/dashboard",
  initialError = "",
@@ -41,9 +41,7 @@ export function SignIn({
        ? { action: mode, email, password, displayName: name, next }
        : mode === "login"
          ? { action: mode, email, password, next }
-          : mode === "magic"
-            ? { action: mode, email, next }
-            : { action: mode, email };
+          : { action: mode, email };
    const valid = authActionSchema.safeParse(body);
    if (!valid.success) {
      setError(valid.error.issues[0].message);
@@ -75,7 +73,6 @@ export function SignIn({
    login: "Welcome back.",
    signup: "Make yourself at home.",
    recover: "Find your way back.",
-    magic: "An email, a way in.",
  }[mode];
  return (
    <div className="auth-layout">
@@ -132,11 +129,7 @@ export function SignIn({
            ? t("Choose the name people will see on your maps.")
            : mode === "recover"
              ? t("We’ll email you a link to set a new password.")
-              : mode === "magic"
-                ? t(
-                    "For existing accounts. Open the link on this device to continue.",
-                  )
-                : t("Log in with your email and password.")}
+              : t("Log in with your email and password.")}
        </p>
        <form onSubmit={submit} aria-busy={busy}>
          {mode === "signup" && (
@@ -230,7 +223,7 @@ export function SignIn({
            </p>
          )}
          <button className="button primary full" disabled={busy}>
-            {mode === "recover" || mode === "magic" ? (
+            {mode === "recover" ? (
              <Mail size={17} />
            ) : (
              <ArrowRight size={17} />
@@ -241,24 +234,10 @@ export function SignIn({
                  login: t("Log in"),
                  signup: t("Create account"),
                  recover: t("Send reset link"),
-                  magic: t("Send sign-in link"),
                }[mode]}
          </button>
        </form>
-        {mode === "login" && (
-          <div className="auth-alternative">
-            <span>{t("Already use email links?")}</span>
-            <button
-              type="button"
-              className="text-link"
-              disabled={busy}
-              onClick={() => changeMode("magic")}
-            >
-              {t("Send me a sign-in link")}
-            </button>
-          </div>
-        )}
-        {(mode === "recover" || mode === "magic") && (
+        {mode === "recover" && (
          <button
            type="button"
            className="text-link auth-back"