Add functionality to use check-in app for QR code scanning with eventyay

.env

@@ -1,3 +1,3 @@
-VITE_TEST_API_URL=https://test-api.eventyay.com/v1
-VITE_PROD_API_URL=https://api.eventyay.com/v1
+VITE_TEST_API_URL=https://app.eventyay.com/v1
+VITE_PROD_API_URL=https://app.eventyay.com/v1
 VITE_LOCAL_PORT=8000

src/components/Eventyay/EventyayEvents.vue

@@ -1,40 +1,32 @@
 <script setup>
 import { useLoadingStore } from '@/stores/loading'
-import { ref, onMounted, watchEffect } from 'vue'
+import { useEventyayApi } from '@/stores/eventyayapi'
 import { useEventyayEventStore } from '@/stores/eventyayEvent'
+
+import { ref, onMounted, watchEffect } from 'vue'
 import StandardButton from '@/components/Common/StandardButton.vue'
 import { useRouter } from 'vue-router'
-const loadingStore = useLoadingStore()
 
-const apiToken = ref('')
-const organiser = ref('')
-const url = ref('')
-const eventyayEventStore = useEventyayEventStore()
-const selectedEvent = ref(null)
+const loadingStore = useLoadingStore()
 const router = useRouter()
-const { events, error, fetchEvents } = eventyayEventStore
 
-apiToken.value = localStorage.getItem('api_token')
-organiser.value = localStorage.getItem('organizer')
-url.value = localStorage.getItem('url')
+const selectedEvent = ref(null)
+const eventyayEventStore = useEventyayEventStore()
+const { events, error } = eventyayEventStore
+const processApi = useEventyayApi()
+const { apitoken, url, organizer, selectedRole } = processApi
 
