Merge branch 'feat/26/create-modal-for-the-logout-button-1-points' into 'dev'

Create modal for the logout button (1 point)

See merge request !26

src/components/ModalComponent.vue

 <template>
     <div
         v-if="isModalOpen"
-        class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
+        class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
     >
         <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
-            <h2 class="font-bold mb-4">{{ title }}</h2>
-            <p class="mb-4">{{ message }}</p>
+            <h2 class="title font-bold mb-4">{{ title }}</h2>
+            <p class="message mb-4">{{ message }}</p>
 
             <slot name="input"></slot>
 
-            <div class="flex flex-col justify-center items-center gap-3 mt-3 w-full">
+            <div class="buttons flex flex-col justify-center items-center gap-3 mt-3 w-full">
                 <slot name="buttons"></slot>
             </div>
         </div>

src/components/NavBarComponent.vue

@@ -24,7 +24,7 @@
         </div>
 
         <div v-if="!isHamburger" class="flex justify-center w-40">
-            <button class="focus:ring focus:ring-black-300" @click="logout">Logg ut</button>
+            <button class="focus:ring focus:ring-black-300" @click="openModal">Logg ut</button>
         </div>
         <button v-if="isHamburger" @click="toggleMenu">☰</button>
     </nav>
@@ -36,22 +36,45 @@
             >💰Spareutfordringer</router-link
         >
         <router-link to="/profil" @click="hamburgerOpen = false">🤭Profil</router-link>
-        <button class="focus:ring focus:ring-black-300 bg-transparent" @click="logout">
+        <button class="focus:ring focus:ring-black-300 bg-transparent" @click="openModal">
             Logg ut
         </button>
     </div>
+    <ModalComponent
+        :title="'Vil du logge ut?'"
+        :message="'Er du sikker på at du vil logge ut av SpareSti? Du kan alltid logge inn igjen senere 🕺'"
+        :is-modal-open="isModalOpen"
+        @close="isModalOpen = false"
+    >
+        <template v-slot:buttons>
+            <button
+                @click="logout"
+                class="active-button font-bold py-2 px-4 w-1/2 border-2 disabled:border-transparent"
+            >
+                Logg ut
+            </button>
+            <button
+                @click="closeModal"
+                class="active-button font-bold py-2 px-4 w-1/2 border-2 disabled:border-transparent bg-red-400 hover:bg-red-300"
+            >
+                Avbryt
+            </button>
+        </template>
+    </ModalComponent>
 </template>
 
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 import { onMounted, ref } from 'vue'
 import { useUserStore } from '@/stores/userStore'
+import ModalComponent from '@/components/ModalComponent.vue'
 
 const userStore = useUserStore()
 
 const windowWidth = ref(window.innerWidth)
 const hamburgerOpen = ref(false)
 const isHamburger = ref(false)
+const isModalOpen = ref<boolean>(false)
 
 const logout = () => {
     userStore.logout()
@@ -75,6 +98,13 @@ onMounted(() => {
     window.addEventListener('resize', updateWindowWidth)
     updateWindowWidth()
 })
-</script>
 
-<style scoped></style>
+const openModal = (event: MouseEvent) => {
+    event.preventDefault()
+    isModalOpen.value = true
+}
+
+const closeModal = () => {
+    isModalOpen.value = false
+}
+</script>

src/components/__tests__/ModalTest.spec.ts

@@ -10,13 +10,7 @@ describe('ModalComponent', () => {
             props: {
                 title: 'Test Title',
                 message: 'Test Message',
-                button1: 'Test button',
-                isModalOpen: true,
-                showButton: true,
-                showInput: false,
-                typeValue: 'text',
-                inputPlaceholder: 'Placeholder',
-                isInputValid: true
+                isModalOpen: true
             }
         })
     })
@@ -24,4 +18,20 @@ describe('ModalComponent', () => {
     it('opens modal when button is clicked', async () => {
         expect(wrapper.props().isModalOpen).toBe(true)
     })
+
+    it('title should be: Test Title', () => {
+        expect(wrapper.find('.title').text()).toBe('Test Title')
+    })
+
+    it('title should not be: Wrong Title', () => {
+        expect(wrapper.find('.title').text()).not.toBe('Wrong Title')
+    })
+
+    it('message should be: Test Message', () => {
+        expect(wrapper.find('.message').text()).toBe('Test Message')
+    })
+
+    it('message should not be: Wrong Message', () => {
+        expect(wrapper.find('.message').text()).not.toBe('Wrong Message')
+    })
 })