Update dependencies and enhance admin account page

This commit updates various dependencies in pnpm-lock file and introduces enhancements to the admin account page. This includes adding several new functionality like 'Delete User', 'Ban User', 'Impersonate User' and 'Delete Account'. Various UI components are also added for these features.
2024-04-09 15:26:31 +08:00
parent e7f2660032
commit 19c16cfb44
15 changed files with 1150 additions and 244 deletions
--- a/packages/features/admin/src/components/admin-impersonate-user-dialog.tsx
+++ b/packages/features/admin/src/components/admin-impersonate-user-dialog.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { Input } from '@kit/ui/input';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+
+import { impersonateUser } from '../lib/server/admin-server-actions';
+import { DeleteUserSchema } from '../lib/server/schema/admin-actions.schema';
+
+export function AdminImpersonateUserDialog(
+  props: React.PropsWithChildren<{
+    userId: string;
+  }>,
+) {
+  const form = useForm({
+    resolver: zodResolver(DeleteUserSchema),
+    defaultValues: {
+      userId: props.userId,
+      confirmation: '',
+    },
+  });
+
+  const [tokens, setTokens] = useState<{
+    accessToken: string;
+    refreshToken: string;
+  }>();
+
+  if (tokens) {
+    return (
+      <>
+        <ImpersonateUserAuthSetter tokens={tokens} />
+
+        <LoadingOverlay>Setting up your session...</LoadingOverlay>
+      </>
+    );
+  }
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Impersonate User</AlertDialogTitle>
+
+          <AlertDialogDescription>
+            Are you sure you want to impersonate this user? You will be logged
+            in as this user. To stop impersonating, log out.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <Form {...form}>
+          <form
+            className={'flex flex-col space-y-8'}
+            onSubmit={form.handleSubmit(async (data) => {
+              const tokens = await impersonateUser(data);
+
+              setTokens(tokens);
+            })}
+          >
+            <FormField
+              name={'confirmation'}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    Type <b>CONFIRM</b> to confirm
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input
+                      required
+                      pattern={'CONFIRM'}
+                      placeholder={'Type CONFIRM to confirm'}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    Are you sure you want to impersonate this user?
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+
+              <Button type={'submit'}>Impersonate User</Button>
+            </AlertDialogFooter>
+          </form>
+        </Form>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function ImpersonateUserAuthSetter({
+  tokens,
+}: React.PropsWithChildren<{
+  tokens: {
+    accessToken: string;
+    refreshToken: string;
+  };
+}>) {
+  useSetSession(tokens);
+
+  return <LoadingOverlay>Setting up your session...</LoadingOverlay>;
+}
+
+function useSetSession(tokens: { accessToken: string; refreshToken: string }) {
+  const supabase = useSupabase();
+  const router = useRouter();
+
+  return useQuery({
+    queryKey: ['impersonate-user', tokens.accessToken, tokens.refreshToken],
+    queryFn: async () => {
+      await supabase.auth.setSession({
+        refresh_token: tokens.refreshToken,
+        access_token: tokens.accessToken,
+      });
+
+      router.push('/home');
+    },
+  });
+}