* Fix email validation

* Hookup login screen to allow joining the wait list
* Add a waiting list action view with messages for confirming or leaving wait list

backend/src/appointment/database/schemas.py

@@ -8,7 +8,7 @@
 from datetime import datetime, date, time
 from typing import Annotated, Optional
 
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, EmailStr
 
 from .models import (
     AppointmentStatus,
@@ -395,4 +395,4 @@ class TokenForWaitingList(BaseModel):
 
 
 class CheckEmail(BaseModel):
-    email: str = Field(title='Email', min_length=1)
+    email: EmailStr = Field(title='Email', min_length=1)

backend/src/appointment/routes/waiting_list.py

@@ -75,4 +75,7 @@ def act_on_waiting_list(
 
         raise exception
 
-    return True
+    return {
+        'action': action,
+        'success': success,
+    }

backend/src/appointment/tasks/emails.py

@@ -54,7 +54,7 @@ def send_invite_account_email(to):
 
 
 def send_confirm_email(to, confirm_token, decline_token):
-    base_url = f"{os.getenv('FRONTEND_URL')}/waiting-list/"
+    base_url = f"{os.getenv('FRONTEND_URL')}/waiting-list"
     confirm_url = f"{base_url}/{confirm_token}"
     decline_url = f"{base_url}/{decline_token}"
 

frontend/src/App.vue

@@ -14,7 +14,7 @@
       :class="{
         'mx-4 min-h-full py-32 lg:mx-8': !routeIsHome && !routeIsPublic,
         '!pt-24': routeIsHome || isAuthenticated,
-        'min-h-full pb-32 pt-8': routeIsPublic,
+        'min-h-full pb-32 pt-8': routeIsPublic && !routeHasModal,
       }"
     >
       <router-view/>
@@ -137,11 +137,14 @@ const scheduleStore = useScheduleStore();
 
 // true if route can be accessed without authentication
 const routeIsPublic = computed(
-  () => ['availability', 'home', 'login', 'post-login', 'confirmation', 'terms', 'privacy'].includes(route.name),
+  () => ['availability', 'home', 'login', 'post-login', 'confirmation', 'terms', 'privacy', 'waiting-list'].includes(route.name),
 );
 const routeIsHome = computed(
   () => ['home'].includes(route.name),
 );
+const routeHasModal = computed(
+  () => ['login'].includes(route.name),
+);
 
 // retrieve calendars and appointments after checking login and persisting user to db
 const getDbData = async () => {

frontend/src/definitions.js

@@ -262,6 +262,16 @@ export const tableDataButtonType = {
   caution: 3,
 };
 
+/**
+ * This should match the enum in routes/waiting_list.py
+ * @enum
+ * @readonly
+ */
+export const waitingListAction = {
+  confirm: 1,
+  leave: 2,
+};
+
 export default {
   subscriberLevels,
   appointmentState,
@@ -280,4 +290,5 @@ export default {
   qalendarSlotDurations,
   tableDataType,
   tableDataButtonType,
+  waitingListAction,
 };

frontend/src/elements/AlertBox.vue

@@ -32,6 +32,9 @@
 <script setup>
 import { IconX } from '@tabler/icons-vue';
 import { alertSchemes } from '@/definitions';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 defineProps({
   title: String,

frontend/src/elements/arts/ArtLeave.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- Pending new illustration -->
+  <div class="w-full text-center text-[10rem]">👋</div>
+</template>
+
+<script setup></script>

frontend/src/locales/en.json

@@ -88,6 +88,7 @@
     "activeAppointment": "Active booking",
     "addCalendar": "Add {provider} calendar",
     "addDay": "Add day",
+    "addToWaitingList": "Add to waiting list",
     "addTime": "Add time",
     "admin-invite-codes-panel": "Invites",
     "admin-subscriber-panel": "Subscribers",
@@ -111,6 +112,7 @@
     "attendees": "Attendees",
     "availabilityDay": "Availability Day",
     "availableDays": "Days",
+    "back": "Back",
     "bookEvent": "Book",
     "booked": "Booked",
     "bookingLink": "Booking Link",
@@ -177,6 +179,7 @@
     "goForward": "Go Forward",
     "google": "Google",
     "guest": "{count} guests | {count} guest | {count} guests",
+    "home": "Home",
     "immediately": "instant",
     "inPerson": "In person",
     "inviteCode": "Have an invite code?",
@@ -235,6 +238,7 @@
     "shareMyLink": "Share my link",
     "showSecondaryTimeZone": "Show secondary time zone",
     "signInWithGoogle": "Sign in with Google",
+    "signUpWithInviteCode": "Sign up with invite code",
     "slotLength": "Booking Duration",
     "start": "Start",
     "startDate": "Start Date",
@@ -358,5 +362,18 @@
   "units": {
     "minutes": "{value} minutes",
     "none": "{value}"
+  },
+  "waitingList": {
+    "signUpHeading": "Just one more step!",
+    "signUpInfo": "Before you can be added to the waiting list, you need to confirm your email address.",
+    "signUpCheckYourEmail": "Check your email for more information.",
+    "signUpAlreadyExists": "You are already on the waiting list.",
+    "confirmHeading": "Your email is confirmed!",
+    "confirmInfo": "Your email is now confirmed and if selected you will be contacted about an invite code in the future.",
+    "leaveHeading": "You successfully left the waiting list",
+    "leaveInfo": "Sorry to see you go. You're welcome to re-join the waiting list at any time!",
+    "errorHeading": "There was a problem with that link",
+    "errorInfo": "Unfortunately this link is expired or is invalid."
   }
+
 }

frontend/src/router.ts

@@ -14,9 +14,9 @@ const AppointmentsView = defineAsyncComponent(() => import('@/views/Appointments
 const SettingsView = defineAsyncComponent(() => import('@/views/SettingsView.vue'));
 const ProfileView = defineAsyncComponent(() => import('@/views/ProfileView.vue'));
 const LegalView = defineAsyncComponent(() => import('@/views/LegalView.vue'));
+const WaitingListActionView = defineAsyncComponent(() => import('@/views/WaitingListActionView.vue'));
 const SubscriberPanelView = defineAsyncComponent(() => import('@/views/admin/SubscriberPanelView.vue'));
 const InviteCodePanelView = defineAsyncComponent(() => import('@/views/admin/InviteCodePanelView.vue'));
-
 /**
  * Defined routes for Thunderbird Appointment
  * Note: All routes require authentication unless otherwise specified in App.vue::routeIsPublic
@@ -92,6 +92,11 @@ const routes: RouteRecordRaw[] = [
     name: 'terms',
     component: LegalView,
   },
+  {
+    path: '/waiting-list/:token',
+    name: 'waiting-list',
+    component: WaitingListActionView,
+  },
   // Admin
   {
     path: '/admin/subscribers',