login y restablecer pages

2025-09-10 14:13:41 +02:00
parent 5c83090685
commit b6358f30b9
12 changed files with 119 additions and 73 deletions
--- a/components/BannerCoop.vue
+++ b/components/BannerCoop.vue
@@ -23,7 +23,7 @@
        />
        <span>Saber más</span>
      </NuxtLink>
-      <NuxtLink class="col-2 link fill-div" to="/registro/cooperativa">
+      <NuxtLink class="col-2 link fill-div" to="/registro/productora">
        <img
          class="img-form"
          src="@/assets/img/latienda-formulario.svg"
--- a/components/FormHeader.vue
+++ b/components/FormHeader.vue
@@ -1,7 +1,8 @@
 <template>
  <div class="header">
-    <h1 class="title">{{ title }}</h1>
-    <img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" class="" />
+    <h2 class="title">{{ title }}</h2>
+    <p v-html="subtitle" class="subtitle"></p>
+    <div class="title-lines"></div>
  </div>
 </template>

@@ -9,6 +10,7 @@
 export default {
  props: {
    title: { type: String, default: '' },
+    subtitle: { type: String, default: '' },
  },
 }
 </script>
@@ -18,16 +20,27 @@ export default {
  display: flex;
  flex-direction: column;
  align-items: center;
-  margin-bottom: 40px;
+  gap: 1rem;
+  color: $color-primary;

  .title {
-    font-size: $xl;
-    color: $color-navy;
+    font-size: $h2;
+    color: $color-primary;
    margin-bottom: 10px;
  }

-  img {
-    width: 40px;
+  .subtitle {
+    font-size: $l;
+    color: $color-primary;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .title-lines {
+    width: 34px;
+    height: 2px;
+    background: $color-consumo-base;
+    margin: 0 8px;
  }
 }
 </style>
--- a/components/FormInput.vue
+++ b/components/FormInput.vue
@@ -82,7 +82,7 @@ input {

 label {
  text-align: left;
-  color: $color-navy;
+  color: $color-primary;
  font-weight: $bold;
  font-size: $xs;
  display: block;
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -63,6 +63,7 @@
                src="@/assets/img/circle-user-round.svg"
                alt="latienda.coop"
              />
+              <p class="nav-access">Acceso entidades</p>
            </div>
          </NuxtLink>
        </div>
@@ -221,4 +222,19 @@ nav {
    display: none;
  }
 }
+
+.nav-access {
+  font-size: $s;
+  margin: 0 0.1rem;
+  font-weight: $medium;
+  text-decoration: none;
+  color: $color-primary;
+  cursor: pointer;
+  :hover {
+    color: $color-consumo-base;
+  }
+  @include mobile {
+    display: none;
+  }
+}
 </style>
--- a/components/NavBarEditar.vue
+++ b/components/NavBarEditar.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="navsearch_container container-fluid">
    <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
-    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa"
-      >Cooperativa</NuxtLink
+    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productora"
+      >productora</NuxtLink
    >
-    <!-- <NuxtLink to="/editar/cooperativa/crear">Crear cooperativa</NuxtLink> -->
+    <!-- <NuxtLink to="/editar/productora/crear">Crear productora</NuxtLink> -->
    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productos"
      >Productos</NuxtLink
    >
--- a/components/NavMenu.vue
+++ b/components/NavMenu.vue
@@ -19,46 +19,32 @@
            <ul class="section-list">
              <NuxtLink to="/">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-ubicacion.svg"
-                    alt=""
-                  />
+
                  <span class="section-text">Inicio</span>
                </li>
              </NuxtLink>
+              <NuxtLink to="/catalogo">
+                <li class="section" @click="isMenuOpen = !isMenuOpen">
+                  <span class="section-text">Catálogo</span>
+                </li>
+              </NuxtLink>
              <NuxtLink to="/productoras">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-tienda-nav.svg"
-                    alt=""
-                  />
                  <span class="section-text">Productoras</span>
                </li>
              </NuxtLink>
              <!-- TODO: cambiar link -->
              <NuxtLink to="/page/info">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-bag.svg"
-                    alt=""
-                  />
                  <span class="section-text">Únete</span>
                </li>
              </NuxtLink>
              <NuxtLink to="https://www.kit-eco.social/es">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-bag.svg"
-                    alt=""
-                  />
                  <span class="section-text">kit-eco.social</span>
                </li>
              </NuxtLink>
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
+              <!-- <li class="section" @click="isMenuOpen = !isMenuOpen">
                <a href="mailto:info@latienda.coop">
                  <img
                    class="section-img"
@@ -67,7 +53,7 @@
                  />
                  <span class="section-text">Contacto</span>
                </a>
-              </li>
+              </li> -->
            </ul>
          </nav>
          <ul class="login-list">
@@ -75,10 +61,10 @@
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <img
                  class="section-img"
-                  src="@/assets/img/latienda-lock.svg"
+                  src="@/assets/img/circle-user-round.svg"
                  alt=""
                />
-                <span class="section-text">Acceder</span>
+                <span class="section-text">Acceso entidades</span>
              </li>
            </NuxtLink>
            <NuxtLink v-if="isManager" to="/editar/perfil">
@@ -91,7 +77,7 @@
                <span class="section-text">Perfil</span>
              </li>
            </NuxtLink>
-            <NuxtLink v-if="isManager" to="/editar/cooperativa">
+            <NuxtLink v-if="isManager" to="/editar/productora">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <span class="section-text login">Cooperativa</span>
              </li>
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -2,7 +2,7 @@
  <div class="c-card">
    <div class="image-container">
      <img v-if="product.image" class="image" :src="product.image" alt="" />
-      <img v-else class="image" :src="`@/assets/img/consumo-default.svg`" alt="" />
+      <img v-else class="image" :src="`@/assets/img/consumo-default.png`" alt="" />
    </div>
    <div class="details-container">
      <p>{{ product.name }}</p>
--- a/components/SubmitButton.vue
+++ b/components/SubmitButton.vue
@@ -22,12 +22,18 @@ export default {

 <style lang="scss" scoped>
 .submit-btn {
-  background-color: $color-orange;
-  color: $color-light;
-  border: none;
-  border-radius: 5px;
+  background: $color-button;
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
  text-transform: uppercase;
-  padding: 15px 20px;
-  margin-top: 15px;
+  &:hover {
+    background: white;
+    color: $color-button;
+    border: 1px solid $color-button;
+  }
 }
 </style>
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="container-fluid">
    <div class="row">
-      <FormHeader title="Login" class="col-12" />
+      <FormHeader title="Login" subtitle="Crea el perfil de tu entidad y publica tus productos y servicios con valores" class="col-12" />
    </div>

    <form class="form" align="center" @submit.prevent="userLogin">
@@ -42,14 +42,11 @@
    </div> -->

    <p class="help" align="center">
-      *Si no estás registrado puedes registrarte en este
-      <NuxtLink to="/registro"><b>enlace</b></NuxtLink
+      *¿Todavía no formas parte de Consumo Cuidado?
+      <NuxtLink to="/registro"><b>Únete</b></NuxtLink
      >.
    </p>

-    <div class="row">
-      <BannerCoop />
-    </div>
  </div>
 </template>

@@ -58,9 +55,9 @@ import { useAuthStore } from '@/stores/auth'
 import { mapActions } from 'pinia'
 export default {
  setup() {
-    definePageMeta({
-      layout: 'main',
-    })
+//   definePageMeta({
+//     layout: 'main',
+//   })
    const authStore = useAuthStore()
    return { authStore }
  },
@@ -96,6 +93,16 @@ export default {
 .container-fluid {
  margin-top: 5rem;
  margin-bottom: 5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  gap: 3rem;
+  margin: 2rem 0 4rem;
+  color: $color-primary;

  @include mobile {
    margin-top: 7rem;
@@ -107,10 +114,21 @@ export default {
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
+  width: 100%;
+  gap: 1rem;
 }

 .help {
-  color: $color-navy;
+  color: $color-primary;
+  text-decoration: none;
+  b {
+    color: $color-button;
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+      color: blue
+    }
+  }
 }

 .other-sign-in {
--- a/pages/login/restablecer.vue
+++ b/pages/login/restablecer.vue
@@ -8,16 +8,13 @@
      ok-variant="success"> Email enviado, revisa tu bandeja de entrada. </BModal>

    <div class="row">
-      <FormHeader title="Restablecer Contraseña" class="col-12" />
+      <FormHeader 
+        title="Restablecer Contraseña" 
+        subtitle="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."
+        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"
@@ -38,11 +35,11 @@

 <script>
 export default {
-  setup() {
-    definePageMeta({
-      layout: 'main',
-    })
-  },
+  // setup() {
+  //   definePageMeta({
+  //     layout: 'main',
+  //   })
+  // },
  data() {
    return {
      email: '',
@@ -77,6 +74,16 @@ export default {
 .container-fluid {
  margin-top: 5rem;
  margin-bottom: 5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  gap: 3rem;
+  margin: 2rem 0 4rem;
+  color: $color-primary;

  @include mobile {
    margin-top: 7rem;
@@ -88,6 +95,7 @@ export default {
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
+  width: 100%;
 }
 .help {
  color: $color-navy;
--- a/pages/productoras/[id].vue
+++ b/pages/productoras/[id].vue
@@ -117,7 +117,7 @@
        </div>
      </div>
    </div>
-    <div class="c-catalogo">
+    <div v-if="products && products.length" class="c-catalogo">
      <div class="title-container">
        <div class="title-lines"></div>
        <h5 class="items-title">Nuestro catálogo</h5>
@@ -130,15 +130,11 @@
        </div>
        <div class="c-pagination">
          <BPagination 
-            v-if="products"
            v-model="currentPage"
            :v-if="products"
            :total-rows="rows"
            :per-page="perPage"
          />
-          <div v-if="!products">
-            No se encontraron productos para esta productora
-          </div>
        </div>
    </div>
  </div>
--- a/pages/productoras/index.vue
+++ b/pages/productoras/index.vue
@@ -5,7 +5,7 @@
        title="Encuentra tu entidad aliada"
        subtitle="Colabora, compra o aprende con la economía social"
      />
-      <div class="cards-section">
+      <div v-if="companyList && companyList.length" class="cards-section">
        <section  class="cards-grid">
          <article v-for="(coop, index) in companyList" :key="index">
            <CoopCard :coop="coop" />
@@ -18,6 +18,9 @@
          :per-page="perPage"
        />
      </div>
+      <div v-else class="cards-section">
+        <p>No se han encontrado resultados</p>
+      </div>
      <TextWithImageAndButton />
    </div>
  </div>