diff --git a/resources/js/components/AppLogin.vue b/resources/js/components/AppLogin.vue
new file mode 100644
index 0000000..9011697
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/LoginInput.vue b/resources/js/components/login/LoginInput.vue
new file mode 100644
index 0000000..04584a8
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/input/BarrioLogin.vue b/resources/js/components/login/input/BarrioLogin.vue
new file mode 100644
index 0000000..4ca6e7b
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/input/PasswordInput.vue b/resources/js/components/login/input/PasswordInput.vue
new file mode 100644
index 0000000..ba3b2b5
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/input/UserLogin.vue b/resources/js/components/login/input/UserLogin.vue
new file mode 100644
index 0000000..9d8d7b6
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/input/barrio/BarrioSelect.vue b/resources/js/components/login/input/barrio/BarrioSelect.vue
new file mode 100644
index 0000000..f60e25d
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/input/barrio/RegionSelect.vue b/resources/js/components/login/input/barrio/RegionSelect.vue
new file mode 100644
index 0000000..8fc2911
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/login/input/user/UserInput.vue b/resources/js/components/login/input/user/UserInput.vue
new file mode 100644
index 0000000..e9a666d
--- /dev/null
+++ b/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>