255 lines
8.0 KiB
TypeScript
255 lines
8.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import { UserPlus, Copy, Check, Trash2, Clock, CheckCircle2, Loader2 } from 'lucide-react'
|
|
|
|
interface Invite {
|
|
id: string
|
|
token: string
|
|
email: string
|
|
created_at: string
|
|
expires_at: string
|
|
used_at: string | null
|
|
}
|
|
|
|
function inviteStatus(invite: Invite): 'used' | 'expired' | 'pending' {
|
|
if (invite.used_at) return 'used'
|
|
if (new Date(invite.expires_at) < new Date()) return 'expired'
|
|
return 'pending'
|
|
}
|
|
|
|
function CopyButton({ text }: { text: string }) {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const handleCopy = async () => {
|
|
await navigator.clipboard.writeText(text)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-2">
|
|
{copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export default function AdminPage() {
|
|
const [invites, setInvites] = useState<Invite[]>([])
|
|
const [email, setEmail] = useState('')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [successEmail, setSuccessEmail] = useState<string | null>(null)
|
|
const [newToken, setNewToken] = useState<string | null>(null)
|
|
|
|
const fetchInvites = useCallback(async () => {
|
|
try {
|
|
const res = await fetch('/api/invites')
|
|
const data = await res.json()
|
|
if (res.ok) setInvites(data.invites)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchInvites()
|
|
}, [fetchInvites])
|
|
|
|
const handleCreate = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError(null)
|
|
setSuccessEmail(null)
|
|
setNewToken(null)
|
|
setIsCreating(true)
|
|
|
|
try {
|
|
const res = await fetch('/api/invites', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email }),
|
|
})
|
|
const data = await res.json()
|
|
|
|
if (!res.ok) {
|
|
setError(data.error)
|
|
return
|
|
}
|
|
|
|
setSuccessEmail(email)
|
|
setNewToken(data.invite.token)
|
|
setEmail('')
|
|
await fetchInvites()
|
|
} catch {
|
|
setError('Network error. Please try again.')
|
|
} finally {
|
|
setIsCreating(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async (id: string) => {
|
|
const res = await fetch('/api/invites', {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id }),
|
|
})
|
|
if (res.ok) await fetchInvites()
|
|
}
|
|
|
|
const inviteUrl = (token: string) =>
|
|
`${window.location.origin}/auth/invite/${token}`
|
|
|
|
const statusBadge = (invite: Invite) => {
|
|
const status = inviteStatus(invite)
|
|
if (status === 'used')
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-green-500">
|
|
<CheckCircle2 className="h-3 w-3" /> Used
|
|
</span>
|
|
)
|
|
if (status === 'expired')
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Clock className="h-3 w-3" /> Expired
|
|
</span>
|
|
)
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-primary">
|
|
<Clock className="h-3 w-3" /> Pending
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-2xl">
|
|
<div>
|
|
<h2 className="text-2xl font-bold">Admin</h2>
|
|
<p className="text-muted-foreground">Manage user invitations</p>
|
|
</div>
|
|
|
|
{/* Create invite */}
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<UserPlus className="h-5 w-5" />
|
|
Invite user
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Send an invite link to a new user. Links expire after 7 days.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleCreate} className="space-y-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email address</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="user@company.com"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="bg-secondary/50"
|
|
/>
|
|
<Button type="submit" disabled={isCreating}>
|
|
{isCreating ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
'Send invite'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="rounded-md bg-destructive/10 border border-destructive/20 p-3">
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{newToken && successEmail && (
|
|
<div className="rounded-md bg-green-500/10 border border-green-500/20 p-3 space-y-2">
|
|
<p className="text-sm text-green-500 font-medium">
|
|
Invite created for {successEmail}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs text-muted-foreground truncate flex-1 bg-muted/50 px-2 py-1 rounded">
|
|
{inviteUrl(newToken)}
|
|
</code>
|
|
<CopyButton text={inviteUrl(newToken)} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Invites list */}
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle>Invitations</CardTitle>
|
|
<CardDescription>All invite links, newest first</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : invites.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-8">
|
|
No invitations yet
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{invites.map((invite) => {
|
|
const status = inviteStatus(invite)
|
|
return (
|
|
<div
|
|
key={invite.id}
|
|
className="flex items-center justify-between p-3 rounded-lg bg-muted/30"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{invite.email}</p>
|
|
<div className="flex items-center gap-3 mt-0.5">
|
|
{statusBadge(invite)}
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(invite.created_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 ml-3">
|
|
{status === 'pending' && (
|
|
<CopyButton text={inviteUrl(invite.token)} />
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
|
onClick={() => handleDelete(invite.id)}
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|