Dialog with Password Confirmation

1'use client';
2 
3import { EyeIcon, EyeOffIcon } from 'lucide-react';
4import { type FormEvent, useState } from 'react';
5import {
6  AlertDialog,
7  AlertDialogCancel,
8  AlertDialogContent,
9  AlertDialogDescription,
10  AlertDialogFooter,
11  AlertDialogHeader,
12  AlertDialogTitle,
13  AlertDialogTrigger,
14} from '@/components/ui/alert-dialog';
15import { Button } from '@/components/ui/button';
16import { Input } from '@/components/ui/input';
17import { Label } from '@/components/ui/label';
18 
19export default function Dialog05() {
20  const [isOpen, setIsOpen] = useState(true);
21  const [isVisible, setIsVisible] = useState<boolean>(false);
22 
23  const toggleVisibility = () => setIsVisible((prevState) => !prevState);
24  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
25    event.preventDefault();
26    setIsOpen(false);
27  };
28 
29  return (
30    <AlertDialog onOpenChange={setIsOpen} open={isOpen}>
31      <AlertDialogTrigger render={<Button variant="destructive" />}>
32        Delete Workspace
33      </AlertDialogTrigger>
34      <AlertDialogContent className="sm:max-w-md">
35        <AlertDialogHeader>
36          <AlertDialogTitle className="text-balance">
37            Delete workspace
38          </AlertDialogTitle>
39          <AlertDialogDescription className="text-pretty">
40            All workspace data will be permanently deleted. There is no coming
41            back after you press delete.
42          </AlertDialogDescription>
43        </AlertDialogHeader>
44        <form onSubmit={handleSubmit}>
45          <div>
46            <Label className="font-medium text-sm" htmlFor="delete-workspace">
47              Confirm password
48            </Label>
49            <div className="relative mt-2">
50              <Input
51                className="pe-9"
52                id="delete-workspace"
53                name="delete-workspace"
54                placeholder="Password"
55                required
56                type={isVisible ? 'text' : 'password'}
57              />
58              <button
59                aria-controls="delete-workspace"
60                aria-label={isVisible ? 'Hide password' : 'Show password'}
61                aria-pressed={isVisible}
62                className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md"
63                onClick={toggleVisibility}
64                type="button"
65              >
66                {isVisible ? (
67                  <EyeOffIcon aria-hidden="true" size={16} />
68                ) : (
69// … truncated