refactoring welcome card/loading state on signin/refresh

src/components/PermissionNeeded.vue

@@ -1,10 +1,11 @@
 <template>
-	<v-alert v-if="!loadingUserState" color="orange" icon="mdi-information" class="text-center" style="font-size:x-large">
+	<v-alert v-if="!loadingUserState" 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/>
+		<br />
 		<small>
 			<strong>NB: </strong>We do not allow law enforcement, military or intelligence agencies to use this tool.
 		</small>

src/components/WelcomeCard.vue

@@ -0,0 +1,57 @@
+<template>
+	<v-container class="pane" fluid v-if="!user || !user.active">
+		<v-row>
+			<v-col>
+				<v-card>
+					<v-card-text>
+						<v-card-title class="text-center">
+							Welcome to the Auto Archiver Setup Tool
+						</v-card-title>
+						<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>
+						<p>
+							This tool can be used to archive digital content via single URL or Google Sheets, you can
+							also search for
+							archived content.
+						</p>
+						<div class="text-center">
+							<v-btn v-if="!user && !loadingUserState" @click="$store.dispatch('signin')" size="large">Sign In</v-btn>
+						</div>
+						<v-container v-if="loadingUserState" class="pane" style="text-align: center;">
+							<v-row justify="center">
+								<v-col cols="12">
+									<v-progress-circular color="teal" indeterminate :size="82"
+										:width="7"></v-progress-circular>
+								</v-col>
+								<v-col cols="12">
+									<h4>loading...</h4>
+								</v-col>
+							</v-row>
+						</v-container>
+					</v-card-text>
+				</v-card>
+			</v-col>
+		</v-row>
+	</v-container>
+</template>
+
+<script>
+export default {
+	name: 'WelcomeCard',
+	props: {
+	},
+	computed: {
+		user() {
+			return this.$store.state.user;
+		},
+		loadingUserState() {
+			return this.$store.state?.loadingUserState;
+		}
+	}
+}
+</script>
+
+<style scoped></style>

src/router/index.js

@@ -32,6 +32,10 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "tos" */ '../views/TOSView.vue'),
   },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/',
