register page

package.json

@@ -6,6 +6,8 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@iconify/icons-eva": "^1.1.0",
+    "@iconify/react": "^3.1.3",
     "@mui/icons-material": "^5.1.0",
     "@mui/lab": "^5.0.0-alpha.59",
     "@mui/material": "^5.1.0",

src/Components/Register/AuthLayout.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { Link as RouterLink } from 'react-router-dom';
+// material
+import { styled } from '@mui/material/styles';
+import { Typography } from '@mui/material';
+// components
+import Logo  from '../../Images/logo.png'
+import Image from 'react-bootstrap/Image'
+// ----------------------------------------------------------------------
+
+const HeaderStyle = styled('header')(({ theme }) => ({
+    top: 0,
+    zIndex: 9,
+    lineHeight: 0,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    padding: theme.spacing(3),
+    justifyContent: 'space-between',
+    [theme.breakpoints.up('md')]: {
+        alignItems: 'flex-start',
+        padding: theme.spacing(7, 5, 0, 7)
+    }
+}));
+
+// ----------------------------------------------------------------------
+
+AuthLayout.propTypes = {
+    children: PropTypes.node
+};
+
+export default function AuthLayout({ children }) {
+    return (
+        <HeaderStyle>
+            <RouterLink to="/">
+                <Image style={{ width : '30%'}} fluid={true} alt="register logo" src={Logo}/>
+            </RouterLink>
+
+            <div>
+                <Typography
+                    variant="body2"
+                    sx={{
+                        mt: { md: -2 }
+                    }}
+                >
+                    {children}
+                </Typography>
+            </div>
+        </HeaderStyle>
+    );
+}

src/Components/Register/MHidden.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+// material
+import { useMediaQuery } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+MHidden.propTypes = {
+    children: PropTypes.node,
+    width: PropTypes.oneOf([
+        'xsDown',
+        'smDown',
+        'mdDown',
+        'lgDown',
+        'xlDown',
+        'xsUp',
+        'smUp',
+        'mdUp',
+        'lgUp',
+        'xlUp'
+    ]).isRequired
+};
+
+export default function MHidden({ width, children }) {
+    const breakpoint = width.substring(0, 2);
+
+    const hiddenUp = useMediaQuery((theme) => theme.breakpoints.up(breakpoint));
+    const hiddenDown = useMediaQuery((theme) => theme.breakpoints.down(breakpoint));
+
+    if (width.includes('Down')) {
+        return hiddenDown ? null : children;
+    }
+
+    if (width.includes('Up')) {
+        return hiddenUp ? null : children;
+    }
+
+    return null;
+}

src/Components/Register/Page.jsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { Box } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+const Page = forwardRef(({ children, title = '', ...other }, ref) => (
+    <Box ref={ref} {...other}>
+        <title>{title}</title>
+        {children}
+    </Box>
+));
+
+export default Page;

src/Components/Register/RegisterForm.jsx

@@ -0,0 +1,127 @@
+import * as Yup from 'yup';
+import { useState } from 'react';
+import { useFormik, Form, FormikProvider } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import { Icon } from '@iconify/react';
+// material
+import { Stack, TextField, IconButton, InputAdornment } from '@mui/material';
+import eyeFill from '@iconify/icons-eva/eye-fill';
+import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
+import Button from '@mui/material/Button';
+
+// import { Visibility as eyeFill ,VisibilityOff as eyeOffFill } from '@mui/icons-material/';
+// ----------------------------------------------------------------------
+
+export function RegisterForm() {
+    const navigate = useNavigate();
+    const [showPassword, setShowPassword] = useState(false);
+
+    const RegisterSchema = Yup.object().shape({
+        firstName: Yup.string()
+        .min(2, 'Too Short!')
+        .max(50, 'Too Long!')
+        .required('First name required'),
+        lastName: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Last name required'),
+        email: Yup.string().email('Email must be a valid email address').required('Email is required'),
+        password: Yup.string().required('Password is required')
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            firstName: '',
+            lastName: '',
+            email: '',
+            password: ''
+        },
+        validationSchema: RegisterSchema,
+        onSubmit: () => {
+            navigate('/dashboard', { replace: true });
+        }
+    });
+
+    const { errors, touched, handleSubmit, getFieldProps } = formik;
+
+    return (
+        <FormikProvider value={formik}>
+            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+                <Stack spacing={3}>
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                        <TextField
+                            fullWidth
+                            label="First name"
+                            {...getFieldProps('firstName')}
+                            error={Boolean(touched.firstName && errors.firstName)}
+                            helperText={touched.firstName && errors.firstName}
+                        />
+
+                        <TextField
+                            fullWidth
+                            label="Last name"
+                            {...getFieldProps('lastName')}
+                            error={Boolean(touched.lastName && errors.lastName)}
+                            helperText={touched.lastName && errors.lastName}
+                        />
+                    </Stack>
+
+                    <TextField
+                        fullWidth
+                        autoComplete="username"
+                        type="email"
+                        label="Email address"
+                        {...getFieldProps('email')}
+                        error={Boolean(touched.email && errors.email)}
+                        helperText={touched.email && errors.email}
+                    />
+
+
+
+                    <TextField
+                        fullWidth
+                        autoComplete="current-password"
+                        type={showPassword ? 'text' : 'password'}
+                        label="Password"
+                        {...getFieldProps('password')}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
+                                        <Icon icon={showPassword ? eyeFill : eyeOffFill} />
+                                    </IconButton>
+                                </InputAdornment>
+                            )
+                        }}
+                        error={Boolean(touched.password && errors.password)}
+                        helperText={touched.password && errors.password}
+                    />
+
+                    <TextField
+                        fullWidth
+                        autoComplete="current-password"
+                        type={showPassword ? 'text' : 'password'}
+                        label="Password"
+                        {...getFieldProps('password')}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
+                                        <Icon icon={showPassword ? eyeFill : eyeOffFill} />
+                                    </IconButton>
+                                </InputAdornment>
+                            )
+                        }}
+                        error={Boolean(touched.password && errors.password)}
+                        helperText={touched.password && errors.password}
+                    />
+
+                    <Button 
+                        size="large"
+                        style={{ backgroundColor : '#d32f2f'}}
+                        variant="contained" >
+                        Registrarme
+                    </Button>
+
+                </Stack>
+            </Form>
+        </FormikProvider>
+    );
+}

