Cleanup

apps/web/app/admin/users/@modal/[uid]/actions.server.ts

@@ -0,0 +1,127 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+import { withAdminSession } from '~/admin/lib/actions-utils';
+
+import { Logger } from '@kit/shared/logger';
+import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+
+const getClient = () => getSupabaseServerActionClient({ admin: true });
+
+export const banUser = withAdminSession(async ({ userId }) => {
+  await setBanDuration(userId, `876600h`);
+});
+
+export const reactivateUser = withAdminSession(async ({ userId }) => {
+  await setBanDuration(userId, `none`);
+});
+
+export const impersonateUser = withAdminSession(async ({ userId }) => {
+  await assertUserIsNotCurrentSuperAdmin(userId);
+
+  const client = getClient();
+
+  const {
+    data: { user },
+    error,
+  } = await client.auth.admin.getUserById(userId);
+
+  if (error || !user) {
+    throw new Error(`Error fetching user`);
+  }
+
+  const email = user.email;
+
+  if (!email) {
+    throw new Error(`User has no email. Cannot impersonate`);
+  }
+
+  const { error: linkError, data } = await getClient().auth.admin.generateLink({
+    type: 'magiclink',
+    email,
+    options: {
+      redirectTo: `/`,
+    },
+  });
+
+  if (linkError || !data) {
+    throw new Error(`Error generating magic link`);
+  }
+
+  const response = await fetch(data.properties?.action_link, {
+    method: 'GET',
+    redirect: 'manual',
+  });
+
+  const location = response.headers.get('Location');
+
+  if (!location) {
+    throw new Error(`Error generating magic link. Location header not found`);
+  }
+
+  const hash = new URL(location).hash.substring(1);
+  const query = new URLSearchParams(hash);
+  const accessToken = query.get('access_token');
+  const refreshToken = query.get('refresh_token');
+
+  if (!accessToken || !refreshToken) {
+    throw new Error(
+      `Error generating magic link. Tokens not found in URL hash.`,
+    );
+  }
+
+  return {
+    accessToken,
+    refreshToken,
+  };
+});
+
+export const deleteUserAction = withAdminSession(
+  async ({ userId }: { userId: string; csrfToken: string }) => {
+    await assertUserIsNotCurrentSuperAdmin(userId);
+
+    Logger.info({ userId }, `Admin requested to delete user account`);
+
+    // we don't want to send an email to the user
+    const sendEmail = false;
+
+    await deleteUser({
+      client: getClient(),
+      userId,
+      sendEmail,
+    });
+
+    revalidatePath('/admin/users', 'page');
+
+    Logger.info({ userId }, `User account deleted`);
+
+    redirect('/admin/users');
+  },
+);
+
+async function setBanDuration(userId: string, banDuration: string) {
+  await assertUserIsNotCurrentSuperAdmin(userId);
+
+  await getClient().auth.admin.updateUserById(userId, {
+    ban_duration: banDuration,
+  });
+
+  revalidatePath('/admin/users');
+}
+
+async function assertUserIsNotCurrentSuperAdmin(targetUserId: string) {
+  const { data: user } = await getSupabaseServerActionClient().auth.getUser();
+  const currentUserId = user.user?.id;
+
+  if (!currentUserId) {
+    throw new Error(`Error fetching user`);
+  }
+
+  if (currentUserId === targetUserId) {
+    throw new Error(
+      `You cannot perform a destructive action on your own account as a Super Admin`,
+    );
+  }
+}

apps/web/app/admin/users/@modal/[uid]/ban/page.tsx

@@ -0,0 +1,32 @@
+import { use } from 'react';
+
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
+
+import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
+import BanUserModal from '../components/BanUserModal';
+
+interface Params {
+  params: {
+    uid: string;
+  };
+}
+
+function BanUserModalPage({ params }: Params) {
+  const client = getSupabaseServerComponentClient({ admin: true });
+  const { data, error } = use(client.auth.admin.getUserById(params.uid));
+
+  if (!data || error) {
+    throw new Error(`User not found`);
+  }
+
+  const user = data.user;
+  const isBanned = 'banned_until' in user && user.banned_until !== 'none';
+
+  if (isBanned) {
+    throw new Error(`The user is already banned`);
+  }
+
+  return <BanUserModal user={user} />;
+}
+
+export default AdminGuard(BanUserModalPage);

apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useFormStatus } from 'react-dom';
+
+import { useRouter } from 'next/navigation';
+
+import type { User } from '@supabase/gotrue-js';
+
+import useCsrfToken from '@kit/hooks/use-csrf-token';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+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 ErrorBoundary from '@/components/app/ErrorBoundary';
+
+import { banUser } from '../actions.server';
+
+function BanUserModal({
+  user,
+}: React.PropsWithChildren<{
+  user: User;
+}>) {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(true);
+  const csrfToken = useCsrfToken();
+  const displayText = user.email ?? user.phone ?? '';
+
+  const onDismiss = () => {
+    router.back();
+
+    setIsOpen(false);
+  };
+
+  const onConfirm = async () => {
+    await banUser({
+      userId: user.id,
+      csrfToken,
+    });
+
+    onDismiss();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onDismiss}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Ban User</DialogTitle>
+
+          <ErrorBoundary fallback={<BanErrorAlert />}>
+            <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 ban <b>{displayText}</b>.
+                  </p>
+
+                  <p>
+                    You can unban them later, but they will not be able to log
+                    in or use their account until you do.
+                  </p>
+
+                  <Label>
+                    Type <b>BAN</b> to confirm
+                    <Input type="text" required pattern={'BAN'} />
+                  </Label>
+
+                  <p>Are you sure you want to do this?</p>
+                </div>
+
+                <div className={'flex justify-end space-x-2.5'}>
+                  <SubmitButton />
+                </div>
+              </div>
+            </form>
+          </ErrorBoundary>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button disabled={pending} variant={'destructive'}>
+      Yes, ban user
+    </Button>
+  );
+}
+
+export default BanUserModal;
+
+function BanErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>There was an error banning this user.</AlertTitle>
+
+      <AlertDescription>Check the logs for more information.</AlertDescription>
+    </Alert>
+  );
+}

apps/web/app/admin/users/@modal/[uid]/components/DeleteUserModal.tsx

@@ -0,0 +1,96 @@
+'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;

apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import useSupabase from '@kit/hooks/use-supabase';
+
+import Spinner from '@/components/app/Spinner';
+
+function ImpersonateUserAuthSetter({
+  tokens,
+}: React.PropsWithChildren<{
+  tokens: {
+    accessToken: string;
+    refreshToken: string;
+  };
+}>) {
+  const supabase = useSupabase();
+  const router = useRouter();
+
+  useEffect(() => {
+    async function setAuth() {
+      await supabase.auth.setSession({
+        refresh_token: tokens.refreshToken,
+        access_token: tokens.accessToken,
+      });
+
+      router.push('/dashboard');
+    }
+
+    void setAuth();
+  }, [router, tokens, supabase.auth]);
+
+  return (
+    <div
+      className={
+        'flex h-screen w-screen flex-1 flex-col items-center justify-center'
+      }
+    >
+      <div className={'flex flex-col items-center space-y-4'}>
+        <Spinner />
+
+        <div>
+          <p>Setting up your session...</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ImpersonateUserAuthSetter;

apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx

@@ -0,0 +1,128 @@
+'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 { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@kit/ui/dialog';
+
+import If from '@/components/app/If';
+import LoadingOverlay from '@/components/app/LoadingOverlay';
+
+import { impersonateUser } from '../actions.server';
+import ImpersonateUserAuthSetter from '../components/ImpersonateUserAuthSetter';
+
+function ImpersonateUserConfirmationModal({
+  user,
+}: React.PropsWithChildren<{
+  user: User;
+}>) {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(true);
+  const [pending, startTransition] = useTransition();
+  const csrfToken = useCsrfToken();
+  const [error, setError] = useState<boolean>();
+
+  const [tokens, setTokens] = useState<{
+    accessToken: string;
+    refreshToken: string;
+  }>();
+
+  const displayText = user.email ?? user.phone ?? '';
+
+  const onDismiss = () => {
+    router.back();
+
+    setIsOpen(false);
+  };
+
+  const onConfirm = () => {
+    startTransition(async () => {
+      try {
+        const response = await impersonateUser({
+          userId: user.id,
+          csrfToken,
+        });
+
+        setTokens(response);
+      } catch (e) {
+        setError(true);
+      }
+    });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onDismiss}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Impersonate User</DialogTitle>
+        </DialogHeader>
+
+        <If condition={tokens}>
+          {(tokens) => {
+            return (
+              <>
+                <ImpersonateUserAuthSetter tokens={tokens} />
+
+                <LoadingOverlay>Setting up your session...</LoadingOverlay>
+              </>
+            );
+          }}
+        </If>
+
+        <If condition={error}>
+          <Alert variant={'destructive'}>
+            <AlertTitle>Impersonation Error</AlertTitle>
+            <AlertDescription>
+              Sorry, something went wrong. Please check the logs.
+            </AlertDescription>
+          </Alert>
+        </If>
+
+        <If condition={!error && !tokens}>
+          <div className={'flex flex-col space-y-4'}>
+            <div className={'flex flex-col space-y-2 text-sm'}>
+              <p>
+                You are about to impersonate the account belonging to{' '}
+                <b>{displayText}</b> with ID <b>{user.id}</b>.
+              </p>
+
+              <p>
+                You will be able to log in as them, see and do everything they
+                can. To return to your own account, simply log out.
+              </p>
+
+              <p>
+                Like Uncle Ben said, with great power comes great
+                responsibility. Use this power wisely.
+              </p>
+            </div>
+
+            <div className={'flex justify-end space-x-2.5'}>
+              <Button
+                type={'button'}
+                disabled={pending}
+                variant={'destructive'}
+                onClick={onConfirm}
+              >
+                Yes, let&apos;s do it
+              </Button>
+            </div>
+          </div>
+        </If>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default ImpersonateUserConfirmationModal;

apps/web/app/admin/users/@modal/[uid]/components/ReactivateUserModal.tsx

@@ -0,0 +1,76 @@
+'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 { reactivateUser } from '../actions.server';
+
+function ReactivateUserModal({
+  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 reactivateUser({
+        userId: user.id,
+        csrfToken,
+      });
+
+      onDismiss();
+    });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onDismiss}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Reactivate User</DialogTitle>
+        </DialogHeader>
+
+        <div className={'flex flex-col space-y-4'}>
+          <div className={'flex flex-col space-y-2 text-sm'}>
+            <p>
+              You are about to reactivate the account belonging to{' '}
+              <b>{displayText}</b>.
+            </p>
+
+            <p>Are you sure you want to do this?</p>
+          </div>
+
+          <div className={'flex justify-end space-x-2.5'}>
+            <Button disabled={pending} onClick={onConfirm}>
+              Yes, reactivate user
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default ReactivateUserModal;

apps/web/app/admin/users/@modal/[uid]/delete/page.tsx

@@ -0,0 +1,25 @@
+import { use } from 'react';
+
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
+
+import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
+import DeleteUserModal from '../components/DeleteUserModal';
+
+interface Params {
+  params: {
+    uid: string;
+  };
+}
+
+function DeleteUserModalPage({ params }: Params) {
+  const client = getSupabaseServerComponentClient({ admin: true });
+  const { data, error } = use(client.auth.admin.getUserById(params.uid));
+
+  if (!data || error) {
+    throw new Error(`User not found`);
+  }
+
+  return <DeleteUserModal user={data.user} />;
+}
+
+export default AdminGuard(DeleteUserModalPage);

apps/web/app/admin/users/@modal/[uid]/impersonate/page.tsx

@@ -0,0 +1,25 @@
+import { use } from 'react';
+
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
+
+import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
+import ImpersonateUserConfirmationModal from '../components/ImpersonateUserConfirmationModal';
+
+interface Params {
+  params: {
+    uid: string;
+  };
+}
+
+function ImpersonateUserModalPage({ params }: Params) {
+  const client = getSupabaseServerComponentClient({ admin: true });
+  const { data, error } = use(client.auth.admin.getUserById(params.uid));
+
+  if (!data || error) {
+    throw new Error(`User not found`);
+  }
+
+  return <ImpersonateUserConfirmationModal user={data.user} />;
+}
+
+export default AdminGuard(ImpersonateUserModalPage);

apps/web/app/admin/users/@modal/[uid]/reactivate/page.tsx

@@ -0,0 +1,34 @@
+import { use } from 'react';
+
+import { redirect } from 'next/navigation';
+
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
+
+import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
+import ReactivateUserModal from '../components/ReactivateUserModal';
+
+interface Params {
+  params: {
+    uid: string;
+  };
+}
+
+function ReactivateUserModalPage({ params }: Params) {
+  const client = getSupabaseServerComponentClient({ admin: true });
+  const { data, error } = use(client.auth.admin.getUserById(params.uid));
+
+  if (!data || error) {
+    throw new Error(`User not found`);
+  }
+
+  const user = data.user;
+  const isActive = !('banned_until' in user) || user.banned_until === 'none';
+
+  if (isActive) {
+    redirect(`/admin/users`);
+  }
+
+  return <ReactivateUserModal user={user} />;
+}
+
+export default AdminGuard(ReactivateUserModalPage);

apps/web/app/admin/users/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}