61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { FormattedMessage } from 'react-intl';
|
||
|
|
|
||
|
|
import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
|
||
|
|
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
|
||
|
|
|
||
|
|
const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
|
||
|
|
|
||
|
|
/** Displays a cookie consent banner. */
|
||
|
|
const GdprBanner: React.FC = () => {
|
||
|
|
/** Track whether the banner has already been displayed once. */
|
||
|
|
const [shown, setShown] = useState<boolean>(acceptedGdpr);
|
||
|
|
|
||
|
|
const soapbox = useSoapboxConfig();
|
||
|
|
const isLoggedIn = useAppSelector(state => !!state.me);
|
||
|
|
const siteTitle = useAppSelector(state => state.instance.title);
|
||
|
|
|
||
|
|
const handleAccept = () => {
|
||
|
|
localStorage.setItem('soapbox:gdpr', 'true');
|
||
|
|
setShown(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const showBanner = soapbox.gdpr && !isLoggedIn && !shown;
|
||
|
|
|
||
|
|
if (!showBanner) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Banner theme='opaque'>
|
||
|
|
<Stack space={2}>
|
||
|
|
<Stack>
|
||
|
|
<Text size='xl' weight='bold'>
|
||
|
|
<FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle }} />
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
<Text weight='medium' className='opacity-90'>
|
||
|
|
<FormattedMessage
|
||
|
|
id='gdpr.message'
|
||
|
|
defaultMessage="{siteTitle} uses session cookies, which are essential to the website's functioning."
|
||
|
|
values={{ siteTitle }}
|
||
|
|
/>
|
||
|
|
</Text>
|
||
|
|
</Stack>
|
||
|
|
|
||
|
|
<HStack space={2} justifyContent='end'>
|
||
|
|
<Button theme='secondary' to='/login'>
|
||
|
|
<FormattedMessage id='gdpr.learn_more' defaultMessage='Learn more' />
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Button theme='accent' onClick={handleAccept}>
|
||
|
|
<FormattedMessage id='gdpr.accept' defaultMessage='Accept' />
|
||
|
|
</Button>
|
||
|
|
</HStack>
|
||
|
|
</Stack>
|
||
|
|
</Banner>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GdprBanner;
|