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.
286 lines
9.1 KiB
286 lines
9.1 KiB
3 years ago
|
<template>
|
||
|
|
<v-dialog v-model="userEditDialog" :width="invite_token ? 700 :700" @close="invite_token = null">
|
||
|
|
<v-card v-if="selectedUser" style="min-height: 100%" class="elevation-0">
|
||
|
|
<v-card-title>
|
||
|
|
{{ $t('activity.share') }} : {{ $store.getters['project/GtrProjectName'] }}
|
||
|
|
|
||
|
|
<div class="nc-header-border" />
|
||
|
|
</v-card-title>
|
||
|
|
|
||
|
|
<v-card-text>
|
||
|
|
<div>
|
||
|
|
<v-icon small>
|
||
|
|
mdi-account-outline
|
||
|
|
</v-icon>
|
||
|
|
<template v-if="invite_token">
|
||
|
|
Copy Invite Token
|
||
|
|
</template>
|
||
|
|
<template v-else-if="selectedUser.id">
|
||
|
|
Edit User
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<!-- Invite Team -->
|
||
|
|
{{ $t('activity.inviteTeam') }}
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="pa-4 nc-invite-container">
|
||
|
|
<div v-if="invite_token" class="mt-6 align-center">
|
||
|
|
<v-alert
|
||
|
|
v-ripple
|
||
|
|
type="success"
|
||
|
|
outlined
|
||
|
|
|
||
|
|
class="pointer"
|
||
|
|
@click="clipboard(inviteUrl); $toast.success('Copied invite url to clipboard').goAway(3000)"
|
||
|
|
>
|
||
|
|
<template #append>
|
||
|
|
<v-icon color="green" class="ml-2">
|
||
|
|
mdi-content-copy
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<div class="ellipsis d-100">
|
||
|
|
{{ inviteUrl }}
|
||
|
|
</div>
|
||
|
|
</v-alert>
|
||
|
|
|
||
|
|
<p class="caption grey--text mt-3">
|
||
|
|
{{ $t('msg.info.userInviteNoSMTP') }}
|
||
|
|
<!-- Looks like you have not configured mailer yet! <br>Please copy above -->
|
||
|
|
<!-- invite -->
|
||
|
|
<!-- link and send it to -->
|
||
|
|
{{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="text-right">
|
||
|
|
<!--tooltip="Invite more users"-->
|
||
|
|
<x-btn
|
||
|
|
:tooltip="$t('tooltip.inviteMore')"
|
||
|
|
small
|
||
|
|
outlined
|
||
|
|
btn.class="grey--text"
|
||
|
|
@click="clickInviteMore"
|
||
|
|
>
|
||
|
|
<v-icon small color="grey" class="mr-1">
|
||
|
|
mdi-account-multiple-plus-outline
|
||
|
|
</v-icon>
|
||
|
|
<!--Invite more-->
|
||
|
|
{{ $t('activity.inviteMore') }}
|
||
|
|
</x-btn>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- todo: show error message if failed-->
|
||
|
|
</div>
|
||
|
|
<template v-else>
|
||
|
|
<v-form ref="form" v-model="valid" @submit.prevent="saveUser">
|
||
|
|
<v-row class="my-0">
|
||
|
|
<v-col cols="8" class="py-0">
|
||
|
|
<!--hint="You can add multiple comma(,) separated emails"-->
|
||
|
|
<v-text-field
|
||
|
|
ref="email"
|
||
|
|
v-model="selectedUser.email"
|
||
|
|
:disabled="!!selectedUser.id"
|
||
|
|
dense
|
||
|
|
validate-on-blur
|
||
|
|
outlined
|
||
|
|
:rules="emailRules"
|
||
|
|
class="caption"
|
||
|
|
:hint="$t('msg.info.addMultipleUsers')"
|
||
|
|
label="Email"
|
||
|
|
@input="edited=true"
|
||
|
|
>
|
||
|
|
<template #label>
|
||
|
|
<span class="caption">
|
||
|
|
<!-- Email -->
|
||
|
|
{{ $t('labels.email') }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</v-text-field>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="4" class="py-0">
|
||
|
|
<!--label="Select User Role"-->
|
||
|
|
<v-combobox
|
||
|
|
v-model="selectedRoles"
|
||
|
|
outlined
|
||
|
|
:rules="roleRules"
|
||
|
|
class="role-select caption"
|
||
|
|
hide-details="auto"
|
||
|
|
:items="roles"
|
||
|
|
:label="$t('labels.selectUserRole')"
|
||
|
|
dense
|
||
|
|
deletable-chips
|
||
|
|
@change="edited = true"
|
||
|
|
>
|
||
|
|
<template #selection="{item}">
|
||
|
|
<v-chip small :color="rolesColors[item]">
|
||
|
|
{{ item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
<template #item="{item}">
|
||
|
|
<div>
|
||
|
|
<div>{{ item }}</div>
|
||
|
|
<div class="mb-2 caption grey--text">
|
||
|
|
{{ roleDescriptions[item] }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-form>
|
||
|
|
<div class="text-center mt-0">
|
||
|
|
<x-btn
|
||
|
|
v-ge="['rows','save']"
|
||
|
|
:tooltip="$t('tooltip.saveChanges')"
|
||
|
|
color="primary"
|
||
|
|
|
||
|
|
btn.class="nc-invite-or-save-btn"
|
||
|
|
@click="saveUser"
|
||
|
|
>
|
||
|
|
<v-icon small left>
|
||
|
|
{{ selectedUser.id ? 'save' : 'mdi-send' }}
|
||
|
|
</v-icon>
|
||
|
|
{{ selectedUser.id ? $t('general.save') : $t('activity.invite') }}
|
||
|
|
</x-btn>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<!-- </v-card-actions>-->
|
||
|
|
</div>
|
||
|
|
</v-card-text>
|
||
|
|
<v-card-text>
|
||
|
|
<share-base />
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { isEmail } from '~/helpers'
|
||
|
|
import { enumColor } from '~/components/project/spreadsheet/helpers/colors'
|
||
|
|
import ShareBase from '~/components/base/shareBase'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ShareOrInviteModal',
|
||
|
|
components: { ShareBase },
|
||
|
|
props: {
|
||
|
|
value: Boolean
|
||
|
|
},
|
||
|
|
data: () => ({
|
||
|
|
roles: ['creator', 'editor', 'commenter', 'viewer'],
|
||
|
|
selectedUser: {},
|
||
|
|
invite_token: null,
|
||
|
|
valid: null,
|
||
|
|
emailRules: [
|
||
|
|
v => !!v || 'E-mail is required',
|
||
|
|
(v) => {
|
||
|
|
const invalidEmails = (v || '').split(/\s*,\s*/).filter(e => !isEmail(e))
|
||
|
|
return !invalidEmails.length || `"${invalidEmails.join(', ')}" - invalid email`
|
||
|
|
}
|
||
|
|
],
|
||
|
|
roleRules: [
|
||
|
|
v => !!v || 'User Role is required',
|
||
|
|
v => ['creator', 'editor', 'commenter', 'viewer'].includes(v) || 'invalid user role'
|
||
|
|
],
|
||
|
|
userList: [],
|
||
|
|
roleDescriptions: {},
|
||
|
|
deleteUserType: ''
|
||
|
|
}),
|
||
|
|
computed: {
|
||
|
|
userEditDialog: {
|
||
|
|
get() {
|
||
|
|
return this.value
|
||
|
|
},
|
||
|
|
set(v) {
|
||
|
|
this.$emit('input', v)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
inviteUrl() {
|
||
|
|
return this.invite_token ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}` : null
|
||
|
|
},
|
||
|
|
rolesColors() {
|
||
|
|
const colors = this.$store.state.windows.darkTheme ? enumColor.dark : enumColor.light
|
||
|
|
return this.roles.reduce((o, r, i) => {
|
||
|
|
o[r] = colors[i % colors.length]
|
||
|
|
return o
|
||
|
|
}, {})
|
||
|
|
},
|
||
|
|
|
||
|
|
selectedRoles: {
|
||
|
|
get() {
|
||
|
|
return (this.selectedUser && this.selectedUser.roles ? this.selectedUser.roles.split(',') : []).sort((a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a))[0]
|
||
|
|
},
|
||
|
|
set(roles) {
|
||
|
|
if (this.selectedUser) {
|
||
|
|
this.selectedUser.roles = roles // .filter(Boolean).join(',')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
async saveUser() {
|
||
|
|
this.validate = true
|
||
|
|
await this.$nextTick()
|
||
|
|
if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$tele.emit(`user-mgmt:add:${this.selectedUser.roles}`)
|
||
|
|
|
||
|
|
if (!this.edited) {
|
||
|
|
this.userEditDialog = false
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
let data
|
||
|
|
if (this.selectedUser.id) {
|
||
|
|
await this.$api.auth.projectUserUpdate(this.$route.params.project_id, this.selectedUser.id, {
|
||
|
|
roles: this.selectedUser.roles,
|
||
|
|
email: this.selectedUser.email,
|
||
|
|
project_id: this.$route.params.project_id,
|
||
|
|
projectName: this.$store.getters['project/GtrProjectName']
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
data = (await this.$api.auth.projectUserAdd(this.$route.params.project_id, {
|
||
|
|
...this.selectedUser,
|
||
|
|
project_id: this.$route.params.project_id,
|
||
|
|
projectName: this.$store.getters['project/GtrProjectName']
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
this.$toast.success('Successfully updated the user details').goAway(3000)
|
||
|
|
this.$emit('saved')
|
||
|
|
if (data && data.invite_token) {
|
||
|
|
this.invite_token = data
|
||
|
|
// todo: bring anim
|
||
|
|
// this.simpleAnim()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
|
||
|
|
}
|
||
|
|
|
||
|
|
this.userEditDialog = false
|
||
|
|
},
|
||
|
|
|
||
|
|
clickInviteMore() {
|
||
|
|
this.$tele.emit('user-mgmt:invite-more')
|
||
|
|
this.invite_token = null
|
||
|
|
this.selectedUser = { roles: 'editor' }
|
||
|
|
},
|
||
|
|
clipboard(str) {
|
||
|
|
const el = document.createElement('textarea')
|
||
|
|
el.addEventListener('focusin', e => e.stopPropagation())
|
||
|
|
el.value = str
|
||
|
|
document.body.appendChild(el)
|
||
|
|
el.select()
|
||
|
|
document.execCommand('copy')
|
||
|
|
document.body.removeChild(el)
|
||
|
|
|
||
|
|
this.$tele.emit('user-mgmt:copy-url')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|