Gabriela Gómez Hernández
147 lines
6.1 KiB
JavaScript
147 lines
6.1 KiB
JavaScript
import {useState} from "react";
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import {Container,Row,Col,Form,Button,InputGroup,FormControl} from "react-bootstrap"
|
|
import {FormGroup, Label, Input} from "reactstrap";
|
|
import styles from "../../styles/login.module.css";
|
|
|
|
function App() {
|
|
const[radio, setRadio] = useState("");
|
|
|
|
const cambioRadio=e=>{
|
|
setRadio(e.target.value);
|
|
}
|
|
return (
|
|
<Container className={`${styles.contenido}`}>
|
|
<Row className="justify-content-md-center">
|
|
<Col xs lg="4"><p className="text-center">REGISTRO DE PROFESORES PARA OBTENCIÓN DE MEDALLAS</p></Col>
|
|
</Row>
|
|
<Row className="justify-content-md-center">
|
|
<Col xs lg="4">
|
|
<FormGroup className="formGroupRadios">
|
|
<Container className={`${styles.formGroupRadios}`}>
|
|
<FormGroup>
|
|
<Input
|
|
id="profesor"
|
|
type="radio"
|
|
value="profesor"
|
|
checked={radio == "profesor" ? true : false}
|
|
onChange={cambioRadio}
|
|
/>
|
|
<Label for="profesor">
|
|
Profesor/a
|
|
</Label>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Input
|
|
id="operador"
|
|
type="radio"
|
|
value="operador"
|
|
checked={radio == "operador" ? true : false}
|
|
onChange={cambioRadio}
|
|
/>
|
|
<Label for="operador">
|
|
Operador/a
|
|
</Label>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Input
|
|
id="admin"
|
|
type="radio"
|
|
value="admin"
|
|
checked={radio == "admin" ? true : false}
|
|
onChange={cambioRadio}
|
|
/>
|
|
<Label for="admin">
|
|
Admin
|
|
</Label>
|
|
</FormGroup>
|
|
</Container>
|
|
</FormGroup>
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-md-center">
|
|
<Col xs lg="4">
|
|
{(() => {
|
|
switch (radio) {
|
|
case "profesor": return <>
|
|
<InputGroup className="mb-3">
|
|
<FormControl
|
|
placeholder="Número de trabajador"
|
|
aria-label="profesor"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</InputGroup>
|
|
<Form.Select aria-label="Default select example">
|
|
<option>Adscripción</option>
|
|
<option value="1">Programa de Matemáticas aplicadas y Computación</option>
|
|
<option value="2">Programa de Actuaría</option>
|
|
<option value="3">Programa de Ingeniería Civil</option>
|
|
</Form.Select>
|
|
</>
|
|
;
|
|
case "operador": return <>
|
|
<Form>
|
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
|
<Form.Control type="email" placeholder="Correo" />
|
|
<Form.Text className="text-muted">
|
|
</Form.Text>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="formBasicPassword">
|
|
<Form.Control type="password" placeholder="Contraseña" />
|
|
</Form.Group>
|
|
</Form>
|
|
</>
|
|
;
|
|
case "admin": return <>
|
|
<Form>
|
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
|
<Form.Control type="email" placeholder="Correo" />
|
|
<Form.Text className="text-muted">
|
|
</Form.Text>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="formBasicPassword">
|
|
<Form.Control type="password" placeholder="Contraseña" />
|
|
</Form.Group>
|
|
</Form>
|
|
</>
|
|
;
|
|
}
|
|
})()}
|
|
</Col>
|
|
</Row>
|
|
<br />
|
|
<Row className="justify-content-md-center">
|
|
<Col>
|
|
{(() => {
|
|
if(radio==="profesor")
|
|
return(
|
|
<p className="text-center">
|
|
<a href="./profesores">
|
|
<Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
|
|
</a>
|
|
</p>
|
|
)
|
|
else if(radio==="operador")
|
|
return(
|
|
<p className="text-center">
|
|
<a href="./operador">
|
|
<Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
|
|
</a>
|
|
</p>
|
|
)
|
|
else if(radio==="admin")
|
|
return(
|
|
<p className="text-center">
|
|
<a href="./admin">
|
|
<Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
|
|
</a>
|
|
</p>
|
|
)
|
|
})()}
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default App; |