From ce31fd5ea0abb4edd6a60789621071e42edc40db Mon Sep 17 00:00:00 2001
From: santiago <sm12@gmail.com>
Date: Mon, 28 Jul 2025 15:35:34 -0600
Subject: [PATCH] Modificaciones en el front de cedetec 7/28/25

---
 components/Login.vue                 | 130 +++++++++++++++++++++++++++
 components/layouts/Header.vue        |  14 ++-
 nuxt.config.js                       |   3 +-
 package-lock.json                    |  16 ++++
 package.json                         |   1 +
 pages/index.vue                      |   7 ++
 pages/profesor/bienvenida.vue        | 106 ++++++++++++++++++++++
 pages/profesor/correo.vue            |  20 +++++
 pages/profesor/registro-profesor.vue |   0
 utils/alerts.js                      |  44 +++++++++
 10 files changed, 338 insertions(+), 3 deletions(-)
 create mode 100644 pages/profesor/bienvenida.vue
 create mode 100644 pages/profesor/correo.vue
 create mode 100644 pages/profesor/registro-profesor.vue
 create mode 100644 utils/alerts.js

diff --git a/components/Login.vue b/components/Login.vue
index abb81fd..5d87d83 100644
--- a/components/Login.vue
+++ b/components/Login.vue
@@ -1,3 +1,4 @@
+<!--
 <template>
   <div class="full-h is-flex is-justify-content-center is-align-items-center">
     <form class="box">
@@ -45,6 +46,10 @@
         </b-button>
       </div>
     </form>
+    <b-button @click="$router.push('/profesor/registro-profesor')">
+      Ir al registro de profesor
+    </b-button>
+
   </div>
 </template>
 
@@ -130,3 +135,128 @@ form {
   width: 30rem;
 }
 </style>
+-->
+
+<template>
+  <div class="full-h is-flex is-justify-content-center is-align-items-center">
+    <form class="box">
+      <div class="has-text-centered">
+        <div class="titulo">
+          <h2 class="is-size-4">Sistema de Inscripciones a CEDETEC</h2>
+          <h2 class="is-size-4">para Profesores</h2>
+        </div>
+      </div>
+
+      <b-field label="Número de trabajador" :type="error">
+        <b-input
+          type="text"
+          placeholder="Ingresa tu número de trabajador"
+          @keyup.enter.native="buscarProfesor()"
+          v-model="numeroTrabajador"
+        />
+      </b-field>
+
+      <div class="has-text-centered">
+        <b-button class="is-primary "
+          @click="buscarProfesor"
+          type="is-primary"
+          :disabled="!numeroTrabajador"
+        >
+          Buscar
+        </b-button>
+      </div>
+
+      <p v-if="mensaje" class="has-text-centered mt-4">{{ mensaje }}</p>
+    </form>
+  </div>
+</template>
+
+<script >
+import axios from 'axios'
+import { errorBuscar, profesorYaInscrito } from '~/utils/alerts'
+
+export default {
+  props: {
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: false, default: () => {} },
+  },
+  data() {
+    return {
+      numeroTrabajador: '',
+      profesor: null,
+      mensaje: '',
+      error: '',
+    }
+  },
+  methods: {
+    buscarProfesor() {
+      this.updateIsLoading(true)
+      axios
+        .get(`${process.env.VUE_APP_API}/profesores/${this.numeroTrabajador}`)
+        .then((res) => {
+          this.profesor = res.data;
+          const { idUsuario, nombre, numeroCuenta } = res.data;
+
+          if (nombre  && idUsuario && numeroCuenta) {
+            // Guardar en localStorage
+            localStorage.setItem('profesorId', idUsuario);
+            localStorage.setItem('profesorNombre', nombre);
+            localStorage.setItem('profesorNumeroCuenta', numeroCuenta);
+            
+            this.$router.replace({
+              path: '/profesor/bienvenida'
+              //query: { nombre, idUsuario, numeroCuenta }
+            })
+          } else {
+            //Borrar
+            this.profesor = null
+            this.error = 'is-danger'
+            this.mensaje = 'Profesor no encontrado o sin nombre registrado.'
+            this.imprimirWarning('No se encontró al profesor.')
+          }
+        })
+        .catch((err) => {
+          //this.profesor = null
+          //this.error = 'is-danger'
+          //this.mensaje = 'Solo está permitido el acceso a profesores inscritos en la universidad.'
+          //this.imprimirWarning(err.response?.data?.message || 'Error al buscar')
+          //errorBuscar();
+          const status = err.response?.status;
+
+          if (status === 409) {
+            profesorYaInscrito();
+          } else {
+            errorBuscar();
+          }
+        })
+        .finally(() => {
+          this.updateIsLoading(false)
+        })
+    },
+    
+  },
+}
+
+</script>
+
+<style scoped>
+.full-h {
+  height: 75vh;
+}
+
+.is-primary {
+  background-color: green;
+}
+
+.titulo {
+  margin-bottom: 25px;
+  color: goldenrod;
+}
+
+form {
+  width: 30rem;
+}
+</style>
+
diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue
index 2f3a47d..c660c94 100644
--- a/components/layouts/Header.vue
+++ b/components/layouts/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header v-if="!isInIframe">
     <div class="container py-3">
       <div
         class="
