From 80813ab9e5dc56efce1dc047db99149d5eee5e59 Mon Sep 17 00:00:00 2001 From: Noah Lancien Date: Mon, 3 Mar 2025 12:31:26 +0100 Subject: [PATCH] fix: Updated cookie-notice and added recaptcha on contact + register forms. #71 #72 #73 #74 --- app/Http/Requests/Fo/ContactFormRequest.php | 8 +- package-lock.json | 8 +- package.json | 2 +- resources/lang/en/cookie-notice.php | 19 ++--- resources/lang/fr/cookie-notice.php | 25 ++++--- resources/ts/fo/base/common.ts | 12 --- resources/ts/fo/utilities/bootstrap.ts | 5 ++ resources/ts/index.d.ts | 5 ++ resources/ts/modules/recaptcha.ts | 46 ++++++++++++ .../contact/need-recaptcha-banner.blade.php | 41 ++++++++++ resources/views/fo/auth/register.blade.php | 32 +++++++- resources/views/fo/layouts/footer.blade.php | 2 +- resources/views/fo/pages/contact.blade.php | 75 ++++++------------- resources/views/vendor/cn-cookies.blade.php | 56 ++++++++++---- .../standard.blade.php | 24 +++--- 15 files changed, 227 insertions(+), 133 deletions(-) create mode 100644 resources/ts/modules/recaptcha.ts create mode 100644 resources/views/components/fo/contact/need-recaptcha-banner.blade.php diff --git a/app/Http/Requests/Fo/ContactFormRequest.php b/app/Http/Requests/Fo/ContactFormRequest.php index 2e4113c..ad9178e 100644 --- a/app/Http/Requests/Fo/ContactFormRequest.php +++ b/app/Http/Requests/Fo/ContactFormRequest.php @@ -27,8 +27,6 @@ class ContactFormRequest extends FormRequest 'city' => Str::of($this->post('city'))->value(), 'postal_code' => Str::of($this->post('postal_code'))->value(), 'message' => Str::of($this->post('message'))->value(), - // * boolean - 'terms' => $this->post('terms') ? true : false, // * integer 'batch_number' => $this->post('batch_number') ? intval($this->post('batch_number')) : null, ]); @@ -66,8 +64,6 @@ class ContactFormRequest extends FormRequest 'postal_code' => 'present|min:0|postal_code:FR|max:25', 'message' => 'present|min:20|max:35656', 'file' => 'nullable|file|mimes:jpg,jpeg,png,pdf|max:2048', - // * obligatoire - 'terms' => 'required|boolean|accepted', // * Conditional fields // * obligatoire si type == product @@ -99,7 +95,6 @@ class ContactFormRequest extends FormRequest return [ 'subject' => trans('validation.attributes.subject'), 'file' => trans('validation.custom.attachment'), - 'terms' => trans('validation.attributes.terms'), 'expiration_date' => trans('validation.custom.expiration_date'), 'batch_number' => trans('validation.custom.batch_number'), 'job_title' => trans('validation.custom.job_title'), @@ -115,7 +110,8 @@ class ContactFormRequest extends FormRequest { return [ 'postal_code' => trans('validation.custom.postal_code', [ - 'countries' => Country::france->label(), 'examples' => 72000 + 'countries' => Country::france->label(), + 'examples' => 72000 ]), 'phone.phone' => trans('validation.custom.phone'), ]; diff --git a/package-lock.json b/package-lock.json index 8977504..6a4ca1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/vue-fontawesome": "^3.0.5", - "@ldc-web/cookie-notice": "^3.1.2", + "@ldc-web/cookie-notice": "^6.1.0", "@sipec/vue3-tags-input": "^3.0.4", "@types/bootstrap": "^5.2.7", "@types/node": "^20.8.2", @@ -1050,9 +1050,9 @@ "dev": true }, "node_modules/@ldc-web/cookie-notice": { - "version": "3.1.3", - "resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-3.1.3.tgz", - "integrity": "sha1-+VPwI1VOhD+nWZeutLhT+on02CU=", + "version": "6.1.0", + "resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-6.1.0.tgz", + "integrity": "sha1-bzewvM6mGuWr3Ju8/HWkxXm60+A=", "dev": true }, "node_modules/@nodelib/fs.scandir": { diff --git a/package.json b/package.json index 4dc4d55..9479cfd 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/vue-fontawesome": "^3.0.5", - "@ldc-web/cookie-notice": "^3.1.2", + "@ldc-web/cookie-notice": "^6.1.0", "@sipec/vue3-tags-input": "^3.0.4", "@types/bootstrap": "^5.2.7", "@types/node": "^20.8.2", diff --git a/resources/lang/en/cookie-notice.php b/resources/lang/en/cookie-notice.php index b97ed87..2599a04 100644 --- a/resources/lang/en/cookie-notice.php +++ b/resources/lang/en/cookie-notice.php @@ -1,26 +1,26 @@ 'Customize cookies', 'button_close_cookies' => 'Close cookie window', - 'button_forbid' => 'Prohibit', - 'button_allow' => 'Allow', - 'button_forbid_all' => 'Reject all', + 'button_toggle_cookie' => 'Accept or refuse', + 'button_forbid_all' => 'Refuse all', 'button_allow_all' => 'Accept all', + 'button_allow' => 'Accept', 'button_forbid_all_title' => 'Refuse all cookies and close the cookies panel', 'button_allow_all_title' => 'Accept all cookies and close the cookies panel', 'button_customize' => 'Customize', - 'button_back' => 'Back', + 'button_validate_and_close' => 'Confirm and close', + 'button_title_open_new_tab' => 'Open link in new tab', 'banner_title' => 'The :site_name website uses cookies!', 'banner_text' => 'We use cookies to ensure the proper functioning of our site and for analytical purposes. You can change your mind at any time by clicking on the icon on any page of our site. By authorizing these third-party services, you agree to the deposit and reading of cookies and the use of tracking technologies necessary for their proper operation.', - 'panel_title' => 'Cookie management panel', + 'modal_title' => 'Cookie management window', 'panel_content' => 'Cookie management panel content', - 'panel_subtitle' => 'Your privacy is our priority', - 'panel_details' => 'The functionalities of this site are based on services provided by third parties. If you accept, these third parties will deposit cookies that will enable you to view content on the site hosted by these third parties. Through these cookies, these third parties will collect and use your browsing data for their own purposes, in accordance with their privacy policy (link below). This page allows you to give or withdraw your consent, either globally or service by service.', + 'picture_cookie_title' => 'Image of a nice big cookie', + 'navigation_title' => 'Cookies panel navigation', 'custom' => [ 'matomo' => [ 'title' => 'Matomo', @@ -31,7 +31,8 @@ return [ 'title' => 'reCAPTCHA', 'description' => 'The purpose of the cookies placed on forms via the recaptcha is to prevent them from being submitted by robots.', 'labelLink' => 'Learn more', - 'warning' => 'You must accept cookies to send the form', + 'warning' => 'You must accept reCAPTCHA cookies to send the form', + 'accept' => 'Accept this cookie to use the forms' ] ] ]; diff --git a/resources/lang/fr/cookie-notice.php b/resources/lang/fr/cookie-notice.php index f8e0b03..33e77ad 100644 --- a/resources/lang/fr/cookie-notice.php +++ b/resources/lang/fr/cookie-notice.php @@ -1,37 +1,38 @@ 'Personnaliser les cookies', 'button_close_cookies' => 'Fermer la fenêtre des cookies', - 'button_forbid' => 'Interdire', - 'button_allow' => 'Autoriser', + 'button_toggle_cookie' => 'Autoriser ou refuser', 'button_forbid_all' => 'Tout refuser', 'button_allow_all' => 'Tout accepter', + 'button_allow' => 'Autoriser', 'button_forbid_all_title' => 'Refuser tous les cookies et fermer le panneau des cookies', 'button_allow_all_title' => 'Accepter tous les cookies et fermer le panneau des cookies', 'button_customize' => 'Personnaliser', - 'button_back' => 'Retour', + 'button_validate_and_close' => 'Valider et fermer', + 'button_title_open_new_tab' => 'Ouvrir le lien dans un nouvel onglet', 'banner_title' => 'Le site internet :site_name utilise des cookies !', 'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. - Vous pouvez changer d\'avis à tout moment en cliquant sur l\'icône présente sur chaque page de notre site. - En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l\'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.', - 'panel_title' => 'Panneau de gestion des cookies', + Vous pouvez changer d’avis à tout moment en cliquant sur l’icône présente sur chaque page de notre site. + En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l’utilisation de technologies de suivi nécessaires à leur bon fonctionnement.', + 'modal_title' => 'Fenêtre de gestion de cookies', 'panel_content' => 'Contenu du panneau des cookies', - 'panel_subtitle' => 'Le respect de votre vie privée est notre priorité', - 'panel_details' => 'Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers. Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers. Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit service par service.', + 'picture_cookie_title' => 'Image d’un bon gros cookie', + 'navigation_title' => 'Navigation du panneau des cookies', 'custom' => [ 'matomo' => [ 'title' => 'Matomo', - 'description' => 'Les services de mesure d\'audience permettent de générer des statistiques de fréquentation utiles à l\'amélioration du site.', + 'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.', 'labelLink' => 'En apprendre plus', ], 'recaptcha' => [ 'title' => 'reCAPTCHA', - 'description' => 'Les cookies qui sont déposés via le recaptcha sur les formulaires ont pour finalité d\'empêcher que ceux-ci ne soient soumis par des robots.', + 'description' => 'Les cookies qui sont déposés via le recaptcha sur les formulaires ont pour finalité d’empêcher que ceux-ci ne soient soumis par des robots.', 'labelLink' => 'En apprendre plus', - 'warning' => 'Vous devez accepter les cookies pour envoyer le formulaire', + 'warning' => 'Vous devez accepter les cookies reCAPTCHA pour envoyer le formulaire', + 'accept' => 'Acceptez ce cookie pour utiliser les formulaires' ] ] ]; diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts index 10ba014..9e3bfdf 100644 --- a/resources/ts/fo/base/common.ts +++ b/resources/ts/fo/base/common.ts @@ -210,18 +210,6 @@ document.addEventListener("DOMContentLoaded", function () { animateSeagull(); } - // document.addEventListener("scroll", () => { - // const seagullsScroll = document.getElementById("seagulls-scroll"); - // if (seagullsScroll) { - // // Animate the seagulls on scroll - // const seagullsOffset = Number.parseInt(String(seagullsScroll.dataset.offset ?? 16)); - // const percent = (- (100 * seagullsScroll.getBoundingClientRect().top / window.innerHeight - 100) ); - // if (percent > 0 && percent < 100) { - // seagullsScroll.style.top = `calc(${percent}% - ${(seagullsOffset + seagullsScroll.getBoundingClientRect().height) * percent / 100}px)`; - // } - // } - // }); - // * Keyboard navigation for news slider const newsSlider = document.getElementById("swiper-news"); if (newsSlider) { diff --git a/resources/ts/fo/utilities/bootstrap.ts b/resources/ts/fo/utilities/bootstrap.ts index 2419164..f41d43b 100644 --- a/resources/ts/fo/utilities/bootstrap.ts +++ b/resources/ts/fo/utilities/bootstrap.ts @@ -1,6 +1,8 @@ +import CookieNotice from "@ldc-web/cookie-notice"; import axios from "axios"; import * as bootstrap from "bootstrap"; import bsTooltips from "./../../modules/bsTooltips"; +import recaptcha from "./../../modules/recaptcha"; /** * We'll load the axios HTTP library which allows us to easily issue requests @@ -19,3 +21,6 @@ window.axios = axios; window.bootstrap = bootstrap; bsTooltips.methods.initTooltips(); + +window.CookieNotice = CookieNotice; +window.Recaptcha = recaptcha; diff --git a/resources/ts/index.d.ts b/resources/ts/index.d.ts index 6a78276..f6e7272 100644 --- a/resources/ts/index.d.ts +++ b/resources/ts/index.d.ts @@ -2,6 +2,7 @@ export { }; import CookieNotice from "@ldc-web/cookie-notice"; import type VueTagsInput from "@sipec/vue3-tags-input"; import { AxiosStatic } from "axios"; +import { type recaptcha } from "./modules/recaptcha"; // * Enum interface EnumInterface { @@ -76,6 +77,10 @@ declare global { Swal: Function; vueDebug: boolean | undefined; CookieNotice: typeof CookieNotice; + __CN_Recaptcha: Function; + __CN_Recaptcha_Reset: Function; + __CN_Recaptcha_Loaded: Function; + Recaptcha: recaptcha; __SYSTEM: { _asset: string; _locale: string; diff --git a/resources/ts/modules/recaptcha.ts b/resources/ts/modules/recaptcha.ts new file mode 100644 index 0000000..87919c5 --- /dev/null +++ b/resources/ts/modules/recaptcha.ts @@ -0,0 +1,46 @@ +export default { + methods: { + // * Set recaptcha window variables and init it. + init(forms: Array) { + if(forms.length) { + window.__CN_Recaptcha = function () { + forms.map((form) => { + if (!form.querySelector(".r_captcha > div")) { + const newDiv = document.createElement("div"); + newDiv.classList.add("g-recaptcha"); + form.querySelector(".r_captcha")?.appendChild(newDiv); + } + form.inert = true; + }); + (function(d, t) { + const g = d.createElement(t) as HTMLIFrameElement, + s = d.getElementsByTagName(t)[0]; + g.src = "https://www.google.com/recaptcha/api.js?render=explicit&onload=__CN_Recaptcha_Loaded"; + s.parentNode?.insertBefore(g, s); + }(document, "script")); + }; + window.__CN_Recaptcha_Reset = function() { + forms.map((form) => { + form.querySelector(".r_captcha > div")?.remove(); + form.inert = true; + }); + }; + window.__CN_Recaptcha_Loaded = function() { + forms.map((form) => { + form.inert = false; + if (form.querySelector(".r_captcha > div") !== null) { + // @ts-ignore + grecaptcha.render(document.querySelector(".r_captcha > div"), { + "sitekey": form.dataset.recaptchaKey ?? "" + }); + } + }); + }; + // @ts-ignore + if (window.WebCookieNotice.getCnCookieStatus("recaptcha") === "true") { + window.__CN_Recaptcha(); + } + } + }, + }, +}; diff --git a/resources/views/components/fo/contact/need-recaptcha-banner.blade.php b/resources/views/components/fo/contact/need-recaptcha-banner.blade.php new file mode 100644 index 0000000..b3b8fbf --- /dev/null +++ b/resources/views/components/fo/contact/need-recaptcha-banner.blade.php @@ -0,0 +1,41 @@ +
!$shouldBeDark, + 'bg-primary' => $shouldBeDark, +])> + + !$shouldBeDark, + 'text-tertiary' => $shouldBeDark, + ])> + {{ __('cookie-notice.custom.recaptcha.warning') }} + +

