Eliminadas admin_login y compras_login, usando login genérico

app/Http/Controllers/AdminController.php

@@ -9,7 +9,7 @@ class AdminController extends Controller
 {
     public function show()
     {
-        return view('auth/admin_login');
+        return view('auth/login');
     }
 
     public function index() {

app/Http/Controllers/ComprasController.php

@@ -37,7 +37,7 @@ class ComprasController
 
     public function show()
     {
-        return view('auth/compras_login');
+        return view('auth/login');
     }
 
     public function cargarCanasta(Request $request): JsonResponse

resources/js/components/AppLogin.vue

@@ -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>

resources/js/components/login/LoginInput.vue

@@ -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>

resources/js/components/login/LoginTitulos.vue

@@ -0,0 +1,24 @@
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+    name: "LoginTitulos",
+    computed: {
+        ...mapGetters("login", ["textos", "estilos"]),
+    }
+};
+</script>
+
+<template>
+    <div class="block">
+        <h1 class="title" :class="estilos.texto">{{ textos.titulo }}</h1>
+        <p class="subtitle" :class="estilos.texto">
+            {{ `Bienvenidx a la  ${textos.subtitlo} del ` }}
+            <strong :class="estilos.texto">Mercado Popular de Subistencia</strong>
+        </p>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/components/login/Titulos.vue

@@ -1,27 +0,0 @@
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-    name:'LoginTitulos',
-    computed: {
-        ...mapGetters('login',["titulos", "urlRol"]),
-        whiteText() {
-            console.log(this.urlRol);
-            return this.urlRol === 'admin';
-        }
-    }
-};
-</script>
-
-<template>
-<div class="block">
-    <h1 class="title" :class="{'has-text-white': whiteText}">{{ titulos.titulo }}</h1>
-    <p class="subtitle" :class="{'has-text-white': whiteText}">
-        {{ `Bienvenidx a la  ${titulos.subtitlo} del ` }}<strong :class="{'has-text-white': whiteText}">Mercado Popular de Subistencia</strong>
-    </p>
-</div>
-</template>
-
-<style scoped>
-
-</style>

resources/js/components/login/input/BarrioLogin.vue

@@ -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>

resources/js/components/login/input/PasswordInput.vue

@@ -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>

resources/js/components/login/input/UserLogin.vue

@@ -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>

resources/js/components/login/input/barrio/BarrioSelect.vue

@@ -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>

resources/js/components/login/input/barrio/RegionSelect.vue

@@ -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>

resources/js/components/login/input/user/UserInput.vue

@@ -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>

resources/js/store/modules/login.js

@@ -69,7 +69,65 @@ const getters = {
                 throw new Error("Url inválida");
         }
     },
-
+    textos() {
+        let rol = getters.urlRol();
+        switch (rol) {
+            case 'admin':
+                return {
+                    titulo: "Administración de Pedidos MPS",
+                    subtitlo: "administración de pedidos",
+                    password: "Contraseña de administración del barrio",
+                    ayuda: "Si no la sabés, consultá a la comisión informática",
+                    label: "Seleccioná tu región"
+                };
+            case 'compras':
+                return {
+                    titulo: "Comisiones MPS",
+                    subtitlo: "página de comisiones",
+                    password: "Contraseña del barrio",
+                    ayuda: "Si no la sabés, consultá a tus compañerxs",
+                    label: "Usuario"
+                };
+            case 'pedido':
+                return {
+                    titulo: "Pedidos MPS",
+                    subtitlo: "aplicación de pedidos",
+                    password: "Contraseña",
+                    ayuda: "Si no la sabés, consultá a la comisión informática",
+                    label: "Seleccioná tu región"
+                };
+            default:
+                throw new Error("Url inválida");
+        }
+    },
+    estilos() {
+        let rol = getters.urlRol();
+        switch (rol) {
+            case 'admin':
+                return {
+                    fondo: "has-background-danger",
+                    texto: "has-text-white",
+                    botones: "is-warning",
+                };
+            case 'compras':
+                return {
+                    fondo: "has-background-warning",
+                    texto: "",
+                    botones: "is-dark"
+                };
+            case 'pedido':
+                return {
+                    fondo: "",
+                    texto: "",
+                    botones: "is-danger"
+                };
+            default:
+                throw new Error("Url inválida");
+        }
+    },
+    nombre() {
+        return `${state.grupo_de_compra_elegido}${ getters.urlRol() === 'admin' ? '_admin' : ''}`;
+    }
 };
 
 export default {

resources/sass/app.scss

@@ -10,6 +10,11 @@
 html, body {
     overflow-x: hidden;
     max-width: 100%;
+    height: 100%;
+}
+
+form, #root, #login-form {
+    height: 100%;
 }
 
 main.has-top-padding {

resources/views/auth/admin_login.blade.php

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html class="has-background-danger" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ config('app.name', 'Pedidos del MPS') }}</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
-    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-</head>
-<body>
-<section class="section">
-    <div id="root" class="container">
-        <login-titulos></login-titulos>
-        @error('name')
-        <div class="notification is-warning">
-            Contraseña incorrecta, intentalo nuevamente.
-        </div>
-        @enderror
-        <comunes-region-select></comunes-region-select>
-        <form method="post" action="/login">
-            @csrf
-            <comunes-login-form></comunes-login-form>
-        </form>
-    </div>
-</section>
-<script src="{{ mix('js/app.js') }}" defer></script>
-</body>
-</html>

resources/views/auth/compras_login.blade.php

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html class="has-background-warning" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>{{ config('app.name', 'Pedidos del MPS') }}</title>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-        <script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
-    </head>
-    <body>
-        <section class="section">
-        <div id="root" class="container">
-            <login-titulos></login-titulos>
-            @error('name')
-            <div class="notification is-danger">
-              Contraseña incorrecta, intentalo nuevamente.
-            </div>
-          @enderror
-          <form method="post" action="/login">
-            @csrf
-              <compras-login></compras-login>
-          </form>
-        </div>
-      </section>
-      <script src="{{ mix('js/app.js') }}" defer></script>
-    </body>
-</html>

resources/views/auth/login.blade.php

@@ -9,22 +9,12 @@
     <script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
 </head>
 <body>
-<section class="section">
+    <div id="root">
-    <div id="root" class="container">
-        <admin-boton-login></admin-boton-login>
-        <login-titulos></login-titulos>
-        @error('name')
-        <div class="notification is-danger">
-            Contraseña incorrecta, intentalo nuevamente.
-        </div>
-        @enderror
-        <comunes-region-select></comunes-region-select>
         <form method="post" action="/login">
             @csrf
-            <comunes-login-form></comunes-login-form>
+            <app-login></app-login>
         </form>
     </div>
-</section>
+    <script src="{{ mix('js/app.js') }}" defer></script>
-<script src="{{ mix('js/app.js') }}" defer></script>
 </body>
 </html>