Merge pull request #13 from HE-Arc/dev

polish the uix and add simple feedback
HE-Arc · Mar 22, 2024 · 2e1c9fb · 2e1c9fb
2 parents 015af87 + 198cf45
commit 2e1c9fb
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 28 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,13 +1,11 @@
-<script setup>
-import Navbar from '@/components/Navbar.vue';
-import { RouterView } from 'vue-router';
-</script>
-
 <template>
   <v-app>
     <v-container>
       <v-row justify="center">
         <v-col cols="12" sm="10" md="9" lg="6" xl="6">
+          <header class="mb-6">
+            <ErrorAlert/>
+          </header>
           <v-main>
             <RouterView />
           </v-main>
@@ -18,4 +16,10 @@ import { RouterView } from 'vue-router';
       </v-row>
     </v-container>
   </v-app>
-</template>
+</template>
+
+<script setup>
+import Navbar from '@/components/Navbar.vue';
+import ErrorAlert from '@/components/ErrorAlert.vue';
+import { RouterView } from 'vue-router';
+</script>
diff --git a/frontend/src/components/ErrorAlert.vue b/frontend/src/components/ErrorAlert.vue
@@ -0,0 +1,26 @@
+<template>
+    <template v-if="showError" >
+      <v-alert v-model="error" :type="error.type" variant="tonal" closable @click:close="clearError" :border="true">
+        <v-list bg-color="transparent">
+          <v-list-item v-for="(value, key) in error.message" :key="key">
+            <v-list-item-title>{{ key }}</v-list-item-title>
+            <v-list-item-subtitle>{{ value }}</v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </v-alert>
+    </template>
+  </template>
+
+  <script setup>
+
+  import { store } from '@/store';
+  import { computed } from 'vue';
+
+  
+  const error = computed(() => store.error);
+  const showError = computed(() => store.error.type != '');
+
+  const clearError = () => {
+    store.error = {message:{}, type:''};
+  };
+  </script>
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -64,8 +64,7 @@ export default {
             router.push({ name: 'signin', replace: true, force: true });
         },
         checkAuth() {
-            const token = localStorage.getItem('accessToken');
-            return token !== null;
+            return localStorage.getItem('accessToken') !== null;
         }
 
     }

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -3,6 +3,13 @@ import API_ROUTES from '@/configs/constants.js';
 
 export const store = reactive({
   routes:API_ROUTES,
+  error: {message:{},type:''},
 });
 
-export default store;
+
+export const setError = (message,type) => {
+    store.error.message = message;
+    store.error.type = type;
+}
+
+export default {store, setError};
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-container >
+    <v-container>
         <v-row>
             <v-col>
                 <v-img cover class="rounded" src="/logo1024.png"></v-img>
@@ -20,7 +20,9 @@
         <v-row>
             <v-col>
                 <p>
-                    Faites la rencontre de personnes qui partagent votre amour pour la tech et le coding sur KodeCupid. Qui sait, vous pourriez bien trouver votre binôme de code idéal... ou pas ! Mais bon, ça vaut le coup d'essayer.
+                    Faites la rencontre de personnes qui partagent votre amour pour la tech et le coding sur KodeCupid.
+                    Qui sait, vous pourriez bien trouver votre binôme de code idéal... ou pas ! Mais bon, ça vaut le
+                    coup d'essayer.
                 </p>
             </v-col>
         </v-row>
@@ -29,7 +31,7 @@
                 <v-img cover class="rounded-lg" src="/jdg-joueur-du-grenier.gif"></v-img>
             </v-col>
         </v-row>
-        <v-row>
+        <v-row v-if="checkAuth()">
             <v-col class="d-flex justify-center">
                 <v-btn color="primary" :to="{ name: 'signin' }">Connecte-toi</v-btn>
             </v-col>
@@ -56,4 +58,10 @@
         </v-row>
     </v-container>
 
-</template>
+</template>
+
+<script setup>
+const checkAuth = () =>{
+    return localStorage.getItem('accessToken') === null;
+}
+</script>
diff --git a/frontend/src/views/account/EditView.vue b/frontend/src/views/account/EditView.vue
@@ -67,6 +67,7 @@
 
 <script setup>
 import { store } from '@/store';
+import { setError } from '@/store';
 import { ref } from 'vue';
 import { onMounted } from 'vue';
 import axios from 'axios';
@@ -112,9 +113,11 @@ const handleSubmit = async () => {
         }
     }, { withCredentials: true }).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         uninitialized.value = false;
+        setError({message:'L\'utilisateur a été mis à jour'},'success');
         localStorage.setItem('uninitialized', false);
         router.push({ name: 'account-show', replace: true, force: true });
     });
