add: change password, done

src/components/FormChangePassword.vue

@@ -2,17 +2,30 @@
     import {reactive, ref} from 'vue';
     import CustomInput from './ui/CustomInput.vue';
     import Spiner from './ui/Spiner.vue';
-import NotificationBadge from './ui/NotificationBadge.vue';
+    import NotificationBadge from './ui/NotificationBadge.vue';
+    import { recoveryPassword, recoveryPasswordConfirm, regiter } from '../services/auth';
+    import { useAuthStore } from '../stores/auth';
+    import { useRouter } from 'vue-router';
+    import { useNotificationsStore } from '../stores/notifications';
+    
     const pwdForm = reactive({
         pwd: '',
         pwd2: '',
+        code: '',
+        checksum: '',
     })
 
+    const step = ref(1);
+
+    const auth = useAuthStore();
+    const router = useRouter();
+    const notifications = useNotificationsStore()
+
     const loading = ref(false)
     const msgError = ref('');
     const msgSuccess = ref('');
 
-    const hangleSave = () => {
+    const hangleSave = async() => {
         msgError.value = '';
         msgSuccess.value = '';
         let resp = validations();
@@ -21,10 +34,88 @@ import NotificationBadge from './ui/NotificationBadge.vue';
             clearMessages();
             return;
         } else {
-
+            loading.value = true;
+            msgError.value = '';
+            const data = {
+                email: auth.user.email,
+                password: pwdForm.pwd
+            }
+            const result = await recoveryPassword(data);
+            if(result.msg === 'success' && result.data !== null) {
+                msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
+                pwdForm.checksum = result.data.checksum;
+                step.value = 2;
+                clearMessages();
+            } else {
+                msgError.value = result.msg;
+                clearMessages();
+            }
+            loading.value = false;
         }
     }
 
+    const handleConfirmChange = async() => {
+        msgError.value = '';
+        msgSuccess.value = '';
+        if(pwdForm.code.length < 6) {
+            msgError.value = 'Ingresa código valido';
+            clearMessages();
+            return;
+        } else {
+            loading.value = true;
+            msgError.value = '';
+            const data = {
+                email: auth.user.email,
+                password: pwdForm.pwd,
+                otp: pwdForm.code,
+                checksum: pwdForm.checksum
+            }
+            const result = await recoveryPasswordConfirm(data);
+            // console.log(result);
+            if(result.msg === 'success' && result.data !== null){
+                Object.assign(pwdForm, {
+                    pwd: '',
+                    retryPwd: '',
+                    code: '',
+                    checksum: '',
+                });
+                clearMessages();
+                notifications.$patch({
+                    text : 'Contraseña se ha cambiando exitosamente!',
+                    show : true,
+                    error: false
+                });
+                router.push({name: 'login'});
+            } else {
+                msgError.value = result.msg;
+               clearMessages()
+            }
+            loading.value = false;
+        }
+    }
+
+    const resendCode = async() => {
+        // loading.value = true;
+        // const data = {
+        //     email: pwdForm.email,
+        //     password: pwdForm.pwd
+        // }
+        // const result = await regiter(data);
+        // if(result.msg === 'success' && result.data !== null) {
+        //     msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
+        //     checksum.value = result.data.checksum;
+        //     clearMessages();
+        // } else {
+        //     msgError.value = result.msg;
+        //     clearMessages();
+        // }
+        // loading.value = false;
+   }
+
+    const handleBack = (val) => {
+        step.value = val;
+   }
+
     const validations = () => {
         const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
 
@@ -51,6 +142,7 @@ import NotificationBadge from './ui/NotificationBadge.vue';
         autocomplete="off" 
         method="post" 
         ref="formRef1"
+        v-if="step === 1"
     >
         <br/>   
         <h3 class="title">Cambiar contraseña</h3>
@@ -81,7 +173,35 @@ import NotificationBadge from './ui/NotificationBadge.vue';
             <Spiner v-if="loading"/>
             <button 
                 v-else
-                class="btn btn-dark btn-block" type="submit">Guardar</button>
+                class="btn btn-dark btn-block" type="submit">Continuar</button>
+        </div> 
+    </form>
+    <form v-if="step === 2" @submit.prevent="handleConfirmChange" class="mx-5">
+        <div class="d-flex justify-content-center align-items-center mb-4 mt-4">
+            <a  
+                @click="handleBack(1)"
+                class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
+        </div>
+        <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+        <NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
+        <p class="help-info">Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar la recuperacion de contraseña. No olvides revisar en la carpeta spam</p>
+        <CustomInput 
+            label="Ingresa el código"
+            name="code"
+            :filled="false"
+            type="text"
+            v-model:field="pwdForm.code"
+        />
+        <!-- <div v-if="!loading" class="d-flex justify-content-center align-items-center mt-4">
+            <a  
+                @click="resendCode()"
+                class="btn-text ms-2"><i class="fa-solid fa-rotate-right"></i> Reenviar código</a>
+        </div> -->
+        <div class="mt-5 text-center">
+            <Spiner v-if="loading"/>
+            <button 
+                v-else
+                class="btn btn-dark btn-block" type="submit">Confirmar</button>
         </div> 
     </form>
 </template>

src/views/EditProfileView.vue

@@ -6,7 +6,7 @@
     import { storeToRefs } from 'pinia';
     import NotificationBadge from '../components/ui/NotificationBadge.vue';
     import FormChangePassword from '../components/FormChangePassword.vue';
-import FormChangeEmail from '../components/FormChangeEmail.vue';
+    import FormChangeEmail from '../components/FormChangeEmail.vue';
 
     const auth = useAuthStore();