mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
7.7 KiB
255 lines
7.7 KiB
2 years ago
|
<script lang="ts" setup>
|
||
2 years ago
|
import { Empty, Modal, message } from 'ant-design-vue'
|
||
|
import type { ApiTokenType, RequestParams, UserType } from 'nocodb-sdk'
|
||
|
import { extractSdkResponseErrorMsg, useApi, useCopy, useNuxtApp } from '#imports'
|
||
2 years ago
|
|
||
|
const { api, isLoading } = useApi()
|
||
|
|
||
2 years ago
|
const { $e } = useNuxtApp()
|
||
2 years ago
|
|
||
|
const { copy } = useCopy()
|
||
|
|
||
2 years ago
|
const { t } = useI18n()
|
||
|
|
||
2 years ago
|
let tokens = $ref<UserType[]>([])
|
||
|
|
||
|
let currentPage = $ref(1)
|
||
|
|
||
2 years ago
|
let showNewTokenModal = $ref(false)
|
||
|
|
||
2 years ago
|
const currentLimit = $ref(10)
|
||
|
|
||
2 years ago
|
let selectedTokenData = $ref<ApiTokenType>({})
|
||
2 years ago
|
|
||
|
const searchText = ref<string>('')
|
||
|
|
||
|
const pagination = reactive({
|
||
|
total: 0,
|
||
|
pageSize: 10,
|
||
|
})
|
||
|
const loadTokens = async (page = currentPage, limit = currentLimit) => {
|
||
|
currentPage = page
|
||
|
try {
|
||
|
const response: any = await api.orgTokens.list({
|
||
|
query: {
|
||
|
limit,
|
||
|
offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
|
||
|
},
|
||
|
} as RequestParams)
|
||
|
if (!response) return
|
||
|
|
||
|
pagination.total = response.pageInfo.totalRows ?? 0
|
||
|
pagination.pageSize = 10
|
||
|
|
||
|
tokens = response.list as UserType[]
|
||
2 years ago
|
} catch (e) {
|
||
2 years ago
|
message.error(await extractSdkResponseErrorMsg(e))
|
||
|
}
|
||
|
}
|
||
|
|
||
|
loadTokens()
|
||
|
|
||
2 years ago
|
const deleteToken = async (token: string) => {
|
||
2 years ago
|
Modal.confirm({
|
||
|
title: 'Are you sure you want to delete this token?',
|
||
|
type: 'warn',
|
||
2 years ago
|
onOk: async () => {
|
||
2 years ago
|
try {
|
||
|
// todo: delete token
|
||
2 years ago
|
await api.orgTokens.delete(token)
|
||
|
message.success('Token deleted successfully')
|
||
|
await loadTokens()
|
||
|
} catch (e) {
|
||
2 years ago
|
message.error(await extractSdkResponseErrorMsg(e))
|
||
|
}
|
||
|
},
|
||
|
})
|
||
|
}
|
||
|
|
||
2 years ago
|
const generateToken = async () => {
|
||
|
try {
|
||
|
await api.orgTokens.create(selectedTokenData)
|
||
|
showNewTokenModal = false
|
||
|
// Token generated successfully
|
||
|
message.success(t('msg.success.tokenGenerated'))
|
||
|
selectedTokenData = {}
|
||
|
await loadTokens()
|
||
|
} catch (e) {
|
||
|
message.error(await extractSdkResponseErrorMsg(e))
|
||
|
}
|
||
|
|
||
|
$e('a:api-token:generate')
|
||
|
}
|
||
|
|
||
|
const copyToken = (token: string | undefined) => {
|
||
|
if (!token) return
|
||
|
|
||
|
copy(token)
|
||
|
// Copied to clipboard
|
||
|
message.info(t('msg.info.copiedToClipboard'))
|
||
|
|
||
|
$e('c:api-token:copy')
|
||
|
}
|
||
2 years ago
|
</script>
|
||
|
|
||
|
<template>
|
||
2 years ago
|
<div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
|
||
2 years ago
|
<div class="text-xl mt-4">Token Management</div>
|
||
|
<a-divider class="!my-3" />
|
||
2 years ago
|
<div class="max-w-[900px] mx-auto p-4">
|
||
|
<div class="py-2 flex gap-4 items-center">
|
||
2 years ago
|
<div class="flex-grow"></div>
|
||
2 years ago
|
<MdiReload class="cursor-pointer" @click="loadTokens" />
|
||
2 years ago
|
<a-button size="small" @click="showNewTokenModal = true">
|
||
2 years ago
|
<div class="flex items-center gap-1">
|
||
|
<MdiAdd />
|
||
|
Add new token
|
||
|
</div>
|
||
|
</a-button>
|
||
|
</div>
|
||
|
<a-table
|
||
|
:row-key="(record) => record.id"
|
||
|
:data-source="tokens"
|
||
|
:pagination="{ position: ['bottomCenter'] }"
|
||
|
:loading="isLoading"
|
||
|
size="small"
|
||
2 years ago
|
@change="loadTokens($event.current)"
|
||
2 years ago
|
>
|
||
|
<template #emptyText>
|
||
|
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
|
||
|
</template>
|
||
|
|
||
2 years ago
|
<!-- Created By -->
|
||
2 years ago
|
<a-table-column key="created_by" :title="$t('labels.createdBy')" data-index="created_by">
|
||
2 years ago
|
<template #default="{ text }">
|
||
2 years ago
|
<div v-if="text">
|
||
|
{{ text }}
|
||
2 years ago
|
</div>
|
||
2 years ago
|
<div v-else class="text-gray-400">N/A</div>
|
||
2 years ago
|
</template>
|
||
|
</a-table-column>
|
||
|
|
||
2 years ago
|
<!-- Description -->
|
||
|
<a-table-column key="description" :title="$t('labels.description')" data-index="description">
|
||
|
<template #default="{ text }">
|
||
|
{{ text }}
|
||
|
</template>
|
||
|
</a-table-column>
|
||
|
|
||
2 years ago
|
<!-- Token -->
|
||
|
<a-table-column key="token" :title="$t('labels.token')" data-index="token">
|
||
|
<template #default="{ text, record }">
|
||
2 years ago
|
<div class="w-[320px]">
|
||
2 years ago
|
<span v-if="record.show">{{ text }}</span>
|
||
2 years ago
|
<span v-else>*******************************************</span>
|
||
2 years ago
|
</div>
|
||
|
</template>
|
||
|
</a-table-column>
|
||
|
|
||
|
<!-- Actions -->
|
||
|
|
||
2 years ago
|
<a-table-column key="actions" :title="$t('labels.actions')" data-index="token">
|
||
2 years ago
|
<template #default="{ record }">
|
||
|
<div class="flex items-center gap-2">
|
||
|
<a-tooltip placement="bottom">
|
||
|
<template #title>
|
||
|
<span v-if="record.show"> {{ $t('general.hide') }} </span>
|
||
|
<span v-else> {{ $t('general.show') }} </span>
|
||
|
</template>
|
||
|
|
||
|
<a-button type="text" class="!rounded-md" @click="record.show = !record.show">
|
||
|
<template #icon>
|
||
|
<MaterialSymbolsVisibilityOff v-if="record.show" class="flex mx-auto h-[1.1rem]" />
|
||
|
<MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
|
||
|
</template>
|
||
|
</a-button>
|
||
|
</a-tooltip>
|
||
|
|
||
|
<a-tooltip placement="bottom">
|
||
2 years ago
|
<template #title> {{ $t('general.copy') }}</template>
|
||
2 years ago
|
|
||
2 years ago
|
<a-button type="text" class="!rounded-md" @click="copyToken(record.token)">
|
||
2 years ago
|
<template #icon>
|
||
|
<MdiContentCopy class="flex mx-auto h-[1rem]" />
|
||
|
</template>
|
||
|
</a-button>
|
||
|
</a-tooltip>
|
||
|
|
||
2 years ago
|
<a-dropdown
|
||
|
:trigger="['click']"
|
||
|
class="flex"
|
||
|
placement="bottomRight"
|
||
|
overlay-class-name="nc-dropdown-api-token-mgmt"
|
||
|
>
|
||
2 years ago
|
<div class="flex flex-row items-center">
|
||
|
<a-button type="text" class="!px-0">
|
||
|
<div class="flex flex-row items-center h-[1.2rem]">
|
||
|
<IcBaselineMoreVert />
|
||
|
</div>
|
||
|
</a-button>
|
||
|
</div>
|
||
|
|
||
|
<template #overlay>
|
||
|
<a-menu>
|
||
|
<a-menu-item>
|
||
2 years ago
|
<div class="flex flex-row items-center py-3 h-[1rem]" @click="deleteToken(record.token)">
|
||
2 years ago
|
<MdiDeleteOutline class="flex" />
|
||
|
<div class="text-xs pl-2">{{ $t('general.remove') }}</div>
|
||
|
</div>
|
||
|
</a-menu-item>
|
||
|
</a-menu>
|
||
|
</template>
|
||
|
</a-dropdown>
|
||
|
</div>
|
||
|
</template>
|
||
|
</a-table-column>
|
||
|
</a-table>
|
||
|
</div>
|
||
|
|
||
|
<a-modal
|
||
|
v-model:visible="showNewTokenModal"
|
||
|
:closable="false"
|
||
|
width="28rem"
|
||
|
centered
|
||
|
:footer="null"
|
||
|
wrap-class-name="nc-modal-generate-token"
|
||
|
>
|
||
|
<div class="relative flex flex-col h-full">
|
||
|
<a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
|
||
|
<template #icon>
|
||
|
<MaterialSymbolsCloseRounded class="flex mx-auto" />
|
||
|
</template>
|
||
|
</a-button>
|
||
|
|
||
|
<!-- Generate Token -->
|
||
|
<div class="flex flex-row justify-center w-full -mt-1 mb-3">
|
||
|
<a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
|
||
|
</div>
|
||
|
|
||
|
<!-- Description -->
|
||
|
<a-form
|
||
|
ref="form"
|
||
|
:model="selectedTokenData"
|
||
|
name="basic"
|
||
|
layout="vertical"
|
||
|
class="flex flex-col justify-center space-y-6"
|
||
|
no-style
|
||
|
autocomplete="off"
|
||
|
@finish="generateToken"
|
||
|
>
|
||
|
<a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
|
||
|
|
||
|
<!-- Generate -->
|
||
|
<div class="flex flex-row justify-center">
|
||
|
<a-button type="primary" html-type="submit">
|
||
|
{{ $t('general.generate') }}
|
||
|
</a-button>
|
||
|
</div>
|
||
|
</a-form>
|
||
|
</div>
|
||
|
</a-modal>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<style scoped></style>
|