From 021d2587fc2919fb0396332286a09f8da7c828e1 Mon Sep 17 00:00:00 2001
From: msramalho <19508417+msramalho@users.noreply.github.com>
Date: Thu, 6 Feb 2025 20:11:27 +0000
Subject: [PATCH] refactoring permission banner

---
 src/components/NavBar.vue                     |  2 +-
 src/components/PermissionNeeded.vue           | 26 ++++++++++++++++++
 src/router/index.js                           |  8 +++---
 src/store/index.js                            |  2 --
 ...ArchivesView.vue => ArchiveSearchView.vue} | 20 ++++++++++++--
 .../ArchiveUrlView.vue}                       | 11 +++++---
 src/views/HomeView.vue                        | 18 +++++++------
 src/views/SheetView.vue                       | 27 -------------------
 8 files changed, 67 insertions(+), 47 deletions(-)
 create mode 100644 src/components/PermissionNeeded.vue
 rename src/views/{ArchivesView.vue => ArchiveSearchView.vue} (93%)
 rename src/{components/ArchiveUrl.vue => views/ArchiveUrlView.vue} (95%)
 delete mode 100644 src/views/SheetView.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 56ab2e0..6e437d0 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -85,7 +85,7 @@ export default {
     },
     activeUserMessage() {
       if (this.user && this.user.active) {
-        return "This account is active and can use the tool.";
+        return "This account has access to at least one feature.";
       }
       return "This account is inactive, please reach out to the Bellingcat team for access.";
     }
