Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"import { Button } from "@/components/ui/button"import { CheckCircle2, FileUp, Settings, LayoutDashboard } from "lucide-react"import { useRouter } from "next/navigation"import { completeSetup } from "@/lib/api"import { docsUrl } from "@/lib/docs"import { useEffect, useState } from "react"
interface SetupCompleteProps { identityMode: string | null }
const MODE_LABELS: Record<string, string> = { did_web: "Domain identity (did:web)", did_plc: "Network identity (did:plc)", attach_account: "Linked AT Protocol account", not_exposed: "Skipped — using built-in auth",}
export function SetupComplete({ identityMode }: SetupCompleteProps) { const router = useRouter() const [error, setError] = useState<string | null>(null)
useEffect(() => { if (identityMode === "not_exposed") { completeSetup().catch((e) => { setError(e instanceof Error ? e.message : "Failed to finalize setup. You can retry from the dashboard settings.") }) } }, [identityMode])
const modeLabel = identityMode ? MODE_LABELS[identityMode] ?? identityMode : "Configured"
return ( <Card> <CardHeader className="text-center"> <div className="flex justify-center mb-4"> <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10"> <CheckCircle2 className="h-6 w-6 text-primary" /> </div> </div> <CardTitle>Your AppView is ready</CardTitle> <CardDescription> {identityMode === "not_exposed" ? "HappyView is running with built-in auth. You can configure a service identity anytime from settings." : "Your service identity is configured and your AppView is ready to accept requests from the AT Protocol network."} </CardDescription> </CardHeader> <CardContent className="space-y-6"> <dl className="rounded-lg border p-4"> <dt className="text-muted-foreground text-xs font-medium">Service identity</dt> <dd className="mt-1 text-sm font-medium">{modeLabel}</dd> <dd className="mt-1"> <a href={docsUrl("/getting-started/service-identity")} target="_blank" rel="noopener noreferrer" className="text-primary text-xs underline underline-offset-4 hover:text-primary/80">What does this mean?</a> </dd> </dl>
{error && <p role="alert" className="text-destructive text-sm">{error}</p>}
<div className="space-y-2"> <p className="text-muted-foreground text-xs font-medium">Next steps</p> <div className="grid gap-2"> <Button variant="outline" className="justify-start gap-3 h-auto py-3" onClick={() => router.push("/dashboard/lexicons")} > <FileUp className="h-4 w-4 shrink-0" /> <div className="text-left"> <div className="text-sm font-medium">Upload a lexicon</div> <div className="text-muted-foreground text-xs">Define your first schema to start indexing records.</div> </div> </Button> <Button variant="outline" className="justify-start gap-3 h-auto py-3" onClick={() => router.push("/dashboard/settings")} > <Settings className="h-4 w-4 shrink-0" /> <div className="text-left"> <div className="text-sm font-medium">Review settings</div> <div className="text-muted-foreground text-xs">Configure your instance name, policies, and service entries.</div> </div> </Button> </div> </div>
<div className="flex justify-center pt-2"> <Button onClick={() => router.push("/dashboard")} className="gap-2"> <LayoutDashboard className="h-4 w-4" /> Go to Dashboard </Button> </div> </CardContent> </Card> )}