wip migration

pages/login/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="container-fluid">
+    <div class="row">
+      <FormHeader title="Login" class="col-12" />
+    </div>
+
+    <form class="form" align="center" @submit.prevent="userLogin">
+      <FormInput 
+        v-model="loginData.email" 
+        required 
+        type="text" 
+        label-text="Email"
+        @input="loginData.email = $event" />
+
+      <FormInput
+        v-model="loginData.password"
+        type="password"
+        label-text="Contraseña"
+        required
+        @input="loginData.password = $event"
+      />
+
+      <p v-if="error" class="error">
+        {{ error }}
+      </p>
+
+      <small class="help" align="center">
+        <NuxtLink to="/login/restablecer"
+          >¿No recuerdas tu contraseña?</NuxtLink
+        >
+      </small>
+      <SubmitButton 
+        text="Aceptar" 
+        image-url="" />
+    </form>
+    <!-- Descomentar cuando esté la funcionalidad completa -->
+    <!-- <div class="row">
+      <div class="other-sign-in col-12" align="center">
+        <GoogleSignIn />
+        <FacebookSignIn />
+      </div>
+    </div> -->
+
+    <p class="help" align="center">
+      *Si no estás registrado puedes registrarte en este
+      <NuxtLink to="/registro"><b>enlace</b></NuxtLink
+      >.
+    </p>
+
+    <div class="row">
+      <BannerCoop />
+    </div>
+  </div>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+import { mapActions } from 'pinia'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'main',
+    })
+    const authStore = useAuthStore()
+    return { authStore }
+  },
+  data() {
+    return {
+      loginData: {
+        email: '',
+        password: '',
+      },
+      error: '',
+    }
+  },
+  methods: {
+    ...mapActions(useAuthStore, ['login', 'setUser']),
+    async userLogin() {
+      this.error = ''
+      try {
+        await this.login(this.loginData.email, this.loginData.password)
+        await this.setUser()
+        this.$router.push('/')
+      } catch (err) {
+        if (err.status === 400 || err.status === 401) {
+          this.error =
+            'Los datos de acceso no son correctos o no se ha activado su cuenta.'
+        }
+      }
+    },
+  },
+}
+</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;
+}
+
+.other-sign-in {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.error {
+  color: $color-error;
+}
+</style>