studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♿️(frontend) Set page titles for 403 and 404 errors

Browse Source 
Set the page titles for the 403 and 404 error
pages to improve user experience and accessibility.
This commit is contained in:
Appryll
2025-06-03 13:48:45 +02:00
committed by Anthony LC
parent 0fd16b4371
commit 4fc49d5cb2
2 changed files with 78 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/frontend/apps/impress/src/pages/403.tsx
View File

@@ -1,4 +1,5 @@
import { Button } from '@openfun/cunningham-react'; import { Button } from '@openfun/cunningham-react';
import Head from 'next/head';
import Image from 'next/image'; import Image from 'next/image';
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -17,34 +18,46 @@ const Page: NextPageWithLayout = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Box <>
$align="center" <Head>
$margin="auto" <title>
$gap="1rem" {t('Access Denied - Error 403')} - {t('Docs')}
$padding={{ bottom: '2rem' }} </title>
> <meta
<Image property="og:title"
className="c__image-system-filter" content={`${t('Access Denied - Error 403')} - ${t('Docs')}`}
src={img403} key="title"
alt={t('Image 403')} />
style={{ </Head>
maxWidth: '100%', <Box
height: 'auto', $align="center"
}} $margin="auto"
/> $gap="1rem"
$padding={{ bottom: '2rem' }}
>
<Image
className="c__image-system-filter"
src={img403}
alt={t('Image 403')}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
<Box $align="center" $gap="0.8rem"> <Box $align="center" $gap="0.8rem">
<Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary"> <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
{t('You do not have permission to view this document.')} {t('You do not have permission to view this document.')}
</Text> </Text>
<StyledLink href="/"> <StyledLink href="/">
<StyledButton icon={<Icon iconName="house" $color="white" />}> <StyledButton icon={<Icon iconName="house" $color="white" />}>
{t('Home')} {t('Home')}
</StyledButton> </StyledButton>
</StyledLink> </StyledLink>
</Box>
</Box> </Box>
</Box> </>
); );
}; };

67
src/frontend/apps/impress/src/pages/404.tsx
View File

@@ -1,4 +1,5 @@
import { Button } from '@openfun/cunningham-react'; import { Button } from '@openfun/cunningham-react';
import Head from 'next/head';
import Image from 'next/image'; import Image from 'next/image';
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -17,36 +18,48 @@ const Page: NextPageWithLayout = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Box <>
$align="center" <Head>
$margin="auto" <title>
$gap="1rem" {t('Page Not Found - Error 404')} - {t('Docs')}
$padding={{ bottom: '2rem' }} </title>
> <meta
<Image property="og:title"
className="c__image-system-filter" content={`${t('Page Not Found - Error 404')} - ${t('Docs')}`}
src={img403} key="title"
alt={t('Image 403')} />
style={{ </Head>
maxWidth: '100%', <Box
height: 'auto', $align="center"
}} $margin="auto"
/> $gap="1rem"
$padding={{ bottom: '2rem' }}
>
<Image
className="c__image-system-filter"
src={img403}
alt={t('Image 403')}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
<Box $align="center" $gap="0.8rem"> <Box $align="center" $gap="0.8rem">
<Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary"> <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
{t( {t(
'It seems that the page you are looking for does not exist or cannot be displayed correctly.', 'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
)} )}
</Text> </Text>
<StyledLink href="/"> <StyledLink href="/">
<StyledButton icon={<Icon iconName="house" $color="white" />}> <StyledButton icon={<Icon iconName="house" $color="white" />}>
{t('Home')} {t('Home')}
</StyledButton> </StyledButton>
</StyledLink> </StyledLink>
</Box>
</Box> </Box>
</Box> </>
); );
}; };