From 6124ec74afab3246ac1b96530ad19e529f59fff7 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 17 Apr 2024 16:01:09 -0700
Subject: [PATCH 01/19] Add wip invite panel

---
 backend/src/appointment/routes/invite.py |   5 +
 frontend/src/router.js                   |   5 +
 frontend/src/views/InvitePanelView.vue   | 165 +++++++++++++++++++++++
 3 files changed, 175 insertions(+)
 create mode 100644 frontend/src/views/InvitePanelView.vue

diff --git a/backend/src/appointment/routes/invite.py b/backend/src/appointment/routes/invite.py
index 29eef5b8e..972ebba06 100644
--- a/backend/src/appointment/routes/invite.py
+++ b/backend/src/appointment/routes/invite.py
@@ -12,6 +12,11 @@
 router = APIRouter()
 
 
+@router.get('/', response_model=list[schemas.Invite])
+def get_all_invites(db: Session = Depends(get_db)):
+    return db.query(models.Invite).all()
+
+
 @router.post("/generate/{n}", response_model=list[schemas.Invite])
 def generate_invite_codes(n: int, db: Session = Depends(get_db)):
     raise NotImplementedError
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 53f487079..254fea0fe 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -90,6 +90,11 @@ const routes = [
     name: 'terms',
     component: LegalView,
   },
+  {
+    path: '/admin/invites',
+    name: 'admin-invite-panel',
+    component: () => import('@/views/InvitePanelView.vue'),
+  },
 ];
 
 // create router object to export
diff --git a/frontend/src/views/InvitePanelView.vue b/frontend/src/views/InvitePanelView.vue
new file mode 100644
index 000000000..80a32dbbd
--- /dev/null
+++ b/frontend/src/views/InvitePanelView.vue
@@ -0,0 +1,165 @@
+<template>
+  <!-- page title area -->
+  <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-4">
+    <div class="flex w-full flex-row justify-between">
+      <div class="flex w-full items-center text-left">
+        <a href="#generate">Go to Generate Invites</a>
+      </div>
+      <div class="flex w-full items-center justify-end gap-2 text-right">
+        <label for="used-filter">Used Filter</label>
+        <select id="used-filter" class="rounded-md" v-model="usedFilter">
+          <option value="all">Show All</option>
+          <option value="unused">Show Unused</option>
+          <option value="used">Show Used</option>
+        </select>
+
+        <label for="status-filter">Status Filter</label>
+        <select id="status-filter" class="rounded-md" v-model="inviteFilter">
+          <option value="all">Show All</option>
+          <option value="available">Show Available</option>
+          <option value="revoked">Show Revoked</option>
+        </select>
+      </div>
+    </div>
+    <div class="round-support-div mb-4 ml-auto mr-0">
+      <table>
+        <thead>
+        <tr>
+          <th>Code</th>
+          <th>Used</th>
+          <th>Status</th>
+          <th>Time Created</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="invite in filteredInvites" :key="invite.code">
+          <td>{{ invite.code }}</td>
+          <td>{{ invite.subscriber_id !== null ? 'Yes' : 'No' }}</td>
+          <td>{{ invite.status === 1 ? 'Available' : 'Revoked' }}</td>
+          <td>{{ invite.time_created }}</td>
+        </tr>
+        <tr v-if="filteredInvites.length === 0">
+          <td colspan="4">No invites of this type could be found.</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <div id="generate" class="w-full">
+      <div class="flex w-full max-w-xs flex-col gap-4">
+        <label for="invite-amount">Generate Invites</label>
+        <input id="invite-amount" class="w-full rounded-md text-sm" type="number" placeholder="Amount" v-model="amountOfInvitesToGenerate"/>
+        <p>Generate {{ amountOfInvitesToGenerate }} invites. They will be added to the list below.</p>
+        <div class="max-w-xs">
+          <primary-button @click="generateInvites">Generate!</primary-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/*
+ * Not dealing with tailwinding every single td
+ */
+.round-support-div {
+  @apply rounded-t-xl w-full border pt-2 border-gray-100 bg-white text-sm shadow-sm dark:border-gray-500 dark:bg-gray-700;
+}
+
+table {
+  @apply w-full table-auto border-collapse bg-white text-sm shadow-sm dark:bg-gray-600;
+}
+
+thead {
+  @apply border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
+}
+
+th {
+  @apply w-1/2 p-4 text-left font-semibold border-gray-200 dark:border-gray-500;
+}
+
+td {
+  @apply border border-gray-200 p-4 dark:border-gray-500;
+}
+
+td:first-child {
+  @apply border-l-0;
+}
+
+td:last-child {
+  @apply border-r-0;
+}
+</style>
+
+<script setup>
+import {
+  computed, inject, onMounted, ref,
+} from 'vue';
+import { keyByValue } from '@/utils';
+import { useI18n } from 'vue-i18n';
+import { subscriberLevels } from '@/definitions';
+import { useUserStore } from '@/stores/user-store';
+import { storeToRefs } from 'pinia';
+import PrimaryButton from '@/elements/PrimaryButton';
+import SecondaryButton from '@/elements/SecondaryButton';
+
+// icons
+import { IconPencil } from '@tabler/icons-vue';
+import { useRouter } from 'vue-router';
+
+// component constants
+const user = useUserStore();
+const call = inject('call');
+
+// component constants
+const { t } = useI18n();
+
+const usedFilter = ref('all');
+const inviteFilter = ref('all');
+const invites = ref([]);
+const amountOfInvitesToGenerate = ref(0);
+
+const filteredInvites = computed(() => {
+  if (inviteFilter.value === 'all' && usedFilter.value === 'all') {
+    return invites.value;
+  }
+
+  let filtered = invites.value;
+  if (inviteFilter.value !== 'all') {
+    filtered = filtered.filter((invite) => (invite.status === 1 ? inviteFilter.value === 'available' : inviteFilter.value !== 'available'));
+  }
+
+  if (usedFilter.value !== 'all') {
+    filtered = filtered.filter((invite) => (invite.subscriber_id === null ? usedFilter.value === 'unused' : usedFilter.value !== 'unused'));
+  }
+
+  return filtered;
+});
+
+const getInvites = async () => {
+  const response = await call('invite/').get().json();
+  const { data } = response;
+
+  invites.value = data.value;
+};
+
+const generateInvites = async () => {
+  // Parse it as a string to remove any bad bits..this probably works fine right?
+  const amount = parseInt(`${amountOfInvitesToGenerate.value}`, 10);
+  if (!amount) {
+    return;
+  }
+
+  amountOfInvitesToGenerate.value = 0;
+
+  const response = await call(`invite/generate/${amount}`).post().json();
+  const { data } = response;
+
+  invites.value = [...invites.value, ...data.value];
+};
+
+onMounted(async () => {
+  await getInvites();
+  console.log(amountOfInvitesToGenerate.value);
+});
+
+</script>

From 4d15cb0341e134375c7409706f78aa4c023fcb2e Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 14:27:43 -0700
Subject: [PATCH 02/19] =?UTF-8?q?=E2=9E=95=20Add=20admin=20subscribers=20l?=
 =?UTF-8?q?ist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andreas Müller <mail@devmount.de>
---
 backend/src/appointment/main.py              |   2 +
 backend/src/appointment/routes/subscriber.py |  32 +++++
 frontend/src/router.js                       |   9 +-
 frontend/src/views/SubscriberPanelView.vue   | 125 +++++++++++++++++++
 4 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 backend/src/appointment/routes/subscriber.py
 create mode 100644 frontend/src/views/SubscriberPanelView.vue

diff --git a/backend/src/appointment/main.py b/backend/src/appointment/main.py
index 53a22b5d7..362cec2de 100644
--- a/backend/src/appointment/main.py
+++ b/backend/src/appointment/main.py
@@ -121,6 +121,7 @@ def server():
     from .routes import google
     from .routes import schedule
     from .routes import invite
+    from .routes import subscriber
     from .routes import zoom
     from .routes import webhooks
 
@@ -189,6 +190,7 @@ async def catch_google_refresh_errors(request, exc):
     app.include_router(google.router, prefix="/google")
     app.include_router(schedule.router, prefix="/schedule")
     app.include_router(invite.router, prefix="/invite")
+    app.include_router(subscriber.router, prefix="/subscriber")
     app.include_router(webhooks.router, prefix="/webhooks")
     if os.getenv("ZOOM_API_ENABLED"):
         app.include_router(zoom.router, prefix="/zoom")
