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')

pages/login.vue

@@ -6,12 +6,12 @@
         <NuxtLink to="/">
           <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4 cursor-pointer hover:opacity-80" />
         </NuxtLink>
-        <h2 class="text-3xl font-bold text-gray-900">Admin Login</h2>
-        <p class="mt-2 text-sm text-gray-600">Sign in to manage sermons</p>
+        <h2 class="text-3xl font-bold text-gray-900">{{ isRegistering ? 'Create Account' : 'Log In' }}</h2>
+        <p class="mt-2 text-sm text-gray-600">{{ isRegistering ? 'Create a new account' : 'Sign in to your account' }}</p>
       </div>
 
       <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
-        <form @submit.prevent="handleLogin" class="space-y-6">
+        <form @submit.prevent="isRegistering ? handleRegister() : handleLogin()" class="space-y-6">
           <div>
             <label for="username" class="block text-sm font-medium text-gray-700">
               Username
@@ -38,6 +38,30 @@
               required
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
             />
+            
+            <!-- Password Requirements (only show when registering) -->
+            <div v-if="isRegistering && password.length > 0" class="mt-2 space-y-1 text-xs">
+              <div :class="passwordRequirements.minLength ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.minLength">✓</span>
+                <span v-else>○</span>
+                At least 8 characters
+              </div>
+              <div :class="passwordRequirements.hasUppercase ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.hasUppercase">✓</span>
+                <span v-else>○</span>
+                One uppercase letter
+              </div>
+              <div :class="passwordRequirements.hasLowercase ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.hasLowercase">✓</span>
+                <span v-else>○</span>
+                One lowercase letter
+              </div>
+              <div :class="passwordRequirements.hasNumberOrSymbol ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.hasNumberOrSymbol">✓</span>
+                <span v-else>○</span>
+                One number or symbol
+              </div>
+            </div>
           </div>
 
           <div v-if="error" class="text-red-600 text-sm">
@@ -49,14 +73,22 @@
             :disabled="loading"
             class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
           >
-            {{ loading ? 'Signing in...' : 'Sign in' }}
+            {{ loading ? (isRegistering ? 'Creating account...' : 'Signing in...') : (isRegistering ? 'Create Account' : 'Sign In') }}
           </button>
         </form>
 
-        <div class="mt-6 text-center">
-          <NuxtLink to="/" class="text-sm text-blue-600 hover:text-blue-700">
-            ← Back to Sermons
-          </NuxtLink>
+        <div class="mt-6 text-center space-y-3">
+          <button
+            @click="toggleMode"
+            class="text-sm text-blue-600 hover:text-blue-700 font-medium"
+          >
+            {{ isRegistering ? 'Already have an account? Sign in' : "Don't have an account? Create one" }}
+          </button>
+          <div>
+            <NuxtLink to="/" class="text-sm text-gray-600 hover:text-gray-700">
+              ← Back to Sermons
+            </NuxtLink>
+          </div>
         </div>
       </div>
       </div>
@@ -71,6 +103,28 @@ const username = ref('')
 const password = ref('')
 const error = ref('')
 const loading = ref(false)
+const isRegistering = ref(false)
+
+const passwordRequirements = computed(() => ({
+  minLength: password.value.length >= 8,
+  hasUppercase: /[A-Z]/.test(password.value),
+  hasLowercase: /[a-z]/.test(password.value),
+  hasNumberOrSymbol: /[0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password.value)
+}))
+
+const isPasswordValid = computed(() => {
+  return passwordRequirements.value.minLength &&
+         passwordRequirements.value.hasUppercase &&
+         passwordRequirements.value.hasLowercase &&
+         passwordRequirements.value.hasNumberOrSymbol
+})
+
+function toggleMode() {
+  isRegistering.value = !isRegistering.value
+  error.value = ''
+  username.value = ''
+  password.value = ''
+}
 
 async function handleLogin() {
   error.value = ''
@@ -86,7 +140,7 @@ async function handleLogin() {
     })
 
     if (response.success) {
-      await navigateTo('/admin')
+      await navigateTo('/')
     }
   } catch (e: any) {
     error.value = e.data?.message || 'Invalid credentials'
@@ -94,4 +148,34 @@ async function handleLogin() {
     loading.value = false
   }
 }
+
+async function handleRegister() {
+  error.value = ''
+  
+  // Validate password requirements
+  if (!isPasswordValid.value) {
+    error.value = 'Please meet all password requirements'
+    return
+  }
+  
+  loading.value = true
+
+  try {
+    const response = await $fetch('/api/auth/register', {
+      method: 'POST',
+      body: {
+        username: username.value,
+        password: password.value
+      }
+    })
+
+    if (response.success) {
+      await navigateTo('/')
+    }
+  } catch (e: any) {
+    error.value = e.data?.message || 'Registration failed'
+  } finally {
+    loading.value = false
+  }
+}
 </script>

