User creation and management

pages/index.vue

@@ -11,16 +11,24 @@
             <ClientOnly fallback-tag="div">
               <template v-if="isAuthenticated">
                 <NuxtLink 
+                  v-if="isAdmin"
                   to="/admin" 
                   class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
                 >
                   Manage Sermons
                 </NuxtLink>
+                <NuxtLink 
+                  v-if="isAdmin"
+                  to="/users" 
+                  class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-sm whitespace-nowrap"
+                >
+                  Manage Users
+                </NuxtLink>
                 <button
                   @click="handleLogout"
-                  class="text-sm font-medium text-red-600 hover:text-red-700"
+                  class="text-sm font-medium text-blue-600 hover:text-blue-700"
                 >
-                  Logout
+                  Log Out
                 </button>
               </template>
               <NuxtLink 
@@ -28,7 +36,7 @@
                 to="/login" 
                 class="text-sm font-medium text-blue-600 hover:text-blue-700"
               >
-                Admin Login
+                Log In
               </NuxtLink>
               <template #fallback>
                 <div class="h-10"></div>
@@ -108,6 +116,7 @@
 // Check authentication status
 const { data: authData } = await useFetch('/api/auth/verify')
 const isAuthenticated = computed(() => authData.value?.authenticated || false)
+const isAdmin = computed(() => authData.value?.isAdmin || false)
 
 // Fetch non-archived sermons for the most recent sermon
 const { data: activeSermons } = await useFetch('/api/sermons?includeArchived=false')