|
|
|
<script lang="ts" setup>
|
|
|
|
import { Modal, message } from 'ant-design-vue'
|
|
|
|
import type { RequestParams, UserType } from 'nocodb-sdk'
|
|
|
|
import { Role, extractSdkResponseErrorMsg, useApi, useCopy, useDashboard, useNuxtApp } from '#imports'
|
|
|
|
import type { User } from '~/lib'
|
|
|
|
|
|
|
|
const { api, isLoading } = useApi()
|
|
|
|
|
|
|
|
const { $e } = useNuxtApp()
|
|
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
|
|
const { dashboardUrl } = $(useDashboard())
|
|
|
|
|
|
|
|
const { copy } = useCopy()
|
|
|
|
|
|
|
|
let users = $ref<UserType[]>([])
|
|
|
|
|
|
|
|
let currentPage = $ref(1)
|
|
|
|
|
|
|
|
const currentLimit = $ref(10)
|
|
|
|
|
|
|
|
const showUserModal = ref(false)
|
|
|
|
|
|
|
|
const searchText = ref<string>('')
|
|
|
|
|
|
|
|
const pagination = reactive({
|
|
|
|
total: 0,
|
|
|
|
pageSize: 10,
|
|
|
|
})
|
|
|
|
const loadUsers = async (page = currentPage, limit = currentLimit) => {
|
|
|
|
currentPage = page
|
|
|
|
try {
|
|
|
|
const response: any = await api.orgUsers.list({
|
|
|
|
query: {
|
|
|
|
limit,
|
|
|
|
offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
|
|
|
|
query: searchText.value,
|
|
|
|
},
|
|
|
|
} as RequestParams)
|
|
|
|
if (!response) return
|
|
|
|
|
|
|
|
pagination.total = response.pageInfo.totalRows ?? 0
|
|
|
|
pagination.pageSize = 10
|
|
|
|
|
|
|
|
users = response.list as UserType[]
|
|
|
|
} catch (e: any) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
loadUsers()
|
|
|
|
|
|
|
|
const updateRole = async (userId: string, roles: Role) => {
|
|
|
|
try {
|
|
|
|
await api.orgUsers.update(userId, {
|
|
|
|
roles,
|
|
|
|
} as unknown as UserType)
|
|
|
|
message.success('Role updated successfully')
|
|
|
|
} catch (e: any) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const deleteUser = async (userId: string) => {
|
|
|
|
Modal.confirm({
|
|
|
|
title: 'Are you sure you want to delete this user?',
|
|
|
|
type: 'warn',
|
|
|
|
content:
|
|
|
|
'On deleting, user will remove from from organization and any sync source(Airtable) created by user will get removed',
|
|
|
|
onOk: async () => {
|
|
|
|
try {
|
|
|
|
await api.orgUsers.delete(userId)
|
|
|
|
message.success('User deleted successfully')
|
|
|
|
await loadUsers()
|
|
|
|
} catch (e: any) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
const resendInvite = async (user: User) => {
|
|
|
|
try {
|
|
|
|
await api.orgUsers.resendInvite(user.id)
|
|
|
|
|
|
|
|
// Invite email sent successfully
|
|
|
|
message.success(t('msg.success.inviteEmailSent'))
|
|
|
|
await loadUsers()
|
|
|
|
} catch (e: any) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
|
|
|
|
$e('a:org-user:resend-invite')
|
|
|
|
}
|
|
|
|
|
|
|
|
const copyInviteUrl = (user: User) => {
|
|
|
|
if (!user.invite_token) return
|
|
|
|
|
|
|
|
copy(`${dashboardUrl}#/signup/${user.invite_token}`)
|
|
|
|
|
|
|
|
// Invite URL copied to clipboard
|
|
|
|
message.success(t('msg.success.inviteURLCopied'))
|
|
|
|
$e('c:user:copy-url')
|
|
|
|
}
|
|
|
|
|
|
|
|
const copyPasswordResetUrl = async (user: User) => {
|
|
|
|
try {
|
|
|
|
const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id)
|
|
|
|
|
|
|
|
copy(`${dashboardUrl}/auth/password/reset/${reset_password_url}`)
|
|
|
|
|
|
|
|
// Invite URL copied to clipboard
|
|
|
|
message.success(t('msg.success.inviteURLCopied'))
|
|
|
|
$e('c:user:copy-url')
|
|
|
|
} catch (e) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div data-cy="nc-super-user-list">
|
|
|
|
<div class="text-xl">User Management</div>
|
|
|
|
<a-divider class="!my-3" />
|
|
|
|
<div class="max-w-[900px] mx-auto p-4">
|
|
|
|
<div class="py-2 flex gap-4 items-center">
|
|
|
|
<a-input-search
|
|
|
|
v-model:value="searchText"
|
|
|
|
size="small"
|
|
|
|
class="max-w-[300px]"
|
|
|
|
placeholder="Filter by email"
|
|
|
|
@blur="loadUsers"
|
|
|
|
@keydown.enter="loadUsers"
|
|
|
|
>
|
|
|
|
</a-input-search>
|
|
|
|
<div class="flex-grow"></div>
|
|
|
|
<MdiReload class="cursor-pointer" @click="loadUsers" />
|
|
|
|
<a-button data-cy="nc-super-user-invite" size="small" type="primary" @click="showUserModal = true">
|
|
|
|
<div class="flex items-center gap-1">
|
|
|
|
<MdiAdd />
|
|
|
|
Invite new user
|
|
|
|
</div>
|
|
|
|
</a-button>
|
|
|
|
</div>
|
|
|
|
<a-table
|
|
|
|
:row-key="(record) => record.id"
|
|
|
|
:data-source="users"
|
|
|
|
:pagination="{ position: ['bottomCenter'] }"
|
|
|
|
:loading="isLoading"
|
|
|
|
size="small"
|
|
|
|
@change="loadUsers($event.current)"
|
|
|
|
>
|
|
|
|
<template #emptyText>
|
|
|
|
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<!-- Email -->
|
|
|
|
<a-table-column key="email" :title="$t('labels.email')" data-index="email">
|
|
|
|
<template #default="{ text }">
|
|
|
|
<div>
|
|
|
|
{{ text }}
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</a-table-column>
|
|
|
|
|
|
|
|
<!-- Role -->
|
|
|
|
<a-table-column key="roles" :title="$t('objects.role')" data-index="roles">
|
|
|
|
<template #default="{ record }">
|
|
|
|
<div>
|
|
|
|
<div v-if="record.roles.includes('super')" class="font-weight-bold">Super Admin</div>
|
|
|
|
<a-select
|
|
|
|
v-else
|
|
|
|
v-model:value="record.roles"
|
|
|
|
class="w-[220px]"
|
|
|
|
:dropdown-match-select-width="false"
|
|
|
|
@change="updateRole(record.id, record.roles)"
|
|
|
|
>
|
|
|
|
<a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
|
|
|
|
<div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
|
|
|
|
<span class="text-gray-500 text-xs whitespace-normal"
|
|
|
|
>Creator can create new projects and access any invited project.</span
|
|
|
|
>
|
|
|
|
</a-select-option>
|
|
|
|
|
|
|
|
<a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
|
|
|
|
<div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
|
|
|
|
<span class="text-gray-500 text-xs whitespace-normal"
|
|
|
|
>Viewer is not allowed to create new projects but they can access any invited project.</span
|
|
|
|
>
|
|
|
|
</a-select-option>
|
|
|
|
</a-select>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</a-table-column>
|
|
|
|
|
|
|
|
<!-- <!– Projects –>
|
|
|
|
<a-table-column key="projectsCount" :title="$t('objects.projects')" data-index="projectsCount">
|
|
|
|
<template #default="{ text }">
|
|
|
|
<div>
|
|
|
|
{{ text }}
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</a-table-column> -->
|
|
|
|
|
|
|
|
<!-- Actions -->
|
|
|
|
|
|
|
|
<a-table-column key="id" :title="$t('labels.actions')" data-index="id">
|
|
|
|
<template #default="{ text, record }">
|
|
|
|
<div v-if="!record.roles.includes('super')" class="flex items-center gap-2">
|
|
|
|
<MdiDeleteOutline data-cy="nc-super-user-delete" class="nc-action-btn cursor-pointer" @click="deleteUser(text)" />
|
|
|
|
|
|
|
|
<a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt">
|
|
|
|
<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>
|
|
|
|
<template v-if="record.invite_token">
|
|
|
|
<a-menu-item>
|
|
|
|
<!-- Resend invite Email -->
|
|
|
|
<div class="flex flex-row items-center py-3" @click="resendInvite(record)">
|
|
|
|
<MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" />
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item>
|
|
|
|
<div class="flex flex-row items-center py-3" @click="copyInviteUrl(record)">
|
|
|
|
<MdiContentCopy class="flex h-[1rem] text-gray-500" />
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.copyInviteURL') }}</div>
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</template>
|
|
|
|
<a-menu-item v-else>
|
|
|
|
<div class="flex flex-row items-center py-3" @click="copyPasswordResetUrl(record)">
|
|
|
|
<MdiContentCopy class="flex h-[1rem] text-gray-500" />
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.copyPasswordResetURL') }}</div>
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
<span v-else></span>
|
|
|
|
</template>
|
|
|
|
</a-table-column>
|
|
|
|
</a-table>
|
|
|
|
|
|
|
|
<LazyAccountUsersModal :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped></style>
|