️(frontend) introduce dedicated legal notice page

Created a proper legal notice page within the application to replace
external doc page redirects. Implemented based on Sophie's
accessibility requirements to improve user experience for all users
regardless of ability.
This commit is contained in:
lebaudantoine
2025-03-10 19:22:49 +01:00
committed by aleb_the_flash
parent b4016ce850
commit 6cf8e23ab2
8 changed files with 430 additions and 8 deletions

View File

@@ -0,0 +1,140 @@
import { Screen } from '@/layout/Screen'
import { Bold, H, P, A } from '@/primitives'
import { css } from '@/styled-system/css'
import { HStack } from '@/styled-system/jsx'
import { useTranslation } from 'react-i18next'
export const LegalTermsRoute = () => {
const { t } = useTranslation('legals')
const indentedStyle = css({
paddingLeft: '1.5rem',
marginLeft: '1rem',
borderLeft: '1px solid black',
marginTop: '1.5rem',
})
return (
<Screen layout="centered" headerTitle={t('title')}>
<HStack display={'block'} padding={'2rem'}>
<H lvl={2}>{t('creator.title')}</H>
<P>{t('creator.body')}</P>
<H lvl={3} bold>
{t('creator.contact.title')}
</H>
<P>
{t('creator.contact.address', {
address: 'DINUM, 20 avenue de Ségur, 75007 Paris',
})}
<br />
{t('creator.contact.phone', {
phone: '01.71.21.01.70',
})}
<br />
{t('creator.contact.siret', {
siret: '12000101100010 (secrétariat général du gouvernement)',
})}
<br />
{t('creator.contact.siren', {
siren: '120 001 011',
})}
</P>
<H lvl={2}>{t('director.title')}</H>
<P>{t('director.body')}</P>
<H lvl={2}>{t('hosting.title')}</H>
<P>{t('hosting.body')}</P>
<P className={indentedStyle}>
<Bold>{t('hosting.address.line1')}</Bold>
<br />
{t('hosting.address.line2')}
<br />
{t('hosting.address.line3')}
<br />
{t('hosting.address.line4')}
</P>
<H lvl={2}>{t('accessibility.title')}</H>
<P>{t('accessibility.body')}</P>
<P>
<Bold>{t('accessibility.status')}</Bold>
</P>
<H lvl={3} bold>
{t('accessibility.reporting.title')}
</H>
<P>
{t('accessibility.reporting.body1').replace(
'visio@numerique.gouv.fr.',
''
)}
<A href="mailto:visio@numerique.gouv.fr" color="primary">
visio@numerique.gouv.fr
</A>
.
</P>
<P>
{t('accessibility.reporting.body2').replace(
'https://formulaire.defenseurdesdroits.fr',
''
)}{' '}
<A href="https://formulaire.defenseurdesdroits.fr" color="primary">
https://formulaire.defenseurdesdroits.fr
</A>{' '}
{
t('accessibility.reporting.body2').split(
'https://formulaire.defenseurdesdroits.fr'
)[1]
}
</P>
<P className={indentedStyle}>
<Bold>{t('accessibility.reporting.address.line1')}</Bold>
<br />
{t('accessibility.reporting.address.line2')}
<br />
{t('accessibility.reporting.address.line3')}
</P>
{/* Content reuse section */}
<H lvl={2}>{t('reuse.title')}</H>
<P>{t('reuse.body1')}</P>
<P>{t('reuse.body2')}</P>
{/* Media subsection */}
<H lvl={3} bold>
{t('reuse.media.title')}
</H>
<P>
{t('reuse.media.body').replace('visio@numerique.gouv.fr.', '')}
<A href="mailto:visio@numerique.gouv.fr" color="primary">
visio@numerique.gouv.fr
</A>
.
</P>
<H lvl={2}>{t('liability.title')}</H>
<P>{t('liability.body1')}</P>
<P>{t('liability.body2')}</P>
<P>{t('liability.body3')}</P>
<P>{t('liability.body4')}</P>
<H lvl={2}>{t('dataProtection.title')}</H>
<P>
{t('dataProtection.body').replace('dpd@pm.gouv.fr', '')}{' '}
<A href="mailto:dpd@pm.gouv.fr" color="primary">
dpd@pm.gouv.fr
</A>{' '}
{t('dataProtection.body').split('dpd@pm.gouv.fr')[1]}
</P>
<P className={indentedStyle}>
<Bold>{t('dataProtection.address.line1')}</Bold>
<br />
{t('dataProtection.address.line2')}
<br />
{t('dataProtection.address.line3')}
<br />
{t('dataProtection.address.line4')}
</P>
</HStack>
</Screen>
)
}

View File

