Profile updated

src/views/main/Aboutyou.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="py-8" ref="container">
+    <div class="text-center text-2xl mb-4">À propos de vous</div>
+    <div class="px-5 relative">
+      <div class="flex flex-col space-y-4">
+        <!-- Vos champs de formulaire ici -->
+        <div>
+          <label class="flex justify-center text-lg">Nom d'utilisateur</label>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Prénom</label>
+          </div>
+          <v-text-field v-model="firstName" label="Prénom" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Nom</label>
+          </div>
+          <v-text-field v-model="lastName" label="Nom" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Occupation</label>
+          </div>
+          <v-text-field v-model="occupation" label="Occupation" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Courriel</label>
+          </div>
+          <v-text-field v-model="email" label="Courriel" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Téléphone</label>
+          </div>
+          <v-text-field v-model="phone" label="Téléphone" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Date de naissance</label>
+          </div>
+          <v-text-field v-model="birthDate" label="Date de naissance" variant="outlined"
+                        :rules="[dateRule]"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Pays</label>
+          </div>
+          <v-text-field v-model="country" label="Pays" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Ville</label>
+          </div>
+          <v-text-field v-model="city" label="Ville" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Adresse</label>
+          </div>
+          <v-text-field v-model="address" label="Adresse" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Titre A propos</label>
+          </div>
+          <v-text-field v-model="titre" label="Titre A propos" variant="outlined"></v-text-field>
+        </div>
+
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <label class="text-lg">Description</label>
+          </div>
+          <v-textarea v-model="description" label="Description" variant="outlined"></v-textarea>
+        </div>
+      </div>
+      <div class="flex justify-end space-x-2 px-4">
+        <v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
+        <router-link :to="`/${currentUserName}`">
+          <v-btn class="save-btn">Retour</v-btn>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script async setup>
+import {ref, onMounted, onUnmounted} from 'vue';
+
+const username = ref('');
+const firstName = ref('');
+const lastName = ref('');
+const occupation = ref('');
+const email = ref('');
+const phone = ref('');
+const birthDate = ref('');
+const country = ref('');
+const city = ref('');
+const address = ref('');
+const titre = ref('');
+const description = ref('');
+
+const dateRule = value => {
+  const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
+  return datePattern.test(value) || 'Format de date invalide (JJ/MM/AAAA)';
+};
+
+const saveAll = () => {
+  const formData = {
+    username: username.value,
+    firstName: firstName.value,
+    lastName: lastName.value,
+    occupation: occupation.value,
+    email: email.value,
+    phone: phone.value,
+    birthDate: birthDate.value,
+    country: country.value,
+    city: city.value,
+    address: address.value,
+    titre: titre.value,
+    description: description.value,
+  };
+
+  // Envoyer les données
+  console.log('Envoi des données : ', formData);
+  // Vous pouvez utiliser une requête HTTP pour envoyer les données à votre serveur ici.
+};
+</script>
+
+<style scoped>
+.save-btn {
+  z-index: 10;
+}
+</style>