pages/users.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div class="flex items-center justify-between">
+          <h1 class="text-3xl font-bold text-gray-900">User Management</h1>
+          <NuxtLink to="/" class="text-sm font-medium text-blue-600 hover:text-blue-700">
+            ← Back to Home
+          </NuxtLink>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div class="bg-white shadow-lg rounded-lg overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200">
+          <h2 class="text-xl font-semibold text-gray-900">All Users</h2>
+        </div>
+
+        <div v-if="loading" class="p-6 text-center">
+          <p class="text-gray-500">Loading users...</p>
+        </div>
+
+        <div v-else-if="error" class="p-6">
+          <p class="text-red-600">{{ error }}</p>
+        </div>
+
+        <div v-else class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Username
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Role
+                </th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="user in users" :key="user.id">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">{{ user.username }}</div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span 
+                    :class="user.is_admin ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'"
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
+                  >
+                    {{ user.is_admin ? 'Admin' : 'User' }}
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                  <button
+                    v-if="!isCurrentUser(user)"
+                    @click="toggleRole(user)"
+                    class="text-blue-600 hover:text-blue-900"
+                  >
+                    {{ user.is_admin ? 'Make User' : 'Make Admin' }}
+                  </button>
+                  <button
+                    @click="openResetPasswordModal(user)"
+                    class="text-yellow-600 hover:text-yellow-900"
+                  >
+                    Reset Password
+                  </button>
+                  <button
+                    v-if="!isCurrentUser(user)"
+                    @click="confirmDelete(user)"
+                    class="text-red-600 hover:text-red-900"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+
+    <!-- Reset Password Modal -->
+    <div v-if="showPasswordModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" @click.self="closePasswordModal">
+      <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div class="mt-3">
+          <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">
+            Reset Password for {{ selectedUser?.username }}
+          </h3>
+          <div class="mt-2">
+            <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-2">
+              New Password
+            </label>
+            <input
+              id="newPassword"
+              v-model="newPassword"
+              type="password"
+              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+            
+            <!-- Password Requirements -->
+            <div v-if="newPassword.length > 0" class="mt-2 space-y-1 text-xs">
+              <div :class="passwordRequirements.minLength ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.minLength">✓</span>
+                <span v-else>○</span>
+                At least 8 characters
+              </div>
+              <div :class="passwordRequirements.hasUppercase ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.hasUppercase">✓</span>
+                <span v-else>○</span>
+                One uppercase letter
+              </div>
+              <div :class="passwordRequirements.hasLowercase ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.hasLowercase">✓</span>
+                <span v-else>○</span>
+                One lowercase letter
+              </div>
+              <div :class="passwordRequirements.hasNumberOrSymbol ? 'text-green-600' : 'text-gray-500'">
+                <span v-if="passwordRequirements.hasNumberOrSymbol">✓</span>
+                <span v-else>○</span>
+                One number or symbol
+              </div>
+            </div>
+
+            <div v-if="passwordError" class="mt-2 text-red-600 text-sm">
+              {{ passwordError }}
+            </div>
+          </div>
+          <div class="flex gap-3 mt-4">
+            <button
+              @click="resetPassword"
+              :disabled="!isPasswordValid"
+              class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Reset Password
+            </button>
+            <button
+              @click="closePasswordModal"
+              class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth'
+})
+
+interface User {
+  id: number
+  username: string
+  is_admin: number
+}
+
+const { data: authData } = await useFetch('/api/auth/verify')
+const currentUsername = computed(() => authData.value?.username)
+
+const users = ref<User[]>([])
+const loading = ref(true)
+const error = ref('')
+const showPasswordModal = ref(false)
+const selectedUser = ref<User | null>(null)
+const newPassword = ref('')
+const passwordError = ref('')
+
+const passwordRequirements = computed(() => ({
+  minLength: newPassword.value.length >= 8,
+  hasUppercase: /[A-Z]/.test(newPassword.value),
+  hasLowercase: /[a-z]/.test(newPassword.value),
+  hasNumberOrSymbol: /[0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPassword.value)
+}))
+
+const isPasswordValid = computed(() => {
+  return passwordRequirements.value.minLength &&
+         passwordRequirements.value.hasUppercase &&
+         passwordRequirements.value.hasLowercase &&
+         passwordRequirements.value.hasNumberOrSymbol
+})
+
+function isCurrentUser(user: User) {
+  return user.username === currentUsername.value
+}
+
+async function loadUsers() {
+  loading.value = true
+  error.value = ''
+  try {
+    const data = await $fetch<User[]>('/api/users')
+    users.value = data
+  } catch (e: any) {
+    error.value = e.data?.message || 'Failed to load users'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function toggleRole(user: User) {
+  const newRole = user.is_admin ? 'User' : 'Admin'
+  if (!confirm(`Are you sure you want to make ${user.username} a ${newRole}?`)) {
+    return
+  }
+
+  try {
+    await $fetch(`/api/users/role/${user.id}`, {
+      method: 'PUT',
+      body: { isAdmin: !user.is_admin }
+    })
+    await loadUsers()
+  } catch (e: any) {
+    alert(e.data?.message || 'Failed to update user role')
+  }
+}
+
+function openResetPasswordModal(user: User) {
+  selectedUser.value = user
+  newPassword.value = ''
+  passwordError.value = ''
+  showPasswordModal.value = true
+}
+
+function closePasswordModal() {
+  showPasswordModal.value = false
+  selectedUser.value = null
+  newPassword.value = ''
+  passwordError.value = ''
+}
+
+async function resetPassword() {
+  if (!selectedUser.value || !isPasswordValid.value) {
+    return
+  }
+
+  passwordError.value = ''
+
+  try {
+    await $fetch(`/api/users/password/${selectedUser.value.id}`, {
+      method: 'PUT',
+      body: { newPassword: newPassword.value }
+    })
+    alert(`Password reset successfully for ${selectedUser.value.username}`)
+    closePasswordModal()
+  } catch (e: any) {
+    passwordError.value = e.data?.message || 'Failed to reset password'
+  }
+}
+
+async function confirmDelete(user: User) {
+  if (!confirm(`Are you sure you want to delete ${user.username}? This action cannot be undone.`)) {
+    return
+  }
+
+  try {
+    await $fetch(`/api/users/delete/${user.id}`, {
+      method: 'DELETE'
+    })
+    await loadUsers()
+  } catch (e: any) {
+    alert(e.data?.message || 'Failed to delete user')
+  }
+}
+
+onMounted(() => {
+  loadUsers()
+})
+</script>