github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: token description size limited

pull/6420/head
sreehari jayaraj 1 year ago
parent
1826da8ed5
commit
915d4a5cb1
1 changed files with 96 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      packages/nc-gui/components/account/Token.vue

55
packages/nc-gui/components/account/Token.vue
Unescape View File

@ -90,7 +90,7 @@ const deleteToken = async (token: string): Promise<void> => {
}
const generateToken = async () => {
isTokenNameEmpty.value = !selectedTokenData.value.description?.length
isTokenNameEmpty.value = !selectedTokenData.value.description?.length || selectedTokenData.value.description?.length > 255
if (isTokenNameEmpty.value) return
try {
@ -100,11 +100,10 @@ const generateToken = async () => {
// message.success(t('msg.success.tokenGenerated'))
selectedTokenData.value = {}
await loadTokens()
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
} finally {
$e('a:api-token:generate')
}
}
const copyToken = async (token: string | undefined) => {
if (!token) return
@ -128,6 +127,14 @@ const triggerDeleteModal = (tokenToDelete: string, tokenDescription: string) =>
const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
const errorMessage = computed(() => {
if (!selectedTokenData.value.description?.length) {
return 'Token name should not be empty'
} else if (selectedTokenData.value.description?.length > 255) {
return 'Token name should not be more than 255 characters'
}
})
const handleCancel = () => {
showNewTokenModal.value = false
isTokenNameEmpty.value = false
@ -155,47 +162,52 @@ const handleCancel = () => {
</NcButton>
</div>
<span>Create personal API tokens to use in automation or external apps.</span>
<div class="w-[780px] mt-5 border-1 rounded-md">
<div class="w-[780px] mt-5 border-1 rounded-md min-h-[520px]">
<div>
<div class="flex w-full pl-5 bg-gray-50 border-b-1">
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">Token name</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">Creator</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">Token</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-center">Actions</span>
<span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">Actions</span>
</div>
<main>
<div
v-if="showNewTokenModal"
class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate"
>
<div v-if="showNewTokenModal">
<div class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate">
<div class="flex flex-col w-full">
<a-input
:ref="descriptionInput"
v-model:value="selectedTokenData.description"
type="text"
class="!rounded-lg !py-2"
class="!rounded-lg !py-1"
placeholder="Token Name"
data-testid="nc-token-input"
/>
<span v-if="isTokenNameEmpty" class="text-red-500 text-xs font-light mt-1.5 ml-1"
>token name should not be empty</span
>
<span v-if="isTokenNameEmpty" class="text-red-500 text-xs font-light mt-1.5 ml-1">{{ errorMessage }} </span>
</div>
<div class="flex gap-2 justify-start">
<NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel">
{{ $t('general.cancel') }}
</NcButton>
<NcButton type="primary" size="sm" :is-loading="isLoading" data-testid="nc-token-save-btn" @click="generateToken">
<NcButton
type="primary"
size="sm"
:is-loading="isLoading"
data-testid="nc-token-save-btn"
@click="generateToken"
>
{{ $t('general.save') }}
</NcButton>
</div>
</div>
<NcDivider />
</div>
<div v-if="!tokens.length">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="`${$t('general.no')} ${$t('labels.token')}`" />
</div>
<div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
<span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
<GeneralTruncateText placement="top" length="25">
<GeneralTruncateText placement="top" length="20">
{{ el.description }}
</GeneralTruncateText>
</span>
@ -205,14 +217,14 @@ const handleCancel = () => {
</GeneralTruncateText>
</span>
<span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
<GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="28">
<GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
{{ el.token }}
</GeneralTruncateText>
<span v-else>**********************************</span>
<span v-else>**************************************</span>
</span>
<!-- ACTIONS -->
<span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
<div class="flex justify-center gap-3">
<span class="text-gray-500 font-medium text-3.5 w-2/9">
<div class="flex justify-end gap-3 pr-5">
<component
:is="iconMap.eyeSlash"
v-if="el.token === selectedToken.id && selectedToken.isShow"
@ -237,7 +249,8 @@ const handleCancel = () => {
</div>
</main>
</div>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
</div>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-15">
<a-pagination
v-model:current="currentPage"
:total="pagination.total"

Write Preview
Loading…
Cancel
Save