feat: implement admin authentication overlay and API integration for secure access to voice and media controls

2026-05-17 00:20:29 +07:00
parent a5b5ccf5b0
commit 05feb697f0
6 changed files with 134 additions and 28 deletions
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { login } from "../../api/auth";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Lock } from "lucide-react";
+
+interface AuthOverlayProps {
+  onAuthenticated: () => void;
+}
+
+export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await login(password);
+      localStorage.setItem("admin-password", password);
+      onAuthenticated();
+    } catch (err) {
+      setError("Invalid password");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <Lock className="h-6 w-6" />
+          </div>
+          <CardTitle>Admin Access Required</CardTitle>
+          <CardDescription>Enter the admin password to access Voice and Media controls.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Input
+                type="password"
+                placeholder="Enter password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoFocus
+              />
+              {error && <p className="text-xs text-destructive">{error}</p>}
+            </div>
+            <Button type="submit" className="w-full" disabled={loading || !password}>
+              {loading ? "Authenticating..." : "Unlock Controls"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}