diff --git a/nuxt.config.js b/nuxt.config.js
index ea3e28c..9d4ccd6 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -51,8 +51,8 @@ export default {
   build: {
   },
   env: {
-    api: 'http://localhost:3000'
-    //api: 'https://5b3a8798f24a.ngrok.io'
+    //api: 'http://localhost:3000'
+    api: 'https://b0666f5f5295.ngrok.io'
     //api: 'https//venus.acatlan.unam.mx/pruebas_pcpuma'
   }
 
diff --git a/pages/index.vue b/pages/index.vue
index 1e554f6..03b6a45 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="container">
+  <section class="container p-2 log">
     <b-field
       label="Usuario"
       message="This email is invalid"
@@ -8,38 +8,87 @@
     </b-field>
 
     <b-field
-      label="Contraseña"
-      message="This email is invalid"
-      type="is-danger">
+      label="Contraseña">
+        <!-- message="This email is invalid"
+      type="is-danger" -->
         <b-input
           v-model="password"
           type="password"
           password-reveal></b-input>
     </b-field>
+
+    <b-field >
+    <button :disabled='usuario == "" || password=="" && error== true'
+    class="button is-success is-medium"
+    @click="enviar()">
+        Enviar
+    </button>
+    </b-field>
   </section>
 </template>
 
 <script>
 import validator from 'validator'
+import axios from 'axios'
 
 export default {
   data () {
     return {
       usuario: '',
       password: '',
-      error: false
+      error: false,
+      isFullPage: true
     }
   },
   methods: {
     usuarioValido () {
       if (!this.usuario) {
+        console.log('esta vacio')
+        // return ''
+        this.error = true
+      }
+      if (validator.isNumeric(this.usuario, { no_symbols: true })) {
+        if (this.usuario.length == 10) {
+          console.log('es numero de cuenta')
+        }
         return ''
-      } if (validator.isNumeric(this.usuario, { no_symbols: false })) {
+      } else if (validator.isEmail(this.usuario)) {
+        console.log('es correo')
         return ''
-      } else if (validator.isNumeric(this.usuario, { no_symbols: false })) {
+      } else if (validator.isAlpha(this.usuario)) {
+        console.log('es texto')
         return ''
       }
-      return 'is-danger'
+      // return 'is-danger'
+      this.error = true
+    },
+
+    enviar () {
+      const loadingComponent = this.$buefy.loading.open({
+        container: this.isFullPage ? null : this.$refs.element.$el
+      })
+
+      const data = {
+        usuario: (this.usuario).trim(),
+        password: this.password
+      }
+      axios.post(`${process.env.api}/usuario/login`, data)
+        .then(resp => {
+          loadingComponent.close()
+
+          localStorage.clear()
+          window.localStorage.setItem('idUsuario', resp.data.Usuario.idUsuario)
+          window.localStorage.setItem('token', resp.data.token)
+          window.localStorage.setItem('nombre', resp.data.Usuario.nombre)
+          window.localStorage.setItem('idTipoUsuario', resp.data.Usuario.TipoUsuario.tipoUsuario)
+          window.localStorage.setItem('tipoUsuario', resp.data.Usuario.TipoUsuario.tipoUsuario)
+
+          this.$router.push(`/${resp.data.Usuario.TipoUsuario.tipoUsuario}`)
+        })
+        .catch(error => {
+          loadingComponent.close()
+          this.$buefy.dialog.alert(error.message)
+        })
     }
   },
   watch: {
@@ -50,3 +99,8 @@ export default {
   layout: 'login'
 }
 </script>
+<style scoped>
+footer[data-v-cf943d08]{
+  display: none !important;
+}
+</style>
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index 04c09d1..80db063 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -1,225 +1,199 @@
 <template>
   <div class="container">
-  <div class="columns is-mobile">
-    <div class="column ">
-
-      <b-button tag="router-link"
-                to="/responsable"
-                type="is-info is-light "
-                icon-left="arrow-left-box"
-                class="border-info my-5"
-                >
-                regresar
-      </b-button>
-
-      <section class="mensaje has-text-justified is-size-6 ">
-        <p class="block is-size-5">Estimado(a) responsable de programa de servicio social:</p>
-
-        <p class="block ">
-          Te solicitamos llenar cuidadosamente los campos solicitados a continuación
-          para iniciar el trámite de registro de servicio social de nuestro
-          alumno(a), quien a su vez completará posteriormente el proceso en este
-          mismo sistema con otros datos.
-        </p>
-        <p class="block ">
-          Es muy importante escribir correctamente el correo del alumno para que el
-          sistema pueda enviarle la notificación correspondiente de que ya puede
-          ingresar a completar su registro. También debes tomar en cuenta que la
-          fecha de inicio NO se podrá modificar, sólo la fecha de término en caso de
-          que el alumno no cumpla las 480 horas en el periodo mínimo de 6 meses. Al
-          siguiente día de la fecha de término programada, se activará la opción de
-          cargar la carta de término y llenar el cuestionario de desempeño del
-          alumno. En caso de que exista algún error en los datos o cartas emitidas
-          se les notificará en este panel en cuanto el Departamento de Servicio
-          Social y Bolsa de Trabajo revise su solicitud, para que realicen la
-          corrección correspondiente.
-        </p>
-      </section>
-
-      <section>
-        <h1 class="title is-1  titleAnadir">
-          Añadir Servicio Social
-        </h1>
-          <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0">
-            <div class="column  pl-0">
-            <form>
-              <b-field class="column p-0 my-5 is-full">
-                      <input
-                      class="input column "
-                      v-model="noCuenta"
-                      message="Solo numeros"
-                      required="required"
-                      maxlength="9" type="number"
-                      placeholder="Cuenta"
-                      min="0" />
-
-                      <p class="control">
-                        <b-button class="button is-info" @click=" simple()">Buscar</b-button>
-                      </p>
-              </b-field>
-
-              <b-field label="Nombre">
-                <div class="input">{{ alumno.nombre }}</div>
-              </b-field>
-
-              <b-field label="Carrera">
-                <div class="input">{{ alumno.carrera }}</div>
-              </b-field>
-
-              <b-field label="Creditos">
-                <div class="input">{{ alumno.creditos }}</div>
-              </b-field>
-
-              <b-field label="Seleccione programa">
-                  <b-select placeholder="programa"  expanded v-model="programaSelectedID">
-                    <option
-                    v-for="programa in programas"
-                    v-bind:key="programa.id"
-                    :value="programa.id"
-                    >{{ programa.nombre }}</option>
-
-                  </b-select>
-              </b-field>
-
-              <b-field label="Institucion">
-                <div class="input">{{ programaSelected.institucion }}</div>
-              </b-field>
-
-              <b-field label="Dendencia">
-                <div class="input">{{ programaSelected.dependencia }}</div>
-              </b-field>
-
-              <b-field label="Clave del programa">
-                <div class="input">{{ programaSelected.clave }}</div>
-              </b-field>
-
-              <b-field label="Fecha de inicio">
-                <b-datepicker
-                  placeholder="Inicio"
-                  icon="calendar-today"
-                  v-model="dataSend.inicio[0]"
-                  :min-date="minDate1">
-                </b-datepicker>
-              </b-field>
-
-              <b-field label="Fecha de fin" v-if="dataSend.inicio">
-                <b-datepicker
-                  placeholder="Fin"
-                  v-model="dataSend.fin[0]"
-                  :min-date="minDate2"
-                  icon="calendar-today">
-                </b-datepicker>
-              </b-field>
-
-              <b-field label="Correo">
-            <b-input placeholder="Email" type="email" v-model="dataSend.correo"></b-input>
-              </b-field>
-
-              <h3 class="title is-4 mt-6">Carta de aceptación (en formato .PDF. No se aceptan fotos).</h3>
-
-              <b-field>
-                  <b-upload v-model="dataSend.file" drag-drop expanded accept="application/pdf">
-                    <section class="section">
-                      <div class="content has-text-centered">
-                        <p>
-                          <b-icon icon="upload" size="is-large"></b-icon>
-                        </p>
-                        <p>{{ dataSend.file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
-                      </div>
-                    </section>
-                  </b-upload>
-              </b-field>
-
-            </form>
-            <div class="my-6">
-              <b-button tag="router-link"
+    <div class="columns is-mobile">
+      <div class="column ">
+        <b-button tag="router-link"
                   to="/responsable"
                   type="is-info is-light "
                   icon-left="arrow-left-box"
-                  class="border-info"
-                   style="float: left;"
-                  size="is-medium"
+                  class="border-info my-5"
                   >
                   regresar
-              </b-button>
+        </b-button>
 
-              <b-field class="derecha">
-                <button :disabled='dataSend.file == "" || noCuenta == "" || dataSend.correo == "" ||  dataSend.inicio == "" || dataSend.fin == ""'
-                class="button is-success is-medium"
-                @click="open"
-                style="float: right;">
-                    Enviar
-                </button>
-              </b-field>
-            </div>
+        <section class="mensaje has-text-justified is-size-6 ">
+          <p class="block is-size-5">Estimado(a) responsable de programa de servicio social:</p>
+
+          <p class="block ">
+            Te solicitamos llenar cuidadosamente los campos solicitados a continuación
+            para iniciar el trámite de registro de servicio social de nuestro
+            alumno(a), quien a su vez completará posteriormente el proceso en este
+            mismo sistema con otros datos.
+          </p>
+          <p class="block ">
+            Es muy importante escribir correctamente el correo del alumno para que el
+            sistema pueda enviarle la notificación correspondiente de que ya puede
+            ingresar a completar su registro. También debes tomar en cuenta que la
+            fecha de inicio NO se podrá modificar, sólo la fecha de término en caso de
+            que el alumno no cumpla las 480 horas en el periodo mínimo de 6 meses. Al
+            siguiente día de la fecha de término programada, se activará la opción de
+            cargar la carta de término y llenar el cuestionario de desempeño del
+            alumno. En caso de que exista algún error en los datos o cartas emitidas
+            se les notificará en este panel en cuanto el Departamento de Servicio
+            Social y Bolsa de Trabajo revise su solicitud, para que realicen la
+            corrección correspondiente.
+          </p>
+        </section>
+
+        <section>
+          <h1 class="title is-1  titleAnadir">
+            Añadir Servicio Social
+          </h1>
+
+          <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0">
+            <div class="column  pl-0">
+              <form>
+                <b-field class="column p-0 my-5 is-full">
+                        <input
+                        class="input column "
+                        v-model="noCuenta"
+                        message="Solo numeros"
+                        required="required"
+                        maxlength="9" type="number"
+                        placeholder="Cuenta"
+                        min="0" />
+
+                        <p class="control">
+                          <b-button class="button is-info" @click=" buscarAlumno()">Buscar</b-button>
+                        </p>
+                </b-field>
+
+                <b-field label="Nombre">
+                  <div class="input">{{ alumno.nombre }}</div>
+                </b-field>
+
+                <b-field label="Carrera">
+                  <div class="input">{{ alumno.carrera }}</div>
+                </b-field>
+
+                <b-field label="Creditos">
+                  <div class="input">{{ alumno.creditos }}</div>
+                </b-field>
+
+                <b-field label="Seleccione programa">
+                    <b-select placeholder="programa"  expanded v-model="programaSelectedID">
+                      <option
+                      v-for="programa in programas"
+                      v-bind:key="programa.idPrograma"
+                      :value="programa.idPrograma"
+                      >{{ programa.programa }}</option>
+
+                    </b-select>
+                </b-field>
+
+                <b-field label="Institucion">
+                  <div class="input">{{ programaSelected.institucion }}</div>
+                </b-field>
+
+                <b-field label="Dendencia">
+                  <div class="input">{{ programaSelected.dependencia }}</div>
+                </b-field>
+
+                <b-field label="Clave del programa">
+                  <div class="input">{{ programaSelected.clavePrograma }}</div>
+                </b-field>
+
+                <b-field label="Fecha de inicio">
+                  <b-datepicker
+                    placeholder="Inicio"
+                    icon="calendar-today"
+                    v-model="alumno.inicio[0]"
+                    :min-date="minDate1">
+                  </b-datepicker>
+                </b-field>
+
+                <b-field label="Fecha de fin" v-if="alumno.inicio">
+                  <b-datepicker
+                    placeholder="Fin"
+                    v-model="alumno.fin[0]"
+                    :min-date="minDate2"
+                    icon="calendar-today">
+                  </b-datepicker>
+                </b-field>
+
+                <b-field label="Correo">
+              <b-input placeholder="Email" type="email" v-model="alumno.correo"></b-input>
+                </b-field>
+
+                <h3 class="title is-4 mt-6">Carta de aceptación (en formato .PDF. No se aceptan fotos).</h3>
+
+                <b-field>
+                    <b-upload v-model="file" drag-drop type="is-black" expanded accept="application/pdf">
+                      <section class="section">
+                        <div class="content has-text-centered">
+                          <p>
+                            <b-icon icon="upload" size="is-large"></b-icon>
+                          </p>
+                          <p>{{ file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
+                        </div>
+                      </section>
+                    </b-upload>
+                </b-field>
+
+              </form>
+
+              <div class="my-6">
+                <b-button tag="router-link"
+                    to="/responsable"
+                    type="is-info is-light "
+                    icon-left="arrow-left-box"
+                    class="border-info"
+                    style="float: left;"
+                    size="is-medium"
+                    >
+                    regresar
+                </b-button>
+
+                <b-field class="derecha">
+                  <button :disabled='file == "" || noCuenta == "" || alumno.correo == "" ||  alumno.inicio == "" || alumno.fin == ""'
+                  class="button is-success is-medium"
+                  @click="Enviar()"
+                  style="float: right;">
+                      Enviar
+                  </button>
+                </b-field>
+              </div>
             </div>
           </div>
-
-      </section>
-
-      <!-- <pre>
-        {{$data}}
-      </pre> -->
+        </section>
+      </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
 
 import 'buefy/dist/buefy.css'
 import validator from 'validator'
+import axios from 'axios'
 
 export default {
   data () {
     return {
+      isFullPage: true,
       noCuenta: '',
-      file: null,
-      dropFiles: [],
       minDate: new Date('January 01, 2020 03:24:00'), // "2020-01-01T06:00:00.000Z",
-      seisMeses: 1000 * 60 * 60 * 24 * 7 * 4 * 6,
       minDate1: new Date('2020-01-01'),
       programaSelectedID: '',
+      file: [],
+      programas: [],
       programaSelected: {
-
-        nombre: '',
+        idPrograma: null,
         institucion: '',
         dependencia: '',
-        clave: ''
+        programa: '',
+        clavePrograma: '',
+        acatlan: '',
+        activo: '',
+        idUsuario: ''
       },
-      isLoading: false,
-      isFullPage: true,
       alumno: {
         cuenta: '',
-        nombre: 'Gaspar Marcelo	Tato Tomás',
-        carrera: 'Economia',
-        creditos: '54'
-      },
-      programas: [
-        {
-          id: '1',
-          nombre: 'uno',
-          institucion: 'uno',
-          dependencia: 'uno',
-          clave: '1'
-        },
-        {
-          id: '2',
-          nombre: 'dos',
-          institucion: 'dos',
-          dependencia: 'dos',
-          clave: '2'
-        },
-        {
-          id: '3',
-          nombre: 'tres',
-          institucion: 'tres',
-          dependencia: 'tres',
-          clave: '3'
-        }
-      ],
-      dataSend: {
-        file: [],
+        nombre: '',
+        carrera: '',
+        creditos: '',
+        idAlumno: '',
+        idCarrera: '',
         inicio: [],
         fin: [],
         correo: ''
@@ -229,24 +203,6 @@ export default {
   },
   methods:
   {
-  /*   openLoading () {
-      this.isLoading = true
-      setTimeout(() => {
-        this.isLoading = false
-      }, 10 * 1000)
-    }, */
-    simple () {
-      this.$buefy.notification.open('Something happened')
-    },
-    open () {
-      const loadingComponent = this.$buefy.loading.open({
-        container: this.isFullPage ? null : this.$refs.element.$el
-      })
-      setTimeout(() => loadingComponent.close(), 3 * 1000)
-    },
-    deleteDropFile (index) {
-      this.dropFiles.splice(index, 1)
-    },
     esNumero (numero) {
       const ultimaLetra = numero.length - 1
 
@@ -256,8 +212,72 @@ export default {
     maxLength (str, max) {
       if (str.length > max) return str.substr(0, max)
       return str
-    }
+    },
+    correoValidado () {
+      if (validator.isEmail(this.alumno.correo)) {
+        console.log('es correo')
+        return ''
+      }
+    },
+    buscarAlumno () {
+      const loadingComponent = this.$buefy.loading.open({
+        container: this.isFullPage ? null : this.$refs.element.$el
+      })
+      axios.get(`${process.env.api}/usuario/escolares`, {
+        params: {
+          numeroCuenta: this.noCuenta
+        }
+      })
+        .then(resp => {
+          loadingComponent.close()
 
+          console.log(resp.data)
+          this.alumno.cuenta = this.noCuenta
+          this.alumno.nombre = resp.data.nombre
+          this.alumno.carrera = resp.data.carrera
+          this.alumno.creditos = resp.data.creditos
+          this.alumno.idCarrera = resp.data.idCarrera
+          this.alumno.idAlumno = resp.data.idUsuario
+        })
+        .catch(error => {
+          loadingComponent.close()
+          this.$buefy.dialog.alert(error.message)
+        })
+    },
+    Enviar () {
+      const loadingComponent = this.$buefy.loading.open({
+        container: this.isFullPage ? null : this.$refs.element.$el
+      })
+      const data = {
+        idUsuario: this.alumno.idAlumno,
+        idPrograma: this.programaSelected.idPrograma,
+        idCarrera: this.alumno.idCarrera,
+        numeroCuenta: this.alumno.cuenta,
+        creditos: this.alumno.creditos,
+        correo: this.alumno.correo,
+        fechaInicio: this.alumno.inicio,
+        fechaFin: this.alumno.fin
+
+      }
+      const formData = new FormData()
+      console.log(data)
+      formData.append('alumno', JSON.stringify(data))
+      formData.append('cartaAceptacion', this.file)
+
+      axios.post(`${process.env.api}/servicio/nuevo`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+        .then(res => {
+          loadingComponent.close()
+          this.$buefy.dialog.alert('Se enviaron los datos correctamente')
+        })
+        .catch(error => {
+          loadingComponent.close()
+          this.$buefy.dialog.alert(error.message)
+        })
+    }
   },
   watch: {
     noCuenta () {
@@ -268,20 +288,42 @@ export default {
     programaSelectedID () {
       if (this.programaSelectedID) {
         for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].id === this.programaSelectedID) {
-            this.programaSelected.nombre = this.programas[i].nombre
+          if (this.programas[i].idPrograma === this.programaSelectedID) {
+            this.programaSelected.idPrograma = this.programas[i].idPrograma
+            this.programaSelected.programa = this.programas[i].programa
             this.programaSelected.institucion = this.programas[i].institucion
             this.programaSelected.dependencia = this.programas[i].dependencia
-            this.programaSelected.clave = this.programas[i].clave
+            this.programaSelected.clavePrograma = this.programas[i].clavePrograma
+            this.programaSelected.acatlan = this.programas[i].acatlan
+            this.programaSelected.activo = this.programas[i].activo
           }
         }
       }
+    },
+    file () {
+      console.log(this.file)
     }
 
   },
+  mounted () {
+    console.log(localStorage.getItem('idUsuario'))
+    axios.get(`${process.env.api}/programa`, {
+      params: {
+        idUsuario: localStorage.getItem('idUsuario')
+      }
+    })
+      .then(resp => {
+        console.log(resp.data)
+        this.programas = resp.data
+        console.log(this.programas)
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  },
   computed: {
     minDate2 () {
-      const min = new Date(this.dataSend.inicio)
+      const min = new Date(this.alumno.inicio)
       return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
     }
   }