improvements on upload page... might be dropping auth0

webapp/src/App.vue

@@ -2,6 +2,7 @@
 import { RouterView } from 'vue-router'
 import { ref, watch } from 'vue'
 import { useTheme } from 'vuetify';
+import { useRouter } from 'vue-router';
 
 import { useAuth0 } from '@auth0/auth0-vue';
 const { isAuthenticated, user, isLoading, loginWithRedirect, logout } = useAuth0();
@@ -10,6 +11,7 @@ const logoutParams = {
 };
 
 const theme = useTheme();
+const router = useRouter();
 
 function toggleTheme() {
   const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -55,7 +57,7 @@ watch(() => theme.global.name.value, (newTheme) => {
       <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
 
       <v-toolbar-title>
-        <v-img height="36" width="130" src="/deflock-logo.svg" />
+        <v-img style="cursor: pointer" height="36" width="130" src="/deflock-logo.svg" @click="router.push('/')" />
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
@@ -65,12 +67,17 @@ watch(() => theme.global.name.value, (newTheme) => {
       </v-btn>
 
       <v-menu activator="#menu-activator">
-        <v-list>
+        <v-list v-if="isAuthenticated">
-          <v-list-item v-if="isAuthenticated" @click="logout({logoutParams})">
+          <v-list-item to="/upload">
-            <v-list-item-title>Log Out</v-list-item-title>
+            <v-list-item-title><v-icon start>mdi-map-marker-plus</v-icon>Report</v-list-item-title>
           </v-list-item>
-          <v-list-item v-else @click="loginWithRedirect">
+          <v-list-item @click="logout({logoutParams})">
-            <v-list-item-title>Log In</v-list-item-title>
+            <v-list-item-title><v-icon start>mdi-logout</v-icon>Log Out</v-list-item-title>
+          </v-list-item>
+        </v-list>
+        <v-list v-else>
+          <v-list-item @click="loginWithRedirect">
+            <v-list-item-title><v-icon start>mdi-login</v-icon>Log In</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-menu>

webapp/src/router/index.ts

@@ -63,7 +63,7 @@ const router = createRouter({
       path: '/upload',
       name: 'upload',
       component: () => import('../views/ReportPhoto.vue'),
-      beforeEnter: routeGuard
+      // beforeEnter: routeGuard
     },
     {
       path: '/dashboard',

webapp/src/views/Dashboard.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <h1>Review Submissions</h1>
+    <h2 class="text-center mb-4">Community Submissions</h2>
   
     <v-data-table
       :loading="isLoading"
@@ -8,6 +8,7 @@
       :items="submissions"
       :items-per-page="10"
       class="elevation-1"
+      no-data-text="Yay! No submissions to review."
     >
       <template #item.review="{ item }: { item: Submission }">
         <v-btn @click="reviewSubmission(item)" color="primary" variant="text">Review</v-btn>

webapp/src/views/ReportPhoto.vue

@@ -1,77 +1,79 @@
 <template>
   <v-container>
-    <v-dialog
+
-      v-model="showLoginDialog"
+    <h2 class="text-center mb-4">Report an ALPR</h2>
-      persistent
-    >
-      <v-card>
-        <v-card-title class="text-center">Account Required</v-card-title>
-        <v-card-text>
-          <p>
-            To report an ALPR, you must be logged in. Please log in to continue.
-          </p>
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" @click="loginWithPopup">Log In/Sign Up</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
     
     <div>
-      <v-card>
+      <div style="position: relative">
-        <v-card-title>
+        <v-overlay :model-value="!isAuthenticated" persistent contained class="d-flex flex-column align-center justify-center">
-          Report with a Geotagged Photo
+          <div>
-        </v-card-title>
+            <v-card class="text-center" style="max-width: 90%; margin: auto;">
-        <v-card-text>
+              <v-card-title>
-          <p>
+                Login Required
-            If you snapped a picture of an ALPR your phone, you can upload it here where it will be reviewed and added to the map.
+              </v-card-title>
-          </p>
+              <v-card-text>
-          <div class="mt-8">
+                Use the Log In button above to report an ALPR using a photo.
-          <v-file-input
+              </v-card-text>
-            v-model="files"
+            </v-card>
-            accept="image/*,.heif,.heic"
+          </div>
-            label="Upload Photos"
+        </v-overlay>
-            prepend-icon="mdi-camera"
+        <v-card>
-            multiple
+          <v-card-title>
-            show-size
+            <v-icon>mdi-camera-marker</v-icon>
-            counter
+            Report with a Geotagged Photo
-            @update:model-value="checkGeotagging"
+          </v-card-title>
-          ></v-file-input>
+          <v-card-text>
+            <p>
+              If you snapped a picture of an ALPR your phone, you can upload it here where it will be reviewed and added to the map.
+            </p>
+            <div class="mt-8">
+            <v-file-input
+              v-model="files"
+              accept="image/*,.heif,.heic"
+              label="Upload Photos"
+              prepend-icon="mdi-camera"
+              multiple
+              show-size
+              counter
+              @update:model-value="checkGeotagging"
+              hint="Up to 5 photos at once, 1 photo per ALPR"
+              persistent-hint
+            ></v-file-input>
             
-          <v-alert
+            <v-alert
-            v-if="errorMessage"
+              v-if="errorMessage"
-            type="error"
+              type="error"
-            dismissible
+              dismissible
-          >
+              class="mt-2"
-            <span>{{ errorMessage }}</span>
+            >
-            <p>If you continue to experience issues, try <router-link to="/report">manually reporting</router-link>.</p>
+              <span>{{ errorMessage }}</span>
-          </v-alert>
+              <p>If you continue to experience issues, try <router-link style="color: white" to="/report">manually reporting</router-link>.</p>
+            </v-alert>
   
-          <v-alert
+            <v-alert
-            v-else-if="areAllImagesGeotagged"
+              v-else-if="areAllImagesGeotagged"
-            type="success"
+              type="success"
-            dismissible
+              dismissible
-          >
+            >
-            Found Geotags!
+              Found Geotags!
-          </v-alert>
+            </v-alert>
-
+          </div>
-          <v-checkbox
+          </v-card-text>
-            v-model="agree"
+          <v-card-actions>
-            label="I agree this information is accurate"
+            <span class="pl-4 text-grey-darken-1">Submitting as {{ user?.name }}</span>
-          ></v-checkbox>
+            <v-spacer/>
-        </div>
+            <v-btn :loading="isSubmitting" color="primary" @click="upload" :disabled="!canSubmit">Submit</v-btn>
-        </v-card-text>
+          </v-card-actions>
-        <v-card-actions>
+        </v-card>
-          <span class="pl-4 text-grey-darken-1">Submitting as {{ user?.name }}</span>
+      </div>
-          <v-spacer/>
-          <v-btn :loading="isSubmitting" color="primary" @click="upload" :disabled="!canSubmit">Submit</v-btn>
-        </v-card-actions>
-      </v-card>
 
       <v-divider class="my-8">OR</v-divider>
 
       <v-card>
-        <v-card-title>Report Manually</v-card-title>
+        <v-card-title>
+          <v-icon>mdi-typewriter</v-icon>
+          Report Manually
+        </v-card-title>
         <v-card-text>
           <p class=mb-4>
             If you don't have a geotagged photo, you can report manually by providing the location and a description of the ALPR.
@@ -91,7 +93,6 @@ import { getPresignedUrls } from '@/services/apiService';
 
 const { loginWithPopup, user, isAuthenticated } = useAuth0();
 
-const agree = ref(false);
 const files = ref<File[]>([]);
 const errorMessage = ref('');
 const areAllImagesGeotagged = ref(false);
@@ -99,18 +100,10 @@ const showLoginDialog = ref(false); // TODO: changeme
 const presignedUrls = ref<string[]>([]);
 const isSubmitting = ref(false);
 
-// watch(isAuthenticated, async (isAuthenticated) => {
-//   if (isAuthenticated) {
-//     showLoginDialog.value = false;
-//   } else {
-//     showLoginDialog.value = true;
-//   }
-// });
-
 const MAX_FILE_SIZE = 8 * 1024 * 1024; // 8 MB
 
 const canSubmit = computed(() => {
-  return agree.value && files.value.length > 0 && areAllImagesGeotagged.value && !isSubmitting.value;
+  return files.value.length > 0 && areAllImagesGeotagged.value && !isSubmitting.value;
 });
 
 const checkGeotagging = async () => {
@@ -138,7 +131,7 @@ const checkGeotagging = async () => {
     return;
   }
 
-  // fetch presigned urls ahead of time to save time
+  // Fetch presigned urls ahead of time
   getPresignedUrls(files.value.length, files.value[0].type, 'willfreeman').then((urls) => {
     presignedUrls.value = urls;
   });