94 lines
2.9 KiB
Vue
94 lines
2.9 KiB
Vue
<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 '@/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue';
|
|
import ModalRecoveryByEmailInfo from '@/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue';
|
|
import ModalRecoveryByPhoneInfo from '@/views/Profile/Dialogs/AccountSecurity/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>
|
|
|
|
|