Fix favicon and add authentication state to main page with logout/create sermon buttons

nuxt.config.ts

@@ -16,7 +16,7 @@ export default defineNuxtConfig({
         { name: 'description', content: 'Weekly sermons from New Life Christian Church' }
       ],
       link: [
-        { rel: 'icon', type: 'image/png', href: '/logos/favicon.png' },
+        { rel: 'icon', type: 'image/x-icon', href: '/logos/favicon.ico' },
         { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
         { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
         { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap' }

pages/index.vue

@@ -7,12 +7,29 @@
           <div class="flex items-center space-x-4">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </div>
-          <NuxtLink 
+          <div class="flex items-center gap-4">
-            to="/login" 
+            <template v-if="isAuthenticated">
-            class="text-sm font-medium text-blue-600 hover:text-blue-700"
+              <NuxtLink 
-          >
+                to="/admin" 
-            Admin Login
+                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
-          </NuxtLink>
+              >
+                Create New Sermon
+              </NuxtLink>
+              <button
+                @click="handleLogout"
+                class="text-sm font-medium text-red-600 hover:text-red-700"
+              >
+                Logout
+              </button>
+            </template>
+            <NuxtLink 
+              v-else
+              to="/login" 
+              class="text-sm font-medium text-blue-600 hover:text-blue-700"
+            >
+              Admin Login
+            </NuxtLink>
+          </div>
         </div>
         <div class="text-center mt-6">
           <h1 class="text-3xl font-bold text-gray-900">
@@ -73,6 +90,10 @@
 <script setup lang="ts">
 const showOlder = ref(false)
 
+// Check authentication status
+const { data: authData } = await useFetch('/api/auth/verify')
+const isAuthenticated = computed(() => authData.value?.authenticated || false)
+
 // Fetch all sermons
 const { data: allSermons } = await useFetch('/api/sermons')
 
@@ -96,4 +117,9 @@ const olderSermons = computed(() => {
     return sermonDate < threeMonthsAgo
   })
 })
+
+async function handleLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  await navigateTo('/login')
+}
 </script>