From ee60eb6829bdb5f93222e555a7ddd87f886cb7e7 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 22 Mar 2021 18:45:32 +0000
Subject: [PATCH] feat(frontend): invites: adds invitation sending for server &
 stream collabs dialogs

---
 .../frontend/src/components/UserMenuTop.vue   | 118 ++++++++++-------
 .../components/dialogs/ServerInviteDialog.vue | 114 +++++++++++++++++
 .../components/dialogs/StreamInviteDialog.vue | 120 ++++++++++++++++++
 .../components/dialogs/StreamShareDialog.vue  |  16 ++-
 4 files changed, 316 insertions(+), 52 deletions(-)
 create mode 100644 packages/frontend/src/components/dialogs/ServerInviteDialog.vue
 create mode 100644 packages/frontend/src/components/dialogs/StreamInviteDialog.vue

diff --git a/packages/frontend/src/components/UserMenuTop.vue b/packages/frontend/src/components/UserMenuTop.vue
index 407a09c80..f105bbbd0 100644
--- a/packages/frontend/src/components/UserMenuTop.vue
+++ b/packages/frontend/src/components/UserMenuTop.vue
@@ -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()
diff --git a/packages/frontend/src/components/dialogs/ServerInviteDialog.vue b/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
new file mode 100644
index 000000000..962724a0a
--- /dev/null
+++ b/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
@@ -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>
diff --git a/packages/frontend/src/components/dialogs/StreamInviteDialog.vue b/packages/frontend/src/components/dialogs/StreamInviteDialog.vue
new file mode 100644
index 000000000..5ecf61fcc
--- /dev/null
+++ b/packages/frontend/src/components/dialogs/StreamInviteDialog.vue
@@ -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>
diff --git a/packages/frontend/src/components/dialogs/StreamShareDialog.vue b/packages/frontend/src/components/dialogs/StreamShareDialog.vue
index be9a1e5a1..9186dd363 100644
--- a/packages/frontend/src/components/dialogs/StreamShareDialog.vue
+++ b/packages/frontend/src/components/dialogs/StreamShareDialog.vue
@@ -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: {