feat: sessions section with logout one/all sessions (#460)

Author: BlankParticle

apps/web/src/app/[orgShortCode]/settings/user/security/_components/session-modals.tsx

@@ -0,0 +1,47 @@
+import { type ModalComponent } from '@/src/hooks/use-awaitable-modal';
+import { api } from '@/src/lib/trpc';
+import { Button, Dialog } from '@radix-ui/themes';
+
+export function DeleteAllSessions({
+  open,
+  onResolve,
+  onClose,
+  verificationToken
+}: ModalComponent<{ verificationToken: string }>) {
+  const {
+    mutateAsync: logoutAll,
+    isLoading: loggingOut,
+    error
+  } = api.account.security.deleteAllSessions.useMutation();
+  return (
+    <Dialog.Root open={open}>
+      <Dialog.Content className="w-full max-w-96 p-4">
+        <Dialog.Title className="mx-auto w-fit">
+          Delete All Sessions
+        </Dialog.Title>
+        <Dialog.Description className="mx-auto flex w-fit text-balance p-2 text-center text-sm font-bold">
+          This will log you out of all devices and sessions including the
+          current device. Are you sure you want to continue?
+        </Dialog.Description>
+        <div className="text-red-10 w-full">{error?.message}</div>
+        <div className="flex flex-col gap-2">
+          <Button
+            color="red"
+            onClick={async () => {
+              await logoutAll({ verificationToken });
+              onResolve(null);
+            }}
+            loading={loggingOut}>
+            Logout of all sessions
+          </Button>
+          <Button
+            color="gray"
+            variant="soft"
+            onClick={() => onClose()}>
+            Cancel
+          </Button>
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

apps/web/src/app/[orgShortCode]/settings/user/security/page.tsx

@@ -24,9 +24,15 @@ import { Trash } from 'lucide-react';
 import { format } from 'date-fns';
 import useLoading from '@/src/hooks/use-loading';
 import { startRegistration } from '@simplewebauthn/browser';
+import { useRouter } from 'next/navigation';
+import { DeleteAllSessions } from './_components/session-modals';
+import { useQueryClient } from '@tanstack/react-query';
 // import { PasskeyNameModal } from './_components/passkey-modals';
 
 export default function Page() {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
   const {
     data: initData,
     isLoading: isInitDataLoading,
@@ -82,6 +88,9 @@ export default function Page() {
     }
   );
 
+  const [DeleteAllSessionsModalRoot, openDeleteAllSessionsModal] =
+    useAwaitableModal(DeleteAllSessions, { verificationToken: '' });
+
   // const [PasskeyNameModalRoot, openPasskeyNameModal] = useAwaitableModal(
   //   PasskeyNameModal,
   //   {}
@@ -122,6 +131,9 @@ export default function Page() {
     }
   );
 
+  const { mutateAsync: logoutSingle } =
+    api.account.security.deleteSession.useMutation();
+
   async function waitForVerification() {
     if (!initData) throw new Error('No init data');
     if (verificationToken) return verificationToken;
@@ -310,6 +322,59 @@ export default function Page() {
               Add New Passkey
             </Button>
           </div>
+
+          <div className="flex flex-col gap-3">
+            <span className="text-lg font-bold">Sessions</span>
+            <div className="flex flex-wrap gap-2">
+              {initData?.sessions.map((session) => (
+                <div
+                  key={session.publicId}
+                  className="bg-muted flex items-center justify-center gap-2 rounded border px-2 py-1">
+                  <div className="flex flex-col">
+                    <span>
+                      {session.device} - {session.os}
+                    </span>
+                    <span className="text-muted-foreground text-xs">
+                      {format(session.createdAt, ' HH:mm, do MMM yyyy')}
+                    </span>
+                  </div>
+                  <div>
+                    <IconButton
+                      size="2"
+                      variant="soft"
+                      onClick={async () => {
+                        const token = await waitForVerification();
+                        if (!token) return;
+                        await logoutSingle({
+                          sessionPublicId: session.publicId,
+                          verificationToken: verificationToken ?? token
+                        })
+                          .then(() => refreshSecurityData())
+                          .catch(() => null);
+                      }}>
+                      <Trash size={16} />
+                    </IconButton>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <Button
+              className="w-fit"
+              onClick={async () => {
+                const token = await waitForVerification();
+                if (!token) return;
+                await openDeleteAllSessionsModal({
+                  verificationToken: verificationToken ?? token
+                })
+                  .then(() => {
+                    queryClient.removeQueries();
+                    router.replace('/');
+                  })
+                  .catch(() => null);
+              }}>
+              Logout of All Sessions
+            </Button>
+          </div>
         </div>
       )}
 
@@ -319,6 +384,7 @@ export default function Page() {
       <RecoveryModalRoot />
       <DeletePasskeyModalRoot />
       {/* <PasskeyNameModalRoot /> */}
+      <DeleteAllSessionsModalRoot />
     </Flex>
   );
 }