refactoring permission banner

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.";
     }

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>

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',

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;

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;
     },

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;
     },

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>

src/views/SheetView.vue

@@ -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>