Merge pull request #276 from bugout-dev/token-screen

Token screen

backend/moonstream/routes/users.py

@@ -186,9 +186,8 @@ async def tokens_handler(request: Request) -> BugoutUserTokens:
 async def token_update_handler(
     request: Request, token_note: str = Form(...), access_token: str = Form(...)
 ) -> BugoutToken:
-    token = request.state.token
     try:
-        response = bc.update_token(token, token_note=token_note)
+        response = bc.update_token(token=access_token, token_note=token_note)
     except BugoutResponseException as e:
         raise MoonstreamHTTPException(status_code=e.status_code, detail=e.detail)
     except Exception as e:

frontend/pages/account/tokens.js

@@ -24,7 +24,7 @@ const Tokens = () => {
   const { onOpen, onClose, isOpen } = useDisclosure();
   const [newToken, setNewToken] = useState(null);
   const [tokens, setTokens] = useState();
-  const { list, update, revoke, isLoading, data } = useTokens();
+  const { list, updateMutation, revoke, isLoading, data } = useTokens();
 
   useEffect(() => {
     list();
@@ -44,7 +44,7 @@ const Tokens = () => {
     if (data?.data?.user_id) {
       setTokens(data.data);
     }
-  }, [data?.data, isLoading]);
+  }, [data, isLoading]);
 
   useEffect(() => {
     document.title = `Tokens`;
@@ -75,8 +75,8 @@ const Tokens = () => {
               </ModalBody>
             </ModalContent>
           </Modal>
-          <Heading variant="tokensScreen"> My access tokens </Heading>
-          <VStack overflow="initial" maxH="unset" height="100%">
+          <Heading variant="tokensScreen"> My API tokens </Heading>
+          <VStack overflow="initial" maxH="unset" height="100%" maxW="100%">
             <Button
               alignSelf="flex-end"
               onClick={onOpen}
@@ -90,7 +90,7 @@ const Tokens = () => {
               data={tokens}
               revoke={revoke}
               isLoading={isLoading}
-              updateCallback={update}
+              update={updateMutation}
             />
           </VStack>
         </ScaleFade>

frontend/src/components/AccountIconButton.js

@@ -36,7 +36,7 @@ const AccountIconButton = (props) => {
             <MenuItem>Security</MenuItem>
           </RouterLink>
           <RouterLink href="/account/tokens" passHref>
-            <MenuItem>Access tokens</MenuItem>
+            <MenuItem>API tokens</MenuItem>
           </RouterLink>
         </MenuGroup>
         <MenuDivider />

frontend/src/components/Sidebar.js

@@ -8,10 +8,15 @@ import {
 } from "react-pro-sidebar";
 import { useContext } from "react";
 import RouterLink from "next/link";
-import { Flex, Image, IconButton } from "@chakra-ui/react";
+import { Flex, Image, IconButton, Divider } from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 import React from "react";
-import { HamburgerIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
+import {
+  HamburgerIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  LockIcon,
+} from "@chakra-ui/icons";
 import { MdTimeline, MdSettings } from "react-icons/md";
 import { ImStatsBars } from "react-icons/im";
 import { HiAcademicCap } from "react-icons/hi";
@@ -117,7 +122,16 @@ const Sidebar = () => {
         </SidebarContent>
       )}
 
-      <SidebarFooter></SidebarFooter>
+      <SidebarFooter style={{ paddingBottom: "3rem" }}>
+        <Divider color="gray.300" w="100%" />
+        {ui.isLoggedIn && (
+          <Menu iconShape="square">
+            <MenuItem icon={<LockIcon />}>
+              <RouterLink href="/account/tokens">API Tokens</RouterLink>
+            </MenuItem>
+          </Menu>
+        )}
+      </SidebarFooter>
     </ProSidebar>
   );
 };

frontend/src/components/TokensList.js

@@ -15,9 +15,12 @@ import { DeleteIcon } from "@chakra-ui/icons";
 import moment from "moment";
 import CopyButton from "./CopyButton";
 
-const List = ({ data, revoke, isLoading, updateCallback }) => {
-  const userToken = localStorage.getItem("BUGOUT_ACCESS_TOKEN");
+const List = ({ data, revoke, isLoading, update }) => {
+  const userToken = localStorage.getItem("MOONSTREAM_ACCESS_TOKEN");
 
+  const cellProps = {
+    px: ["2px", "6px", "inherit"],
+  };
   if (data) {
     return (
       <Table
@@ -30,10 +33,10 @@ const List = ({ data, revoke, isLoading, updateCallback }) => {
       >
         <Thead>
           <Tr>
-            <Th>Token</Th>
-            <Th>Date Created</Th>
-            <Th>Note</Th>
-            <Th>Actions</Th>
+            <Th>Label</Th>
+            <Th {...cellProps}>Token</Th>
+            <Th {...cellProps}>Date Created</Th>
+            <Th {...cellProps}>Actions</Th>
           </Tr>
         </Thead>
         <Tbody>
@@ -42,27 +45,37 @@ const List = ({ data, revoke, isLoading, updateCallback }) => {
               if (userToken !== token.id) {
                 return (
                   <Tr key={`token-row-${token.id}`}>
-                    <Td mr={4} p={0}>
-                      <CopyButton>{token.id}</CopyButton>
-                    </Td>
-                    <Td py={0}>{moment(token.created_at).format("L")}</Td>
-                    <Td py={0}>
+                    <Td py={0} {...cellProps}>
                       <Editable
                         colorScheme="blue"
-                        placeholder="enter note here"
+                        placeholder="Click to set up label"
                         defaultValue={token.note}
+                        isDisabled={update.isLoading}
                         onSubmit={(nextValue) =>
-                          updateCallback({ token: token.id, note: nextValue })
+                          update.mutate({ token: token.id, note: nextValue })
                         }
                       >
                         <EditablePreview
                           maxW="40rem"
+                          textColor={token.note ? "inherit" : "gray.900"}
                           _placeholder={{ color: "black" }}
                         />
                         <EditableInput maxW="40rem" />
                       </Editable>
                     </Td>
-                    <Td py={0}>
+                    <Td
+                      mr={4}
+                      py={0}
+                      {...cellProps}
+                      isTruncated
+                      maxW={["100px", "150px", "300px"]}
+                    >
+                      <CopyButton>{token.id}</CopyButton>
+                    </Td>
+                    <Td py={0} {...cellProps}>
+                      {moment(token.created_at).format("L")}
+                    </Td>
+                    <Td py={0} {...cellProps}>
                       <IconButton
                         size="sm"
                         variant="ghost"

frontend/src/core/hooks/useTokens.js

@@ -20,7 +20,7 @@ const useTokens = () => {
     },
   });
 
-  const { mutate: update } = useMutation(AuthService.updateToken, {
+  const updateMutation = useMutation(AuthService.updateToken, {
     onSuccess: () => {
       list();
     },
@@ -42,7 +42,7 @@ const useTokens = () => {
   return {
     createToken,
     list,
-    update,
+    updateMutation,
     revoke,
     isLoading,
     data,