feat: Implement dedicated login page and authentication middleware

pages/index.vue

@@ -23,7 +23,7 @@
           <div class="flex items-center space-x-4">
             <UButton
               v-if="!isLoggedIn"
-              @click="showLoginModal = true"
+              @click="navigateTo('/login')"
               variant="outline"
               color="primary"
             >
@@ -78,12 +78,6 @@
       </div>
     </main>
 
-    <!-- Login Modal - Only show when triggered -->
-    <LoginModal
-      v-if="showLoginModal"
-      v-model="showLoginModal"
-      @success="handleLoginSuccess"
-    />
   </div>
 </template>
 
@@ -93,7 +87,6 @@ import { format, parseISO, isAfter, subMonths } from 'date-fns'
 const timeFilter = ref('3months')
 const sermons = ref([])
 const loading = ref(true)
-const showLoginModal = ref(false)
 const isLoggedIn = ref(false)
 
 const timeOptions = [
@@ -134,9 +127,4 @@ onMounted(async () => {
 
   await loadSermons()
 })
-
-const handleLoginSuccess = () => {
-  showLoginModal.value = false
-  isLoggedIn.value = true
-}
 </script>