resources/js/components/AppLogin.vue

@@ -2,11 +2,10 @@
 import LoginInput from "./login/LoginInput.vue";
 import LoginLoginTitulos from "./login/LoginTitulos.vue";
 import { mapGetters } from "vuex";
-import LoginDropdown from "./login/LoginDropdown.vue";
 
 export default {
     name: 'LoginForm',
-    components: { LoginDropdown, LoginTitulos: LoginLoginTitulos, LoginInput },
+    components: { LoginTitulos: LoginLoginTitulos, LoginInput },
     computed: {
         ...mapGetters("login", ["estilos"])
     }
@@ -16,7 +15,6 @@ export default {
 <template>
 <div id="login-form" :class="estilos.fondo">
     <section class="section">
-        <login-dropdown class="is-hidden-tablet"></login-dropdown>
         <login-titulos></login-titulos>
         <login-input></login-input>
     </section>

resources/js/components/admin/BotonLogin.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="buttons is-right">
+        <a class="button is-danger is-light is-small" href="/admin">
+            <span class="icon">
+                <i class="fa fa-solid fa-user-check"></i>
+            </span>
+            <span>
+                Admin
+            </span>
+        </a>
+    </div>
+</template>

resources/js/components/admin/DropdownDescargar.vue

@@ -41,6 +41,7 @@ export default {
         ...mapState('admin',["grupo_de_compra_id"]),
         ...mapGetters('admin',["hayAprobados"]),
     },
+
 }
 </script>
 

resources/js/components/compras/Login.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="block">
+        <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>
+        <div class="field">
+            <label class="label">Contraseña</label>
+            <div class="field has-addons">
+				<div class="control">
+					<input required class="input" :type="this.passwordType" name="password"  placeholder="Contraseña">
+				</div>
+				<div class="control">
+					<a class="button is-dark" @click="togglePassword">
+						{{ (passwordVisible ? 'Ocultar' : 'Mostrar') + ' contraseña'}}
+					</a>
+				</div>
+			</div>
+        </div>
+        <div class="field">
+            <div class="control">
+                <input type="submit" class="button is-dark" value="Ingresar"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "LoginAdmin",
+        data() {
+            return {
+				passwordVisible: false,
+				passwordType: "password",
+            }
+        },
+		methods: {
+			togglePassword() {
+				if (this.passwordVisible) this.passwordType = "password";
+				else this.passwordType = "text"
+				this.passwordVisible = !this.passwordVisible
+			}
+		}
+    }
+</script>
+
+<style>
+</style>

resources/js/components/comunes/BarrioSelect.vue

@@ -0,0 +1,46 @@
+<template>
+	<div v-if="region_elegida" class="block">
+		<div class="field">
+			<label class="label" :class="adminUrl ? 'has-text-white' : ''">
+                Seleccioná tu barrio o grupo de compra
+            </label>
+			<div class="control">
+				<div class="select">
+		        	<select @change="selectGrupoDeCompra({ grupo_de_compra: barrio })" v-model="barrio">
+				    	<option :disabled="grupo_de_compra_elegido !== null" 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>
+	</div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
+export default {
+    name: 'BarrioSelect',
+    async mounted() {
+        await this.getRegiones();
+    },
+    methods: {
+        ...mapMutations('login',["selectGrupoDeCompra"]),
+        ...mapActions('login',["getRegiones", "getGruposDeCompra"]),
+    },
+    computed: {
+        ...mapState('login',["region_elegida","grupos_de_compra","grupo_de_compra_elegido"]),
+        ...mapGetters('login',["adminUrl"]),
+    },
+    data() {
+        return {
+            barrio: null,
+        };
+    },
+}
+</script>

resources/js/components/comunes/Login.vue

@@ -0,0 +1,57 @@
+<template>
+    <div v-if="grupo_de_compra_elegido" class="block">
+        <div class="field">
+            <label class="label"
+                   :class="adminUrl ? 'has-text-white' : ''">{{ mensajes.mensaje }}</label>
+            <div class="field has-addons">
+                <div class="control">
+                    <input required class="input" :type="this.passwordType" name="password"  :placeholder="mensajes.mensaje">
+                </div>
+                <div class="control">
+                    <a class="button is-warning" @click="togglePassword">
+                        {{ (passwordVisible ? 'Ocultar' : 'Mostrar') + ' contraseña'}}
+                    </a>
+                </div>
+            </div>
+            <p class="help"
+               :class="adminUrl ? 'has-text-white' : ''">{{ mensajes.ayuda }}</p>
+        </div>
+        <div class="field">
+            <div class="control">
+                <input type="submit" class="button is-warning" value="Log in"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+export default {
+    name: 'Login',
+    data() {
+        return {
+            passwordVisible: false,
+            passwordType: "password",
+        }
+    },
+    computed: {
+        ...mapState('login',["grupo_de_compra_elegido"]),
+        ...mapGetters('login',["adminUrl","mensajes"]),
+    },
+    methods: {
+        togglePassword() {
+            if (this.passwordVisible) this.passwordType = "password";
+            else this.passwordType = "text"
+            this.passwordVisible = !this.passwordVisible
+        }
+    }
+}
+</script>
+
+
+<style>
+.help {
+    font-size: 1rem;
+}
+</style>