@@ -31,7 +31,17 @@
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      isInIframe: false,
+    };
+  },
+  mounted() {
+    // Detecta si se está mostrando dentro de un iframe
+    this.isInIframe = window.self !== window.top;
+  },
+};
 </script>
 
 <style scoped>
diff --git a/nuxt.config.js b/nuxt.config.js
index 3374c2d..bee3600 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -23,7 +23,8 @@ export default {
   build: {},
   env: {
     // api: 'http://localhost:3000',
-    api: 'https://venus.acatlan.unam.mx/inscripciones_test',
+    //api: 'https://venus.acatlan.unam.mx/inscripciones_test',  Esta es la que tenia
     // api: 'https://venus.acatlan.unam.mx/inscripciones',
+    VUE_APP_API: process.env.VUE_APP_API
   },
 }
diff --git a/package-lock.json b/package-lock.json
index 6c5a068..c7bc944 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "moment": "^2.29.1",
         "nuxt": "^2.15.3",
         "nuxt-buefy": "^0.4.4",
+        "sweetalert2": "^11.22.2",
         "validator": "^13.6.0"
       },
       "devDependencies": {
@@ -10544,6 +10545,16 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.22.2",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.2.tgz",
+      "integrity": "sha512-GFQGzw8ZXF23PO79WMAYXLl4zYmLiaKqYJwcp5eBF07wiI5BYPbZtKi2pcvVmfUQK+FqL1risJAMxugcPbGIyg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -21519,6 +21530,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "sweetalert2": {
+      "version": "11.22.2",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.2.tgz",
+      "integrity": "sha512-GFQGzw8ZXF23PO79WMAYXLl4zYmLiaKqYJwcp5eBF07wiI5BYPbZtKi2pcvVmfUQK+FqL1risJAMxugcPbGIyg=="
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
diff --git a/package.json b/package.json
index 985a1ee..5ebfb32 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "moment": "^2.29.1",
     "nuxt": "^2.15.3",
     "nuxt-buefy": "^0.4.4",
+    "sweetalert2": "^11.22.2",
     "validator": "^13.6.0"
   },
   "devDependencies": {
diff --git a/pages/index.vue b/pages/index.vue
index fd28abc..4d31adf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,7 @@
 <template>
   <section class="container">
+    <RegistroProfesor ></RegistroProfesor>
+
     <LoginUser
       v-if="type === 'User'"
       :imprimirMensaje="imprimirMensaje"
@@ -8,6 +10,8 @@
       :updateIsLoading="updateIsLoading"
     />
 
+    
+
     <LoginAdmin
       v-if="type === 'Admin'"
       :imprimirMensaje="imprimirMensaje"
@@ -16,6 +20,8 @@
       :updateIsLoading="updateIsLoading"
     />
 
+    
+
     <div class="has-text-centered">
       <b-button @click="types()">{{ type }}</b-button>
     </div>
@@ -27,6 +33,7 @@
 <script>
 import LoginUser from '@/components/Login'
 import LoginAdmin from '@/components/admin/login'
+import RegistroProfesor from '@/pages/profesor/registro-profesor.vue'
 
 export default {
   components: { LoginUser, LoginAdmin },
diff --git a/pages/profesor/bienvenida.vue b/pages/profesor/bienvenida.vue
new file mode 100644
index 0000000..0903ef8
--- /dev/null
+++ b/pages/profesor/bienvenida.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="has-text-centered mt-6">
+      <h1 class="title is-3">¡Bienvenido al sistema de inscripciones CEDETEC!</h1>
+    </div>
+
+    <div class="content mt-4 px-5 card">
+      <p class="text1">
+        Profesor(a): <strong>{{ nombre }}</strong>, al realizar su inscripción tendrá acceso a los siguientes servicios que ofrece el CEDETEC en el área de profesores:
+      </p>
+
+      <ol>
+        <li>Préstamo de equipo de cómputo.</li>
+        <li>Mesas para trabajar con sus dispositivos móviles personales o con los módulos de PC PUMA.</li>
+      </ol>
+
+      <p>
+        Adicionalmente, y bajo disponibilidad del espacio, su programa podrá reservar la sala de usos múltiples para que usted pueda utilizarla con los alumnos.
+      </p>
+
+      <p><strong>Nota:</strong> La inscripción se realiza cada semestre.</p>
+
+      <div class="btn-ins">
+        <button class="btn-first" type="button" @click="realizarInscripcion">Realizar Inscripcion</button>
+      </div>
+    </div>
+
+    
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { errorAlInscribir, inscripcionExitosa } from '~/utils/alerts';
+
+export default {
+  data() {
+    return {
+      nombre: '',
+      correo: '',
+      idUsuario: null,
+      numeroCuenta: null
+    };
+  },
+  mounted() {
+    this.idUsuario = localStorage.getItem('profesorId');
+    this.nombre = localStorage.getItem('profesorNombre');
+    this.numeroCuenta = localStorage.getItem('profesorNumeroCuenta');
+  },
+  methods: {
+    realizarInscripcion() {
+      const payload = {
+        idUsuario: this.idUsuario,
+        nombre: this.nombre,
+        numeroCuenta: this.numeroCuenta,
+        correo: 'smtrabajos5@gmail.com'  
+        //correo: `${this.numeroCuenta}@pcpuma.acatlan.unam.mx` // esta es el codigo para produccion
+      }
+
+      axios.post(`${process.env.VUE_APP_API}/profesores/inscripcion`,payload)
+      .then(() => {
+        inscripcionExitosa(payload.correo);
+        this.$router.push('/'); //Redirige a la pantalla original despues de la inscripcion
+      })
+      .catch((err) => {
+        //this.imprimirError('No se pudo enviar el correo.');
+        console.error(err);
+        errorAlInscribir();
+      });
+    }
+  }
+
+  }
+
+</script>
+
+<style scoped>
+h1 {
+  color: goldenrod;
+  padding-bottom: 20px;
+}
+
+ol {
+  padding-left: 50px;
+}
+
+.btn-ins {
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.text1 {
+  padding-top: 20px;
+}
+
+/*
+.btn-first {
+  background-color: goldenrod;  #1d3d6f
+  width: 350px;
+  height: 50px;
+  color: white;
+  box-shadow: 0px 4px 20px rgba(40, 35, 97, 0.5);
+}
+*/
+
+</style>
\ No newline at end of file
diff --git a/pages/profesor/correo.vue b/pages/profesor/correo.vue
new file mode 100644
index 0000000..b966fb6
--- /dev/null
+++ b/pages/profesor/correo.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <div>
+            <ol>
+                <li><strong>Asunto</strong>: Inscripción CEDETEC</li>
+                <li>Estimado profesor(a) {{ nombre }}</li>
+                <li>Informo que su inscripción fue realizad con éxito.</li>
+            </ol>
+        </div>
+        <div>
+            <h3><strong>¿Cómo puede hacer uso de los servicios?</strong></h3>
+            Es necesario revise los siguientes videos para solicitar equipo en el área de profesores.
+        </div>
+        <div>
+            <strong>Nota</strong>:
+            <p>Es importante revisar los <strong>lineamientos de uso</strong> para hacer uso de los servicios que ofrece el CEDETEC. </p>
+        </div>
+    </div>
+</template>
+
diff --git a/pages/profesor/registro-profesor.vue b/pages/profesor/registro-profesor.vue
new file mode 100644
index 0000000..e69de29
diff --git a/utils/alerts.js b/utils/alerts.js
new file mode 100644
index 0000000..6826d14
--- /dev/null
+++ b/utils/alerts.js
@@ -0,0 +1,44 @@
+// src/utils/alerts.js
+import Swal from 'sweetalert2';
+
+export const inscripcionExitosa = (correo) => {
+    Swal.fire({
+        title: '¡Inscripción exitosa!',
+        html: `Hemos enviado un correo a<br><strong>${correo}</strong> por favor revisar su correo.`,
+        icon: 'success',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#28a745',
+        backdrop: true,
+        allowOutsideClick: false,
+    });
+};
+
+export const errorAlInscribir = () => {
+    Swal.fire({
+        title: 'Error',
+        text: 'No se pudo completar la inscripción. Intenta más tarde.',
+        icon: 'error',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#d33',
+    });
+};
+
+export const errorBuscar = () => {
+    Swal.fire({
+        title: 'Error',
+        text: 'Por favor confirme que la informacion enviada es correcta en caso contrario redirigirse a su programa academico',
+        icon: 'error',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#d33',
+    });
+};
+
+export const profesorYaInscrito = () => {
+    Swal.fire({
+        title: 'Error',
+        text: 'El profesor ya esta inscrito, por favor verificar el correo enviado anteriormente.',
+        icon: 'error',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#d33',
+    })
+}
\ No newline at end of file
-- 
2.43.0