DeleteFactorModal.tsx82 lines · main

1	import { useQueryClient } from '@tanstack/react-query'
2	import { LOCAL_STORAGE_KEYS } from 'common'
3	import { toast } from 'sonner'
4	import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
5
6	import { organizationKeys } from '@/data/organizations/keys'
7	import { useMfaUnenrollMutation } from '@/data/profile/mfa-unenroll-mutation'
8	import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
9
10	interface DeleteFactorModalProps {
11	visible: boolean
12	factorId: string | null
13	lastFactorToBeDeleted: boolean
14	onClose: () => void
15	}
16
17	const DeleteFactorModal = ({
18	visible,
19	factorId,
20	lastFactorToBeDeleted,
21	onClose,
22	}: DeleteFactorModalProps) => {
23	const queryClient = useQueryClient()
24	const [lastVisitedOrganization] = useLocalStorageQuery(
25	LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
26	''
27	)
28
29	const { mutate: unenroll, isPending } = useMfaUnenrollMutation({
30	onSuccess: async () => {
31	if (lastVisitedOrganization) {
32	await queryClient.invalidateQueries({
33	queryKey: organizationKeys.members(lastVisitedOrganization),
34	})
35	}
36	toast.success(`Successfully deleted factor`)
37	onClose()
38	},
39	})
40
41	return (
42	<ConfirmationModal
43	size="medium"
44	visible={visible}
45	variant={'destructive'}
46	title="Confirm to delete factor"
47	confirmLabel="Delete"
48	confirmLabelLoading="Deleting"
49	loading={isPending}
50	onCancel={onClose}
51	onConfirm={() => factorId && unenroll({ factorId })}
52	alert={{
53	title: lastFactorToBeDeleted
54	? 'Multi-factor authentication will be disabled'
55	: 'This action cannot be undone',
56	description: lastFactorToBeDeleted
57	? 'There are no other factors that are set up once you delete this factor, as such your account will no longer be guarded by multi-factor authentication'
58	: 'You will no longer be able to use this authenticator app for multi-factor authentication when signing in to the dashboard',
59	}}
60	>
61	<p className="text-sm">Before deleting this factor, consider:</p>
62	<ul className="text-sm text-foreground-light py-1 list-disc mx-4 space-y-1">
63	{lastFactorToBeDeleted ? (
64	<>
65	<li>Adding another authenticator app as a factor prior to deleting</li>
66	<li>Ensure that your account does not need multi-factor authentication</li>
67	<li>
68	You will lose access to any organization that enforces multi-factor authentication
69	</li>
70	</>
71	) : (
72	<>
73	<li>Your backup authenticator app is still available to use</li>
74	<li>Adding another authenticator app thereafter as a backup</li>
75	</>
76	)}
77	</ul>
78	</ConfirmationModal>
79	)
80	}
81
82	export default DeleteFactorModal