diff --git a/src/frontend/apps/impress/src/assets/icons/Docs Locked.svg b/src/frontend/apps/impress/src/assets/icons/Docs Locked.svg
new file mode 100644
index 000000000..e910ada1d
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/Docs Locked.svg
@@ -0,0 +1,102 @@
+
diff --git a/src/frontend/apps/impress/src/assets/icons/error-access-denied.svg b/src/frontend/apps/impress/src/assets/icons/error-access-denied.svg
deleted file mode 100644
index 573358018..000000000
--- a/src/frontend/apps/impress/src/assets/icons/error-access-denied.svg
+++ /dev/null
@@ -1,102 +0,0 @@
-
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
index 17bc67954..9dbaf7c18 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
@@ -1,18 +1,61 @@
-import { Button } from '@gouvfr-lasuite/cunningham-react';
import Head from 'next/head';
-import Image from 'next/image';
+import Link from 'next/link';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-import img403 from '@/assets/icons/icon-403.png';
-import { Box, Icon, Loading, StyledLink, Text } from '@/components';
-import { ButtonAccessRequest } from '@/docs/doc-share';
-import { useDocAccessRequests } from '@/docs/doc-share/api/useDocAccessRequest';
+import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
+import BubbleTextSvg from '@/icons/bubble-text.svg';
+import { Box, Loading, Text } from '@/components';
+import { Role } from '@/docs/doc-management';
+import {
+ useCreateDocAccessRequest,
+ useDocAccessRequests,
+} from '@/docs/doc-share/api/useDocAccessRequest';
+import HomeSvg from '@/icons/house-rounded.svg';
import { useSkeletonStore } from '@/features/skeletons';
-const StyledButton = styled(Button)`
- width: fit-content;
+const errorActionStyles = `
+ display: flex;
+ height: var(--md, 24px);
+ padding: 0 var(--xxxs, 4px);
+ justify-content: center;
+ align-items: center;
+ gap: var(--xxxs, 4px);
+ color: var(--c--contextuals--content--semantic--neutral--tertiary);
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: var(--line-height-xs, 16px);
+ text-decoration: none;
+
+ svg {
+ text-decoration: none;
+ }
+
+ .--docs--error-action-label {
+ text-decoration: none;
+ }
+
+ &:hover:not(:disabled) .--docs--error-action-label {
+ text-decoration: underline;
+ }
+`;
+
+const ErrorActionLinkStyled = styled(Link)`
+ ${errorActionStyles}
+`;
+
+const RequestAccessButton = styled.button`
+ ${errorActionStyles}
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
`;
interface DocProps {
@@ -24,7 +67,6 @@ export const DocPage403 = ({ id }: DocProps) => {
const { setIsSkeletonVisible } = useSkeletonStore();
useEffect(() => {
- // Ensure the skeleton overlay is hidden on 403 page
setIsSkeletonVisible(false);
}, [setIsSkeletonVisible]);
@@ -37,6 +79,8 @@ export const DocPage403 = ({ id }: DocProps) => {
page: 1,
});
+ const { mutate: createRequest } = useCreateDocAccessRequest();
+
const hasRequested = !!requests?.results.find(
(request) => request.document === id,
);
@@ -50,33 +94,41 @@ export const DocPage403 = ({ id }: DocProps) => {
- {t('Access Denied - Error 403')} - {t('Docs')}
+ {t('Access denied')} - {t('Docs')}
-
+
-
-
+
+
+ {t('Access denied')}
+
+
+
{hasRequested
? t('Your access request for this document is pending.')
: t('Insufficient access rights to view the document.')}
@@ -85,31 +137,45 @@ export const DocPage403 = ({ id }: DocProps) => {
{docAccessError?.status === 404 && (
{t(
"You're currently viewing a sub-document. To gain access, please request permission from the main document.",
)}
)}
+
-
-
- }
- color="brand"
- variant="secondary"
- >
- {t('Home')}
-
-
- {docAccessError?.status !== 404 && (
-
- )}
-
+
+
+
+ {t('Home')}
+
+ {docAccessError?.status !== 404 && (
+ createRequest({ docId: id, role: Role.EDITOR })}
+ disabled={hasRequested}
+ >
+
+
+ {t('Request access')}
+
+
+ )}
diff --git a/src/frontend/apps/impress/src/pages/401.tsx b/src/frontend/apps/impress/src/pages/401.tsx
index 3eb7dcf31..565d3c3bb 100644
--- a/src/frontend/apps/impress/src/pages/401.tsx
+++ b/src/frontend/apps/impress/src/pages/401.tsx
@@ -1,11 +1,10 @@
-import { Button } from '@gouvfr-lasuite/cunningham-react';
+import { Button } from '@openfun/cunningham-react';
import Head from 'next/head';
-import Image from 'next/image';
import { useRouter } from 'next/router';
import { ReactElement, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import img401 from '@/assets/icons/icon-401.png';
+import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
import { Box, Text } from '@/components';
import { gotoLogin, useAuth } from '@/features/auth';
import { PageLayout } from '@/layouts';
@@ -26,40 +25,53 @@ const Page: NextPageWithLayout = () => {
<>
- {`${t('401 Unauthorized')} - ${t('Docs')}`}
+ {`${t('Access denied')} - ${t('Docs')}`}
- {t('401 Unauthorized')} - {t('Docs')}
+ {t('Access denied')} - {t('Docs')}
-
+
-
-
- {t('Log in to access the document.')}
+
+
+ {t('Access denied')}
-
+
+
+