From 56b86509bad002fbcbf0c18dcad57d6adeedbe0c Mon Sep 17 00:00:00 2001
From: Mel <97147377+MelissaAutumn@users.noreply.github.com>
Date: Wed, 8 May 2024 12:49:28 -0700
Subject: [PATCH] Allow a user to disconnect their google account (#393)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Disconnect Google:
* Add a new "Connected Accounts" section in Settings.
* Adds a `google/disconnect` route which removes connection details and calendars.
* Make Settings mobile responsive.
* Adjust styling for SecondaryButton on dark mode.
* Adjust styling for Settings page titles.
* Fix Settings page internal routing.

* 🌐 Update German lang strings

* PR suggestions

---------

Co-authored-by: Andreas Müller <mail@devmount.de>
---
 .../src/appointment/database/repo/calendar.py |  10 ++
 .../src/appointment/dependencies/google.py    |   2 +-
 backend/src/appointment/routes/google.py      |  32 +++-
 frontend/src/components/SettingsAccount.vue   |  45 +----
 frontend/src/components/SettingsCalendar.vue  |   2 +-
 .../src/components/SettingsConnections.vue    | 161 ++++++++++++++++++
 frontend/src/components/SettingsGeneral.vue   |   2 +-
 frontend/src/definitions.js                   |   6 +-
 frontend/src/elements/SecondaryButton.vue     |   2 +-
 frontend/src/locales/de.json                  |  36 ++++
 frontend/src/locales/en.json                  |  36 ++++
 .../src/stores/external-connections-store.js  |   9 +-
 frontend/src/views/SettingsView.vue           |  38 +----
 13 files changed, 292 insertions(+), 89 deletions(-)
 create mode 100644 frontend/src/components/SettingsConnections.vue

diff --git a/backend/src/appointment/database/repo/calendar.py b/backend/src/appointment/database/repo/calendar.py
index 7ead589e5..f5ab6cba1 100644
--- a/backend/src/appointment/database/repo/calendar.py
+++ b/backend/src/appointment/database/repo/calendar.py
@@ -133,3 +133,13 @@ def delete_by_subscriber(db: Session, subscriber_id: int):
     for calendar in calendars:
         delete(db, calendar_id=calendar.id)
     return True
+
+
+def delete_by_subscriber_and_provider(db: Session, subscriber_id: int, provider: models.CalendarProvider):
+    """Delete all subscriber's calendar by a provider"""
+    calendars = get_by_subscriber(db, subscriber_id=subscriber_id)
+    for calendar in calendars:
+        if calendar.provider == provider:
+            delete(db, calendar_id=calendar.id)
+
+    return True
diff --git a/backend/src/appointment/dependencies/google.py b/backend/src/appointment/dependencies/google.py
index 95c37ac79..b26439444 100644
--- a/backend/src/appointment/dependencies/google.py
+++ b/backend/src/appointment/dependencies/google.py
@@ -12,7 +12,7 @@
 )
 
 
-def get_google_client():
+def get_google_client() -> 'GoogleClient':
     """Returns the google client instance"""
     try:
         _google_client.setup()
diff --git a/backend/src/appointment/routes/google.py b/backend/src/appointment/routes/google.py
index cbf92632f..49f8abe71 100644
--- a/backend/src/appointment/routes/google.py
+++ b/backend/src/appointment/routes/google.py
@@ -1,18 +1,16 @@
-import json
 import os
-from datetime import datetime
 
 from fastapi import APIRouter, Depends, Request
 from fastapi.responses import RedirectResponse
 
 from ..controller.apis.google_client import GoogleClient
-from ..database import repo, schemas
+from ..database import repo, schemas, models
 from sqlalchemy.orm import Session
 
 from ..dependencies.auth import get_subscriber
 from ..dependencies.database import get_db
 
-from ..database.models import Subscriber, ExternalConnectionType, ExternalConnections
+from ..database.models import Subscriber, ExternalConnectionType
 from ..dependencies.google import get_google_client
 from ..exceptions.google_api import GoogleInvalidCredentials
 from ..exceptions.google_api import GoogleScopeChanged
