add: view change password & email

2024-04-08 20:44:58 -06:00
parent e0a4cf4abb
commit 759e6d0987
11 changed files with 302 additions and 13 deletions
--- a/src/components/FormChangePassword.vue
+++ b/src/components/FormChangePassword.vue
@@ -0,0 +1,144 @@
+<script setup>
+    import {reactive, ref} from 'vue';
+    import CustomInput from './ui/CustomInput.vue';
+    import Spiner from './ui/Spiner.vue';
+import NotificationBadge from './ui/NotificationBadge.vue';
+    const pwdForm = reactive({
+        pwd: '',
+        pwd2: '',
+    })
+
+    const loading = ref(false)
+    const msgError = ref('');
+    const msgSuccess = ref('');
+
+    const hangleSave = () => {
+        msgError.value = '';
+        msgSuccess.value = '';
+        let resp = validations();
+        if(resp !== '') {
+            msgError.value = resp;
+            clearMessages();
+            return;
+        } else {
+
+        }
+    }
+
+    const validations = () => {
+        const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
+
+        if(!pass.test(pwdForm.pwd)) {
+            return 'Contraseña poco segura';
+        } else if (pwdForm.pwd !== pwdForm.pwd2) {
+            return 'Las contraseñas no coinciden';
+        } else {
+            return '';
+        }
+   }
+
+   const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+            msgSuccess.value = '';
+        }, 3000);
+   }
+</script>
+
+<template>
+    <form 
+        @submit.prevent="hangleSave" 
+        autocomplete="off" 
+        method="post" 
+        ref="formRef1"
+    >
+        <br/>   
+        <h3 class="title">Cambiar contraseña</h3>
+        <br/>
+        <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+        <NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
+        <CustomInput
+            label=" Nueva contraseña*:"
+            type="password"
+            name="pwd"
+            :filled="false"
+            v-model:field="pwdForm.pwd"
+            help-text="La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito."
+        />
+        <CustomInput
+            label="Confirme contraseña*:"
+            type="password"
+            name="pwd2"
+            :step="1"
+            :filled="false"
+            v-model:field="pwdForm.pwd2"
+        />
+        <div class="warning-info">
+            <div><i class="fa-solid fa-triangle-exclamation warning"></i></div>
+            Esta acción cerrara su sesión actual y debera volver a iniciar sesión con su nueva contraseña
+        </div>
+        <div class="mt-5 text-center">
+            <Spiner v-if="loading"/>
+            <button 
+                v-else
+                class="btn btn-dark btn-block" type="submit">Guardar</button>
+        </div> 
+    </form>
+</template>
+
+<style scoped>
+     /* .box-back-btn {
+        display: flex;
+        justify-content: center;
+        padding: 16px 0px;
+    } */
+
+    .warning-info {
+        display: flex;
+        padding: 16px;
+        background: rgb(223, 223, 161);
+        font-size: 0.9rem;
+        justify-items: center;
+        align-items: center;
+        font-weight: 400;
+        color: rgb(86, 57, 57);
+        border-radius: 13px;
+    }
+
+    .warning {
+        font-size: 33px;
+        margin-right: 12px;
+        /* color: white; */
+    }
+
+    .btn-block {
+        width: 80%;
+    }
+
+    @media (max-width: 1024px) {
+        .form-content {
+            margin: 24px 16px;
+            background-color: #FFF;
+            padding: 32px 32px;
+            border-radius: 13px;
+        }
+    }
+
+    @media (max-width: 568px) {
+        .form-content {
+            margin: 24px 8px;
+            background-color: #FFF;
+            padding: 20px 20px;
+            border-radius: 13px;
+        }
+
+        .phone {
+            width: 100%;
+        }
+
+        .content-phone{
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>