Fix folder names. Adds missing files.

src/views/profile/security/AccountSecurity.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-security</v-icon> Sécurité</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comment vous connecter à Hutopy</div>
+
+      <div class="flex flex-col w-full">    
+        <button
+            @click="openModal('ModalPassword')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-onepassword</v-icon></span>
+          <span class="flex-auto text-left pr-6">Mot de passe</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalRecoveryByEmailInfo')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-email-outline</v-icon></span>
+          <span class="flex-auto text-left pr-6">Récupération par E-mail</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalRecoveryByPhoneInfo')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-cellphone</v-icon></span>
+          <span class="flex-auto text-left pr-6">Récupération par mobile</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <v-dialog v-model="dialog" max-width="600px">
+    <v-card>
+      <v-card-title>
+
+        <v-spacer></v-spacer>
+
+      </v-card-title>
+      <v-card-text>
+        <component :is="currentComponent"></component>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  
+</template>
+
+
+
+<script setup>
+import { ref } from 'vue';
+import ModalPassword from './ModalPassword.vue';
+import ModalRecoveryByEmailInfo from './ModalRecoveryByEmailInfo.vue';
+import ModalRecoveryByPhoneInfo from './ModalRecoveryByPhoneInfo.vue';
+
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  ModalPassword,
+  ModalRecoveryByEmailInfo,
+  ModalRecoveryByPhoneInfo,
+
+};
+
+const openModal = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+