#56 add: consent page

qownnotes · Jan 30, 2024 · 5c94227 · 5c94227
1 parent dfdda08
commit 5c94227
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 25 deletions.
diff --git a/src/components/ConsentPage.vue b/src/components/ConsentPage.vue
diff --git a/src/pages/ConsentPage.vue b/src/pages/ConsentPage.vue
@@ -0,0 +1,96 @@
+<template>
+  <q-page class="consent-page">
+      <q-card>
+        <q-card-section class="section">
+          <h1 class="q-mb-md text-h6">{{ getLocale('ConsentHeadline') }}</h1>
+          <p class="q-mb-md">
+            {{ getLocale('appDescription') }}
+          </p>
+          <p class="q-mb-md">
+            {{ getLocale('ConsentIntro') }}
+          </p>
+          <q-list>
+            <q-item v-for="(data, index) in consentData" :key="index">
+              <q-item-section>
+                <q-item-label>{{ data }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <p class="q-mt-md">
+            {{ getLocale('ConsentFooter') }}
+          </p>
+        </q-card-section>
+        <q-card-actions class="actions" align="right">
+          <q-btn
+            flat
+            color="primary"
+            @click="doConsent"
+          >
+            {{ getLocale('ConsentButton') }}
+          </q-btn>
+          <q-btn
+            flat
+            color="secondary"
+            @click="doUninstall"
+          >
+            {{ getLocale('UninstallButton') }}
+          </q-btn>
+        </q-card-actions>
+      </q-card>
+  </q-page>
+</template>
+<script>
+import {defineComponent} from "vue";
+import {getLocale} from 'src/helpers/utils';
+
+export default defineComponent({
+  methods: { getLocale },
+  setup () {
+    const consentData = [
+      getLocale('ConsentData1'),
+      getLocale('ConsentData2'),
+      getLocale('ConsentData3'),
+      getLocale('ConsentData4'),
+    ];
+    const doConsent = () => {
+      chrome.storage.sync.set({ consent: true }, () => {
+        chrome.storage.sync.set({
+          userDataConsent: true,
+        });
+
+        window.close();
+      });
+    };
+
+    const doUninstall = () => {
+      chrome.management.uninstallSelf();
+    };
+
+    return {
+      consentData,
+      doConsent,
+      doUninstall
+    }
+  }
+});
+</script>
+<style scoped>
+.consent-page {
+  min-width: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    margin: 12px 0 8px 0;
+  }
+
+  .section {
+    padding: 0 16px;
+  }
+
+  .actions {
+    padding-top: 0;
+  }
+}
+</style>
diff --git a/src/pages/PopupPage.vue b/src/pages/PopupPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page v-if="!inputTokenDialog && !userDataConsentPage" class="flex bookmarks-page">
+  <q-page v-if="!inputTokenDialog" class="flex bookmarks-page">
     <div class="q-pa-md">
       <div class="row">
         <div class="col">
@@ -68,7 +68,7 @@
       </div>
 
       <q-table
-        flat bordered
+        flat dense
         :rows="filteredBookmarks"
         :columns="columns"
         :loading="loadingBookmarks"
@@ -108,7 +108,6 @@
       </q-table>
     </div>
   </q-page>
-  <ConsentPage v-if="userDataConsentPage" />
   <InputTokenDialog v-if="inputTokenDialog" @token-stored="closeWindow" @cancel="closeWindow" />
   <AddBookmarkDialog v-model="addBookmarkDialog" :bookmark="editedBookmark" :webSocket="webSocket" @bookmark-stored="onBookmarkStored" />
 </template>
@@ -119,7 +118,6 @@ import { getLocale, openUrl, truncateText } from '../helpers/utils'
 import { QWebSocket } from '../services/qwebsocket'
 import InputTokenDialog from '../components/InputTokenDialog.vue'
 import AddBookmarkDialog from "components/AddBookmarkDialog.vue";
-import ConsentPage from "components/ConsentPage.vue";
 
 const columns = [
   { name: 'name', align: 'left', label: 'Name', field: 'name', sortable: true },
@@ -138,7 +136,6 @@ export default defineComponent({
     let selectedNoteFolderIdWatchEnabled = true;
     let addBookmarkDialog = ref(false);
     const bookmarkEditDialog = ref(false);
-    let userDataConsentPage = ref(false);
     const pagination = ref({
       sortBy: 'name',
       descending: false,
@@ -176,13 +173,6 @@ export default defineComponent({
     // ]);
     const inputTokenDialog = ref(false);
 
-    // DEBUG: remove userDataConsent
-    // chrome.storage.sync.remove(["userDataConsent"]);
-
-    chrome.storage.sync.get(function (data) {
-      userDataConsentPage.value = !data.userDataConsent || data.userDataConsent !== true;
-    });
-
     // Creates a list of all tags of bookmarks
     // Returns a sorted list of all tags
     const allTags = computed(() => {
@@ -290,8 +280,10 @@ export default defineComponent({
             chrome.storage.sync.get((data) => {
               // console.log("after load");
               console.log("data.pagination", data.pagination);
-              pagination.value = data.pagination;
-              pagination.value.page = 1;
+              if (data.pagination) {
+                pagination.value = data.pagination;
+                pagination.value.page = 1;
+              }
 
               let localSelectedTags = [];
               const tags = allTags.value;
@@ -346,7 +338,7 @@ export default defineComponent({
 
     watch(pagination, (newPagination, oldPagination) => {
       // Ignore the first change of pagination, because it was done by the reference initialization
-      if (newPagination.initialSetup) {
+      if (newPagination && newPagination.initialSetup) {
         newPagination.initialSetup = false;
         return;
       }
@@ -382,7 +374,6 @@ export default defineComponent({
     // Return the variables that you want to use in the template
     return {
       columns,
-      userDataConsentPage,
       bookmarks,
       loadingBookmarks,
       search,
@@ -414,7 +405,6 @@ export default defineComponent({
     };
   },
   components: {
-    ConsentPage,
     AddBookmarkDialog,
     // BookmarkAllTabsButton: BookmarkAllTabsButton,
     // ImportBrowserBookmarksDialog: ImportBrowserBookmarksDialog,
@@ -451,6 +441,10 @@ export default defineComponent({
   cursor: pointer;
 }
 
+.q-table tbody td {
+  //font-size: 14px;
+}
+
 .column-name {
   font-weight: bold;
 }

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -1,10 +1,21 @@
+// DEBUG: remove userDataConsent
+// chrome.storage.sync.remove(["userDataConsent"]);
 
 const routes = [
   {
     path: '/popup',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/PopupPage.vue') }
+      { path: '',
+        component: async () => {
+          const data = await chrome.storage.sync.get();
+          if (!data.userDataConsent || data.userDataConsent !== true) {
+            return (await import('pages/ConsentPage.vue')).default;
+          } else {
+            return (await import('pages/PopupPage.vue')).default;
+          }
+        },
+      }
     ]
   },
   {