feat: user session management (#2056)

* user session management

* WIP

* cleanup

* license

* cleanup

* don't cache index

* rename current device property

* fix

apps/client/src/features/session/components/session-list.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import {
+  Button,
+  Divider,
+  Group,
+  Skeleton,
+  Stack,
+  Table,
+  Text,
+} from "@mantine/core";
+import { IconDevices } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  useGetSessionsQuery,
+  useRevokeSessionMutation,
+  useRevokeAllSessionsMutation,
+} from "@/features/session/queries/session-query";
+import { formattedDate } from "@/lib/time";
+
+const PAGE_SIZE = 5;
+
+export default function SessionList() {
+  const { t } = useTranslation();
+  const { data: sessions, isLoading } = useGetSessionsQuery();
+  const revokeSessionMutation = useRevokeSessionMutation();
+  const revokeAllSessionsMutation = useRevokeAllSessionsMutation();
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+
+  const otherSessions = sessions?.filter((s) => !s?.isCurrentDevice) ?? [];
+  const visibleSessions = sessions?.slice(0, visibleCount) ?? [];
+  const hasMore = sessions && visibleCount < sessions.length;
+
+  if (isLoading) {
+    return (
+      <Table verticalSpacing="md">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Device Name")}</Table.Th>
+            <Table.Th>{t("Last Active")}</Table.Th>
+            <Table.Th />
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {[1, 2, 3].map((i) => (
+            <Table.Tr key={i}>
+              <Table.Td>
+                <Group gap="xs">
+                  <Skeleton height={18} width={18} radius="sm" />
+                  <Skeleton height={14} width={140} radius="xs" />
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Skeleton height={14} width={120} radius="xs" />
+              </Table.Td>
+              <Table.Td>
+                <Skeleton height={30} width={70} radius="sm" />
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    );
+  }
+
+  return (
+    <Stack>
+      {otherSessions.length > 0 && (
+        <>
+          <div>
+            <Text fw={500}>{t("Log out of all devices")}</Text>
+            <Group justify="space-between" align="center" mt={4}>
+              <Text size="sm" c="dimmed">
+                {t(
+                  "Log out of all sessions except this device",
+                )}
+              </Text>
+              <Button
+                variant="outline"
+                color="red"
+                size="xs"
+                loading={revokeAllSessionsMutation.isPending}
+                onClick={() => revokeAllSessionsMutation.mutate()}
+              >
+                {t("Log out of all devices")}
+              </Button>
+            </Group>
+          </div>
+          <Divider />
+        </>
+      )}
+
+      <Table verticalSpacing="md">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Device Name")}</Table.Th>
+            <Table.Th>{t("Last Active")}</Table.Th>
+            {otherSessions.length > 0 && <Table.Th />}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {visibleSessions.map((session) => (
+            <Table.Tr key={session.id}>
+              <Table.Td>
+                <Group gap="xs">
+                  <IconDevices size={18} stroke={1.5} />
+                  <div>
+                    <Text size="sm">
+                      {session.deviceName || t("Unknown device")}
+                    </Text>
+                    {session?.isCurrentDevice && (
+                      <Text size="xs" c="blue">
+                        {t("This Device")}
+                      </Text>
+                    )}
+                  </div>
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Text size="sm">
+                  {session?.isCurrentDevice
+                    ? t("Now")
+                    : formattedDate(new Date(session.lastActiveAt))}
+                </Text>
+              </Table.Td>
+              {otherSessions.length > 0 && (
+                <Table.Td>
+                  {!session?.isCurrentDevice && (
+                    <Button
+                      variant="outline"
+                      size="xs"
+                      loading={revokeSessionMutation.isPending}
+                      onClick={() =>
+                        revokeSessionMutation.mutate({
+                          sessionId: session.id,
+                        })
+                      }
+                    >
+                      {t("Log out")}
+                    </Button>
+                  )}
+                </Table.Td>
+              )}
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+
+      {hasMore && (
+        <Button
+          variant="subtle"
+          size="xs"
+          onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
+        >
+          {t("Load more")}
+        </Button>
+      )}
+
+      {(!sessions || sessions.length === 0) && (
+        <Text size="sm" c="dimmed" ta="center">
+          {t("No active sessions")}
+        </Text>
+      )}
+    </Stack>
+  );
+}

apps/client/src/features/session/queries/session-query.ts

@@ -0,0 +1,55 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  getSessions,
+  revokeSession,
+  revokeAllSessions,
+} from "@/features/session/services/session-service";
+import { ISession } from "@/features/session/types/session.types";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+
+export function useGetSessionsQuery(): UseQueryResult<ISession[], Error> {
+  return useQuery({
+    queryKey: ["session-list"],
+    queryFn: () => getSessions(),
+  });
+}
+
+export function useRevokeSessionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, { sessionId: string }>({
+    mutationFn: (data) => revokeSession(data),
+    onSuccess: () => {
+      notifications.show({ message: t("Session revoked") });
+      queryClient.invalidateQueries({ queryKey: ["session-list"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
+export function useRevokeAllSessionsMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, void>({
+    mutationFn: () => revokeAllSessions(),
+    onSuccess: () => {
+      notifications.show({ message: t("All other sessions revoked") });
+      queryClient.invalidateQueries({ queryKey: ["session-list"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}

apps/client/src/features/session/services/session-service.ts

@@ -0,0 +1,17 @@
+import api from "@/lib/api-client";
+import { ISession } from "@/features/session/types/session.types";
+
+export async function getSessions(): Promise<ISession[]> {
+  const req = await api.post<{ sessions: ISession[] }>("/sessions");
+  return req.data.sessions;
+}
+
+export async function revokeSession(data: {
+  sessionId: string;
+}): Promise<void> {
+  await api.post("/sessions/revoke", data);
+}
+
+export async function revokeAllSessions(): Promise<void> {
+  await api.post("/sessions/revoke-all");
+}

apps/client/src/features/session/types/session.types.ts

@@ -0,0 +1,8 @@
+export type ISession = {
+  id: string;
+  deviceName: string | null;
+  geoLocation: string | null;
+  lastActiveAt: string;
+  createdAt: string;
+  isCurrentDevice?: boolean;
+};