resources/js/components/comunes/LoginForm.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="block">
+        <barrio-select></barrio-select>
+        <login></login>
+        <input readonly v-model="nombre" type="hidden" name="name">
+    </div>
+</template>
+
+<script>
+import {mapActions, mapGetters, mapState} from "vuex";
+import BarrioSelect from "./BarrioSelect.vue";
+import Login from "./Login.vue";
+
+export default {
+    components: {
+        BarrioSelect,
+        Login,
+    },
+    async mounted() {
+        await this.getRegiones();
+    },
+    computed: {
+        ...mapGetters('login',["adminUrl"]),
+        ...mapState('login',["grupo_de_compra_elegido"]),
+        nombre() {
+            return `${this.grupo_de_compra_elegido}${this.adminUrl ? '_admin' : ''}`;
+        }
+    },
+    methods: {
+        ...mapActions('login',["getRegiones"]),
+    },
+}
+</script>
+
+<style scoped></style>

resources/js/components/comunes/RegionSelect.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="block">
+		<div class="field">
+		    <label class="label" :class="adminUrl ? 'has-text-white' : ''">
+                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>
+	</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',["adminUrl"]),
+    }
+}
+</script>

resources/js/components/login/LoginDropdown.vue

@@ -1,48 +0,0 @@
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-    name: "LoginDropdown",
-    computed: {
-        ...mapGetters("login", ["opcionesLogin", "estilos"])
-    },
-    data() {
-        return {
-            dropdownActivo: false
-        };
-    },
-}
-</script>
-
-<template>
-    <div class="buttons is-right">
-        <div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
-            <div class="dropdown-trigger">
-                <button class="button"
-                        aria-haspopup="true"
-                        aria-controls="dropdown-menu"
-                        type="button"
-                        @click="dropdownActivo = !dropdownActivo">
-                    <span class="icon is-small">
-                        <i class="fa fa-solid fa-user-check"></i>
-                    </span>
-                    <span>Cambiar login</span>
-                    <span class="icon is-small">
-                        <i class="fas fa-angle-down" aria-hidden="true"></i>
-                    </span>
-                </button>
-            </div>
-            <div class="dropdown-menu" role="menu">
-                <div class="dropdown-content">
-                    <a class="dropdown-item" v-for="opcion in opcionesLogin" :href="opcion.href">
-                        {{ opcion.nombre }}
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-
-</style>

resources/js/components/login/LoginTitulos.vue

@@ -1,10 +1,8 @@
 <script>
 import { mapGetters } from "vuex";
-import LoginDropdown from "./LoginDropdown.vue";
 
 export default {
     name: "LoginTitulos",
-    components: { LoginDropdown },
     computed: {
         ...mapGetters("login", ["textos", "estilos"]),
     }
@@ -12,8 +10,6 @@ export default {
 </script>
 
 <template>
-    <div class="columns">
-        <div class="column">
     <div class="block">
         <h1 class="title" :class="estilos.texto">{{ textos.titulo }}</h1>
         <p class="subtitle" :class="estilos.texto">
@@ -21,11 +17,6 @@ export default {
             <strong :class="estilos.texto">Mercado Popular de Subistencia</strong>
         </p>
     </div>
-        </div>
-        <div class="column is-2 is-hidden-mobile">
-            <login-dropdown></login-dropdown>
-        </div>
-    </div>
 </template>
 
 <style scoped>

resources/js/store/modules/login.js

@@ -40,6 +40,15 @@ const actions = {
 };
 
 const getters = {
+    adminUrl() {
+        return window.location.pathname.startsWith('/admin');
+    },
+    mensajes() {
+        return {
+            mensaje: `Contraseña de ${getters.adminUrl() ? 'administración ' : ''}del barrio`,
+            ayuda: `Si no la sabés, consultá a ${getters.adminUrl() ? 'la comisión informática ' : 'tus compañerxs'}.`
+        };
+    },
     urlRol() {
         let split = window.location.pathname
             .replace('login', '')
@@ -47,6 +56,19 @@ const getters = {
             .filter(x => x.length);
         return split[0] ?? 'pedido';
     },
+    titulos() {
+        let rol = getters.urlRol();
+        switch (rol) {
+            case 'admin':
+                return { titulo: "Administración de Pedidos MPS", subtitlo: "administración de pedidos" };
+            case 'compras':
+                return { titulo: "Comisiones MPS", subtitlo: "página de comisiones" };
+            case 'pedido':
+                return { titulo: "Pedidos MPS", subtitlo: "aplicación de pedidos" };
+            default:
+                throw new Error("Url inválida");
+        }
+    },
     textos() {
         let rol = getters.urlRol();
         switch (rol) {
@@ -103,28 +125,6 @@ const getters = {
                 throw new Error("Url inválida");
         }
     },
-    opcionesLogin() {
-        let rol = getters.urlRol();
-        switch (rol) {
-            case 'admin':
-                return [
-                    { nombre: "Pedidos", href: "/" },
-                    { nombre: "Compras", href: "/compras" }
-                ];
-            case 'compras':
-                return [
-                    { nombre: "Pedidos", href: "/" },
-                    { nombre: "Administración", href: "/admin" }
-                ];
-            case 'pedido':
-                return [
-                    { nombre: "Administración", href: "/admin" },
-                    { nombre: "Compras", href: "/compras" }
-                ];
-            default:
-                throw new Error("Url inválida");
-        }
-    },
     nombre() {
         return `${state.grupo_de_compra_elegido}${ getters.urlRol() === 'admin' ? '_admin' : ''}`;
     }