+ !$shouldBeDark, + 'text-white' => $shouldBeDark, + ])> + {{ __('cookie-notice.custom.recaptcha.accept') }} + + + +
+ +@push('scripts') + +@endpush diff --git a/resources/views/fo/auth/register.blade.php b/resources/views/fo/auth/register.blade.php index 1a80097..76e812d 100644 --- a/resources/views/fo/auth/register.blade.php +++ b/resources/views/fo/auth/register.blade.php @@ -2,8 +2,7 @@ @section('title', __($staticPageModel->seo_title)) @section('description', __($staticPageModel->seo_description)) -@section('breadcrumb', - request()->route()->getName()) +@section('breadcrumb', request()->route()->getName()) @section('main-bg-class', 'bg-textured') @@ -15,7 +14,12 @@ {{ __('Trait souligné') }} -
+
+ +
+ + @csrf
@@ -51,6 +55,16 @@
{{ $message }}
@endforeach + +
+

+ {{ __('Les informations recueillies à partir de ce formulaire sont traitées par le Responsable de Traitement pour la création de votre compte utilisateur. Pour connaître vos droits, vous pouvez consulter la') }} + {{ __('Charte de confidentialité') }} +

+ +
+
@@ -59,6 +73,18 @@
+ {{-- RECAPTCHA --}} +
+
+
+ @if ($errors->has('g-recaptcha-response')) +
+ {{ $errors->first('g-recaptcha-response') }} +
+ @endif +
+
+
- {{-- TERMS --}} -
-
- - {{ __('Charte de confidentialité') }}. -
- @foreach ($errors->get('terms') as $message) -
{{ $message }}
- @endforeach -
+

