Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { Suspense } from 'react'

import parse from 'html-react-parser'

import styled from 'styled-components'

import { Container, Col } from 'react-bootstrap'

import {

  NavLink,

  Route,

  Switch,

  useHistory,

  useLocation,

} from 'react-router-dom'

import { useSelector } from 'react-redux'

import Login from '../../components/auth/login/Login'

import Signup from '../../components/auth/signup/Signup'

import ForgotPassword from '../../components/auth/forgot-password/ForgotPassword'

const AuthContainer = styled(Container)`

  margin: auto;

  display: flex;

  padding: 2rem 0;

  @media (max-width: 768px) {

    flex-direction: column;

  }

`

const CompanyInfoContainer = styled(Col)`

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 0.5rem;

  img {

    height: 50vh;

    object-fit: contain;

    width: 100%;

  }

  p {

    font-size: 1rem;

  }

  @media (min-width: 768px) {

    img {

      margin: 0 3rem;

    }

  }

`

const Auth = () => {

  const { pathname } = useLocation()

  const history = useHistory()

  const { logo_url, intro } = useSelector(({ auth }) => auth)

  if (pathname === '/') {

    history.push('/signin')

  }

  return (

    <AuthContainer forwardedAs="main">

      <CompanyInfoContainer forwardedAs="section" lg="6">

        <img src={logo_url} alt="Leaderslinked logo" />

        <p>{parse(intro)}</p>

      </CompanyInfoContainer>

      <Col forwardedAs="section">

        <ul className="sign-control">

          <li>

            <NavLink to="/signin" activeClassName="current">

              Entrar

            </NavLink>

          </li>

          <li>

            <NavLink to="/signup" activeClassName="current">

              Registrarse

            </NavLink>

          </li>

          <li>

            <NavLink to="/forgot-password" activeClassName="current">

              Olvide mi clave

            </NavLink>

          </li>

        </ul>

        <Suspense fallback={null}>

          <div className="sign_in_sec current">

            <Switch>

              <Route exact path="/signin">

                <Login />

              </Route>

              <Route exact path="/signup">

                <Signup />

              </Route>

              <Route exact path="/forgot-password">

                <ForgotPassword />

              </Route>

            </Switch>

          </div>

        </Suspense>

      </Col>

    </AuthContainer>

  )

}

export default Auth