@@ -1,6 +1,6 @@
import { styled } from '@/styled-system/jsx'
import { css } from '@/styled-system/css'
import { A } from '@/primitives'
import { A, Link } from '@/primitives'
import { useTranslation } from 'react-i18next'
const StyledLi = styled('li', {
@@ -221,15 +221,14 @@ export const Footer = () => {
</FirstRow>
<SecondRow>
<StyledLi divider>
<A
externalIcon
<Link
underline={false}
footer="minor"
href="https://docs.numerique.gouv.fr/docs/f88a2eb0-7ce7-4016-b6ee-9f1fd1771951/"
aria-label={t('links.legalsTerms') + ' - ' + t('links.ariaLabel')}
to="/mentions-legales"
aria-label={t('links.legalsTerms')}
>
{t('links.legalsTerms')}
</A>
</Link>
</StyledLi>
<StyledLi divider>
<A

View File

@@ -153,6 +153,7 @@ const LoginHint = () => {
export const Header = () => {
const { t } = useTranslation()
const isHome = useMatchesRoute('home')
const isLegalTerms = useMatchesRoute('legalTerms')
const isRoom = useMatchesRoute('room')
const { user, isLoggedIn, logout } = useUser()
@@ -202,7 +203,7 @@ export const Header = () => {
</header>
<nav>
<Stack gap={1} direction="row" align="center">
{isLoggedIn === false && !isHome && (
{isLoggedIn === false && !isHome && !isLegalTerms && (
<>
<ProConnectButton hint={false} />
<LoginHint />

View File

@@ -0,0 +1,69 @@
{
"title": "",
"creator": {
"title": "",
"body": "",
"contact": {
"title": "",
"address": "",
"phone": "",
"siret": "",
"siren": ""
}
},
"director": {
"title": "",
"body": ""
},
"hosting": {
"title": "",
"body": "",
"address": {
"line1": "",
"line2": "",
"line3": "",
"line4": ""
}
},
"accessibility": {
"title": "",
"body": "",
"status": "",
"reporting": {
"title": "",
"body1": "",
"body2": "",
"address": {
"line1": "",
"line2": "",
"line3": ""
}
}
},
"reuse": {
"title": "",
"body1": "",
"body2": "",
"media": {
"title": "",
"body": ""
}
},
"liability": {
"title": "",
"body1": "",
"body2": "",
"body3": "",
"body4": ""
},
"dataProtection": {
"title": "",
"body": "",
"address": {
"line1": "",
"line2": "",
"line3": "",
"line4": ""
}
}
}

View File

@@ -0,0 +1,69 @@
{
"title": "Legal Notices",
"creator": {
"title": "Publisher",
"body": "The Visio site is published by the interministerial digital directorate (DINUM), hereinafter referred to as \"the publisher\", belonging to the Prime Minister's services.",
"contact": {
"title": "Contact Information",
"address": "Address: {{address}}",
"phone": "Reception Tel.: {{phone}}",
"siret": "SIRET: {{siret}}",
"siren": "SIREN: {{siren}}"
}
},
"director": {
"title": "Publication Director",
"body": "Interministerial Digital Director."
},
"hosting": {
"title": "Hosting",
"body": "This website is hosted by Outscale with SecNumCloud certification:",
"address": {
"line1": "Outscale",
"line2": "1, rue Royale",
"line3": "319 Bureaux de la Colline",
"line4": "92210 Saint-Cloud"
}
},
"accessibility": {
"title": "Accessibility",
"body": "Compliance with digital accessibility standards is a future objective. The site has not yet been audited. However, the team strives to create a site accessible to all by following the RGAA recommendations.",
"status": "Accessibility status: non-compliant",
"reporting": {
"title": "Report a malfunction",
"body1": "If you encounter an accessibility issue preventing you from accessing content or a site feature, please let us know by contacting visio@numerique.gouv.fr.",
"body2": "If you do not receive a prompt response from us, you have the right to send your grievances or a request for referral to the Rights Defender. You have the right to send your grievances or request for referral to the \"Rights Defender\" by phone at 09 69 39 00 00, via the online form https://formulaire.defenseurdesdroits.fr or by free mail (no postage required):",
"address": {
"line1": "Défenseur des droits",
"line2": "Libre réponse 71120",
"line3": "75342 Paris CEDEX 07"
}
}
},
"reuse": {
"title": "Content Reuse and Links",
"body1": "Unless explicitly mentioned as intellectual property held by third parties, the contents of this site are offered under an open license.",
"body2": "Any public or private site is authorized to establish, without prior authorization, a link (including deep linking) to the information disseminated on this site.",
"media": {
"title": "Graphics, Photos and Videos",
"body": "Graphics, photographs, and multimedia resources are most often covered by intellectual property rights held by third parties and are not, as such, reusable without their consent. Therefore, we invite you to contact us if you wish to reuse such content so that we can direct you to the holder(s) of these rights: visio@numerique.gouv.fr."
}
},
"liability": {
"title": "Liability Clause",
"body1": "The information offered on this site is provided as a service to public service agents, particularly to agents of State services.",
"body2": "The information and/or documents available on this site are subject to change at any time and may be updated to facilitate access to digital resources.",
"body3": "The information and/or documents accessed from this site are the responsibility of the owners of each interministerial service thus made available.",
"body4": "The publisher cannot under any circumstances be held responsible for any damage of any nature whatsoever resulting from the misuse of resources accessible from this site."
},
"dataProtection": {
"title": "Data Protection Officer",
"body": "If you wish to obtain information about personal data processing managed by a Prime Minister's Service, you can contact the data protection officer (DPO) by email at dpd@pm.gouv.fr or by mail at the following address:",
"address": {
"line1": "Service du Premier ministre",
"line2": "A l'attention du délégué à la protection des données (DPD)",
"line3": "56 rue de Varenne",
"line4": "75700 Paris"
}
}
}

View File

@@ -0,0 +1,69 @@
{
"title": "Mentions Légales",
"creator": {
"title": "Éditeur",
"body": "Le site de Visio est édité par la direction interministérielle du numérique (DINUM), ci-après nommé « l'éditeur », appartenant aux services du Premier ministre.",
"contact": {
"title": "Coordonnées",
"address": "Adresse : {{address}}",
"phone": "Tel. accueil : {{phone}}",
"siret": "SIRET : {{siret}}",
"siren": "SIREN : {{siren}}"
}
},
"director": {
"title": "Directeur de la publication",
"body": "Directeur interministériel du numérique."
},
"hosting": {
"title": "Hébergement",
"body": "Ce site internet est hébergé par chez l'hébergeur Outscale en SecNumCloud :",
"address": {
"line1": "Outscale",
"line2": "1, rue Royale",
"line3": "319 Bureaux de la Colline",
"line4": "92210 Saint-Cloud"
}
},
"accessibility": {
"title": "Accessibilité",
"body": "La conformité aux normes d'accessibilité numérique est un objectif ultérieur. Le site n'a pas encore été audité. Cependant, l'équipe s'efforce de créer un site accessible à tous en suivant les recommandations du RGAA.",
"status": "Etat d'accessibilité : non conforme",
"reporting": {
"title": "Signaler un dysfonctionnement",
"body1": "Si vous rencontrez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une fonctionnalité du site, merci de nous en faire part en nous contactant visio@numerique.gouv.fr.",
"body2": "Si vous n'obtenez pas de réponse rapide de notre part, vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits. Vous êtes en droit de faire parvenir vos doléances ou demande de saisine au « défenseur des droits » par téléphone au 09 69 39 00 00, via le formulaire en ligne https://formulaire.defenseurdesdroits.fr ou encore par courrier gratuit (sans affranchissement) :",
"address": {
"line1": "Défenseur des droits",
"line2": "Libre réponse 71120",
"line3": "75342 Paris CEDEX 07"
}
}
},
"reuse": {
"title": "Réutilisation des contenus et liens",
"body1": "Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous licence ouverte.",
"body2": "Tout site public ou privé est autorisé à établir, sans autorisation préalable, un lien (y compris profond) vers les informations diffusées sur ce site.",
"media": {
"title": "Graphismes, photos et vidéos",
"body": "Les graphismes, photographies et ressources multimédias sont le plus souvent couverts par des droits de propriété intellectuelle détenus par des tiers et ne sont pas, à ce titre, réutilisables sans leur accord. Aussi, nous vous invitons à nous contacter si vous souhaitez réutiliser de tels contenus afin que nous puissions vous orienter vers le(s) titulaire(s) de ces droits : visio@numerique.gouv.fr."
}
},
"liability": {
"title": "Clause de responsabilité",
"body1": "Les informations proposées sur ce site le sont à titre de service rendu aux agents du service public, notamment aux agents des services de l'Etat.",
"body2": "Les informations et/ou documents disponibles sur ce site sont susceptibles d'être modifiés à tout moment, et peuvent faire l'objet de mises à jour pour faciliter l'accès aux ressources numériques.",
"body3": "Les informations et/ou documents accédés à partir de ce site relèvent de la responsabilité des porteurs de chaque service interministériel ainsi mis à disposition.",
"body4": "L'éditeur ne pourra en aucun cas être tenue responsable de tout dommage de quelque nature qu'il soit résultant de la mauvaise utilisation des ressources accessibles à partir de ce site."
},
"dataProtection": {
"title": "Délégué à la protection des données",
"body": "Si vous souhaitez obtenir des informations sur les traitements de données personnelles gérés par un Service Premier Ministre vous pouvez contacter le délégué à la protection des données (DPD) par courriel à l'adresse dpd@pm.gouv.fr ou par courrier à l'adresse suivante :",
"address": {
"line1": "Service du Premier ministre",
"line2": "A l'attention du délégué à la protection des données (DPD)",
"line3": "56 rue de Varenne",
"line4": "75700 Paris"
}
}
}

View File

@@ -0,0 +1,69 @@
{
"title": "Legal Notices",
"creator": {
"title": "Publisher",
"body": "The Visio site is published by the interministerial digital directorate (DINUM), hereinafter referred to as \"the publisher\", belonging to the Prime Minister's services.",
"contact": {
"title": "Contact Information",
"address": "Address: {{address}}",
"phone": "Reception Tel.: {{phone}}",
"siret": "SIRET: {{siret}}",
"siren": "SIREN: {{siren}}"
}
},
"director": {
"title": "Publication Director",
"body": "Interministerial Digital Director."
},
"hosting": {
"title": "Hosting",
"body": "This website is hosted by Outscale with SecNumCloud certification:",
"address": {
"line1": "Outscale",
"line2": "1, rue Royale",
"line3": "319 Bureaux de la Colline",
"line4": "92210 Saint-Cloud"
}
},
"accessibility": {
"title": "Accessibility",
"body": "Compliance with digital accessibility standards is a future objective. The site has not yet been audited. However, the team strives to create a site accessible to all by following the RGAA recommendations.",
"status": "Accessibility status: non-compliant",
"reporting": {
"title": "Report a malfunction",
"body1": "If you encounter an accessibility issue preventing you from accessing content or a site feature, please let us know by contacting visio@numerique.gouv.fr.",
"body2": "If you do not receive a prompt response from us, you have the right to send your grievances or a request for referral to the Rights Defender. You have the right to send your grievances or request for referral to the \"Rights Defender\" by phone at 09 69 39 00 00, via the online form https://formulaire.defenseurdesdroits.fr or by free mail (no postage required):",
"address": {
"line1": "Défenseur des droits",
"line2": "Libre réponse 71120",
"line3": "75342 Paris CEDEX 07"
}
}
},
"reuse": {
"title": "Content Reuse and Links",
"body1": "Unless explicitly mentioned as intellectual property held by third parties, the contents of this site are offered under an open license.",
"body2": "Any public or private site is authorized to establish, without prior authorization, a link (including deep linking) to the information disseminated on this site.",
"media": {
"title": "Graphics, Photos and Videos",
"body": "Graphics, photographs, and multimedia resources are most often covered by intellectual property rights held by third parties and are not, as such, reusable without their consent. Therefore, we invite you to contact us if you wish to reuse such content so that we can direct you to the holder(s) of these rights: visio@numerique.gouv.fr."
}
},
"liability": {
"title": "Liability Clause",
"body1": "The information offered on this site is provided as a service to public service agents, particularly to agents of State services.",
"body2": "The information and/or documents available on this site are subject to change at any time and may be updated to facilitate access to digital resources.",
"body3": "The information and/or documents accessed from this site are the responsibility of the owners of each interministerial service thus made available.",
"body4": "The publisher cannot under any circumstances be held responsible for any damage of any nature whatsoever resulting from the misuse of resources accessible from this site."
},
"dataProtection": {
"title": "Data Protection Officer",
"body": "If you wish to obtain information about personal data processing managed by a Prime Minister's Service, you can contact the data protection officer (DPO) by email at dpd@pm.gouv.fr or by mail at the following address:",
"address": {
"line1": "Service du Premier ministre",
"line2": "A l'attention du délégué à la protection des données (DPD)",
"line3": "56 rue de Varenne",
"line4": "75700 Paris"
}
}
}

View File

@@ -1,8 +1,9 @@
import { FeedbackRoute, RoomRoute, roomIdPattern } from '@/features/rooms'
import { HomeRoute } from '@/features/home'
import { LegalTermsRoute } from '@/features/legalsTerms/LegalTermsRoute'
export const routes: Record<
'home' | 'room' | 'feedback',
'home' | 'room' | 'feedback' | 'legalTerms',
{
name: RouteName
path: RegExp | string
@@ -27,6 +28,11 @@ export const routes: Record<
path: '/feedback',
Component: FeedbackRoute,
},
legalTerms: {
name: 'legalTerms',
path: '/mentions-legales',
Component: LegalTermsRoute,
},
}
export type RouteName = keyof typeof routes