User creation and management
This commit is contained in:
277
pages/users.vue
Normal file
277
pages/users.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user