1import { useState } from "react";
2
3import {
4 AlertDialog,
5 AlertDialogClose,
6 AlertDialogDescription,
7 AlertDialogFooter,
8 AlertDialogHeader,
9 AlertDialogPopup,
10 AlertDialogTitle,
11} from "../ui/alert-dialog";
12import { Button, InlineButton } from "../ui/button";
13import { useT3ConnectAccountPage } from "./T3ConnectAccountPages";
14
15/**
16 * Confirms removing a T3 Connect environment from this device. Removal here
17 * leaves the account registration (and its host space) in place, so the dialog
18 * says so and links to the account page where it can be deregistered.
19 */
20export function RemoveT3ConnectEnvironmentDialog({
21 environmentLabel,
22 onCancel,
23 onConfirm,
24}: {
25 /** The environment awaiting confirmation; null keeps the dialog closed. */
26 readonly environmentLabel: string | null;
27 readonly onCancel: () => void;
28 readonly onConfirm: () => void;
29}) {
30 const accountPage = useT3ConnectAccountPage();
31 // Keep the label through the close animation.
32 const [shownLabel, setShownLabel] = useState(environmentLabel);
33 if (environmentLabel !== null && environmentLabel !== shownLabel) setShownLabel(environmentLabel);
34 const openAccountPage = accountPage.open;
35
36 return (
37 <>
38 <AlertDialog
39 open={environmentLabel !== null}
40 onOpenChange={(open) => {
41 if (!open) onCancel();
42 }}
43 >
44 <AlertDialogPopup>
45 <AlertDialogHeader>
46 <AlertDialogTitle>Remove {shownLabel} from this device?</AlertDialogTitle>
47 <AlertDialogDescription>
48 This forgets its pairing, credentials, and cached threads here.
49 </AlertDialogDescription>
50 <AlertDialogDescription>
51 It stays on your T3 Connect account and keeps its host space. Deregister it in{" "}
52 {openAccountPage ? (
53 <InlineButton
54 onClick={() => {
55 onCancel();
56 openAccountPage();
57 }}
58 >
59 T3 Connect settings
60 </InlineButton>
61 ) : (
62 "T3 Connect settings"
63 )}{" "}
64 to free it.
65 </AlertDialogDescription>
66 </AlertDialogHeader>
67 <AlertDialogFooter>
68 <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
69 <Button variant="destructive" onClick={onConfirm}>
70 Remove from this device
71 </Button>
72 </AlertDialogFooter>
73 </AlertDialogPopup>
74 </AlertDialog>
75 {accountPage.portals}
76 </>
77 );
78}