Add support for fine-grained access tokens (#110)

* ui for adding tokens

* remove console.log

Author: dkhalife

src/api/users.ts

@@ -1,5 +1,5 @@
 import { APIToken } from '@/models/token'
-import { Request } from '../utils/api'
+import { ApiTokenScope, Request } from '../utils/api'
 import { User } from '@/models/user'
 import { NotificationTriggerOptions, NotificationType } from '@/models/notifications'
 
@@ -29,9 +29,10 @@ export const UpdateNotificationSettings = async (provider: NotificationType, tri
     triggers,
   })
 
-export const CreateLongLiveToken = async (name: string) =>
+export const CreateLongLiveToken = async (name: string, scopes: ApiTokenScope[]) =>
   await Request<SingleTokenResponse>(`/users/tokens`, 'POST', {
     name,
+    scopes,
   })
 
 export const DeleteLongLiveToken = async (id: string) =>

src/utils/api.ts

@@ -8,6 +8,15 @@ type FailureResponse = {
   error: string
 }
 
+export type ApiTokenScope = |
+  'task:read' |
+  'task:write' |
+  'label:read' |
+  'label:write' |
+  'user:read' |
+  'user:write' |
+  'token:write';
+
 let isRefreshingAccessToken = false
 const isTokenNearExpiration = () => {
   const now = new Date()

src/views/Modals/Inputs/TextModal.tsx

@@ -0,0 +1,133 @@
+import { ApiTokenScope } from '@/utils/api'
+import { moveFocusToJoyInput } from '@/utils/joy'
+import { TokenScopes } from '@/views/Tokens/TokenScopes'
+import { Box, Button, FormControl, Input, Modal, ModalDialog, Typography } from '@mui/joy'
+import React, { ChangeEvent } from 'react'
+
+interface TokenModalProps {
+  title: string
+  current?: string
+  okText?: string
+  cancelText?: string
+
+  onClose: (newName: string | null, scopes: ApiTokenScope[]) => void
+}
+
+interface TokenModalState {
+  isOpen: boolean
+  name: string
+  errorName: boolean
+  scopes: ApiTokenScope[]
+}
+
+export class TokenModal extends React.Component<TokenModalProps, TokenModalState> {
+  private inputRef = React.createRef<HTMLDivElement>()
+
+  constructor(props: TokenModalProps) {
+    super(props)
+    this.state = {
+      isOpen: false,
+      name: props.current ?? '',
+      errorName: false,
+      scopes: [],
+    }
+  }
+
+  public open = async (): Promise<void> => {
+    await this.setState({
+      isOpen: true,
+    })
+
+    moveFocusToJoyInput(this.inputRef)
+  }
+
+  private onSave = () => {
+    const { name, scopes, errorName } = this.state
+
+    if (errorName) {
+      return
+    }
+
+    this.setState({
+      isOpen: false,
+      name: '',
+      scopes: [],
+    })
+
+    this.props.onClose(name, scopes)
+  }
+
+  private onCancel = () => {
+    this.setState({
+      isOpen: false,
+      name: '',
+      scopes: [],
+    })
+
+    this.props.onClose(null, [])
+  }
+
+  private onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({
+      name: e.target.value,
+      errorName: e.target.value.length === 0,
+    })
+  }
+
+  private onScopesChange = (scopes: ApiTokenScope[]) => {
+    this.setState({
+      scopes,
+    })
+  }
+
+  render(): React.ReactNode {
+    const { title, okText, cancelText } = this.props
+    const { name, isOpen, errorName, scopes } = this.state
+
+    const validState = name.length > 0 && scopes.length > 0
+
+    return (
+      <Modal
+        open={isOpen}
+        onClose={this.onCancel}
+      >
+        <ModalDialog>
+          <FormControl error>
+            <Typography>{title}</Typography>
+            <Input
+              placeholder='Name your token'
+              value={name}
+              onChange={this.onNameChange}
+              error={errorName}
+              ref={this.inputRef}
+              sx={{ minWidth: 300 }}
+            />
+          </FormControl>
+
+          <TokenScopes onChange={this.onScopesChange} />
+
+          <Box
+            display={'flex'}
+            justifyContent={'space-around'}
+            mt={1}
+          >
+            <Button
+              onClick={this.onSave}
+              fullWidth
+              disabled={!validState}
+              sx={{ mr: 1 }}
+            >
+              {okText ? okText : 'Save'}
+            </Button>
+            <Button
+              onClick={this.onCancel}
+              variant='outlined'
+            >
+              {cancelText ? cancelText : 'Cancel'}
+            </Button>
+          </Box>
+        </ModalDialog>
+      </Modal>
+    )
+  }
+}

src/views/Modals/Inputs/TokenModal.tsx

@@ -16,8 +16,9 @@ import {
 } from '@mui/joy'
 import moment from 'moment'
 import React from 'react'
-import { TextModal } from '../Modals/Inputs/TextModal'
+import { TokenModal } from '../Modals/Inputs/TokenModal'
 import { ConfirmationModal } from '../Modals/Inputs/ConfirmationModal'
+import { ApiTokenScope } from '@/utils/api'
 
 type APITokenSettingsProps = object
 
@@ -30,7 +31,7 @@ export class APITokenSettings extends React.Component<
   APITokenSettingsProps,
   APITokenSettingsState
 > {
-  private modalRef = React.createRef<TextModal>()
+  private modalRef = React.createRef<TokenModal>()
   private tokenToDelete: APIToken | null = null
   private confirmModalRef = React.createRef<ConfirmationModal>()
 
@@ -52,12 +53,12 @@ export class APITokenSettings extends React.Component<
     this.loadTokens()
   }
 
-  private handleSaveToken = async (name: string | null) => {
+  private handleSaveToken = async (name: string | null, scopes: ApiTokenScope[]) => {
     if (!name) {
       return
     }
 
-    const data = await CreateLongLiveToken(name)
+    const data = await CreateLongLiveToken(name, scopes)
     const newTokens = [...this.state.tokens]
     newTokens.push(data.token)
 
@@ -125,7 +126,7 @@ export class APITokenSettings extends React.Component<
               <Box>
                 <Typography level='body-md'>{token.name}</Typography>
                 <Typography level='body-xs'>
-                  {moment(token.createdAt).fromNow()}<br />({moment(token.createdAt).format('lll')})
+                  {moment(token.createdAt).fromNow()}<br />
                 </Typography>
               </Box>
               <Box>
@@ -179,7 +180,7 @@ export class APITokenSettings extends React.Component<
           Generate New Token
         </Button>
 
-        <TextModal
+        <TokenModal
           ref={this.modalRef}
           title='Give a name for your new token:'
           onClose={this.handleSaveToken}