+ {{ __('Les informations recueillies à partir de ce formulaire sont traitées par le Responsable de Traitement pour donner suite à votre demande de contact. Pour connaître vos droits, vous pouvez consulter la') }} + {{ __('Charte de confidentialité') }} +

{{-- FILE --}} -
+
-
-
- {{ __('Vous devez activer les cookies recaptcha pour utiliser le formulaire de contact.') }} -
-
- -
-
-
+ {{-- RECAPTCHA --}} +
+
+
+ @if ($errors->has('g-recaptcha-response')) +
+ {{ $errors->first('g-recaptcha-response') }} +
+ @endif
-
@@ -344,25 +333,3 @@
@endsection - -@push('scripts') - -@endpush diff --git a/resources/views/vendor/cn-cookies.blade.php b/resources/views/vendor/cn-cookies.blade.php index bafcdde..3c570d6 100644 --- a/resources/views/vendor/cn-cookies.blade.php +++ b/resources/views/vendor/cn-cookies.blade.php @@ -7,37 +7,43 @@ $logo_title_text = __('Logo du site :name', ['name' => $site_name]); $logo_alt_text = __('Logo :name', ['name' => $site_name]); $strings = (object)[ - 'modal_title' => __('Fenêtre de gestion de cookies'), + 'modal_title' => __('cookie-notice.modal_title'), 'button_customize_cookies' => __('cookie-notice.button_customize_cookies'), 'button_close_cookies' => __('cookie-notice.button_close_cookies'), - 'button_title_open_new_tab' => __('Ouvrir le lien dans un nouvel onglet'), - 'button_forbid' => __('cookie-notice.button_forbid'), - 'button_allow' => __('cookie-notice.button_allow'), - 'button_forbid_all' => Str::upper(__('cookie-notice.button_forbid_all')), - 'button_allow_all' => Str::upper(__('cookie-notice.button_allow_all')), - 'button_customize' => Str::upper(__('cookie-notice.button_customize')), + 'button_title_open_new_tab' => __('cookie-notice.button_title_open_new_tab'), + 'button_toggle_cookie' => __('cookie-notice.button_toggle_cookie'), + 'button_forbid_all' => str(__('cookie-notice.button_forbid_all'))->upper(), + 'button_allow_all' => str(__('cookie-notice.button_allow_all'))->upper(), + 'button_customize' => str(__('cookie-notice.button_customize'))->upper(), 'button_forbid_all_title' => __('cookie-notice.button_forbid_all_title'), 'button_allow_all_title' => __('cookie-notice.button_allow_all_title'), - 'button_back' => Str::upper(__('cookie-notice.button_back')), + 'button_validate_and_close' => str(__('cookie-notice.button_validate_and_close'))->upper(), 'banner_title' => __('cookie-notice.banner_title', ['site_name' => $site_name]), - 'banner_text' => __('cookie-notice.banner_text'), + 'banner_text' => sprintf( + "%s

%s", + "Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. Vous pouvez changer d'avis à tout moment en cliquant sur l'icône présente sur chaque page de notre site. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.", + sprintf( + "Charte de confidentialité", + route('fo.policies.show') + ) + ), 'panel_title' => __('cookie-notice.panel_title'), 'panel_content' => __('cookie-notice.panel_content'), 'panel_subtitle' => __('cookie-notice.panel_subtitle'), 'panel_details' => __('cookie-notice.panel_details'), - 'picture_cookie_title' => __('Image d\'un bon gros cookie'), - 'navigation_title' => __('Navigation du panneau des cookie'), + 'picture_cookie_title' => __('cookie-notice.picture_cookie_title'), + 'navigation_title' => __('cookie-notice.navigation_title'), ]; $cookies = []; // RECAPTCHA $cookies['recaptcha'] = [ - 'name' => __('cookie-notice.custom.recaptcha.title'), - 'description' => __('cookie-notice.custom.recaptcha.description'), - 'link' => 'https://policies.google.com/privacy', - 'labelLink' => __('En savoir +'), - 'cookies' => ['NID', '__Secure-3PAPISID', '__Secure-3PSID', '__Secure-3PSIDCC'] + 'name' => __('cookie-notice.custom.recaptcha.title'), + 'description' => __('cookie-notice.custom.recaptcha.description'), + 'link' => 'https://policies.google.com/privacy', + 'labelLink' => __('En savoir +'), + 'cookies' => ['NID', '__Secure-3PAPISID', '__Secure-3PSID', '__Secure-3PSIDCC'] ]; $cookies['recaptcha']['script'] = <<