Colors + profile mapping + socialNetworks urls. Missing images

src/views/main/Profile.vue

@@ -2,49 +2,66 @@
   <div class="px-2">
     <div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">
 
-      <H1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
+      <h1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
         Personnaliser votre profil
       </h1>
       
       <ProfileBanner :user="currentUser"></ProfileBanner>
-      <Aboutyou :user="currentUser"></Aboutyou>
+      <AboutYou :user="currentUser"></AboutYou>
       <SocialLinks :social-networks="currentUser.socialNetworks"></SocialLinks>
 
       <div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4">
         <div class="flex space-x-2">
-          <v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
-          <router-link :to="`/${currentUserName}`">
+          <v-btn class="save-btn" @click="saveForm">Enregistrer</v-btn>
+          <router-link :to="`/${currentUser.userName}`">
             <v-btn class="save-btn">Retour</v-btn>
           </router-link>
           
         </div>
       </div>
+
+      <v-snackbar v-model="snackbar" :timeout="1000">
+        Sauvegarde
+
+        <template v-slot:actions>
+          <v-btn color="green" variant="text" @click="snackbar = false">
+            Fermer
+          </v-btn>
+        </template>
+      </v-snackbar>
+      
     </div>
   </div>
 </template>
 
 <script async setup>
-import Aboutyou from "@/views/main/Aboutyou.vue";
+import AboutYou from "@/views/main/Aboutyou.vue";
 import SocialLinks from "@/views/main/SocialLinks.vue";
 import ProfileBanner from "@/views/main/ProfileBanner.vue";
-import DonationPopup from "@/views/main/DonationPopup.vue";
 import {onBeforeMount, ref} from "vue";
-import {useClient} from "@/plugins/api.js";
 import {useUserStore} from "@/stores/user.js";
 import MyUserModel from "@/models/myUserModel.js";
-const client = useClient();
+import {useClient} from "@/plugins/api.js";
+
 const userStore = useUserStore();
+const client = useClient();
 
 const currentUser = ref(MyUserModel)
+const snackbar = ref(false);
 
-onBeforeMount(async () => {
+onBeforeMount( () => {
   try {
-    currentUser.value = await userStore.getCurrentUser(client);
+    currentUser.value = userStore.getCurrentUser();
   } catch(error) {
     console.log("User not logged")
   }
 })
 
+async function saveForm(){
+  snackbar.value = true;
+  await userStore.updateCurrentUser(client, currentUser.value);
+}
+
 </script>