ability to remove editors and invites

src/lib/components/Modals/ServerInvitation.svelte

@@ -4,7 +4,9 @@
   import * as timeago from 'timeago.js'
   import { page } from '$app/stores'
 
-  const { supabase } = $page.data
+  const { supabase, session } = $page.data
+
+  const owner = session?.user
 
   let loading = false
   let email = ''
@@ -61,6 +63,35 @@
     } else return data
   }
 
+  async function remove_editor(user_id) {
+    loading = true
+    const { data: success } = await axios.delete('/api/invitations', {
+      params: {
+        user: user_id,
+        server_invitation: true,
+      },
+    })
+    if (success) {
+      get_collaborators().then((res) => {
+        editors = res
+      })
+    }
+    loading = false
+  }
+
+  async function cancel_invitation(email) {
+    loading = true
+    const { data: success } = await axios.put('/api/invitations', {
+      email,
+    })
+    if (success) {
+      get_invitations().then((res) => {
+        invitations = res
+      })
+    }
+    loading = false
+  }
+
   const Role = (role) =>
     ({
       DEV: 'Developer',
@@ -112,6 +143,13 @@
               <span class="letter">{email[0]}</span>
               <span class="email">{email}</span>
               <span>Sent {timeago.format(created_at)}</span>
+              <button
+                class="site-button"
+                on:click={() => cancel_invitation(email)}
+              >
+                <Icon icon="pepicons-pop:trash" />
+                <span>Cancel</span>
+              </button>
             </li>
           {/each}
         </ul>
@@ -125,6 +163,15 @@
             <span class="letter">{user.email[0]}</span>
             <span class="email">{user.email}</span>
             <span class="role">{Role(role)}</span>
+            {#if user.id !== owner.id}
+              <button
+                class="site-button"
+                on:click={() => remove_editor(user.id)}
+              >
+                <Icon icon="pepicons-pop:trash" />
+                <span>Remove</span>
+              </button>
+            {/if}
           </li>
         {/each}
       </ul>

src/lib/components/Modals/SiteInvitation.svelte

@@ -2,6 +2,7 @@
   import axios from 'axios'
   import * as timeago from 'timeago.js'
   import { page } from '$app/stores'
+  import Icon from '@iconify/svelte'
 
   export let site
 
@@ -74,6 +75,37 @@
         return { role: item.role, ...item.user }
       })
   }
+
+  async function remove_editor(user_id) {
+    loading = true
+    const { data: success } = await axios.delete('/api/invitations', {
+      params: {
+        site: site.id,
+        user: user_id,
+        server_invitation: false,
+      },
+    })
+    if (success) {
+      get_collaborators(site.id).then((res) => {
+        editors = res
+      })
+    }
+    loading = false
+  }
+
+  async function cancel_invitation(email) {
+    loading = true
+    const { data: success } = await axios.put('/api/invitations', {
+      site: site.id,
+      email,
+    })
+    if (success) {
+      get_invitations(site.id).then((res) => {
+        invitations = res
+      })
+    }
+    loading = false
+  }
 </script>
 
 <div class="Invitation">
@@ -107,6 +139,13 @@
               <span class="letter">{email[0]}</span>
               <span class="email">{email}</span>
               <span>Sent {timeago.format(created_at)}</span>
+              <button
+                class="site-button"
+                on:click={() => cancel_invitation(email)}
+              >
+                <Icon icon="pepicons-pop:trash" />
+                <span>Cancel</span>
+              </button>
             </li>
           {/each}
         </ul>
@@ -120,11 +159,15 @@
           <span class="email">{owner.email}</span>
           <span class="role">Owner</span>
         </li>
-        {#each editors as { role, email }}
+        {#each editors as { id, role, email }}
           <li>
             <span class="letter">{email[0]}</span>
             <span class="email">{email}</span>
             <span class="role">{role}</span>
+            <button class="site-button" on:click={() => remove_editor(id)}>
+              <Icon icon="pepicons-pop:trash" />
+              <span>Remove</span>
+            </button>
           </li>
         {/each}
       </ul>

src/routes/api/invitations/+server.js

@@ -59,3 +59,39 @@ export async function POST({ request }) {
   console.error(error)
   return json({ success: !error, error: error?.message })
 }
+
+export async function DELETE({ url }) {
+  const user = url.searchParams.get('user')
+  const site = url.searchParams.get('site')
+  const server_invitation = url.searchParams.get('server_invitation') === 'true'
+
+  // Remove from 'server_members' or 'collaborators'
+  const { error } = server_invitation ?
+    await supabase_admin
+      .from('server_members')
+      .delete()
+      .eq('user', user)
+    : await supabase_admin
+      .from('collaborators')
+      .delete()
+      .match({ user, site })
+
+  console.error(error)
+  return json({ success: !error, error: error?.message })
+}
+
+export async function PUT({ request }) {
+  const {
+    email,
+    site = null
+  } = await request.json()
+
+  // Remove from 'invitations'
+  const { error } = await supabase_admin
+    .from('collaborators')
+    .delete()
+    .match({ email, site })
+
+  console.error(error)
+  return json({ success: !error, error: error?.message })
+}