Alex Gleason
1 year ago
parent
2f3350267c
commit
ecc0897ee6
@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { rememberInstance } from 'soapbox/actions/instance';
|
||||
import { render, screen, rootReducer } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import LandingPage from '..';
|
||||
|
||||
describe('<LandingPage />', () => {
|
||||
it('renders a RegistrationForm for an open Pleroma instance', () => {
|
||||
|
||||
const state = rootReducer(undefined, {
|
||||
type: rememberInstance.fulfilled.type,
|
||||
payload: {
|
||||
version: '2.7.2 (compatible; Pleroma 2.3.0)',
|
||||
registrations: true,
|
||||
},
|
||||
});
|
||||
|
||||
render(<LandingPage />, undefined, state);
|
||||
|
||||
expect(screen.queryByTestId('registrations-open')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('registrations-closed')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders "closed" message for a closed Pleroma instance', () => {
|
||||
|
||||
const state = rootReducer(undefined, {
|
||||
type: rememberInstance.fulfilled.type,
|
||||
payload: {
|
||||
version: '2.7.2 (compatible; Pleroma 2.3.0)',
|
||||
registrations: false,
|
||||
},
|
||||
});
|
||||
|
||||
render(<LandingPage />, undefined, state);
|
||||
|
||||
expect(screen.queryByTestId('registrations-closed')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -1,108 +0,0 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { prepareRequest } from 'soapbox/actions/consumer-auth';
|
||||
import Markup from 'soapbox/components/markup';
|
||||
import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
|
||||
import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
|
||||
import { useAppDispatch, useFeatures, useInstance, useSoapboxConfig } from 'soapbox/hooks';
|
||||
import { capitalize } from 'soapbox/utils/strings';
|
||||
|
||||
const LandingPage = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const features = useFeatures();
|
||||
const soapboxConfig = useSoapboxConfig();
|
||||
const instance = useInstance();
|
||||
|
||||
/** Registrations are closed */
|
||||
const renderClosed = () => {
|
||||
return (
|
||||
<Stack space={3} data-testid='registrations-closed'>
|
||||
<Text size='xl' weight='bold' align='center'>
|
||||
<FormattedMessage
|
||||
id='registration.closed_title'
|
||||
defaultMessage='Registrations Closed'
|
||||
/>
|
||||
</Text>
|
||||
<Text theme='muted' align='center'>
|
||||
<FormattedMessage
|
||||
id='registration.closed_message'
|
||||
defaultMessage='{instance} is not accepting new members.'
|
||||
values={{ instance: instance.title }}
|
||||
/>
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/** Mastodon API registrations are open */
|
||||
const renderOpen = () => {
|
||||
return <RegistrationForm />;
|
||||
};
|
||||
|
||||
/** Display login button for external provider. */
|
||||
const renderProvider = () => {
|
||||
const { authProvider } = soapboxConfig;
|
||||
|
||||
return (
|
||||
<Stack space={3}>
|
||||
<Stack>
|
||||
<Text size='2xl' weight='bold' align='center'>
|
||||
<FormattedMessage id='registrations.get_started' defaultMessage="Let's get started!" />
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Button onClick={() => dispatch(prepareRequest(authProvider))} theme='primary' block>
|
||||
<FormattedMessage
|
||||
id='oauth_consumer.tooltip'
|
||||
defaultMessage='Sign in with {provider}'
|
||||
values={{ provider: capitalize(authProvider) }}
|
||||
/>
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
// Render registration flow depending on features
|
||||
const renderBody = () => {
|
||||
if (soapboxConfig.authProvider) {
|
||||
return renderProvider();
|
||||
} else if (features.accountCreation && instance.registrations) {
|
||||
return renderOpen();
|
||||
} else {
|
||||
return renderClosed();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className='mt-16 sm:mt-24' data-testid='homepage'>
|
||||
<div className='mx-auto max-w-7xl'>
|
||||
<div className='grid grid-cols-1 gap-8 py-12 lg:grid-cols-12'>
|
||||
<div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'>
|
||||
<div className='w-full'>
|
||||
<Stack space={3}>
|
||||
<h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
|
||||
{instance.title}
|
||||
</h1>
|
||||
|
||||
<Markup
|
||||
size='lg'
|
||||
dangerouslySetInnerHTML={{ __html: instance.short_description || instance.description }}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
<div className='self-center sm:mt-24 lg:col-span-6 lg:mt-0'>
|
||||
<Card size='xl' variant='rounded' className='sm:mx-auto sm:w-full sm:max-w-md'>
|
||||
<CardBody>
|
||||
{renderBody()}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
||||
@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { storeOpen } from 'soapbox/jest/mock-stores';
|
||||
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import Header from '../header';
|
||||
|
||||
describe('<Header />', () => {
|
||||
it('successfully renders', () => {
|
||||
render(<Header />);
|
||||
expect(screen.getByTestId('public-layout-header')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('doesn\'t display the signup button by default', () => {
|
||||
render(<Header />);
|
||||
expect(screen.queryByText('Register')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('with registrations enabled', () => {
|
||||
it('displays the signup button', () => {
|
||||
render(<Header />, undefined, storeOpen);
|
||||
expect(screen.getByText('Register')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,51 +0,0 @@
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import type { FooterItem } from 'soapbox/types/soapbox';
|
||||
|
||||
const Footer = () => {
|
||||
const { copyright, navlinks, locale } = useAppSelector((state) => {
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
|
||||
return {
|
||||
copyright: soapboxConfig.copyright,
|
||||
navlinks: (soapboxConfig.navlinks.get('homeFooter') || ImmutableList()) as ImmutableList<FooterItem>,
|
||||
locale: getSettings(state).get('locale') as string,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<footer className='relative mx-auto mt-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 xl:flex xl:items-center xl:justify-between'>
|
||||
<div className='flex flex-wrap justify-center'>
|
||||
{navlinks.map((link, idx) => {
|
||||
const url = link.get('url');
|
||||
const isExternal = url.startsWith('http');
|
||||
const Comp = (isExternal ? 'a' : Link) as 'a';
|
||||
const compProps = isExternal ? { href: url, target: '_blank' } : { to: url };
|
||||
|
||||
return (
|
||||
<div key={idx} className='px-5 py-2'>
|
||||
<Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
|
||||
<Text tag='span' theme='inherit' size='sm'>
|
||||
{(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
|
||||
</Text>
|
||||
</Comp>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 xl:mt-0'>
|
||||
<Text theme='muted' align='center' size='sm'>{copyright}</Text>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -1,171 +0,0 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
|
||||
import { logIn, verifyCredentials } from 'soapbox/actions/auth';
|
||||
import { fetchInstance } from 'soapbox/actions/instance';
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import SiteLogo from 'soapbox/components/site-logo';
|
||||
import { Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
|
||||
import { useSoapboxConfig, useOwnAccount, useAppDispatch, useRegistrationStatus, useFeatures } from 'soapbox/hooks';
|
||||
|
||||
import Sonar from './sonar';
|
||||
|
||||
import type { AxiosError } from 'axios';
|
||||
|
||||
const messages = defineMessages({
|
||||
menu: { id: 'header.menu.title', defaultMessage: 'Open menu' },
|
||||
home: { id: 'header.home.label', defaultMessage: 'Home' },
|
||||
login: { id: 'header.login.label', defaultMessage: 'Log in' },
|
||||
register: { id: 'header.register.label', defaultMessage: 'Register' },
|
||||
username: { id: 'header.login.username.placeholder', defaultMessage: 'E-mail or username' },
|
||||
email: { id: 'header.login.email.placeholder', defaultMessage: 'E-mail address' },
|
||||
password: { id: 'header.login.password.label', defaultMessage: 'Password' },
|
||||
forgotPassword: { id: 'header.login.forgot_password', defaultMessage: 'Forgot password?' },
|
||||
});
|
||||
|
||||
const Header = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const features = useFeatures();
|
||||
|
||||
const { account } = useOwnAccount();
|
||||
const soapboxConfig = useSoapboxConfig();
|
||||
const { isOpen } = useRegistrationStatus();
|
||||
const { links } = soapboxConfig;
|
||||
|
||||
const [isLoading, setLoading] = React.useState(false);
|
||||
const [username, setUsername] = React.useState('');
|
||||
const [password, setPassword] = React.useState('');
|
||||
const [shouldRedirect, setShouldRedirect] = React.useState(false);
|
||||
const [mfaToken, setMfaToken] = React.useState(false);
|
||||
|
||||
const open = () => dispatch(openModal('LANDING_PAGE'));
|
||||
|
||||
const handleSubmit: React.FormEventHandler = (event) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
dispatch(logIn(username, password) as any)
|
||||
.then(({ access_token }: { access_token: string }) => (
|
||||
dispatch(verifyCredentials(access_token) as any)
|
||||
// Refetch the instance for authenticated fetch
|
||||
.then(() => dispatch(fetchInstance()))
|
||||
.then(() => setShouldRedirect(true))
|
||||
))
|
||||
.catch((error: AxiosError) => {
|
||||
setLoading(false);
|
||||
|
||||
const data: any = error.response?.data;
|
||||
if (data?.error === 'mfa_required') {
|
||||
setMfaToken(data.mfa_token);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (account && shouldRedirect) return <Redirect to='/' />;
|
||||
if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
|
||||
|
||||
return (
|
||||
<header data-testid='public-layout-header'>
|
||||
<nav className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8' aria-label='Header'>
|
||||
<div className='flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none'>
|
||||
<div className='relative flex w-36 items-center sm:justify-center'>
|
||||
<div className='absolute -left-6 -top-24 z-0 hidden md:block'>
|
||||
<Sonar />
|
||||
</div>
|
||||
|
||||
<IconButton
|
||||
title={intl.formatMessage(messages.menu)}
|
||||
src={require('@tabler/icons/menu-2.svg')}
|
||||
onClick={open}
|
||||
className='mr-4 bg-transparent text-gray-700 hover:text-gray-600 dark:text-gray-600 md:hidden'
|
||||
/>
|
||||
|
||||
<Link to='/' className='z-10'>
|
||||
<SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />
|
||||
<span className='hidden'>{intl.formatMessage(messages.home)}</span>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
<HStack space={6} alignItems='center' className='relative z-10 ml-10'>
|
||||
<HStack alignItems='center'>
|
||||
<HStack space={6} alignItems='center' className='hidden md:mr-6 md:flex'>
|
||||
{links.get('help') && (
|
||||
<a
|
||||
href={links.get('help')}
|
||||
target='_blank'
|
||||
className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'
|
||||
>
|
||||
<FormattedMessage id='landing_page_modal.helpCenter' defaultMessage='Help Center' />
|
||||
</a>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack space={2} className='shrink-0 xl:hidden'>
|
||||
<Button to='/login' theme='tertiary'>
|
||||
{intl.formatMessage(messages.login)}
|
||||
</Button>
|
||||
|
||||
{isOpen && (
|
||||
<Button
|
||||
to='/signup'
|
||||
theme='primary'
|
||||
>
|
||||
{intl.formatMessage(messages.register)}
|
||||
</Button>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
<Form className='hidden items-center space-x-2 rtl:space-x-reverse xl:flex' onSubmit={handleSubmit}>
|
||||
<Input
|
||||
required
|
||||
value={username}
|
||||
onChange={(event) => setUsername(event.target.value.trim())}
|
||||
type='text'
|
||||
placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
|
||||
className='max-w-[200px]'
|
||||
autoCorrect='off'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
|
||||
<Input
|
||||
required
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
type='password'
|
||||
placeholder={intl.formatMessage(messages.password)}
|
||||
className='max-w-[200px]'
|
||||
autoComplete='off'
|
||||
autoCorrect='off'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
|
||||
<Link to='/reset-password'>
|
||||
<Tooltip text={intl.formatMessage(messages.forgotPassword)}>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/help.svg')}
|
||||
className='cursor-pointer bg-transparent text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
|
||||
iconClassName='h-5 w-5'
|
||||
/>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
|
||||
<Button
|
||||
theme='primary'
|
||||
type='submit'
|
||||
disabled={isLoading}
|
||||
>
|
||||
{intl.formatMessage(messages.login)}
|
||||
</Button>
|
||||
</Form>
|
||||
</HStack>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Sonar = () => (
|
||||
<div className='relative'>
|
||||
<div className='relative h-48 w-48'>
|
||||
<div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
|
||||
<div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
|
||||
<div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
|
||||
<div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
|
||||
|
||||
<div className='absolute left-0 top-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Sonar;
|
||||
@ -1,41 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Switch, Route, Redirect } from 'react-router-dom';
|
||||
|
||||
import LandingGradient from 'soapbox/components/landing-gradient';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { isStandalone } from 'soapbox/utils/state';
|
||||
|
||||
import LandingPage from '../landing-page';
|
||||
|
||||
import Footer from './components/footer';
|
||||
import Header from './components/header';
|
||||
|
||||
const PublicLayout = () => {
|
||||
const standalone = useAppSelector((state) => isStandalone(state));
|
||||
|
||||
if (standalone) {
|
||||
return <Redirect to='/login/external' />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full'>
|
||||
<LandingGradient />
|
||||
|
||||
<div className='flex h-screen flex-col'>
|
||||
<div className='shrink-0'>
|
||||
<Header />
|
||||
|
||||
<div className='relative'>
|
||||
<Switch>
|
||||
<Route exact path='/' component={LandingPage} />
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PublicLayout;
|
||||
Loading…
Reference in new issue