+  }
 ];
 
 const router = createRouter({

src/store/index.js

@@ -56,11 +56,13 @@ export default createStore({
     },
     setUserActiveState(state, active) {
       state.user.active = active;
-      state.loadingUserState = false;
+      saveToLocalStorage(state);
     },
     setUserPermissions(state, permissions) {
       state.user.permissions = permissions;
       state.user.groups = Object.keys(permissions).filter(key => key !== "all");
+      state.loadingUserState = false;
+      saveToLocalStorage(state);
     },
     setUserUsage(state, usage) {
       state.user.usage = usage;
@@ -70,6 +72,7 @@ export default createStore({
     },
     setLoadingUserState(state, loadingUserState) {
       state.loadingUserState = loadingUserState;
+      saveToLocalStorage(state);
     },
     setAccessToken(state, access_token) {
       state.access_token = access_token;
@@ -81,6 +84,7 @@ export default createStore({
   },
   actions: {
     async signin({ commit, dispatch }) {
+      commit("setLoadingUserState", true);
       async function callback(tokenResponse) {
         let access_token = tokenResponse.access_token;
         commit("setAccessToken", access_token);
@@ -88,7 +92,6 @@ export default createStore({
 
         const response = await signInWithCredential(firebaseAuth, credential);
 
-        commit("setLoadingUserState", true);
         commit("setUser", response.user);
         dispatch("checkActiveUser");
         dispatch("checkUserPermissions");
@@ -127,6 +130,8 @@ export default createStore({
         clearLocalStorage();
       } catch (error) {
         console.error("signOutUser (firebase/auth.js): ", error);
+      } finally {
+        commit("setLoadingUserState", false);
       }
     },
 
@@ -390,6 +395,7 @@ export default createStore({
 
       const { user, access_token } = loadFromLocalStorage();
       if (user && access_token) {
+        store.commit("setLoadingUserState", true);
         store.commit("setUser", user);
         store.commit("setAccessToken", access_token);
         store.getters.isTokenExpired.then((expired) => {

src/views/ArchiveSearchView.vue

@@ -1,5 +1,6 @@
 <template>
   <PermissionNeeded v-if="user && !featureEnabled" feature="Search Archives" />
+  <WelcomeCard/>
   <v-container class="pane-l" v-if="user?.active && featureEnabled">
     <v-row>
       <v-col>
@@ -60,7 +61,7 @@
                     <time :datetime="item?.store_until"
                       :title="`this archive will be deleted on: ${$moment(item?.store_until).format(`MMMM Do YYYY, k:mm:ss`)}`"
                       :style="{ color: $moment().diff(item?.store_until, 'days') > -31 ? 'red' : 'inherit' }">{{
-                      item?.store_until ? $moment(item?.store_until).fromNow() : "never" }}</time>
+                        item?.store_until ? $moment(item?.store_until).fromNow() : "never" }}</time>
                   </template>
                   <template v-slot:item.size="{ item }">
                     {{ ((item?.result?.metadata?.total_bytes || 0) / (1024 * 1024)).toFixed(2) }}
@@ -111,11 +112,12 @@
 <script>
 import PermissionNeeded from "@/components/PermissionNeeded.vue";
 import { urlValidator, getUrlFromResult } from "@/utils/misc.js";
+import WelcomeCard from "@/components/WelcomeCard.vue";
 
 export default {
   name: "ArchiveSearchView",
   components: {
-    PermissionNeeded
+    PermissionNeeded, WelcomeCard
   },
   data() {
     return {

src/views/ArchiveUrlView.vue

@@ -1,5 +1,6 @@
 <template>
   <PermissionNeeded v-if="user && !featureEnabled" feature="Archive URL" />
+  <WelcomeCard />
   <v-container class="pane" v-if="user?.active && featureEnabled">
     <v-card>
       <v-card-title class="text-center">
@@ -84,11 +85,12 @@
 import { urlValidator, getUrlFromResult } from "@/utils/misc";
 import SnackBar from "@/components/SnackBar.vue";
 import PermissionNeeded from "@/components/PermissionNeeded.vue";
+import WelcomeCard from "@/components/WelcomeCard.vue";
 
 export default {
   name: "ArchiveUrlView",
   components: {
-    SnackBar, PermissionNeeded
+    SnackBar, PermissionNeeded, WelcomeCard
   },
   data() {
     return {

src/views/HomeView.vue

@@ -1,30 +1,6 @@
 <template>
   <PermissionNeeded v-if="user && !featureEnabled" feature="Archive Spreadsheets" />
-  <v-container class="pane" fluid v-if="!user || !user.active">
-    <v-row>
-      <v-col>
-        <v-card>
-          <v-card-text>
-            <v-card-title class="text-center">
-              Welcome to the Auto Archiver Setup Tool
-            </v-card-title>
-            <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>
-            <p>
-              This tool can be used to archive digital content via single URL or Google Sheets, you can also search for
-              archived content.
-            </p>
-            <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>
-      </v-col>
-    </v-row>
-  </v-container>
+  <WelcomeCard/>
   <ArchiveSheet v-if="user?.active && featureEnabled" />
   <ManageSheets v-if="user?.active && featureEnabled" />
 </template>
@@ -33,11 +9,12 @@
 import ArchiveSheet from "@/components/ArchiveSheet.vue";
 import ManageSheets from "@/components/ManageSheets.vue";
 import PermissionNeeded from "@/components/PermissionNeeded.vue";
+import WelcomeCard from "@/components/WelcomeCard.vue";
 
 export default {
   name: "HomeView",
   components: {
-    ArchiveSheet, ManageSheets, PermissionNeeded
+    ArchiveSheet, ManageSheets, PermissionNeeded, WelcomeCard
   },
   computed: {
     user() {