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 12 months 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. 179
      packages/nc-gui/components/account/Token.vue

179
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,10 +100,9 @@ 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')
}
$e('a:api-token:generate')
}
const copyToken = async (token: string | undefined) => {
@ -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,89 +162,95 @@ 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="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>
</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 class="flex flex-col w-full">
<a-input
:ref="descriptionInput"
v-model:value="selectedTokenData.description"
type="text"
class="!rounded-lg !py-2"
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
>
<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 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">Actions</span>
</div>
<main>
<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-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">{{ 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"
>
{{ $t('general.save') }}
</NcButton>
</div>
</div>
<NcDivider />
</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">
{{ $t('general.save') }}
</NcButton>
<div v-if="!tokens.length">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="`${$t('general.no')} ${$t('labels.token')}`" />
</div>
</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">
{{ el.description }}
</GeneralTruncateText>
</span>
<span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
<GeneralTruncateText placement="top" length="20">
{{ el.created_by }}
</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">
{{ el.token }}
</GeneralTruncateText>
<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">
<component
:is="iconMap.eyeSlash"
v-if="el.token === selectedToken.id && selectedToken.isShow"
class="hover::cursor-pointer"
@click="hideOrShowToken(el.token as string)"
/>
<component
:is="iconMap.eye"
v-else
class="nc-toggle-token-visibility hover::cursor-pointer"
@click="hideOrShowToken(el.token as string)"
/>
<component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
<component
:is="iconMap.delete"
data-testid="nc-token-row-action-icon"
class="nc-delete-icon hover::cursor-pointer"
@click="triggerDeleteModal(el.token as string, el.description as string)"
/>
</div>
</span>
</div>
</main>
<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="20">
{{ el.description }}
</GeneralTruncateText>
</span>
<span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
<GeneralTruncateText placement="top" length="20">
{{ el.created_by }}
</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="29">
{{ el.token }}
</GeneralTruncateText>
<span v-else>**************************************</span>
</span>
<!-- ACTIONS -->
<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"
class="hover::cursor-pointer"
@click="hideOrShowToken(el.token as string)"
/>
<component
:is="iconMap.eye"
v-else
class="nc-toggle-token-visibility hover::cursor-pointer"
@click="hideOrShowToken(el.token as string)"
/>
<component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
<component
:is="iconMap.delete"
data-testid="nc-token-row-action-icon"
class="nc-delete-icon hover::cursor-pointer"
@click="triggerDeleteModal(el.token as string, el.description as string)"
/>
</div>
</span>
</div>
</main>
</div>
</div>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
<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