Create event confirmation and guest registration screens.

frontend/src/App.vue

@@ -1,23 +1,33 @@
 <script setup lang="ts">
 import CreateEvent from './components/CreateEvent.vue';
 import ResultView from './components/ResultView.vue';
+import GuestView from './components/GuestView.vue';
 
 let renderResultView = false;
+let guestCreationView = false;
+let eventCreationView = false;
+
 let event_uuid: string | null = "";
 
 let params = new URLSearchParams(document.location.search);
 if (params.has("event_uuid")) {
   event_uuid = params.get("event_uuid");
 }
+
 if (params.has("page") && params.get("page") === "results") {
   renderResultView = true;
+} else if (event_uuid) {
+  guestCreationView = true;
+} else {
+  eventCreationView = true;
 }
 </script>
 
 <template>
   <h1>Converge</h1>
     <ResultView v-if="renderResultView" :eventUuid="event_uuid"/>
-    <CreateEvent v-if="!renderResultView"/>
+    <CreateEvent v-if="eventCreationView"/>
+    <GuestView v-if="guestCreationView" :eventUuid="event_uuid"/>
 </template>
 
 <style scoped>

frontend/src/components/CreateEvent.vue

@@ -7,6 +7,11 @@ import { createEvent } from '../api/api';
 const dates: Ref<any[] | undefined> = ref();
 const eventName = ref('');
 const hostName = ref('');
+const eventUuid = ref('');
+const loading = ref(false);
+const copiedFlash = ref(false);
+
+const LINK_BASE = "http://localhost:3000/?event_uuid=";
 
 const createEventFromData = async () => {
     if (eventName.value === '' || hostName.value === '' || dates.value === undefined) {
@@ -16,27 +21,43 @@ const createEventFromData = async () => {
 
     const slots = dates.value.map(date => ({ "slot_type": "DAY", "slot_start": new Date(date)}));
 
+    loading.value = true;
     const eventResponse = await createEvent({
         name: eventName.value,
         host_name: hostName.value,
         slots: slots,
     });
 
-    // TODO: Here store this in localStorage or something?
-    // or maybe propogate this up somehow.
-    console.log(eventResponse.event_uuid);
+    eventUuid.value = eventResponse.event_uuid;
+    loading.value = false;
+};
+
+const copyLink = async () => {
+    await navigator.clipboard.writeText(LINK_BASE + eventUuid.value);
+    copiedFlash.value = true;
+    setTimeout(() => {
+        copiedFlash.value = false;
+    }, 1000);
 };
 </script>
 
 <template>
-    <div class="create-form">
+    <div v-if="!eventUuid" class="create-form">
         <input type="text" placeholder="Event Name" v-model="eventName"></input>
         <input type="text" placeholder="Host Name" v-model="hostName"></input>
         <div class="date-picker-container">
             <VueDatePicker class="datepicker" placeholder="Choose Dates" v-model="dates" multi-dates />
         </div>
         <button @click="createEventFromData">Create</button>
     </div>
+    <div v-else>
+        <h4>Event Created!</h4>
+        <p>Share the following link to your guests:</p>
+        <p class=link-text>{{ LINK_BASE + eventUuid }}</p>
+        <button :class="{ flashGreen: copiedFlash }" @click=copyLink>
+            {{ copiedFlash ? "Copied ✅" : "Copy Link" }}
+        </button>
+    </div>
 </template>
 
 <style scoped>
@@ -51,4 +72,15 @@ const createEventFromData = async () => {
     margin-top: 8px;
     margin-bottom: 8px;
 }
+.link-text {
+    background-color: white;
+    color: black;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-right: 16px;
+    padding-left: 16px;
+}
+.flashGreen {
+    background-color: #68ac52;
+}
 </style>

frontend/src/components/GuestView.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { getEventData, registerGuest } from '../api/api';
+
+const props = defineProps(['eventUuid'])
+
+const guestName = ref('');
+const guestId = ref(0);
+const eventData = ref();
+
+onMounted(async () => {
+    if (props.eventUuid) {
+        eventData.value = await getEventData(props.eventUuid);
+    }
+});
+
+const createGuest = async () => {
+    const response = await registerGuest(guestName.value, props.eventUuid);
+    guestId.value = response.guest_id
+};
+</script>
+
+<template>
+    <div v-if="!guestId" class="guest-reg">
+        <h3>Guest</h3>
+        <p>You have been invited to
+            <span :class="{eventName: eventData}">{{ eventData ? eventData.name : ' an event' }}</span>
+            {{ eventData && ' by ' }}<span :class="{hostName: eventData}">{{ eventData && eventData.host_name }}</span>
+        </p>
+        <div class="input-container">
+            <input type="text" placeholder="Name" v-model="guestName">
+            <button @click="createGuest">Select Days Available</button>
+        </div>
+    </div>
+    <div v-else class="response-view">
+        <!-- TODO: Loop through event info here to build responses -->
+        Event Info Here
+    </div>
+</template>
+
+<style scoped>
+.input-container {
+    display: inline-flex;
+    flex-direction: column;
+}
+.input-container input {
+    padding: 8px;
+    margin-bottom: 8px;
+}
+.eventName {
+    color: #cfacf2;
+}
+.hostName {
+    color: #ff7fe5;;
+}
+</style>