From a4952da9f7db9aa5af82943ef478da0717203559 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 14 Mar 2024 09:38:13 -0700
Subject: [PATCH 1/6] Add a more pretty 404 page.

---
 frontend/src/App.vue                          |  4 ++--
 frontend/src/locales/en.json                  |  3 +++
 .../src/views/errors/RouteNotFoundView.vue    | 22 +++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/views/errors/RouteNotFoundView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3ed437e95..7c0c3d263 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -23,8 +23,7 @@
     <footer-bar />
   </template>
   <template v-else>
-    <!-- TODO: handle wrong route -->
-    An authentication or routing error occurred.
+    <route-not-found-view />
   </template>
 </template>
 
@@ -43,6 +42,7 @@ import { storeToRefs } from 'pinia';
 import { useUserStore } from '@/stores/user-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useAppointmentStore } from '@/stores/appointment-store';
+import RouteNotFoundView from '@/views/errors/RouteNotFoundView.vue';
 
 // component constants
 const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 4dace2203..7a6433b66 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -5,12 +5,14 @@
   },
   "error": {
     "actionNeeded": "Action needed",
+    "authenticationRequired": "Sorry, this page requires you to be logged in.",
     "credentialsIncomplete": "Please provide login credentials.",
     "googleRefreshError": "Error connecting with Google API, please re-connect.",
     "loginMethodNotSupported": "Login method not supported. Please try again.",
     "minimumValue": "{field} should be at least {value}.",
     "noConnectedCalendars": "Calendar setup required. Connect a calendar to continue. {0}.",
     "noConnectedCalendarsLink": "Go to settings",
+    "routeNotFound": "Sorry, this page could not be found.",
     "unknownAppointmentError": "There was an issue creating your booking. Please try again.",
     "unknownScheduleError": "There was an issue creating your schedule. Please try again.",
     "usernameIsNotAvailable": "Username not available. Please choose another."
@@ -143,6 +145,7 @@
     "general": "General",
     "generalDetails": "Details",
     "generateZoomLink": "Generate Zoom Meeting",
+    "goBack": "Go Back",
     "google": "Google",
     "guest": "{count} guests | {count} guest | {count} guests",
     "inPerson": "In person",
diff --git a/frontend/src/views/errors/RouteNotFoundView.vue b/frontend/src/views/errors/RouteNotFoundView.vue
new file mode 100644
index 000000000..0499ef5e7
--- /dev/null
+++ b/frontend/src/views/errors/RouteNotFoundView.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="flex-center h-full flex-col gap-12 p-4">
+    <div class="flex-center flex-col gap-8 px-4">
+      <art-invalid-link class="my-6 h-auto max-w-sm"/>
+      <div class="text-xl font-semibold text-sky-600">
+        {{ t('error.routeNotFound') }}
+      </div>
+      <primary-button @click="$router.go(-1)">
+        {{ t('label.goBack') }}
+      </primary-button>
+    </div>
+  </div>
+
+</template>
+<script setup>
+import ArtInvalidLink from '@/elements/arts/ArtInvalidLink.vue';
+import { useI18n } from 'vue-i18n';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+
+const { t } = useI18n();
+
+</script>

From a97ad5fee7939d83d610543f6fd3ea0b05b70d2a Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 14 Mar 2024 09:38:21 -0700
Subject: [PATCH 2/6] Fix login on mobile.

---
 frontend/src/views/LoginView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 44421d67c..c88634332 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- page title area -->
   <div class="flex-center flex h-screen w-full bg-gray-100 dark:bg-gray-600">
-    <div class="my-auto flex w-1/2 max-w-lg flex-col items-center justify-center gap-2 bg-white px-4 py-12 shadow-lg dark:bg-gray-700">
+    <div class="my-auto flex w-full flex-col items-center justify-center gap-2 bg-white px-4 py-12 shadow-lg dark:bg-gray-700 md:w-1/2 md:max-w-lg">
       <img class="mb-2 w-full max-w-[8rem]" src="/appointment_logo.svg" alt="Appointment Logo" />
       <div class="text-center text-4xl font-light">{{ t('app.title') }}</div>
       <alert-box v-if="loginError" @close="loginError = null" class="mt-4">

From caa4e1b9fffafbc5f4c3bd8a74559bf0587b0511 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 14 Mar 2024 10:17:58 -0700
Subject: [PATCH 3/6] Add a "Not authenticated" page: * Will redirect the user
 back to the intended page if logged in from that button. * Fixed double
 router-view elements which caused some onMounts to run twice.

---
 frontend/src/App.vue                          | 25 +++++++--------
 frontend/src/definitions.js                   |  6 ++++
 frontend/src/router.js                        |  6 ++--
 frontend/src/stores/user-store.js             |  4 +--
 frontend/src/views/PostLoginView.vue          |  9 ++++--
 .../src/views/errors/NotAuthenticatedView.vue | 32 +++++++++++++++++++
 6 files changed, 61 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/views/errors/NotAuthenticatedView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7c0c3d263..463225166 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,29 +1,25 @@
 <template>
   <!-- authenticated subscriber content -->
-  <template v-if="isAuthenticated">
+  <template v-if="isAuthenticated || routeIsPublic">
     <site-notification
-      v-if="visibleNotification"
+      v-if="isAuthenticated && visibleNotification"
       :title="notificationTitle"
       :action-url="notificationActionUrl"
     >
       {{ notificationMessage }}
     </site-notification>
-    <nav-bar :nav-items="navItems" />
-    <main :class="{'mx-4 min-h-full py-24 lg:mx-8': !routeIsHome, 'pt-32': routeIsHome}">
-      <router-view />
+    <nav-bar v-if="isAuthenticated" :nav-items="navItems"/>
+    <title-bar v-if="routeIsPublic"/>
+    <main :class="{'mx-4 min-h-full py-24 lg:mx-8': !routeIsHome && !routeIsPublic, 'pt-32': routeIsHome, 'min-h-full': routeIsPublic}">
+      <router-view/>
     </main>
-    <footer-bar />
+    <footer-bar/>
   </template>
-  <!-- for home page and booking page -->
-  <template v-else-if="routeIsPublic">
-    <title-bar />
-    <main class="min-h-full">
-      <router-view />
-    </main>
-    <footer-bar />
+  <template v-else-if="!routeIsPublic">
+    <not-authenticated-view/>
   </template>
   <template v-else>
-    <route-not-found-view />
+    <route-not-found-view/>
   </template>
 </template>
 
@@ -43,6 +39,7 @@ import { useUserStore } from '@/stores/user-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useAppointmentStore } from '@/stores/appointment-store';
 import RouteNotFoundView from '@/views/errors/RouteNotFoundView.vue';
+import NotAuthenticatedView from '@/views/errors/NotAuthenticatedView.vue';
 
 // component constants
 const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
diff --git a/frontend/src/definitions.js b/frontend/src/definitions.js
index 8042f5403..8137dce35 100644
--- a/frontend/src/definitions.js
+++ b/frontend/src/definitions.js
@@ -155,6 +155,12 @@ export const qalendarSlotDurations = {
   60: 60,
 };
 
+/**
+ * Used as the session storage key for the location the user wanted to go to before logging in.
+ * @type {string}
+ */
+export const loginRedirectKey = 'loginRedirect';
+
 export default {
   subscriberLevels,
   appointmentState,
diff --git a/frontend/src/router.js b/frontend/src/router.js
index b15d7e7da..7d5a07ba4 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -12,9 +12,9 @@ const authGuard = (to, from) => {
   const user = useUserStore();
 
   // If we're not logged in, drop them to login
-  if (!user?.exists()) {
-    return '/login';
-  }
+  // if (!user?.exists()) {
+  //  return '/login';
+  // }
 };
 
 const routes = [
diff --git a/frontend/src/stores/user-store.js b/frontend/src/stores/user-store.js
index 0dce8ce7f..d44152f3e 100644
--- a/frontend/src/stores/user-store.js
+++ b/frontend/src/stores/user-store.js
@@ -87,8 +87,8 @@ export const useUserStore = defineStore('user', () => {
    * Request subscriber login
    * @param {function} fetch preconfigured API fetch function
    * @param {string} username
-   * @param {string} password
-   * @returns {boolean} true if login was successful
+   * @param {string|null} password or null if fxa authentication
+   * @returns {Promise<boolean>} true if login was successful
    */
   const login = async (fetch, username, password) => {
     $reset();
diff --git a/frontend/src/views/PostLoginView.vue b/frontend/src/views/PostLoginView.vue
index a517daa24..a43968912 100644
--- a/frontend/src/views/PostLoginView.vue
+++ b/frontend/src/views/PostLoginView.vue
@@ -8,6 +8,7 @@
 import { inject, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
+import { loginRedirectKey } from '@/definitions';
 
 const route = useRoute();
 const router = useRouter();
@@ -21,12 +22,16 @@ const call = inject('call');
 const isFxaAuth = computed(() => import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
 
 onMounted(async () => {
+  // Retrieve and remove temp login redirect location
+  const redirectTo = window.sessionStorage?.getItem(loginRedirectKey);
+  window.sessionStorage?.removeItem(loginRedirectKey);
+
   if (!isFxaAuth.value) {
-    await router.push('/');
+    await router.push(redirectTo ?? '/');
     return;
   }
 
   await user.login(call, route.params.token, null);
-  await router.push('/calendar');
+  await router.push(redirectTo ?? '/calendar');
 });
 </script>
diff --git a/frontend/src/views/errors/NotAuthenticatedView.vue b/frontend/src/views/errors/NotAuthenticatedView.vue
new file mode 100644
index 000000000..6d36f9941
--- /dev/null
+++ b/frontend/src/views/errors/NotAuthenticatedView.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="flex-center h-full flex-col gap-12 p-4">
+    <div class="flex-center flex-col gap-8 px-4">
+      <art-invalid-link class="my-6 h-auto max-w-sm"/>
+      <div class="text-xl font-semibold text-sky-600">
+        {{ t('error.authenticationRequired') }}
+      </div>
+      <primary-button @click="goToLogin">
+        {{ t('label.logIn') }}
+      </primary-button>
+    </div>
+  </div>
+
+</template>
+<script setup>
+import ArtInvalidLink from '@/elements/arts/ArtInvalidLink.vue';
+import { useI18n } from 'vue-i18n';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { loginRedirectKey } from '@/definitions';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const goToLogin = () => {
+  // Save their intended destination!
+  window.sessionStorage?.setItem(loginRedirectKey, route.fullPath);
+  router.push('/login');
+};
+
+</script>

From 84ca151ca552a3030655b4980ca5697320fafbbb Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 14 Mar 2024 10:20:45 -0700
Subject: [PATCH 4/6] Clean up

---
 frontend/src/router.js | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/frontend/src/router.js b/frontend/src/router.js
index 7d5a07ba4..425aba98c 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -6,17 +6,11 @@ import ScheduleView from '@/views/ScheduleView.vue';
 import HomeView from '@/views/HomeView.vue';
 import LoginView from '@/views/LoginView.vue';
 import PostLoginView from '@/views/PostLoginView.vue';
-import { useUserStore } from '@/stores/user-store';
-
-const authGuard = (to, from) => {
-  const user = useUserStore();
-
-  // If we're not logged in, drop them to login
-  // if (!user?.exists()) {
-  //  return '/login';
-  // }
-};
 
+/**
+ * Defined routes for Thunderbird Appointment
+ * Note: All routes require authentication unless otherwise specified in App.vue::routeIsPublic
+ */
 const routes = [
   // instant loaded routes
   {
@@ -53,7 +47,6 @@ const routes = [
     path: '/schedule',
     name: 'schedule',
     component: ScheduleView,
-    beforeEnter: authGuard,
   },
   {
     path: '/calendar',
@@ -63,32 +56,27 @@ const routes = [
     path: '/calendar/:view?/:date?',
     name: 'calendar',
     component: CalendarView,
-    beforeEnter: authGuard,
   },
   // lazy-loaded routes
   {
     path: '/appointments/:view?',
     name: 'appointments',
     component: () => import('@/views/AppointmentsView'),
-    beforeEnter: authGuard,
   },
   {
     path: '/settings/:view?',
     name: 'settings',
     component: () => import('@/views/SettingsView'),
-    beforeEnter: authGuard,
   },
   {
     path: '/profile',
     name: 'profile',
     component: () => import('@/views/ProfileView'),
-    beforeEnter: authGuard,
   },
   {
     path: '/contact',
     name: 'contact',
     component: () => import('@/views/ContactView'),
-    beforeEnter: authGuard,
   },
   {
     path: '/privacy',

From 085eee2937350853ddb408922f43a831d15d29ff Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 14 Mar 2024 10:28:11 -0700
Subject: [PATCH 5/6] Actually show the page not found error if the route isn't
 found.

---
 frontend/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 463225166..16ba3cb20 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- authenticated subscriber content -->
-  <template v-if="isAuthenticated || routeIsPublic">
+  <template v-if="router.hasRoute(route.name) && (isAuthenticated || routeIsPublic)">
     <site-notification
       v-if="isAuthenticated && visibleNotification"
       :title="notificationTitle"
@@ -15,7 +15,7 @@
     </main>
     <footer-bar/>
   </template>
-  <template v-else-if="!routeIsPublic">
+  <template v-else-if="router.hasRoute(route.name) && !routeIsPublic">
     <not-authenticated-view/>
   </template>
   <template v-else>

From 808f0b9a37ec98f827e82132c167ae985adcbab7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 15 Mar 2024 09:37:58 +0100
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=8C=90=20complete=20German=20translat?=
 =?UTF-8?q?ion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/locales/de.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 06b09c5e3..12c510504 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -5,12 +5,14 @@
   },
   "error": {
     "actionNeeded": "Aktion erforderlich!",
+    "authenticationRequired": "Sorry, um diese Seite zu sehen ist eine Anmeldung erforderlich.",
     "credentialsIncomplete": "Bitte gib deine Zugangsdaten ein.",
     "googleRefreshError": "Es gab ein Problem mit Google, bitte erneut verbinden.",
     "loginMethodNotSupported": "Login-Methode wird nicht unterstützt. Bitte nochmal versuchen.",
     "minimumValue": "{field} sollte wenigstens {value} sein.",
     "noConnectedCalendars": "Kalendereinrichtung zum Fortfahren erforderlich. {0}.",
     "noConnectedCalendarsLink": "Zu den Einstellungen wechseln.",
+    "routeNotFound": "Sorry, diese Seite wurde nicht gefunden.",
     "unknownAppointmentError": "Es gab ein Problem beim Erstellen des Termins. Bitte nochmal versuchen.",
     "unknownScheduleError": "Es gab ein Problem beim Erstellen des Zeitplans.",
     "usernameIsNotAvailable": "Dieser Benutzername ist nicht verfügbar."
@@ -143,6 +145,7 @@
     "general": "Allgemein",
     "generalDetails": "Allgemeine Infos",
     "generateZoomLink": "Zoom Meeting generieren",
+    "goBack": "Zurück",
     "google": "Google",
     "guest": "{count} Gäste | {count} Gast | {count} Gäste",
     "inPerson": "Vor Ort",