@@ -123,6 +126,7 @@ const handleSubmit = async () => {
 const fetchUser = async () => {
     axios.get(store.routes['USER_DETAIL']).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         user.value = response.data;
@@ -132,6 +136,7 @@ const fetchUser = async () => {
 const fetchTags = async () => {
     axios.get(store.routes['TAG_LIST']).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         all_tags.push(...response.data);
@@ -141,6 +146,7 @@ const fetchTags = async () => {
 const fetchUserTags = async () => {
     axios.get(store.routes['USER_TAGS']).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         user.value.tags = response.data;
@@ -187,6 +193,7 @@ const addTag = (tag) => {
     axios.post(store.routes['USER_TAG_ADD'], JSON.stringify(tag))
         .catch((error) => {
             console.error(error.response.data);
+            setError(error.response.data,'error');
             return error
         }).then(response => {
             user.value.tags.push(tag);
@@ -202,6 +209,7 @@ const deleteTag = (tag) => {
     axios.delete(store.routes['USER_TAG_REMOVE'], { data: JSON.stringify(tag) })
         .catch((error) => {
             console.error(error.response.data);
+            setError(error.response.data,'error');
             return error
         }).then(response => {
             list_tags.value = all_tags.filter((tag) => !user.value.tags.includes(tag))

diff --git a/frontend/src/views/account/ShowView.vue b/frontend/src/views/account/ShowView.vue
@@ -36,6 +36,7 @@
 
 <script setup>
 import { store } from '@/store';
+import { setError } from '@/store';
 import { ref } from 'vue';
 import { onMounted } from 'vue';
 import axios from 'axios';
@@ -52,6 +53,7 @@ const user = ref({
 const fetchUser = async ()=> {
     await axios.get(store.routes['USER_DETAIL']).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         console.log(response.data);
@@ -62,6 +64,7 @@ const fetchUser = async ()=> {
 const fetchUserTags = async () => {
     axios.get(store.routes['USER_TAGS']).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         console.log('user tags', response.data);

diff --git a/frontend/src/views/authentication/SigninView.vue b/frontend/src/views/authentication/SigninView.vue
@@ -9,8 +9,8 @@
       <v-row>
         <v-col>
           <v-label>Nom d'utilisateur</v-label>
-          <v-text-field v-model="form.username" label="Nom d'utilisateur" type="username" :rules="usernameRules" required
-            focused />
+          <v-text-field v-model="form.username" label="Nom d'utilisateur" type="username" :rules="usernameRules"
+            required focused />
         </v-col>
       </v-row>
       <v-row>
@@ -38,6 +38,7 @@ import axios from 'axios';
 
 import { ref } from 'vue';
 import { store } from '@/store';
+import { setError } from '@/store';
 
 import router from '@/router';
 
@@ -58,7 +59,7 @@ const passwordRules = [
 ];
 
 
-const handleSubmit = async  () => {
+const handleSubmit = async () => {
   const jsonForm = JSON.stringify(form.value);
 
   axios.post(store.routes['USER_SIGNIN'], jsonForm, {
@@ -68,7 +69,8 @@ const handleSubmit = async  () => {
     }
   })
     .catch((error) => {
-      console.error(error.response.data);
+      console.error("Signin error", error.response.data);
+      setError(error.response.data,'error');
       return error
     })
     .then(response => {
@@ -77,12 +79,12 @@ const handleSubmit = async  () => {
         axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`;
         localStorage.setItem('refreshToken', response.data.refresh);
         if (uninitialized.value) {
-          router.push({ name: 'account-edit',replace: true, force: true });
+          router.push({ name: 'account-edit', replace: true, force: true });
         }
         else {
-          router.push({ name: 'account-show',replace: true, force: true });
+          router.push({ name: 'account-show', replace: true, force: true });
         }
-        
+
       }
     });
 };

diff --git a/frontend/src/views/authentication/SignupView.vue b/frontend/src/views/authentication/SignupView.vue
@@ -35,6 +35,7 @@
 <script setup>
 import { ref } from 'vue';
 import { store } from '@/store';
+import { setError } from '@/store';
 import axios from 'axios';
 import router from '@/router';
 
@@ -63,12 +64,14 @@ const handleSubmit = async () => {
     , {  })
     .catch((error) => {
       console.error(error.response.data);
+      setError(error.response.data,'error');
       return error
     })
     .then(response => {
       console.log(response);
       if (response.status === 201) {
         localStorage.setItem('uninitialized', true);
+        setError({message: "Votre compte a été bien enregistre"},'success');
         router.push({ name: 'signin', replace: true, force: true});
       }
     });

diff --git a/frontend/src/views/cupid/MatchView.vue b/frontend/src/views/cupid/MatchView.vue
@@ -23,18 +23,21 @@ import { onMounted, ref } from 'vue';
 import PeopleCard from '@/components/PeopleCard.vue';
 
 import { store } from '@/store';
+import { setError } from '@/store';
 import axios from 'axios';
 
 const match = ref([]);
 
 const fetchUserMatch = async () => {
-    axios.get(store.routes['USER_MATCH'], {}).catch((error) => {
-        console.error(error.response.data);
-        return error
-    })
-        .then(response => {
-            match.value = response.data;
-        });
+    // TODO not implemented yet -> will be done in the future
+    // axios.get(store.routes['USER_MATCH'], {}).catch((error) => {
+    //     console.error(error.response.data);
+    //     store.error.value = error.response.data;
+    //     return error
+    // })
+    //     .then(response => {
+    //         match.value = response.data;
+    //     });
 };
 
 onMounted(() => {

diff --git a/frontend/src/views/cupid/SearchView.vue b/frontend/src/views/cupid/SearchView.vue
@@ -20,13 +20,18 @@
 import { onMounted, ref } from 'vue';
 import PeopleCard from '@/components/PeopleCard.vue';
 
+
 import { store } from '@/store';
+import { setError } from '@/store';
 import axios from 'axios';
 
 const user = ref({});
 
 const like = async () => {
-    axios.post(store.routes['USER_LIKE'], { target_user_id: user.value.id })
+    axios.post(store.routes['USER_LIKE'], { target_user_id: user.value.id }).catch((error) => {
+        setError(error.response.data,'error');
+        fetchUser();
+    })
     .then(response => {
         fetchUser();
     });
@@ -39,6 +44,7 @@ const dislike = async () => {
 const fetchUser = async () => {
     axios.get(store.routes['USER_SEARCH'], {params : {id : "random"}}).catch((error) => {
         console.error(error.response.data);
+        setError(error.response.data,'error');
         return error
     }).then(response => {
         user.value = response.data;