311 lines
10 KiB
Vue
311 lines
10 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50 flex flex-col">
|
|
<!-- 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 mb-4">
|
|
<NuxtLink to="/">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
|
|
</NuxtLink>
|
|
<div class="flex items-center gap-4">
|
|
<NuxtLink
|
|
to="/"
|
|
class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
|
|
>
|
|
Home
|
|
</NuxtLink>
|
|
<button
|
|
@click="handleLogout"
|
|
class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
|
|
>
|
|
Log Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-gray-900">Manage Users</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 w-full">
|
|
<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">
|
|
First Name
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Last Name
|
|
</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">
|
|
<div class="text-sm text-gray-900">{{ user.first_name || '-' }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-900">{{ user.last_name || '-' }}</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">
|
|
<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
|
|
first_name?: string
|
|
last_name?: 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')
|
|
}
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await $fetch('/api/auth/logout', { method: 'POST' })
|
|
await navigateTo('/login')
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadUsers()
|
|
})
|
|
</script>
|