refactor: use AppError component

Author: davidstackio

src/runtime/components/account/AccountUserSettings.vue

@@ -108,16 +108,8 @@ const submitForm = async () => {
           Save
         </v-btn>
 
-        <v-alert
-          v-if="errorMessage"
-          type="error"
-          density="compact"
-          variant="plain"
-          :icon="false"
-          class="mt-4"
-        >
-          {{ errorMessage }}
-        </v-alert>
+        <!-- Error message -->
+        <AppError class="mt-4" />
       </v-form>
     </v-card>
   </div>

src/runtime/components/firebase/FirebaseFileDeleteDialog.vue

@@ -153,15 +153,7 @@ async function submitForm() {
         </v-btn>
 
         <!-- Error message -->
-        <v-alert
-          v-if="errorMessage"
-          type="error"
-          density="compact"
-          variant="plain"
-          :icon="false"
-        >
-          {{ errorMessage }}
-        </v-alert>
+        <AppError />
       </v-card>
     </v-dialog>
   </span>

src/runtime/components/firebase/FirebaseFileUpload.vue

@@ -180,13 +180,6 @@ function uploadFiles() {
     @change="uploadFiles"
   />
 
-  <v-alert
-    v-if="errorMessage"
-    type="error"
-    density="compact"
-    variant="plain"
-    :icon="false"
-  >
-    {{ errorMessage }}
-  </v-alert>
+  <!-- Error message -->
+  <AppError />
 </template>

src/runtime/components/firebase/FirebaseFileUploadDialog.vue

@@ -169,17 +169,6 @@ async function submitForm() {
         >
           Cancel
         </v-btn>
-
-        <!-- Error message -->
-        <v-alert
-          v-if="errorMessage"
-          type="error"
-          density="compact"
-          variant="plain"
-          :icon="false"
-        >
-          {{ errorMessage }}
-        </v-alert>
       </v-card>
     </v-dialog>
   </span>

src/runtime/components/firebase/FirebaseListActions.vue

@@ -3,7 +3,7 @@ import type { CollectionReference } from 'firebase/firestore'
 import { mdiClockPlus, mdiPlus } from '@mdi/js'
 import { computed } from 'vue'
 import type { PropType } from 'vue'
-import { useErrorMessage, titleCase } from '#imports'
+import { titleCase } from '#imports'
 
 // Props
 const props = defineProps({
@@ -37,9 +37,6 @@ const props = defineProps({
   },
 })
 
-// App state
-const errorMessage = useErrorMessage()
-
 // Create related functionality
 const createIcon = computed(() => {
   switch (props.name) {
@@ -53,14 +50,8 @@ const createIcon = computed(() => {
 
 <template>
   <div class="d-print-none">
-    <v-alert
-      v-if="errorMessage"
-      type="error"
-      density="compact"
-      class="mb-4"
-    >
-      {{ errorMessage }}
-    </v-alert>
+    <!-- Error message -->
+    <AppError class="mb-4" />
 
     <!-- Delete -->
     <LazyFirebaseDeleteAction

src/runtime/pages/SignIn.vue

@@ -234,15 +234,8 @@ async function signinWithGoogle() {
             <v-divider class="my-2 ml-4" />
           </div>
 
-          <v-alert
-            v-if="errorMessage"
-            type="error"
-            density="compact"
-            variant="text"
-            class="mb-2 mt-n6 px-0"
-          >
-            {{ errorMessage }}
-          </v-alert>
+          <!-- Error message -->
+          <AppError class="mb-2" />
 
           <v-alert
             v-if="passwordResetMessage"

src/runtime/pages/SignUp.vue

@@ -179,15 +179,8 @@ async function signinWithGoogle() {
             <v-divider class="my-2 ml-4" />
           </div>
 
-          <v-alert
-            v-if="errorMessage"
-            type="error"
-            density="compact"
-            variant="text"
-            class="mb-2 mt-n6 px-0"
-          >
-            {{ errorMessage }}
-          </v-alert>
+          <!-- Error message -->
+          <AppError class="mb-2" />
 
           <!-- Password -->
           <v-form