kit-eco.social/consumocuidado
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login y restablecer pages

Browse Source
This commit is contained in:
María
2025-09-10 14:13:41 +02:00
parent 5c83090685
commit b6358f30b9
12 changed files with 119 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BannerCoop.vue
View File

@@ -23,7 +23,7 @@
/> />
<span>Saber más</span> <span>Saber más</span>
</NuxtLink> </NuxtLink>
<NuxtLink class="col-2 link fill-div" to="/registro/cooperativa"> <NuxtLink class="col-2 link fill-div" to="/registro/productora">
<img <img
class="img-form" class="img-form"
src="@/assets/img/latienda-formulario.svg" src="@/assets/img/latienda-formulario.svg"

27
components/FormHeader.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<div class="header"> <div class="header">
<h1 class="title">{{ title }}</h1> <h2 class="title">{{ title }}</h2>
<img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" class="" /> <p v-html="subtitle" class="subtitle"></p>
<div class="title-lines"></div>
</div> </div>
</template> </template>
@@ -9,6 +10,7 @@
export default { export default {
props: { props: {
title: { type: String, default: '' }, title: { type: String, default: '' },
subtitle: { type: String, default: '' },
}, },
} }
</script> </script>
@@ -18,16 +20,27 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 40px; gap: 1rem;
color: $color-primary;
.title { .title {
font-size: $xl; font-size: $h2;
color: $color-navy; color: $color-primary;
margin-bottom: 10px; margin-bottom: 10px;
} }
img { .subtitle {
width: 40px; 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> </style>

2
components/FormInput.vue
View File

@@ -82,7 +82,7 @@ input {
label { label {
text-align: left; text-align: left;
color: $color-navy; color: $color-primary;
font-weight: $bold; font-weight: $bold;
font-size: $xs; font-size: $xs;
display: block; display: block;

16
components/NavBar.vue
View File

@@ -63,6 +63,7 @@
src="@/assets/img/circle-user-round.svg" src="@/assets/img/circle-user-round.svg"
alt="latienda.coop" alt="latienda.coop"
/> />
<p class="nav-access">Acceso entidades</p>
</div> </div>
</NuxtLink> </NuxtLink>
</div> </div>
@@ -221,4 +222,19 @@ nav {
display: none; 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> </style>

6
components/NavBarEditar.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="navsearch_container container-fluid"> <div class="navsearch_container container-fluid">
<NuxtLink to="/editar/perfil">Mi perfil</NuxtLink> <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
<NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa" <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productora"
>Cooperativa</NuxtLink >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" <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productos"
>Productos</NuxtLink >Productos</NuxtLink
> >

36
components/NavMenu.vue
View File

@@ -19,46 +19,32 @@
<ul class="section-list"> <ul class="section-list">
<NuxtLink to="/"> <NuxtLink to="/">
<li class="section" @click="isMenuOpen = !isMenuOpen"> <li class="section" @click="isMenuOpen = !isMenuOpen">
<img
class="section-img"
src="@/assets/img/latienda-ubicacion.svg"
alt=""
/>
<span class="section-text">Inicio</span> <span class="section-text">Inicio</span>
</li> </li>
</NuxtLink> </NuxtLink>
<NuxtLink to="/catalogo">
<li class="section" @click="isMenuOpen = !isMenuOpen">
<span class="section-text">Catálogo</span>
</li>
</NuxtLink>
<NuxtLink to="/productoras"> <NuxtLink to="/productoras">
<li class="section" @click="isMenuOpen = !isMenuOpen"> <li class="section" @click="isMenuOpen = !isMenuOpen">
<img
class="section-img"
src="@/assets/img/latienda-tienda-nav.svg"
alt=""
/>
<span class="section-text">Productoras</span> <span class="section-text">Productoras</span>
</li> </li>
</NuxtLink> </NuxtLink>
<!-- TODO: cambiar link --> <!-- TODO: cambiar link -->
<NuxtLink to="/page/info"> <NuxtLink to="/page/info">
<li class="section" @click="isMenuOpen = !isMenuOpen"> <li class="section" @click="isMenuOpen = !isMenuOpen">
<img
class="section-img"
src="@/assets/img/latienda-bag.svg"
alt=""
/>
<span class="section-text">Únete</span> <span class="section-text">Únete</span>
</li> </li>
</NuxtLink> </NuxtLink>
<NuxtLink to="https://www.kit-eco.social/es"> <NuxtLink to="https://www.kit-eco.social/es">
<li class="section" @click="isMenuOpen = !isMenuOpen"> <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> <span class="section-text">kit-eco.social</span>
</li> </li>
</NuxtLink> </NuxtLink>
<li class="section" @click="isMenuOpen = !isMenuOpen"> <!-- <li class="section" @click="isMenuOpen = !isMenuOpen">
<a href="mailto:info@latienda.coop"> <a href="mailto:info@latienda.coop">
<img <img
class="section-img" class="section-img"
@@ -67,7 +53,7 @@
/> />
<span class="section-text">Contacto</span> <span class="section-text">Contacto</span>
</a> </a>
</li> </li> -->
</ul> </ul>
</nav> </nav>
<ul class="login-list"> <ul class="login-list">
@@ -75,10 +61,10 @@
<li class="section" @click="isMenuOpen = !isMenuOpen"> <li class="section" @click="isMenuOpen = !isMenuOpen">
<img <img
class="section-img" class="section-img"
src="@/assets/img/latienda-lock.svg" src="@/assets/img/circle-user-round.svg"
alt="" alt=""
/> />
<span class="section-text">Acceder</span> <span class="section-text">Acceso entidades</span>
</li> </li>
</NuxtLink> </NuxtLink>
<NuxtLink v-if="isManager" to="/editar/perfil"> <NuxtLink v-if="isManager" to="/editar/perfil">
@@ -91,7 +77,7 @@
<span class="section-text">Perfil</span> <span class="section-text">Perfil</span>
</li> </li>
</NuxtLink> </NuxtLink>
<NuxtLink v-if="isManager" to="/editar/cooperativa"> <NuxtLink v-if="isManager" to="/editar/productora">
<li class="section" @click="isMenuOpen = !isMenuOpen"> <li class="section" @click="isMenuOpen = !isMenuOpen">
<span class="section-text login">Cooperativa</span> <span class="section-text login">Cooperativa</span>
</li> </li>

2
components/ProductCard.vue
View File

@@ -2,7 +2,7 @@
<div class="c-card"> <div class="c-card">
<div class="image-container"> <div class="image-container">
<img v-if="product.image" class="image" :src="product.image" alt="" /> <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>
<div class="details-container"> <div class="details-container">
<p>{{ product.name }}</p> <p>{{ product.name }}</p>

18
components/SubmitButton.vue
View File

@@ -22,12 +22,18 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.submit-btn { .submit-btn {
background-color: $color-orange; background: $color-button;
color: $color-light; color: #fff;
border: none; padding: 0.75rem 1.5rem;
border-radius: 5px; border: 1px solid transparent;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.2s ease;
text-transform: uppercase; text-transform: uppercase;
padding: 15px 20px; &:hover {
margin-top: 15px; background: white;
color: $color-button;
border: 1px solid $color-button;
}
} }
</style> </style>

38
pages/login/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <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> </div>
<form class="form" align="center" @submit.prevent="userLogin"> <form class="form" align="center" @submit.prevent="userLogin">
@@ -42,14 +42,11 @@
</div> --> </div> -->
<p class="help" align="center"> <p class="help" align="center">
*Si no estás registrado puedes registrarte en este *¿Todavía no formas parte de Consumo Cuidado?
<NuxtLink to="/registro"><b>enlace</b></NuxtLink <NuxtLink to="/registro"><b>Únete</b></NuxtLink
>. >.
</p> </p>
<div class="row">
<BannerCoop />
</div>
</div> </div>
</template> </template>
@@ -58,9 +55,9 @@ import { useAuthStore } from '@/stores/auth'
import { mapActions } from 'pinia' import { mapActions } from 'pinia'
export default { export default {
setup() { setup() {
definePageMeta({ // definePageMeta({
layout: 'main', // layout: 'main',
}) // })
const authStore = useAuthStore() const authStore = useAuthStore()
return { authStore } return { authStore }
}, },
@@ -96,6 +93,16 @@ export default {
.container-fluid { .container-fluid {
margin-top: 5rem; margin-top: 5rem;
margin-bottom: 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 { @include mobile {
margin-top: 7rem; margin-top: 7rem;
@@ -107,10 +114,21 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%;
gap: 1rem;
} }
.help { .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 { .other-sign-in {

34
pages/login/restablecer.vue
View File

@@ -8,16 +8,13 @@
ok-variant="success"> Email enviado, revisa tu bandeja de entrada. </BModal> ok-variant="success"> Email enviado, revisa tu bandeja de entrada. </BModal>
<div class="row"> <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> </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"> <form class="form" align="center" @submit.prevent="sendEmail">
<FormInput <FormInput
v-model="email" v-model="email"
@@ -38,11 +35,11 @@
<script> <script>
export default { export default {
setup() { // setup() {
definePageMeta({ // definePageMeta({
layout: 'main', // layout: 'main',
}) // })
}, // },
data() { data() {
return { return {
email: '', email: '',
@@ -77,6 +74,16 @@ export default {
.container-fluid { .container-fluid {
margin-top: 5rem; margin-top: 5rem;
margin-bottom: 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 { @include mobile {
margin-top: 7rem; margin-top: 7rem;
@@ -88,6 +95,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%;
} }
.help { .help {
color: $color-navy; color: $color-navy;

6
pages/productoras/[id].vue
View File

@@ -117,7 +117,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="c-catalogo"> <div v-if="products && products.length" class="c-catalogo">
<div class="title-container"> <div class="title-container">
<div class="title-lines"></div> <div class="title-lines"></div>
<h5 class="items-title">Nuestro catálogo</h5> <h5 class="items-title">Nuestro catálogo</h5>
@@ -130,15 +130,11 @@
</div> </div>
<div class="c-pagination"> <div class="c-pagination">
<BPagination <BPagination
v-if="products"
v-model="currentPage" v-model="currentPage"
:v-if="products" :v-if="products"
:total-rows="rows" :total-rows="rows"
:per-page="perPage" :per-page="perPage"
/> />
<div v-if="!products">
No se encontraron productos para esta productora
</div>
</div> </div>
</div> </div>
</div> </div>

5
pages/productoras/index.vue
View File

@@ -5,7 +5,7 @@
title="Encuentra tu entidad aliada" title="Encuentra tu entidad aliada"
subtitle="Colabora, compra o aprende con la economía social" 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"> <section class="cards-grid">
<article v-for="(coop, index) in companyList" :key="index"> <article v-for="(coop, index) in companyList" :key="index">
<CoopCard :coop="coop" /> <CoopCard :coop="coop" />
@@ -18,6 +18,9 @@
:per-page="perPage" :per-page="perPage"
/> />
</div> </div>
<div v-else class="cards-section">
<p>No se han encontrado resultados</p>
</div>
<TextWithImageAndButton /> <TextWithImageAndButton />
</div> </div>
</div> </div>