Finish preliminary making user settings, org settings styling similar to usage and billing page

frontend/src/hooks/api/auth/index.tsx

@@ -1,6 +1,5 @@
 export {
     useGetAuthToken,
     useGetCommonPasswords,
-    useRevokeAllSessions,
     useSendMfaToken, 
     useVerifyMfaToken} from "./queries"

frontend/src/hooks/api/auth/queries.tsx

@@ -51,15 +51,6 @@ export const useGetAuthToken = () =>
     retry: 0
   });
 
-export const useRevokeAllSessions = () => {
-  return useMutation({
-    mutationFn: async () => {
-      const { data } = await apiRequest.delete("/api/v1/auth/sessions");
-      return data;
-    }
-  });
-}
-
 const fetchCommonPasswords = async () => {
   const { data } = await apiRequest.get("/api/v1/auth/common-passwords");
   return data || [];

frontend/src/hooks/api/users/index.tsx

@@ -2,11 +2,15 @@ export {
   fetchOrgUsers,
   useAddUserToOrg,
   useAddUserToWs,
+  useCreateAPIKey,
+  useDeleteAPIKey,
   useDeleteOrgMembership,
+  useGetMyAPIKeys,
+  useGetMySessions,
   useGetOrgUsers,
   useGetUser,
   useGetUserAction,
   useLogoutUser,
   useRegisterUserAction,
-  useUpdateOrgUserRole
-} from "./queries";
+  useRevokeMySessions,
+  useUpdateOrgUserRole} from "./queries";

frontend/src/hooks/api/users/queries.tsx

@@ -12,16 +12,20 @@ import {
   AddUserToOrgDTO,
   AddUserToWsDTO,
   AddUserToWsRes,
+  APIKeyData,
+  CreateAPIKeyRes,
   DeletOrgMembershipDTO,
   OrgUser,
+  TokenVersion,
   UpdateOrgUserRoleDTO,
-  User
-} from "./types";
+  User} from "./types";
 
 const userKeys = {
   getUser: ["user"] as const,
   userAction: ["user-action"] as const,
-  getOrgUsers: (orgId: string) => [{ orgId }, "user"]
+  getOrgUsers: (orgId: string) => [{ orgId }, "user"],
+  myAPIKeys: ["api-keys"] as const,
+  mySessions: ["sessions"] as const
 };
 
 export const fetchUserDetails = async () => {
@@ -167,3 +171,90 @@ export const useLogoutUser = () =>
       localStorage.setItem("PRIVATE_KEY", "");
     }
   });
+
+export const useGetMyAPIKeys = () => {
+  return useQuery({
+    queryKey: userKeys.myAPIKeys,
+    queryFn: async () => {
+      const { data } = await apiRequest.get<APIKeyData[]>(
+        "/api/v2/users/me/api-keys"
+      );
+      return data;
+    },
+    enabled: true
+  });
+}
+
+export const useCreateAPIKey = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      name,
+      expiresIn
+    }: {
+      name: string;
+      expiresIn: number;
+    }) => {
+      const { data } = await apiRequest.post<CreateAPIKeyRes>(
+        "/api/v2/users/me/api-keys",
+        {
+          name,
+          expiresIn
+        }
+      );
+      
+      return data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries(userKeys.myAPIKeys);
+    }
+  });
+}
+
+export const useDeleteAPIKey = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (apiKeyDataId: string) => {
+      const { data } = await apiRequest.delete(
+        `/api/v2/users/me/api-keys/${apiKeyDataId}`
+      );
+
+      return data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries(userKeys.myAPIKeys);
+    }
+  });
+}
+
+export const useGetMySessions = () => {
+  return useQuery({
+    queryKey: userKeys.mySessions,
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TokenVersion[]>(
+        "/api/v2/users/me/sessions"
+      );
+
+      return data;
+    },
+    enabled: true
+  });
+}
+
+export const useRevokeMySessions = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => {
+      console.log("useRevokeAllSessions 1");
+      const { data } = await apiRequest.delete(
+        "/api/v2/users/me/sessions"
+      );
+
+      console.log("useRevokeAllSessions 2: ", data);
+      return data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries(userKeys.mySessions);
+    }
+  });
+}

frontend/src/hooks/api/users/types.ts

@@ -61,3 +61,27 @@ export type AddUserToOrgDTO = {
   inviteeEmail: string;
   organizationId: string;
 };
+
+export type CreateAPIKeyRes = {
+  apiKey: string;
+  apiKeyData: APIKeyData;
+}
+
+export type APIKeyData = {
+  _id: string;
+  name: string;
+  user: string;
+  lastUsed: string;
+  createdAt: string;
+  expiresAt: string;
+}
+
+export type TokenVersion = {
+  _id: string;
+  user: string;
+  userAgent: string;
+  ip: string;
+  lastUsed: string;
+  createdAt: string;
+  updatedAt: string;
+}