fix fossasia#59 fossasia#53 implement APIs for search and logout func…

…tions (fossasia#60)

* Add Home, Room Check-in

* fixed codacy

* clear netlify build

* Update SearchAttendee.vue

* Update ScanSearch

* Fixed navabr

* Update BaseTemplate.vue

* Removed bottom navbar and updated dropdown menu

* Minor fixes

* Added checklist to printModal and simplified router

* Name changes

* Fixed passwordModal and removed password requirement for stats

* Switched to template refs

* minor fixes

* Rearranged and renamed

* Fix codacy issues

* Changed casing

* Fix fossasia#31 Added dropdown list that allows user to choose which details to show on search

* Fixed format

* Fix codacy

* Minor fixes and renaming

* Minor fixes and moved some code to inline

* Fix fossasia#41 and codacy

* fix codacy

* Simplified code

* fix fossasia#48 created standard button component and replaced some buttons

* fix format

* Converted all buttons to standard component

* fixed format

* fix codacy

* Fix fossasia#40 standardised all p-6 except pages with scanners, optimised search function for mobile

* changed prop name

* removed activated classes

* Minor UI fixes

* fix fossasia#52 clicking print on search attendee now opens the print modal and logs name of card

* fix fossasia#51 new layout for print modal

* changed to margin

* removed grow flex

* minor fixes

* fix fossasia#50 created success notification that shows on print

* removed redundant code

* fix  margin of print modal

* changed naming

* switched to camel case, moved some functions to inline

* minor changes

* changed some refs to computed

* fix fossasia#49 fossasia#46 ported everything to stores

* fix codacy

* fix fossasia#59 fossasia#53 search and logout attached to respective APIs

* fix netlify

* fix netlify

* fix netlify

* fix codacy

* fix codacy

* fix codacy

* fix build

* fix codacy

* fix codacy

---------

Co-authored-by: cweitat <[email protected]>
Co-authored-by: lizardon <[email protected]>

src/App.vue

@@ -5,6 +5,8 @@ import LoadingView from '@/components/Utilities/LoadingView.vue'
 </script>
 
 <template>
- <RouterView class="m-6 h-screen" />
- <LoadingView v-if="useLoadingStore().show"></LoadingView>
+ <div>
+ <RouterView />
+ <LoadingView v-if="useLoadingStore().show"></LoadingView>
+ </div>
 </template>

src/components/LoginForm.vue

@@ -46,7 +46,7 @@ async function submitLogin() {
 </script>
 
 <template>
- <div class="flex flex-1 flex-col justify-center my-auto">
+ <div class="flex flex-1 flex-col justify-center my-auto h-screen">
  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
  <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
  Sign in to your account

src/components/Modals/PasswordModal.vue

@@ -3,9 +3,14 @@ import { ref } from 'vue'
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { EllipsisHorizontalIcon } from '@heroicons/vue/24/outline'
 import StandardButton from '@/components/Shared/StandardButton.vue'
-import { usePasswordModalStore } from '@/stores/passwordModal'
+import { useAuthStore } from '@/stores/auth'
+import { useLoadingStore } from '@/stores/loading'
+import { useRouter } from 'vue-router'
 
-const passwordModalStore = usePasswordModalStore()
+const authStore = useAuthStore()
+const loadingStore = useLoadingStore()
+
+const router = useRouter()
 
 const props = defineProps({
  showPasswordModal: Boolean
@@ -15,18 +20,30 @@ const emit = defineEmits(['hidePasswordModal'])
 
 const passwordField = ref('')
 const validPassword = ref(null)
+const disableButton = ref(false)
+
+async function checkPassword() {
+ disableButton.value = true
+ loadingStore.show = true
+ const payload = { password: passwordField.value }
 
-const checkPassword = (value) => {
- // check password here
- if (value === passwordModalStore.password) {
- validPassword.value = true
- emit('hidePasswordModal', false)
- passwordField.value = ''
- // sign out
- } else {
- validPassword.value = false
- passwordField.value = ''
- }
+ await authStore.login(payload, 'auth/verify-password').then((res) => { //verify password
+ if (res.result) {
+ authStore.logout('auth/logout').then((res) => console.log(res)) // post logout api and clear local storage
+ validPassword.value = true
+ emit('hidePasswordModal', false)
+ // sign out
+ router.push({
+ name: 'userAuth'
+ })
+ loadingStore.show = false
+ } else {
+ loadingStore.show = false
+ disableButton.value = false
+ validPassword.value = false
+ passwordField.value = ''
+ }
+ })
 }
 </script>
 
@@ -96,8 +113,12 @@ const checkPassword = (value) => {
  <div class="mt-5 sm:mt-6">
  <StandardButton
  text="Sign Out"
- class="bg-blue-600 text-white hover:bg-blue-500 w-full justify-center"
- @click="checkPassword(passwordField)"
+ :disabled="disableButton"
+ :class="[
+ disableButton && 'cursor-not-allowed opacity-20',
+ 'bg-blue-600 text-white hover:bg-blue-500 w-full justify-center'
+ ]"
+ @click="checkPassword()"
  />
  </div>
  </DialogPanel>

src/components/Modals/PrintModal.vue

@@ -17,8 +17,8 @@ const emit = defineEmits(['hideModal', 'print'])
 const disableButton = ref(false)
 const printingText = ref(false)
 
-const titleText = computed(() => props.validQRCode ? 'Select items to print' : 'Error!')
-const messageText = computed(() => !props.validQRCode ? 'Please scan a valid QR code' : '')
+const titleText = computed(() => (props.validQRCode ? 'Select items to print' : 'Error!'))
+const messageText = computed(() => (!props.validQRCode ? 'Please scan a valid QR code' : ''))
 
 const printDelay = (delayHideModal, delayPrint) => {
  setTimeout(() => emit('hideModal'), delayHideModal)
@@ -122,8 +122,12 @@ const print = () => {
  </div>
  <!--Select all button-->
  <StandardButton
+ :text="
+ printModalStore.selectedOptions.length === 5
+ ? 'Deselect All'
+ : 'Select All'
+ "
  :disabled="disableButton"
- :text="printModalStore.selectedOptions.length === 5 ? 'Deselect All' : 'Select All'"
  :class="[
  disableButton
  ? 'cursor-not-allowed opacity-20'

src/components/NavBar.vue

@@ -35,12 +35,19 @@ const userNavigation = [
 const showNavigation = ref(false)
 const eventName = ref('test event')
 const showPasswordModal = ref(false)
+const componentKey = ref(0)
 </script>
 
 <template>
  <PasswordModal
+ :key="componentKey"
  :show-password-modal="showPasswordModal"
- @hidePasswordModal="showPasswordModal = $event"
+ @hide-password-modal="
+ () => {
+ showPasswordModal = $event
+ componentKey += 1
+ }
+ "
  />
  <Disclosure v-slot="{ open }" as="header" class="bg-white shadow sticky top-0 z-20">
  <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">

src/components/Registration/Manual/SearchAttendee.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { XCircleIcon, PrinterIcon, MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import { FunnelIcon } from '@heroicons/vue/24/outline'
 
@@ -12,6 +12,16 @@ const emit = defineEmits(['print'])
 
 const menuOpen = ref(false)
 const query = ref('')
+
+watch(query, (value) => {
+ if (value.includes('@')) {
+ searchAttendeeStore.getAttendee('', value) // is an email
+ } else if (value == '') {
+ searchAttendeeStore.clearAttendees()
+ } else {
+ searchAttendeeStore.getAttendee(value, '') // is a name
+ }
+})
 </script>
 
 <template>