2.0

config/cookie-consent.php

@@ -12,10 +12,11 @@
             'required' => true,
         ],
     ],
+
+    'has_manage_modal' => true,
 
     'middleware' => null,
 
     'page_url' => '/cookies',
-
-    'show_backdrop' => false,
-];
+
+];

resources/assets/dist/mix-manifest.json

@@ -1,3 +1,4 @@
 {
-    "/cookie-consent.js": "/cookie-consent.js?id=1f7390489c72b6172e91"
+    "/cookie-consent.js": "/cookie-consent.js?id=bf3a21fa0c78ac679dce",
+    "/cookie-consent.css": "/cookie-consent.css?id=6d71dcc40ae7bfaa70d6"
 }

resources/assets/js/components/Bar.vue

@@ -59,4 +59,4 @@
     }
 </script>
 
-<style src="../../sass/components/_bar.scss" lang="scss"></style>
+<style src="../../scss/components/_bar.scss" lang="scss"></style>

resources/assets/js/components/ManageForm.vue

@@ -92,4 +92,4 @@
     }
 </script>
 
-<style src="../../sass/components/_manage-form.scss" lang="scss"></style>
+<style src="../../scss/components/_manage-form.scss" lang="scss"></style>

resources/assets/js/components/ManageModal.vue

@@ -88,4 +88,4 @@
 </script>
 
 <!-- not scoped as not working with modal -->
-<style src="../../sass/components/_manage-modal.scss" lang="scss"></style>
+<style src="../../scss/components/_manage-modal.scss" lang="scss"></style>

resources/assets/sass/components/_manage-form.scss → resources/assets/scss/components/_manage-form.scss

@@ -1,7 +1,4 @@
 .cc-manage-form {
-  &__description {
-    font-size: .875em;
-  }
   &__item-label {
     text-transform: none;
   }
@@ -21,4 +18,4 @@
     font-size: .875em;
     margin-left: .25em;
   }
-}
+}

resources/assets/scss/cookie-consent.scss

@@ -0,0 +1,18 @@
+
+@import 'components/bar';
+@import 'components/manage-form';
+@import 'components/manage-modal';
+
+
+.cc-slide-up {
+  animation: cc-slide-up .4s ease-in;
+}
+
+@keyframes cc-slide-up {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}

resources/views/components/bar.blade.php

@@ -0,0 +1,9 @@
+@props([
+    'theme',
+])
+
+<x-cookie-consent::themed-component
+    component="bar"
+    :theme="$theme"
+    :attributes="$attributes"
+/>

resources/views/components/bootstrap-5/bar.blade.php

@@ -0,0 +1,35 @@
+@props([
+    'hasManage',
+    'backdrop'
+])
+
+@if($backdrop)
+    <div class="modal-backdrop cc-cookie-bar__backdrop"></div>
+@endif
+<div class="cc-cookie-bar cc-slide-up {{ $backdrop ? 'cc-cookie-bar--modal container' : '' }}">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-md">
+                {!! trans('cookieConsent::texts.message') !!}
+            </div>
+            <div class="col-md-auto mt-2 mt-md-0">
+                <div class="row align-items-center justify-content-end">
+                    @if($hasManage)
+                        <div class="col-auto">
+                            <button class="btn btn-link btn-sm cc-cookie-bar__link px-0" data-bs-toggle="modal" data-bs-target="#manage-cookies">
+                                {!! trans('cookieConsent::texts.manage_button') !!}
+                            </button>
+                        </div>
+                    @endif
+                    <div class="col-auto">
+                        <form method="post" action="{{ route('cookie-consent') }}">
+                            <button type="submit" class="btn btn-primary btn-lg cc-cookie-bar__btn">
+                                {!! trans('cookieConsent::texts.accept_button') !!}
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/components/bootstrap-5/modal.blade.php

