From 9138f0c13eb1fc57616ca4b4c5db650a2b2e38e7 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 15 Aug 2024 11:51:29 -0700
Subject: [PATCH] Add a "Sign up for the beta" button to the homepage

---
 frontend/src/locales/en.json     |  1 +
 frontend/src/router.ts           |  8 ++++++++
 frontend/src/views/HomeView.vue  | 12 ++++++++++++
 frontend/src/views/LoginView.vue | 15 ++++++++++++---
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 6cf7a91fe..013db59b7 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -281,6 +281,7 @@
     "settings": "Settings",
     "shareMyLink": "Share my link",
     "showSecondaryTimeZone": "Show secondary time zone",
+    "signUpForBeta": "Sign up for the beta",
     "signInWithGoogle": "Sign in with Google",
     "signUpWithInviteCode": "Sign up with invite code",
     "slotLength": "Booking Duration",
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 5d00bcf11..ca2b76c12 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -50,6 +50,14 @@ const routes: RouteRecordRaw[] = [
       isPublic: true,
     },
   },
+  {
+    path: '/waiting-list',
+    name: 'join-the-waiting-list',
+    component: LoginView,
+    meta: {
+      isPublic: true,
+    },
+  },
   {
     path: '/post-login/:token',
     name: 'post-login',
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 8d595da26..d9823cb3a 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -17,6 +17,9 @@ const enter = () => {
 const login = () => {
   router.push('/login');
 };
+const signUp = () => {
+  router.push('/waiting-list')
+};
 </script>
 
 <template>
@@ -47,6 +50,15 @@ const login = () => {
               :title="$t('label.continue')"
             />
           </div>
+          <div class="mt-4 mb-4">
+            <primary-button
+              v-if="!isAuthenticated"
+              :label="$t('label.signUpForBeta')"
+              class="btn-login"
+              @click="signUp"
+              :title="$t('label.signUpForBeta')"
+            />
+          </div>
         </div>
         <div class="w-full">
           <!-- Padding top is rounded up aspect ratio percentage (height / width) of image -->
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index a88583cf6..8c78e4cb0 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue';
+import {inject, onMounted, ref} from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import {useRoute, useRouter} from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
 import { dayjsKey, callKey, isPasswordAuthKey, isFxaAuthKey } from "@/keys";
 import { BooleanResponse, AuthUrlResponse, Exception, AuthUrl, Error } from "@/models";
@@ -15,9 +15,11 @@ const user = useUserStore();
 const { t } = useI18n();
 const call = inject(callKey);
 const dj = inject(dayjsKey);
+const route = useRoute();
 const router = useRouter();
 const isPasswordAuth = inject(isPasswordAuthKey);
 const isFxaAuth = inject(isFxaAuthKey);
+const onlyShowInvite = ref(false);
 const showInviteFlow = ref(false);
 const isLoading = ref(false);
 
@@ -28,6 +30,13 @@ const loginError = ref<string>(null);
 const inviteCode = ref('');
 const showConfirmEmailScreen = ref(false);
 
+onMounted(() => {
+  if (route.name === 'join-the-waiting-list') {
+    showInviteFlow.value = true;
+    onlyShowInvite.value = true;
+  }
+});
+
 const closeError = () => {
   loginError.value = null;
 };
@@ -153,7 +162,7 @@ const login = async () => {
               @keydown.enter="isFxaAuth ? login() : null"
             />
           </label>
-          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow">
+          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow && !onlyShowInvite">
           <span class="w-full">
           {{ t('label.inviteCode') }}
           </span>