Fix up the sign up button and add metrics

frontend/src/definitions.ts

@@ -333,6 +333,11 @@ export enum MetricEvents {
   RequestBooking = 'apmt.booking.request',
   ScheduleCreated = 'apmt.schedule.created',
   ScheduleUpdated = 'apmt.schedule.updated',
+  SignUp = 'apmt.signup',
+  SignUpAlreadyExists = 'apmt.signup.already-exists',
+  Login = 'apmt.login',
+  WaitingListEmailConfirmed = 'apmt.signup.email-confirmed',
+  WaitingListEmailRemoved = 'apmt.signup.email-removed',
 }
 
 export default {

frontend/src/router.ts

@@ -25,7 +25,7 @@ const FirstTimeUserExperienceView = defineAsyncComponent(() => import('@/views/F
 type ApmtRouteMeta = {
   isPublic?: boolean; // Can the page be accessed without authentication?
   maskForMetrics?: boolean; // Mask url parameters before sending information to metrics
-  disableMetrics?: boolean; // Disable all metric capturing for this page
+  disableMetrics?: boolean; // Disable all metric capturing for this page. FIXME: Not Impl
 };
 
 /**
@@ -163,23 +163,23 @@ const routes: RouteRecordRaw[] = [
     name: 'admin-subscriber-panel',
     component: SubscriberPanelView,
     meta: {
-      disableMetrics: true,
+      //disableMetrics: true,
     },
   },
   {
     path: '/admin/invites',
     name: 'admin-invite-codes-panel',
     component: InviteCodePanelView,
     meta: {
-      disableMetrics: true,
+      //disableMetrics: true,
     },
   },
   {
     path: '/admin/waiting-list',
     name: 'admin-waiting-list-panel',
     component: WaitingListPanelView,
     meta: {
-      disableMetrics: true,
+      //disableMetrics: true,
     },
   },
 ];
@@ -194,16 +194,6 @@ router.beforeEach((to, from) => {
   const toMeta: ApmtRouteMeta = to?.meta ?? {};
   const fromMeta: ApmtRouteMeta = from?.meta ?? {};
 
-  if (usePosthog) {
-    // Handle disableMetrics meta property
-    if (toMeta?.disableMetrics && !fromMeta?.disableMetrics) {
-      posthog.opt_out_capturing();
-    }
-    if (!toMeta?.disableMetrics && fromMeta?.disableMetrics) {
-      posthog.opt_in_capturing();
-    }
-  }
-
   if (!toMeta?.isPublic && !['setup', 'contact', 'undefined'].includes(String(to.name))) {
     const user = useUserStore();
     if (user && user.data?.email && !user.data.isSetup) {

frontend/src/views/LoginView.vue

@@ -7,6 +7,8 @@ import { dayjsKey, callKey, isPasswordAuthKey, isFxaAuthKey } from "@/keys";
 import { BooleanResponse, AuthUrlResponse, Exception, AuthUrl, Error } from "@/models";
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import AlertBox from '@/elements/AlertBox.vue';
+import {posthog, usePosthog} from "@/composables/posthog";
+import {MetricEvents} from "@/definitions";
 
 // component constants
 const user = useUserStore();
@@ -19,8 +21,10 @@ const route = useRoute();
 const router = useRouter();
 const isPasswordAuth = inject(isPasswordAuthKey);
 const isFxaAuth = inject(isFxaAuthKey);
-const onlyShowInvite = ref(false);
+// Show the invite flow if they've failed to login
 const showInviteFlow = ref(false);
+// Don't show the invite code field, only the "Join the waiting list" part
+const onlyShowJoin = ref(false);
 const isLoading = ref(false);
 
 // form input and error
@@ -33,7 +37,7 @@ const showConfirmEmailScreen = ref(false);
 onMounted(() => {
   if (route.name === 'join-the-waiting-list') {
     showInviteFlow.value = true;
-    onlyShowInvite.value = true;
+    onlyShowJoin.value = true;
   }
 });
 
@@ -45,7 +49,30 @@ const goHome = () => {
   router.push('/');
 };
 
+/**
+ * What to do when hitting the enter key on a particular input
+ * @param isEmailField - Is this the email field? Only needed for password auth
+ */
+const onEnter = (isEmailField: boolean) => {
+  if (isEmailField && !isFxaAuth) {
+    return;
+  }
+
+  if (showInviteFlow.value && onlyShowJoin.value) {
+    signUp();
+  } else {
+    login();
+  }
+}
+
+/**
+ * Sign up for the beta / waiting list
+ */
 const signUp = async () => {
+  if (!email.value) {
+    return;
+  }
+
   isLoading.value = true;
   loginError.value = '';
   const { data }: BooleanResponse = await call('waiting-list/join').post({
@@ -54,8 +81,22 @@ const signUp = async () => {
 
   if (!data.value) {
     loginError.value = t('waitingList.signUpAlreadyExists');
+
+    if (usePosthog) {
+      posthog.capture(MetricEvents.SignUpAlreadyExists, {
+        waitingList: true,
+        for: 'beta',
+      });
+    }
   } else {
     showConfirmEmailScreen.value = true;
+
+    if (usePosthog) {
+      posthog.capture(MetricEvents.SignUp, {
+        waitingList: true,
+        for: 'beta',
+      });
+    }
   }
 
   isLoading.value = false;
@@ -108,6 +149,12 @@ const login = async () => {
       return;
     }
 
+    if (usePosthog) {
+      posthog.capture(MetricEvents.Login, {
+        inviteCodeUsed: !!inviteCode.value,
+      });
+    }
+
     const { url } = data.value as AuthUrl;
 
     window.location.href = url;
@@ -159,10 +206,10 @@ const login = async () => {
               type="email"
               class="mr-6 w-full rounded-md"
               :class="{'mr-4': isFxaAuth}"
-              @keydown.enter="isFxaAuth ? login() : null"
+              @keydown.enter="onEnter(true)"
             />
           </label>
-          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow && !onlyShowInvite">
+          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow && !onlyShowJoin">
           <span class="w-full">
           {{ t('label.inviteCode') }}
           </span>
@@ -171,7 +218,7 @@ const login = async () => {
               type="text"
               class="mr-6 w-full rounded-md"
               :class="{'mr-4': isFxaAuth}"
-              @keydown.enter="isFxaAuth ? login() : null"
+              @keydown.enter="onEnter(false)"
             />
           </label>
           <div v-if="isFxaAuth && (!showInviteFlow || inviteCode.length > 0)" class="text-center text-sm">{{ t('text.login.continueToFxa') }}</div>
@@ -181,7 +228,7 @@ const login = async () => {
               v-model="password"
               type="password"
               class="mr-6 w-full rounded-md"
-              @keyup.enter="login"
+              @keyup.enter="onEnter(false)"
             />
           </label>
         </div>

frontend/src/views/WaitingListActionView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { inject, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { WaitingListAction } from '@/definitions';
+import {MetricEvents, WaitingListAction} from '@/definitions';
 import { WaitingListActionResponse } from '@/models';
 import { useI18n } from 'vue-i18n';
 import { callKey } from '@/keys';
@@ -10,6 +10,7 @@ import ArtLeave from '@/elements/arts/ArtLeave.vue';
 import ArtInvalidLink from '@/elements/arts/ArtInvalidLink.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
+import {posthog, usePosthog} from "@/composables/posthog";
 
 const route = useRoute();
 const router = useRouter();
@@ -40,6 +41,15 @@ onMounted(async () => {
   }
 
   action.value = data?.value?.action;
+
+ if (usePosthog) {
+    if (action.value === WaitingListAction.Confirm) {
+      posthog.capture(MetricEvents.WaitingListEmailConfirmed, {});
+    } else if (action.value === WaitingListAction.Leave) {
+      posthog.capture(MetricEvents.WaitingListEmailRemoved, {});
+    }
+  }
+
 });
 </script>