@@ -0,0 +1,67 @@
+@props([
+    'categories',
+])
+
+<div class="modal fade cc-manage-modal" id="manage-cookies" tabindex="-1" aria-hidden="true" aria-labelledby="manageCookiesTitle">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="manageCookiesTitle">
+                    {!! trans('cookieConsent::texts.manage.title') !!}
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="cc-manage-modal__description mb-3">
+                    {!! trans('cookieConsent::texts.manage.description') !!}
+                    @if(config('cookie-consent.page_url'))
+                        -
+                        <a class="cc-manage-modal__page-link" href="{{ config('cookie-consent.page_url') }}">
+                            {{ trans('cookieConsent::texts.manage.link_label') }}
+                        </a>
+                    @endif
+                </div>
+                <div class="cc-manage-form">
+                    <div class="list-group list-group-flush">
+                        @foreach($categories as $category)
+                            <input type="hidden" name="{{ $category['key'] }}" value="0" form="manage-cookies-form">
+                            <div class="list-group-item px-1">
+                                <div class="form-check">
+                                    <input class="form-check-input" name="{{ $category['key'] }}" type="checkbox" value="1" id="cookie-{{ $category['key'] }}"
+                                        @if($category['required'])
+                                            disabled
+                                        @endif
+                                        @if($category['required'] || \Code16\CookieConsent\CookieUtils::hasConsented($category['key'], true))
+                                            checked
+                                        @endif
+                                        form="manage-cookies-form"
+                                    >
+                                    <label class="form-check-label cc-manage-form__item-label" for="cookie-{{ $category['key'] }}">
+                                        <span class="cc-manage-form__item-title">
+                                            {!! $category['title'] !!}
+                                            @if($category['required'])
+                                                <span class="cc-manage-form__required-label">
+                                                    {{ trans('cookieConsent::texts.manage.required_label') }}
+                                                </span>
+                                            @endif
+                                        </span>
+                                        <span class="cc-manage-form__item-description">
+                                            {!! $category['description'] !!}
+                                        </span>
+                                    </label>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <form id="manage-cookies-form" method="post" action="{{ route('cookie-consent') }}">
+                    <button type="submit" class="btn btn-primary">
+                        {!! trans('cookieConsent::texts.manage.ok_button') !!}
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/bar.blade.php → resources/views/components/bootstrap-vue/bar.blade.php

@@ -1,7 +1,12 @@
+@props([
+    'hasManage',
+    'backdrop',
+])
+
 <cookie-consent-bar
     endpoint="{{ route('cookie-consent') }}"
     :manage="{{ json_encode($hasManage) }}"
-    @if(config('cookie-consent.show_backdrop'))
+    @if($backdrop)
         backdrop
     @endif
 >
@@ -10,4 +15,4 @@
     </template>
     <template v-slot:manage-link>{!! trans('cookieConsent::texts.manage_button') !!}</template>
     <template v-slot:accept-button>{!! trans('cookieConsent::texts.accept_button') !!}</template>
-</cookie-consent-bar>
+</cookie-consent-bar>

resources/views/modal.blade.php → resources/views/components/bootstrap-vue/modal.blade.php

@@ -1,3 +1,9 @@
+@props([
+    'value',
+    'categories'
+])
+
+
 <cookie-manage-modal
     endpoint="{{ route('cookie-consent') }}"
     :value="{{ json_encode($value) }}"
@@ -11,4 +17,4 @@
     <template v-slot:title>{!! trans('cookieConsent::texts.manage.title') !!}</template>
     <template v-slot:cancel-button>{!! trans('cookieConsent::texts.manage.cancel_button') !!}</template>
     <template v-slot:ok-button>{!! trans('cookieConsent::texts.manage.ok_button') !!}</template>
-</cookie-manage-modal>
+</cookie-manage-modal>

resources/views/components/cookie-consent.blade.php

