MustBeLogged component + fix sideBar auto open

src/App.vue

@@ -4,15 +4,12 @@
       <Header class="fixed w-full z-50 top-0 p-2"></Header>
       <div class="flex flex-row relative">
         <div
-            @mouseenter="openSidebar"
             class="fixed h-full w-2 z-20"
             style="background: transparent;"
         ></div>
 
         <transition name="slide-fade">
           <div v-show="sideBarStore.visible"
-               @mouseleave="startCloseSidebarTimer"
-               @mouseenter="clearCloseSidebarTimer"
                class=" fixed h-full min-w-60 border-r-2 bg-white  z-30 transition-transform duration-700">
             <SideBar></SideBar>
           </div>

src/views/MustBeLogged.vue

@@ -0,0 +1,42 @@
+<script setup>
+import LoginForm from "@/views/main/LoginForm.vue";
+
+const isOpen = defineModel();
+
+const props = defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+
+const handleSuccess = () => {
+  console.log('handleSuccess triggered');
+  isOpen.value = false;
+}
+
+const handleFailure = () => {
+  console.error('Login failed');
+}
+
+const closeModal = async () => {
+  console.log('closeModal triggered');
+  isOpen.value = false;
+}
+
+</script>
+
+<template>
+  <v-dialog v-model="isOpen" max-width="400">
+    <v-card>
+      <div class="flex flex-col items-center">
+        <v-img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" class="w-50"></v-img>
+        <LoginForm :onSuccess="handleSuccess" :onFailure="handleFailure"></LoginForm>
+        <v-card-text>{{ message }}</v-card-text>
+      </div>
+      <v-card-actions>
+        <v-btn color="primary" text @click="closeModal">Fermer</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

src/views/contents/Reaction.vue

@@ -3,8 +3,11 @@ import { useUserStore } from "@/stores/userStore.js";
 import { REACTIONS } from "@/Constants/Reactions.js";
 import { computed, ref } from "vue";
 import { useClient } from "@/plugins/api.js";
+import {useAuthStore} from "@/stores/authStore.js"
+import MustBeLogged from "@/views/MustBeLogged.vue";
 
 const userStore = useUserStore();
+const authStore = useAuthStore()
 
 const props = defineProps({
   content: {
@@ -30,9 +33,16 @@ const holdTimeout = ref(null);
 const hideTimeout = ref(null);
 const touchTimeout = ref(null);
 
+const loginModal = ref(false);
+
 initializeReactions();
 
 async function reactToContent(reaction) {
+  if (!authStore.isAuthenticated) {
+    loginModal.value = true;
+    return;
+  }
+  
   const client = useClient();
 
   if (!hasReacted.value) {
@@ -308,6 +318,7 @@ function isMobileDevice() {
           </v-btn>
       </v-card>
     </v-menu>
+    <must-be-logged v-model="loginModal" message="Vous devez être connecté pour réagir."></must-be-logged>
   </div>
 </template>
 

src/views/main/LoginForm.vue

@@ -40,6 +40,7 @@ const password = ref("");
 const errorSnackBar = ref(false);
 const showEmailForm = ref(false);
 const showPassword = ref(false);
+const googleCallback = ref('');
 
 const props = defineProps({
   onSuccess: {

src/views/messages/PostMessage.vue

@@ -36,19 +36,7 @@
     </div>
   </div>
 
-
-  <v-dialog v-model="loginModal" max-width="400">
-    <v-card>
-      <div class="flex flex-col items-center">
-        <v-img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" class="w-50"></v-img>
-        <LoginForm :onSuccess="handleSuccess" :onFailure="handleFailure"></LoginForm>
-        <v-card-text>Vous devez être connecté pour poster un commentaire.</v-card-text>
-      </div>
-      <v-card-actions>
-        <v-btn color="primary" text @click="closeModal">Fermer</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+  <must-be-logged v-model="loginModal" message="Vous devez être connecté pour ajouter un commentaire."></must-be-logged>
 </template>
 
 <script setup>
@@ -57,11 +45,7 @@ import {v7} from 'uuid'
 import {useClient} from '@/plugins/api.js'
 import {useUserStore} from "@/stores/userStore.js"
 import {useAuthStore} from "@/stores/authStore.js"
-import LoginForm from "@/views/main/LoginForm.vue"
-
-const closeModal = () => {
-  loginModal.value = false;
-}
+import MustBeLogged from "@/views/MustBeLogged.vue";
 
 const props = defineProps({
   subjectId: {
@@ -72,7 +56,6 @@ const props = defineProps({
 
 const emits = defineEmits(['message-posted'])
 
-
 const loginModal = ref(false);
 const client = useClient()
 const value = ref("")
@@ -106,14 +89,6 @@ const publish = async () => {
     }
   }
 }
-
-const handleSuccess = () => {
-  loginModal.value = false;
-}
-
-const handleFailure = () => {
-  console.error('Login failed');
-}
 </script>
 
 <style scoped>