@@ -76,10 +74,12 @@ def google_callback(
     if google_id is None:
         return google_callback_error(l10n('google-auth-fail'))
 
-    external_connection = repo.external_connection.get_by_type(db, subscriber.id, ExternalConnectionType.google, google_id)
+    external_connection = repo.external_connection.get_by_type(db, subscriber.id, ExternalConnectionType.google,
+                                                               google_id)
 
     # Create an artificial limit of one google account per account, mainly because we didn't plan for multiple accounts!
-    remainder = list(filter(lambda ec: ec.type_id != google_id, repo.external_connection.get_by_type(db, subscriber.id, ExternalConnectionType.google)))
+    remainder = list(filter(lambda ec: ec.type_id != google_id,
+                            repo.external_connection.get_by_type(db, subscriber.id, ExternalConnectionType.google)))
 
     if len(remainder) > 0:
         return google_callback_error(l10n('google-only-one'))
@@ -97,7 +97,7 @@ def google_callback(
         repo.external_connection.create(db, external_connection_schema)
     else:
         repo.external_connection.update_token(db, creds.to_json(), subscriber.id,
-                                                         ExternalConnectionType.google, google_id)
+                                              ExternalConnectionType.google, google_id)
 
     error_occurred = google_client.sync_calendars(db, subscriber_id=subscriber.id, token=creds)
 
@@ -111,3 +111,21 @@ def google_callback(
 def google_callback_error(error: str):
     """Call if you encounter an unrecoverable error with the Google callback function"""
     return RedirectResponse(f"{os.getenv('FRONTEND_URL', 'http://localhost:8080')}/settings/calendar?error={error}")
+
+
+@router.post("/disconnect")
+def disconnect_account(
+    db: Session = Depends(get_db),
+    subscriber: Subscriber = Depends(get_subscriber),
+):
+    """Disconnects a google account. Removes associated data from our services and deletes the connection details."""
+    google_connection = subscriber.get_external_connection(ExternalConnectionType.google)
+
+    # Remove all of their google calendars (We only support one connection so this should be good for now)
+    repo.calendar.delete_by_subscriber_and_provider(db, subscriber.id, provider=models.CalendarProvider.google)
+
+    # Remove their account details
+    repo.external_connection.delete_by_type(db, subscriber.id, google_connection.type, google_connection.type_id)
+
+
+    return True
diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index 83b431719..78f910534 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/frontend/src/components/SettingsAccount.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-8">
-    <div class="text-3xl font-semibold text-gray-500">{{ t('heading.accountSettings') }}</div>
+    <div class="text-3xl font-thin text-gray-500 dark:text-gray-200">{{ t('heading.accountSettings') }}</div>
     <div class="flex max-w-3xl flex-col pl-6">
       <div class="text-xl">{{ t('heading.profile') }}</div>
       <label class="mt-4 flex items-center pl-4">
@@ -59,30 +59,6 @@
         />
       </div>
     </div>
-    <div class="max-w-3xl pl-6">
-      <div class="mb-4 text-xl">{{ t('heading.zoom') }}</div>
-      <div>
-        <p>{{ t('text.connectZoom') }}</p>
-      </div>
-      <div class="mt-4 flex items-center pl-4">
-        <div class="w-full max-w-2xs">
-          <p v-if="hasZoomAccountConnected">{{ t('label.connectedAs', { name: zoomAccountName }) }}</p>
-          <p v-if="!hasZoomAccountConnected">{{ t('label.notConnected') }}</p>
-        </div>
-        <div class="mx-auto mr-0">
-          <primary-button
-          v-if="!hasZoomAccountConnected"
-          :label="t('label.connect')"
-          @click="connectZoom"
-        />
-        <caution-button
-          v-if="hasZoomAccountConnected"
-          :label="t('label.disconnect')"
-          @click="disconnectZoom"
-        />
-        </div>
-      </div>
-    </div>
     <div class="pl-6">
       <div class="text-xl">{{ t('heading.accountData') }}</div>
       <div class="mt-4 pl-4">
@@ -147,12 +123,11 @@
 
 <script setup>
 import {
-  ref, inject, onMounted, computed,
+  ref, inject, onMounted,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
-import { storeToRefs } from 'pinia';
 import CautionButton from '@/elements/CautionButton.vue';
 import ConfirmationModal from '@/components/ConfirmationModal.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
@@ -171,11 +146,6 @@ const call = inject('call');
 const router = useRouter();
 const user = useUserStore();
 const externalConnectionsStore = useExternalConnectionsStore();
-const { zoom: zoomConnections, $reset: resetConnections } = storeToRefs(externalConnectionsStore);
-
-// Currently we only support one zoom account being connected at once.
-const hasZoomAccountConnected = computed(() => (zoomConnections.value.length) > 0);
-const zoomAccountName = computed(() => (zoomConnections.value[0]?.name ?? null));
 
 const activeUsername = ref(user.data.username);
 const activeDisplayName = ref(user.data.name);
@@ -237,17 +207,6 @@ onMounted(async () => {
   await refreshData();
 });
 
-const connectZoom = async () => {
-  const { data } = await call('zoom/auth').get().json();
-  // Ship them to the auth link
-  window.location.href = data.value.url;
-};
-const disconnectZoom = async () => {
-  await call('zoom/disconnect').post();
-  await resetConnections();
-  await refreshData();
-};
-
 const downloadData = async () => {
   downloadAccountModalOpen.value = true;
 };
diff --git a/frontend/src/components/SettingsCalendar.vue b/frontend/src/components/SettingsCalendar.vue
index 5c54834f0..887f10581 100644
--- a/frontend/src/components/SettingsCalendar.vue
+++ b/frontend/src/components/SettingsCalendar.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="flex flex-col gap-8">
-  <div class="text-3xl font-semibold text-gray-500">{{ t('heading.calendarSettings') }}</div>
+  <div class="text-3xl font-thin text-gray-500 dark:text-gray-200">{{ t('heading.calendarSettings') }}</div>
   <div class="flex flex-col gap-6 pl-6">
     <alert-box
       @close="calendarConnectError = ''"
diff --git a/frontend/src/components/SettingsConnections.vue b/frontend/src/components/SettingsConnections.vue
new file mode 100644
index 000000000..5bfc0a00c
--- /dev/null
+++ b/frontend/src/components/SettingsConnections.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="flex flex-col gap-8">
+    <div class="text-3xl font-thin text-gray-500 dark:text-gray-200">{{ t('heading.connectedAccounts') }}</div>
+    <div class="max-w-3xl pl-6" v-for="(connection, category) in connections" v-bind:key="category">
+      <h2 class="mb-4 text-xl font-medium">{{ t(`heading.settings.connectedAccounts.${category}`) }}</h2>
+      <p>{{ t(`text.settings.connectedAccounts.connect.${category}`) }}</p>
+      <div v-if="category === 'google'" class="pt-2">
+        <p>
+          <i18n-t
+            :keypath="`text.settings.connectedAccounts.connect.${category}Legal.text`"
+            tag="label"
+            :for="`text.settings.connectedAccounts.connect.${category}Legal.link`"
+          >
+          <a
+            class="underline"
+            href="https://developers.google.com/terms/api-services-user-data-policy"
+            target="_blank"
+          >
+            {{ t(`text.settings.connectedAccounts.connect.${category}Legal.link`) }}
+          </a>
+          </i18n-t>
+        </p>
+      </div>
+      <div class="mt-4 flex items-center pl-4">
+        <div class="w-full max-w-md">
+          <p v-if="connection[0]">{{ t('label.connectedAs', { name: connection[0].name }) }}</p>
+          <p v-if="!connection[0]">{{ t('label.notConnected') }}</p>
+        </div>
+        <div class="mx-auto mr-0" v-if="category !== 'fxa'">
+          <primary-button
+          v-if="!connection[0]"
+          :label="t('label.connect')"
+          @click="() => connectAccount(category)"
+        />
+        <caution-button
+          v-if="connection[0]"
+          :label="t('label.disconnect')"
+          @click="() => displayModal(category)"
+        />
+        </div>
+        <div class="mx-auto mr-0" v-else>
+          <secondary-button
+          :label="t('label.editProfile')"
+          @click="editProfile"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Disconnect Google Modal -->
+  <confirmation-modal
+      :open="disconnectGoogleModalOpen"
+      :title="t('text.settings.connectedAccounts.disconnect.google.title')"
+      :message="t('text.settings.connectedAccounts.disconnect.google.message')"
+      :confirm-label="t('text.settings.connectedAccounts.disconnect.google.confirm')"
+      :cancel-label="t('text.settings.connectedAccounts.disconnect.google.cancel')"
+      :use-caution-button="true"
+      @confirm="() => disconnectAccount('google')"
+      @close="closeModals"
+  ></confirmation-modal>
+  <!-- Disconnect Zoom Modal -->
+  <confirmation-modal
+      :open="disconnectZoomModalOpen"
+      :title="t('text.settings.connectedAccounts.disconnect.zoom.title')"
+      :message="t('text.settings.connectedAccounts.disconnect.zoom.message')"
+      :confirm-label="t('text.settings.connectedAccounts.disconnect.zoom.confirm')"
+      :cancel-label="t('text.settings.connectedAccounts.disconnect.zoom.cancel')"
+      :use-caution-button="true"
+      @confirm="() => disconnectAccount('zoom')"
+      @close="closeModals"
+  ></confirmation-modal>
+</template>
+
+<script setup>
+import {
+  ref, inject, onMounted, computed,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user-store';
+import { storeToRefs } from 'pinia';
+import CautionButton from '@/elements/CautionButton.vue';
+import ConfirmationModal from '@/components/ConfirmationModal.vue';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import SecondaryButton from '@/elements/SecondaryButton.vue';
+import TextButton from '@/elements/TextButton.vue';
+
+// icons
+import { IconExternalLink } from '@tabler/icons-vue';
+
+// stores
+import { useExternalConnectionsStore } from '@/stores/external-connections-store';
+import { useCalendarStore } from '@/stores/calendar-store';
+
+// component constants
+const { t } = useI18n({ useScope: 'global' });
+const call = inject('call');
+const router = useRouter();
+const externalConnectionsStore = useExternalConnectionsStore();
+const calendarStore = useCalendarStore();
+const { connections } = storeToRefs(externalConnectionsStore);
+const { $reset: resetConnections } = externalConnectionsStore;
+
+const fxaEditProfileUrl = inject('fxaEditProfileUrl');
+
+const disconnectZoomModalOpen = ref(false);
+const disconnectGoogleModalOpen = ref(false);
+
+const closeModals = () => {
+  disconnectZoomModalOpen.value = false;
+  disconnectGoogleModalOpen.value = false;
+};
+
+const refreshData = async () => {
+  // Need to reset calendar store first!
+  await calendarStore.$reset();
+  await Promise.all([
+    externalConnectionsStore.fetch(call),
+    calendarStore.fetch(call),
+  ]);
+};
+
+onMounted(async () => {
+  await refreshData();
+});
+
+const displayModal = async (category) => {
+  if (category === 'zoom') {
+    disconnectZoomModalOpen.value = true;
+  } else if (category === 'google') {
+    disconnectGoogleModalOpen.value = true;
+  }
+};
+
+const connectAccount = async (category) => {
+  if (category === 'zoom') {
+    const { data } = await call('zoom/auth').get().json();
+    // Ship them to the auth link
+    window.location.href = data.value.url;
+  } else if (category === 'google') {
+    await router.push('/settings/calendar');
+  }
+};
+
+const disconnectAccount = async (category) => {
+  if (category === 'zoom') {
+    await call('zoom/disconnect').post();
+  } else if (category === 'google') {
+    await call('google/disconnect').post();
+  }
+
+  await resetConnections();
+  await refreshData();
+  await closeModals();
+};
+
+const editProfile = async () => {
+  window.location = fxaEditProfileUrl;
+};
+
+</script>
diff --git a/frontend/src/components/SettingsGeneral.vue b/frontend/src/components/SettingsGeneral.vue
index 7b52cae04..33468a86d 100644
--- a/frontend/src/components/SettingsGeneral.vue
+++ b/frontend/src/components/SettingsGeneral.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="flex flex-col gap-8">
-  <div class="text-3xl font-semibold text-gray-500">{{ t('heading.generalSettings') }}</div>
+  <div class="text-3xl font-thin text-gray-500 dark:text-gray-200">{{ t('heading.generalSettings') }}</div>
   <div class="pl-6">
     <div class="text-xl">{{ t('heading.languageAndAppearance') }}</div>
     <div class="mt-6 pl-6">
diff --git a/frontend/src/definitions.js b/frontend/src/definitions.js
index b1738f704..f220a724f 100644
--- a/frontend/src/definitions.js
+++ b/frontend/src/definitions.js
@@ -164,10 +164,8 @@ export const viewTypes = {
 export const settingsSections = {
   general: 1,
   calendar: 2,
-  // appointmentsAndBooking: 3,
-  account: 4,
-  // privacy:                5,
-  // faq:                    6,
+  account: 3,
+  connectedAccounts: 4,
 };
 
 /**
diff --git a/frontend/src/elements/SecondaryButton.vue b/frontend/src/elements/SecondaryButton.vue
index abfd3a778..7d4febb80 100644
--- a/frontend/src/elements/SecondaryButton.vue
+++ b/frontend/src/elements/SecondaryButton.vue
@@ -4,7 +4,7 @@
       relative flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-full border
       border-teal-500 bg-white px-6 text-base font-semibold text-gray-600 transition-all ease-in-out
       hover:scale-102 hover:shadow-md active:scale-98 disabled:scale-100 disabled:opacity-50 disabled:shadow-none
-      dark:bg-gray-700 dark:text-gray-400
+      dark:bg-gray-700 dark:text-gray-100
     "
     :class="{ '!text-transparent': waiting }"
     @click="copy ? copyToClipboard() : null"
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 4356a3186..2f50d63a2 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -33,6 +33,7 @@
     "calendarSettings": "Kalender-Einstellungen",
     "calendarsConnected": "Verbundene Kalender",
     "calendarsUnconnected": "Available Calendars",
+    "connectedAccounts": "Verbundene Konten",
     "contactRequest": "Kontaktanfrage",
     "createNewAppointment": "Neuen Termin erstellen",
     "dateAndTimeFormatting": "Datums- und Zeitformat",
@@ -47,6 +48,13 @@
     "privacySettings": "Privatsphäre-Einstellungen",
     "profile": "Profile",
     "scheduleCreated": "Zeitplan erstellt!",
+    "settings": {
+      "connectedAccounts": {
+        "fxa": "Mozilla Konten",
+        "google": "Google Kalender",
+        "zoom": "Zoom"
+      }
+    },
     "zoom": "Zoom"
   },
   "info": {
@@ -117,6 +125,7 @@
     "connect": "Verbinden",
     "connectCalendar": "Kalender verbinden",
     "connectGoogleCalendar": "Google Kalender verbinden",
+    "connectedAccounts": "Verbundene Konten",
     "connectedAs": "Verbunden als {name}",
     "contact": "Kontakt",
     "continue": "Weiter",
@@ -292,6 +301,33 @@
       "noCalendars": "Dein Zeitplan benötigt mindestens einen verbundenen Kalender.",
       "notActive": "Der Zeitplan ist inaktiv, aktiviere ihn zum Bearbeiten oder Teilen."
     },
+    "settings": {
+      "connectedAccounts": {
+        "connect": {
+          "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"
+          },
+          "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.",
+            "confirm": "Trennen",
+            "cancel": "Abbrechen"
+          },
+          "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.",
+            "confirm": "Trennen",
+            "cancel": "Abbrechen"
+          }
+        }
+      }
+    },
     "timesAreDisplayedInLocalTimezone": "Die Zeiten werden in deiner lokalen Zeitzone {timezone} angezeigt.",
     "titleIsReadyForBookings": "{title} ist für Buchungen bereit",
     "updateUsernameNotice": "Ein Ändern des Benutzernamens aktualisiert auch den Kurzlink. Alle alten Kurzlinks werden dann nicht mehr funktionieren.",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index b2295231b..a83be434b 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -33,6 +33,7 @@
     "calendarSettings": "Calendar settings",
     "calendarsConnected": "Connected Calendars",
     "calendarsUnconnected": "Available Calendars",
+    "connectedAccounts": "Connected Accounts",
     "contactRequest": "Contact Request",
     "createNewAppointment": "Create new appointment",
     "dateAndTimeFormatting": "Date and time format",
@@ -47,6 +48,13 @@
     "privacySettings": "Privacy settings",
     "profile": "Profile",
     "scheduleCreated": "Schedule created!",
+    "settings": {
+      "connectedAccounts": {
+        "fxa": "Mozilla Accounts",
+        "google": "Google Calendar",
+        "zoom": "Zoom"
+      }
+    },
     "zoom": "Zoom"
   },
   "info": {
@@ -117,6 +125,7 @@
     "connect": "Connect",
     "connectCalendar": "Connect calendar",
     "connectGoogleCalendar": "Connect Google Calendar",
+    "connectedAccounts": "Connected Accounts",
     "connectedAs": "Connected as {name}",
     "contact": "Contact",
     "continue": "Continue",
@@ -292,6 +301,33 @@
       "noCalendars": "Scheduling requires at least one connected calendar.",
       "notActive": "Schedule is not active, turn on the toggle to edit or share."
     },
+    "settings": {
+      "connectedAccounts": {
+        "connect": {
+          "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"
+          },
+          "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.",
+            "confirm": "Disconnect",
+            "cancel": "Back"
+          },
+          "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.",
+            "confirm": "Disconnect",
+            "cancel": "Back"
+          }
+        }
+      }
+    },
     "timesAreDisplayedInLocalTimezone": "Times are displayed in your local timezone {timezone}.",
     "titleIsReadyForBookings": "{title} is ready for bookings",
     "updateUsernameNotice": "Changing your username will also change your link. Your old link will no longer work.",
diff --git a/frontend/src/stores/external-connections-store.js b/frontend/src/stores/external-connections-store.js
index ff55f65a6..753409585 100644
--- a/frontend/src/stores/external-connections-store.js
+++ b/frontend/src/stores/external-connections-store.js
@@ -9,9 +9,12 @@ export const useExternalConnectionsStore = defineStore('externalConnections', ()
   // Data
   const zoom = ref([]);
   const fxa = ref([]);
+  const google = ref([]);
   const connections = computed(() => ({
-    zoom: zoom.value,
+    // FXA should be at the top since it represents the Appointment subscriber.
     fxa: fxa.value,
+    google: google.value,
+    zoom: zoom.value,
   }));
 
   /**
@@ -26,6 +29,7 @@ export const useExternalConnectionsStore = defineStore('externalConnections', ()
     const { data } = await call('account/external-connections').get().json();
     zoom.value = data.value?.zoom ?? [];
     fxa.value = data.value?.fxa ?? [];
+    google.value = data.value?.google ?? [];
     isLoaded.value = true;
   };
 
@@ -35,10 +39,11 @@ export const useExternalConnectionsStore = defineStore('externalConnections', ()
   const $reset = () => {
     zoom.value = [];
     fxa.value = [];
+    google.value = [];
     isLoaded.value = false;
   };
 
   return {
-    connections, isLoaded, fxa, zoom, fetch, $reset,
+    connections, isLoaded, fxa, zoom, google, fetch, $reset,
   };
 });
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 018dc310a..d8c89951b 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -3,9 +3,9 @@
   <div class="flex select-none items-start justify-between">
     <div class="text-4xl font-light">{{ t('label.settings') }}</div>
   </div>
-  <div class="mt-8 flex items-stretch justify-between gap-24 pb-16">
+  <div class="mt-8 flex flex-col items-stretch justify-between gap-4 pb-2 lg:flex-row lg:gap-24 lg:pb-16">
     <!-- sidebar navigation -->
-    <div class="flex w-1/5 flex-col gap-6">
+    <div class="mx-auto flex w-full flex-col gap-6 md:w-1/2 lg:w-full lg:max-w-60">
       <!-- search -->
       <label v-if="false" class="relative flex items-center">
         <icon-search
@@ -43,38 +43,17 @@
       </div>
     </div>
     <!-- content -->
-    <div class="w-4/5 pt-14">
-
-      <!-- general settings -->
+    <div class="w-full pt-2 lg:w-4/5 lg:pt-14">
       <settings-general v-if="activeView === settingsSections.general" />
-
-      <!-- calendar settings -->
       <settings-calendar v-if="activeView === settingsSections.calendar" />
-
-      <!-- appointments and booking settings -->
-      <div v-if="activeView === settingsSections.appointmentsAndBooking">
-        <div class="text-3xl font-semibold text-gray-500">{{ t('heading.appointmentsAndBookingSettings') }}</div>
-      </div>
-
-      <!-- account settings -->
       <settings-account v-if="activeView === settingsSections.account" />
-
-      <!-- privacy settings -->
-      <div v-if="activeView === settingsSections.privacy">
-        <div class="text-3xl font-semibold text-gray-500">{{ t('heading.privacySettings') }}</div>
-      </div>
-
-      <!-- faq settings -->
-      <div v-if="activeView === settingsSections.faq">
-        <div class="text-3xl font-semibold text-gray-500">{{ t('heading.frequentlyAskedQuestions') }}</div>
-      </div>
-
+      <settings-connections v-if="activeView === settingsSections.connectedAccounts" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { settingsSections } from '@/definitions';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -87,16 +66,17 @@ import {
   IconSearch,
 } from '@tabler/icons-vue';
 import SettingsAccount from '@/components/SettingsAccount.vue';
+import SettingsConnections from '@/components/SettingsConnections.vue';
 
 // component constants
 const { t } = useI18n({ useScope: 'global' });
 const route = useRoute();
 const router = useRouter();
 
+const activeView = computed(() => (route.params.view && settingsSections[route.params.view] ? settingsSections[route.params.view] : settingsSections.general));
+
 // menu navigation of different views
-const activeView = ref(route.params.view ? settingsSections[route.params.view] : settingsSections.general);
 const show = (key) => {
-  router.replace({ name: route.name, params: { view: key } });
-  activeView.value = settingsSections[key];
+  router.push({ name: route.name, params: { view: key } });
 };
 </script>