wip migration

pages/login/restablecer.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="container-fluid">
+    <BModal 
+      id="modal-center" 
+      v-model="active" 
+      centered 
+      title="latienda.coop" 
+      ok-variant="success"> Email enviado, revisa tu bandeja de entrada. </BModal>
+
+    <div class="row">
+      <FormHeader title="Restablecer Contraseña" class="col-12" />
+    </div>
+
+    <p class="help" align="center">
+      Introduce la dirección de correo asociada a tu cuenta y te enviaremos un
+      email con tu nueva contraseña.
+      <br />
+      Recuerda que siempre puedes cambiarla dentro del menú de edición.
+    </p>
+
+    <form class="form" align="center" @submit.prevent="sendEmail">
+       <FormInput
+        v-model="email"
+        required
+        type="email"
+        label-text="Email"
+        @input="email = $event"
+      />
+
+      <p v-if="error" class="error">
+        {{ error }}
+      </p>
+
+      <SubmitButton :text="sending ? `Enviando...` : `Enviar`" image-url="" :disabled="sending" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'main',
+    })
+  },
+  data() {
+    return {
+      email: '',
+      error: '',
+      sending: false,
+      active: false,
+    }
+  },
+  methods: {
+    async sendEmail() {
+      this.sending = true
+      this.error = null
+      const config = useRuntimeConfig()
+      try {
+        await $fetch('/forgotten_password/', {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: { email: this.email },
+        })
+        this.active = true
+      } catch (err) {
+        this.error = 'Error al enviar el email. Por favor, inténtalo de nuevo.'
+        console.error('Error al enviar el email:', err)
+      } 
+      this.sending = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container-fluid {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 40px;
+}
+.help {
+  color: $color-navy;
+}
+.error {
+  color: $color-error;
+}
+</style>