root
131 lines
3.8 KiB
TypeScript
131 lines
3.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|