-if (apiToken.value && organiser.value && url.value) {
-  fetchEvents(url.value, apiToken.value, organiser.value)
-  loadingStore.contentLoaded()
-}
+loadingStore.contentLoaded()
+eventyayEventStore.fetchEvents(url, apitoken, organizer)
 
 const submitForm = () => {
-  if (localStorage.getItem('selectedEventSlug') || localStorage.getItem('selectedEventName')) {
-    localStorage.removeItem('selectedEventSlug')
-    localStorage.removeItem('selectedEventName')
-  }
-
   if (selectedEvent.value) {
     const selectedEventData = events.find((event) => event.slug === selectedEvent.value)
     if (selectedEventData) {
-      localStorage.setItem('selectedEventSlug', selectedEventData.slug)
-      localStorage.setItem('selectedEventName', selectedEventData.name.en)
-      router.push({ name: 'eventyayselect' })
+      processApi.setEventSlug(selectedEventData.slug)
+      if (selectedRole === 'exhibitor') router.push({ name: 'eventyayleedlogin' })
+      if (selectedRole === 'checkin' || selectedRole === 'badge')
+        router.push({ name: 'eventyaycheckin' })
     }
   } else {
     console.error('Please select an event.')
@@ -43,7 +35,6 @@ const submitForm = () => {
 </script>
 <template>
   <div class="-mt-16 flex h-screen flex-col justify-center">
-    <div v-if="loading">Loading events...</div>
     <div v-if="error" class="text-danger">{{ error }}</div>
     <form v-if="events.length" @submit.prevent="submitForm">
       <div v-for="event in events" :key="event.slug" class="mb-2">

src/components/Eventyay/EventyayLeedLogin.vue

@@ -34,10 +34,10 @@ loadingStore.contentLoaded()
 <template>
   <div class="-mt-16 flex h-screen flex-col justify-center">
     <div class="my-auto sm:mx-auto sm:w-full sm:max-w-sm">
-      <h2 class="text-center">Sign in with your credentials</h2>
+      <h2 class="text-center">Sign in with your Exhibitor credentials</h2>
       <form class="mt-10 space-y-3" @submit.prevent="submitLogin">
         <div>
-          <label for="email">User ID</label>
+          <label for="email">Contact Email</label>
           <div class="mt-2">
             <input
               id="email"
@@ -51,7 +51,7 @@ loadingStore.contentLoaded()
         </div>
 
         <div>
-          <label for="password">Password</label>
+          <label for="password">Exhibitor Key</label>
           <div class="mt-2">
             <input
               id="password"

src/components/LoginForm.vue

@@ -4,12 +4,14 @@ import { useRouter } from 'vue-router'
 import { useLoadingStore } from '@/stores/loading'
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
+import { useEventyayApi } from '@/stores/eventyayapi'
 import StandardButton from '@/components/Common/StandardButton.vue'
 
 // stores
 const loadingStore = useLoadingStore()
 const authStore = useAuthStore()
 const userStore = useUserStore()
+const processApi = useEventyayApi()
 
 const email = ref('')
 const password = ref('')
@@ -72,6 +74,11 @@ function registerDevice() {
   })
 }
 
+function handleRoleSelection(role) {
+  processApi.setRole(role)
+  registerDevice() // Store the selected role in the store
+}
+
 onMounted(() => {
   if (authStore.isAuthenticated) {
     router.push({
@@ -86,38 +93,8 @@ onMounted(() => {
 <template>
   <div class="-mt-16 flex h-screen flex-col justify-center">
     <div class="my-auto sm:mx-auto sm:w-full sm:max-w-sm">
-      <h2 class="text-center">Sign in to your account</h2>
-      <form class="mt-10 space-y-3" @submit.prevent="submitLogin">
-        <div>
-          <label for="email">Email address</label>
-          <div class="mt-2">
-            <input
-              id="email"
-              v-model="email"
-              name="email"
-              type="email"
-              autocomplete="email"
-              required="true"
-              class="block w-full"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label for="password">Password</label>
-          <div class="mt-2">
-            <input
-              id="password"
-              v-model="password"
-              name="password"
-              type="password"
-              autocomplete="current-password"
-              required="true"
-              class="block w-full"
-            />
-          </div>
-        </div>
-
+      <h2 class="text-center">Select Server and Purpose</h2>
+      <div class="mt-10 space-y-3">
         <div>
           <label for="select">Select a Server</label>
           <select id="select" v-model="server" class="mt-2 block w-full">
@@ -126,38 +103,34 @@ onMounted(() => {
             <option>Testing</option>
           </select>
         </div>
-
         <div>
           <StandardButton
-            type="submit"
-            text="Login"
+            type="button"
+            text="I am a Exhibitor"
             class="btn-primary mt-6 w-full justify-center"
+            @click="handleRoleSelection('exhibitor')"
           />
         </div>
-
-        <div v-if="showError">
-          <p class="text-sm text-danger">Wrong credentials or account does not exist</p>
+        <div>
+          <StandardButton
+            type="button"
+            text="I am a Checkin Staff"
+            class="btn-primary mt-6 w-full justify-center"
+            @click="handleRoleSelection('checkin')"
+          />
+        </div>
+        <div>
+          <StandardButton
+            type="button"
+            text="Badge Printing Station"
+            class="btn-primary mt-6 w-full justify-center"
+            @click="handleRoleSelection('badge')"
+          />
         </div>
-      </form>
-
-      <p class="mt-5 text-center text-sm">
-        <span>Forgot password?</span>
-        {{ ' ' }}
-        <a href="https://eventyay.com/reset-password" class="font-medium leading-6 text-primary"
-          >Click here to reset password</a
-        >
-      </p>
-      <StandardButton
-        type="button"
-        text="Register-Device"
-        disabled="false"
-        class="btn-primary mt-6 w-full justify-center"
-        @click="registerDevice"
-      >
-      </StandardButton>
-      <div v-if="showServerError" class="mt-5">
-        <p class="text-center text-sm text-danger">{{ errmessage }}</p>
       </div>
     </div>
   </div>
+  <div v-if="showServerError" class="mt-5">
+    <p class="text-center text-sm text-danger">{{ errmessage }}</p>
+  </div>
 </template>

src/components/Registration/Device/Device.vue

@@ -1,31 +1,28 @@
 <script setup>
 import QRCamera from '@/components/Common/QRCamera.vue'
-import { useLoadingStore } from '@/stores/loading'
 import StandardButton from '@/components/Common/StandardButton.vue'
+import { useLoadingStore } from '@/stores/loading'
 import { useProcessDeviceStore } from '@/stores/processDevice'
+import { useEventyayApi } from '@/stores/eventyayapi'
 import { ref } from 'vue'
+
 const loadingStore = useLoadingStore()
 loadingStore.contentLoaded()
+const processApi = useEventyayApi()
+const { selectedRole } = processApi
 
 const processDeviceStore = useProcessDeviceStore()
 const showError = ref(false)
-async function registerDevice() {
-  const auth_token = document.getElementById('auth_token').value
-  const payload = { handshake_version: 1, url: 'http://localhost', token: auth_token }
-  try {
-    const resp = await processDeviceStore.authDevice(JSON.stringify(payload))
-  } catch (error) {
-    showError.value = true
-    console.error('Error registering device:', error)
-  }
-}
 </script>
 
 <template>
-  <div
-    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
-  >
+  <div class="flex h-screen w-full flex-col items-center justify-center">
+    <h1 class="text-2xl font-bold">Welcome {{ selectedRole }}</h1>
     <QRCamera qr-type="device" scan-type="Device Registration" />
+    <p class="text-center">
+      Please contact your organiser to provide the QR Code to you.<br />
+      You need one QR code per device.
+    </p>
     <div v-if="showError">
       <p class="text-sm text-danger">Oops! something went wrong</p>
     </div>

src/router/index.js

@@ -3,7 +3,6 @@ import CheckInCamera from '@/components/CheckIn/CheckInCamera.vue'
 import CheckInStats from '@/components/CheckIn/CheckInStats.vue'
 import EventyayEventCheckIn from '@/components/Eventyay/EventyayEventCheckIn.vue'
 import EventyayEvents from '@/components/Eventyay/EventyayEvents.vue'
-import EventyayEventSelection from '@/components/Eventyay/EventyayEventSelection.vue'
 import EventyayLeedLogin from '@/components/Eventyay/EventyayLeedLogin.vue'
 import LeadScanning from '@/components/Eventyay/LeadScanning.vue'
 import Device from '@/components/Registration/Device/Device.vue'
@@ -41,11 +40,6 @@ const router = createRouter({
       name: 'eventyaycheckin',
       component: EventyayEventCheckIn
     },
-    {
-      path: '/eventyayselect',
-      name: 'eventyayselect',
-      component: EventyayEventSelection
-    },
     {
       path: '/eventyayleedlogin',
       name: 'eventyayleedlogin',

src/stores/eventyayEvent.js

@@ -13,6 +13,7 @@ export const useEventyayEventStore = defineStore('eventyayEvent', () => {
       const api = mande(url, { headers: { authorization: `Device ${apiToken}` } })
       const response = await api.get(`/api/v1/organizers/${organizer}/events/`)
       events.value = response.results
+      console.log(response)
     } catch (err) {
       error.value = err.message
     }

src/stores/eventyayapi.js

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useEventyayApi = defineStore('processApi', () => {
+
+  const apitoken = ref('')
+  const url = ref('')
+  const organizer = ref('')
+  const eventSlug = ref('')
+  const exikey = ref('')
+  const selectedRole = ref('')
+
+  function setApiCred(newToken, newUrl, newOrg) {
+    apitoken.value = newToken
+    url.value = newUrl
+    organizer.value = newOrg
+  }
+
+  function setEventSlug(slug) {
+    eventSlug.value = slug
+  }
+
+  function setExhibitorKey(key) {
+    exikey.value = key
+  }
+
+  function setRole(role) {
+    selectedRole.value = role
+  }
+
+  return {
+    setApiCred,
+    setEventSlug,
+    setExhibitorKey,
+    selectedRole,
+    setRole,
+    apitoken,
+    url,
+    organizer,
+    eventSlug,
+    exikey
+  }
+})