registrer profesor

2024-06-21 16:23:14 -06:00
parent 8d87c21efb
commit 5e0f251900
5 changed files with 96 additions and 66 deletions
@@ -1,3 +1,8 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
 body {
  font-family: Arial, sans-serif;
  margin: 0;
@@ -142,8 +147,7 @@ p.text-center.mt-3 {
  background: white;
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
  display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: row !important;
  text-align: left;
 }

@@ -153,3 +157,11 @@ p.text-center.mt-3 {
  justify-content: center;
  align-items: center;
 }
+
+.imgProfe {
+  width: 150px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 1em;
+  margin: 5px;
+}
@@ -20,7 +20,7 @@ const App = () => {
            <Route path='*' element={<Directorio/>}></Route>
            <Route path='/d2' element={<Directorio2/>}></Route>
            <Route path='/login' element={<Login/>}></Route>
-            <Route path='/CrearUsuario' element={<CrearUsuario/>}></Route>
+            <Route path='/CU' element={<CrearUsuario/>}></Route>
            </Routes>
        <Footer />
      </Router>
@@ -1,4 +1,5 @@
 import React from "react";
+import '../App.js'

 const CardProfesor = ({ profesor, edificioNombre }) => {
  return (
@@ -2,33 +2,51 @@ import React, { useState } from 'react';
 import './CrearUsuario.css';

 const CrearUsuario = () => {
-  const [nombreCompleto, setNombreCompleto] = useState('');
-  const [nombreUsuario, setNombreUsuario] = useState('');
+  const [nombre, setNombre] = useState('');
+  const [usuario, setUsuario] = useState('');
  const [correo, setCorreo] = useState('');
-  const [contrasena, setContrasena] = useState('');
-  const [tipoUsuario, setTipoUsuario] = useState('--Seleccionar--');
+  const [contraseña, setContraseña] = useState('');
+  const [id_tipo_usuario, setId_tipo_usuario] = useState('2');

  const handleSubmit = (e) => {
    e.preventDefault();
-    // Aquí podrías implementar la lógica para registrar el usuario
-    console.log('Nombre Completo:', nombreCompleto);
-    console.log('Nombre de Usuario:', nombreUsuario);
-    console.log('Correo:', correo);
-    console.log('Contraseña:', contrasena);
-    console.log('Tipo de Usuario:', tipoUsuario);
-    // Puedes añadir más lógica para enviar los datos a una API, por ejemplo
+
+    const usuarioData = {
+      nombre,
+      usuario,
+      correo,
+      contraseña,
+      id_tipo_usuario,
+    };
+
+    fetch('http://localhost:3000/auth/register', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(usuarioData),
+    })
+    .then(response => response.json())
+    .then(data => {
+
+      console.log('Success:', data);
+      console.log(usuarioData);
+    })
+    .catch((error) => {
+      console.error('Error:', error);
+    });
  };

  return (
-    <div className="crear-usuario-container">
+    <div className="crear-usuario-container" style={{ backgroundColor: '#d59f0f' }}>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="nombreCompleto">Nombre completo:<span className="required">*</span></label>
          <input
            type="text"
            id="nombreCompleto"
-            value={nombreCompleto}
-            onChange={(e) => setNombreCompleto(e.target.value)}
+            value={nombre}
+            onChange={(e) => setNombre(e.target.value)}
            required
          />
        </div>
@@ -37,8 +55,8 @@ const CrearUsuario = () => {
          <input
            type="text"
            id="nombreUsuario"
-            value={nombreUsuario}
-            onChange={(e) => setNombreUsuario(e.target.value)}
+            value={usuario}
+            onChange={(e) => setUsuario(e.target.value)}
            required
          />
        </div>
@@ -57,8 +75,8 @@ const CrearUsuario = () => {
          <input
            type="password"
            id="contrasena"
-            value={contrasena}
-            onChange={(e) => setContrasena(e.target.value)}
+            value={contraseña}
+            onChange={(e) => setContraseña(e.target.value)}
            required
          />
        </div>
@@ -66,13 +84,12 @@ const CrearUsuario = () => {
          <label htmlFor="tipoUsuario">Tipo de usuario:<span className="required">*</span></label>
          <select
            id="tipoUsuario"
-            value={tipoUsuario}
-            onChange={(e) => setTipoUsuario(e.target.value)}
+            value={id_tipo_usuario}
+            onChange={(e) => setId_tipo_usuario(e.target.value)}
            required
          >
-            <option value="--Seleccionar--">--Seleccionar--</option>
-            <option value="1">1</option>
-            <option value="2">2</option>
+            <option value="1">Administrador(1)</option>
+            <option value="2">Responsable(2)</option>
          </select>
        </div>
        <button type="submit">Registrar</button>
@@ -2,20 +2,21 @@ import React, { useState, useEffect } from 'react';
 import './Formulario.css'; // Importa el archivo de estilos del formulario

 const Formulario = () => {
-  const [nombreCompleto, setNombreCompleto] = useState('');
-  const [numeroTrabajador, setNumeroTrabajador] = useState('');
+  const [id_usuario, setId_usuario] = useState('1');
+  const [nombre, setNombreCompleto] = useState('');
+  const [num_trabajador, setNum_trabajador] = useState('');
  const [rfc, setRfc] = useState('');
  const [homoclave, setHomoclave] = useState('');
-  const [correoPrincipal, setCorreoPrincipal] = useState('');
-  const [correoPersonal, setCorreoPersonal] = useState('');
+  const [correo_pcp, setCorreo_pcp] = useState('');
+  const [correo_per, setCorreoPersonal] = useState('');
  const [ubicacion, setUbicacion] = useState('');
-  const [telefonoOficina, setTelefonoOficina] = useState('');
+  const [tel_oficina, setTelefonoOficina] = useState('');
  const [extension, setExtension] = useState('');
-  const [telefonoPersonal, setTelefonoPersonal] = useState('');
-  const [foto, setFoto] = useState(null);
-  const [adscripcion, setAdscripcion] = useState('');
-  const [categoria, setCategoria] = useState('');
-  const [edificio, setEdificio] = useState('');
+  const [tel_personal, setTelefonoPersonal] = useState('');
+  const [fotografia, setFotografia] = useState('');
+  const [id_adscripcion, setAdscripcion] = useState('');
+  const [id_categoria, setCategoria] = useState('');
+  const [id_edificio, setEdificio] = useState('');
  const [activo, setActivo] = useState('1');
  const [adscripciones, setAdscripciones] = useState([]);
  const [categorias, setCategorias] = useState([]);
@@ -42,20 +43,22 @@ const Formulario = () => {
    e.preventDefault();

    const profesorData = {
-      nombreCompleto,
-      numeroTrabajador,
+      id_usuario,
+      nombre,
+      num_trabajador,
      rfc,
      homoclave,
-      correoPrincipal,
-      correoPersonal,
+      correo_pcp,
+      correo_per,
      ubicacion,
-      telefonoOficina,
+      tel_oficina,
      extension,
-      telefonoPersonal,
-      adscripcion: adscripcion === 'No asignado' ? '' : adscripcion,
-      categoria: categoria === 'No asignado' ? '' : categoria,
-      edificio: edificio === 'No asignado' ? '' : edificio,
+      tel_personal,
+      id_adscripcion,
+      id_categoria,
+      id_edificio,
      activo,
+      fotografia,
    };

    fetch('http://localhost:3000/profesor', {
@@ -75,19 +78,15 @@ const Formulario = () => {
    });
  };

-  const handleFileChange = (e) => {
-    setFoto(e.target.files[0]);
-  };
-
  return (
    <div>
      <form onSubmit={handleSubmit} className="formulario-container" style={{ backgroundColor: '#d59f0f' }}>
        <div className="form-group">
-          <label htmlFor="nombreCompleto">Nombre completo:<span className="required">*</span></label>
+          <label htmlFor="nombre">Nombre completo:<span className="required">*</span></label>
          <input
            type="text"
-            id="nombreCompleto"
-            value={nombreCompleto}
+            id="nombre"
+            value={nombre}
            onChange={(e) => setNombreCompleto(e.target.value)}
            required
          />
@@ -97,8 +96,8 @@ const Formulario = () => {
          <input
            type="text"
            id="numeroTrabajador"
-            value={numeroTrabajador}
-            onChange={(e) => setNumeroTrabajador(e.target.value)}
+            value={num_trabajador}
+            onChange={(e) => setNum_trabajador(e.target.value)}
            required
          />
        </div>
@@ -127,8 +126,8 @@ const Formulario = () => {
          <input
            type="email"
            id="correoPrincipal"
-            value={correoPrincipal}
-            onChange={(e) => setCorreoPrincipal(e.target.value)}
+            value={correo_pcp}
+            onChange={(e) => setCorreo_pcp(e.target.value)}
            required
          />
        </div>
@@ -137,7 +136,7 @@ const Formulario = () => {
          <input
            type="email"
            id="correoPersonal"
-            value={correoPersonal}
+            value={correo_per}
            onChange={(e) => setCorreoPersonal(e.target.value)}
          />
        </div>
@@ -146,7 +145,7 @@ const Formulario = () => {
          <label htmlFor="edificio">Edificio:<span className="required">*</span></label>
          <select
            id="edificio"
-            value={edificio}
+            value={id_edificio}
            onChange={(e) => setEdificio(e.target.value)}
            required
          >
@@ -161,7 +160,7 @@ const Formulario = () => {
          <label htmlFor="categoria">Categoría:<span className="required">*</span></label>
          <select
            id="categoria"
-            value={categoria}
+            value={id_categoria}
            onChange={(e) => setCategoria(e.target.value)}
            required
          >
@@ -175,7 +174,7 @@ const Formulario = () => {
          <label htmlFor="adscripcion">Adscripción:<span className="required">*</span></label>
          <select
            id="adscripcion"
-            value={adscripcion}
+            value={id_adscripcion}
            onChange={(e) => setAdscripcion(e.target.value)}
            required
          >
@@ -212,7 +211,7 @@ const Formulario = () => {
          <input
            type="tel"
            id="telefonoOficina"
-            value={telefonoOficina}
+            value={tel_oficina}
            onChange={(e) => setTelefonoOficina(e.target.value)}
            required
          />
@@ -232,16 +231,17 @@ const Formulario = () => {
          <input
            type="tel"
            id="telefonoPersonal"
-            value={telefonoPersonal}
+            value={tel_personal}
            onChange={(e) => setTelefonoPersonal(e.target.value)}
          />
        </div>
        <div className="form-group full-width">
-          <label htmlFor="foto">Foto:</label>
+          <label htmlFor="fotografia">fotografia:</label>
          <input
-            type="file"
-            id="foto"
-            onChange={handleFileChange}
+            type="text"
+            id="fotografia"
+            value={fotografia}
+            onChange={(e) => setFotografia(e.target.value)}
          />
        </div>
        <div className="form-group full-width">