Fix fossasia#9 Auth and API added (fossasia#29)

* fix fossasia#14 Password Prompt added

* Update NavBar.vue

* Update App.vue

* Renamed and Relocated Modal Files

* Update SearchAttendee.vue

* Flex UI fixed

* Update SearchAttendee.vue

* FIx fossasia#9

* Codacy Fix

* Fix fossasia#30

* Codacy Fix

* useApiStore comment fix

* Resolved comment

* Remove commented out code

package.json

@@ -15,6 +15,7 @@
  "dependencies": {
  "@headlessui/vue": "^1.7.14",
  "@heroicons/vue": "^2.0.18",
+ "mande": "^2.0.6",
  "pinia": "^2.1.3",
  "vue": "^3.3.4",
  "vue-qrcode-reader": "3.1.0-vue3-compatibility.2",

src/components/LoginForm.vue

@@ -1,8 +1,46 @@
 <script setup>
-import { RouterLink } from 'vue-router'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useLoadingStore } from '@/stores/loading'
+import { useAuthStore } from '@/stores/auth'
 
-function submitForm() {
- console.log('submitting form')
+// form fields
+const email = ref('')
+const password = ref('')
+
+// error handling
+const showError = ref(false)
+
+// stores
+const loadingStore = useLoadingStore()
+const authStore = useAuthStore()
+
+// router
+const router = useRouter()
+
+async function submitLogin() {
+ loadingStore.show = true
+
+ const payload = {
+ email: email.value,
+ password: password.value
+ }
+
+ await authStore
+ .login(payload, 'auth/login')
+ .then(async (res) => {
+ localStorage.setItem('token', Object(res).access_token)
+ showError.value = false
+ loadingStore.show = false
+ router.push({
+ name: 'stationSelector'
+ })
+ })
+ .catch((err) => {
+ loadingStore.show = false
+ console.log(err)
+ showError.value = true
+ })
 }
 </script>
 
@@ -12,14 +50,15 @@ function submitForm() {
  <h2 class="mt-0 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
  Sign in to your account
  </h2>
- <form class="space-y-6 mt-10" @submit.prevent="submitForm">
+ <form class="space-y-6 mt-10" @submit.prevent="submitLogin">
  <div>
  <label for="email" class="block text-sm font-medium leading-6 text-gray-900"
  >Email address</label
  >
  <div class="mt-2">
  <input
  id="email"
+ v-model="email"
  name="email"
  type="email"
  autocomplete="email"
@@ -36,6 +75,7 @@ function submitForm() {
  <div class="mt-2">
  <input
  id="password"
+ v-model="password"
  name="password"
  type="password"
  autocomplete="current-password"
@@ -46,16 +86,16 @@ function submitForm() {
  </div>
 
  <div>
- <RouterLink
- :to="{ name: 'stationSelector', params: { scannerType: 'checkin', eventId: '123' } }"
+ <button
+ type="submit"
+ class="flex w-full justify-center rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
  >
- <button
- type="submit"
- class="flex w-full justify-center rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
- >
- Login
- </button>
- </RouterLink>
+ Login
+ </button>
+ </div>
+
+ <div v-if="showError">
+ <p class="text-sm text-red-500">Wrong credentials or account does not exist</p>
  </div>
  </form>
 

src/stores/api.js

@@ -0,0 +1,86 @@
+import { mande, defaults } from 'mande'
+import { defineStore } from 'pinia'
+
+export const useApiStore = defineStore('api', () => {
+ let instance = mande('https://test-api.eventyay.com/v1/')
+
+ function setToken() {
+ const token = localStorage.getItem('token')
+ instance.options.headers.Authorization = 'JWT ' + token
+ }
+
+ function clearToken() {
+ instance.options.headers.Authorization = ''
+ }
+
+ function newSession(authenticated) {
+ // reinit
+ instance = mande('https://test-api.eventyay.com/v1/')
+ if (authenticated) {
+ setToken()
+ } else {
+ clearToken()
+ }
+ }
+
+ async function get(requiresAuth, path, payload) {
+ newSession(requiresAuth)
+ instance.options.headers['Accept'] = 'application/vnd.api+json'
+ try {
+ if (payload) {
+ return await instance.get(path)
+ } else {
+ return await instance.get(path, payload)
+ }
+ } catch (error) {
+ return await Promise.reject(error)
+ }
+ }
+
+ async function post(requiresAuth, path, payload, hasBody) {
+ newSession(requiresAuth)
+ if (hasBody) {
+ delete defaults.headers['Content-Type']
+ const options = instance.options
+ options['body'] = payload
+ try {
+ return await instance.post(path)
+ } catch (error) {
+ return await Promise.reject(error)
+ }
+ } else {
+ if (payload) {
+ try {
+ return await instance.post(path, payload)
+ } catch (error) {
+ return await Promise.reject(error)
+ }
+ } else {
+ try {
+ return await instance.post(path)
+ } catch (error) {
+ return await Promise.reject(error)
+ }
+ }
+ }
+ }
+
+ async function remove(path) {
+ newSession(true)
+ try {
+ return await instance.delete(path)
+ } catch (error) {
+ return await Promise.reject(error)
+ }
+ }
+
+ async function patch(path, payload) {
+ newSession(true)
+ try {
+ return await instance.patch(path, payload)
+ } catch (error) {
+ return await Promise.reject(error)
+ }
+ }
+ return { instance, setToken, clearToken, newSession, get, post, remove, patch }
+})

src/stores/auth.js

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { useApiStore } from '@/stores/api'
+
+export const useAuthStore = defineStore('auth', () => {
+ // clear tokens
+ function logoutClear() {
+ localStorage.clear()
+ useApiStore().clearToken()
+ }
+
+ async function logout(route) {
+ try {
+ await useApiStore()
+ .post(true, route)
+ .then(() => {
+ logoutClear()
+ return true
+ })
+ } catch (error) {
+ return false
+ }
+ }
+
+ async function login(payload, route) {
+ try {
+ const res = await useApiStore().post(true, route, payload, false)
+ return Object(res)
+ } catch (error) {
+ return error
+ }
+ }
+
+ return { logout, login }
+})

src/stores/loading.js

@@ -0,0 +1,8 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useLoadingStore = defineStore('loading', () => {
+ const show = ref(false)
+
+ return { show }
+})

src/views/NotFound.vue

@@ -1,7 +1,15 @@
-<script setup></script>
-
 <template>
- <div>
- <h1 class="text-center text-lg">Not Found</h1>
+ <div class="flex min-h-full min-w-full flex-col bg-white pb-12 pt-16">
+ <main class="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-6 lg:px-8">
+ <div class="flex flex-shrink-0 justify-center">
+ </div>
+ <div class="py-16">
+ <div class="text-center">
+ <p class="text-base font-semibold text-indigo-600">404</p>
+ <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Page not found.</h1>
+ <p class="mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
+ </div>
+ </div>
+ </main>
  </div>
 </template>