File size: 2,740 Bytes
fc9bd9f | 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 | import React, { useState } from "react";
import { Check, Copy, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useHfAuth } from "@/contexts/HfAuthContext";
interface HfAuthDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
const HfAuthDialog: React.FC<HfAuthDialogProps> = ({ open, onOpenChange }) => {
const { auth, refetch } = useHfAuth();
const [copied, setCopied] = useState(false);
const [refetching, setRefetching] = useState(false);
if (auth.status !== "unauthenticated") {
return null;
}
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(auth.loginCommand);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch (err) {
console.warn("Clipboard write failed:", err);
}
};
const handleRefetch = async () => {
setRefetching(true);
try {
await refetch();
} finally {
setRefetching(false);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="bg-gray-900 border-gray-800 text-white">
<DialogHeader>
<DialogTitle className="text-amber-200">
Hugging Face CLI not configured
</DialogTitle>
<DialogDescription className="text-gray-400">
Uploads, training, and replay-from-Hub require a logged-in HF CLI.
Run this in a terminal:
</DialogDescription>
</DialogHeader>
<pre className="bg-gray-950 p-3 rounded border border-gray-700 text-xs sm:text-sm overflow-x-auto flex items-center justify-between gap-2">
<code className="text-green-400">{auth.loginCommand}</code>
<button
type="button"
onClick={handleCopy}
className="flex-shrink-0 text-gray-400 hover:text-gray-200 transition-colors"
aria-label="Copy command"
>
{copied ? (
<Check className="w-4 h-4 text-green-400" />
) : (
<Copy className="w-4 h-4" />
)}
</button>
</pre>
<Button
variant="outline"
size="sm"
onClick={handleRefetch}
disabled={refetching}
className="border-amber-700 bg-transparent text-amber-100 hover:bg-amber-900/40 hover:text-amber-50"
>
<RefreshCw
className={`w-4 h-4 mr-2 ${refetching ? "animate-spin" : ""}`}
/>
I've logged in — recheck
</Button>
</DialogContent>
</Dialog>
);
};
export default HfAuthDialog;
|