corrección file input

components/administrador/admin.js

@@ -0,0 +1,34 @@
+
+import React, { useState } from 'react';
+import {Form,Button} from "react-bootstrap";
+
+
+function fileValidation(){
+    var fileInput = document.getElementById('file');
+    var filePath = fileInput.value;
+    var allowedExtensions = /(.csv)$/i;
+    if(!allowedExtensions.exec(filePath)){
+        alert('Please upload file having extensions .csv only.');
+        fileInput.value = '';
+        return false;
+    }
+}
+
+
+
+function SubirArchivo(){
+
+    return(
+        <Form>
+            <Form.Group controlId="formFileLg" className="mb-3" size="lg">
+                <Form.Control type="file" id="file" size="lg" onChange={() => fileValidation()}/>
+            </Form.Group>
+            <p className="text-center">
+                <Button variant="primary" type="submit" size="lg">
+                    Submit
+                </Button>
+            </p>
+      </Form>
+    );
+}
+export default SubirArchivo;

components/layouts/header.js

@@ -10,15 +10,7 @@ function Header() {
         <div className=""><Image src={LogoUnam} width="183" height="55"/></div>
         <div className="ms-auto"><Image  src={LogoFes} width="220" height="52"/></div>
         </Stack>
-        
         </div>
     )
 }
-export default Header;
-/*
-
-                    <Image src={LogoUnam} width="183" height="55"/>
-          
-                               
-                    <Image  src={LogoFes} width="227" height="52"/>
-                    */
+export default Header;

components/layouts/layout.js

