Add cron functions; improve styles

src/App.vue

@@ -1,10 +1,12 @@
 <template>
-  <v-app>
-    <NavBar />
-    <v-main>
-      <router-view />
-    </v-main>
-  </v-app>
+  <div class="pane">
+    <v-app>
+      <NavBar />
+      <v-main>
+        <router-view />
+      </v-main>
+    </v-app>
+  </div>
 </template>
 
 <script>
@@ -18,4 +20,16 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.pane {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  height: 100vh;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
+}
+
+html {
+  background-color: #d6e8de;
+}
+</style>

src/components/DocCard.vue

@@ -13,44 +13,45 @@
             : "never"
         }}
       </div>
-      <div class="doc-id">ID: {{ doc.sheetId }}</div>
     </v-card-text>
     <v-card-actions>
-      <v-col>
-        <v-btn :href="doc.url" target="_blank"
-          >Open sheet
-          <v-icon>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 }">
-          <v-col class="text-right">
-            <v-btn color="red lighten-2" right v-bind="attrs" v-on="on"
-              >Stop archiving</v-btn
-            >
-          </v-col>
-        </template>
+      <v-row>
+        <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-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 }">
+            <v-col class="text-right">
+              <v-btn color="#f2d97c" right v-bind="attrs" v-on="on"
+                >Stop archiving</v-btn
+              >
+            </v-col>
+          </template>
 
-        <v-card>
-          <v-card-title>Stop archiving "{{ doc.name }}"? </v-card-title>
+          <v-card>
+            <v-card-title>Stop archiving "{{ doc.name }}"? </v-card-title>
 
-          <v-card-text>
-            This will stop archiving the sheet, but will not delete the sheet or
-            any of its data from your Google Drive.
-          </v-card-text>
+            <v-card-text>
+              This will stop archiving the sheet, but will not delete the sheet
+              or any of its data from your Google Drive.
+            </v-card-text>
 
-          <v-divider></v-divider>
+            <v-divider></v-divider>
 
-          <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-card-actions>
-        </v-card>
-      </v-dialog>
+            <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-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
     </v-card-actions>
   </v-card>
 </template>

src/components/NavBar.vue

@@ -1,16 +1,16 @@
 <template>
   <v-app-bar style="flex-grow: 0" class="text-no-wrap">
-    <v-toolbar-title>Bellingcat auto archiver setup tool</v-toolbar-title>
+    <v-toolbar-title>Bellingcat Auto Archiver demo tool</v-toolbar-title>
     <v-spacer></v-spacer>
-    <v-col class="nav-wrapper">
-      <v-btn v-if="!user" @click="$store.dispatch('signin')">Sign In</v-btn>
-      <span class="user" v-if="user">
-        {{ user.email }}
-      </span>
-      <v-btn v-if="user" href="#" @click="$store.dispatch('signout')"
-        >Sign Out</v-btn
-      >
-    </v-col>
+    <!-- <v-col class="nav-wrapper"> -->
+    <v-btn v-if="!user" @click="$store.dispatch('signin')">Sign In</v-btn>
+    <span class="user" v-if="user">
+      {{ user.email }}
+    </span>
+    <v-btn v-if="user" href="#" @click="$store.dispatch('signout')"
+      >Sign Out</v-btn
+    >
+    <!-- </v-col> -->
   </v-app-bar>
 </template>
 
@@ -25,4 +25,9 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.user {
+  margin-right: 1em;
+  font-size: 80%;
+}
+</style>

src/components/Profile.vue

@@ -1,49 +0,0 @@
-<template>
-  <div
-    class="card horizontal"
-    style="max-width: 400px; margin: 0 auto"
-    v-if="user"
-  >
-    <div class="card-image" style="margin-top: 25px; margin-left: 10px">
-      <img
-        :src="user.photoURL"
-        style="
-          width: 75px;
-          height: 75px;
-          border-radius: 50%;
-          border: 4px solid #333;
-        "
-      />
-    </div>
-    <div class="card-stacked">
-      <div class="card-content">
-        <p>
-          name: <strong>{{ user.displayName }}</strong
-          ><br />email:<strong>{{ user.email }}</strong
-          ><br />uid: <strong>{{ user.uid }}</strong> <br />provider:
-          <strong class="teal-text">{{
-            user.providerData[0].providerId
-          }}</strong>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ProfileView",
-  data() {
-    return {
-      items: [],
-    };
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    },
-  },
-};
-</script>
-
-<style></style>

src/main.js

@@ -4,6 +4,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "vuetify/dist/vuetify.min.css";
+import "@mdi/font/css/materialdesignicons.css";
 
 Vue.use(Vuetify);
 

src/store/index.js

@@ -64,7 +64,7 @@ export default new Vuex.Store({
         client_id:
           "406209235111-r1mpkvkfaqc2jg5iqbvffl2b0rf4clbo.apps.googleusercontent.com",
         scope:
-          "https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.profile",
+          "https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
         callback,
       });
 
@@ -247,18 +247,18 @@ export default new Vuex.Store({
                           },
                           userEnteredFormat,
                         },
-                        {
-                          userEnteredValue: {
-                            stringValue: "WACZ",
-                          },
-                          userEnteredFormat,
-                        },
-                        {
-                          userEnteredValue: {
-                            stringValue: "Replaywebpage",
-                          },
-                          userEnteredFormat,
-                        },
+                        // {
+                        //   userEnteredValue: {
+                        //     stringValue: "WACZ",
+                        //   },
+                        //   userEnteredFormat,
+                        // },
+                        // {
+                        //   userEnteredValue: {
+                        //     stringValue: "Replaywebpage",
+                        //   },
+                        //   userEnteredFormat,
+                        // },
                       ],
                     },
                   ],
@@ -279,7 +279,7 @@ export default new Vuex.Store({
                       startRowIndex: 0,
                       endRowIndex: 1,
                       startColumnIndex: 0,
-                      endColumnIndex: 13,
+                      endColumnIndex: 11,
                     },
                     description:
                       "Protecting header row (needed for auto-archiver)",

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container v-if="user">
+  <v-container>
     <v-row>
       <v-col>
         <v-card>
@@ -11,8 +11,13 @@
               the service account necessary for Bellingcat's archiving server.
               You can modify and share the Google Sheet subsequently, but do not
               edit the column names in the header row or remove the service
-              account from the shared users. For more information about the auto
-              archiver and how to use it, see
+              account from the shared users.
+            </p>
+
+            <p>
+              Links to online sources added to the "Link" column will be
+              archived every 15 minutes, or can be triggered manually below. 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
               >
@@ -35,10 +40,16 @@
         </v-card>
       </v-col>
     </v-row>
-    <DocList />
-  </v-container>
-  <v-container v-else>
-    <v-alert type="error">Sign in to set up an auto archiver</v-alert>
+
+    <DocList v-if="user" />
+
+    <v-row v-else
+      ><v-col
+        ><v-alert color="#f2d97c" light icon="mdi-alert"
+          >Sign in to set up an auto archiver</v-alert
+        ></v-col
+      ></v-row
+    >
   </v-container>
 </template>