Import source: src/components/common/confirm-dialog

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:10:33 +03:30
parent c718326981
commit ca89bce1ab
1 changed files with 65 additions and 0 deletions
@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { AlertTriangle } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export function DangerousActionDialog({
+  label,
+  requiredText,
+}: {
+  label: string;
+  requiredText: string;
+}) {
+  const [value, setValue] = useState("");
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="destructive" size="sm">
+          {label}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+            Confirm {label}
+          </DialogTitle>
+          <DialogDescription>
+            This frontend displays the impact preview and audit entry only. No real server
+            action is executed.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 p-5">
+          <div className="rounded-md border border-warning/30 bg-warning/10 p-3 text-sm">
+            Impact preview: active sessions are notified, a two-factor challenge is required,
+            and an audit event will be recorded with the supplied reason.
+          </div>
+          <label className="block space-y-1 text-sm">
+            <span className="font-medium">Reason</span>
+            <Input placeholder="Maintenance window, ticket number, or operator note" />
+          </label>
+          <label className="block space-y-1 text-sm">
+            <span className="font-medium">Type {requiredText}</span>
+            <Input value={value} onChange={(event) => setValue(event.target.value)} />
+          </label>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline">Cancel</Button>
+            <Button variant="destructive" disabled={value !== requiredText}>
+              Confirm with mock 2FA
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}