Fix #75 - Updated Cookie notice to 4.0.0

This commit is contained in:
Noah Lancien 2024-01-24 17:31:41 +01:00
parent 66e24bf949
commit ce5fbf8442
4 changed files with 177 additions and 91 deletions

View file

@ -1,13 +1,15 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>@include('theme::layouts.head')</head>
<body class="d-flex flex-column h-100">
@include('theme::layouts.header')
<main class="flex-grow-1 d-flex flex-column justify-content-between mt-5" role="main">
<div class="container-xxl">
<div class="row">
<div class="col px-5 px-xxl-3">
<div class="col px-xxl-3 px-5">
@include('theme::breadcrumb.breadcrumb-body')
</div>
</div>
@ -22,7 +24,7 @@
</div>
</div>
</div>
<div class="container mw-100">
<div class="mw-100 container">
@include('theme::layouts.subscribe')
</div>
</main>
@ -32,18 +34,18 @@
</footer>
@can('useBasketSystem', \App\Models\Merchandise\Product::class)
<div id="basket-side-panel"></div>
<script nonce="{{ $nonce ?? '' }}">
window.__CART = {
canUseBasket: true
};
</script>
<div id="basket-side-panel"></div>
<script nonce="{{ $nonce ?? '' }}">
window.__CART = {
canUseBasket: true
};
</script>
@endcan
@include('theme::modules.scriptRoutes')
<script nonce="{{ $nonce }}" src="{{ mix('theme/js/app.js', 'build') }}"></script>
@include('theme::vendor.ldcweb-cookies')
@include('theme::vendor.cn-cookies')
@stack('scriptConstants')
@stack('scripts')
</body>
</html>
</html>

View file

