From d2e6d2606347124f59f1e4acea52b9d50bfaf8b9 Mon Sep 17 00:00:00 2001
From: Logan Williams <logan@bellingcat.com>
Date: Tue, 6 Jun 2023 11:43:30 -0600
Subject: [PATCH] Add warning message

---
 public/index.html          |  1 +
 src/App.vue                |  8 +++--
 src/components/DocList.vue |  4 +--
 src/components/NavBar.vue  |  2 --
 src/views/HomeView.vue     | 65 ++++++++++++++++++++++++--------------
 5 files changed, 51 insertions(+), 29 deletions(-)
diff --git a/public/index.html b/public/index.html
index c06303c..a49f9d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Bellingcat Auto Archiver</title>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <script defer data-domain="auto-archiver.bellingcat.com" src="https://plausible.io/js/script.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index bae4db1..fb6a55b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pane">
-    <v-app>
+    <v-app class="bg">
       <NavBar />
       <v-main>
         <router-view />
@@ -26,7 +26,11 @@ export default {
   margin-left: auto;
   margin-right: auto;
   height: 100vh;
-  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
+  background-color: #d6e8de !important;
+}
+
+.bg {
+  background-color: #d6e8de !important;
 }
 
 html {
diff --git a/src/components/DocList.vue b/src/components/DocList.vue
index 5184d9a..75ded32 100644
--- a/src/components/DocList.vue
+++ b/src/components/DocList.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <div>
     <div class="text-h5 mt-5 mb-3" v-if="docs.length > 0">
       Your auto-archiver documents
     </div>
@@ -8,7 +8,7 @@
         <DocCard :doc="doc" />
       </v-col>
     </v-row>
-  </v-container>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 4376ed6..218a7dd 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -2,7 +2,6 @@
   <v-app-bar style="flex-grow: 0" class="text-no-wrap">
     <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 }}
@@ -10,7 +9,6 @@
     <v-btn v-if="user" href="#" @click="$store.dispatch('signout')"
       >Sign Out</v-btn
     >
-    <!-- </v-col> -->
   </v-app-bar>
 </template>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 79b9bee..3cf8518 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,22 +2,20 @@
   <v-container>
     <v-row>
       <v-col>
-        <v-card>
-          <v-card-title>Create a new auto archiver sheet</v-card-title>
+        <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
+              date.
+            </v-alert>
             <p>
-              This tool will configure a Google Sheet on your account for use
-              with Bellingcat's auto archiver. This sheet will be shared with
-              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.
-            </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
+              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
               >
@@ -27,14 +25,43 @@
                 >associated article</a
               >.
             </p>
+            <ol style="margin-bottom: 1em">
+              <li>Press "create" to create a new archiving Google Sheet</li>
+              <li>
+                Add links to the "Link" column. They will be archived every 15
+                minutes, or you can trigger a manual archive below
+              </li>
+              <li>
+                This sheet will be shared with the service account necessary for
+                Bellingcat's archiving server
+              </li>
+              <li>
+                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
+              </li>
+            </ol>
+          </v-card-text>
+        </v-card>
+        <v-card>
+          <v-card-title>Create a new auto archiver sheet</v-card-title>
+          <v-card-text>
             <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"
-              >Add</v-btn
+              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>
@@ -42,14 +69,6 @@
     </v-row>
 
     <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>
 
