nathalie/pedi2
3
3
Fork 1
Code Issues Pull requests 2 Projects Releases Wiki Activity

Componente genérico para login

Browse source
This commit is contained in:
Alejandro Tasistro 2025-06-13 19:28:02 -03:00
parent 3cb27c5c30
commit b72fc57b8d
8 changed files with 270 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/js/components/AppLogin.vue Normal file
View file

@ -0,0 +1,26 @@
<script>
import LoginInput from "./login/LoginInput.vue";
import LoginLoginTitulos from "./login/LoginTitulos.vue";
import { mapGetters } from "vuex";
export default {
name: 'LoginForm',
components: { LoginTitulos: LoginLoginTitulos, LoginInput },
computed: {
...mapGetters("login", ["estilos"])
}
}
</script>
<template>
<div id="login-form" :class="estilos.fondo">
<section class="section">
<login-titulos></login-titulos>
<login-input></login-input>
</section>
</div>
</template>
<style scoped>
</style>

24
resources/js/components/login/LoginInput.vue Normal file
View file

@ -0,0 +1,24 @@
<script>
import { mapGetters } from "vuex";
import BarrioLogin from "./input/BarrioLogin.vue";
import UserLogin from "./input/UserLogin.vue";
export default {
name: "LoginInput",
components: { UserLogin, BarrioLogin },
computed: {
...mapGetters("login", ["urlRol"]),
},
}
</script>
<template>
<div>
<user-login v-if="urlRol === 'compras'"></user-login>
<barrio-login v-else></barrio-login>
</div>
</template>
<style scoped>
</style>

26
resources/js/components/login/input/BarrioLogin.vue Normal file
View file

@ -0,0 +1,26 @@
<script>
import { defineComponent } from "vue";
import RegionSelect from "./barrio/RegionSelect.vue";
import BarrioSelect from "./barrio/BarrioSelect.vue";
import { mapActions } from "vuex";
export default defineComponent({
components: { BarrioSelect, RegionSelect },
methods: {
...mapActions("login", ["getRegiones"]),
},
async mounted() {
await this.getRegiones();
},
})
</script>
<template>
<div class="block">
<region-select></region-select>
<barrio-select></barrio-select>
</div>
</template>
<style scoped>
</style>

65
resources/js/components/login/input/PasswordInput.vue Normal file
View file

@ -0,0 +1,65 @@
<template>
<div class="block">
<div class="field">
<label class="label" :class="estilos.texto">
{{ textos.password }}
</label>
<div class="field has-addons">
<div class="control">
<input required
class="input"
:type="passwordType"
name="password"
:placeholder="textos.password">
</div>
<div class="control">
<a class="button" :class="estilos.botones" @click="togglePassword">
{{ textoBotonPassword }}
</a>
</div>
</div>
<p class="help"
:class="estilos.texto">
{{ textos.ayuda }}
</p>
</div>
<div class="field">
<div class="control">
<input type="submit" class="button" :class="estilos.botones" value="Log in"/>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: 'PasswordInput',
data() {
return {
passwordVisible: false,
passwordType: "password",
}
},
computed: {
...mapGetters("login", ["textos", "estilos"]),
textoBotonPassword() {
return `${this.passwordVisible ? "Ocultar" : "Mostrar"} contraseña`;
}
},
methods: {
togglePassword() {
this.passwordType = this.passwordVisible ? "password" : "text";
this.passwordVisible = !this.passwordVisible;
}
}
}
</script>
<style>
.help {
font-size: 1rem;
}
</style>

19
resources/js/components/login/input/UserLogin.vue Normal file
View file

@ -0,0 +1,19 @@
<script>
import { defineComponent } from "vue";
import PasswordInput from "./PasswordInput.vue";
import UserInput from "./user/UserInput.vue";
export default defineComponent({
components: { UserInput, PasswordInput }
})
</script>
<template>
<div class="block">
<user-input></user-input>
<password-input></password-input>
</div>
</template>
<style scoped>
</style>

47
resources/js/components/login/input/barrio/BarrioSelect.vue Normal file
View file

@ -0,0 +1,47 @@
<template>
<div v-if="region_elegida" class="block">
<div class="field">
<label class="label" :class="estilos.texto">
Seleccioná tu barrio o grupo de compra
</label>
<div class="control">
<div class="select">
<select v-model="barrio"
@change="selectGrupoDeCompra({ grupo_de_compra: barrio })">
<option :disabled="grupo_de_compra_elegido" value=null>
Seleccionar
</option>
<option v-for="(gdc, index) in grupos_de_compra"
:key="index"
v-text="gdc.nombre"
:name="gdc.nombre">
</option>
</select>
</div>
</div>
</div>
<password-input v-if="grupo_de_compra_elegido"></password-input>
<input readonly v-model="nombre" type="hidden" name="name">
</div>
</template>
<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import PasswordInput from "../PasswordInput.vue";
export default {
name: 'BarrioSelect',
components: { PasswordInput },
methods: {
...mapMutations("login", ["selectGrupoDeCompra"]),
},
computed: {
...mapState("login", ["region_elegida", "grupos_de_compra", "grupo_de_compra_elegido"]),
...mapGetters("login", ["urlRol", "estilos", "nombre"]),
},
data() {
return {
barrio: null,
};
},
}
</script>

43
resources/js/components/login/input/barrio/RegionSelect.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div class="field">
<label class="label" :class="estilos.texto">
Seleccioná tu región
</label>
<div class="control">
<div class="select">
<select @change="selectRegion({ region })" v-model="region">
<option :disabled="region_elegida" value=null>
Seleccionar
</option>
<option v-for="(region, index) in regiones"
:key="index"
v-text="region"
:name="region">
</option>
</select>
</div>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters, mapState} from "vuex";
export default {
name: 'RegionSelect',
async mounted() {
await this.getRegiones();
},
data() {
return {
region: null,
};
},
methods: {
...mapActions("login", ["getRegiones", "selectRegion"])
},
computed: {
...mapState("login", ["regiones", "region_elegida"]),
...mapGetters("login", ["estilos"]),
}
}
</script>

20
resources/js/components/login/input/user/UserInput.vue Normal file
View file

@ -0,0 +1,20 @@
<script>
export default {
name: "UserInput",
}
</script>
<template>
<div class="field">
<label class="label">Usuario</label>
<div class="field">
<div class="control">
<input required class="input" type="text" name="name" placeholder="Usuario">
</div>
</div>
</div>
</template>
<style scoped>
</style>