Dialog with Member List

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 Dialog08() {
20  const [open, setOpen] = 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    setOpen(false);
27  };
28 
29  return (
30    <AlertDialog onOpenChange={setOpen} open={open}>
31      <AlertDialogTrigger render={<Button variant="destructive" />}>
32        Deactivate 2FA
33      </AlertDialogTrigger>
34      <AlertDialogContent className="sm:max-w-lg">
35        <AlertDialogHeader>
36          <AlertDialogTitle className="text-balance">
37            Deactivate two-step authentication
38          </AlertDialogTitle>
39          <AlertDialogDescription className="text-pretty">
40            Enter your password to deactivate the two-step authentication login.
41            Make sure to have your smartphone ready.
42          </AlertDialogDescription>
43        </AlertDialogHeader>
44        <form className="space-y-4" onSubmit={handleSubmit}>
45          <div>
46            <Label className="font-medium text-sm" htmlFor="email">
47              Email
48            </Label>
49            <Input
50              className="mt-2"
51              disabled
52              id="email"
53              name="email"
54              placeholder="ephraim@blocks.so"
55              type="email"
56            />
57          </div>
58          <div>
59            <Label className="font-medium text-sm" htmlFor="password">
60              Confirm password
61            </Label>
62            <div className="relative mt-2">
63              <Input
64                className="pe-9"
65                id="password"
66                name="password"
67                placeholder="Password"
68                required
69                type={isVisible ? 'text' : 'password'}
70              />
71              <button
72                aria-controls="password"
73                aria-label={isVisible ? 'Hide password' : 'Show password'}
74                aria-pressed={isVisible}
75// … truncated