@@ -6,7 +6,6 @@ import Footer from "./footer";
 const Layout = (props) => (
   <div className="Layout">
     <Header />
-    <Nav />
     <div className="Content">{props.children}</div>
     <Footer />
   </div>

components/layouts/layoutSalir.js

@@ -0,0 +1,19 @@
+import styles from "../../styles/default.module.css";
+import { Container, Row, Col,Stack,Button } from "react-bootstrap";
+function Salir(){
+    return(
+        <div className={`${styles.salir}`}>
+            <Container>
+            <Stack direction="horizontal">
+            <div className={`${styles.salir} ms-auto`} >
+                <a href="./">
+                    <Button className={`${styles.boton}`} size="sm">Salir</Button>
+                </a>
+            </div>
+            </Stack>
+            </Container>
+        </div>
+    );
+}
+
+export default Salir;

components/login/login.js

@@ -5,12 +5,11 @@ import {FormGroup, Label, Input} from "reactstrap";
 import styles from "../../styles/login.module.css";
 
 function App() {
-  const[radio, setRadio] = useState("profesor");
+  const[radio, setRadio] = useState("");
 
   const cambioRadio=e=>{
     setRadio(e.target.value);
   }
-
   return (
     <Container className={`${styles.contenido}`}>
         <Row className="justify-content-md-center">
@@ -32,7 +31,6 @@ function App() {
                             Profesor/a
                         </Label>
                         </FormGroup>
-
                         <FormGroup>
                         <Input
                             id="operador"
@@ -45,7 +43,6 @@ function App() {
                             Operador/a
                         </Label>
                         </FormGroup>
-
                         <FormGroup>
                         <Input
                             id="admin"
@@ -118,7 +115,7 @@ function App() {
                 {(() => {
                     if(radio==="profesor")
                     return(
-                        <p class="text-center">
+                        <p className="text-center">
                         <a href="./profesores">    
                         <Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
                         </a>
@@ -126,7 +123,7 @@ function App() {
                     )
                     else if(radio==="operador")
                     return(
-                        <p class="text-center">
+                        <p className="text-center">
                         <a href="./operador">    
                         <Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
                         </a>
@@ -134,7 +131,7 @@ function App() {
                     )
                     else if(radio==="admin")
                     return(
-                        <p class="text-center">
+                        <p className="text-center">
                         <a href="./admin">    
                         <Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
                         </a>

components/profesores_registro/invitado.js

@@ -9,9 +9,9 @@ function Invitado(props){
                 </Row>
                 <Row>
                     <Col xs={5}>
-                        <p class="text-end">Nombre(s):</p>
-                        <p class="text-end">Apellidos:</p>
-                        <p class="text-end">Edad:</p>
+                        <p className="text-end">Nombre(s):</p>
+                        <p className="text-end">Apellidos:</p>
+                        <p className="text-end">Edad:</p>
                     </Col>
                     <Col xs={4}>
                         <form>
@@ -31,9 +31,9 @@ function Invitado(props){
                         </InputGroup>
                         <InputGroup className="mb-3">
                             <Container>
-                                <div class="row justify-content-start">
-                                    <div class="col-4">
-                                        <div class="input-group mb-3 ">
+                                <div className="row justify-content-start">
+                                    <div className="col-4">
+                                        <div className="input-group mb-3 ">
                                             <select class="form-select" id="inputGroupSelect02">
                                                 <option selected>...</option>
                                                 <option value="18">18</option>

components/profesores_registro/profesores.js

@@ -10,19 +10,19 @@ function Registro(){
         <Container className={`${styles.container}`}>
             <Row>
                 <Col className={`${styles.texto1}`}>
-                    <p class="text-end">Nombre:</p>
-                    <p class="text-end">Número de trabajador:</p>
-                    <p class="text-end">Adscripción:</p>
-                    <p class="text-end">Cantidad de invitados:</p>
+                    <p className="text-end">Nombre:</p>
+                    <p className="text-end">Número de trabajador:</p>
+                    <p className="text-end">Adscripción:</p>
+                    <p className="text-end">Cantidad de invitados:</p>
                 </Col>
                 <Col className={`${styles.texto2}`}>
                     <form>
-                        <p class="text-start">Gabriela Gómez Hernández</p>
-                        <p class="text-start">2013050757</p>
-                        <p class="text-start">Estudiante</p>
+                        <p className="text-start">Gabriela Gómez Hernández</p>
+                        <p className="text-start">2013050757</p>
+                        <p className="text-start">Estudiante</p>
                         <Container>
-                        <div class="row justify-content-start">
-                            <div class="col-2">
+                        <div className="row justify-content-start">
+                            <div className="col-2">
                                 <Form.Select as="select" size="lg" custom onChange={(e)=>{setSelect(e.target.value)}} >
                                         
                                     <option selected>...</option>
@@ -41,7 +41,7 @@ function Registro(){
         </Container>
         {(() => {
             switch(select){
-                case "1": return <Invitado numero="1"></Invitado>;
+                case "1": return <Invitado numero="1" ></Invitado>;
                 case "2": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado></>
                 );
                 case "3": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado><Invitado numero="3"></Invitado></>
@@ -56,13 +56,6 @@ function Registro(){
                 </a>
             </Col>
         </Row>
-        <Row >
-            <Col md={{ span: 1, offset: 11}}>
-            <a href="./login">
-                <Button className={`${styles.boton2}`} size="sm">Salir</Button>
-            </a>
-            </Col>
-        </Row>
     </Container>        
     );
 }

pages/admin.js

@@ -1,38 +1,47 @@
 import styles from "../styles/admin.module.css";
 import Layout from '../components/layouts/layout';
+import Salir from '../components/layouts/layoutSalir';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Head from 'next/head';
-import { Container, Row, Col,Form,Button,P } from "react-bootstrap";
+import { Container, Row, Col,Button} from "react-bootstrap";
+import SubirArchivo from "../components/administrador/admin";
+import React, { useState } from 'react';
 export default function Admin(){
+    const [archive, setArchive] = useState('');//este se
+    const [archive2, setArchive2] = useState('Subir base de datos de profesores');
+    const setArchiveOn = () => {
+        if(archive==""){
+            setArchive(<SubirArchivo></SubirArchivo>);
+            setArchive2("Cerrar");
+        }
+        else{
+            setArchive("");
+            setArchive2("Subir base de datos de profesores");
+        }
+    }
+
     return(
         <Layout>
             <Head>
             <title>Admin</title>
             </Head>
+            <Salir/>
             <Container className={`${styles.subtitulo}`}><Row><p>Admin</p></Row></Container>
             <Container className={`${styles.contenido}`}>
                 <Row  className="justify-content-md-center">
                     <Col xs lg="4">
                         <div className="d-grid gap-2">
-                        <Button variant="primary" size="lg" className={`${styles.boton}`}>
-                            Subir base de datos de profesores
+                        <Button  size="lg" className={`${styles.boton}`} onClick={() => setArchiveOn()}>
+                            {archive2}
                         </Button>
-                        <Button variant="secondary" size="lg" className={`${styles.boton}`}>
+                        {archive}
+                        <Button  size="lg" className={`${styles.boton}`}>
                             Descargar base de datos de invitados
                         </Button>
                         </div>
                     </Col>
                 </Row>
-            </Container>
-            <Container>    
-                <Row>
-                    <Col md={{ span: 1, offset: 11}}>
-                        <a href="./login">
-                        <Button className={`${styles.salir}`} size="sm">Salir</Button>
-                        </a>
-                    </Col>
-                </Row>
-            </Container>            
+            </Container>    
         </Layout>
     )
 }

pages/operador.js

@@ -3,6 +3,7 @@ import Layout from '../components/layouts/layout';
 import Qr from '../components/operador/qr';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Head from 'next/head';
+import Salir from '../components/layouts/layoutSalir';
 import { Container, Row, Col,Form,Button,P } from "react-bootstrap";
 import React, { useState } from 'react';
 
@@ -25,6 +26,7 @@ export default function Register(){
             <Head>
             <title>Operador</title>
             </Head>
+            <Salir/>
             <Container className={`${styles.subtitulo}`}>
                 <Row>
                     <Col><p>Operador</p></Col>
@@ -44,15 +46,6 @@ export default function Register(){
                     </Row>
                 </Row>                
             </Container>   
-            <Container>
-                <Row className="justify-content-md-center">
-                        <Col md="auto">
-                            <a href="./login">
-                            <Button className={`${styles.salir}`} size="sm">Salir</Button>
-                            </a>
-                        </Col>
-                    </Row>
-            </Container>
         </Layout>
     )
 }

pages/profesores.js

@@ -1,5 +1,6 @@
 import styles from "../styles/profesores.module.css";
 import Layout from '../components/layouts/layout';
+import Salir from '../components/layouts/layoutSalir';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Head from 'next/head';
 import Registro from '../components/profesores_registro/profesores';
@@ -7,6 +8,7 @@ import Registro from '../components/profesores_registro/profesores';
 export default function Register(){
     return(
         <Layout>
+            <Salir/>
             <Head>
             <title>Registro Profesores</title>
             </Head>

pages/registro-exitoso.js

@@ -2,23 +2,18 @@ import styles from "../styles/exito.module.css";
 import Layout from '../components/layouts/layout';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Head from 'next/head';
+import Salir from '../components/layouts/layoutSalir';
 import { Container, Row, Col,Form,Button,P } from "react-bootstrap";
 export default function Register(){
     return(
         <Layout>
+            <Salir/>
             <Head>
             <title>Registro Exitoso</title>
             </Head>
             <Container className={`${styles.container}`}>
-                <Row><p class="text-center">¡REGISTRO EXITOSO!</p></Row>
-                <Row><p class="text-center">Se han enviado los datos e instrucciones a su correo PCPUMA</p></Row>
-                <Row className="justify-content-md-center">
-                    <Col xs={1}>
-                    <a href="./login">
-                        <Button className={`${styles.salir}`} size="lg">Salir</Button>
-                    </a>
-                    </Col>
-                </Row>
+                <Row><p className="text-center">¡REGISTRO EXITOSO!</p></Row>
+                <Row><p className="text-center">Se han enviado los datos e instrucciones a su correo PCPUMA</p></Row>
             </Container>
             
         </Layout>

styles/default.module.css

@@ -26,5 +26,19 @@
   background-color: #1e3c70;
 }
 
+.salir{
+  background-color: #2c56a0;
+  margin-top: 0px;
+}
 
-
+.boton{
+  color:white;
+  background-color: #2c56a0;
+  font-family: 'Vollkorn', serif;
+  font-size: x-large;
+  font-weight: bold;
+  border:0px;
+}
+.boton:hover{
+  background-color:rgb(27,61,112,50%);
+}