@@ -0,0 +1,30 @@
+
+@if(config('cookie-consent.enabled'))
+    <div id="cookie-consent" class="cookie-consent">
+        @if(!$alreadyConsentedWithCookies)
+            <x-cookie-consent::bar
+                :theme="$theme"
+                :has-manage="$hasManage"
+                :backdrop="$backdrop"
+            />
+        @endif
+        @if($hasManage)
+            <x-cookie-consent::modal
+                :theme="$theme"
+            />
+        @endif
+    </div>
+
+    @if($theme === 'bootstrap-vue')
+        <script>
+            var hasConsented = @json($alreadyConsentedWithCookies);
+            var enabled = !hasConsented || document.querySelector('a[href^="#manage-cookies"]');
+            if(enabled) {
+                var script = document.createElement('script');
+                script.async = true;
+                script.src = "{{ url(mix('/cookie-consent.js', '/vendor/cookie-consent')) }}";
+                document.head.appendChild(script);
+            }
+        </script>
+    @endif
+@endif

resources/views/components/modal.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'theme',
+])
+
+
+<x-cookie-consent::themed-component
+    component="modal"
+    :theme="$theme"
+    :attributes="$attributes->merge([
+        'categories' => $categories,
+        'value' => $value,
+    ])"
+/>

resources/views/components/styles.blade.php

@@ -0,0 +1,2 @@
+
+<link rel="stylesheet" href="{{ url(mix('/cookie-consent.css', '/vendor/cookie-consent')) }}">

resources/views/components/themed-component.blade.php

@@ -0,0 +1,11 @@
+@props([
+    'component',
+    'theme',
+])
+
+@php($componentName = sprintf('cookie-consent::%s.%s', $theme, $component))
+
+<x-dynamic-component
+    :component="$componentName"
+    :attributes="$attributes"
+/>

routes/web.php

@@ -6,9 +6,9 @@ function () {
             ->back()
             ->cookie(
                 config('cookie-consent.cookie_name'),
-                (new \Code16\CookieConsent\CookieUtils())->serializeWithValues(request()->all()),
+                \Code16\CookieConsent\CookieUtils::serializeWithValues(request()->all()),
                 config('cookie-consent.cookie_lifetime_in_minutes')
             );
     })
     ->name('cookie-consent')
-    ->middleware(config('cookie-consent.middleware') ?: []);
+    ->middleware(config('cookie-consent.middleware') ?: []);

src/CookieConsentServiceProvider.php

@@ -2,6 +2,8 @@
 
 namespace Code16\CookieConsent;
 
+use Code16\CookieConsent\View\Components\CookieConsent;
+use Code16\CookieConsent\View\Components\CookiesAllowed;
 use Illuminate\Cookie\Middleware\EncryptCookies;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Cookie;
@@ -30,25 +32,21 @@ public function boot()
 
         $this->loadTranslationsFrom(__DIR__ . '/../resources/lang', 'cookieConsent');
 
-        $this->loadViewsFrom(__DIR__ . '/../resources/views', 'cookieConsent');
+        $this->loadViewsFrom(__DIR__ . '/../resources/views', 'cookie-consent');
 
         $this->loadRoutesFrom(__DIR__ . '/../routes/web.php');
 
         $this->app->resolving(EncryptCookies::class, function (EncryptCookies $encryptCookies) {
             $encryptCookies->disableFor(config('cookie-consent.cookie_name'));
         });
-
-        $this->app['view']->composer(['cookieConsent::index'], CookieConsentViewComposer::class);
-
-        Blade::if('cookies', function ($categoryKey = null) {
-            return $categoryKey
-                ? (new CookieUtils())->getValueFor($categoryKey, '0') === '1'
-                : Cookie::has(config('cookie-consent.cookie_name'));
-        });
+
+        Blade::componentNamespace('Code16\\CookieConsent\\View\\Components', 'cookie-consent');
+        Blade::component('cookie-consent', CookieConsent::class);
+        Blade::component('cookies-allowed', CookiesAllowed::class);
     }
 
     public function register()
     {
         $this->mergeConfigFrom(__DIR__.'/../config/cookie-consent.php', 'cookie-consent');
     }
-}
+}