@ -20,13 +20,9 @@
{!! clean($content->value) !!}
@else
<p>{{ __('Bonjour,') }}</p>
<p>{{ __('Si vous avez une question à nous poser ou des remarques à formuler sur notre site, n\'hésitez pas
à les inscrire dans le formulaire ci-contre. Merci d\'indiquer vos coordonnées exactes pour que nous puissions
vous répondre prochainement.') }}
<p>{{ __('Si vous avez une question à nous poser ou des remarques à formuler sur notre site, n\'hésitez pas à les inscrire dans le formulaire ci-contre. Merci d\'indiquer vos coordonnées exactes pour que nous puissions vous répondre prochainement.') }}
</p>
<p>{{ __('Les informations qui vous concernent sont destinées à un usage interne et ne seront en aucun cas
transmises à des tiers. Vous disposez d\'un droit d\'accès, de modification, de rectification et de suppression
des données qui vous concernent (art. 34 de la loi "Informatique et Libertés").') }}
<p>{{ __('Les informations qui vous concernent sont destinées à un usage interne et ne seront en aucun cas transmises à des tiers. Vous disposez d\'un droit d\'accès, de modification, de rectification et de suppression des données qui vous concernent (art. 34 de la loi "Informatique et Libertés").') }}
</p>
@endif
</div>
@ -65,7 +61,7 @@
</div>
<div class="col-12 col-md-6 py-2">
<input class="form-control font-first @if ($errors->has('order_number')) is-invalid @endif" name="order_number"
type="text" value="{{ old('order_number') }}" placeholder="{{ __('Numéro de commande') }}" />
type="number" value="{{ old('order_number') }}" placeholder="{{ __('Numéro de commande') }}" />
@foreach ($errors->get('order_number') as $message)
<div class="invalid-feedback">{{ $message }}</div>
@endforeach
@ -115,20 +111,25 @@
@endforeach
</div>
</div>
<div class="font-barlow py-2 text-center">* {{ __('mandatory_fields') }}</div>
<div id="html_element"></div>
<div class="col-12 py-2 text-center">
<div class="d-flex justify-content-center mb-2" id="r_captcha"></div>
<div class="d-flex justify-content-center mb-2" id="r_captcha_message">
<span class="text-info">
{{ __('Pour utiliser le formulaire de contact vous devez autoriser ') }}
<a class="cn-cookie-link" href="" title="{{ __('Gérer les cookies liés au site.') }}" role="button">
{{ __('les cookies recaptcha.') }}
</a>
</span>
<a class="cn-cookie-link" id="recaptcha-warning" href="" rel="nofollow">
<strong class="text-underline text-bold text-normal text-danger">
{{ __('cookie-notice.custom.recaptcha.warning') }}
</strong>
</a>
<div class="d-flex flex-column justify-content-center align-items-center">
<div id="r_captcha"></div>
@if ($errors->has('g-recaptcha-response'))
<div class="mb-6">
<span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
</div>
@endif
<p class="font-barlow py-2 text-center">* {{ __('mandatory_fields') }}</p>
</div>
<button class="btn btn-primary g-recaptcha text-bg-primary w-fit" type="submit">{{ __('Envoyer') }}</button>
<button class="btn btn-primary g-recaptcha text-bg-primary w-fit"
data-sitekey="{{ config('services.google.recaptcha.public') }}" type="submit">{{ __('Envoyer') }}</button>
</div>
</form>
</div>
@ -137,40 +138,22 @@
@push('scripts')
<script nonce="{{ $nonce }}">
let forms = document.querySelectorAll('.needs-validation')
window.__LDC_CN_Recaptcha_Validate_Form = function(form) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated');
};
Array.prototype.slice.call(forms).forEach(function(form) {
form.addEventListener('submit', function(event) {
window.__LDC_CN_Recaptcha_Validate_Form(form);
}, false);
document.addEventListener('DOMContentLoaded', function() {
window.__CN_Recaptcha = function() {
(function(d, t) {
let g = d.createElement(t),
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_Loaded = function() {
grecaptcha.render('r_captcha', {
'sitekey': '{{ config('services.google.recaptcha.public') }}'
});
document.getElementById('recaptcha-warning').remove();
document.getElementById('contact-form').inert = false;
};
});
window.__LDC_CN_Recaptcha = function() {
(function(d, t) {
let g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=__LDC_CN_Recaptcha_Loaded';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
};
window.__LDC_CN_Recaptcha_Loaded = function() {
grecaptcha.render('r_captcha', {
'sitekey': '{{ config('services.google.recaptcha.public') }}',
'callback': () => {
Array.prototype.slice.call(forms).forEach(function(form) {
window.__LDC_CN_Recaptcha_Validate_Form(form);
});
}
});
document.getElementById('r_captcha_message').classList.add('d-none');
};
</script>
@endpush

111
views/vendor/cn-cookies.blade.php vendored Normal file
View file

@ -0,0 +1,111 @@
{{-- blade-formatter-disable --}}
@php
$site_name = Str::ucfirst(config('app.name'));
$logo_picture_url = asset($GeneralConfigGlobal->where('type', \App\Enums\GeneralConfigType::global())->first()->data->logo->value ?? '');
$logo_title_text = __('Logo du site :name', ['name' => $site_name]);
$logo_alt_text = __('Logo :name', ['name' => $site_name]);
$strings = (object)[
'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' => __('cookie-notice.button_title_open_new_tab'),
'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_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')),
'banner_title' => __('cookie-notice.banner_title', ['site_name' => $site_name]),
'banner_text' => __('cookie-notice.banner_text'),
'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' => __('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']
];
$cookies['recaptcha']['script'] = <<<SCRIPT
function () {
if (window.__CN_Recaptcha) {
window.__CN_Recaptcha();
}
}
SCRIPT;
// MATOMO
$cookies['matomo'] = [
'name' => __('cookie-notice.custom.matomo.title'),
'description' => __('cookie-notice.custom.matomo.description'),
'link' => 'https://fr.matomo.org/gdpr-analytics/',
'labelLink' => __('En savoir +'),
'cookies' => ['_pk']
];
$cookies['matomo']['script'] = <<<SCRIPT
function () {
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//yl.s-web.fr/";
_paq.push(['setTrackerUrl', u+'rainbow']);
_paq.push(['setSiteId', '
SCRIPT;
$cookies['matomo']['script'] .= config("services.matomo.site_id");
$cookies['matomo']['script'] .= <<<SCRIPT
']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'unicorn'; s.parentNode.insertBefore(g,s);
})();
}
SCRIPT;
@endphp
{{-- INCLUDE TEMPLATE --}}
@include('theme::vendor.cookie-notice-templates.standard', compact(
'site_name', 'logo_picture_url', 'logo_alt_text',
'logo_title_text', 'strings'
))
@push('scripts')
<script nonce="{{ $nonce ?? '' }}">
document.addEventListener('DOMContentLoaded', function () {
window.WebCookieNotice = {};
@foreach($cookies as $index_name => $cookie)
window.WebCookieNotice['{{ $index_name }}'] = {};
window.WebCookieNotice['{{ $index_name }}'].tmp = {};
// SCRIPT
window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
@php unset($cookie['script']); @endphp
// FALLBACK
@if(isset($cookie['fallback']))
window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
@php unset($cookie['fallback']); @endphp
@endif
window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
@endforeach
window.WebCookieNotice = new window.CookieNotice(window.WebCookieNotice);
});
</script>
@endpush

View file

@ -1,7 +1,8 @@
<div id="cn-wrapper" tabindex="-1" role="dialog">
<div id="cn-wrapper" title="{{ $strings->modal_title }}" role="alertdialog" tabindex="-1">
<button id="cn-cookie-btn" title="{{ $strings->button_customize_cookies }}">
{{-- COOKIE SVG --}}
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
<title>{{ $strings->picture_cookie_title }}</title>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z"
fill="#FF4E4E" />
@ -18,41 +19,29 @@
{{-- BANNER --}}
<div id="cn-banner" tabindex="-1">
<div class="cn-modal-top-line">
<button id="cn-close-modal">X</button>
<button id="cn-close-modal" title="{{ $strings->button_close_cookies }}">X</button>
</div>
{{-- CONTENT VIEW --}}
<div class="cn-content">
<div class="cn-content" title="{{ $strings->panel_content }}" tabindex="0">
{{-- 1ST PAGE BANNER --}}
<div class="cn-banner-content">
<div class="cn-banner-img">
<img src="{{ $logo_picture_url }}" alt="{{ $logo_alt_text }}">
<img src="{{ $logo_picture_url }}" title="{{ $logo_title_text }}" alt="{{ $logo_alt_text }}">
</div>
<div class="cn-banner-text">
<div class="cn-banner-title">
<span>{!! nl2br(e($strings->banner_title)) !!}</span>
</div>
<div class="cn-banner-para-p">
<p class="cn-banner-para-p-close">{!! nl2br(e($strings->banner_text)) !!}</p>
<p class="cn-banner-para-p-open d-none">{!! nl2br(e($strings->banner_text_open)) !!}</p>
<p>{!! nl2br(e($strings->banner_text)) !!}</p>
</div>
</div>
<div class="cn-banner-details">
<p>
{!! nl2br(e($strings->banner_details)) !!}<br>
<a href="{{ $confidentiality_page_url }}" title="{{ $strings->banner_details_link_title }}">{{ $strings->banner_details_link }}</a>
</p>
</div>
<div class="cn-banner-btn-details">
<button class="cn-banner-btn-details-p" data-open="{{ $strings->banner_less_details }}" data-close="{{ $strings->banner_more_details }}">{!!
nl2br(e($strings->banner_more_details))
!!}</button>
</div>
</div>
{{-- 2ND PAGE CUSTOMIZE PANEL --}}
<div class="cn-modal-container d-none">
<p class="cn-modal-title" aria-level="h2">{{ $strings->Panel_title }}</p>
<p class="cn-modal-subtitle">{!! nl2br(e($strings->Panel_subtitle)) !!}</p>
<p class="cn-modal-description">{!! nl2br(e($strings->Panel_details)) !!}</p>
<p class="cn-modal-title" aria-level="h2">{{ $strings->panel_title }}</p>
<p class="cn-modal-subtitle">{!! nl2br(e($strings->panel_subtitle)) !!}</p>
<p class="cn-modal-description">{!! nl2br(e($strings->panel_details)) !!}</p>
<div class="cn-modal-wrapper">
{{-- COOKIES LIST --}}
<ul id="cn-modal-list"></ul>
@ -60,12 +49,13 @@
</div>
</div>
{{-- NAV BAR --}}
<div class="cn-nav">
<button id="cn-deny-banner" class="cn-banner-btn cn-deny">{{ $strings->button_forbid_all }}</button>
<button id="cn-accept-banner" class="cn-banner-btn cn-accept">{{ $strings->button_allow_all }}</button>
<button id="cn-settings-banner" class="cn-banner-btn cn-custom" data-open-modal="{{ $strings->button_back }}" data-close-modal="{{ $strings->button_customize }}">{{
$strings->button_customize
}}</button>
<div class="cn-nav" title="{{ $strings->navigation_title }}" role="navigation">
<button class="cn-banner-btn cn-deny" id="cn-deny-banner"
title="{{ $strings->button_forbid_all_title }}">{{ $strings->button_forbid_all }}</button>
<button class="cn-banner-btn cn-accept" id="cn-accept-banner"
title="{{ $strings->button_allow_all_title }}">{{ $strings->button_allow_all }}</button>
<button class="cn-banner-btn cn-custom" id="cn-settings-banner" data-open-modal="{{ $strings->button_back }}"
data-close-modal="{{ $strings->button_customize }}">{{ $strings->button_customize }}</button>
</div>
{{-- COOKIE LIST LI TEMPLATE --}}
@ -74,15 +64,15 @@
<div class="cn-cookie-infos">
<span class="cn-cookie-name">#name</span>
<span class="cn-cookie-description">#description</span>
<a class="cn-cookie-link">#link</a>
<a class="cn-cookie-link" title="{{ $strings->button_title_open_new_tab }}" target="blank">#link</a>
</div>
<div class="cn-cookie-buttons">
<div class="deny">
<input type="radio" id="" name="" data-name="" data-status="false">
<input id="" name="" data-name="" data-status="false" type="radio">
<label for="" role="button" tabindex="0">{{ $strings->button_forbid }}</label>
</div>
<div class="accept">
<input type="radio" id="" name="" data-name="" data-status="true">
<input id="" name="" data-name="" data-status="true" type="radio">
<label for="" role="button" tabindex="0">{{ $strings->button_allow }}</label>
</div>
</div>