131 lines
3.8 KiB
React
131 lines
3.8 KiB
React
|
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'>Long Live 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
|