diff --git a/backend/src/appointment/routes/subscriber.py b/backend/src/appointment/routes/subscriber.py
new file mode 100644
index 000000000..3cbaee8f6
--- /dev/null
+++ b/backend/src/appointment/routes/subscriber.py
@@ -0,0 +1,32 @@
+
+from fastapi import APIRouter, Depends
+
+from sqlalchemy.orm import Session
+
+from ..database import repo, schemas, models
+from ..database.models import Subscriber
+from ..dependencies.auth import get_admin_subscriber
+from ..dependencies.database import get_db
+
+from ..exceptions import validation
+
+router = APIRouter()
+
+
+@router.get('/', response_model=list[schemas.Subscriber])
+def get_all_subscriber(db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+    """List all existing invites, needs admin permissions"""
+    return db.query(models.Subscriber).all()
+
+
+@router.put("/disable/{email}")
+def disable_subscriber(email: str, db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+    """endpoint to disable a subscriber by email, needs admin permissions"""
+    raise NotImplementedError
+
+    subscriber = repo.subscriber.get_by_email(db, email)
+    if not subscriber:
+        raise validation.SubscriberNotFoundException()
+    # TODO: CAUTION! This actually deletes the subscriber. We might want to only disable them.
+    # This needs an active flag on the subscribers model.
+    return repo.subscriber.delete(db, subscriber)
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 254fea0fe..43012c17a 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -14,6 +14,8 @@ const AppointmentsView = defineAsyncComponent(() => import('@/views/Appointments
 const SettingsView = defineAsyncComponent(() => import('@/views/SettingsView'));
 const ProfileView = defineAsyncComponent(() => import('@/views/ProfileView'));
 const LegalView = defineAsyncComponent(() => import('@/views/LegalView'));
+const InvitePanelView = defineAsyncComponent(() => import('@/views/InvitePanelView'));
+const SubscriberPanelView = defineAsyncComponent(() => import('@/views/SubscriberPanelView'));
 
 /**
  * Defined routes for Thunderbird Appointment
@@ -93,7 +95,12 @@ const routes = [
   {
     path: '/admin/invites',
     name: 'admin-invite-panel',
-    component: () => import('@/views/InvitePanelView.vue'),
+    component: InvitePanelView,
+  },
+  {
+    path: '/admin/subscribers',
+    name: 'admin-subscriber-panel',
+    component: SubscriberPanelView,
   },
 ];
 
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/SubscriberPanelView.vue
new file mode 100644
index 000000000..faf89f632
--- /dev/null
+++ b/frontend/src/views/SubscriberPanelView.vue
@@ -0,0 +1,125 @@
+<template>
+  <!-- page title area -->
+  <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-4">
+    <div class="flex flex-row justify-between items-center w-full">
+      <div>
+        <span class="font-bold">{{ filteredSubscribers.length }}</span> Subscribers
+      </div>
+      <list-pagination
+        :list-length="filteredSubscribers.length"
+        :page-size="pageSize"
+        @update="updatePage"
+      />
+    </div>
+    <div class="data-table">
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Invite code used</th>
+            <th>Time Created</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="subscriber in paginatedSubscribers" :key="subscriber.id">
+            <td>
+              <code>{{ subscriber.id }}</code>
+            </td>
+            <td>
+              <code>{{ subscriber.username }}</code>
+            </td>
+            <td>
+              {{ subscriber.email }}
+            </td>
+            <td>TODO</td>
+            <td class="whitespace-nowrap">{{ dj(subscriber.time_created).format('ll LTS') }}</td>
+            <td class="w-28 py-2">
+              <!-- TODO -->
+              <caution-button
+                disabled
+                :label="'Disable'"
+                class="text-sm px-4 h-8"
+                @click="disableSubscriber(subscriber.email)"
+              />
+            </td>
+          </tr>
+          <tr v-if="filteredSubscribers.length === 0">
+            <td colspan="5">No subscribers could be found.</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <th colspan="6">
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from '@/stores/user-store';
+import CautionButton from '@/elements/CautionButton.vue';
+import ListPagination from '@/elements/ListPagination.vue';
+
+// component constants
+const user = useUserStore();
+const call = inject('call');
+const dj = inject('dayjs');
+
+// component constants
+const { t } = useI18n();
+
+// pagination
+const pageSize = 10;
+const currentPage = ref(0);
+const updatePage = (index) => {
+  currentPage.value = index;
+}
+
+// subscriber specific props
+const subscribers = ref([]);
+
+const filteredSubscribers = computed(() => {
+  let filtered = subscribers.value;
+
+  return filtered;
+});
+
+const paginatedSubscribers = computed(() => {
+  return filteredSubscribers.value.length
+    ? filteredSubscribers.value.slice(currentPage.value*pageSize, (currentPage.value+1)*pageSize)
+    : [];
+});
+
+const getSubscribers = async () => {
+  const response = await call('subscriber/').get().json();
+  const { data } = response;
+
+  subscribers.value = data.value;
+};
+
+const disableSubscriber = async (email) => {
+  if (!email) {
+    return;
+  }
+
+  const response = await call(`subscriber/disable/${email}`).put().json();
+  const { data } = response;
+
+  if (data.value) {
+    await getSubscribers();
+  }
+};
+
+onMounted(async () => {
+  await getSubscribers();
+});
+
+</script>

From 183b540a3f14c73db0854ce61020ca8010ae3379 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 14:31:04 -0700
Subject: [PATCH 03/19] =?UTF-8?q?=E2=9E=95=20Add=20pagination=20and=20code?=
 =?UTF-8?q?=20revokal=20for=20invite=20codes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andreas Müller <mail@devmount.de>
---
 backend/src/appointment/routes/invite.py |   2 -
 frontend/src/elements/ListPagination.vue |  92 ++++++++++++++
 frontend/src/views/InvitePanelView.vue   | 149 ++++++++++++++++-------
 3 files changed, 196 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/elements/ListPagination.vue

diff --git a/backend/src/appointment/routes/invite.py b/backend/src/appointment/routes/invite.py
index 972ebba06..f783a132b 100644
--- a/backend/src/appointment/routes/invite.py
+++ b/backend/src/appointment/routes/invite.py
@@ -19,7 +19,6 @@ def get_all_invites(db: Session = Depends(get_db)):
 
 @router.post("/generate/{n}", response_model=list[schemas.Invite])
 def generate_invite_codes(n: int, db: Session = Depends(get_db)):
-    raise NotImplementedError
     """endpoint to generate n invite codes"""
     return repo.invite.generate_codes(db, n)
 
@@ -41,7 +40,6 @@ def use_invite_code(code: str, db: Session = Depends(get_db)):
 
 @router.put("/revoke/{code}")
 def revoke_invite_code(code: str, db: Session = Depends(get_db)):
-    raise NotImplementedError
     """endpoint to revoke a given invite code and mark in unavailable"""
     if not repo.invite.code_exists(db, code):
         raise validation.InviteCodeNotFoundException()
diff --git a/frontend/src/elements/ListPagination.vue b/frontend/src/elements/ListPagination.vue
new file mode 100644
index 000000000..313fad212
--- /dev/null
+++ b/frontend/src/elements/ListPagination.vue
@@ -0,0 +1,92 @@
+<template>
+  <nav class="flex items-center flex-nowrap gap-2" :class="{ 'hidden': !listLength }">
+    <button @click="prev" :disabled="isFirstPage" :class="{ 'text-gray-500': isFirstPage }">
+      <icon-chevron-left class="w-5 h-5 stroke-1.5" />
+    </button>
+    <div
+      v-for="(p, i) in pageCount" :key="i"
+      v-show="showPageItem(p)"
+    >
+      <div v-show="showFirstEllipsis(p)">&hellip;</div>
+      <button
+        class="cursor-pointer px-2 py-1"
+        :class="{ 'text-gray-500': (p-1) == currentPage }"
+        v-show="showPageItemLink(p)"
+        @click="goto(p-1)"
+      >
+        {{ p }}
+      </button>
+      <div v-show="showLastEllipsis(p)">&hellip;</div>
+    </div>
+    <button @click="next" :disabled="isLastPage" :class="{ 'text-gray-500': isLastPage }">
+      <icon-chevron-right class="w-5 h-5 stroke-1.5" />
+    </button>
+  </nav>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// icons
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-vue';
+
+// component constants
+const { t } = useI18n();
+
+// component properties and emits
+const props = defineProps({
+  listLength: Number, // number of total items in the displayed list
+  pageSize: Number, // number of items per page
+});
+const emit = defineEmits(['update'])
+
+const currentPage = ref(0); // index of active page
+
+const isFirstPage = computed(() => {
+	return currentPage.value <= 0;
+});
+const pageCount = computed(() => {
+	return Math.ceil(props.listLength/props.pageSize);
+});
+const isLastPage = computed(() => {
+	return currentPage.value >= pageCount.value-1;
+});
+
+const prev = () => {
+  if (!isFirstPage.value) {
+    currentPage.value--;
+    emit('update', currentPage.value);
+  }
+};
+const next = () => {
+  if (!isLastPage.value) {
+    currentPage.value++;
+    emit('update', currentPage.value);
+  }
+};
+const goto = (index) => {
+  currentPage.value = index;
+  emit('update', currentPage.value);
+};
+
+const showPageItem = (p) => {
+	return pageCount.value < 6 || p == 1 || p == 2 || isVisibleInnerPage(p) || p == pageCount.value-1;
+};
+const showFirstEllipsis = (p) => {
+	return pageCount.value >= 6 && currentPage.value > 2 && p == 2;
+};
+const showPageItemLink = (p) => {
+	return pageCount.value < 6 || p == 1 || isVisibleInnerPage(p);
+};
+const showLastEllipsis = (p) => {
+	return pageCount.value >= 6 && currentPage.value < pageCount.value-3 && p == pageCount.value-1;
+};
+
+const isVisibleInnerPage = (p) => (currentPage.value == 0 && p == 3)
+		|| ((currentPage.value == 0 || currentPage.value == 1) && p == 4)
+		|| (p > currentPage.value-1 && p < currentPage.value+3)
+		|| ((currentPage.value == pageCount.value-1 || currentPage.value == pageCount.value-2) && p == pageCount.value-3)
+		|| (currentPage.value == pageCount.value-1 && p == pageCount.value-2)
+    || p == pageCount.value;
+</script>
diff --git a/frontend/src/views/InvitePanelView.vue b/frontend/src/views/InvitePanelView.vue
index 80a32dbbd..ca79cfa94 100644
--- a/frontend/src/views/InvitePanelView.vue
+++ b/frontend/src/views/InvitePanelView.vue
@@ -1,19 +1,24 @@
 <template>
   <!-- page title area -->
   <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-4">
-    <div class="flex w-full flex-row justify-between">
-      <div class="flex w-full items-center text-left">
-        <a href="#generate">Go to Generate Invites</a>
+    <div class="flex flex-row justify-between items-center w-full">
+      <div>
+        <span class="font-bold">{{ filteredInvites.length }}</span> invite codes
       </div>
-      <div class="flex w-full items-center justify-end gap-2 text-right">
-        <label for="used-filter">Used Filter</label>
+      <list-pagination
+        :list-length="filteredInvites.length"
+        :page-size="pageSize"
+        @update="updatePage"
+      />
+      <div class="flex items-center justify-end gap-2 text-right">
+        <label for="used-filter" class="whitespace-nowrap">Used Filter</label>
         <select id="used-filter" class="rounded-md" v-model="usedFilter">
           <option value="all">Show All</option>
           <option value="unused">Show Unused</option>
           <option value="used">Show Used</option>
         </select>
 
-        <label for="status-filter">Status Filter</label>
+        <label for="status-filter" class="whitespace-nowrap">Status Filter</label>
         <select id="status-filter" class="rounded-md" v-model="inviteFilter">
           <option value="all">Show All</option>
           <option value="available">Show Available</option>
@@ -21,39 +26,60 @@
         </select>
       </div>
     </div>
-    <div class="round-support-div mb-4 ml-auto mr-0">
+    <div class="
+      rounded-xl w-full border py-2 border-gray-100 bg-white text-sm shadow-sm
+      dark:border-gray-500 dark:bg-gray-700 mb-4 ml-auto mr-0
+    ">
       <table>
         <thead>
-        <tr>
-          <th>Code</th>
-          <th>Used</th>
-          <th>Status</th>
-          <th>Time Created</th>
-        </tr>
+          <tr>
+            <th>Code</th>
+            <th>Used</th>
+            <th>Status</th>
+            <th>Time Created</th>
+            <th></th>
+          </tr>
         </thead>
         <tbody>
-        <tr v-for="invite in filteredInvites" :key="invite.code">
-          <td>{{ invite.code }}</td>
-          <td>{{ invite.subscriber_id !== null ? 'Yes' : 'No' }}</td>
-          <td>{{ invite.status === 1 ? 'Available' : 'Revoked' }}</td>
-          <td>{{ invite.time_created }}</td>
-        </tr>
-        <tr v-if="filteredInvites.length === 0">
-          <td colspan="4">No invites of this type could be found.</td>
-        </tr>
+          <tr v-for="invite in paginatedInvites" :key="invite.code">
+            <td><code>{{ invite.code }}</code></td>
+            <td>{{ invite.subscriber_id !== null ? 'Yes' : 'No' }}</td>
+            <td>{{ invite.status === 1 ? 'Available' : 'Revoked' }}</td>
+            <td class="whitespace-nowrap">{{ dj(invite.time_created).format('ll LTS') }}</td>
+            <td class="w-28 py-2">
+              <caution-button
+                v-if="invite.status !== 2"
+                :label="'Revoke'"
+                class="text-sm px-4 h-8"
+                @click="revokeInvite(invite.code)"
+              />
+            </td>
+          </tr>
+          <tr v-if="filteredInvites.length === 0">
+            <td colspan="5">No invites of this type could be found.</td>
+          </tr>
         </tbody>
+        <tfoot>
+          <tr>
+            <th colspan="5">
+              <div class="flex w-full gap-4">
+                <label>
+                  Generate
+                  <input
+                    class="w-20 rounded-md text-sm"
+                    type="number"
+                    placeholder="Amount"
+                    v-model="amountOfInvitesToGenerate"
+                  />
+                  invite codes. They will be added to this list.
+                </label>
+                <primary-button :label="'Generate'" @click="generateInvites" />
+              </div>
+            </th>
+          </tr>
+        </tfoot>
       </table>
     </div>
-    <div id="generate" class="w-full">
-      <div class="flex w-full max-w-xs flex-col gap-4">
-        <label for="invite-amount">Generate Invites</label>
-        <input id="invite-amount" class="w-full rounded-md text-sm" type="number" placeholder="Amount" v-model="amountOfInvitesToGenerate"/>
-        <p>Generate {{ amountOfInvitesToGenerate }} invites. They will be added to the list below.</p>
-        <div class="max-w-xs">
-          <primary-button @click="generateInvites">Generate!</primary-button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -61,20 +87,22 @@
 /*
  * Not dealing with tailwinding every single td
  */
-.round-support-div {
-  @apply rounded-t-xl w-full border pt-2 border-gray-100 bg-white text-sm shadow-sm dark:border-gray-500 dark:bg-gray-700;
-}
-
 table {
   @apply w-full table-auto border-collapse bg-white text-sm shadow-sm dark:bg-gray-600;
 }
 
-thead {
+thead, tfoot {
   @apply border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
 }
 
 th {
-  @apply w-1/2 p-4 text-left font-semibold border-gray-200 dark:border-gray-500;
+  @apply px-4 text-left font-semibold border-gray-200 dark:border-gray-500;
+}
+thead th {
+  @apply pb-4 pt-2;
+}
+tfoot th {
+  @apply pb-2 pt-4;
 }
 
 td {
@@ -91,16 +119,14 @@ td:last-child {
 </style>
 
 <script setup>
-import {
-  computed, inject, onMounted, ref,
-} from 'vue';
-import { keyByValue } from '@/utils';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { subscriberLevels } from '@/definitions';
 import { useUserStore } from '@/stores/user-store';
 import { storeToRefs } from 'pinia';
 import PrimaryButton from '@/elements/PrimaryButton';
-import SecondaryButton from '@/elements/SecondaryButton';
+import CautionButton from '@/elements/CautionButton.vue';
+import ListPagination from '@/elements/ListPagination.vue';
 
 // icons
 import { IconPencil } from '@tabler/icons-vue';
@@ -109,15 +135,29 @@ import { useRouter } from 'vue-router';
 // component constants
 const user = useUserStore();
 const call = inject('call');
+const dj = inject('dayjs');
 
 // component constants
 const { t } = useI18n();
 
+// pagination
+const pageSize = 10;
+const currentPage = ref(0);
+const updatePage = (index) => {
+  currentPage.value = index;
+}
+
+// invite specific props
 const usedFilter = ref('all');
 const inviteFilter = ref('all');
 const invites = ref([]);
 const amountOfInvitesToGenerate = ref(0);
 
+// reset page when filter changes
+watch([usedFilter, inviteFilter], () => {
+  currentPage.value = 0;
+});
+
 const filteredInvites = computed(() => {
   if (inviteFilter.value === 'all' && usedFilter.value === 'all') {
     return invites.value;
@@ -135,6 +175,12 @@ const filteredInvites = computed(() => {
   return filtered;
 });
 
+const paginatedInvites = computed(() => {
+  return filteredInvites.value.length
+    ? filteredInvites.value.slice(currentPage.value*pageSize, (currentPage.value+1)*pageSize)
+    : [];
+});
+
 const getInvites = async () => {
   const response = await call('invite/').get().json();
   const { data } = response;
@@ -143,7 +189,7 @@ const getInvites = async () => {
 };
 
 const generateInvites = async () => {
-  // Parse it as a string to remove any bad bits..this probably works fine right?
+  // Parse it as an integer to remove any bad bits
   const amount = parseInt(`${amountOfInvitesToGenerate.value}`, 10);
   if (!amount) {
     return;
@@ -157,9 +203,22 @@ const generateInvites = async () => {
   invites.value = [...invites.value, ...data.value];
 };
 
+const revokeInvite = async (code) => {
+  // Parse it as a string to remove any bad bits..this probably works fine right?
+  if (!code) {
+    return;
+  }
+
+  const response = await call(`invite/revoke/${code}`).put().json();
+  const { data } = response;
+
+  if (data.value) {
+    await getInvites();
+  }
+};
+
 onMounted(async () => {
   await getInvites();
-  console.log(amountOfInvitesToGenerate.value);
 });
 
 </script>

From 87a7811ec85dea360537fe76fe2782ed3cba883f Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 14:31:33 -0700
Subject: [PATCH 04/19] =?UTF-8?q?=E2=9E=95=20Add=20copy=20button=20and=20m?=
 =?UTF-8?q?ove=20table=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andreas Müller <mail@devmount.de>
---
 frontend/src/assets/main.css           | 26 ++++++++++++++
 frontend/src/views/InvitePanelView.vue | 50 +++++---------------------
 2 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 96eab96c1..8b0c8ae88 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -111,3 +111,29 @@
 .v-leave-to {
   @apply opacity-0;
 }
+
+/* custom data table with wrapper */
+.data-table {
+  @apply rounded-xl w-full border py-2 border-gray-100 bg-white text-sm shadow-sm dark:border-gray-500 dark:bg-gray-700 mb-4 ml-auto mr-0;
+
+  table {
+    @apply w-full table-auto border-collapse bg-white text-sm shadow-sm dark:bg-gray-600;
+  }
+  
+  thead, tfoot {
+    @apply border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
+  }
+  
+  th {
+    @apply px-4 text-left font-semibold border-gray-200 dark:border-gray-500;
+  }
+  thead th {
+    @apply pb-4 pt-2;
+  }
+  tfoot th {
+    @apply pb-2 pt-4;
+  }
+  td {
+    @apply border-y border-gray-200 p-4 dark:border-gray-500;
+  }
+}
diff --git a/frontend/src/views/InvitePanelView.vue b/frontend/src/views/InvitePanelView.vue
index ca79cfa94..f183650ac 100644
--- a/frontend/src/views/InvitePanelView.vue
+++ b/frontend/src/views/InvitePanelView.vue
@@ -10,7 +10,7 @@
         :page-size="pageSize"
         @update="updatePage"
       />
-      <div class="flex items-center justify-end gap-2 text-right">
+      <div class="flex items-center justify-end gap-4 text-right">
         <label for="used-filter" class="whitespace-nowrap">Used Filter</label>
         <select id="used-filter" class="rounded-md" v-model="usedFilter">
           <option value="all">Show All</option>
@@ -26,10 +26,7 @@
         </select>
       </div>
     </div>
-    <div class="
-      rounded-xl w-full border py-2 border-gray-100 bg-white text-sm shadow-sm
-      dark:border-gray-500 dark:bg-gray-700 mb-4 ml-auto mr-0
-    ">
+    <div class="data-table">
       <table>
         <thead>
           <tr>
@@ -42,7 +39,12 @@
         </thead>
         <tbody>
           <tr v-for="invite in paginatedInvites" :key="invite.code">
-            <td><code>{{ invite.code }}</code></td>
+            <td>
+              <div class="flex gap-4 items-center">
+                <code>{{ invite.code }}</code>
+                <text-button :copy="invite.code" />
+              </div>
+            </td>
             <td>{{ invite.subscriber_id !== null ? 'Yes' : 'No' }}</td>
             <td>{{ invite.status === 1 ? 'Available' : 'Revoked' }}</td>
             <td class="whitespace-nowrap">{{ dj(invite.time_created).format('ll LTS') }}</td>
@@ -83,41 +85,6 @@
   </div>
 </template>
 
-<style scoped>
-/*
- * Not dealing with tailwinding every single td
- */
-table {
-  @apply w-full table-auto border-collapse bg-white text-sm shadow-sm dark:bg-gray-600;
-}
-
-thead, tfoot {
-  @apply border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
-}
-
-th {
-  @apply px-4 text-left font-semibold border-gray-200 dark:border-gray-500;
-}
-thead th {
-  @apply pb-4 pt-2;
-}
-tfoot th {
-  @apply pb-2 pt-4;
-}
-
-td {
-  @apply border border-gray-200 p-4 dark:border-gray-500;
-}
-
-td:first-child {
-  @apply border-l-0;
-}
-
-td:last-child {
-  @apply border-r-0;
-}
-</style>
-
 <script setup>
 import { computed, inject, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -126,6 +93,7 @@ import { useUserStore } from '@/stores/user-store';
 import { storeToRefs } from 'pinia';
 import PrimaryButton from '@/elements/PrimaryButton';
 import CautionButton from '@/elements/CautionButton.vue';
+import TextButton from '@/elements/TextButton.vue';
 import ListPagination from '@/elements/ListPagination.vue';
 
 // icons

From 6dca953ed99d10f9b427a772f2ea8593cfb8e14f Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 14:31:57 -0700
Subject: [PATCH 05/19] =?UTF-8?q?=E2=9E=95=20Reordered=20vars=20and=20adde?=
 =?UTF-8?q?d=20admin=20allow=20list=20to=20env?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andreas Müller <mail@devmount.de>
---
 backend/.env.example | 40 +++++++++++++++++++++++-----------------
 backend/.env.test    |  2 +-
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/backend/.env.example b/backend/.env.example
index 873912f28..da11119f5 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -4,6 +4,10 @@
 # Logging level: DEBUG|INFO|WARNING|ERROR|CRITICAL
 LOG_LEVEL=ERROR
 LOG_USE_STREAM=1
+# Possible values: prod, dev
+APP_ENV=dev
+# List of comma separated admin usernames. USE WITH CAUTION! Those can do serious damage to the data.
+APP_ADMIN_ALLOW_LIST=
 
 # -- FRONTEND --
 FRONTEND_URL=http://localhost:8080
@@ -20,12 +24,10 @@ DB_SECRET=
 SESSION_SECRET=
 
 # -- MAIL --
-
 # Service email for emails on behalf of Thunderbird Appointment
 SERVICE_EMAIL=no-reply@appointment.day
 # Email address for contact or support requests. If the value is empty the support form will error out
 SUPPORT_EMAIL=
-
 # Connection security: SSL|STARTTLS|NONE
 SMTP_SECURITY=NONE
 # Address and port of the SMTP server
@@ -34,6 +36,8 @@ SMTP_PORT=8050
 # SMTP user credentials
 SMTP_USER=
 SMTP_PASS=
+# Authorized email address for sending emails, leave empty to default to organizer
+SMTP_SENDER=
 
 # -- TIERS --
 # Max number of calendars to be simultanously connected for members of the basic tier
@@ -43,6 +47,22 @@ TIER_PLUS_CALENDAR_LIMIT=5
 # Max number of calendars to be simultanously connected for members of the pro tier
 TIER_PRO_CALENDAR_LIMIT=10
 
+# -- GENERAL AUTHENTICATION --
+# Possible values: password, fxa
+AUTH_SCHEME=password
+
+# For password auth only!
+JWT_SECRET=
+JWT_ALGO=HS256
+JWT_EXPIRE_IN_MINS=10000
+
+# -- FIREFOX AUTH --
+FXA_OPEN_ID_CONFIG=
+FXA_CLIENT_ID=
+FXA_SECRET=
+FXA_CALLBACK=
+FXA_ALLOW_LIST=
+
 # -- GOOGLE AUTH --
 GOOGLE_AUTH_CLIENT_ID=
 GOOGLE_AUTH_SECRET=
@@ -58,23 +78,9 @@ ZOOM_AUTH_CALLBACK=http://localhost:8090/zoom/callback
 # -- SIGNED URL SECRET --
 # Shared secret for url signing (e.g. create it by running `openssl rand -hex 32`)
 SIGNED_SECRET=
+
 # If empty, sentry will be disabled
 SENTRY_DSN=
-# Possible values: prod, dev
-APP_ENV=dev
-# Possible values: password, fxa
-AUTH_SCHEME=password
-
-FXA_OPEN_ID_CONFIG=
-FXA_CLIENT_ID=
-FXA_SECRET=
-FXA_CALLBACK=
-FXA_ALLOW_LIST=
-
-# For password auth only!
-JWT_SECRET=
-JWT_ALGO=HS256
-JWT_EXPIRE_IN_MINS=10000
 
 # -- TESTING --
 AUTH0_TEST_USER=
diff --git a/backend/.env.test b/backend/.env.test
index 4c2ce96e0..a0c17077f 100644
--- a/backend/.env.test
+++ b/backend/.env.test
@@ -20,7 +20,6 @@ DB_SECRET=db-secret-pls-ignore
 SESSION_SECRET=session-secret-pls-ignore
 
 # -- MAIL --
-
 # Service email for emails on behalf of Thunderbird Appointment
 SERVICE_EMAIL=no-reply@appointment.day
 # Email address for contact or support requests
@@ -64,6 +63,7 @@ SIGNED_SECRET=test-secret-pls-ignore
 SENTRY_DSN=
 # Possible values: prod, dev, test
 APP_ENV=test
+# Possible values: password, fxa
 AUTH_SCHEME=password
 
 FXA_OPEN_ID_CONFIG=

From 0a1613b197a1396c1cbfb019434e76b35c283caf Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 14:32:23 -0700
Subject: [PATCH 06/19] =?UTF-8?q?=E2=9E=95=20Add=20admin=20dependency=20fo?=
 =?UTF-8?q?r=20admin=20invite=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andreas Müller <mail@devmount.de>
---
 backend/src/appointment/dependencies/auth.py  | 23 ++++++++++++++++++-
 .../src/appointment/exceptions/validation.py  |  9 ++++++++
 backend/src/appointment/routes/invite.py      | 14 ++++++-----
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/backend/src/appointment/dependencies/auth.py b/backend/src/appointment/dependencies/auth.py
index ccece129f..322c68471 100644
--- a/backend/src/appointment/dependencies/auth.py
+++ b/backend/src/appointment/dependencies/auth.py
@@ -10,7 +10,7 @@
 from ..database import repo, schemas
 from ..dependencies.database import get_db
 from ..exceptions import validation
-from ..exceptions.validation import InvalidTokenException
+from ..exceptions.validation import InvalidTokenException, InvalidPermissionLevelException
 
 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token", auto_error=False)
 
@@ -55,6 +55,27 @@ def get_subscriber(
     return user
 
 
+def get_admin_subscriber(
+    token: Annotated[str, Depends(oauth2_scheme)],
+    db: Session = Depends(get_db),
+):
+    if token is None:
+        raise InvalidTokenException()
+
+    """Automatically retrieve and return the subscriber"""
+    user = get_user_from_token(db, token)
+
+    if user is None:
+        raise InvalidTokenException()
+    
+    # check admin allow list
+    ALLOW_LIST = os.getenv("APP_ADMIN_ALLOW_LIST", '').split(',')
+    if not user.email in ALLOW_LIST:
+        raise InvalidPermissionLevelException()
+
+    return user
+
+
 def get_subscriber_from_signed_url(
     url: str = Body(..., embed=True),
     db: Session = Depends(get_db),
diff --git a/backend/src/appointment/exceptions/validation.py b/backend/src/appointment/exceptions/validation.py
index e939b2977..91bfe60d8 100644
--- a/backend/src/appointment/exceptions/validation.py
+++ b/backend/src/appointment/exceptions/validation.py
@@ -20,6 +20,15 @@ def get_msg(self):
         return l10n('unknown-error')
 
 
+class InvalidPermissionLevelException(APIException):
+    """Raise when the subscribers permission level is too low for the action"""
+    id_code = 'INVALID_PERMISSION_LEVEL'
+    status_code = 401
+
+    def get_msg(self):
+        return l10n('protected-route-fail')
+
+
 class InvalidTokenException(APIException):
     """Raise when the subscriber could not be parsed from the auth token"""
     id_code = 'INVALID_TOKEN'
diff --git a/backend/src/appointment/routes/invite.py b/backend/src/appointment/routes/invite.py
index f783a132b..01eb7e402 100644
--- a/backend/src/appointment/routes/invite.py
+++ b/backend/src/appointment/routes/invite.py
@@ -4,7 +4,8 @@
 from sqlalchemy.orm import Session
 
 from ..database import repo, schemas, models
-from ..dependencies.auth import get_subscriber, get_subscriber_from_signed_url
+from ..database.models import Subscriber
+from ..dependencies.auth import get_admin_subscriber
 from ..dependencies.database import get_db
 
 from ..exceptions import validation
@@ -13,13 +14,14 @@
 
 
 @router.get('/', response_model=list[schemas.Invite])
-def get_all_invites(db: Session = Depends(get_db)):
+def get_all_invites(db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+    """List all existing invites, needs admin permissions"""
     return db.query(models.Invite).all()
 
 
 @router.post("/generate/{n}", response_model=list[schemas.Invite])
-def generate_invite_codes(n: int, db: Session = Depends(get_db)):
-    """endpoint to generate n invite codes"""
+def generate_invite_codes(n: int, db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+    """endpoint to generate n invite codes, needs admin permissions"""
     return repo.invite.generate_codes(db, n)
 
 
@@ -39,8 +41,8 @@ def use_invite_code(code: str, db: Session = Depends(get_db)):
 
 
 @router.put("/revoke/{code}")
-def revoke_invite_code(code: str, db: Session = Depends(get_db)):
-    """endpoint to revoke a given invite code and mark in unavailable"""
+def revoke_invite_code(code: str, db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+    """endpoint to revoke a given invite code and mark in unavailable, needs admin permissions"""
     if not repo.invite.code_exists(db, code):
         raise validation.InviteCodeNotFoundException()
     if not repo.invite.code_is_available(db, code):

From 21c69125f5213cf94b95d04af3bea6f08e2a21cc Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 14:39:16 -0700
Subject: [PATCH 07/19] Daisy chain get_admin_subscriber off of get_subscriber,
 and adjust how we check for admin emails

---
 backend/src/appointment/dependencies/auth.py | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/backend/src/appointment/dependencies/auth.py b/backend/src/appointment/dependencies/auth.py
index 322c68471..fc18e9791 100644
--- a/backend/src/appointment/dependencies/auth.py
+++ b/backend/src/appointment/dependencies/auth.py
@@ -7,7 +7,7 @@
 
 from sqlalchemy.orm import Session
 
-from ..database import repo, schemas
+from ..database import repo, schemas, models
 from ..dependencies.database import get_db
 from ..exceptions import validation
 from ..exceptions.validation import InvalidTokenException, InvalidPermissionLevelException
@@ -56,21 +56,15 @@ def get_subscriber(
 
 
 def get_admin_subscriber(
-    token: Annotated[str, Depends(oauth2_scheme)],
+    user: models.Subscriber = Depends(get_subscriber),
     db: Session = Depends(get_db),
 ):
-    if token is None:
-        raise InvalidTokenException()
-
-    """Automatically retrieve and return the subscriber"""
-    user = get_user_from_token(db, token)
-
     if user is None:
         raise InvalidTokenException()
     
     # check admin allow list
-    ALLOW_LIST = os.getenv("APP_ADMIN_ALLOW_LIST", '').split(',')
-    if not user.email in ALLOW_LIST:
+    admin_emails = os.getenv("APP_ADMIN_ALLOW_LIST", '').split(',')
+    if not any([user.email.endswith(allowed_email) for allowed_email in admin_emails]):
         raise InvalidPermissionLevelException()
 
     return user

From 1e0e94fbabb8e129b92b49db6f6fab046e658da1 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 15:37:39 -0700
Subject: [PATCH 08/19] Add an invite email and new route that creates a
 subscriber and emails them!

---
 backend/src/appointment/controller/mailer.py  | 16 ++++++++++
 backend/src/appointment/dependencies/auth.py  |  5 +--
 backend/src/appointment/l10n/en/email.ftl     | 11 +++++++
 backend/src/appointment/routes/invite.py      | 31 +++++++++++++++++--
 backend/src/appointment/tasks/emails.py       |  7 ++++-
 .../templates/email/new_account.jinja2        | 21 +++++++++++++
 6 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 backend/src/appointment/templates/email/new_account.jinja2

diff --git a/backend/src/appointment/controller/mailer.py b/backend/src/appointment/controller/mailer.py
index 5364d45c7..a0b07419d 100644
--- a/backend/src/appointment/controller/mailer.py
+++ b/backend/src/appointment/controller/mailer.py
@@ -259,3 +259,19 @@ def text(self):
 
     def html(self):
         return get_template("support.jinja2").render(requestee=self.requestee, topic=self.topic, details=self.details)
+
+
+class InviteAccountMail(Mailer):
+    def __init__(self, *args, **kwargs):
+        default_kwargs = {
+            "subject": l10n('new-account-mail-subject')
+        }
+        super(InviteAccountMail, self).__init__(*args, **default_kwargs, **kwargs)
+
+    def text(self):
+        return l10n('new-account-mail-plain', {
+            'homepage_url': os.getenv('FRONTEND_URL'),
+        })
+
+    def html(self):
+        return get_template("new_account.jinja2").render(homepage_url=os.getenv('FRONTEND_URL'))
diff --git a/backend/src/appointment/dependencies/auth.py b/backend/src/appointment/dependencies/auth.py
index fc18e9791..b1d3b99c9 100644
--- a/backend/src/appointment/dependencies/auth.py
+++ b/backend/src/appointment/dependencies/auth.py
@@ -57,11 +57,8 @@ def get_subscriber(
 
 def get_admin_subscriber(
     user: models.Subscriber = Depends(get_subscriber),
-    db: Session = Depends(get_db),
 ):
-    if user is None:
-        raise InvalidTokenException()
-    
+    """Retrieve the subscriber and check if they're an admin"""
     # check admin allow list
     admin_emails = os.getenv("APP_ADMIN_ALLOW_LIST", '').split(',')
     if not any([user.email.endswith(allowed_email) for allowed_email in admin_emails]):
diff --git a/backend/src/appointment/l10n/en/email.ftl b/backend/src/appointment/l10n/en/email.ftl
index f25844fb7..4f2e0ccf0 100644
--- a/backend/src/appointment/l10n/en/email.ftl
+++ b/backend/src/appointment/l10n/en/email.ftl
@@ -103,3 +103,14 @@ support-mail-plain = { $requestee_name } ({ $requestee_email }) sent the followi
                     Topic: { $topic }
                     Details: { $details }
                     {-brand-footer}
+
+## New/Invited Account Email
+new-account-mail-subject = You've been invited to Thunderbird Appointment
+new-account-mail-action = Continue to Thunderbird Appointment
+new-account-mail-html-heading = You've been invited to Thunderbird Appointment. Login with this email address to continue.
+# Variables:
+# $homepage_url (String) - URL to Thunderbird Appointment
+new-account-mail-plain = You've been invited to Thunderbird Appointment.
+                    Login with this email address to continue.
+                    { $homepage_url }
+                    {-brand-footer}
diff --git a/backend/src/appointment/routes/invite.py b/backend/src/appointment/routes/invite.py
index 01eb7e402..dfa097071 100644
--- a/backend/src/appointment/routes/invite.py
+++ b/backend/src/appointment/routes/invite.py
@@ -1,5 +1,4 @@
-
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, BackgroundTasks
 
 from sqlalchemy.orm import Session
 
@@ -9,6 +8,7 @@
 from ..dependencies.database import get_db
 
 from ..exceptions import validation
+from ..tasks.emails import send_invite_account_email
 
 router = APIRouter()
 
@@ -48,3 +48,30 @@ def revoke_invite_code(code: str, db: Session = Depends(get_db), admin: Subscrib
     if not repo.invite.code_is_available(db, code):
         raise validation.InviteCodeNotAvailableException()
     return repo.invite.revoke_code(db, code)
+
+
+@router.post("/send", response_model=schemas.Invite)
+def send_invite_email(
+    background_tasks: BackgroundTasks,
+    email: str,
+    db: Session = Depends(get_db),
+    # Note admin must be here to for permission reasons
+    _admin: Subscriber = Depends(get_admin_subscriber)
+):
+    """With a given email address, generate a subscriber and email them, welcoming them to Thunderbird Appointment."""
+    invite_code = repo.invite.generate_codes(db, 1)[0]
+    subscriber = repo.subscriber.create(db, schemas.SubscriberBase(
+        email=email,
+        username=email,
+    ))
+
+    if not subscriber:
+        raise RuntimeError
+
+    invite_code.subscriber_id = subscriber.id
+    db.add(invite_code)
+    db.commit()
+
+    background_tasks.add_task(send_invite_account_email, to=email)
+
+    return invite_code
diff --git a/backend/src/appointment/tasks/emails.py b/backend/src/appointment/tasks/emails.py
index 4f5eb1fc4..326119fc9 100644
--- a/backend/src/appointment/tasks/emails.py
+++ b/backend/src/appointment/tasks/emails.py
@@ -1,5 +1,5 @@
 from appointment.controller.mailer import PendingRequestMail, ConfirmationMail, InvitationMail, ZoomMeetingFailedMail, \
-    RejectionMail, SupportRequestMail
+    RejectionMail, SupportRequestMail, InviteAccountMail
 
 
 def send_invite_email(to, attachment):
@@ -49,3 +49,8 @@ def send_support_email(requestee, topic, details):
         details=details,
     )
     mail.send()
+
+
+def send_invite_account_email(to):
+    mail = InviteAccountMail(to=to)
+    mail.send()
diff --git a/backend/src/appointment/templates/email/new_account.jinja2 b/backend/src/appointment/templates/email/new_account.jinja2
new file mode 100644
index 000000000..8d8aacfc5
--- /dev/null
+++ b/backend/src/appointment/templates/email/new_account.jinja2
@@ -0,0 +1,21 @@
+<html lang="{{ l10n('locale') }}">
+  <body>
+    <p>
+      {{ l10n('new-account-html-heading') }}
+    </p>
+    <div>
+      <a
+        href="{{ homepage_url }}"
+        style="
+          display:inline-block;
+          padding:.5rem 1rem;
+          color:white;
+          background:#0e757f;
+          border-radius:6px;
+          text-decoration:none;
+        "
+      >{{ l10n('new-account-mail-action') }}</a>
+    </div>
+    {% include 'includes/footer.jinja2' %}
+  </body>
+</html>

From 97bb00cc84953d3eabfde342601a853c99937931 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 15:41:33 -0700
Subject: [PATCH 09/19] Allow a non-allow listed user to login if they already
 have an account.

---
 .../src/appointment/controller/apis/fxa_client.py    | 12 +++++++++---
 backend/src/appointment/routes/auth.py               |  7 +++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/backend/src/appointment/controller/apis/fxa_client.py b/backend/src/appointment/controller/apis/fxa_client.py
index affb9b33f..173b84839 100644
--- a/backend/src/appointment/controller/apis/fxa_client.py
+++ b/backend/src/appointment/controller/apis/fxa_client.py
@@ -73,8 +73,14 @@ def setup(self, subscriber_id=None, token=None):
                                     token=token,
                                     token_updater=self.token_saver)
 
-    def is_in_allow_list(self, email: str):
+    def is_in_allow_list(self, db, email: str):
         """Check this email against our allow list"""
+
+        # Allow existing subscribers to login even if they're not on an allow-list
+        subscriber = repo.subscriber.get_by_email(db, email)
+        if subscriber:
+            return True
+
         allow_list = os.getenv('FXA_ALLOW_LIST')
         # If we have no allow list, then we allow everyone
         if not allow_list or allow_list == '':
@@ -82,8 +88,8 @@ def is_in_allow_list(self, email: str):
 
         return email.endswith(tuple(allow_list.split(',')))
 
-    def get_redirect_url(self, state, email):
-        if not self.is_in_allow_list(email):
+    def get_redirect_url(self, db, state, email):
+        if not self.is_in_allow_list(db, email):
             raise NotInAllowListException()
 
         utm_campaign = f"{self.ENTRYPOINT}_{os.getenv('APP_ENV')}"
diff --git a/backend/src/appointment/routes/auth.py b/backend/src/appointment/routes/auth.py
index 18bc46f03..1be817289 100644
--- a/backend/src/appointment/routes/auth.py
+++ b/backend/src/appointment/routes/auth.py
@@ -44,7 +44,10 @@ def create_access_token(data: dict, expires_delta: timedelta | None = None):
 
 
 @router.get("/fxa_login")
-def fxa_login(request: Request, email: str, timezone: str | None = None,
+def fxa_login(request: Request,
+              email: str,
+              timezone: str | None = None,
+              db: Session = Depends(get_db),
               fxa_client: FxaClient = Depends(get_fxa_client)):
     """Request an authorization url from fxa"""
     if os.getenv('AUTH_SCHEME') != 'fxa':
@@ -53,7 +56,7 @@ def fxa_login(request: Request, email: str, timezone: str | None = None,
     fxa_client.setup()
 
     try:
-        url, state = fxa_client.get_redirect_url(token_urlsafe(32), email)
+        url, state = fxa_client.get_redirect_url(db, token_urlsafe(32), email)
     except NotInAllowListException:
         raise HTTPException(status_code=403, detail='Your email is not in the allow list')
 

From 551c8e8f7f94b3edcdcd0ffa275d6489eb18e2e8 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Wed, 8 May 2024 15:47:20 -0700
Subject: [PATCH 10/19] Fix tests

---
 backend/test/conftest.py             |  2 +-
 backend/test/unit/test_fxa_client.py | 65 ++++++++++++++++++----------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/backend/test/conftest.py b/backend/test/conftest.py
index 61405d2af..78e63d45f 100644
--- a/backend/test/conftest.py
+++ b/backend/test/conftest.py
@@ -87,7 +87,7 @@ def setup(self, subscriber_id=None, token=None):
             pass
 
         @staticmethod
-        def get_redirect_url(self, state, email):
+        def get_redirect_url(self, db, state, email):
             return FXA_CLIENT_PATCH.get('authorization_url'), state
 
         @staticmethod
diff --git a/backend/test/unit/test_fxa_client.py b/backend/test/unit/test_fxa_client.py
index 14792cbf2..704d2b405 100644
--- a/backend/test/unit/test_fxa_client.py
+++ b/backend/test/unit/test_fxa_client.py
@@ -4,36 +4,55 @@
 
 
 class TestFxaClient:
-    def test_is_in_allow_list(self):
-        os.environ['FXA_ALLOW_LIST'] = ''
+    def test_is_in_allow_list(self, with_db):
+        with with_db() as db:
+            os.environ['FXA_ALLOW_LIST'] = ''
 
-        fxa_client = FxaClient(None, None, None)
+            fxa_client = FxaClient(None, None, None)
 
-        test_email = 'test@example.org'
+            test_email = 'cooltestguy@example.org'
 
-        assert fxa_client.is_in_allow_list(test_email)
+            assert fxa_client.is_in_allow_list(db, test_email)
 
-        # Domain is in allow list
-        os.environ['FXA_ALLOW_LIST'] = '@example.org'
-        assert fxa_client.is_in_allow_list(test_email)
+            # Domain is in allow list
+            os.environ['FXA_ALLOW_LIST'] = '@example.org'
+            assert fxa_client.is_in_allow_list(db, test_email)
 
-        # Email is in allow list
-        os.environ['FXA_ALLOW_LIST'] = test_email
-        assert fxa_client.is_in_allow_list(test_email)
+            # Email is in allow list
+            os.environ['FXA_ALLOW_LIST'] = test_email
+            assert fxa_client.is_in_allow_list(db, test_email)
 
-        # Domain is not in allow list
-        os.environ['FXA_ALLOW_LIST'] = '@example.com'
-        assert not fxa_client.is_in_allow_list(test_email)
+            # Domain is not in allow list
+            os.environ['FXA_ALLOW_LIST'] = '@example.com'
+            assert not fxa_client.is_in_allow_list(db, test_email)
 
-        # Domain is in allow list
-        os.environ['FXA_ALLOW_LIST'] = '@example.com,@example.org'
-        assert fxa_client.is_in_allow_list(test_email)
+            # Domain is in allow list
+            os.environ['FXA_ALLOW_LIST'] = '@example.com,@example.org'
+            assert fxa_client.is_in_allow_list(db, test_email)
+
+            # Email is not allow list
+            os.environ['FXA_ALLOW_LIST'] = '@example.com,not-test@example.org'
+            assert not fxa_client.is_in_allow_list(db, test_email)
+
+            # Email is not allow list
+            os.environ['FXA_ALLOW_LIST'] = '@example.com,not-test@example.org'
+            assert not fxa_client.is_in_allow_list(db, 'hello@example.com@bad.org')
+
+    def test_allow_list_allows_subscriber(self, with_db, make_basic_subscriber):
+        with with_db() as db:
+            os.environ['FXA_ALLOW_LIST'] = '@abadexample.org'
+
+            fxa_client = FxaClient(None, None, None)
+
+            test_email = 'new-test@example.org'
+
+            # They're not a user, and they're not in the allow list
+            assert not fxa_client.is_in_allow_list(db, test_email)
+
+            make_basic_subscriber(email=test_email)
+
+            # They're not in the allow list, but they are a user!
+            assert fxa_client.is_in_allow_list(db, test_email)
 
-        # Email is not allow list
-        os.environ['FXA_ALLOW_LIST'] = '@example.com,not-test@example.org'
-        assert not fxa_client.is_in_allow_list(test_email)
 
-        # Email is not allow list
-        os.environ['FXA_ALLOW_LIST'] = '@example.com,not-test@example.org'
-        assert not fxa_client.is_in_allow_list('hello@example.com@bad.org')
 

From 74fe8838061fd93abf61f4f312b0770b676d43dc Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 10:15:51 -0700
Subject: [PATCH 11/19] Added data table

Added sending invitation

Added data table filters
---
 backend/src/appointment/database/models.py    |   6 +-
 backend/src/appointment/database/schemas.py   |  34 +-
 backend/src/appointment/dependencies/auth.py  |   8 +-
 .../src/appointment/exceptions/validation.py  |  21 +-
 backend/src/appointment/l10n/en/main.ftl      |   3 +
 backend/src/appointment/routes/auth.py        |  10 +-
 backend/src/appointment/routes/invite.py      |  18 +-
 backend/src/appointment/routes/subscriber.py  |   6 +-
 .../templates/email/new_account.jinja2        |   2 +-
 backend/test/integration/test_invite.py       |  57 ++++
 frontend/src/components/DataTable.vue         | 162 ++++++++++
 frontend/src/definitions.js                   |  19 ++
 frontend/src/locales/en.json                  |   4 +
 frontend/src/views/SubscriberPanelView.vue    | 294 ++++++++++++------
 14 files changed, 533 insertions(+), 111 deletions(-)
 create mode 100644 backend/test/integration/test_invite.py
 create mode 100644 frontend/src/components/DataTable.vue

diff --git a/backend/src/appointment/database/models.py b/backend/src/appointment/database/models.py
index 2c58241cd..9d20f23de 100644
--- a/backend/src/appointment/database/models.py
+++ b/backend/src/appointment/database/models.py
@@ -11,7 +11,7 @@
 from sqlalchemy import Column, ForeignKey, Integer, String, DateTime, Enum, Boolean, JSON, Date, Time
 from sqlalchemy_utils import StringEncryptedType, ChoiceType, UUIDType
 from sqlalchemy_utils.types.encrypted.encrypted_type import AesEngine
-from sqlalchemy.orm import relationship, as_declarative, declared_attr
+from sqlalchemy.orm import relationship, as_declarative, declared_attr, Mapped
 from sqlalchemy.sql import func
 
 
@@ -116,7 +116,7 @@ class Subscriber(Base):
     calendars = relationship("Calendar", cascade="all,delete", back_populates="owner")
     slots = relationship("Slot", cascade="all,delete", back_populates="subscriber")
     external_connections = relationship("ExternalConnections", cascade="all,delete", back_populates="owner")
-    invite: "Invite" = relationship("Invite", back_populates="subscriber")
+    invite: Mapped["Invite"] = relationship("Invite", back_populates="subscriber", uselist=False)
 
     def get_external_connection(self, type: ExternalConnectionType) -> 'ExternalConnections':
         """Retrieves the first found external connection by type or returns None if not found"""
@@ -288,7 +288,7 @@ class Invite(Base):
     code = Column(StringEncryptedType(String, secret, AesEngine, "pkcs5", length=255), index=False)
     status = Column(Enum(InviteStatus), index=True)
 
-    subscriber = relationship("Subscriber", back_populates="invite")
+    subscriber: Mapped["Subscriber"] = relationship("Subscriber", back_populates="invite", single_parent=True)
 
     @property
     def is_used(self) -> bool:
diff --git a/backend/src/appointment/database/schemas.py b/backend/src/appointment/database/schemas.py
index 18b5588d2..420950ede 100644
--- a/backend/src/appointment/database/schemas.py
+++ b/backend/src/appointment/database/schemas.py
@@ -224,6 +224,19 @@ class CalendarOut(CalendarBase):
     id: int
 
 
+""" INVITE model schemas
+"""
+
+
+class Invite(BaseModel):
+    subscriber_id: int | None = None
+    code: str
+    status: InviteStatus = InviteStatus.active
+    time_created: datetime | None = None
+    time_updated: datetime | None = None
+
+
+
 """ SUBSCRIBER model schemas
 """
 
@@ -253,16 +266,12 @@ class Config:
         from_attributes = True
 
 
-""" INVITE model schemas
-"""
-
+class SubscriberAdminOut(Subscriber):
+    invite: Invite | None = None
+    time_created: datetime
 
-class Invite(BaseModel):
-    subscriber_id: int | None = None
-    code: str
-    status: InviteStatus = InviteStatus.active
-    time_created: datetime | None = None
-    time_updated: datetime | None = None
+    class Config:
+        from_attributes = True
 
 
 """ other schemas used for requests or data migration
@@ -357,3 +366,10 @@ class Login(BaseModel):
 
 class TokenData(BaseModel):
     username: str
+
+
+"""Invite"""
+
+
+class SendInviteEmailIn(BaseModel):
+    email: str = Field(title="Email", min_length=1)
diff --git a/backend/src/appointment/dependencies/auth.py b/backend/src/appointment/dependencies/auth.py
index b1d3b99c9..885e329ec 100644
--- a/backend/src/appointment/dependencies/auth.py
+++ b/backend/src/appointment/dependencies/auth.py
@@ -60,7 +60,13 @@ def get_admin_subscriber(
 ):
     """Retrieve the subscriber and check if they're an admin"""
     # check admin allow list
-    admin_emails = os.getenv("APP_ADMIN_ALLOW_LIST", '').split(',')
+    admin_emails = os.getenv("APP_ADMIN_ALLOW_LIST")
+
+    # Raise an error if we don't have any admin emails specified
+    if not admin_emails:
+        raise InvalidPermissionLevelException()
+
+    admin_emails = admin_emails.split(',')
     if not any([user.email.endswith(allowed_email) for allowed_email in admin_emails]):
         raise InvalidPermissionLevelException()
 
diff --git a/backend/src/appointment/exceptions/validation.py b/backend/src/appointment/exceptions/validation.py
index 91bfe60d8..74a6bf066 100644
--- a/backend/src/appointment/exceptions/validation.py
+++ b/backend/src/appointment/exceptions/validation.py
@@ -48,14 +48,13 @@ def get_msg(self):
 
 
 class SubscriberNotFoundException(APIException):
-    """Raise when the calendar is not found during route validation"""
+    """Raise when the subscriber is not found during route validation"""
     id_code = 'SUBSCRIBER_NOT_FOUND'
     status_code = 404
 
     def get_msg(self):
         return l10n('subscriber-not-found')
 
-
 class CalendarNotFoundException(APIException):
     """Raise when the calendar is not found during route validation"""
     id_code = 'CALENDAR_NOT_FOUND'
@@ -196,3 +195,21 @@ class InviteCodeNotAvailableException(APIException):
 
     def get_msg(self):
         return l10n('invite-code-not-valid')
+
+
+class CreateSubscriberFailedException(APIException):
+    """Raise when a subscriber failed to be created"""
+    id_code = 'CREATE_SUBSCRIBER_FAILED'
+    status_code = 400
+
+    def get_msg(self):
+        return l10n('failed-to-create-subscriber')
+
+
+class CreateSubscriberAlreadyExistsException(APIException):
+    """Raise when a subscriber failed to be created"""
+    id_code = 'CREATE_SUBSCRIBER_ALREADY_EXISTS'
+    status_code = 400
+
+    def get_msg(self):
+        return l10n('subscriber-already-exists')
diff --git a/backend/src/appointment/l10n/en/main.ftl b/backend/src/appointment/l10n/en/main.ftl
index a0967a24c..d5bf4b1b5 100644
--- a/backend/src/appointment/l10n/en/main.ftl
+++ b/backend/src/appointment/l10n/en/main.ftl
@@ -40,6 +40,9 @@ remote-calendar-connection-error = The remote calendar could not be reached. Ple
 
 event-could-not-be-accepted = There was an error accepting the booking details. Please try again later.
 
+failed-to-create-subscriber = There was an error creating the subscriber. Please try again later.
+subscriber-already-exists = A subscriber with this email address already exists.
+
 ## Authentication Exceptions
 
 email-mismatch = Email mismatch.
diff --git a/backend/src/appointment/routes/auth.py b/backend/src/appointment/routes/auth.py
index 1be817289..ee599de23 100644
--- a/backend/src/appointment/routes/auth.py
+++ b/backend/src/appointment/routes/auth.py
@@ -1,5 +1,6 @@
 import json
 import os
+import time
 from datetime import timedelta, datetime, UTC
 from secrets import token_urlsafe
 from typing import Annotated
@@ -18,7 +19,7 @@
 from ..database.models import Subscriber, ExternalConnectionType
 
 from ..dependencies.database import get_db
-from ..dependencies.auth import get_subscriber
+from ..dependencies.auth import get_subscriber, get_admin_subscriber
 
 from ..controller import auth
 from ..controller.apis.fxa_client import FxaClient
@@ -240,6 +241,13 @@ def me(
         timezone=subscriber.timezone, avatar_url=subscriber.avatar_url
     )
 
+
+@router.post("/permission-check")
+def permission_check(_: Subscriber = Depends(get_admin_subscriber)):
+    """Checks if they have admin permissions"""
+    return True
+
+
 # @router.get('/test-create-account')
 # def test_create_account(email: str, password: str, timezone: str, db: Session = Depends(get_db)):
 #     """Used to create a test account"""
diff --git a/backend/src/appointment/routes/invite.py b/backend/src/appointment/routes/invite.py
index dfa097071..2dae4faf7 100644
--- a/backend/src/appointment/routes/invite.py
+++ b/backend/src/appointment/routes/invite.py
@@ -1,13 +1,18 @@
-from fastapi import APIRouter, Depends, BackgroundTasks
+import time
+from typing import Annotated
+
+from fastapi import APIRouter, Depends, BackgroundTasks, Request, Body
 
 from sqlalchemy.orm import Session
 
 from ..database import repo, schemas, models
 from ..database.models import Subscriber
+from ..database.schemas import SendInviteEmailIn
 from ..dependencies.auth import get_admin_subscriber
 from ..dependencies.database import get_db
 
 from ..exceptions import validation
+from ..exceptions.validation import CreateSubscriberFailedException, CreateSubscriberAlreadyExistsException
 from ..tasks.emails import send_invite_account_email
 
 router = APIRouter()
@@ -52,13 +57,20 @@ def revoke_invite_code(code: str, db: Session = Depends(get_db), admin: Subscrib
 
 @router.post("/send", response_model=schemas.Invite)
 def send_invite_email(
+    data: SendInviteEmailIn,
     background_tasks: BackgroundTasks,
-    email: str,
     db: Session = Depends(get_db),
     # Note admin must be here to for permission reasons
     _admin: Subscriber = Depends(get_admin_subscriber)
 ):
     """With a given email address, generate a subscriber and email them, welcoming them to Thunderbird Appointment."""
+    email = data.email
+
+    lookup = repo.subscriber.get_by_email(db, email)
+
+    if lookup:
+        raise CreateSubscriberAlreadyExistsException()
+
     invite_code = repo.invite.generate_codes(db, 1)[0]
     subscriber = repo.subscriber.create(db, schemas.SubscriberBase(
         email=email,
@@ -66,7 +78,7 @@ def send_invite_email(
     ))
 
     if not subscriber:
-        raise RuntimeError
+        raise CreateSubscriberFailedException()
 
     invite_code.subscriber_id = subscriber.id
     db.add(invite_code)
diff --git a/backend/src/appointment/routes/subscriber.py b/backend/src/appointment/routes/subscriber.py
index 3cbaee8f6..d23283468 100644
--- a/backend/src/appointment/routes/subscriber.py
+++ b/backend/src/appointment/routes/subscriber.py
@@ -1,3 +1,4 @@
+import time
 
 from fastapi import APIRouter, Depends
 
@@ -13,10 +14,11 @@
 router = APIRouter()
 
 
-@router.get('/', response_model=list[schemas.Subscriber])
+@router.get('/', response_model=list[schemas.SubscriberAdminOut])
 def get_all_subscriber(db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
     """List all existing invites, needs admin permissions"""
-    return db.query(models.Subscriber).all()
+    response = db.query(models.Subscriber).all()
+    return response
 
 
 @router.put("/disable/{email}")
diff --git a/backend/src/appointment/templates/email/new_account.jinja2 b/backend/src/appointment/templates/email/new_account.jinja2
index 8d8aacfc5..5511eee7a 100644
--- a/backend/src/appointment/templates/email/new_account.jinja2
+++ b/backend/src/appointment/templates/email/new_account.jinja2
@@ -1,7 +1,7 @@
 <html lang="{{ l10n('locale') }}">
   <body>
     <p>
-      {{ l10n('new-account-html-heading') }}
+      {{ l10n('new-account-mail-html-heading') }}
     </p>
     <div>
       <a
diff --git a/backend/test/integration/test_invite.py b/backend/test/integration/test_invite.py
new file mode 100644
index 000000000..c994107ac
--- /dev/null
+++ b/backend/test/integration/test_invite.py
@@ -0,0 +1,57 @@
+import os
+from defines import auth_headers
+from appointment.database import repo
+
+
+class TestInvite:
+    def test_send_invite_email_requires_admin(self, with_db, with_client):
+        """Ensures send_invite_email requires an admin user"""
+
+        os.environ['APP_ADMIN_ALLOW_LIST'] = '@notexample.org'
+
+        response = with_client.post(
+            "/invite/send",
+            json={
+                "email": "beatrice@ismycat.meow"
+            },
+            headers=auth_headers,
+        )
+        assert response.status_code == 401, response.text
+
+    def test_send_invite_email_requires_at_least_one_admin_email(self, with_db, with_client):
+        """Ensures send_invite_email requires an admin user"""
+
+        os.environ['APP_ADMIN_ALLOW_LIST'] = ''
+
+        response = with_client.post(
+            "/invite/send",
+            json={
+                "email": "beatrice@ismycat.meow"
+            },
+            headers=auth_headers,
+        )
+        assert response.status_code == 401, response.text
+
+    def test_send_invite_email(self, with_db, with_client):
+        """Ensures send_invite_email requires an admin user"""
+
+        os.environ['APP_ADMIN_ALLOW_LIST'] = '@example.org'
+
+        invite_email = 'beatrice@ismycat.meow'
+
+        with with_db() as db:
+            subscriber = repo.subscriber.get_by_email(db, invite_email)
+            assert subscriber is None
+
+        response = with_client.post(
+            "/invite/send",
+            json={
+                'email': invite_email
+            },
+            headers=auth_headers,
+        )
+        assert response.status_code == 200, response.text
+
+        with with_db() as db:
+            subscriber = repo.subscriber.get_by_email(db, invite_email)
+            assert subscriber is not None
diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
new file mode 100644
index 000000000..9265e71fb
--- /dev/null
+++ b/frontend/src/components/DataTable.vue
@@ -0,0 +1,162 @@
+<template>
+<div class="flex flex-col items-center justify-center gap-4">
+    <div class="flex w-full flex-row items-center justify-between">
+      <div>
+        <span class="font-bold">{{ paginatedDataList.length }}</span> {{ dataName }}
+      </div>
+      <div v-for="filter in filters" :key="filter.name">
+        <label class="flex items-center gap-4 whitespace-nowrap">
+        {{ filter.name }} {{ t('label.filter') }}:
+        <select class="rounded-md" @change="(evt) => onColumnFilter(evt, filter)">
+          <option :value="option.key" v-for="option in filter.options" :key="option.key">{{ option.name }}</option>
+        </select>
+        </label>
+      </div>
+      <list-pagination
+        :list-length="dataList.length"
+        :page-size="pageSize"
+        @update="updatePage"
+      />
+    </div>
+    <div class="data-table">
+      <table>
+        <thead>
+          <tr>
+            <th v-if="allowMultiSelect">
+              <!-- Decide if we want to select all for the paginated list or all data -->
+            </th>
+            <th v-for="column in columns" :key="column.key">{{ column.name }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="datum in paginatedDataList" :key="datum">
+            <td v-if="allowMultiSelect">
+              <input type="checkbox" @change="(evt) => onFieldSelect(evt, datum)" />
+            </td>
+            <td v-for="(fieldData, fieldKey) in datum" :key="fieldKey">
+              <span v-if="fieldData.type === tableDataType.text">
+                {{ fieldData.value }}
+              </span>
+              <span v-else-if="fieldData.type === tableDataType.link">
+                <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
+              </span>
+              <span v-else-if="fieldData.type === tableDataType.button">
+                <primary-button v-if="fieldData.buttonType === tableDataButtonType.primary" @click="emit('fieldClick', datum)">{{ fieldData.value }}</primary-button>
+                <secondary-button v-else-if="fieldData.buttonType === tableDataButtonType.secondary" @click="emit('fieldClick', datum)">{{ fieldData.value }}</secondary-button>
+                <caution-button v-else-if="fieldData.buttonType === tableDataButtonType.caution" @click="emit('fieldClick', datum)">{{ fieldData.value }}</caution-button>
+              </span>
+            </td>
+          </tr>
+          <tr v-if="loading">
+            <td :colspan="columnSpan">
+              <div class="flex w-full justify-center">
+              <loading-spinner/>
+              </div>
+            </td>
+          </tr>
+          <tr v-else-if="paginatedDataList.length === 0">
+            <td :colspan="columnSpan">{{ t('error.dataSourceIsEmpty', {name: dataName}) }}</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <th :colspan="columnSpan">
+              <slot name="footer"></slot>
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * Data Table
+ * @typedef {{type: tableDataType, value: string, link?: string, buttonType?: tableDataButtonType }} DataField
+ * @typedef {{name: string, key: string}} DataColumn
+ * @typedef {{name: string, key: string}} FilterOption
+ * @typedef {{name: string, options: Array<FilterOption>, fn: function}} Filter
+ *
+ * @param allowMultiSelect {boolean} - Displays checkboxes next to each row, and emits the `fieldSelect` event with a list of currently selected rows
+ * @param dataName {string} - The name for the object being represented on the table
+ * @param columns {Array<DataColumn>} - List of columns to be displayed (these don't filter data, filter that yourself!)
+ * @param dataList {Array<DataField>} - List of data to be displayed
+ * @param filters
+ * @param loading {boolean} - Displays a loading spinner
+ */
+import ListPagination from '@/elements/ListPagination.vue';
+import { useI18n } from 'vue-i18n';
+import {
+  computed, ref, toRefs,
+} from 'vue';
+import { tableDataButtonType, tableDataType } from '@/definitions';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import SecondaryButton from '@/elements/SecondaryButton.vue';
+import CautionButton from '@/elements/CautionButton.vue';
+import LoadingSpinner from '@/elements/LoadingSpinner.vue';
+
+const props = defineProps({
+  allowMultiSelect: Boolean,
+  dataName: String,
+  dataList: Array,
+  columns: Array,
+  filters: Array,
+  loading: Boolean,
+});
+
+const {
+  dataList, columns, dataName, allowMultiSelect, loading,
+} = toRefs(props);
+
+const { t } = useI18n();
+const emit = defineEmits(['fieldSelect', 'fieldClick']);
+
+// pagination
+const pageSize = 10;
+const currentPage = ref(0);
+const updatePage = (index) => {
+  currentPage.value = index;
+};
+
+const columnSpan = computed(() => (columns.value.length + (allowMultiSelect.value ? 1 : 0)));
+const selectedFields = ref([]);
+
+const mutableDataList = ref([]);
+
+/**
+ * Returns either a filtered data list, or the original all nice and paginated
+ */
+const paginatedDataList = computed(() => {
+  if (mutableDataList?.value?.length) {
+    return mutableDataList.value.slice(currentPage.value * pageSize, (currentPage.value + 1) * pageSize);
+  }
+  if (dataList?.value?.length) {
+    return dataList.value.slice(currentPage.value * pageSize, (currentPage.value + 1) * pageSize);
+  }
+
+  return [];
+});
+
+const onFieldSelect = (evt, fieldData) => {
+  const isChecked = evt?.target?.checked;
+
+  if (isChecked) {
+    selectedFields.value.push(fieldData);
+  } else {
+    const index = selectedFields.value.indexOf(fieldData);
+    if (index !== -1) {
+      selectedFields.value.splice(index, 1);
+    }
+  }
+  emit('fieldSelect', selectedFields.value);
+};
+
+const onColumnFilter = (evt, filter) => {
+  mutableDataList.value = filter.fn(evt.target.value, dataList.value);
+  if (mutableDataList.value === dataList.value) {
+    mutableDataList.value = [];
+  }
+};
+
+</script>
diff --git a/frontend/src/definitions.js b/frontend/src/definitions.js
index f220a724f..9fb5a26fe 100644
--- a/frontend/src/definitions.js
+++ b/frontend/src/definitions.js
@@ -243,6 +243,23 @@ export const qalendarSlotDurations = {
  */
 export const loginRedirectKey = 'loginRedirect';
 
+/**
+ * Data types for table row items
+ * @enum
+ * @readonly
+ */
+export const tableDataType = {
+  text: 1,
+  link: 2,
+  button: 3,
+};
+
+export const tableDataButtonType = {
+  primary: 1,
+  secondary: 2,
+  caution: 3,
+};
+
 export default {
   subscriberLevels,
   appointmentState,
@@ -259,4 +276,6 @@ export default {
   meetingLinkProviderType,
   dateFormatStrings,
   qalendarSlotDurations,
+  tableDataType,
+  tableDataButtonType,
 };
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index a83be434b..c201f8829 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -7,6 +7,7 @@
     "actionNeeded": "Action needed",
     "authenticationRequired": "Sorry, this page requires you to be logged in.",
     "credentialsIncomplete": "Please provide login credentials.",
+    "dataSourceIsEmpty": "No {name} could be found.",
     "generalBookingError": "Sorry, there was a problem retrieving the schedule details. Please try again later.",
     "googleRefreshError": "Error connecting with Google API, please re-connect.",
     "loginMethodNotSupported": "Login method not supported. Please try again.",
@@ -68,6 +69,7 @@
     "copiedToClipboard": "Copied to clipboard",
     "eventWasCreated": "Event created in your calendar.",
     "invitationWasSent": "An invitation was sent to your email.",
+    "invitationWasSentContext": "An invitation was sent to {email}.",
     "messageWasNotSent": "Your message couldn't be sent. Please try again.",
     "messageWasSent": "Your message has been sent to our support team.",
     "noPendingAppointmentsInList": "You have no pending events.",
@@ -151,9 +153,11 @@
     "end": "End",
     "endDate": "End Date",
     "endTime": "End Time",
+    "enterEmailToInvite": "Enter an email to invite them to Thunderbird Appointment:",
     "error": "Error",
     "faq": "FAQ",
     "farthestBooking": "Farthest Booking",
+    "filter": "Filter",
     "general": "General",
     "generalDetails": "Details",
     "generateZoomLink": "Generate Zoom Meeting",
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/SubscriberPanelView.vue
index faf89f632..cad75b15a 100644
--- a/frontend/src/views/SubscriberPanelView.vue
+++ b/frontend/src/views/SubscriberPanelView.vue
@@ -1,103 +1,166 @@
 <template>
-  <!-- page title area -->
-  <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-4">
-    <div class="flex flex-row justify-between items-center w-full">
-      <div>
-        <span class="font-bold">{{ filteredSubscribers.length }}</span> Subscribers
-      </div>
-      <list-pagination
-        :list-length="filteredSubscribers.length"
-        :page-size="pageSize"
-        @update="updatePage"
-      />
-    </div>
-    <div class="data-table">
-      <table>
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Username</th>
-            <th>Email</th>
-            <th>Invite code used</th>
-            <th>Time Created</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="subscriber in paginatedSubscribers" :key="subscriber.id">
-            <td>
-              <code>{{ subscriber.id }}</code>
-            </td>
-            <td>
-              <code>{{ subscriber.username }}</code>
-            </td>
-            <td>
-              {{ subscriber.email }}
-            </td>
-            <td>TODO</td>
-            <td class="whitespace-nowrap">{{ dj(subscriber.time_created).format('ll LTS') }}</td>
-            <td class="w-28 py-2">
-              <!-- TODO -->
-              <caution-button
-                disabled
-                :label="'Disable'"
-                class="text-sm px-4 h-8"
-                @click="disableSubscriber(subscriber.email)"
-              />
-            </td>
-          </tr>
-          <tr v-if="filteredSubscribers.length === 0">
-            <td colspan="5">No subscribers could be found.</td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <th colspan="6">
-            </th>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
+  <div class="flex w-full justify-center">
+    <alert-box
+      @close="pageNotification = ''"
+      v-if="pageNotification"
+      :scheme="alertSchemes.success"
+    >
+      {{ pageNotification }}
+    </alert-box>
+    <alert-box
+      @close="pageError = ''"
+      v-if="pageError"
+    >
+      {{ pageError }}
+    </alert-box>
+  </div>
+  <div v-if="displayPage">
+
+    <data-table
+    data-name="Subscribers"
+    :allow-multi-select="false"
+    :data-list="filteredSubscribers"
+    :columns="columns"
+    :filters="filters"
+    :loading="loading"
+    @field-click="onFieldClick"
+    >
+      <template v-slot:footer>
+        <div class="flex w-full gap-4">
+          <label>
+            {{ t('label.enterEmailToInvite') }}
+            <input
+              class="mx-4 w-60 rounded-md text-sm"
+              type="email"
+              placeholder="e.g. test@example.org"
+              v-model="inviteEmail"
+              :disabled="loading"
+            />
+          </label>
+          <primary-button :disabled="loading" @click="sendInvite">
+            <icon-send />
+            {{ t('label.send') }}
+          </primary-button>
+        </div>
+      </template>
+
+    </data-table>
+  </div>
+  <div v-else class="flex size-full min-h-[75vh] items-center justify-center">
+    <loading-spinner/>
   </div>
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref, watch } from 'vue';
+import {
+  computed, inject, onMounted, ref,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useUserStore } from '@/stores/user-store';
-import CautionButton from '@/elements/CautionButton.vue';
-import ListPagination from '@/elements/ListPagination.vue';
+import { alertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
+import DataTable from '@/components/DataTable.vue';
+import { useRouter } from 'vue-router';
+import LoadingSpinner from '@/elements/LoadingSpinner.vue';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import { IconSend } from '@tabler/icons-vue';
+import AlertBox from '@/elements/AlertBox.vue';
 
-// component constants
-const user = useUserStore();
-const call = inject('call');
-const dj = inject('dayjs');
-
-// component constants
+const router = useRouter();
 const { t } = useI18n();
 
-// pagination
-const pageSize = 10;
-const currentPage = ref(0);
-const updatePage = (index) => {
-  currentPage.value = index;
-}
+const call = inject('call');
+const dj = inject('dayjs');
 
-// subscriber specific props
 const subscribers = ref([]);
+const displayPage = ref(false);
+const inviteEmail = ref('');
+const loading = ref(true);
+const pageError = ref('');
+const pageNotification = ref('');
 
-const filteredSubscribers = computed(() => {
-  let filtered = subscribers.value;
-
-  return filtered;
-});
-
-const paginatedSubscribers = computed(() => {
-  return filteredSubscribers.value.length
-    ? filteredSubscribers.value.slice(currentPage.value*pageSize, (currentPage.value+1)*pageSize)
-    : [];
-});
-
+const filteredSubscribers = computed(() => subscribers.value.map((subscriber) => ({
+  id: {
+    type: tableDataType.text,
+    value: subscriber.id,
+  },
+  username: {
+    type: tableDataType.text,
+    value: subscriber.username,
+  },
+  email: {
+    type: tableDataType.text,
+    value: subscriber.email,
+  },
+  timeCreated: {
+    type: tableDataType.text,
+    value: dj(subscriber.time_created).format('ll LTS'),
+  },
+  wasInvited: {
+    type: tableDataType.text,
+    value: subscriber.invite ? 'Yes' : 'No',
+  },
+  disable: {
+    type: tableDataType.button,
+    buttonType: tableDataButtonType.caution,
+    value: 'Disable',
+  },
+})));
+const columns = [
+  {
+    key: 'id',
+    name: 'ID',
+  },
+  {
+    key: 'username',
+    name: 'Username',
+  },
+  {
+    key: 'email',
+    name: 'Email',
+  },
+  {
+    key: 'createdAt',
+    name: 'Time Created',
+  },
+  {
+    key: 'wasInvited',
+    name: 'Was Invited?',
+  },
+  {
+    key: 'disable',
+    name: '',
+  },
+];
+const filters = [
+  {
+    name: 'Was Invited',
+    options: [
+      {
+        name: 'All',
+        key: 'all',
+      },
+      {
+        name: 'Yes',
+        key: 'yes',
+      },
+      {
+        name: 'No',
+        key: 'no',
+      },
+    ],
+    /**
+     * Callback function, filter the list by selectedKey and return it back to the table
+     * @param selectedKey
+     * @param mutableDataList
+     * @returns {*}
+     */
+    fn: (selectedKey, mutableDataList) => {
+      if (selectedKey === 'all') {
+        return mutableDataList;
+      }
+      return mutableDataList.filter((data) => data.wasInvited.value.toLowerCase() === selectedKey);
+    },
+  },
+];
 const getSubscribers = async () => {
   const response = await call('subscriber/').get().json();
   const { data } = response;
@@ -105,6 +168,10 @@ const getSubscribers = async () => {
   subscribers.value = data.value;
 };
 
+const onFieldClick = (a, b, c) => {
+  console.log('click', a, b, c);
+};
+
 const disableSubscriber = async (email) => {
   if (!email) {
     return;
@@ -118,8 +185,57 @@ const disableSubscriber = async (email) => {
   }
 };
 
-onMounted(async () => {
+const refresh = async () => {
+  loading.value = true;
   await getSubscribers();
+  loading.value = false;
+};
+
+const sendInvite = async () => {
+  loading.value = true;
+  pageError.value = '';
+  pageNotification.value = '';
+
+  const response = await call('invite/send').post({
+    email: inviteEmail.value,
+  }).json();
+
+  const { data, error } = response;
+
+  if (error.value) {
+    const errorObj = data.value?.detail;
+
+    if (!errorObj) {
+      pageError.value = t('error.somethingWentWrong');
+    } else if (errorObj instanceof Array) {
+      pageError.value = errorObj.map((err) => err.msg).join('\n');
+    } else {
+      pageError.value = data.value?.detail?.message;
+    }
+  } else {
+    pageNotification.value = t('info.invitationWasSentContext', { email: inviteEmail.value });
+    inviteEmail.value = '';
+    await refresh();
+  }
+
+  loading.value = false;
+};
+
+const amIAdmin = async () => {
+  const response = await call('permission-check').post().json();
+  const { error } = response;
+
+  return !error.value;
+};
+
+onMounted(async () => {
+  const okToContinue = await amIAdmin();
+  if (!okToContinue) {
+    await router.replace('/');
+    return;
+  }
+  displayPage.value = true;
+  await refresh();
 });
 
 </script>

From 42e106ed02cf29acd8962177894dcc9a9799cc32 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 13:20:06 -0700
Subject: [PATCH 12/19] Fix up fieldClick event, and hide the disable button
 for now.

---
 .../appointment/database/repo/subscriber.py   |  2 +-
 backend/src/appointment/routes/subscriber.py  |  5 ++--
 frontend/src/components/DataTable.vue         |  8 +++---
 frontend/src/views/SubscriberPanelView.vue    | 25 +++++++++++--------
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/backend/src/appointment/database/repo/subscriber.py b/backend/src/appointment/database/repo/subscriber.py
index 8d8fba1f8..bc8d4a5e5 100644
--- a/backend/src/appointment/database/repo/subscriber.py
+++ b/backend/src/appointment/database/repo/subscriber.py
@@ -15,7 +15,7 @@ def get(db: Session, subscriber_id: int) -> models.Subscriber | None:
     return db.get(models.Subscriber, subscriber_id)
 
 
-def get_by_email(db: Session, email: str):
+def get_by_email(db: Session, email: str) -> models.Subscriber | None:
     """retrieve subscriber by email"""
     return db.query(models.Subscriber).filter(models.Subscriber.email == email).first()
 
diff --git a/backend/src/appointment/routes/subscriber.py b/backend/src/appointment/routes/subscriber.py
index d23283468..105ac1086 100644
--- a/backend/src/appointment/routes/subscriber.py
+++ b/backend/src/appointment/routes/subscriber.py
@@ -15,15 +15,16 @@
 
 
 @router.get('/', response_model=list[schemas.SubscriberAdminOut])
-def get_all_subscriber(db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+def get_all_subscriber(db: Session = Depends(get_db), _: Subscriber = Depends(get_admin_subscriber)):
     """List all existing invites, needs admin permissions"""
     response = db.query(models.Subscriber).all()
     return response
 
 
 @router.put("/disable/{email}")
-def disable_subscriber(email: str, db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+def disable_subscriber(email: str, db: Session = Depends(get_db), _: Subscriber = Depends(get_admin_subscriber)):
     """endpoint to disable a subscriber by email, needs admin permissions"""
+    # TODO: Add status to subscriber, and disable it instead.
     raise NotImplementedError
 
     subscriber = repo.subscriber.get_by_email(db, email)
diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 9265e71fb..3ca767697 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -41,9 +41,9 @@
                 <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
               </span>
               <span v-else-if="fieldData.type === tableDataType.button">
-                <primary-button v-if="fieldData.buttonType === tableDataButtonType.primary" @click="emit('fieldClick', datum)">{{ fieldData.value }}</primary-button>
-                <secondary-button v-else-if="fieldData.buttonType === tableDataButtonType.secondary" @click="emit('fieldClick', datum)">{{ fieldData.value }}</secondary-button>
-                <caution-button v-else-if="fieldData.buttonType === tableDataButtonType.caution" @click="emit('fieldClick', datum)">{{ fieldData.value }}</caution-button>
+                <primary-button v-if="fieldData.buttonType === tableDataButtonType.primary" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</primary-button>
+                <secondary-button v-else-if="fieldData.buttonType === tableDataButtonType.secondary" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</secondary-button>
+                <caution-button v-else-if="fieldData.buttonType === tableDataButtonType.caution" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</caution-button>
               </span>
             </td>
           </tr>
@@ -82,7 +82,7 @@
  * @param dataName {string} - The name for the object being represented on the table
  * @param columns {Array<DataColumn>} - List of columns to be displayed (these don't filter data, filter that yourself!)
  * @param dataList {Array<DataField>} - List of data to be displayed
- * @param filters
+ * @param filters {Array<Filter>} - List of filters to be displayed
  * @param loading {boolean} - Displays a loading spinner
  */
 import ListPagination from '@/elements/ListPagination.vue';
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/SubscriberPanelView.vue
index cad75b15a..ff8571d6d 100644
--- a/frontend/src/views/SubscriberPanelView.vue
+++ b/frontend/src/views/SubscriberPanelView.vue
@@ -23,7 +23,7 @@
     :columns="columns"
     :filters="filters"
     :loading="loading"
-    @field-click="onFieldClick"
+    @field-click="(_key, field) => disableSubscriber(field.email.value)"
     >
       <template v-slot:footer>
         <div class="flex w-full gap-4">
@@ -98,11 +98,13 @@ const filteredSubscribers = computed(() => subscribers.value.map((subscriber) =>
     type: tableDataType.text,
     value: subscriber.invite ? 'Yes' : 'No',
   },
+  /*
   disable: {
     type: tableDataType.button,
     buttonType: tableDataButtonType.caution,
     value: 'Disable',
   },
+   */
 })));
 const columns = [
   {
@@ -125,10 +127,12 @@ const columns = [
     key: 'wasInvited',
     name: 'Was Invited?',
   },
+  /*
   {
     key: 'disable',
     name: '',
   },
+   */
 ];
 const filters = [
   {
@@ -168,10 +172,17 @@ const getSubscribers = async () => {
   subscribers.value = data.value;
 };
 
-const onFieldClick = (a, b, c) => {
-  console.log('click', a, b, c);
+const refresh = async () => {
+  loading.value = true;
+  await getSubscribers();
+  loading.value = false;
 };
 
+/**
+ * Disables a subscriber
+ * @param email
+ * @returns {Promise<void>}
+ */
 const disableSubscriber = async (email) => {
   if (!email) {
     return;
@@ -181,16 +192,10 @@ const disableSubscriber = async (email) => {
   const { data } = response;
 
   if (data.value) {
-    await getSubscribers();
+    await refresh();
   }
 };
 
-const refresh = async () => {
-  loading.value = true;
-  await getSubscribers();
-  loading.value = false;
-};
-
 const sendInvite = async () => {
   loading.value = true;
   pageError.value = '';

From 63e6afed079b34635a2f892eb37a3750206cc09f Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 13:20:45 -0700
Subject: [PATCH 13/19] Remove the now unneeded invite panel (sorry buddy, you
 were a good first draft!)

---
 frontend/src/router.js                 |   6 -
 frontend/src/views/InvitePanelView.vue | 192 -------------------------
 2 files changed, 198 deletions(-)
 delete mode 100644 frontend/src/views/InvitePanelView.vue

diff --git a/frontend/src/router.js b/frontend/src/router.js
index 43012c17a..713a367b4 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -14,7 +14,6 @@ const AppointmentsView = defineAsyncComponent(() => import('@/views/Appointments
 const SettingsView = defineAsyncComponent(() => import('@/views/SettingsView'));
 const ProfileView = defineAsyncComponent(() => import('@/views/ProfileView'));
 const LegalView = defineAsyncComponent(() => import('@/views/LegalView'));
-const InvitePanelView = defineAsyncComponent(() => import('@/views/InvitePanelView'));
 const SubscriberPanelView = defineAsyncComponent(() => import('@/views/SubscriberPanelView'));
 
 /**
@@ -92,11 +91,6 @@ const routes = [
     name: 'terms',
     component: LegalView,
   },
-  {
-    path: '/admin/invites',
-    name: 'admin-invite-panel',
-    component: InvitePanelView,
-  },
   {
     path: '/admin/subscribers',
     name: 'admin-subscriber-panel',
diff --git a/frontend/src/views/InvitePanelView.vue b/frontend/src/views/InvitePanelView.vue
deleted file mode 100644
index f183650ac..000000000
--- a/frontend/src/views/InvitePanelView.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-  <!-- page title area -->
-  <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-4">
-    <div class="flex flex-row justify-between items-center w-full">
-      <div>
-        <span class="font-bold">{{ filteredInvites.length }}</span> invite codes
-      </div>
-      <list-pagination
-        :list-length="filteredInvites.length"
-        :page-size="pageSize"
-        @update="updatePage"
-      />
-      <div class="flex items-center justify-end gap-4 text-right">
-        <label for="used-filter" class="whitespace-nowrap">Used Filter</label>
-        <select id="used-filter" class="rounded-md" v-model="usedFilter">
-          <option value="all">Show All</option>
-          <option value="unused">Show Unused</option>
-          <option value="used">Show Used</option>
-        </select>
-
-        <label for="status-filter" class="whitespace-nowrap">Status Filter</label>
-        <select id="status-filter" class="rounded-md" v-model="inviteFilter">
-          <option value="all">Show All</option>
-          <option value="available">Show Available</option>
-          <option value="revoked">Show Revoked</option>
-        </select>
-      </div>
-    </div>
-    <div class="data-table">
-      <table>
-        <thead>
-          <tr>
-            <th>Code</th>
-            <th>Used</th>
-            <th>Status</th>
-            <th>Time Created</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="invite in paginatedInvites" :key="invite.code">
-            <td>
-              <div class="flex gap-4 items-center">
-                <code>{{ invite.code }}</code>
-                <text-button :copy="invite.code" />
-              </div>
-            </td>
-            <td>{{ invite.subscriber_id !== null ? 'Yes' : 'No' }}</td>
-            <td>{{ invite.status === 1 ? 'Available' : 'Revoked' }}</td>
-            <td class="whitespace-nowrap">{{ dj(invite.time_created).format('ll LTS') }}</td>
-            <td class="w-28 py-2">
-              <caution-button
-                v-if="invite.status !== 2"
-                :label="'Revoke'"
-                class="text-sm px-4 h-8"
-                @click="revokeInvite(invite.code)"
-              />
-            </td>
-          </tr>
-          <tr v-if="filteredInvites.length === 0">
-            <td colspan="5">No invites of this type could be found.</td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <th colspan="5">
-              <div class="flex w-full gap-4">
-                <label>
-                  Generate
-                  <input
-                    class="w-20 rounded-md text-sm"
-                    type="number"
-                    placeholder="Amount"
-                    v-model="amountOfInvitesToGenerate"
-                  />
-                  invite codes. They will be added to this list.
-                </label>
-                <primary-button :label="'Generate'" @click="generateInvites" />
-              </div>
-            </th>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { subscriberLevels } from '@/definitions';
-import { useUserStore } from '@/stores/user-store';
-import { storeToRefs } from 'pinia';
-import PrimaryButton from '@/elements/PrimaryButton';
-import CautionButton from '@/elements/CautionButton.vue';
-import TextButton from '@/elements/TextButton.vue';
-import ListPagination from '@/elements/ListPagination.vue';
-
-// icons
-import { IconPencil } from '@tabler/icons-vue';
-import { useRouter } from 'vue-router';
-
-// component constants
-const user = useUserStore();
-const call = inject('call');
-const dj = inject('dayjs');
-
-// component constants
-const { t } = useI18n();
-
-// pagination
-const pageSize = 10;
-const currentPage = ref(0);
-const updatePage = (index) => {
-  currentPage.value = index;
-}
-
-// invite specific props
-const usedFilter = ref('all');
-const inviteFilter = ref('all');
-const invites = ref([]);
-const amountOfInvitesToGenerate = ref(0);
-
-// reset page when filter changes
-watch([usedFilter, inviteFilter], () => {
-  currentPage.value = 0;
-});
-
-const filteredInvites = computed(() => {
-  if (inviteFilter.value === 'all' && usedFilter.value === 'all') {
-    return invites.value;
-  }
-
-  let filtered = invites.value;
-  if (inviteFilter.value !== 'all') {
-    filtered = filtered.filter((invite) => (invite.status === 1 ? inviteFilter.value === 'available' : inviteFilter.value !== 'available'));
-  }
-
-  if (usedFilter.value !== 'all') {
-    filtered = filtered.filter((invite) => (invite.subscriber_id === null ? usedFilter.value === 'unused' : usedFilter.value !== 'unused'));
-  }
-
-  return filtered;
-});
-
-const paginatedInvites = computed(() => {
-  return filteredInvites.value.length
-    ? filteredInvites.value.slice(currentPage.value*pageSize, (currentPage.value+1)*pageSize)
-    : [];
-});
-
-const getInvites = async () => {
-  const response = await call('invite/').get().json();
-  const { data } = response;
-
-  invites.value = data.value;
-};
-
-const generateInvites = async () => {
-  // Parse it as an integer to remove any bad bits
-  const amount = parseInt(`${amountOfInvitesToGenerate.value}`, 10);
-  if (!amount) {
-    return;
-  }
-
-  amountOfInvitesToGenerate.value = 0;
-
-  const response = await call(`invite/generate/${amount}`).post().json();
-  const { data } = response;
-
-  invites.value = [...invites.value, ...data.value];
-};
-
-const revokeInvite = async (code) => {
-  // Parse it as a string to remove any bad bits..this probably works fine right?
-  if (!code) {
-    return;
-  }
-
-  const response = await call(`invite/revoke/${code}`).put().json();
-  const { data } = response;
-
-  if (data.value) {
-    await getInvites();
-  }
-};
-
-onMounted(async () => {
-  await getInvites();
-});
-
-</script>

From 47113d83aa1acc493a2accc30fe9c488ab385a91 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 13:28:39 -0700
Subject: [PATCH 14/19] Pagination fixes, and send on enter

---
 frontend/src/components/DataTable.vue      | 4 ++--
 frontend/src/views/SubscriberPanelView.vue | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 3ca767697..c2dc0d3fa 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -13,7 +13,7 @@
         </label>
       </div>
       <list-pagination
-        :list-length="dataList.length"
+        :list-length="mutableDataList.length > 0 ? mutableDataList.length : dataList.length"
         :page-size="pageSize"
         @update="updatePage"
       />
@@ -33,7 +33,7 @@
             <td v-if="allowMultiSelect">
               <input type="checkbox" @change="(evt) => onFieldSelect(evt, datum)" />
             </td>
-            <td v-for="(fieldData, fieldKey) in datum" :key="fieldKey">
+            <td v-for="(fieldData, fieldKey) in datum" :key="fieldKey" :class="`column-${fieldKey}`">
               <span v-if="fieldData.type === tableDataType.text">
                 {{ fieldData.value }}
               </span>
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/SubscriberPanelView.vue
index ff8571d6d..5802dc5f7 100644
--- a/frontend/src/views/SubscriberPanelView.vue
+++ b/frontend/src/views/SubscriberPanelView.vue
@@ -15,7 +15,6 @@
     </alert-box>
   </div>
   <div v-if="displayPage">
-
     <data-table
     data-name="Subscribers"
     :allow-multi-select="false"
@@ -35,6 +34,8 @@
               placeholder="e.g. test@example.org"
               v-model="inviteEmail"
               :disabled="loading"
+              enterkeyhint="send"
+              @keyup.enter="sendInvite"
             />
           </label>
           <primary-button :disabled="loading" @click="sendInvite">

From c7f8387852b97b9dfd742b11c3eaeed9d90e77dd Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 13:39:29 -0700
Subject: [PATCH 15/19] Hook up the secret to aws

---
 backend/src/appointment/secrets.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/appointment/secrets.py b/backend/src/appointment/secrets.py
index 97acd992c..0da098bc1 100644
--- a/backend/src/appointment/secrets.py
+++ b/backend/src/appointment/secrets.py
@@ -64,3 +64,4 @@ def normalize_secrets():
         os.environ['FXA_SECRET'] = secrets.get('secret')
         os.environ['FXA_CALLBACK'] = secrets.get('callback_url')
         os.environ['FXA_ALLOW_LIST'] = secrets.get('allow_list')
+        os.environ['APP_ADMIN_ALLOW_LIST'] = secrets.get('admin_list')

From b74ad0199710ee531e5f0763ae39fdc6dd61e08d Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 13:48:13 -0700
Subject: [PATCH 16/19] Add some more tests

---
 backend/test/integration/test_auth.py | 33 +++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/backend/test/integration/test_auth.py b/backend/test/integration/test_auth.py
index 73492b1d8..5efbf3905 100644
--- a/backend/test/integration/test_auth.py
+++ b/backend/test/integration/test_auth.py
@@ -1,7 +1,7 @@
 import os
 
 from appointment.l10n import l10n
-from defines import FXA_CLIENT_PATCH, TEST_USER_ID
+from defines import FXA_CLIENT_PATCH, auth_headers
 from appointment.database import repo, models
 
 
@@ -91,7 +91,8 @@ def test_fxa_callback(self, with_db, with_client, monkeypatch):
             assert fxa
             assert fxa.type_id == FXA_CLIENT_PATCH.get('external_connection_type_id')
 
-    def test_fxa_callback_with_mismatch_uid(self, with_db, with_client, monkeypatch, make_external_connections, make_basic_subscriber, with_l10n):
+    def test_fxa_callback_with_mismatch_uid(self, with_db, with_client, monkeypatch, make_external_connections,
+                                            make_basic_subscriber, with_l10n):
         """Test that our fxa callback will throw an invalid-credentials error if the incoming fxa uid doesn't match any existing ones."""
         os.environ['AUTH_SCHEME'] = 'fxa'
 
@@ -121,3 +122,31 @@ def test_fxa_callback_with_mismatch_uid(self, with_db, with_client, monkeypatch,
         assert response.status_code == 403, response.text
         # This will just key match due to the lack of context.
         assert response.json().get('detail') == l10n('invalid-credentials')
+
+    def test_permission_check_with_no_admin_email(self, with_client):
+        os.environ['APP_ADMIN_ALLOW_LIST'] = ''
+
+        response = with_client.post('/permission-check',
+                                    headers=auth_headers)
+        assert response.status_code == 401, response.text
+
+    def test_permission_check_with_wrong_admin_email(self, with_client):
+        os.environ['APP_ADMIN_ALLOW_LIST'] = '@notexample.org'
+
+        response = with_client.post('/permission-check',
+                                    headers=auth_headers)
+        assert response.status_code == 401, response.text
+
+    def test_permission_check_with_correct_admin_email(self, with_client):
+        os.environ['APP_ADMIN_ALLOW_LIST'] = f"@{os.getenv('TEST_USER_EMAIL').split('@')[1]}"
+
+        response = with_client.post('/permission-check',
+                                    headers=auth_headers)
+        assert response.status_code == 200, response.text
+
+    def test_permission_check_with_correct_full_admin_email(self, with_client):
+        os.environ['APP_ADMIN_ALLOW_LIST'] = os.getenv('TEST_USER_EMAIL')
+
+        response = with_client.post('/permission-check',
+                                    headers=auth_headers)
+        assert response.status_code == 200, response.text

From df71a4d877f426e9c4ae1efedfc6a9a15ab714a9 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 10 May 2024 14:38:30 -0700
Subject: [PATCH 17/19] Add some basic responsiveness

---
 frontend/src/components/DataTable.vue      |  4 ++--
 frontend/src/views/SubscriberPanelView.vue | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index c2dc0d3fa..2df9051e9 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="flex flex-col items-center justify-center gap-4">
-    <div class="flex w-full flex-row items-center justify-between">
+    <div class="flex w-full flex-col items-center justify-between gap-4 md:flex-row md:gap-0">
       <div>
         <span class="font-bold">{{ paginatedDataList.length }}</span> {{ dataName }}
       </div>
@@ -18,7 +18,7 @@
         @update="updatePage"
       />
     </div>
-    <div class="data-table">
+    <div class="data-table overflow-x-scroll">
       <table>
         <thead>
           <tr>
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/SubscriberPanelView.vue
index 5802dc5f7..184e38353 100644
--- a/frontend/src/views/SubscriberPanelView.vue
+++ b/frontend/src/views/SubscriberPanelView.vue
@@ -25,8 +25,8 @@
     @field-click="(_key, field) => disableSubscriber(field.email.value)"
     >
       <template v-slot:footer>
-        <div class="flex w-full gap-4">
-          <label>
+        <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
+          <label class="flex flex-col gap-4 md:flex-row md:gap-0">
             {{ t('label.enterEmailToInvite') }}
             <input
               class="mx-4 w-60 rounded-md text-sm"
@@ -95,6 +95,10 @@ const filteredSubscribers = computed(() => subscribers.value.map((subscriber) =>
     type: tableDataType.text,
     value: dj(subscriber.time_created).format('ll LTS'),
   },
+  timezone: {
+    type: tableDataType.text,
+    value: subscriber.timezone ?? 'Unset',
+  },
   wasInvited: {
     type: tableDataType.text,
     value: subscriber.invite ? 'Yes' : 'No',
@@ -124,6 +128,10 @@ const columns = [
     key: 'createdAt',
     name: 'Time Created',
   },
+  {
+    key: 'timezone',
+    name: 'Timezone',
+  },
   {
     key: 'wasInvited',
     name: 'Was Invited?',

From d1560dad5ad1acffc41096714ea2b1dcef1094fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Mon, 13 May 2024 09:39:33 +0200
Subject: [PATCH 18/19] =?UTF-8?q?=F0=9F=92=9A=20Fix=20alignment,=20indenta?=
 =?UTF-8?q?tion=20and=20scrollbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DataTable.vue      |  2 +-
 frontend/src/views/SubscriberPanelView.vue | 22 ++++++++++------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 2df9051e9..0438e1db1 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -18,7 +18,7 @@
         @update="updatePage"
       />
     </div>
-    <div class="data-table overflow-x-scroll">
+    <div class="data-table overflow-x-auto">
       <table>
         <thead>
           <tr>
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/SubscriberPanelView.vue
index 184e38353..2bb1e13fa 100644
--- a/frontend/src/views/SubscriberPanelView.vue
+++ b/frontend/src/views/SubscriberPanelView.vue
@@ -16,18 +16,18 @@
   </div>
   <div v-if="displayPage">
     <data-table
-    data-name="Subscribers"
-    :allow-multi-select="false"
-    :data-list="filteredSubscribers"
-    :columns="columns"
-    :filters="filters"
-    :loading="loading"
-    @field-click="(_key, field) => disableSubscriber(field.email.value)"
+      data-name="Subscribers"
+      :allow-multi-select="false"
+      :data-list="filteredSubscribers"
+      :columns="columns"
+      :filters="filters"
+      :loading="loading"
+      @field-click="(_key, field) => disableSubscriber(field.email.value)"
     >
       <template v-slot:footer>
         <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
-          <label class="flex flex-col gap-4 md:flex-row md:gap-0">
-            {{ t('label.enterEmailToInvite') }}
+          <label class="flex flex-col gap-4 md:flex-row md:items-center md:gap-0">
+            <span>{{ t('label.enterEmailToInvite') }}</span>
             <input
               class="mx-4 w-60 rounded-md text-sm"
               type="email"
@@ -53,9 +53,7 @@
 </template>
 
 <script setup>
-import {
-  computed, inject, onMounted, ref,
-} from 'vue';
+import { computed, inject, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { alertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
 import DataTable from '@/components/DataTable.vue';

From dda5a98c2a41fd17acc987de6c361b4c07457b16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Mon, 13 May 2024 09:46:20 +0200
Subject: [PATCH 19/19] =?UTF-8?q?=F0=9F=8C=90=20Update=20German=20lang=20s?=
 =?UTF-8?q?trings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/appointment/l10n/de/main.ftl |  3 +++
 frontend/src/locales/de.json             | 22 +++++++++++++---------
 frontend/src/locales/en.json             | 16 ++++++++--------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/backend/src/appointment/l10n/de/main.ftl b/backend/src/appointment/l10n/de/main.ftl
index 25f3adaf7..1951e6758 100644
--- a/backend/src/appointment/l10n/de/main.ftl
+++ b/backend/src/appointment/l10n/de/main.ftl
@@ -40,6 +40,9 @@ remote-calendar-connection-error = Der angebundene Kalender konnte nicht erreich
 
 event-could-not-be-accepted = Es ist ein Fehler bei der Annahme der Buchungsdaten aufgetreten. Bitte später noch einmal versuchen.
 
+failed-to-create-subscriber = Es gab einen Fehler beim Anlegen der Person. Bitte später erneut versuchen.
+subscriber-already-exists = Eine Person mit dieser E-Mail-Adresse existiert bereits.
+
 ## Authentication Exceptions
 
 email-mismatch = E-Mail-Adresse stimmen nicht überein.
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 2f50d63a2..55b432ee1 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -7,6 +7,7 @@
     "actionNeeded": "Aktion erforderlich!",
     "authenticationRequired": "Sorry, um diese Seite zu sehen ist eine Anmeldung erforderlich.",
     "credentialsIncomplete": "Bitte gib deine Zugangsdaten ein.",
+    "dataSourceIsEmpty": "{name} konnte nicht gefunden werden.",
     "generalBookingError": "Beim Abrufen des Zeitplans ist ein Problem aufgetreten. Bitte später nochmal versuchen.",
     "googleRefreshError": "Es gab ein Problem mit Google, bitte erneut verbinden.",
     "loginMethodNotSupported": "Login-Methode wird nicht unterstützt. Bitte nochmal versuchen.",
@@ -67,7 +68,8 @@
     "bookingSuccessfullyRequested": "Buchung erfolgreich angefragt!",
     "copiedToClipboard": "In Zwischenablage kopiert",
     "eventWasCreated": "Das Event wurde in deinem Kalender erstellt.",
-    "invitationWasSent": "Eine Einladung wurde an deine E-Mail-Adresse gesandt.",
+    "invitationWasSent": "Eine Einladung wurde an deine E-Mail-Adresse gesendet.",
+    "invitationWasSentContext": "Eine Einladung wurde an {email} gesendet.",
     "messageWasNotSent": "Die Nachricht konnte nicht gesendet werden. Bitte nochmal versuchen.",
     "messageWasSent": "Die Nachricht wurde an unser Support-Team gesendet.",
     "noPendingAppointmentsInList": "Hier gibt es aktuell keine ausstehenden Termine.",
@@ -151,9 +153,11 @@
     "end": "Ende",
     "endDate": "Enddatum",
     "endTime": "Endzeit",
+    "enterEmailToInvite": "Per E-Mail-Adresse zu Thunderbird Appointment einladen:",
     "error": "Fehler",
     "faq": "FAQ",
     "farthestBooking": "Späteste Buchung",
+    "filter": "Filter",
     "general": "Allgemein",
     "generalDetails": "Allgemeine Infos",
     "generateZoomLink": "Zoom Meeting generieren",
@@ -307,23 +311,23 @@
           "fxa": "Dies ist das Konto, das mit dem Login verbunden ist. Wenn das Mozilla-Konto gelöscht wird, werden auch alle Daten bei Thunderbird Appointment entfernt.",
           "google": "Ein Google-Konto kann verbunden werden, um auf die Kalender zuzugreifen. Wenn die Verbindung zum Google-Konto getrennt wird, werden die entsprechenden Kalender und die damit verbundenen Daten bei Thunderbird Appointment entfernt.",
           "googleLegal": {
-            "text": "Die Nutzung von Thunderbird Appointment und die Weitergabe von Informationen, die per Google APIs übertragen wurden, an eine andere App erfolgt unter Einhaltung der {0}, einschließlich der Anforderungen für die begrenzte Nutzung.",
-            "link": "Google API Services User Data Policy"
+            "link": "Google API Services User Data Policy",
+            "text": "Die Nutzung von Thunderbird Appointment und die Weitergabe von Informationen, die per Google APIs übertragen wurden, an eine andere App erfolgt unter Einhaltung der {0}, einschließlich der Anforderungen für die begrenzte Nutzung."
           },
           "zoom": "Ein Zoom-Konto kann verbunden werden, um Einladungen zu Zoom-Besprechungen an Terminen zu ermöglichen."
         },
         "disconnect": {
           "google": {
-            "title": "Google Calendar trennen",
-            "message": "Beim Trennen der Verbindung zu Google-Kalendern werden alle verfügbaren Google-Kalender und die zugehörigen Daten vom Thunderbird Appointment Konto entfernt. Wenn ein Terminplan mit einem Google-Kalender eingerichtet ist, wird er deaktiviert, bis der Terminplan auf einen neuen Kalender eingestellt wurde.",
+            "cancel": "Abbrechen",
             "confirm": "Trennen",
-            "cancel": "Abbrechen"
+            "message": "Beim Trennen der Verbindung zu Google-Kalendern werden alle verfügbaren Google-Kalender und die zugehörigen Daten vom Thunderbird Appointment Konto entfernt. Wenn ein Terminplan mit einem Google-Kalender eingerichtet ist, wird er deaktiviert, bis der Terminplan auf einen neuen Kalender eingestellt wurde.",
+            "title": "Google Calendar trennen"
           },
           "zoom": {
-            "title": "Zoom trennen",
-            "message": "Beim Trennen der Verbindung zum Zoom-Konto wird die Möglichkeit, Zoom-Meeting-Links für Buchungen zu erstellen, deaktiviert. Bestehende Meeting-Links bleiben davon unberührt.",
+            "cancel": "Abbrechen",
             "confirm": "Trennen",
-            "cancel": "Abbrechen"
+            "message": "Beim Trennen der Verbindung zum Zoom-Konto wird die Möglichkeit, Zoom-Meeting-Links für Buchungen zu erstellen, deaktiviert. Bestehende Meeting-Links bleiben davon unberührt.",
+            "title": "Zoom trennen"
           }
         }
       }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c201f8829..e8c232b84 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -311,23 +311,23 @@
           "fxa": "This is the account associated with your login. If you delete your Mozilla Account your data with Thunderbird Appointment will also be removed.",
           "google": "You can connect your Google account to access your calendars. Disconnecting your account will remove your calendars, and associated data.",
           "googleLegal": {
-            "text": "Thunderbird Appointment use and transfer of information received from Google APIs to any other app will adhere to {0}, including the Limited Use requirements.",
-            "link": "Google API Services User Data Policy"
+            "link": "Google API Services User Data Policy",
+            "text": "Thunderbird Appointment use and transfer of information received from Google APIs to any other app will adhere to {0}, including the Limited Use requirements."
           },
           "zoom": "You can connect your Zoom account to enable instant meeting invites with your appointments."
         },
         "disconnect": {
           "google": {
-            "title": "Disconnect Google Calendar",
-            "message": "Disconnecting your Google Calendars will remove all available Google Calendars and associated data from your Thunderbird Appointment account. If your schedule is setup with a Google Calendar then it will be turned off until you set it to a new calendar.",
+            "cancel": "Back",
             "confirm": "Disconnect",
-            "cancel": "Back"
+            "message": "Disconnecting your Google Calendars will remove all available Google Calendars and associated data from your Thunderbird Appointment account. If your schedule is setup with a Google Calendar then it will be turned off until you set it to a new calendar.",
+            "title": "Disconnect Google Calendar"
           },
           "zoom": {
-            "title": "Disconnect Zoom",
-            "message": "Disconnecting your Zoom account will disable the ability to generate Zoom meeting links on bookings. Any existing meeting link will be unaffected.",
+            "cancel": "Back",
             "confirm": "Disconnect",
-            "cancel": "Back"
+            "message": "Disconnecting your Zoom account will disable the ability to generate Zoom meeting links on bookings. Any existing meeting link will be unaffected.",
+            "title": "Disconnect Zoom"
           }
         }
       }