initial commit

frontend/src/App.css

@@ -0,0 +1,76 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.topnav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.topnav a.active {
+  background-color: #0468aa;
+  color: white;
+}
+
+.loader {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  width: 130px;
+  height: 130px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0%  { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

frontend/src/App.js

@@ -0,0 +1,34 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import './App.css';
+import IntegrantesComponent from './views/IntegrantesComponent';
+import SignInComponent from './views/SignInComponent';
+import NavbarComponent from './views/NavbarComponent';
+import HorarioComponent from './views/HorarioComponent';
+import AgendarComponent from './views/Agendar/AgendarComponent';
+import AgendarHorarioComponent from './views/Agendar/AgendarHorarioComponent';
+import AgendarConfirmarComponent from './views/Agendar/AgendarConfirmarComponent';
+import BienvenidoComponent from './views/BienvenidoComponent';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <NavbarComponent />
+      <Routes>
+        <Route exact path="/" element={<Navigate replace to="/bienvenido" />} />
+
+        <Route path="/bienvenido" element={<BienvenidoComponent />} />
+
+        <Route path="/integrantes" element={<IntegrantesComponent />} />
+
+        <Route path="/agendar" element={<AgendarComponent />} />
+        <Route path="/agendar/horario" element={<AgendarHorarioComponent />} />
+        <Route path="/agendar/confirmar" element={<AgendarConfirmarComponent />} />
+
+        <Route path="/admin" element={<SignInComponent />} />
+        <Route path="/admin/horario" element={<HorarioComponent />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/Rut.js

@@ -0,0 +1,62 @@
+function limpiar(rut) {
+    rut = rut.replace(/\./g, '').replace(/-/g, '');
+    rut = rut.toLowerCase();
+    return rut;
+}
+
+function validar(rut) {
+    rut = limpiar(rut);
+    
+    let dv = rut.substr(rut.length - 1, 1);
+    rut = rut.substr(0, rut.length - 1);
+
+    if (isNaN(rut)) {
+        return false;
+    }
+
+    if (rut > 50000000) {
+        return false;
+    }
+
+    if (dv === generarVerificador(rut)) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+function generarVerificador(rut) {
+    let multiplier = 2;
+    let sum = 0;
+    let remainder = 0;
+    let division = 0;
+
+    for (let i = rut.length - 1; i >= 0; i--) {
+        sum = sum + (rut.substr(i, 1) * multiplier);
+        multiplier++;
+        if (multiplier === 8) {
+            multiplier = 2;
+        }
+    }
+
+    division = Math.floor(sum / 11);
+    division = division * 11;
+    remainder = sum - division;
+
+    if (remainder !== 0) {
+        remainder = 11 - remainder;
+    }
+
+    if (remainder === 10) {
+        return "k";
+    }
+    else {
+        return remainder.toString(10);
+    }
+}
+
+module.exports = {
+    limpiar,
+    validar
+};

frontend/src/Vigencia.js

@@ -0,0 +1,46 @@
+function check(axios, location, navigate) {
+    const token = localStorage.getItem('TOKEN_PROYECTO');
+
+    const config = {
+        headers: { Authorization: `Bearer ${token}` }
+    };
+    
+    const bodyParameters = {
+        key: "value"
+    };
+
+    axios.post(
+        "http://localhost:5000/api/usuario/vigencia",
+        bodyParameters,
+        config
+    )
+    .then(
+        (response) => {
+            if (response.status === 200 && location.pathname === '/admin') {
+                navigate('/admin/horario', { replace: true });
+            }
+        }            
+    )
+    .catch((err) => {
+        if (err.response) {
+            if (err.response.status === 401) {
+                localStorage.removeItem('TOKEN_PROYECTO');
+                if (location.pathname !== '/admin') {
+                    navigate('/admin', { replace: true });
+                }
+            }
+        }
+        else if (err.request) {
+            // client never received a response, or request never left
+        } 
+        else {
+            // anything else
+        }
+    });
+
+    return true;
+}
+
+module.exports = {
+    check
+};

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

frontend/src/views/Agendar/AgendarComponent.js

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Container, makeStyles, Select, InputLabel, MenuItem, FormControl, Grid, Box, Button, TextField } from '@material-ui/core';
+import axios from 'axios';
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+
+const Rut = require('../../Rut');
+
+const MySwal = withReactContent(Swal);
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    gridButton: {
+        textAlign: 'center'
+    },
+    button: {
+        [theme.breakpoints.down('xs')]: {
+            width: '100%'
+        }
+    }
+}));
+
+export default function AgendarComponent() {
+    const navigate = useNavigate();
+
+    const apiUrl = "http://localhost:5000/api";
+    const apiUrlEspecialidad = "/especialidad";
+    const apiUrlEspecialista = "/especialista";
+
+    const [especialidadOpen, setEspecialidadOpen] = useState(false);
+    const [especialistaOpen, setEspecialistaOpen] = useState(false);
+
+    const [rut, setRut] = useState("");
+
+    const [especialidades, setEspecialidades] = useState([]);
+    const [especialidad, setEspecialidad] = useState("");
+
+    const [especialistas, setEspecialistas] = useState([]);
+    const [especialista, setEspecialista] = useState("");
+    const [especialistaDisabled, setEspecialistaDisabled] = useState(true);
+
+    const [formDisabled, setFormDisabled] = useState(true);
+
+    const handleEspecialidadClose = () => {
+        setEspecialidadOpen(false);
+    };
+
+    const handleEspecialidadOpen = () => {
+        setEspecialidadOpen(true);
+    };
+
+    const handleEspecialidadChange = (event) => {
+        setEspecialidad(event.target.value);
+    };
+
+    const handleEspecialistaClose = () => {
+        setEspecialistaOpen(false);
+    };
+
+    const handleEspecialistaOpen = () => {
+        setEspecialistaOpen(true);
+    };
+
+    const handleEspecialistaChange = (event) => {
+        setEspecialista(event.target.value);
+    };
+
+    const handleRutChange = (event) => {
+        let value = event.target.value.replace(/\./g, '').replace('-', '');
+        if (value.match(/[^0-9k]/ig)) {
+            value = value.replace(value, '');
+        }
+        if (value.match(/^(\d{2})(\d{3}){2}(\w{1})$/)) {
+            value = value.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4');
+        }
+        else if (value.match(/^(\d)(\d{3}){2}(\w{0,1})$/)) {
+            value = value.replace(/^(\d)(\d{3})(\d{3})(\w{0,1})$/, '$1.$2.$3-$4');
+        }
+        else if (value.match(/^(\d)(\d{3})(\d{0,2})$/)) {
+            value = value.replace(/^(\d)(\d{3})(\d{0,2})$/, '$1.$2.$3');
+        }
+        else if (value.match(/^(\d)(\d{0,2})$/)) {
+            value = value.replace(/^(\d)(\d{0,2})$/, '$1.$2');
+        }
+        setRut(value);
+    }
+
+    async function getEspecialidades() {
+        try {
+            const response = await axios.get(apiUrl + apiUrlEspecialidad);
+            if (response.status === 200) {
+                setEspecialidades(response.data.especialidades);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+
+    async function getEspecialistas(especialidad) {
+        try {
+            const response = await axios.get(apiUrl + apiUrlEspecialista +  apiUrlEspecialidad + "/" + especialidad);
+            if (response.status === 200) {
+                setEspecialistas(response.data.especialistas);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+
+    function guardar() {
+        if (!Rut.validar(rut)) {
+            MySwal.fire({
+                title: <p>Error!</p>,
+                text: "El RUT ingresado no es valido!",
+                icon: 'error'
+            });
+        }
+        else {
+            navigate('/agendar/horario',
+                {
+                    state: {
+                        rut: rut,
+                        especialista: especialista
+                    } 
+                }
+            );
+        }
+    }
+
+    useEffect(() => {
+        if (especialidad === "") {
+            setEspecialistaDisabled(true);
+            setEspecialista("");
+        }
+        else {
+            getEspecialistas(especialidad);
+            setEspecialistaDisabled(false);
+        }
+    }, [especialidad]);
+
+    useEffect(() => {
+        if (especialista === "") {
+            setFormDisabled(true);
+        }
+        else {
+            setFormDisabled(false);
+        }
+    }, [especialista]);
+
+    useEffect(() => {
+        getEspecialidades();
+    }, []);
+
+    const classes = useStyles();
+
+    return (
+        <Container component="main" maxWidth="xs">
+            <div className={classes.paper}>
+                <Grid container spacing={2}>
+                    <Grid item xs={12}>
+                        <TextField
+                            id="run"
+                            label="RUT"
+                            value={rut}
+                            onChange={handleRutChange}
+                            variant="outlined"
+                            inputProps={{ maxLength: 12 }}
+                            fullWidth
+                        />
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Box mt={2}>
+                            <FormControl fullWidth variant="outlined">
+                                <InputLabel>Especialidad</InputLabel>
+                                <Select
+                                    open={especialidadOpen}
+                                    label="Especialidad"
+                                    onClose={handleEspecialidadClose}
+                                    onOpen={handleEspecialidadOpen}
+                                    value={especialidad}
+                                    onChange={handleEspecialidadChange}
+                                >
+                                    <MenuItem value=""></MenuItem>
+                                    {especialidades.map((especialidad) => (
+                                        <MenuItem key={especialidad._id} value={especialidad._id}>{especialidad.descripcion}</MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Box mt={2}>
+                            <FormControl fullWidth variant="outlined">
+                                <InputLabel>Especialista</InputLabel>
+                                <Select
+                                    open={especialistaOpen}
+                                    label="Especialista"
+                                    onClose={handleEspecialistaClose}
+                                    onOpen={handleEspecialistaOpen}
+                                    value={especialista}
+                                    onChange={handleEspecialistaChange}
+                                    disabled={especialistaDisabled}
+                                >
+                                    <MenuItem value=""></MenuItem>
+                                    {especialistas.map((especialista) => (
+                                        <MenuItem key={especialista._id} value={especialista._id}>{especialista.nombre}</MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={12} md={12} className={classes.gridButton}>
+                        <Box mt={2}>
+                            <Button className={classes.button} variant="contained" color="primary" disabled={formDisabled} onClick={guardar}>Siguiente</Button>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </div>
+        </Container>
+    );
+}

frontend/src/views/Agendar/AgendarConfirmarComponent.js

@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Container, makeStyles, Grid, Button, Card, CardContent, Box, Typography } from '@material-ui/core';
+import axios from 'axios';
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+
+const Rut = require('../../Rut');
+
+const MySwal = withReactContent(Swal);
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    cardGrid: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    card: {
+        [theme.breakpoints.up('md')]: {
+            minWidth: 600
+        }
+    },
+    gridTitle: {
+        textAlign: 'center'
+    },
+    gridButton: {
+        textAlign: 'right'
+    }
+}));
+
+export default function AgendarConfirmarComponent() {
+    const {state} = useLocation();
+    const navigate = useNavigate();
+
+    const apiUrl = "http://localhost:5000/api";
+    const apiUrlDisponibilidad = "/disponibilidad";
+    const apiUrlCita = "/cita";
+
+    const [rut, setRut] = useState("");
+    const [disponibilidad, setDisponibilidad] = useState("");
+    const [disponibilidadInfo, setDisponibilidadInfo] = useState(
+        {
+            "especialista":
+                {
+                    "nombre":"",
+                    "especialidad":
+                        {
+                            "descripcion":"",
+                        }
+                },
+            "fecha": "",
+            "horario":""
+        }
+    );
+
+    useEffect(() => {
+        if (state == null) {
+            navigate('/agendar', { replace: true });
+            return;
+        }
+
+        const {
+            rut,
+            disponibilidad
+        } = state;
+
+        console.log(state);
+
+        setRut(rut);
+        setDisponibilidad(disponibilidad);
+    }, [state, navigate]);
+
+    useEffect(() => {
+        async function getDisponibilidad() {
+            try {
+                if (disponibilidad !== "") {
+                    const response = await axios.get(apiUrl + apiUrlDisponibilidad + "/" + disponibilidad);
+                    if (response.status === 200) {
+                        response.data.disponibilidad.fecha = new Date(response.data.disponibilidad.fecha).toLocaleDateString("es-CL",
+                            {
+                                weekday: 'long',
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric' 
+                            }
+                        );
+
+                        response.data.disponibilidad.horario = response.data.disponibilidad.horario + " horas"
+                        setDisponibilidadInfo(response.data.disponibilidad);
+                    }
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+
+        getDisponibilidad();
+    }, [disponibilidad]);
+
+    function confirmar() {
+        if (!Rut.validar(rut)) {
+            MySwal.fire({
+                title: <p>Error!</p>,
+                text: "El RUT ingresado no es valido!",
+                icon: 'error'
+            });
+        }
+        else {
+            cambiarDisponiblidad();
+        }
+    }
+
+    function cambiarDisponiblidad() {
+        axios.put(apiUrl + apiUrlDisponibilidad + '/' + disponibilidad,
+            {
+                disponible: false
+            }
+        )
+        .then(function (response) {
+            if (response.status === 200) {
+                guardarCita();
+            }
+            else {
+                MySwal.fire({
+                    title: <p>Error!</p>,
+                    text: response.data.mensaje,
+                    icon: 'error'
+                });
+            }
+        })
+        .catch(function (error) {
+            MySwal.fire({
+                title: <p>Error!</p>,
+                text: error.response.data.mensaje,
+                icon: 'error'
+            });
+        });
+    }
+
+    function guardarCita() {
+        axios.post(apiUrl + apiUrlCita,
+            {
+                rut: rut,
+                disponibilidad: disponibilidad
+            }
+        )
+        .then(function (response) {
+            if (response.status === 200) {
+                MySwal.fire({
+                    title: <p>Confirmada!</p>,
+                    text: 'La cita fue confirmada!',
+                    icon: 'success',
+                    confirmButtonText: 'Cerrar'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        navigate('/bienvenido', { replace: true });
+                    }
+                });
+            }
+            else {
+                MySwal.fire({
+                    title: <p>Error!</p>,
+                    text: response.data.mensaje,
+                    icon: 'error'
+                });
+            }
+        })
+        .catch(function (error) {
+            MySwal.fire({
+                title: <p>Error!</p>,
+                text: error.response.data.mensaje,
+                icon: 'error'
+            });
+        });
+    }
+
+    const classes = useStyles();
+
+    return (
+        <Container component="main" maxWidth="sm">
+            <div className={classes.paper}>
+                <Grid className={classes.cardGrid} container spacing={2}>
+                    <Box key={disponibilidad._id} mt={2}>
+                        <Card className={classes.card} variant="outlined">
+                            <CardContent>
+                                <Grid container spacing={2}>
+                                    <Grid className={classes.gridTitle} item xs={12}>
+                                        <Typography variant="h4" className={classes.boldFont} gutterBottom>
+                                            Confirmación
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        {disponibilidadInfo.fecha} {disponibilidadInfo.horario}
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        {disponibilidadInfo.especialista.especialidad.descripcion}
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        {disponibilidadInfo.especialista.nombre}
+                                    </Grid>
+                                    <Grid className={classes.gridButton} item xs={12}>
+                                        <Button
+                                            variant="contained"
+                                            color="primary"
+                                            onClick={confirmar}
+                                        >
+                                            Confirmar
+                                        </Button>
+                                    </Grid>
+                                </Grid>
+                            </CardContent>
+                        </Card>
+                    </Box>
+                </Grid>
+            </div>
+        </Container>
+    );
+}

frontend/src/views/Agendar/AgendarHorarioComponent.js

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Container, makeStyles, Grid, Button, Card, CardContent, Box } from '@material-ui/core';
+import axios from 'axios';
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    cardGrid: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    card: {
+        [theme.breakpoints.up('md')]: {
+            minWidth: 600
+        }
+    },
+    gridButton: {
+        textAlign: 'right'
+    }
+}));
+
+export default function AgendarHorarioComponent() {
+    const {state} = useLocation();
+    const navigate = useNavigate();
+
+    const apiUrl = "http://localhost:5000/api";
+    const apiUrlDisponibilidad = "/disponibilidad";
+    const apiUrlEspecialista = "/especialista";
+
+    const [rut, setRut] = useState("");
+    const [especialista, setEspecialista] = useState("");
+
+    const [disponibilidades, setDisponibilidades] = useState([]);
+
+    useEffect(() => {
+        if (state == null) {
+            navigate('/agendar', { replace: true });
+            return;
+        }
+
+        const {
+            rut,
+            especialista
+        } = state;
+
+        setRut(rut);
+        setEspecialista(especialista);
+    }, [state, navigate]);
+
+    useEffect(() => {
+        async function getDisponibilidades() {
+            try {
+                if (especialista !== "") {
+                    const response = await axios.get(apiUrl + apiUrlDisponibilidad + apiUrlEspecialista + "/" + especialista);
+                    if (response.status === 200) {
+                        let newDisponibilidades = [...response.data.disponibilidades];
+                        for (let i = newDisponibilidades.length - 1; i >= 0; i--) {
+                            if (new Date(newDisponibilidades[i].fecha) < new Date().setHours(0, 0, 0, 0) || !newDisponibilidades[i].disponible) {
+                                newDisponibilidades.splice(i, 1);
+                            }
+                        }
+                        setDisponibilidades(newDisponibilidades);
+                    }
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+
+        getDisponibilidades();
+    }, [especialista]);
+
+    function confirmar(id) {
+        navigate('/agendar/confirmar',
+            {
+                state: {
+                    rut: rut,
+                    disponibilidad: id
+                } 
+            }
+        );
+    }
+
+    const classes = useStyles();
+
+    return (
+        <Container component="main" maxWidth="sm">
+            <div className={classes.paper}>
+                <Grid className={classes.cardGrid} container spacing={2}>
+                    {disponibilidades.map((disponibilidad) => (
+                        <Box key={disponibilidad._id} mt={2}>
+                            <Card className={classes.card} variant="outlined">
+                                <CardContent>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={8}>
+                                            {new Date(disponibilidad.fecha).toLocaleDateString("es-CL",
+                                                {
+                                                    weekday: 'long',
+                                                    year: 'numeric',
+                                                    month: 'long',
+                                                    day: 'numeric' 
+                                                })} {disponibilidad.horario} horas
+                                        </Grid>
+                                        <Grid className={classes.gridButton} item xs={4}>
+                                            <Button
+                                                fullWidth
+                                                variant="contained"
+                                                color="primary"
+                                                onClick={() => confirmar(disponibilidad._id)}
+                                            >
+                                                Confirmar
+                                            </Button>
+                                        </Grid>
+                                    </Grid>
+                                </CardContent>
+                            </Card>
+                        </Box>
+                    ))}
+                </Grid>
+            </div>
+        </Container>
+    );
+}

frontend/src/views/BienvenidoComponent.js

@@ -0,0 +1,55 @@
+import { Container, makeStyles, Grid, Button, Card, CardContent, Box, Typography } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    cardGrid: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    card: {
+        [theme.breakpoints.up('md')]: {
+            minWidth: 600
+        }
+    },
+    gridTitle: {
+        textAlign: 'center'
+    },
+    gridButton: {
+        textAlign: 'right'
+    }
+}));
+
+export default function BienvenidoComponent() {
+    const classes = useStyles();
+
+    return (
+        <Container component="main" maxWidth="md">
+            <div className={classes.paper}>
+                <Grid className={classes.cardGrid} container spacing={2}>
+                    <Box mt={2}>
+                        <Card className={classes.card} variant="outlined">
+                            <CardContent>
+                                <Grid container spacing={2}>
+                                    <Grid className={classes.gridTitle} item xs={12}>
+                                        <Typography variant="h5" className={classes.boldFont} gutterBottom>
+                                            Bienvenido a sistema de agendamiento de Clínica Bio Bio
+                                        </Typography>
+                                    </Grid>
+                                    <Grid className={classes.gridTitle} item xs={12}>
+                                        <img src="logo.png" alt="logo de clínica bio bio" />
+                                    </Grid>
+                                </Grid>
+                            </CardContent>
+                        </Card>
+                    </Box>
+                </Grid>
+            </div>
+        </Container>
+    );
+}

frontend/src/views/HorarioComponent.js

@@ -0,0 +1,312 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Container, makeStyles, Select, InputLabel, MenuItem, FormControl, Grid, Box, FormControlLabel, Checkbox, Button } from '@material-ui/core';
+import DateFnsUtils from '@date-io/date-fns';
+import { KeyboardDatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
+import axios from 'axios';
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+
+const MySwal = withReactContent(Swal);
+
+const vigencia = require('../Vigencia');
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    gridButton: {
+        textAlign: 'center'
+    },
+    button: {
+        [theme.breakpoints.down('sm')]: {
+            width: '100%'
+        }
+    }
+}));
+
+const hoy = new Date();
+
+export default function HorarioComponent() {
+    const navigate = useNavigate();
+
+    const location = useLocation();
+
+    const apiUrl = "http://localhost:5000/api";
+    const apiUrlEspecialista = "/especialista";
+    const apiUrlDisponibilidad = "/disponibilidad";
+
+    const [date, setDate] = useState(new Date());
+    const [open, setOpen] = useState(false);
+
+    const [especialistas, setEspecialistas] = useState([]);
+    const [especialista, setEspecialista] = useState("");
+
+    const [checkBoxes, setCheckBoxes] = useState([]);
+    const [checkAll, setCheckAll] = useState(false);
+    const [formDisabled, setFormDisabled] = useState(true);
+
+    const classes = useStyles();
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleChange = (event) => {
+        setEspecialista(event.target.value);
+    };
+
+    const handleDateChange = (date) => {
+        setDate(date);
+    };
+
+    const handleCheckChange = index => event => {
+        let newCheckBoxes = [...checkBoxes];
+        newCheckBoxes[index] = {
+            id: checkBoxes[index].id,
+            horario: checkBoxes[index].horario,
+            checked: event.target.checked
+        };
+        setCheckBoxes(newCheckBoxes);
+    };
+
+    const handleCheckAllChange = event => {
+        let newCheckBoxes = [...checkBoxes];
+        for (let i = 0; i < newCheckBoxes.length; i++) {
+            newCheckBoxes[i].checked = !checkAll;
+        }
+        setCheckBoxes(newCheckBoxes);
+        setCheckAll(!checkAll);
+    };
+
+    useEffect(() => {
+        let checked = 0;
+        for (let i = 0; i < checkBoxes.length; i++) {
+            if (checkBoxes[i].checked) {
+                checked++;
+            }
+        }
+        if (checked === checkBoxes.length) {
+            setCheckAll(true);
+        }
+        else {
+            setCheckAll(false);
+        }
+    }, [checkBoxes]);
+
+    useEffect(() => {
+        if (especialista === "") {
+            let newCheckBoxes = [...checkBoxes];
+            for (let i = 0; i < newCheckBoxes.length; i++) {
+                newCheckBoxes[i].disabled = true;
+            }
+            setCheckBoxes(newCheckBoxes);
+            setFormDisabled(true);
+        }
+        else {
+            let newCheckBoxes = [...checkBoxes];
+            for (let i = 0; i < newCheckBoxes.length; i++) {
+                newCheckBoxes[i].disabled = false;
+            }
+            setCheckBoxes(newCheckBoxes);
+            setFormDisabled(false);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [especialista]);
+
+    async function getEspecialistas() {
+        try {
+            const response = await axios.get(apiUrl + apiUrlEspecialista);
+            if (response.status === 200) {
+                setEspecialistas(response.data.especialistas);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+
+    useEffect(() => {
+        let newChecked = [];
+        for (let i = 8; i <= 21; i++) {
+            for (let j = 0; j <= 45; j = j + 15) {
+                let hora = i.toString();
+                let minuto = j.toString();
+                if (hora.length === 1) {
+                    hora = "0" + hora;
+                }
+                if (minuto.length === 1) {
+                    minuto = minuto + "0";
+                }
+                newChecked.push({
+                    id: hora + ":" + minuto,
+                    horario: hora + ":" + minuto,
+                    checked: false
+                });
+            }
+        }
+        setCheckBoxes(newChecked);
+    }, []);
+
+    useEffect(() => {
+        getEspecialistas();
+        vigencia.check(axios, location, navigate);
+    }, [location, navigate]);
+
+    function guardar() {
+        const token = localStorage.getItem('TOKEN_PROYECTO');
+
+        const config = {
+            headers: { Authorization: `Bearer ${token}` }
+        };
+        
+        let disponibilidades = [];
+        for (let i = 0; i < checkBoxes.length; i++) {
+            if (checkBoxes[i].checked) {
+                disponibilidades.push({
+                    especialista: especialista,
+                    fecha: new Date(date.toDateString()),
+                    horario: checkBoxes[i].horario
+                });
+            }
+        }
+        axios.post(apiUrl + apiUrlDisponibilidad,
+            {
+                disponibilidades: disponibilidades
+            },
+            config
+        )
+        .then(function (response) {
+            if (response.status === 200) {
+                MySwal.fire({
+                    title: <p>Guardados!</p>,
+                    text: 'Los horarios fueron guardados!',
+                    icon: 'success'
+                });
+            }
+            else {
+                MySwal.fire({
+                    title: <p>Error!</p>,
+                    text: response.data.mensaje,
+                    icon: 'error'
+                });
+            }
+        })
+        .catch(function (error) {
+            MySwal.fire({
+                title: <p>Error!</p>,
+                text: error.response.data.mensaje,
+                icon: 'error'
+            });
+        });
+    }
+
+    return (
+        <Container component="main" maxWidth="md">
+            <div className={classes.paper}>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} md={3}>
+                        <Grid container spacing={2}>
+                            <Grid item xs={12} md={12}>
+                                <Box mt={2}>
+                                    <FormControl fullWidth variant="outlined">
+                                        <InputLabel>Especialista</InputLabel>
+                                        <Select
+                                            open={open}
+                                            label="Especialista"
+                                            onClose={handleClose}
+                                            onOpen={handleOpen}
+                                            value={especialista}
+                                            onChange={handleChange}
+                                        >
+                                            <MenuItem value=""></MenuItem>
+                                            {especialistas.map((especialista) => (
+                                                <MenuItem key={especialista._id} value={especialista._id}>{especialista.nombre}</MenuItem>
+                                            ))}
+                                        </Select>
+                                    </FormControl>
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} md={12}>
+                                <Box mt={2}>
+                                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                                        <KeyboardDatePicker
+                                            fullWidth
+                                            key="datePicker"
+                                            disableToolbar
+                                            minDate={hoy}
+                                            disabled={formDisabled}
+                                            variant="inline"
+                                            format="dd/MM/yyyy"
+                                            margin="normal"
+                                            label="Fecha"
+                                            value={date}
+                                            onChange={handleDateChange}
+                                            KeyboardButtonProps={{
+                                                'aria-label': 'cambiar fecha',
+                                            }}
+                                        />
+                                    </MuiPickersUtilsProvider>
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} md={12}>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            key="checkAll"
+                                            checked={checkAll}
+                                            disabled={formDisabled}
+                                            onChange={handleCheckAllChange}
+                                            color="primary"
+                                        />
+                                    }
+                                    label="Habilitar todos"
+                                />
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    <Grid item xs={12} md={9}>
+                        <Box ml={10} mt={1}>
+                            <Grid container spacing={1}>
+                                {checkBoxes.map(function(checkBox, index) {
+                                    let newLine = (<br key={checkBox.id + "newLine"} />);
+                                    if (index % 4 || index === 0) {
+                                        newLine = "";
+                                    }
+                                    return [
+                                        newLine,
+                                        <Grid key={checkBox.id} item xs={12} md={3}>
+                                            <FormControlLabel
+                                                control={
+                                                    <Checkbox
+                                                        checked={checkBox.checked}
+                                                        disabled={formDisabled}
+                                                        onChange={handleCheckChange(index)}
+                                                        color="primary"
+                                                    />
+                                                }
+                                                label={checkBox.horario}
+                                            />
+                                        </Grid>
+                                    ];
+                                })}
+                            </Grid>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={12} md={12} className={classes.gridButton}>
+                        <Box mt={2}>
+                            <Button className={classes.button} variant="contained" color="primary" disabled={formDisabled} onClick={guardar}>Guardar</Button>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </div>
+        </Container>
+    );
+}

frontend/src/views/IntegrantesComponent.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Container, List, ListItem, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    listItem: {
+        alignItems: 'center',
+        justifyContent: 'center'
+        
+    },
+    boldFont: {
+        fontWeight: 'bold'
+    }
+}));
+
+export default function IntegrantesComponent() {
+    const classes = useStyles();
+
+    return (
+        <Container component="main" maxWidth="md">
+            <div className={classes.paper}>
+                <List>
+                    <ListItem className={classes.listItem}>
+                        <Typography variant="h2" className={classes.boldFont} gutterBottom>
+                            Christopher Cromer
+                        </Typography>
+                    </ListItem>
+                    <ListItem className={classes.listItem}>
+                        <Typography variant="h2" className={classes.boldFont} gutterBottom>
+                            Nicolás Vásquez Eyzaguirre
+                        </Typography>
+                    </ListItem>
+                    <ListItem className={classes.listItem}>
+                        <Typography variant="h2" className={classes.boldFont} gutterBottom>
+                            Benjamín Pérez Vallespir
+                        </Typography>
+                    </ListItem>
+                </List>
+            </div>
+        </Container>
+    );
+}

frontend/src/views/NavbarComponent.js

@@ -0,0 +1,12 @@
+import { NavLink } from 'react-router-dom';
+import React from 'react';
+
+export default function NavbarComponent() {    
+    return (
+        <div className="topnav">
+            <NavLink to="/agendar">Agendar</NavLink>
+            <NavLink to="/admin">Admin</NavLink>
+            <NavLink to="/integrantes">Integrantes</NavLink>
+        </div> 
+    );
+}

frontend/src/views/SignInComponent.js

@@ -0,0 +1,150 @@
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import { useForm } from 'react-hook-form';
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const vigencia = require('../Vigencia');
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    form: {
+        width: '100%', // Fix IE 11 issue.
+        marginTop: theme.spacing(1),
+    },
+    submit: {
+        margin: theme.spacing(3, 0, 2),
+    }
+}));
+
+export default function SignInComponent () {
+    const navigate = useNavigate();
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const loadData = async () => {
+            await new Promise((r) => setTimeout(r, 1000));
+            setLoading((loading) => !loading);
+        };
+        
+        loadData();
+    }, []);
+
+    const location = useLocation();
+
+    const { register, handleSubmit } = useForm();
+
+    useEffect(() => {
+        vigencia.check(axios, location, navigate);
+    }, [location, navigate]);
+
+    const onSubmit = data => {
+        axios
+        .post("http://localhost:5000/api/usuario/validar", {
+            mail:data.email,
+            pass:data.password
+        })
+        .then((response) => {
+            if (response.data.mensaje === 'correcto') {
+                localStorage.setItem('TOKEN_PROYECTO', response.data.token);
+                navigate('/admin/horario', { replace: true });
+                return;
+            }
+        })
+        .catch((err) => {
+            if (err.response) {
+                if (err.response.status === 401) {
+                    let motivo= err.response.data.mensaje;
+                    alert(`No autorizado: ${motivo}`);
+                }
+            } 
+            else if (err.request) {
+                // client never received a response, or request never left
+            }
+            else {
+                // anything else
+            }
+        });
+    };
+
+    const classes = useStyles();
+
+    if (loading) {
+        return (
+            <Container component="main" maxWidth="md">
+                <div className={classes.paper}>
+                    <div className="loader-container">
+                        <div className="loader"></div>
+                    </div>
+                </div>
+            </Container>
+        );
+    }
+
+    return (
+        <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+            <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+            </Avatar>
+            <Typography component="h1" variant="h5">Sign in</Typography>
+
+            <form onSubmit={handleSubmit(onSubmit)} className={classes.form} noValidate>
+            <TextField
+                variant="outlined"
+                margin="normal"
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                name="email"
+                autoComplete="email"
+                autoFocus
+                {...register('email', { required: true })}
+            />
+            <TextField
+                variant="outlined"
+                margin="normal"
+                required
+                fullWidth
+                name="password"
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+                {...register('password', { required: true })}
+            />
+            
+            <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                color="primary"
+                className={classes.submit}
+            >
+                Sign In
+            </Button>
+            
+            </form>
+        </div>
+        </Container>
+    );
+}