From 3ff7619e942d1ac8802eca0c386128d1278db5bf Mon Sep 17 00:00:00 2001 From: Sonny Date: Mon, 20 May 2024 01:07:11 +0200 Subject: [PATCH] feat: bring back legal pages --- app/controllers/apps_controller.ts | 4 -- .../common/dropdown/dropdown_label.tsx | 2 +- inertia/components/home/hero_header.tsx | 4 +- .../layouts/legal_content_layout.tsx | 36 +++++++++++++ inertia/components/legal/legal_footer.tsx | 20 +++++++ inertia/i18n/index.ts | 9 +++- inertia/i18n/locales/en/legal.json | 10 ++++ inertia/i18n/locales/en/privacy.json | 8 --- inertia/i18n/locales/en/terms.json | 10 +--- inertia/i18n/locales/fr/legal.json | 10 ++++ inertia/i18n/locales/fr/privacy.json | 8 --- inertia/i18n/locales/fr/terms.json | 10 +--- inertia/pages/home.tsx | 2 +- inertia/pages/privacy.tsx | 44 +++++++++++++++ inertia/pages/terms.tsx | 53 +++++++++++++++++++ start/routes/app.ts | 6 +-- 16 files changed, 190 insertions(+), 46 deletions(-) create mode 100644 inertia/components/layouts/legal_content_layout.tsx create mode 100644 inertia/components/legal/legal_footer.tsx create mode 100644 inertia/i18n/locales/en/legal.json create mode 100644 inertia/i18n/locales/fr/legal.json create mode 100644 inertia/pages/privacy.tsx create mode 100644 inertia/pages/terms.tsx diff --git a/app/controllers/apps_controller.ts b/app/controllers/apps_controller.ts index 4e52127..565fa13 100644 --- a/app/controllers/apps_controller.ts +++ b/app/controllers/apps_controller.ts @@ -3,10 +3,6 @@ import { updateUserThemeValidator } from '#validators/user'; import type { HttpContext } from '@adonisjs/core/http'; export default class AppsController { - index({ inertia }: HttpContext) { - return inertia.render('home'); - } - async updateUserTheme({ request, session, response }: HttpContext) { const { preferDarkTheme } = await request.validateUsing( updateUserThemeValidator diff --git a/inertia/components/common/dropdown/dropdown_label.tsx b/inertia/components/common/dropdown/dropdown_label.tsx index e5d55c6..f8071b6 100644 --- a/inertia/components/common/dropdown/dropdown_label.tsx +++ b/inertia/components/common/dropdown/dropdown_label.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -const DropdownLabel = styled.p(({ theme }) => ({ +const DropdownLabel = styled.div(({ theme }) => ({ height: 'auto', width: 'auto', color: theme.colors.font, diff --git a/inertia/components/home/hero_header.tsx b/inertia/components/home/hero_header.tsx index a5ec862..018702e 100644 --- a/inertia/components/home/hero_header.tsx +++ b/inertia/components/home/hero_header.tsx @@ -8,7 +8,7 @@ const HeroStyle = styled.header(({ theme }) => ({ height: '250px', minHeight: '250px', width: '100%', - backgroundColor: theme.colors.darkestBlue, + backgroundColor: theme.colors.secondary, marginTop: '0.5em', borderRadius: theme.border.radius, padding: '1em', @@ -19,7 +19,6 @@ const HeroStyle = styled.header(({ theme }) => ({ flexDirection: 'column', '& *': { - color: `${theme.colors.white} !important`, textAlign: 'center', }, })); @@ -35,6 +34,7 @@ const HeroQuote = styled(Quotes)({ const LinkButton = styled(Link)(({ theme }) => ({ fontSize: '1rem', width: 'fit-content', + color: theme.colors.white, backgroundColor: theme.colors.primary, borderRadius: '5rem', padding: '0.5em 1.5em', diff --git a/inertia/components/layouts/legal_content_layout.tsx b/inertia/components/layouts/legal_content_layout.tsx new file mode 100644 index 0000000..eadd291 --- /dev/null +++ b/inertia/components/layouts/legal_content_layout.tsx @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; +import { ReactNode } from 'react'; +import ContentLayout from '~/components/layouts/content_layout'; +import LegalFooter from '~/components/legal/legal_footer'; + +const LegalContentStyle = styled(ContentLayout)({ + main: { + 'h1, p': { + marginTop: '0.5em', + }, + h2: { + marginTop: '1.5em', + }, + h3: { + marginTop: '1em', + }, + ul: { + marginLeft: '2em', + }, + }, +}); + +const LegalContentLayout = ({ + children, + className, +}: { + children: ReactNode; + className?: string; +}) => ( + + {children} + + +); + +export default LegalContentLayout; diff --git a/inertia/components/legal/legal_footer.tsx b/inertia/components/legal/legal_footer.tsx new file mode 100644 index 0000000..db07483 --- /dev/null +++ b/inertia/components/legal/legal_footer.tsx @@ -0,0 +1,20 @@ +import { useTranslation } from 'react-i18next'; +import ExternalLink from '~/components/common/external_link'; + +export default function LegalFooter() { + const { t } = useTranslation('legal'); + return ( + <> +

{t('contact.title')}

+

+ {t('contact.description')}{' '} + + sonnyasdev[at]gmail[dot]com + +

+ +

{t('footer.changes')}

+

{t('footer.thanks')}

+ + ); +} diff --git a/inertia/i18n/index.ts b/inertia/i18n/index.ts index b499bfb..76bb804 100644 --- a/inertia/i18n/index.ts +++ b/inertia/i18n/index.ts @@ -9,8 +9,10 @@ import frResourceAdmin from './locales/fr/admin.json'; import frResourceCommon from './locales/fr/common.json'; import frResourceHome from './locales/fr/home.json'; import frResourceLogin from './locales/fr/login.json'; + import frResourcePrivacy from './locales/fr/privacy.json'; import frResourceTerms from './locales/fr/terms.json'; +import frResourceLegal from './locales/fr/legal.json'; import { LS_LANG_KEY } from '~/constants'; import enResourceAbout from './locales/en/about.json'; @@ -18,8 +20,10 @@ import enResourceAdmin from './locales/en/admin.json'; import enResourceCommon from './locales/en/common.json'; import enResourceHome from './locales/en/home.json'; import enResourceLogin from './locales/en/login.json'; + import enResourcePrivacy from './locales/en/privacy.json'; import enResourceTerms from './locales/en/terms.json'; +import enResourceLegal from './locales/en/legal.json'; type I18nFR = | RemoveSuffix> @@ -28,7 +32,8 @@ type I18nFR = | RemoveSuffix> | RemoveSuffix> | RemoveSuffix> - | RemoveSuffix>; + | RemoveSuffix> + | RemoveSuffix>; export type I18nKey = I18nFR; export const resources = { @@ -40,6 +45,7 @@ export const resources = { login: enResourceLogin, privacy: enResourcePrivacy, terms: enResourceTerms, + legal: enResourceLegal, }, fr: { about: frResourceAbout, @@ -49,6 +55,7 @@ export const resources = { login: frResourceLogin, privacy: frResourcePrivacy, terms: frResourceTerms, + legal: frResourceLegal, }, } as const; diff --git a/inertia/i18n/locales/en/legal.json b/inertia/i18n/locales/en/legal.json new file mode 100644 index 0000000..1851847 --- /dev/null +++ b/inertia/i18n/locales/en/legal.json @@ -0,0 +1,10 @@ +{ + "contact": { + "title": "Contact", + "description": "For any questions or concerns regarding these Terms and Conditions of Use, please contact us at the following address:" + }, + "footer": { + "changes": "We reserve the right to update these Terms and Conditions of Use. We encourage you to regularly check this page to stay informed of any changes.", + "thanks": "Thank you for using MyLinks!" + } +} \ No newline at end of file diff --git a/inertia/i18n/locales/en/privacy.json b/inertia/i18n/locales/en/privacy.json index ab78c3e..9a89f82 100644 --- a/inertia/i18n/locales/en/privacy.json +++ b/inertia/i18n/locales/en/privacy.json @@ -39,13 +39,5 @@ "gdpr": { "title": "5. GDPR Compliance", "description": "MyLinks complies with the General Data Protection Regulation (GDPR) of the European Union." - }, - "contact": { - "title": "6. Contact", - "description": "If you have any questions or concerns about our privacy policy, feel free to contact us at the following address:" - }, - "footer": { - "changes": "We reserve the right to update this privacy policy. We encourage you to regularly check this page to stay informed of any changes.", - "thanks": "Thank you for using MyLinks!" } } \ No newline at end of file diff --git a/inertia/i18n/locales/en/terms.json b/inertia/i18n/locales/en/terms.json index c0e45bb..c9bed55 100644 --- a/inertia/i18n/locales/en/terms.json +++ b/inertia/i18n/locales/en/terms.json @@ -50,13 +50,5 @@ "cancel": { "title": "6. Termination", "description": "MyLinks reserves the right to terminate or suspend your access to the service, with or without notice, in case of violation of these Terms and Conditions of Use." - }, - "contact": { - "title": "7. Contact", - "description": "For any questions or concerns regarding these Terms and Conditions of Use, please contact us at the following address:" - }, - "footer": { - "changes": "We reserve the right to update these Terms and Conditions of Use. We encourage you to regularly check this page to stay informed of any changes.", - "thanks": "Thank you for using MyLinks!" } -} +} \ No newline at end of file diff --git a/inertia/i18n/locales/fr/legal.json b/inertia/i18n/locales/fr/legal.json new file mode 100644 index 0000000..c80c981 --- /dev/null +++ b/inertia/i18n/locales/fr/legal.json @@ -0,0 +1,10 @@ +{ + "contact": { + "title": "Contact", + "description": "Pour toute question ou préoccupation concernant ces Conditions Générales d'Utilisation, veuillez nous contacter à l'adresse suivante :" + }, + "footer": { + "changes": "Nous nous réservons le droit de mettre à jour ces Conditions Générales d'Utilisation. Nous vous encourageons à consulter régulièrement cette page pour rester informé des changements éventuels.", + "thanks": "Merci d'utiliser MyLinks !" + } +} \ No newline at end of file diff --git a/inertia/i18n/locales/fr/privacy.json b/inertia/i18n/locales/fr/privacy.json index ab5f493..c1eb814 100644 --- a/inertia/i18n/locales/fr/privacy.json +++ b/inertia/i18n/locales/fr/privacy.json @@ -39,13 +39,5 @@ "gdpr": { "title": "5. Conformité au RGPD", "description": "MyLinks est conforme au Règlement Général sur la Protection des Données (RGPD) de l'Union européenne." - }, - "contact": { - "title": "6. Contact", - "description": "Si vous avez des questions ou des préoccupations concernant notre politique de confidentialité, n'hésitez pas à nous contacter à l'adresse suivante :" - }, - "footer": { - "changes": "Nous nous réservons le droit de mettre à jour cette politique de confidentialité. Nous vous encourageons à consulter régulièrement cette page pour rester informé des changements éventuels.", - "thanks": "Merci d'utiliser MyLinks !" } } \ No newline at end of file diff --git a/inertia/i18n/locales/fr/terms.json b/inertia/i18n/locales/fr/terms.json index 168dd40..cfbe8a5 100644 --- a/inertia/i18n/locales/fr/terms.json +++ b/inertia/i18n/locales/fr/terms.json @@ -50,13 +50,5 @@ "cancel": { "title": "6. Résiliation", "description": "MyLinks se réserve le droit de résilier ou de suspendre votre accès au service, avec ou sans préavis, en cas de violation de ces Conditions Générales d'Utilisation." - }, - "contact": { - "title": "7. Contact", - "description": "Pour toute question ou préoccupation concernant ces Conditions Générales d'Utilisation, veuillez nous contacter à l'adresse suivante :" - }, - "footer": { - "changes": "Nous nous réservons le droit de mettre à jour ces Conditions Générales d'Utilisation. Nous vous encourageons à consulter régulièrement cette page pour rester informé des changements éventuels.", - "thanks": "Merci d'utiliser MyLinks !" } -} +} \ No newline at end of file diff --git a/inertia/pages/home.tsx b/inertia/pages/home.tsx index 07a94bf..94a7266 100644 --- a/inertia/pages/home.tsx +++ b/inertia/pages/home.tsx @@ -19,7 +19,7 @@ const PageContent = styled.div({ flexDirection: 'column', }); -export default function Home() { +export default function HomePage() { const { t } = useTranslation(); return ( diff --git a/inertia/pages/privacy.tsx b/inertia/pages/privacy.tsx new file mode 100644 index 0000000..2f59614 --- /dev/null +++ b/inertia/pages/privacy.tsx @@ -0,0 +1,44 @@ +import { useTranslation } from 'react-i18next'; +import LegalContentLayout from '~/components/layouts/legal_content_layout'; + +export default function TermsPage() { + const { t } = useTranslation('privacy'); + return ( + +

{t('title')}

+

{t('edited_at', { date: '19/11/2023' })}

+

{t('welcome')}

+ +

{t('collect.title')}

+

{t('collect.cookie.title')}

+

{t('collect.cookie.description')}

+ +

{t('collect.user.title')}

+

{t('collect.user.description')}

+
    + {( + t('collect.user.fields', { + returnObjects: true, + }) as Array + ).map((field) => ( +
  • {field}
    • + ))} +
+ +

{t('data_use.title')}

+

{t('data_use.description')}

+ +

{t('data_storage.title')}

+

{t('data_storage.description')}

+ +

{t('data_storage.data_retention.title')}

+

{t('data_storage.data_retention.description')}

+ +

{t('user_rights.title')}

+

{t('user_rights.description')}

+ +

{t('gdpr.title')}

+

{t('gdpr.description')}

+ + ); +} diff --git a/inertia/pages/terms.tsx b/inertia/pages/terms.tsx new file mode 100644 index 0000000..7132166 --- /dev/null +++ b/inertia/pages/terms.tsx @@ -0,0 +1,53 @@ +import { Link } from '@inertiajs/react'; +import { route } from '@izzyjs/route/client'; +import { Trans, useTranslation } from 'react-i18next'; +import LegalContentLayout from '~/components/layouts/legal_content_layout'; + +export default function TermsPage() { + const { t } = useTranslation('terms'); + return ( + +

{t('title')}

+

{t('edited_at', { date: '19/11/2023' })}

+

{t('welcome')}

+ +

{t('accept.title')}

+

{t('accept.description')}

+ +

{t('use.title')}

+

{t('use.account.title')}

+

{t('use.account.description')}

+ +

{t('use.allowed.title')}

+

{t('use.allowed.description')}

+ +

{t('use.user_content.title')}

+

{t('use.user_content.description')}

+ +

{t('personal_data.title')}

+

{t('personal_data.collect.title')}

+

+ }} + /> +

+ +

{t('personal_data.suppress.title')}

+

{t('personal_data.suppress.description')}

+ +

{t('responsibility_warranty.title')}

+

{t('responsibility_warranty.responsibility.title')}

+

{t('responsibility_warranty.responsibility.description')}

+ +

{t('responsibility_warranty.warranty.title')}

+

{t('responsibility_warranty.warranty.description')}

+ +

{t('terms_changes.title')}

+

{t('terms_changes.description')}

+ +

{t('cancel.title')}

+

{t('cancel.description')}

+ + ); +} diff --git a/start/routes/app.ts b/start/routes/app.ts index 83568c0..d17c931 100644 --- a/start/routes/app.ts +++ b/start/routes/app.ts @@ -5,9 +5,9 @@ const AppsController = () => import('#controllers/apps_controller'); * All routes for both logged and guest users */ router.group(() => { - router.get('/', [AppsController, 'index']).as('home'); - router.get('/privacy', () => 'privacy').as('privacy'); - router.get('/terms', () => 'terms').as('terms'); + router.on('/').renderInertia('home').as('home'); + router.on('/terms').renderInertia('terms').as('terms'); + router.on('/privacy').renderInertia('privacy').as('privacy'); router .post('/user/theme', [AppsController, 'updateUserTheme'])