src/Components/Routes.js

@@ -3,6 +3,7 @@ import { Routes, Route, Navigate } from "react-router-dom";
 
 import { Dashboard } from "./Dashboard";
 import { Login } from '../Pages/Login'
+import { Register } from '../Pages/Register'
 import { Home } from '../Pages/Home'
 import { Puestos } from '../Pages/Puestos'
 import { Contras  } from '../Pages/Contras'
@@ -27,6 +28,7 @@ export default function MyRoutes () {
             <Route path="/" element={<Navigate to='/login'/>} />
             <Route path="login" element={<Login/>} />
             <Route path="password/recuperar" element={<RestorePassword/>} />
+            <Route path="register" element={<Register/>} />
             <Route 
                 path="dashboard" 
                 element={

src/Components/Sidebar.js

@@ -1,108 +0,0 @@
-import React from 'react'
-// import { Container, Row, Col } from 'react-bootstrap'
-import Logo from '../Images/logo.png';
-
-export function SideBar () {
-    return(
-        <div className="wrapper">
-            <nav id="sidebar">
-                <div className="sidebar-header">
-                    <div className="width_img">
-                        <img src={Logo} alt=""/>
-                    </div>
-                </div>
-                <ul className="list-unstyled components">
-                    <li className="cabecera_li">MENÚ</li>
-                    <li id="home" className="active">
-                        <a href="index.php"><i className="fas fa-home"></i>Inicio</a>
-                    </li>
-                    <li id="plazas">
-                        <a href="/"><i className="far fa-list-alt"></i>Puestos</a>
-                    </li>
-                    <li id="notificaciones">
-                        <a href="/"><i className="fas fa-shield-alt"></i>Contraseñas</a>
-                    </li>
-                    <li id="expedientes">
-                        <a href="/"><i className="far fa-user"></i>Expedientes</a>
-                    </li>
-                    <li id="resultados">
-                        <a href="/"><i className="fas fa-chart-line"></i>Resultados</a>
-                    </li>
-                    <li id="pruebas">
-                        <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="fas fa-paperclip"></i>Pruebas</a>
-                        <ul className="collapse list-unstyled" id="pageSubmenu2">
-                            <li id="crearprueba">
-                                <a href="nueva-prueba.php">Crear prueba</a>
-                            </li>
-                            <li id="listado">
-                                <a href="pruebas.php">Listado de pruebas</a>
-                            </li>
-                            <li id="aplicar">
-                                <a href="asignar.php">Aplicar</a>
-                            </li>
-                            <li id="respuestas">
-                                <a href="/">Respuestas</a>
-                            </li>
-                            <li id="calificaciones">
-                                <a href="/">Calificaciones</a>
-                            </li>
-                        </ul>
-                    </li>
-                    <li id="configuraciones">
-                        <a href="/"><i className="fas fa-cog"></i>Configuraciones</a>
-                    </li>
-                    <li id="historial">
-                        <a href="/"><i className="far fa-clock"></i>Historial</a>
-                    </li>
-                    <li className="cabecera_li">EXTRAS</li>
-                    <li id="elementos">
-                        <a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="fas fa-star"></i>Elementos</a>
-                        <ul className="collapse list-unstyled" id="pageSubmenu3">
-                            <li>
-                                <a href="lockscreen.php" target="_blank">Pantalla Bloqueada</a>
-                            </li>
-                            <li>
-                                <a href="404.php" target="_blank">Error 404</a>
-                            </li>
-                            <li>
-                                <a href="500.php" target="_blank">Error 500</a>
-                            </li>
-                            <li>
-                                <a href="forgot-password.php" target="_blank">Contraseña Olvidada</a>
-                            </li>
-                        </ul>
-                    </li>
-                    <li id="tutoriales">
-                        <a href="#pageSubmenu4" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="far fa-bookmark"></i>Tutoriales</a>
-                        <ul className="collapse list-unstyled" id="pageSubmenu4">
-                            <li>
-                                <a href="/">Manual de Uso Básico</a>
-                            </li>
-                            <li>
-                                <a href="/">¿Qué evalúa cada test?</a>
-                            </li>
-                            <li>
-                                <a href="/">Ayuda General</a>
-                            </li>
-                        </ul>
-                    </li>
-                    <li id="asistencia">
-                        <a href="#pageSubmenu5" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="fas fa-headphones"></i>Asistencia Técnica</a>
-                        <ul className="collapse list-unstyled" id="pageSubmenu5">
-                            <li>
-                                <a href="/">Soporte En Línea</a>
-                            </li>
-                            <li>
-                                <a href="/">Soporte Por Ticket</a>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-
-            </nav>
-
-        </div>
-
-
-    )
-}

src/Pages/Login.jsx

@@ -180,7 +180,7 @@ export function Login() {
                                     </Link>
                                 </Grid>
                                 <Grid item>
-                                    <Link className="login_link" to='/'>
+                                    <Link className="login_link" to='/register'>
                                         {"¿No tienes cuenta? Regístrate"}
                                     </Link>
                                 </Grid>

src/Pages/Register.jsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+import { styled } from '@mui/material/styles';
+import { Box, Card, Link, Container, Typography } from '@mui/material';
+
+// import AuthLayout from '../layouts/AuthLayout';
+import AuthLayout from '../Components/Register/AuthLayout';
+
+import Page from '../Components/Register/Page';
+import { RegisterForm } from '../Components/Register/RegisterForm';
+// import MHidden from '../Components/Register/MHidden';
+
+import Mock from  '../Images/register_mok.png'
+
+const RootStyle = styled(Page)(({ theme }) => ({
+    [theme.breakpoints.up('md')]: {
+        display: 'flex'
+    }
+}));
+
+const SectionStyle = styled(Card)(({ theme }) => ({
+    width: '100%',
+    maxWidth: 464,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    margin: theme.spacing(2, 0, 2, 2)
+}));
+
+const ContentStyle = styled('div')(({ theme }) => ({
+    maxWidth: 480,
+    margin: 'auto',
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: theme.spacing(12, 0)
+}));
+
+// ----------------------------------------------------------------------
+
+export function Register() {
+    return (
+        <RootStyle title="Register | Minimal-UI">
+            <AuthLayout>
+                Already have an account? &nbsp;
+                <Link underline="none" variant="subtitle2" component={RouterLink} to="/login">
+                    Login
+                </Link>
+            </AuthLayout>
+
+            <SectionStyle>
+                <Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
+                    Efectividad para tus procesos de reclutamiento
+                </Typography>
+                <img alt="register" src={Mock} />
+            </SectionStyle>
+
+            <Container>
+                <ContentStyle>
+                    <Box sx={{ mb: 5 }}>
+                        <Typography variant="h4" gutterBottom>
+                            Empieza de forma gratuita.
+                        </Typography>
+                        <Typography sx={{ color: 'text.secondary' }}>
+                            Gratis para siempre. No se necesita tarjeta de crédito.
+                        </Typography>
+                    </Box>
+
+
+                    <RegisterForm />
+
+                    <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
+                        By registering, I agree to Minimal&nbsp;
+                        <Link underline="always" sx={{ color: 'text.primary' }}>
+                            Terms of Service
+                        </Link>
+                        &nbsp;and&nbsp;
+                        <Link underline="always" sx={{ color: 'text.primary' }}>
+                            Privacy Policy
+                        </Link>
+                        .
+                    </Typography>
+
+                    <div>
+                        <Typography variant="subtitle2" sx={{ mt: 3, textAlign: 'center' }}>
+                            Already have an account?&nbsp;
+                            <Link to="/login" component={RouterLink}>
+                                Login
+                            </Link>
+                        </Typography>
+                    </div>
+                </ContentStyle>
+            </Container>
+        </RootStyle>
+    );
+}