Added the possibility to log in from the message via a modal.

src/views/messages/PostMessage.vue

@@ -1,46 +1,42 @@
 <template>
-
   <div class="flex flex-column">
-
     <div class="flex flex-row">
-
       <div class="mx-2 content-center">
-
-        <img :src="userStore.portraitUrl"
-             alt="Profile Image"
-             class="rounded-full"
-             width="32px"
-             height="32px">
+        <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full" width="32px" height="32px">
       </div>
-
-      <v-text-field
-          v-model="value"
-          density="compact"
-          variant="solo-inverted"
-          placeholder="Votre commentaire..."
-          hide-details
-          clearable>
-      </v-text-field>
-
+      <v-text-field v-model="value" density="compact" variant="solo-inverted" placeholder="Votre commentaire..." hide-details clearable></v-text-field>
     </div>
-
     <div class="flex flex-row gap-2 mt-2 justify-end">
       <v-btn variant="plain">Annuler</v-btn>
       <v-btn variant="tonal" @click="publish">Commenter</v-btn>
     </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>
 </template>
 
 <script setup>
-
 import {ref} from 'vue';
-import {v7} from 'uuid'
+import {v7} from 'uuid';
 import {useRouter} from "vue-router";
 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;
+}
 
 const props = defineProps({
   subjectId: {
@@ -51,6 +47,7 @@ const props = defineProps({
 
 const emit = defineEmits(['message-posted'])
 
+const loginModal = ref(false);
 const client = useClient()
 const value = ref("")
 const router = useRouter()
@@ -58,37 +55,38 @@ const userStore = useUserStore()
 const authStore = useAuthStore()
 
 const publish = async () => {
-
   if (!authStore.isAuthenticated) {
-    await router.push('/login')
-  }
-
-  try {
-    const messageId = v7()
-    
-    await client.post(`/api/messages/`,
-        {
-          "id": messageId,
-          "subjectId": props.subjectId,
-          "message": value.value
-        })
-
-    emit('message-posted',
-        {
-          "id": messageId,
-          "subjectId": props.subjectId,
-          "createdBy": userStore.user.id,
-          "createdByName": userStore.alias,
-          "createdByPortraitUrl": userStore.portraitUrl,
-          "createdAt": new Date(Date.now()).toISOString(),
-          "value": value.value,
-          "parentId": null
-        })
-
-    value.value = ''
-  } catch (error) {
-    console.error(`post api/message : ${error}`)
+    loginModal.value = true;
+  } else {
+    try {
+      const messageId = v7()
+      await client.post(`/api/messages/`, {
+        "id": messageId,
+        "subjectId": props.subjectId,
+        "message": value.value
+      })
+      emit('message-posted', {
+        "id": messageId,
+        "subjectId": props.subjectId,
+        "createdBy": userStore.user.id,
+        "createdByName": userStore.alias,
+        "createdByPortraitUrl": userStore.portraitUrl,
+        "createdAt": new Date(Date.now()).toISOString(),
+        "value": value.value,
+        "parentId": null
+      })
+      value.value = ''
+    } catch (error) {
+      console.error(`post api/message : ${error}`)
+    }
   }
 }
 
+const handleSuccess = () => {
+  loginModal.value = false;
+}
+
+const handleFailure = () => {
+  console.error('Login failed');
+}
 </script>