Device auth and event list selection

Author: Sak1012

hs

@@ -0,0 +1 @@
+sak:3670

src/components/Eventyay/EventyayEvents.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { useLoadingStore } from '@/stores/loading'
+import { ref, onMounted, watchEffect } from 'vue'
+import { useEventyayEventStore } from '@/stores/eventyayEvent'
+import StandardButton from '@/components/Common/StandardButton.vue'
+const loadingStore = useLoadingStore()
+
+const apiToken = ref('')
+const organiser = ref('')
+const url = ref('')
+const eventyayEventStore = useEventyayEventStore()
+const selectedEvent = ref(null)
+
+const { events, loading, error, fetchEvents } = eventyayEventStore
+
+watchEffect(() => {
+  apiToken.value = localStorage.getItem('api_token')
+  organiser.value = localStorage.getItem('organizer')
+  url.value = localStorage.getItem('url')
+
+  if (apiToken.value && organiser.value && url.value) {
+    fetchEvents(url.value, apiToken.value, organiser.value)
+    loadingStore.contentLoaded()
+  }
+})
+
+const submitForm = () => {
+  if (selectedEvent.value) {
+    console.log('Selected event:', selectedEvent.value)
+  } else {
+    console.error('Please select an event.')
+  }
+}
+</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">
+        <label>
+          <input type="radio" :value="event.slug" v-model="selectedEvent" />
+          {{ event.name.en }}
+        </label>
+      </div>
+      <div>
+        <StandardButton
+          :type="'submit'"
+          :text="'Select Event'"
+          class="btn-primary mt-6 w-full justify-center"
+        />
+      </div>
+    </form>
+    <div v-if="!loading && !events.length && !error">No events available</div>
+  </div>
+</template>

src/components/Registration/Device/Device.vue

@@ -11,5 +11,9 @@ loadingStore.contentLoaded()
     class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
   >
     <QRCamera :qr-type="'device'" :scan-type="'Device Registration'" />
+    <div>
+      <input type="text" placeholder="Device Key" class="input" />
+      <StandardButton :text="'Register Device'" class="btn-primary mt-6 w-full justify-center" />
+    </div>
   </div>
 </template>

src/router/index.js

@@ -1,6 +1,7 @@
 import AuthTemplate from '@/AuthTemplate.vue'
 import CheckInCamera from '@/components/CheckIn/CheckInCamera.vue'
 import CheckInStats from '@/components/CheckIn/CheckInStats.vue'
+import EventyayEvents from '@/components/Eventyay/EventyayEvents.vue'
 import Device from '@/components/Registration/Device/Device.vue'
 import RegistrationKiosk from '@/components/Registration/Kiosk/KioskOverview.vue'
 import RegistrationStats from '@/components/Registration/Station/RegistrationStats.vue'
@@ -26,6 +27,11 @@ const router = createRouter({
       name: 'device',
       component: Device
     },
+    {
+      path: '/eventyayevents',
+      name: 'eventyayevents',
+      component: EventyayEvents
+    },
     {
       path: '/panel',
       name: 'auth',

src/stores/eventyayEvent.js

@@ -0,0 +1,33 @@
+import { mande } from 'mande'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useEventyayEventStore = defineStore('eventyayEvent', () => {
+  const events = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  async function fetchEvents(url, apiToken, organizer) {
+    loading.value = true
+    error.value = null
+
+    try {
+      const api = mande(url, { headers: { Authorization: `Device ${apiToken}` } })
+      console.log(`/api/v1/organizers/${organizer}/events/`)
+      const response = await api.get(`/api/v1/organizers/${organizer}/events/`)
+      console.log('Hello', response)
+      events.value = response.results
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    events,
+    loading,
+    error,
+    fetchEvents
+  }
+})

src/stores/processDevice.js

@@ -1,10 +1,11 @@
 import { useCameraStore } from '@/stores/camera'
+import { mande } from 'mande'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
-
+import { useRouter } from 'vue-router'
 export const useProcessDeviceStore = defineStore('processDevice', () => {
   const cameraStore = useCameraStore()
-
+  const router = useRouter()
   const message = ref('')
   const showSuccess = ref(false)
   const showError = ref(false)
@@ -71,12 +72,17 @@ export const useProcessDeviceStore = defineStore('processDevice', () => {
       if (response) {
         const data = response
         console.log(data.api_token)
+        localStorage.setItem('api_token', data.api_token)
+        localStorage.setItem('organizer', data.organizer)
+        localStorage.setItem('url', url)
+        router.push({ name: 'eventyayevents' })
         showSuccessMsg()
       } else {
         console.log('Something happend')
         showErrorMsg()
       }
     } catch (error) {
+      console.log(error)
       console.log('Error in catch')
       showErrorMsg()
     }