File size: 5,593 Bytes
5ef6e9d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Shield, CheckCircle, ChevronDown, ChevronUp, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { useAuth } from "@/contexts/AuthContext";
import { useLang } from "@/contexts/LanguageContext";
import { useToast } from "@/hooks/use-toast";
const BASE = import.meta.env.BASE_URL.replace(/\/$/, "");
const API_BASE = `${BASE}/api`;
const BASE_URL = import.meta.env.BASE_URL.replace(/\/$/, "");
async function fetchSetupStatus(): Promise<{ refreshTokenConfigured: boolean }> {
const r = await fetch(`${API_BASE}/admin/setup-status`, { credentials: "include" });
if (!r.ok) return { refreshTokenConfigured: true };
return r.json();
}
export function SetupWizard() {
const { isAdmin, isLoaded } = useAuth();
const { t } = useLang();
const { toast } = useToast();
const qc = useQueryClient();
const [token, setToken] = useState("");
const [saving, setSaving] = useState(false);
const [stepsOpen, setStepsOpen] = useState(true);
const { data, isLoading } = useQuery({
queryKey: ["setupStatus"],
queryFn: fetchSetupStatus,
enabled: isLoaded && isAdmin,
staleTime: 0,
});
if (!isLoaded || !isAdmin || isLoading || data?.refreshTokenConfigured) return null;
const handleSave = async () => {
if (!token.trim()) return;
setSaving(true);
try {
const r = await fetch(`${API_BASE}/admin/setup`, {
method: "POST",
credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ refreshToken: token.trim() }),
});
const data = await r.json();
if (!r.ok) throw new Error(data.error || "Failed");
await qc.invalidateQueries({ queryKey: ["setupStatus"] });
toast({ description: t.setupSuccess });
} catch (e: any) {
toast({ variant: "destructive", description: e.message || t.setupError });
}
setSaving(false);
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
<div className="w-full max-w-xl bg-card border border-border/80 rounded-2xl shadow-2xl overflow-hidden">
<div className="bg-gradient-to-r from-primary/20 to-accent/10 border-b border-border/50 px-6 py-5 flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/20 border border-primary/30 flex items-center justify-center">
<Shield className="w-5 h-5 text-primary" />
</div>
<div>
<h2 className="text-lg font-bold text-foreground">{t.setupTitle}</h2>
<p className="text-xs text-muted-foreground">{t.setupSubtitle}</p>
</div>
</div>
<div className="px-6 py-5 space-y-5 max-h-[75vh] overflow-y-auto">
<div className="rounded-xl border border-border/50 overflow-hidden">
<button
onClick={() => setStepsOpen(!stepsOpen)}
className="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-foreground hover:bg-secondary/50 transition-colors"
>
<span>📖 {t.adminGuideTitle}</span>
{stepsOpen ? <ChevronUp className="w-4 h-4 text-muted-foreground" /> : <ChevronDown className="w-4 h-4 text-muted-foreground" />}
</button>
{stepsOpen && (
<div className="border-t border-border/40 px-4 py-4 space-y-4 bg-black/10">
<ol className="space-y-2.5">
{(t.adminGuideSteps as string[]).map((step, i) => (
<li key={i} className="flex gap-3 text-sm text-muted-foreground">
<span className="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 border border-primary/30 text-primary text-xs flex items-center justify-center font-bold mt-0.5">
{i + 1}
</span>
<span dangerouslySetInnerHTML={{ __html: step }} />
</li>
))}
</ol>
<div className="rounded-lg overflow-hidden border border-border/40">
<img
src={`${BASE_URL}/token-guide.png`}
alt="Token guide screenshot"
className="w-full h-auto"
/>
</div>
</div>
)}
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-foreground">{t.setupPasteLabel}</label>
<Textarea
value={token}
onChange={(e) => setToken(e.target.value)}
placeholder={t.setupPastePlaceholder}
className="font-mono text-xs bg-background/50 border-border/60 resize-none h-24"
spellCheck={false}
/>
<p className="text-xs text-muted-foreground">{t.setupPasteHint}</p>
</div>
</div>
<div className="border-t border-border/50 px-6 py-4 flex justify-end gap-3 bg-black/10">
<Button
onClick={handleSave}
disabled={!token.trim() || saving}
className="gap-2 min-w-[120px]"
>
{saving ? (
<><Loader2 className="w-4 h-4 animate-spin" />{t.setupSaving}</>
) : (
<><CheckCircle className="w-4 h-4" />{t.setupConfirm}</>
)}
</Button>
</div>
</div>
</div>
);
}
|