import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom'; import LandingGradient from 'soapbox/components/landing-gradient'; import SiteLogo from 'soapbox/components/site-logo'; import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks'; import { Button, Card, CardBody } from '../../components/ui'; import LoginPage from '../auth-login/components/login-page'; import PasswordReset from '../auth-login/components/password-reset'; import PasswordResetConfirm from '../auth-login/components/password-reset-confirm'; import RegistrationForm from '../auth-login/components/registration-form'; import ExternalLoginForm from '../external-login/components/external-login-form'; import Footer from '../public-layout/components/footer'; import RegisterInvite from '../register-invite'; import Verification from '../verification'; import EmailPassthru from '../verification/email-passthru'; const messages = defineMessages({ register: { id: 'auth_layout.register', defaultMessage: 'Create an account' }, }); const AuthLayout = () => { const intl = useIntl(); const history = useHistory(); const { search } = useLocation(); const account = useOwnAccount(); const instance = useInstance(); const { isOpen } = useRegistrationStatus(); const isLoginPage = history.location.pathname === '/login'; return ( <div className='h-full'> <LandingGradient /> <main className='relative h-full sm:flex sm:justify-center'> <div className='flex h-full w-full flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'> <header className='relative mb-auto flex justify-between py-12 px-2'> <div className='relative z-0 flex-1 px-2 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center'> <Link to='/' className='cursor-pointer'> <SiteLogo alt={instance.title} className='h-7' /> </Link> </div> {(isLoginPage && isOpen) && ( <div className='relative z-10 ml-auto flex items-center'> <Button theme='tertiary' icon={require('@tabler/icons/user.svg')} to='/signup' > {intl.formatMessage(messages.register)} </Button> </div> )} </header> <div className='flex flex-col items-center justify-center'> <div className='w-full pb-10 sm:mx-auto sm:max-w-lg md:max-w-2xl'> <Card variant='rounded' size='xl'> <CardBody> <Switch> {/* If already logged in, redirect home. */} {account && <Redirect from='/login' to='/' exact />} <Route exact path='/verify' component={Verification} /> <Route exact path='/verify/email/:token' component={EmailPassthru} /> <Route exact path='/login/external' component={ExternalLoginForm} /> <Route exact path='/login/add' component={LoginPage} /> <Route exact path='/login' component={LoginPage} /> <Route exact path='/signup' component={RegistrationForm} /> <Route exact path='/reset-password' component={PasswordReset} /> <Route exact path='/edit-password' component={PasswordResetConfirm} /> <Route path='/invite/:token' component={RegisterInvite} /> <Redirect from='/auth/password/new' to='/reset-password' /> <Redirect from='/auth/password/edit' to={`/edit-password${search}`} /> </Switch> </CardBody> </Card> </div> </div> <div className='mt-auto'> <Footer /> </div> </div> </main> </div> ); }; export default AuthLayout;