diff --git a/resources/js/components/comunes/Login.vue b/resources/js/components/comunes/Login.vue
new file mode 100644
index 0000000..9da6903
--- /dev/null
+++ b/resources/js/components/comunes/Login.vue
@@ -0,0 +1,57 @@
+<template>
+    <div v-if="grupo_de_compra_elegido !== null" class="block">
+        <div class="field">
+            <label class="label"
+                   :class="admin ? '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="admin ? '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',["admin","mensajes"]),
+    },
+    methods: {
+        togglePassword() {
+            if (this.passwordVisible) this.passwordType = "password";
+            else this.passwordType = "text"
+            this.passwordVisible = !this.passwordVisible
+        }
+    }
+}
+</script>
+
+
+<style>
+.help {
+    font-size: 1rem;
+}
+</style>