working on new auth/pages logic

src/App.vue

@@ -25,6 +25,10 @@ export default {
 </script>
 
 <style>
+:root {
+  --v-card-text-opacity: 0.85;
+}
+
 .pane {
   max-width: 800px;
   margin-left: auto;
@@ -49,5 +53,31 @@ html {
 
 .legal {
   justify-content: center;
+  max-height: 50px;
+}
+
+ol,
+ul {
+  padding-left: 16px;
+}
+
+p {
+  margin-bottom: 16px;
+}
+
+.v-alert {
+  margin-bottom: 16px;
+}
+
+code {
+  background-color: rgba(0, 0, 0, .1);
+  padding: .2em .4em;
+}
+
+.v-card .v-card-text {
+  font-size: 1.1rem;
+  font-weight: 400;
+  line-height: 1.7rem;
+  letter-spacing: .0092em;
 }
 </style>

src/components/DocCard.vue

@@ -19,16 +19,18 @@
         <v-col>
           <v-btn :href="doc.url" target="_blank"
             >Open sheet
-            <v-icon small style="margin-left: 1em">mdi-open-in-new</v-icon>
+            <v-icon size="small" style="margin-left: 1em"
+              >mdi-open-in-new</v-icon
+            >
           </v-btn>
         </v-col>
         <v-col>
           <v-btn @click="$store.dispatch('archive', doc)">Archive now</v-btn>
         </v-col>
         <v-dialog width="500" v-model="dialog" persistent :retain-focus="false">
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-col class="text-right">
-              <v-btn color="#f2d97c" right v-bind="attrs" v-on="on"
+              <v-btn color="#f2d97c" location="right" v-bind="props"
                 >Stop archiving</v-btn
               >
             </v-col>
@@ -47,7 +49,9 @@
             <v-card-actions>
               <v-btn @click="dialog = false" color="primary">Cancel</v-btn>
               <v-spacer></v-spacer>
-              <v-btn color="red" text @click="remove"> Stop archiving </v-btn>
+              <v-btn color="red" variant="text" @click="remove">
+                Stop archiving
+              </v-btn>
             </v-card-actions>
           </v-card>
         </v-dialog>

src/components/NavBar.vue

@@ -1,18 +1,23 @@
 <template>
   <v-app-bar style="flex-grow: 0" class="text-no-wrap">
-    <v-toolbar-title
-      ><router-link to="/" class="nodecoration"
-        >Bellingcat Auto Archiver demo tool</router-link
-      ></v-toolbar-title
-    >
-    <v-spacer></v-spacer>
+    <v-toolbar-title>
+      <router-link to="/" class="nodecoration">
+        Bellingcat Auto Archiver demo
+      </router-link>
+    </v-toolbar-title>
     <v-btn v-if="!user" @click="$store.dispatch('signin')">Sign In</v-btn>
+
     <span class="user" v-if="user">
-      {{ user.email }}
+    <v-chip v-if="user.active" color="green" prepend-icon="mdi-checkbox-marked-circle" variant="outlined">
+        active
+      </v-chip>
+    <v-chip v-if="!user.active" color="red" prepend-icon="mdi-account-cancel" variant="outlined">
+        inactive
+      </v-chip>
+    <span class="ms-4">{{ user.email }}</span>
+    <v-tooltip activator="parent" location="bottom">{{ activeUserMessage }}</v-tooltip>
     </span>
-    <v-btn v-if="user" href="#" @click="$store.dispatch('signout')"
-      >Sign Out</v-btn
-    >
+    <v-btn v-if="user" href="#" @click="$store.dispatch('signout')">Sign Out</v-btn>
   </v-app-bar>
 </template>
 
@@ -23,6 +28,12 @@ export default {
     user() {
       return this.$store.state.user;
     },
+    activeUserMessage() {
+      if (this.user && this.user.active) {
+        return "This account is active and can use the tool.";
+      }
+      return "This account is inactive, please reach out to the Bellingcat team for access.";
+    }
   },
 };
 </script>

src/store/index.js

@@ -1,8 +1,4 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
-/* eslint-disable */
-// eslint-disable-next-line
+import { createStore } from "vuex";
 import { gapi, client } from "@/gapi";
 import {
   signOut,
@@ -22,11 +18,12 @@ import {
 } from "firebase/firestore";
 import { firebaseAuth, firebaseFirestore } from "@/firebase.js";
 
-Vue.use(Vuex);
+const API_ENDPOINT = "https://auto-archiver-api.bellingcat.com";
 
-export default new Vuex.Store({
+export default createStore({
   state: {
     user: null,
+    active: false,
     access_token: null,
     docs: [],
     loading: false,
@@ -36,6 +33,9 @@ export default new Vuex.Store({
     setUser(state, user) {
       state.user = user;
     },
+    setUserActiveState(state, active) {
+      state.user.active = active;
+    },
     setDocs(state, docs) {
       state.docs = docs;
     },
@@ -59,12 +59,12 @@ export default new Vuex.Store({
         const response = await signInWithCredential(firebaseAuth, credential);
 
         commit("setUser", response.user);
+        dispatch("checkActiveUser");
         dispatch("getDocs");
       }
 
       commit("setUser", null);
 
-      // eslint-disable-next-line
       const client = google.accounts.oauth2.initTokenClient({
         client_id:
           "406209235111-r1mpkvkfaqc2jg5iqbvffl2b0rf4clbo.apps.googleusercontent.com",
@@ -93,7 +93,32 @@ export default new Vuex.Store({
       }
     },
 
+    async checkActiveUser({ state, commit, dispatch }) {
+      try {
+        commit("setErrorMessage", "");
+        const r = await fetch(
+          `${API_ENDPOINT}/user/active`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${state.access_token}`,
+            },
+          }
+        );
+        const response = await r.json();
+        commit("setUserActiveState", response.active);
+      } catch (error) {
+        console.error("checkActiveUser (firebase.js): ", error);
+        commit("setErrorMessage", "Unable to check user status against the API");
+      }
+
+    },
+
     async getDocs({ state, commit }) {
+      if (!state.user || !state.user.active) {
+        return;
+      }
       try {
         // get documents where uid matches user
 
@@ -127,7 +152,7 @@ export default new Vuex.Store({
         // send a post request to the API with the sheet ID in the body
         // and a bearer auth token in the header
         await fetch(
-          "https://auto-archiver-api.bellingcat.com/sheet",
+          `${API_ENDPOINT}/sheet`,
           {
             method: "POST",
             headers: {
@@ -330,9 +355,11 @@ export default new Vuex.Store({
 
       try {
         // fetch existing sheet
+        console.log(spreadsheetId);
         const sheetToEnable = await gapi.client.sheets.spreadsheets.get({
           spreadsheetId: spreadsheetId,
         });
+        console.log(sheetToEnable);
 
         const q = query(
           collection(firebaseFirestore, "sheets"),

src/views/HomeView.vue

@@ -2,166 +2,38 @@
   <v-container>
     <v-row>
       <v-col>
+        <v-alert color="#f2d97c" icon="mdi-alert" >
+          This is a prototype demo service provided on a
+          best-effort basis. <br />Do not use for mission critical or sensitive
+          data.
+        </v-alert>
+        <v-alert color="orange" icon="mdi-information" v-if="user && !user.active" >
+          To use this tool you need a Google account and <strong>permission from the Bellingcat team</strong>.<br/>
+          You can do so HERE: TODO.
+        </v-alert>
         <v-card style="margin-bottom: 1em">
           <v-card-text>
-            <v-alert color="#f2d97c" light icon="mdi-alert">
-              This is a pre-release prototype demo service provided on a
-              best-effort basis. Do not use for mission critical or sensitive
-              data.
-            </v-alert>
+            <v-card-title class="text-center">
+              Welcome to the Auto Archiver Setup Tool
+            </v-card-title>
             <p>
-              This tool will configure a Google Sheet on your Google account for
-              use with
-              <a href="https://github.com/bellingcat/auto-archiver"
-                >Bellingcat's Auto Archiver</a
-              >. For more information about the Auto Archiver and how to use it,
-              see
-              <a href="https://github.com/bellingcat/auto-archiver"
-                >our Github repository</a
-              >
-              and the
-              <a
-                href="https://www.bellingcat.com/resources/2022/09/22/preserve-vital-online-content-with-bellingcats-auto-archiver-tool/"
-                >associated article</a
-              >.
+              This tool can be used to archive digital content via single <router-link to="/urls">URLs</router-link> or
+              <router-link to="/sheets">Google sheets</router-link>.
+            </p>
+            <blockquote>
+              To use this tool you need a Google account and <strong>permission from the Bellingcat team</strong>.
+            </blockquote>
+            <p>
+              This tool uses <a href="https://github.com/bellingcat/auto-archiver">Bellingcat's Auto Archiver</a> to
+              archive online content. For more information about the Auto Archiver see
+              <a href="https://github.com/bellingcat/auto-archiver">our Github repository</a>
+              and the <a
+                href="https://www.bellingcat.com/resources/2022/09/22/preserve-vital-online-content-with-bellingcats-auto-archiver-tool/">associated
+                article</a>.
             </p>
-            <h4>How archiving a Google Spreadsheet works</h4>
-            <ul>
-              <li>Add links to the <code>Link</code> column</li>
-              <li>
-                Links are archived
-                <b>every 60 minutes</b>, or you can trigger a manual archive
-                below
-              </li>
-              <li>
-                You can modify and share the Google Sheet subsequently, but do
-                not edit the auto archiver column names in the header row or
-                remove the service account from the shared users
-              </li>
-            </ul>
           </v-card-text>
         </v-card>
 
-        <DocList v-if="user" />
-
-        <div class="text-h5 mt-5 mb-3">Manage new auto-archiver sheets</div>
-
-        <v-card style="margin-bottom: 1em">
-          <v-card-title>Create a new auto-archiver sheet</v-card-title>
-          <v-card-text>
-            <ol style="margin-bottom: 1em">
-              <li>Press "create" to create a new archiving Google Sheet</li>
-              <li>
-                This sheet will be shared with the service account necessary for
-                Bellingcat's archiving server
-              </li>
-              <li>The sheet will appear in your list</li>
-            </ol>
-            <v-text-field
-              label="Document name"
-              v-model="docName"
-              v-if="user"
-            ></v-text-field>
-            <v-btn
-              @click="$store.dispatch('add', { name: docName })"
-              :loading="$store.state.loading"
-              v-if="user"
-              >Create</v-btn
-            >
-            <v-alert v-if="!user" color="#f2d97c" light icon="mdi-alert"
-              ><a href="#!" @click="$store.dispatch('signin')"
-                >Sign in with a Google account</a
-              >
-              to continue</v-alert
-            >
-          </v-card-text>
-        </v-card>
-
-        <v-card>
-          <v-card-title
-            >Enable the auto-archiver in an existing sheet</v-card-title
-          >
-          <v-card-text>
-            <ol style="margin-bottom: 1em">
-              <li>
-                Invite
-                <code
-                  >bellingcat-auto-archiver-api@bellingcat-auto-archiver-b85db.iam.gserviceaccount.com</code
-                >
-                into your spreadsheet
-              </li>
-              <!-- Link	Archive status	Destination folder	Archive location	Archive date	Thumbnail	Upload timestamp	Upload title	Textual content	Screenshot	Hash -->
-              <li>
-                Make sure you have the following <b>mandatory</b> column names:
-                <ul>
-                  <li><code>Link</code> where you will put the URLs.</li>
-                  <li>
-                    <code>Archive Status</code> to monitor progress and success
-                    of archiver
-                  </li>
-                  <li>
-                    <code>Archive location</code> where the link to the archived
-                    content is added
-                  </li>
-                </ul>
-              </li>
-              <li>
-                Add any of the following <b>optional</b> column names:
-                <ul>
-                  <li>
-                    <code>Archive date</code> info on when archiving occurred
-                  </li>
-                  <li>
-                    <code>Thumbnail</code> an image preview from archived media
-                  </li>
-                  <li>
-                    <code>Upload timestamp</code> online content creation date
-                  </li>
-                  <li><code>Upload title</code> title</li>
-                  <li><code>Textual content</code> text content</li>
-                  <li><code>Screenshot</code> link to page screenshot</li>
-                  <li>
-                    <code>Hash</code> content hash (for integrity purposes)
-                  </li>
-                </ul>
-              </li>
-              <li>Paste the Google Sheet URL</li>
-              <li>Press "enable" to add the Google Sheet to your list</li>
-              <li>
-                Manually check archiving is working and re-check the steps above
-                if it is not
-              </li>
-            </ol>
-            <v-alert
-              v-if="$store.state.errorMessage"
-              title="Error"
-              text
-              type="error"
-              variant="outlined"
-              closable
-              >{{ $store.state.errorMessage }}</v-alert
-            >
-            <v-text-field
-              label="Google Sheet URL"
-              v-model="spreadsheetUrl"
-              :hint="spreadsheetId ? 'Detected id: ' + spreadsheetId : ''"
-              persistent-hint
-              v-if="user"
-            ></v-text-field>
-            <v-btn
-              @click="$store.dispatch('enable', { spreadsheetId })"
-              :loading="$store.state.loading"
-              v-if="user"
-              >Enable</v-btn
-            >
-            <v-alert v-if="!user" color="#f2d97c" light icon="mdi-alert"
-              ><a href="#!" @click="$store.dispatch('signin')"
-                >Sign in with a Google account</a
-              >
-              to continue</v-alert
-            >
-          </v-card-text>
-        </v-card>
       </v-col>
     </v-row>
   </v-container>

src/views/SheetView.vue

@@ -0,0 +1,200 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-card style="margin-bottom: 1em">
+          <v-card-text>
+            <v-alert color="#f2d97c" icon="mdi-alert">
+              This is a pre-release prototype demo service provided on a
+              best-effort basis. Do not use for mission critical or sensitive
+              data.
+            </v-alert>
+            <p>
+              This tool will configure a Google Sheet on your Google account for
+              use with
+              <a href="https://github.com/bellingcat/auto-archiver"
+                >Bellingcat's Auto Archiver</a
+              >. For more information about the Auto Archiver and how to use it,
+              see
+              <a href="https://github.com/bellingcat/auto-archiver"
+                >our Github repository</a
+              >
+              and the
+              <a
+                href="https://www.bellingcat.com/resources/2022/09/22/preserve-vital-online-content-with-bellingcats-auto-archiver-tool/"
+                >associated article</a
+              >.
+            </p>
+            <h4>How archiving a Google Spreadsheet works</h4>
+            <ul>
+              <li>Add links to the <code>Link</code> column</li>
+              <li>
+                Links are archived
+                <b>every 60 minutes</b>, or you can trigger a manual archive
+                below
+              </li>
+              <li>
+                You can modify and share the Google Sheet subsequently, but do
+                not edit the auto archiver column names in the header row or
+                remove the service account from the shared users
+              </li>
+            </ul>
+          </v-card-text>
+        </v-card>
+
+        <DocList v-if="user" />
+
+        <div class="text-h5 mt-5 mb-3">Manage new auto-archiver sheets</div>
+
+        <v-card style="margin-bottom: 1em">
+          <v-card-title>Create a new auto-archiver sheet</v-card-title>
+          <v-card-text>
+            <ol style="margin-bottom: 1em">
+              <li>Press "create" to create a new archiving Google Sheet</li>
+              <li>
+                This sheet will be shared with the service account necessary for
+                Bellingcat's archiving server
+              </li>
+              <li>The sheet will appear in your list</li>
+            </ol>
+            <v-text-field
+              label="Document name"
+              v-model="docName"
+              v-if="user"
+            ></v-text-field>
+            <v-btn
+              @click="$store.dispatch('add', { name: docName })"
+              :loading="$store.state.loading"
+              v-if="user"
+              >Create</v-btn
+            >
+            <v-alert v-if="!user" color="#f2d97c" icon="mdi-alert"
+              ><a href="#!" @click="$store.dispatch('signin')"
+                >Sign in with a Google account</a
+              >
+              to continue</v-alert
+            >
+          </v-card-text>
+        </v-card>
+
+        <v-card>
+          <v-card-title
+            >Enable the auto-archiver in an existing sheet</v-card-title
+          >
+          <v-card-text>
+            <ol style="margin-bottom: 1em">
+              <li>
+                Invite
+                <code
+                  >bellingcat-auto-archiver-api@bellingcat-auto-archiver-b85db.iam.gserviceaccount.com</code
+                >
+                into your spreadsheet
+              </li>
+              <!-- Link	Archive status	Destination folder	Archive location	Archive date	Thumbnail	Upload timestamp	Upload title	Textual content	Screenshot	Hash -->
+              <li>
+                Make sure you have the following <b>mandatory</b> column names:
+                <ul>
+                  <li><code>Link</code> where you will put the URLs.</li>
+                  <li>
+                    <code>Archive Status</code> to monitor progress and success
+                    of archiver
+                  </li>
+                  <li>
+                    <code>Archive location</code> where the link to the archived
+                    content is added
+                  </li>
+                </ul>
+              </li>
+              <li>
+                Add any of the following <b>optional</b> column names:
+                <ul>
+                  <li>
+                    <code>Archive date</code> info on when archiving occurred
+                  </li>
+                  <li>
+                    <code>Thumbnail</code> an image preview from archived media
+                  </li>
+                  <li>
+                    <code>Upload timestamp</code> online content creation date
+                  </li>
+                  <li><code>Upload title</code> title</li>
+                  <li><code>Textual content</code> text content</li>
+                  <li><code>Screenshot</code> link to page screenshot</li>
+                  <li>
+                    <code>Hash</code> content hash (for integrity purposes)
+                  </li>
+                </ul>
+              </li>
+              <li>Paste the Google Sheet URL</li>
+              <li>Press "enable" to add the Google Sheet to your list</li>
+              <li>
+                Manually check archiving is working and re-check the steps above
+                if it is not
+              </li>
+            </ol>
+            <v-alert
+              v-if="$store.state.errorMessage"
+              title="Error"
+              text
+              type="error"
+              variant="outlined"
+              closable
+              >{{ $store.state.errorMessage }}</v-alert
+            >
+            <v-text-field
+              label="Google Sheet URL"
+              v-model="spreadsheetUrl"
+              :hint="spreadsheetId ? 'Detected id: ' + spreadsheetId : ''"
+              persistent-hint
+              v-if="user"
+            ></v-text-field>
+            <v-btn
+              @click="$store.dispatch('enable', { spreadsheetId })"
+              :loading="$store.state.loading"
+              v-if="user"
+              >Enable</v-btn
+            >
+            <v-alert v-if="!user" color="#f2d97c" light icon="mdi-alert"
+              ><a href="#!" @click="$store.dispatch('signin')"
+                >Sign in with a Google account</a
+              >
+              to continue</v-alert
+            >
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import DocList from "@/components/DocList.vue";
+
+export default {
+  name: "HomeView",
+  components: {
+    DocList,
+  },
+  data() {
+    return {
+      docName: "Auto archiver sheet",
+      spreadsheetUrl: "",
+    };
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    },
+    spreadsheetId() {
+      if (
+        this.spreadsheetUrl.startsWith("http") &&
+        this.spreadsheetUrl.split("/").length >= 6
+      ) {
+        return this.spreadsheetUrl.split("/")[5];
+      }
+      return this.spreadsheetUrl;
+    },
+  },
+  methods: {},
+};
+</script>