initial commit

app/dashboard/claim-form.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { createSupabaseBrowserClient } from '@/lib/supabase/browser';
+import { validateSubdomain } from '@/lib/validation';
+
+type CheckState =
+  | { kind: 'idle' }
+  | { kind: 'checking' }
+  | { kind: 'ok' }
+  | { kind: 'taken' }
+  | { kind: 'invalid'; message: string };
+
+export function ClaimForm() {
+  const router = useRouter();
+  const [subdomain, setSubdomain] = useState('');
+  const [check, setCheck] = useState<CheckState>({ kind: 'idle' });
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    const v = validateSubdomain(subdomain);
+    if (!subdomain) {
+      setCheck({ kind: 'idle' });
+      return;
+    }
+    if (!v.ok) {
+      setCheck({ kind: 'invalid', message: v.error });
+      return;
+    }
+    setCheck({ kind: 'checking' });
+    const ctrl = new AbortController();
+    const t = setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `/api/tunnel/check?subdomain=${encodeURIComponent(v.value)}`,
+          { signal: ctrl.signal },
+        );
+        const body = (await res.json()) as { available?: boolean };
+        setCheck(body.available ? { kind: 'ok' } : { kind: 'taken' });
+      } catch (e) {
+        if ((e as { name?: string }).name !== 'AbortError') {
+          setCheck({ kind: 'idle' });
+        }
+      }
+    }, 300);
+    return () => {
+      ctrl.abort();
+      clearTimeout(t);
+    };
+  }, [subdomain]);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    const v = validateSubdomain(subdomain);
+    if (!v.ok) {
+      setError(v.error);
+      return;
+    }
+    startTransition(async () => {
+      const supabase = createSupabaseBrowserClient();
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      if (!session) {
+        setError('Session expired. Please sign in again.');
+        return;
+      }
+      const res = await fetch('/api/tunnel/claim', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${session.access_token}`,
+        },
+        body: JSON.stringify({ subdomain: v.value }),
+      });
+      if (!res.ok) {
+        const body = (await res.json().catch(() => ({}))) as { error?: string };
+        setError(body.error ?? `Request failed (${res.status})`);
+        return;
+      }
+      router.refresh();
+    });
+  }
+
+  const submitDisabled =
+    isPending ||
+    check.kind === 'invalid' ||
+    check.kind === 'taken' ||
+    check.kind === 'checking' ||
+    !subdomain;
+
+  return (
+    <form onSubmit={onSubmit}>
+      <label htmlFor="subdomain">Subdomain</label>
+      <div className="row">
+        <input
+          id="subdomain"
+          type="text"
+          value={subdomain}
+          onChange={(e) => setSubdomain(e.target.value.toLowerCase())}
+          required
+          autoCapitalize="none"
+          autoCorrect="off"
+          spellCheck={false}
+          placeholder="smith"
+        />
+        <span className="muted">.linumiq.net</span>
+      </div>
+      <div style={{ minHeight: '1.5em', marginTop: '0.25rem' }}>
+        {check.kind === 'checking' && (
+          <span className="muted">Checking availability…</span>
+        )}
+        {check.kind === 'ok' && <span className="success">Available</span>}
+        {check.kind === 'taken' && <span className="error">Taken</span>}
+        {check.kind === 'invalid' && (
+          <span className="error">{check.message}</span>
+        )}
+      </div>
+      {error && <p className="error">{error}</p>}
+      <div className="row" style={{ marginTop: '1rem' }}>
+        <button type="submit" disabled={submitDisabled}>
+          {isPending ? 'Claiming…' : 'Claim subdomain'}
+        </button>
+      </div>
+    </form>
+  );
+}