97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useTransition } from 'react';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import type { User } from '@supabase/gotrue-js';
|
|
|
|
import useCsrfToken from '@kit/hooks/use-csrf-token';
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@kit/ui/dialog';
|
|
import { Input } from '@kit/ui/input';
|
|
import { Label } from '@kit/ui/label';
|
|
|
|
import { deleteUserAction } from '../actions.server';
|
|
|
|
function DeleteUserModal({
|
|
user,
|
|
}: React.PropsWithChildren<{
|
|
user: User;
|
|
}>) {
|
|
const router = useRouter();
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const [pending, startTransition] = useTransition();
|
|
const csrfToken = useCsrfToken();
|
|
const displayText = user.email ?? user.phone ?? '';
|
|
|
|
const onDismiss = () => {
|
|
router.back();
|
|
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const onConfirm = () => {
|
|
startTransition(async () => {
|
|
await deleteUserAction({
|
|
userId: user.id,
|
|
csrfToken,
|
|
});
|
|
|
|
onDismiss();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onDismiss}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Deleting User</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form action={onConfirm}>
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<div className={'flex flex-col space-y-2 text-sm'}>
|
|
<p>
|
|
You are about to delete the user <b>{displayText}</b>.
|
|
</p>
|
|
|
|
<p>
|
|
Delete this user will also delete the organizations they are a
|
|
Owner of, and potentially the data associated with those
|
|
organizations.
|
|
</p>
|
|
|
|
<p>
|
|
<b>This action is not reversible</b>.
|
|
</p>
|
|
|
|
<p>Are you sure you want to do this?</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>
|
|
Confirm by typing <b>DELETE</b>
|
|
<Input required type={'text'} pattern={'DELETE'} />
|
|
</Label>
|
|
</div>
|
|
|
|
<div className={'flex justify-end space-x-2.5'}>
|
|
<Button disabled={pending} variant={'destructive'}>
|
|
Yes, delete user
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export default DeleteUserModal;
|