feat(frontend): invites: adds invitation sending for server & stream collabs dialogs
This commit is contained in:
Dimitrie Stefanescu
@@ -1,56 +1,73 @@
|
||||
<template>
|
||||
<v-menu v-if="user" bottom left offset-y>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn icon v-bind="attrs" height="38" width="38" class="ml-3" v-on="on">
|
||||
<v-avatar color="background" size="38">
|
||||
<v-img v-if="user.avatar" :src="user.avatar" />
|
||||
<v-img v-else :src="`https://robohash.org/` + user.id + `.png?size=38x38`" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list class="py-0 my-0">
|
||||
<v-list-item to="/profile">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
<b>{{ user.name }}</b>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>View your profile</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon small>mdi-account</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="!this.$vuetify.theme.dark" link @click="switchTheme">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Dark theme</v-list-item-title>
|
||||
<v-list-item-subtitle>Switch to a dark theme</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon small>mdi-weather-night</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item v-else exact @click="switchTheme">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Light theme</v-list-item-title>
|
||||
<v-list-item-subtitle>Switch to a light theme</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon small>mdi-white-balance-sunny</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item @click="signOut">
|
||||
<v-list-item-content class="error--text">Sign out</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon small class="error--text">mdi-exit-to-app</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<div>
|
||||
<v-menu v-if="user" bottom left offset-y>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn icon v-bind="attrs" height="38" width="38" class="ml-3" v-on="on">
|
||||
<v-avatar color="background" size="38">
|
||||
<v-img v-if="user.avatar" :src="user.avatar" />
|
||||
<v-img v-else :src="`https://robohash.org/` + user.id + `.png?size=38x38`" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list class="py-0 my-0">
|
||||
<v-list-item to="/profile">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
<b>Hi, {{ user.name }}!</b>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>View your profile</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item @click="inviteDialog++">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
<b>Send an invite</b>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>Speckle is more fun in multiplayer :)</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-new-box</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="!this.$vuetify.theme.dark" link @click="switchTheme">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Dark theme</v-list-item-title>
|
||||
<v-list-item-subtitle>Switch to a dark theme</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-weather-night</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item v-else exact @click="switchTheme">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Light theme</v-list-item-title>
|
||||
<v-list-item-subtitle>Switch to a light theme</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-white-balance-sunny</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item @click="signOut">
|
||||
<v-list-item-content class="error--text">Sign out</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon class="error--text">mdi-exit-to-app</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<server-invite-dialog :show="inviteDialog" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { signOut } from '@/auth-helpers'
|
||||
import ServerInviteDialog from './dialogs/ServerInviteDialog.vue'
|
||||
export default {
|
||||
components: { ServerInviteDialog },
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
@@ -65,6 +82,11 @@ export default {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inviteDialog: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
signOut() {
|
||||
signOut()
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-dialog v-model="showDialog" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title v-show="!success">Send a server invite</v-card-title>
|
||||
<v-alert v-model="showError" dismissible type="error" :class="`${success ? 'mb-0' : ''}`">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
<v-alert v-model="success" dismissible type="success">
|
||||
Great! An invite link has been sent.
|
||||
<br />
|
||||
Send another one?
|
||||
</v-alert>
|
||||
<v-form
|
||||
v-show="!success"
|
||||
ref="form"
|
||||
v-model="valid"
|
||||
class="px-2"
|
||||
@submit.prevent="sendInvite"
|
||||
>
|
||||
<v-card-text class="pb-0 mb-0">
|
||||
We will send an invite link for this server to the email below. You can also add a
|
||||
personal message if you want to.
|
||||
</v-card-text>
|
||||
<v-card-text class="pt-0 mt-0">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
:rules="validation.emailRules"
|
||||
label="email"
|
||||
></v-text-field>
|
||||
<v-text-field v-model="message" label="message"></v-text-field>
|
||||
<v-card-actions>
|
||||
<v-btn block color="primary" type="submit">Send invite</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default {
|
||||
name: 'ServerInviteDialog',
|
||||
props: {
|
||||
show: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDialog: false,
|
||||
email: null,
|
||||
message: 'Hey, join this Speckle Server!',
|
||||
valid: false,
|
||||
error: null,
|
||||
showError: false,
|
||||
success: false,
|
||||
validation: {
|
||||
emailRules: [
|
||||
(v) => !!v || 'E-mail is required',
|
||||
(v) => /.+@.+\..+/.test(v) || 'E-mail must be valid'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show() {
|
||||
this.showDialog = true
|
||||
},
|
||||
showDialog() {
|
||||
this.clear()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this.error = null
|
||||
this.showError = false
|
||||
this.email = null
|
||||
this.success = false
|
||||
this.message = 'Hey, join this Speckle Server!'
|
||||
},
|
||||
async sendInvite() {
|
||||
if (!this.$refs.form.validate()) return
|
||||
|
||||
this.$matomo && this.$matomo.trackPageView('invite/create')
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: gql`
|
||||
mutation($input: ServerInviteCreateInput!) {
|
||||
serverInviteCreate(input: $input)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
input: {
|
||||
email: this.email,
|
||||
message: this.message
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.clear()
|
||||
this.success = true
|
||||
} catch (e) {
|
||||
this.clear()
|
||||
this.showError = true
|
||||
this.error = e.message
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-dialog v-model="showDialog" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title v-show="!success">Send a stream invite</v-card-title>
|
||||
<v-alert v-model="showError" dismissible type="error" :class="`${success ? 'mb-0' : ''}`">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
<v-alert v-model="success" dismissible type="success">
|
||||
Great! An invite link has been sent.
|
||||
<br />
|
||||
Send another one?
|
||||
</v-alert>
|
||||
<v-form
|
||||
v-show="!success"
|
||||
ref="form"
|
||||
v-model="valid"
|
||||
class="px-2"
|
||||
@submit.prevent="sendInvite"
|
||||
>
|
||||
<v-card-text class="pb-0 mb-0">
|
||||
We will send an invite link for this server to the email below and once your guest will
|
||||
accept the invite, <b>they will be granted access to this stream</b>. You can also add a
|
||||
personal message if you want to.
|
||||
</v-card-text>
|
||||
<v-card-text class="pt-0 mt-0">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
:rules="validation.emailRules"
|
||||
label="email"
|
||||
></v-text-field>
|
||||
<v-text-field v-model="message" label="message"></v-text-field>
|
||||
<v-card-actions>
|
||||
<v-btn block color="primary" type="submit">Send invite</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default {
|
||||
name: 'ServerInviteDialog',
|
||||
props: {
|
||||
show: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
streamId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDialog: false,
|
||||
email: null,
|
||||
message: 'Hey, I want to share this stream with you!',
|
||||
valid: false,
|
||||
error: null,
|
||||
showError: false,
|
||||
success: false,
|
||||
validation: {
|
||||
emailRules: [
|
||||
(v) => !!v || 'E-mail is required',
|
||||
(v) => /.+@.+\..+/.test(v) || 'E-mail must be valid'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show() {
|
||||
this.showDialog = true
|
||||
},
|
||||
showDialog() {
|
||||
this.clear()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this.error = null
|
||||
this.showError = false
|
||||
this.email = null
|
||||
this.success = false
|
||||
this.message = 'Hey, I want to share this stream with you!'
|
||||
},
|
||||
async sendInvite() {
|
||||
if (!this.$refs.form.validate()) return
|
||||
|
||||
this.$matomo && this.$matomo.trackPageView('invite/stream/create')
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: gql`
|
||||
mutation($input: StreamInviteCreateInput!) {
|
||||
streamInviteCreate(input: $input)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
input: {
|
||||
email: this.email,
|
||||
message: this.message,
|
||||
streamId: this.streamId
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.clear()
|
||||
this.success = true
|
||||
} catch (e) {
|
||||
this.clear()
|
||||
this.showError = true
|
||||
this.error = e.message
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -21,12 +21,17 @@
|
||||
>
|
||||
<v-list-item v-if="filteredSearchResults.length === 0" class="px-0 mx-0">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>No users found.</v-list-item-title>
|
||||
<v-list-item-title>No users found. Note: you can search by name and email.</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
Note: you can search by name as well as email.
|
||||
Hint: use the button below to send an invite!
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="filteredSearchResults.length === 0" class="px-0 mx-0">
|
||||
<v-list-item-content>
|
||||
<v-btn block color="primary" @click="inviteDialog++">Invite {{ search }}</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
v-for="item in filteredSearchResults"
|
||||
:key="item.id"
|
||||
@@ -54,6 +59,7 @@
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
<stream-invite-dialog :show="inviteDialog" :streamId="stream.id"/>
|
||||
<v-card-title>Existing collaborators</v-card-title>
|
||||
<v-card-text class="px-0">
|
||||
<v-list>
|
||||
@@ -106,9 +112,10 @@ import serverQuery from '../../graphql/server.gql'
|
||||
import streamCollaboratorsQuery from '../../graphql/streamCollaborators.gql'
|
||||
import userSearchQuery from '../../graphql/userSearch.gql'
|
||||
import UserAvatar from '../UserAvatar'
|
||||
import StreamInviteDialog from './StreamInviteDialog'
|
||||
|
||||
export default {
|
||||
components: { UserAvatar },
|
||||
components: { UserAvatar, StreamInviteDialog },
|
||||
props: ['streamId', 'userId'],
|
||||
data: () => ({
|
||||
search: '',
|
||||
@@ -116,7 +123,8 @@ export default {
|
||||
selectedRole: null,
|
||||
userSearch: { items: [] },
|
||||
serverInfo: { roles: [] },
|
||||
loading: false
|
||||
loading: false,
|
||||
inviteDialog: 0
|
||||
}),
|
||||
apollo: {
|
||||
stream: {
|
||||
|
||||
Reference in New Issue
Block a user