Add banner for data protection and cookie notice

components/DataProtectionBanner.vue

+<template>
+  <v-snackbar v-model="showBanner" multi-line :timeout="-1">
+    This website requires cookies, and the limited processing of your personal
+    data in order to function. By using the site you are agreeing to this as
+    outlined in our
+    <nuxt-link class="white--text" to="/privacy_notice"
+      >Privacy Notice</nuxt-link
+    >
+    and our
+    <nuxt-link class="white--text" to="/cookie_notice">Cookie Notice</nuxt-link
+    >.
+
+    <template #action="{ attrs }">
+      <v-btn text outlined v-bind="attrs" @click="dismissBanner">
+        Dismiss
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+import VueCookies from 'vue-cookies'
+
+export default {
+  data() {
+    return {
+      cookieName: 'eubopen-portal_data-protection-banner-dismissed-v1',
+      showBanner: true,
+    }
+  },
+  mounted() {
+    const bannerDismissed = VueCookies.get(this.cookieName)
+    if (bannerDismissed) {
+      this.showBanner = false
+    }
+  },
+  methods: {
+    dismissBanner() {
+      VueCookies.set(this.cookieName, true, '6m')
+      this.showBanner = false
+    },
+  },
+}
+</script>
+
+<style></style>

components/Masthead/LinksMenu.vue

@@ -26,11 +26,17 @@
             <v-list-item-title>Accessibility</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
+        <v-subheader>Data Protection</v-subheader>
         <v-list-item nuxt to="/privacy_notice">
           <v-list-item-content>
             <v-list-item-title>Privacy Notice</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
+        <v-list-item nuxt to="/cookie_notice">
+          <v-list-item-content>
+            <v-list-item-title>Cookie Notice</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </v-list>
     </v-menu>
   </div>

components/Masthead/LinksMenuMobile.vue

@@ -30,11 +30,17 @@
           <v-list-item-title>Accessibility</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <v-subheader>Data Protection</v-subheader>
       <v-list-item nuxt to="/privacy_notice">
         <v-list-item-content>
           <v-list-item-title>Privacy Notice</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <v-list-item nuxt to="/cookie_notice">
+        <v-list-item-content>
+          <v-list-item-title>Cookie Notice</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
     </v-list>
   </v-menu>
 </template>

layouts/default.vue

@@ -8,6 +8,7 @@
       </v-container>
     </v-main>
     <Footer />
+    <DataProtectionBanner />
   </v-app>
 </template>
 
@@ -15,12 +16,14 @@
 import EubopenAppBar from '~/components/Masthead/EubopenAppBar.vue'
 import Footer from '~/components/footer/Footer.vue'
 import Notifications from '~/web-components-submodule/components/common/Notifications.vue'
+import DataProtectionBanner from '~/components/DataProtectionBanner.vue'
 
 export default {
   components: {
     EubopenAppBar,
     Footer,
     Notifications,
+    DataProtectionBanner,
   },
 }
 </script>

package-lock.json

@@ -15499,6 +15499,11 @@
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.0.0.tgz",
       "integrity": "sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA=="
     },
+    "vue-cookies": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.7.4.tgz",
+      "integrity": "sha512-mOS5Btr8V9zvAtkmQ7/TfqJIropOx7etDAgBywPCmHjvfJl2gFbH2XgoMghleLoyyMTi5eaJss0mPN7arMoslA=="
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",

package.json

@@ -20,7 +20,8 @@
     "dotenv": "^8.2.0",
     "form-data": "^4.0.0",
     "nuxt": "^2.14.12",
-    "vue-apexcharts": "^1.6.1"
+    "vue-apexcharts": "^1.6.1",
+    "vue-cookies": "^1.7.4"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^5.0.0",

pages/cookie_notice.vue

+<template>
+  <div>
+    <h1 class="font-weight-light">Cookie statement</h1>
+    <v-divider />
+    <br />
+    <p class="text-justify">
+      This statement explains how we use cookies and your IP address on the
+      EUbOPEN website.
+    </p>
+
+    <h2 class="font-weight-light">How we use cookies</h2>
+    <br />
+    <p class="text-justify">
+      Our web pages use "cookies". A cookie is a small file of letters and
+      numbers that we place on your computer or mobile device. These cookies
+      allow us to distinguish you from other users of our website, which helps
+      us to provide you with a good experience when you browse our website and
+      enables us to improve our website.
+    </p>
+
+    <h2 class="font-weight-light">Specific cookies we use</h2>
+    <br />
+
+    <p class="text-justify">
+      The table below identify the cookies we use and explain the purposes for
+      which they are used.
+    </p>
+
+    <v-simple-table>
+      <thead>
+        <tr>
+          <th class="text-left">Provider</th>
+          <th class="text-left">Cookie name</th>
+          <th class="text-left">Purpose</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Google Analytics</td>
+          <td>_gat _gid _ga</td>
+          <td>
+            These cookies are used to collect information about how visitors use
+            our site. We use the information to compile reports and to help us
+            improve the website. The cookies collect information in an anonymous
+            form, including the number of visitors to the website, where
+            visitors have come to the site from and the pages they visited.
+          </td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>