Merge pull request #25 from connorabbas/develop

Improvements

Author: connorabbas

.devcontainer/devcontainer.json

@@ -20,7 +20,8 @@
                 "hollowtree.vue-snippets",
                 "Vue.volar",
                 "bradlc.vscode-tailwindcss",
-                "shd101wyy.markdown-preview-enhanced"
+                "shd101wyy.markdown-preview-enhanced",
+                "formulahendry.auto-rename-tag"
             ],
             "settings": {
                 "terminal.integrated.shell.linux": "/bin/sh"

src/App.vue

@@ -1,12 +1,21 @@
 <script setup>
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
     <!-- Use key to re-generate the page view component on each navigation :key="$route.path" -->
     <!-- Alteratively, use a watch() on each component to re-render dynamic data as needed -->
     <Toast position="top-center" />
-    <Suspense>
-        <RouterView />
-    </Suspense>
+    <RouterView v-slot="{ Component }">
+        <Suspense timeout="0">
+            <template #default>
+                <component :is="Component" />
+            </template>
+            <template #fallback>
+                <div class="h-screen flex items-center justify-center">
+                    <ProgressSpinner />
+                </div>
+            </template>
+        </Suspense>
+    </RouterView>
 </template>

src/composables/useAxiosForm.js

@@ -25,10 +25,16 @@ export function useAxiosForm(initialData = {}) {
     };
 
     const makeRequest = async (method, url, options = {}) => {
+        options = {
+            showProgress: false,
+            ...options,
+        };
         try {
             clearErrors();
             processing.value = true;
-            progress.start();
+            if (options.showProgress) {
+                progress.start();
+            }
 
             if (options.onBefore) options.onBefore();
 
@@ -48,9 +54,10 @@ export function useAxiosForm(initialData = {}) {
         } finally {
             if (onFinishCallback) onFinishCallback();
             if (options.onFinish) options.onFinish();
-
             processing.value = false;
-            progress.done();
+            if (progress.isStarted()) {
+                progress.done();
+            }
         }
     };
 

src/middleware/verified.js

@@ -1,14 +1,11 @@
 export default async function verified({ to, from, authStore }) {
+    if (to.name === 'verifyEmail') return;
+
     if (!authStore.user) {
         await authStore.fetchUser();
     }
-    if (
-        authStore.mustVerifyEmail &&
-        new Boolean(authStore.user?.id) &&
-        authStore.user.email_verified_at === null
-    ) {
-        if (to.name !== 'verifyEmail') {
-            return { name: 'verifyEmail' };
-        }
+
+    if (authStore.mustVerifyEmail && new Boolean(authStore.user?.id) && authStore.user.email_verified_at === null) {
+        return { name: 'verifyEmail' };
     }
 }

src/router/index.js

@@ -14,28 +14,38 @@ const router = createRouter({
         {
             path: '/:pathMatch(.*)*', // 404 route not found
             name: 'NotFound',
-            component: () => import('@/views/NotFound.vue'),
+            component: () => import('@/views/error/NotFound.vue'),
         },
     ],
 });
 
+let progressTimeout = null;
 router.beforeEach(async (to, from) => {
-    progress.start();
+    progressTimeout = setTimeout(() => progress.start(), 250);
     const authStore = useAuthStore();
 
     // Run middleware pipeline
-    const context = { to, from, authStore };
-    const routeMiddleware = to.meta.middleware || [];
-    for (const middleware of routeMiddleware) {
-        const result = await middleware(context);
-        if (result) {
-            return result; // Exit and redirect if middleware returns a route
+    try {
+        const context = { to, from, authStore };
+        const routeMiddleware = to.meta.middleware || [];
+        for (const middleware of routeMiddleware) {
+            const result = await middleware(context);
+            if (result) {
+                return result; // Exit and redirect if middleware returns a route
+            }
+        }
+    } finally {
+        clearTimeout(progressTimeout);
+        if (progress.isStarted()) {
+            progress.done();
         }
     }
 });
 
 router.afterEach(() => {
-    progress.done();
+    if (progress.isStarted()) {
+        progress.done();
+    }
 });
 
 export default router;

src/stores/auth.js

@@ -45,6 +45,7 @@ export const useAuthStore = defineStore('auth', () => {
     const { post: submitLogoutForm } = useAxiosForm();
     function logout() {
         return submitLogoutForm('/logout', {
+            showProgress: true,
             onSuccess: (response) => {
                 user.value = null;
                 router.push({ name: 'welcome' });

src/views/auth/ForgotPassword.vue

@@ -30,7 +30,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return submittingRequest.value || authStore.fetchingCsrfToken.value;
+    return submittingRequest.value || authStore.fetchingCsrfToken;
 });
 
 onMounted(() => {

src/views/auth/Login.vue

@@ -43,7 +43,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return loggingIn.value || authStore.fetchingCsrfToken.value;
+    return loggingIn.value || authStore.fetchingCsrfToken;
 });
 
 onMounted(() => {

src/views/auth/Register.vue

@@ -33,7 +33,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return registering.value || authStore.fetchingCsrfToken.value;
+    return registering.value || authStore.fetchingCsrfToken;
 });
 
 onMounted(() => {
@@ -123,7 +123,7 @@ onMounted(() => {
             <div class="flex justify-end items-center pt-2">
                 <RouterLink
                     :to="{ name: 'login' }"
-                    class="mr-4 text-muted-color underline text-muted-color hover:text-color"
+                    class="mr-4 underline text-muted-color hover:text-color"
                 >
                     Already registered?
                 </RouterLink>

src/views/auth/ResetPassword.vue

@@ -45,7 +45,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return resetting.value || authStore.fetchingCsrfToken.value;
+    return resetting.value || authStore.fetchingCsrfToken;
 });
 
 onMounted(() => {