diff --git a/src/frontend/apps/desk/src/assets/icons/icon-404.svg b/src/frontend/apps/desk/src/assets/icons/icon-404.svg
new file mode 100644
index 0000000..fe70571
--- /dev/null
+++ b/src/frontend/apps/desk/src/assets/icons/icon-404.svg
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
index b22d8fa..495c226 100644
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/src/frontend/apps/desk/src/i18n/translations.json
@@ -19,6 +19,7 @@
"Add team icon": "Icône ajout de groupe",
"Admin": "Admin",
"Are you sure you want to delete {{teamName}} team?": "Êtes-vous sûr de vouloir supprimer le groupe {{teamName}}?",
+ "Back to home page": "Retour à la page d'accueil",
"Cancel": "Annuler",
"Cells icon": "Icône Cellules",
"Choose a role": "Choisissez un rôle",
@@ -47,6 +48,7 @@
"Groups": "Groupes",
"Invitation sent to {{email}}": "Invitation envoyée à {{email}}",
"Invite new members to {{teamName}}": "Invitez de nouveaux membres à rejoindre {{teamName}}",
+ "It seems that the page you are looking for does not exist or cannot be displayed correctly.": "Il semble que la page que vous cherchez n'existe pas ou ne puisse pas être affichée correctement.",
"Language": "Langue",
"Language Icon": "Icône de langue",
"Last update at": "Dernière modification le",
@@ -61,6 +63,7 @@
"New name...": "Nouveau nom...",
"Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale",
"Open the team options": "Ouvrir les options de groupe",
+ "Ouch !": "Ooops !",
"Owner": "Propriétaire",
"People": "People",
"People Description": "Description de People",
diff --git a/src/frontend/apps/desk/src/pages/404.tsx b/src/frontend/apps/desk/src/pages/404.tsx
index efe548a..8dfbfef 100644
--- a/src/frontend/apps/desk/src/pages/404.tsx
+++ b/src/frontend/apps/desk/src/pages/404.tsx
@@ -1,25 +1,43 @@
+import { Button } from '@openfun/cunningham-react';
import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
-import { Text } from '@/components';
+import Icon404 from '@/assets/icons/icon-404.svg';
+import { Box, StyledLink, Text } from '@/components';
import { NextPageWithLayout } from '@/types/next';
import MainLayout from './MainLayout';
+const StyledButton = styled(Button)`
+ width: fit-content;
+ padding-left: 2rem;
+ padding-right: 2rem;
+`;
+
const Page: NextPageWithLayout = () => {
const { t } = useTranslation();
return (
-
- {t('404 - Page not found')}
-
+
+
+
+
+ {t('Ouch !')}
+
+
+
+ {t(
+ 'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+ )}
+
+
+
+
+ {t('Back to home page')}
+
+
+
);
};
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts
new file mode 100644
index 0000000..4e4fa70
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts
@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+ await page.goto('/');
+ await keyCloakSignIn(page, browserName);
+ await page.goto('unknown-page404');
+});
+
+test.describe('404', () => {
+ test('Checks all the elements are visible', async ({ page }) => {
+ await expect(page.getByLabel('Image 404')).toBeVisible();
+ await expect(page.getByText('Ouch')).toBeVisible();
+ await expect(
+ page.getByText(
+ 'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+ ),
+ ).toBeVisible();
+ await expect(page.getByText('Back to home page')).toBeVisible();
+ });
+
+ test('checks go back to home page redirects to home page', async ({
+ page,
+ }) => {
+ await page.getByText('Back to home page').click();
+ await expect(page).toHaveURL('/');
+ });
+});
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
index 66cf638..7365984 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
@@ -116,7 +116,11 @@ test.describe('Teams Create', () => {
test('checks 404 on teams/[id] page', async ({ page }) => {
await page.goto('/teams/some-unknown-team');
- await expect(page.getByText('404 - Page not found')).toBeVisible({
+ await expect(
+ page.getByText(
+ 'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+ ),
+ ).toBeVisible({
timeout: 15000,
});
});