diff --git a/src/components/PermissionNeeded.vue b/src/components/PermissionNeeded.vue
new file mode 100644
index 0000000..22801b2
--- /dev/null
+++ b/src/components/PermissionNeeded.vue
@@ -0,0 +1,26 @@
+<template>
+	<v-alert color="orange" icon="mdi-information" class="text-center" style="font-size:x-large">
+		To use the <strong>{{ feature }}</strong> feature, you need <strong>permission from Bellingcat's tech
+			team</strong>.
+		<br />
+		You can ask for access via <a href="https://forms.gle/crqBXUtyZcbLhiRQ9" target="_blank">this form</a>.
+		<br/>
+		<small>
+			<strong>NB: </strong>We do not allow law enforcement, military or intelligence agencies to use this tool.
+		</small>
+	</v-alert>
+</template>
+
+<script>
+export default {
+	name: 'PermissionNeeded',
+	props: {
+		feature: {
+			type: String,
+			required: false
+		}
+	}
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 1e72896..a011a58 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
-import ArchivesView from '../views/ArchivesView.vue';
+import ArchiveSearchView from '../views/ArchiveSearchView.vue';
 
-import ArchiveUrl from "../components/ArchiveUrl.vue";
+import ArchiveUrlView from "../views/ArchiveUrlView.vue";
 
 const routes = [
   {
@@ -13,12 +13,12 @@ const routes = [
   {
     path: '/url',
     name: 'URL Archiving',
-    component: ArchiveUrl,
+    component: ArchiveUrlView,
   },
   {
     path: '/archives',
     name: 'Archives search',
-    component: ArchivesView,
+    component: ArchiveSearchView,
   },
   {
     path: '/privacy',
diff --git a/src/store/index.js b/src/store/index.js
index 23d2c11..0dc46ec 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -60,11 +60,9 @@ export default createStore({
     setUserPermissions(state, permissions) {
       state.user.permissions = permissions;
       state.user.groups = Object.keys(permissions).filter(key => key !== "all");
-      saveToLocalStorage(state);
     },
     setUserUsage(state, usage) {
       state.user.usage = usage;
-      saveToLocalStorage(state);
     },
     setSheets(state, sheets) {
       state.sheets = sheets;
diff --git a/src/views/ArchivesView.vue b/src/views/ArchiveSearchView.vue
similarity index 93%
rename from src/views/ArchivesView.vue
rename to src/views/ArchiveSearchView.vue
index 34723e1..ff93bf5 100644
--- a/src/views/ArchivesView.vue
+++ b/src/views/ArchiveSearchView.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-container class="pane-l" v-if="user?.active">
+  <PermissionNeeded v-if="user && !featureEnabled" feature="Search Archives" />
+  <v-container class="pane-l" v-if="user?.active && featureEnabled">
     <v-row>
       <v-col>
         <v-card elevation="12">
@@ -100,9 +101,14 @@
 </template>
 
 <script>
+import PermissionNeeded from "@/components/PermissionNeeded.vue";
 import { urlValidator, getUrlFromResult } from "@/utils/misc.js";
+
 export default {
-  name: "ArchivesView",
+  name: "ArchiveSearchView",
+  components: {
+    PermissionNeeded
+  },
   data() {
     return {
       today: new Date().toISOString().substring(0, 10),
@@ -136,6 +142,16 @@ export default {
     user() {
       return this.$store.state.user;
     },
+    featureEnabled() {
+      const read = this.user?.permissions?.['all']?.read
+      if (read === true) {
+        return true;
+      }
+      if (Array.isArray(read) && read.length > 0) {
+        return true;
+      }
+      return this.user?.permissions?.['all']?.read_public
+    },
     validUrl() {
       return this.queryUrl && this.urlValidator(this.queryUrl) === true;
     },
diff --git a/src/components/ArchiveUrl.vue b/src/views/ArchiveUrlView.vue
similarity index 95%
rename from src/components/ArchiveUrl.vue
rename to src/views/ArchiveUrlView.vue
index 0bc56c0..e52299c 100644
--- a/src/components/ArchiveUrl.vue
+++ b/src/views/ArchiveUrlView.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-container class="pane" v-if="user?.active">
+  <PermissionNeeded v-if="user && !featureEnabled" feature="Archive URL" />
+  <v-container class="pane" v-if="user?.active && featureEnabled">
     <v-card :loading="loadingArchive">
       <v-card-title class="text-center">
         Archive a single URL
@@ -82,11 +83,12 @@
 <script>
 import { urlValidator, getUrlFromResult } from "@/utils/misc";
 import SnackBar from "@/components/SnackBar.vue";
+import PermissionNeeded from "@/components/PermissionNeeded.vue";
 
 export default {
-  name: "ArchiveUrl",
+  name: "ArchiveUrlView",
   components: {
-    SnackBar,
+    SnackBar, PermissionNeeded
   },
   data() {
     return {
@@ -110,6 +112,9 @@ export default {
     user() {
       return this.$store.state.user;
     },
+    featureEnabled() {
+      return this.user?.permissions?.["all"]?.archive_url;
+    },
     urlValidator() {
       return urlValidator;
     },
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 613e80c..72c1ec1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,10 @@
 <template>
+  <PermissionNeeded v-if="user && !featureEnabled" feature="Archive Spreadsheets" />
   <v-container class="pane" fluid v-if="!user || !user.active">
     <v-row>
       <v-col>
-        <v-alert color="orange" icon="mdi-information" v-if="user && !user.active" class="text-center" style="font-size:x-large">
-            To use this tool you need <strong>permission from Bellingcat's tech team</strong>. You can ask for access via <a href="https://forms.gle/crqBXUtyZcbLhiRQ9" target="_blank">this form</a>.
-        </v-alert>
         <v-card>
-            <v-card-text>
+          <v-card-text>
             <v-card-title class="text-center">
               Welcome to the Auto Archiver Setup Tool
             </v-card-title>
@@ -22,28 +20,32 @@
             <div class="text-center">
               <v-btn v-if="!user" @click="$store.dispatch('signin')" size="large">Sign In</v-btn>
             </div>
-            </v-card-text>
+          </v-card-text>
         </v-card>
       </v-col>
     </v-row>
   </v-container>
-  <ArchiveSheet v-if="user?.active" />
-  <ManageSheets v-if="user?.active" />
+  <ArchiveSheet v-if="user?.active && featureEnabled" />
+  <ManageSheets v-if="user?.active && featureEnabled" />
 </template>
 
 <script>
 import ArchiveSheet from "@/components/ArchiveSheet.vue";
 import ManageSheets from "@/components/ManageSheets.vue";
+import PermissionNeeded from "@/components/PermissionNeeded.vue";
 
 export default {
   name: "HomeView",
   components: {
-    ArchiveSheet, ManageSheets
+    ArchiveSheet, ManageSheets, PermissionNeeded
   },
   computed: {
     user() {
       return this.$store.state.user;
     },
+    featureEnabled() {
+      return this.user?.permissions?.["all"]?.archive_sheet;
+    }
   }
 };
 </script>
diff --git a/src/views/SheetView.vue b/src/views/SheetView.vue
deleted file mode 100644
index e0c7fb5..0000000
--- a/src/views/SheetView.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <ArchiveSheet v-if="user?.active" />
-  <ManageSheets v-if="user?.active" />
-</template>
-
-<script>
-import ArchiveSheet from "@/components/ArchiveSheet.vue";
-import ManageSheets from "@/components/ManageSheets.vue";
-
-export default {
-  name: "SheetView",
-  components: {
-    ArchiveSheet, ManageSheets
-  },
-  data() {
-    return {
-
-    };
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    },
-  },
-  methods: {},
-};
-</script>