Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3719 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3719 Rev 3741
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Link, Outlet, useMatch } from 'react-router-dom';
 2 
import { Link, Outlet, useMatch } from 'react-router-dom';
3 
import { useSelector } from 'react-redux';
 3 
import { useSelector } from 'react-redux';
4 
import { AppBar, Box, Container, styled, Toolbar, Typography } from '@mui/material';
 4 
import { AppBar, Box, Button, Container, styled, Toolbar, Typography } from '@mui/material';
5 
import Slider from 'react-slick';
 5 
import Slider from 'react-slick';
Línea -... Línea 6...
- 
 
 6 
 
- 
 
 7 
import 'slick-carousel/slick/slick.css';
- 
 
 8 
import 'slick-carousel/slick/slick-theme.css';
6 
 
 9 
 
- 
 
 10 
import { parse } from '@utils';
Línea 7... Línea 11...
7 
import { parse } from '@utils';
 11 
import { ArrowBackIos, ArrowForwardIos } from '@mui/icons-material';
8 
 
 12 
 
9 
const Section = styled('section')(({ theme }) => ({
 13 
const Section = styled('section')(({ theme }) => ({
10 
  display: 'flex',
 14 
  display: 'flex',
Línea 22... Línea 26...
22 
const AuthPage = styled('div')(({ theme }) => ({
 26 
const AuthPage = styled('div')(({ theme }) => ({
23 
  display: 'flex',
 27 
  display: 'flex',
24 
  flexDirection: 'column',
 28 
  flexDirection: 'column',
25 
  gap: '1rem',
 29 
  gap: '1rem',
26 
  height: '100%',
 30 
  height: '100%',
- 
 
 31 
  minHeight: 'calc(100vh - 120px)',
- 
 
 32 
  justifyContent: 'center',
- 
 
 33 
  alignItems: 'center',
- 
 
 34 
 
27 
  [theme.breakpoints.up('md')]: {
 35 
  [theme.breakpoints.up('md')]: {
28 
    flexDirection: 'row'
 36 
    flexDirection: 'row',
- 
 
 37 
    minHeight: 'calc(100vh - 120px)',
- 
 
 38 
    justifyContent: 'space-between',
- 
 
 39 
    alignItems: 'stretch'
29 
  }
 40 
  }
30 
}));
 41 
}));
Línea 31... Línea 42...
31 
 
 42 
 
32 
const AuthSlider = styled(Slider)(({ theme }) => ({
 43 
const AuthSlider = styled(Slider)(({ theme }) => ({
- 
 
 44 
  maxWidth: '100%',
- 
 
 45 
  width: '100%',
- 
 
 46 
  margin: '0 auto',
- 
 
 47 
  marginBottom: theme.spacing(2),
- 
 
 48 
 
33 
  maxWidth: 'calc(100vw - 2rem)',
 49 
  // Estilos para las imágenes del slider
34 
  '& img': {
 50 
  '& img': {
35 
    maxWidth: '300px !important',
 51 
    maxWidth: '250px !important',
36 
    maxheight: '300px !important',
 52 
    maxHeight: '250px !important',
37 
    display: 'block !important',
 53 
    display: 'block !important',
- 
 
 54 
    margin: 'auto',
- 
 
 55 
    borderRadius: '12px',
- 
 
 56 
    objectFit: 'contain',
- 
 
 57 
    transition: 'transform 0.3s ease',
- 
 
 58 
 
- 
 
 59 
    // Responsive para imágenes - iOS optimizado
- 
 
 60 
    [theme.breakpoints.down('sm')]: {
- 
 
 61 
      maxWidth: '200px !important',
- 
 
 62 
      maxHeight: '200px !important'
- 
 
 63 
    },
- 
 
 64 
 
- 
 
 65 
    // Para pantallas muy pequeñas de iPhone
- 
 
 66 
    '@media (max-width: 390px)': {
- 
 
 67 
      maxWidth: '180px !important',
- 
 
 68 
      maxHeight: '180px !important'
- 
 
 69 
    }
- 
 
 70 
  },
- 
 
 71 
 
- 
 
 72 
  // Estilos para cada slide
- 
 
 73 
  '& .slick-slide': {
- 
 
 74 
    padding: '0 4px',
- 
 
 75 
    textAlign: 'center',
- 
 
 76 
    outline: 'none'
- 
 
 77 
  },
- 
 
 78 
 
- 
 
 79 
  // Contenedor de cada slide
- 
 
 80 
  '& .slick-slide > div': {
- 
 
 81 
    outline: 'none',
- 
 
 82 
    display: 'flex !important',
- 
 
 83 
    flexDirection: 'column',
- 
 
 84 
    alignItems: 'center',
- 
 
 85 
    justifyContent: 'center'
- 
 
 86 
  },
- 
 
 87 
 
- 
 
 88 
  // Estilos para los textos del slider
- 
 
 89 
  '& .MuiTypography-root': {
- 
 
 90 
    marginTop: theme.spacing(1.5),
- 
 
 91 
    fontSize: '1rem',
- 
 
 92 
    fontWeight: 600,
- 
 
 93 
    color: theme.palette.text.primary,
- 
 
 94 
    textAlign: 'center',
- 
 
 95 
    lineHeight: 1.3,
- 
 
 96 
    maxWidth: '250px',
- 
 
 97 
    margin: `${theme.spacing(1.5)} auto 0`,
- 
 
 98 
 
- 
 
 99 
    // Responsive para textos
- 
 
 100 
    [theme.breakpoints.down('sm')]: {
- 
 
 101 
      fontSize: '0.95rem',
- 
 
 102 
      marginTop: theme.spacing(1),
- 
 
 103 
      maxWidth: '200px'
- 
 
 104 
    },
- 
 
 105 
 
- 
 
 106 
    // Para pantallas muy pequeñas de iPhone
- 
 
 107 
    '@media (max-width: 390px)': {
- 
 
 108 
      fontSize: '0.9rem',
- 
 
 109 
      marginTop: theme.spacing(0.5),
- 
 
 110 
      maxWidth: '180px'
- 
 
 111 
    }
- 
 
 112 
  },
- 
 
 113 
 
- 
 
 114 
  // Estilos para los dots/puntos de navegación
- 
 
 115 
  '& .slick-dots': {
- 
 
 116 
    position: 'relative',
- 
 
 117 
    bottom: 'auto',
- 
 
 118 
    marginTop: theme.spacing(2),
- 
 
 119 
    marginBottom: 0,
- 
 
 120 
 
- 
 
 121 
    '& li': {
- 
 
 122 
      margin: '0 3px',
- 
 
 123 
 
- 
 
 124 
      '& button': {
- 
 
 125 
        width: '10px',
- 
 
 126 
        height: '10px',
- 
 
 127 
 
- 
 
 128 
        '&:before': {
- 
 
 129 
          fontSize: '10px',
- 
 
 130 
          color: theme.palette.primary.main,
- 
 
 131 
          opacity: 0.4,
- 
 
 132 
          width: '10px',
- 
 
 133 
          height: '10px',
- 
 
 134 
          lineHeight: '10px'
- 
 
 135 
        }
- 
 
 136 
      },
- 
 
 137 
 
- 
 
 138 
      '&.slick-active button:before': {
- 
 
 139 
        opacity: 1,
- 
 
 140 
        color: theme.palette.primary.main,
- 
 
 141 
        transform: 'scale(1.3)'
- 
 
 142 
      }
38 
    margin: 'auto'
 143 
    }
- 
 
 144 
  },
- 
 
 145 
 
- 
 
 146 
  // Estilos para transiciones
- 
 
 147 
  '& .slick-track': {
- 
 
 148 
    display: 'flex',
- 
 
 149 
    alignItems: 'center'
- 
 
 150 
  },
- 
 
 151 
 
- 
 
 152 
  // Lista del slider
- 
 
 153 
  '& .slick-list': {
- 
 
 154 
    overflow: 'hidden',
- 
 
 155 
    borderRadius: '8px'
- 
 
 156 
  },
- 
 
 157 
 
39 
  },
 158 
  // Ocultar en pantallas medianas y grandes
40 
  [theme.breakpoints.up('md')]: {
 159 
  [theme.breakpoints.up('md')]: {
41 
    display: 'none'
 160 
    display: 'none'
42 
  }
 161 
  }
Línea 43... Línea 162...
43 
}));
 162 
}));
44 
 
 163 
 
45 
const AuthLayout = () => {
 164 
const AuthLayout = () => {
46 
  const { logo_url, intro } = useSelector(({ auth }) => auth);
 - 
 
47 
  const isRoot = useMatch('/');
 - 
 
Línea 48... Línea 165...
48 
  const userAgent = navigator.userAgent;
 165 
  const { logo_url, intro } = useSelector(({ auth }) => auth);
49 
  const isIphone = /iPad|iPhone|iPod|Mac/.test(userAgent);
 166 
  const isRoot = useMatch('/');
50 
 
 167 
 
51 
  return (
 168 
  return (
52 
    <>
 - 
 
53 
      <AppBar
 169 
    <>
54 
        sx={{
 170 
      <AppBar
55 
          paddingTop: isIphone ? '50px' : '0',
 171 
        sx={{
- 
 
 172 
          position: 'relative',
56 
          position: 'relative',
 173 
          backgroundColor: 'transparent',
57 
          backgroundColor: 'transparent',
 174 
          boxShadow: 'none',
58 
          boxShadow: 'none'
 175 
          zIndex: 1
59 
        }}
 176 
        }}
60 
      >
 177 
      >
Línea 73... Línea 190...
73 
            </Link>
 190 
            </Link>
74 
          </Toolbar>
 191 
          </Toolbar>
75 
        </Container>
 192 
        </Container>
76 
      </AppBar>
 193 
      </AppBar>
Línea 77... Línea 194...
77 
 
 194 
 
78 
      <Container>
 195 
      <Container sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
- 
 
 196 
        <AuthPage>
- 
 
 197 
          <Section
- 
 
 198 
            sx={{
- 
 
 199 
              display: { xs: isRoot ? 'flex' : 'none', md: 'flex' }
- 
 
 200 
            }}
- 
 
 201 
          >
- 
 
 202 
            <Box
79 
        <AuthPage>
 203 
              sx={{
- 
 
 204 
                display: { xs: 'flex', md: 'none' },
- 
 
 205 
                flexDirection: 'column',
- 
 
 206 
                gap: '1rem',
- 
 
 207 
                alignItems: 'center',
- 
 
 208 
                justifyContent: 'center',
- 
 
 209 
                width: '100%',
- 
 
 210 
                maxWidth: '400px',
- 
 
 211 
                padding: '1rem'
- 
 
 212 
              }}
80 
          <Section sx={{ display: { xs: 'none', md: 'flex' } }}>
 213 
            >
81 
            {isRoot && (
 214 
              {isRoot && (
82 
              <AuthSlider
 215 
                <AuthSlider
83 
                arrows={false}
 216 
                  autoplay={true}
84 
                dots={true}
 217 
                  infinite={true}
85 
                slidesToShow={1}
 218 
                  pauseOnHover={true}
86 
                slidesToScroll={1}
 219 
                  pauseOnFocus={true}
87 
                autoplay={true}
 220 
                  dots={true}
88 
                autoplaySpeed={3000}
 221 
                  arrows={false}
- 
 
 222 
                  accessibility={true}
- 
 
 223 
                  nextArrow={<ArrowForwardIos />}
- 
 
 224 
                  prevArrow={<ArrowBackIos />}
- 
 
 225 
                >
- 
 
 226 
                  <Box>
- 
 
 227 
                    <img src='/images/intro_slide_1.png' alt='image slide' />
- 
 
 228 
                    <Typography>Desarrollate en Líder moderno</Typography>
- 
 
 229 
                  </Box>
- 
 
 230 
 
- 
 
 231 
                  <Box>
- 
 
 232 
                    <img src='/images/intro_slide_2.png' alt='image slide' />
- 
 
 233 
                    <Typography>Evoluciona día a día</Typography>
- 
 
 234 
                  </Box>
- 
 
 235 
 
- 
 
 236 
                  <Box>
- 
 
 237 
                    <img src='/images/intro_slide_3.png' alt='image slide' />
- 
 
 238 
                    <Typography>Construye tu futuro</Typography>
- 
 
 239 
                  </Box>
- 
 
 240 
                </AuthSlider>
- 
 
 241 
              )}
- 
 
 242 
 
- 
 
 243 
              <Button
- 
 
 244 
                variant='contained'
- 
 
 245 
                color='primary'
- 
 
 246 
                fullWidth
- 
 
 247 
                LinkComponent={Link}
89 
                infinite={true}
 248 
                to='/signin'
- 
 
 249 
              >
90 
              >
 250 
                Iniciar sesión
- 
 
 251 
              </Button>
91 
                <Box>
 252 
              <Button
92 
                  <img src='/images/intro_slide_1.png' alt='image slide' />
 253 
                variant='contained'
93 
                  <Typography>Desarrollate en Líder moderno</Typography>
 254 
                color='primary'
94 
                </Box>
 - 
 
- 
 
 255 
                fullWidth
- 
 
 256 
                LinkComponent={Link}
95 
 
 257 
                to='/forgot-password'
96 
                <Box>
 258 
              >
97 
                  <img src='/images/intro_slide_2.png' alt='image slide' />
 259 
                Olvidé mi contraseña
98 
                  <Typography>Evoluciona día a día</Typography>
 260 
              </Button>
99 
                </Box>
 261 
            </Box>
100 
 
 262 
 
- 
 
 263 
            <Box
101 
                <Box>
 264 
              sx={{
- 
 
 265 
                display: { xs: isRoot ? 'none' : 'flex', md: 'flex' },
102 
                  <img src='/images/intro_slide_3.png' alt='image slide' />
 266 
                alignItems: 'center',
- 
 
 267 
                justifyContent: 'center',
103 
                  <Typography>Construye tu futuro</Typography>
 268 
                flexDirection: 'column',
104 
                </Box>
 269 
                gap: '1rem'
105 
              </AuthSlider>
 270 
              }}
106 
            )}
 - 
 
107 
 
 271 
            >
108 
            <img src={logo_url} alt='Leaderslinked logo' />
 272 
              <img src={logo_url} alt='Leaderslinked logo' />
- 
 
 273 
              <Typography>{parse(intro)}</Typography>
109 
            <Typography>{parse(intro)}</Typography>
 274 
            </Box>
Línea 110... Línea 275...
110 
          </Section>
 275 
          </Section>
- 
 
 276 
 
- 
 
 277 
          <Section
- 
 
 278 
            sx={{
- 
 
 279 
              display: { xs: isRoot ? 'none' : 'flex', md: 'flex' }
111 
 
 280 
            }}
112 
          <Section>
 281 
          >
113 
            <Outlet />
 282 
            <Outlet />
114 
          </Section>
 283 
          </Section>
115 
        </AuthPage>
 284 
        </AuthPage>