aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Settings/APITokenSettings.jsx
blob: 6262906063fb8abe727acb42776bf1e979da4e3c (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import { Box, Button, Card, Chip, Divider, Typography } from '@mui/joy'
import moment from 'moment'
import { useContext, useEffect, useState } from 'react'
import { UserContext } from '../../contexts/UserContext'
import {
  CreateLongLiveToken,
  DeleteLongLiveToken,
  GetLongLiveTokens,
} from '../../utils/Fetcher'
import { isPlusAccount } from '../../utils/Helpers'
import TextModal from '../Modals/Inputs/TextModal'

const APITokenSettings = () => {
  const [tokens, setTokens] = useState([])
  const [isGetTokenNameModalOpen, setIsGetTokenNameModalOpen] = useState(false)
  const { userProfile, setUserProfile } = useContext(UserContext)
  useEffect(() => {
    GetLongLiveTokens().then(resp => {
      resp.json().then(data => {
        setTokens(data.res)
      })
    })
  }, [])

  const handleSaveToken = name => {
    CreateLongLiveToken(name).then(resp => {
      if (resp.ok) {
        resp.json().then(data => {
          // add the token to the list:
          console.log(data)
          const newTokens = [...tokens]
          newTokens.push(data.res)
          setTokens(newTokens)
        })
      }
    })
  }

  return (
    <div className='grid gap-4 py-4' id='apitokens'>
      <Typography level='h3'>Access Token</Typography>
      <Divider />
      <Typography level='body-sm'>
        Create token to use with the API to update things that trigger task or
        chores
      </Typography>
      {!isPlusAccount(userProfile) && (
        <Chip variant='soft' color='warning'>
          Not available in Basic Plan
        </Chip>
      )}

      {tokens.map(token => (
        <Card key={token.token} className='p-4'>
          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
            <Box>
              <Typography level='body-md'>{token.name}</Typography>
              <Typography level='body-xs'>
                {moment(token.createdAt).fromNow()}(
                {moment(token.createdAt).format('lll')})
              </Typography>
            </Box>
            <Box>
              {token.token && (
                <Button
                  variant='outlined'
                  color='primary'
                  sx={{ mr: 1 }}
                  onClick={() => {
                    navigator.clipboard.writeText(token.token)
                    alert('Token copied to clipboard')
                  }}
                >
                  Copy Token
                </Button>
              )}

              <Button
                variant='outlined'
                color='danger'
                onClick={() => {
                  const confirmed = confirm(
                    `Are you sure you want to remove ${token.name} ?`,
                  )
                  if (confirmed) {
                    DeleteLongLiveToken(token.id).then(resp => {
                      if (resp.ok) {
                        alert('Token removed')
                        const newTokens = tokens.filter(t => t.id !== token.id)
                        setTokens(newTokens)
                      }
                    })
                  }
                }}
              >
                Remove
              </Button>
            </Box>
          </Box>
        </Card>
      ))}

      <Button
        variant='soft'
        color='primary'
        disabled={!isPlusAccount(userProfile)}
        sx={{
          width: '210px',
          mb: 1,
        }}
        onClick={() => {
          setIsGetTokenNameModalOpen(true)
        }}
      >
        Generate New Token
      </Button>
      <TextModal
        isOpen={isGetTokenNameModalOpen}
        title='Give a name for your new token, something to remember it by.'
        onClose={() => {
          setIsGetTokenNameModalOpen(false)
        }}
        okText={'Generate Token'}
        onSave={handleSaveToken}
      />
    </div>
  )
}

export default APITokenSettings