feat(frontend): improve auth UX and prevent form persistence (#48)

Author: ivanskv2000

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
 import MainLayout from '@/shared/components/layout/MainLayout.vue'
 import { Toaster } from '@/shared/ui/sonner'
 import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
@@ -9,6 +9,7 @@ import { useEnhancedToast } from './shared/composables/useEnhancedToast'
 import { queryClient } from './shared/plugins/vue-query'
 
 const auth = useAuthStore()
+const route = useRoute()
 const { showError } = useEnhancedToast()
 
 const globalErrorHandler = (error: unknown) => {
@@ -43,7 +44,7 @@ window.addEventListener('message', async event => {
   <MainLayout>
     <RouterView v-slot="{ Component }">
       <Transition name="page" mode="out-in" appear>
-        <component :is="Component" />
+        <component :is="Component" :key="route.fullPath" />
       </Transition>
     </RouterView>
   </MainLayout>

frontend/src/modules/events/components/EventLinksFormField.vue

@@ -59,13 +59,15 @@ function removeLink(index: number) {
       <Input
         type="url"
         placeholder="https://..."
+        autocomplete="off"
         :model-value="link.url"
         @update:model-value="val => update(i, { url: String(val) })"
       />
 
       <!-- Label -->
       <Input
         placeholder="Label"
+        autocomplete="off"
         :model-value="link.label"
         @update:model-value="val => update(i, { label: String(val) })"
       />

frontend/src/modules/tags/components/TagsDataGrid.vue

@@ -55,6 +55,7 @@ const handleSearchKeydown = (event: KeyboardEvent) => {
       <div class="flex-1">
         <Input
           v-model="localSearchValue"
+          autocomplete="off"
           placeholder="Search tags..."
           class="max-w-xs"
           @keydown="handleSearchKeydown"

frontend/src/router/index.ts

@@ -3,6 +3,7 @@ import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
 import { routes } from './routes'
 
 const publicPages = ['/login', '/signup', '/landing', '/oauth/callback']
+const authPages = ['/login', '/signup']
 
 const router = createRouter({
   history: createWebHistory(),
@@ -19,8 +20,11 @@ const router = createRouter({
 router.beforeEach((to, _from, next) => {
   const auth = useAuthStore()
   const isPublic = publicPages.includes(to.path)
+  const isAuthPage = authPages.includes(to.path)
 
-  if (!isPublic && !auth.token) {
+  if (auth.token && isAuthPage) {
+    next({ path: '/events' })
+  } else if (!isPublic && !auth.token) {
     next({ path: '/login', query: { redirect: to.fullPath } })
   } else {
     next()

frontend/src/shared/components/data/DataTableInputFilter.vue

@@ -59,5 +59,10 @@ export default {
 </script>
 
 <template>
-  <Input v-model="inputValue" :placeholder="placeholder" @keydown="handleKeydown" />
+  <Input
+    v-model="inputValue"
+    :placeholder="placeholder"
+    @keydown="handleKeydown"
+    autocomplete="off"
+  />
 </template>