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

fix: team settings page

pull/5627/head
DarkPhoenix2704 1 year ago
parent
82f67656a1
commit
fccc08ddb6
4 changed files with 85 additions and 92 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. 20
      packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
  2. 24
      packages/nc-gui/components/tabs/auth/UserManagement.vue
  3. 101
      packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
  4. 32
      packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

20
packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
Unescape View File

@ -119,7 +119,7 @@ onMounted(() => {
</a-button>
<!-- Generate Token -->
<div class="flex flex-row justify-center w-full -mt-1 mb-3">
<div class="flex flex-row justify-start w-full -mt-1 mb-3">
<a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
</div>
@ -129,16 +129,16 @@ onMounted(() => {
:model="selectedTokenData"
name="basic"
layout="vertical"
class="flex flex-col justify-center space-y-6"
class="flex flex-col justify-center space-y-3"
no-style
autocomplete="off"
@finish="generateToken"
>
<a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
<a-input v-model:value="selectedTokenData.description" size="middle" :placeholder="$t('labels.description')" />
<!-- Generate -->
<div class="flex flex-row justify-center">
<a-button type="primary" html-type="submit">
<div class="flex flex-row justify-end">
<a-button type="primary" html-type="submit" class="!rounded-md">
{{ $t('general.generate') }}
</a-button>
</div>
@ -157,9 +157,9 @@ onMounted(() => {
<div class="flex flex-col h-full">
<div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
<div class="flex mt-6 justify-center space-x-2">
<a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
<a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
<div class="flex mt-6 justify-end space-x-2">
<a-button class="!rounded-md" @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
<a-button class="!rounded-md" type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
</div>
</div>
</a-modal>
@ -175,7 +175,7 @@ onMounted(() => {
</a-button>
<!-- Add New Token -->
<a-button size="middle" type="primary" ghost @click="openNewTokenModal">
<a-button size="middle" class="!rounded-md" @click="openNewTokenModal">
<div class="flex flex-row justify-center items-center caption capitalize space-x-1">
<component :is="iconMap.plus" />
<div>{{ $t('activity.newToken') }}</div>
@ -244,7 +244,7 @@ onMounted(() => {
<template #overlay>
<a-menu>
<a-menu-item>
<div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
<div class="flex flex-row items-center py-4 h-[1rem]" @click="openDeleteModal(item)">
<component :is="iconMap.delete" class="flex" />
<div class="text-xs pl-2">{{ $t('general.remove') }}</div>
</div>

24
packages/nc-gui/components/tabs/auth/UserManagement.vue
Unescape View File

@ -204,6 +204,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
:closable="false"
width="28rem"
centered
class="!rounded-md"
:footer="null"
wrap-class-name="nc-modal-delete-user"
>
@ -211,9 +212,9 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
<div class="flex flex-row justify-center mt-2 text-center w-full text-base">
This action will remove this user from this project
</div>
<div class="flex mt-6 justify-center space-x-2">
<a-button @click="showUserDeleteModal = false"> {{ $t('general.cancel') }}</a-button>
<a-button type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }}</a-button>
<div class="flex mt-6 justify-end space-x-2">
<a-button class="!rounded-md" @click="showUserDeleteModal = false"> {{ $t('general.cancel') }}</a-button>
<a-button class="!rounded-md" type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }}</a-button>
</div>
</div>
</a-modal>
@ -239,9 +240,8 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
v-if="isUIAllowed('newUser')"
v-e="['c:user:invite']"
size="middle"
type="primary"
ghost
class="nc-invite-team"
type="default"
class="nc-invite-team !rounded-md"
@click="onInvite"
>
<div class="flex flex-row justify-center items-center caption capitalize space-x-1">
@ -254,12 +254,12 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
<div class="px-5">
<div class="flex flex-row border-b-1 pb-2 px-2">
<div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
<div class="flex flex-row w-3/6 space-x-1 items-center pl-1">
<component :is="iconMap.email" class="flex text-gray-500 -mt-0.5" />
<div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
</div>
<div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
<div class="flex flex-row justify-start w-2/6 space-x-1 items-center pl-1">
<component :is="iconMap.role" class="flex text-gray-500 -mt-0.5" />
<div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div>
@ -270,21 +270,21 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
</div>
<div v-for="(user, index) of users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2 nc-user-row">
<div class="flex w-4/6 flex-wrap nc-user-email">
<div class="flex w-3/6 flex-wrap nc-user-email">
{{ user.email }}
</div>
<div class="flex w-1/6 justify-center flex-wrap ml-4">
<div class="flex w-2/6 justify-start gap-2 flex-wrap ml-4">
<div
v-if="isSuperAdmin(user)"
class="rounded-full px-2 py-1 nc-user-role"
class="rounded-full px-3 py-1 nc-user-role"
:style="{ backgroundColor: projectRoleTagColors[OrgUserRoles.SUPER_ADMIN] }"
>
Super Admin
</div>
<div
v-if="user.roles"
class="rounded-full px-2 py-1 nc-user-role"
class="rounded-full px-3 py-1 nc-user-role"
:style="{ backgroundColor: projectRoleTagColors[user.roles] }"
>
{{ $t(`objects.roleType.${user.roles}`) }}

101
packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
Unescape View File

@ -152,13 +152,55 @@ onMounted(() => {
</script>
<template>
<div class="flex flex-col w-full" data-testid="nc-share-base-sub-modal">
<div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
<component :is="iconMap.share" />
<div class="flex flex-col gap-2 w-full" data-testid="nc-share-base-sub-modal">
<!-- Generate publicly shareable readonly base -->
<div class="flex text-xs text-gray-500 justify-start ml-1">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
<div class="text-xs">{{ $t('activity.shareBase.link') }}</div>
</div>
<div class="flex flex-row justify-between mx-1">
<a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
<a-button>
<div class="flex flex-row rounded-md items-center space-x-2 nc-disable-shared-base">
<div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
<div v-else>{{ $t('activity.shareBase.disable') }}</div>
<IcRoundKeyboardArrowDown class="h-[1rem]" />
</div>
</a-button>
<template #overlay>
<a-menu>
<a-menu-item>
<div v-if="base?.uuid" class="py-3" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
<div v-else class="py-3" @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-select
v-if="base?.uuid"
v-model:value="base.role"
class="flex nc-shared-base-role"
dropdown-class-name="nc-dropdown-share-base-role"
>
<template #suffixIcon>
<div class="flex flex-row">
<IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
</div>
</template>
<a-select-option
v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
:key="index"
:value="role"
dropdown-class-name="capitalize"
@click="createShareBase(role)"
>
<div class="w-full px-2 capitalize">
{{ role }}
</div>
</a-select-option>
</a-select>
</div>
<div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
<span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2 nc-url">{{ url }}</span>
@ -212,54 +254,5 @@ onMounted(() => {
</a-tooltip>
</div>
</div>
<!-- Generate publicly shareable readonly base -->
<div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
<div class="mt-4 flex flex-row justify-between mx-1">
<a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
<a-button>
<div class="flex flex-row items-center space-x-2 nc-disable-shared-base">
<div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
<div v-else>{{ $t('activity.shareBase.disable') }}</div>
<IcRoundKeyboardArrowDown class="h-[1rem]" />
</div>
</a-button>
<template #overlay>
<a-menu>
<a-menu-item>
<div v-if="base?.uuid" class="py-3" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
<div v-else class="py-3" @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-select
v-if="base?.uuid"
v-model:value="base.role"
class="flex nc-shared-base-role"
dropdown-class-name="nc-dropdown-share-base-role"
>
<template #suffixIcon>
<div class="flex flex-row">
<IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
</div>
</template>
<a-select-option
v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
:key="index"
:value="role"
dropdown-class-name="capitalize"
@click="createShareBase(role)"
>
<div class="w-full px-2 capitalize">
{{ role }}
</div>
</a-select-option>
</a-select>
</div>
</div>
</template>

32
packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
Unescape View File

@ -230,19 +230,13 @@ watch(
</template>
<div v-else class="flex flex-col pb-4">
<div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
<div v-if="selectedUser" class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
<component :is="iconMap.account" />
<div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? $t('activity.editUser') : $t('activity.inviteTeam') }}</div>
</div>
<div class="border-1 py-3 px-4 rounded-md mt-1">
<a-form
ref="formRef"
:validate-on-rule-change="false"
:model="usersData"
validate-trigger="onBlur"
@finish="saveUser"
>
<a-form ref="formRef" :validate-on-rule-change="false" :model="usersData" validate-trigger="onBlur" @finish="saveUser">
<div class="border-1 py-3 px-4 rounded-md mt-1">
<div class="flex flex-row space-x-4">
<div class="flex flex-col w-3/4">
<a-form-item
@ -256,6 +250,7 @@ watch(
<a-input
ref="emailField"
v-model:value="usersData.emails"
size="middle"
validate-trigger="onBlur"
:placeholder="$t('labels.email')"
:disabled="!!selectedUser"
@ -267,11 +262,16 @@ watch(
<a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
<div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
<a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
<a-select
v-model:value="usersData.role"
size="middle"
class="nc-user-roles !rounded-md"
dropdown-class-name="nc-dropdown-user-role"
>
<a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
<div class="flex flex-row h-full justify-start items-center">
<div
class="px-2 py-1 flex rounded-full text-xs"
class="px-3 py-1 flex rounded-full text-xs"
:style="{ backgroundColor: projectRoleTagColors[role] }"
>
{{ role }}
@ -283,8 +283,8 @@ watch(
</div>
</div>
<div class="flex flex-row justify-center">
<a-button type="primary" html-type="submit">
<div class="flex flex-row justify-end">
<a-button type="primary" html-type="submit" class="!rounded-md">
<div v-if="selectedUser">{{ $t('general.save') }}</div>
<div v-else class="flex flex-row justify-center items-center space-x-1.5">
@ -293,11 +293,11 @@ watch(
</div>
</a-button>
</div>
</a-form>
</div>
</div>
</a-form>
</div>
<div class="flex mt-4">
<div class="flex">
<LazyTabsAuthUserManagementShareBase />
</div>
</div>

Write Preview
Loading…
Cancel
Save