Neuaufbau des Repositories
This commit is contained in:
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import { Save, ArrowLeft } from 'lucide-vue-next';
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
role: 'user',
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.post('/admin/users', {
|
||||
onFinish: () => form.reset('password', 'password_confirmation'),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Add User" />
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<Link
|
||||
href="/admin/users"
|
||||
class="p-2 rounded-full hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<ArrowLeft class="w-5 h-5 text-gray-400" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">Add New User</h1>
|
||||
<p class="text-gray-400 text-sm">Create a new user account and assign a role.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit" class="bg-[#0f172a] rounded-2xl border border-white/5 p-8 space-y-6 shadow-xl">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-bold text-gray-300 mb-2">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
required
|
||||
/>
|
||||
<div v-if="form.errors.name" class="text-red-400 text-xs mt-1">{{ form.errors.name }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-bold text-gray-300 mb-2">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
required
|
||||
/>
|
||||
<div v-if="form.errors.email" class="text-red-400 text-xs mt-1">{{ form.errors.email }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-bold text-gray-300 mb-2">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
required
|
||||
/>
|
||||
<div v-if="form.errors.password" class="text-red-400 text-xs mt-1">{{ form.errors.password }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password_confirmation" class="block text-sm font-bold text-gray-300 mb-2">Confirm Password</label>
|
||||
<input
|
||||
id="password_confirmation"
|
||||
v-model="form.password_confirmation"
|
||||
type="password"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Role -->
|
||||
<div>
|
||||
<label for="role" class="block text-sm font-bold text-gray-300 mb-2">Role</label>
|
||||
<select
|
||||
id="role"
|
||||
v-model="form.role"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition appearance-none"
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="mod">Moderator</option>
|
||||
<option value="admin">Administrator</option>
|
||||
</select>
|
||||
<div v-if="form.errors.role" class="text-red-400 text-xs mt-1">{{ form.errors.role }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||
<Save class="w-5 h-5 relative z-10" />
|
||||
<span class="relative z-10">Save User</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import { Save, ArrowLeft } from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps<{
|
||||
user: {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
name: props.user.name,
|
||||
email: props.user.email,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
role: props.user.role,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.put(`/admin/users/${props.user.id}`, {
|
||||
onFinish: () => form.reset('password', 'password_confirmation'),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Edit User" />
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<Link
|
||||
href="/admin/users"
|
||||
class="p-2 rounded-full hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<ArrowLeft class="w-5 h-5 text-gray-400" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">Edit User</h1>
|
||||
<p class="text-gray-400 text-sm">Update account details for {{ user.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit" class="bg-[#0f172a] rounded-2xl border border-white/5 p-8 space-y-6 shadow-xl">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-bold text-gray-300 mb-2">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
required
|
||||
/>
|
||||
<div v-if="form.errors.name" class="text-red-400 text-xs mt-1">{{ form.errors.name }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-bold text-gray-300 mb-2">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
required
|
||||
/>
|
||||
<div v-if="form.errors.email" class="text-red-400 text-xs mt-1">{{ form.errors.email }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-bold text-gray-300 mb-2">Password (Leave blank to keep current)</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
/>
|
||||
<div v-if="form.errors.password" class="text-red-400 text-xs mt-1">{{ form.errors.password }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password_confirmation" class="block text-sm font-bold text-gray-300 mb-2">Confirm Password</label>
|
||||
<input
|
||||
id="password_confirmation"
|
||||
v-model="form.password_confirmation"
|
||||
type="password"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Role -->
|
||||
<div>
|
||||
<label for="role" class="block text-sm font-bold text-gray-300 mb-2">Role</label>
|
||||
<select
|
||||
id="role"
|
||||
v-model="form.role"
|
||||
class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition appearance-none"
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="mod">Moderator</option>
|
||||
<option value="admin">Administrator</option>
|
||||
</select>
|
||||
<div v-if="form.errors.role" class="text-red-400 text-xs mt-1">{{ form.errors.role }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||
<Save class="w-5 h-5 relative z-10" />
|
||||
<span class="relative z-10">Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
import { Plus, Edit2, Trash2 } from 'lucide-vue-next';
|
||||
|
||||
defineProps<{
|
||||
users: Array<{
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
created_at: string;
|
||||
}>;
|
||||
}>();
|
||||
|
||||
const form = useForm({});
|
||||
|
||||
const deleteUser = (id: number) => {
|
||||
if (confirm('Are you sure you want to delete this user?')) {
|
||||
form.delete(`/admin/users/${id}`, {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Users" />
|
||||
<AdminLayout>
|
||||
<div class="max-w-6xl mx-auto space-y-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">User Management</h1>
|
||||
<p class="text-gray-400 text-sm">Manage admin and moderator accounts</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/admin/users/create"
|
||||
class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300"
|
||||
>
|
||||
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||
<Plus class="w-5 h-5 relative z-10" />
|
||||
<span class="relative z-10">Add User</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#0f172a] rounded-2xl border border-white/5 overflow-hidden shadow-xl">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-black/20 border-b border-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
||||
<th class="p-4 font-bold">ID</th>
|
||||
<th class="p-4 font-bold">Name</th>
|
||||
<th class="p-4 font-bold">Email</th>
|
||||
<th class="p-4 font-bold">Role</th>
|
||||
<th class="p-4 font-bold text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<tr v-for="user in users" :key="user.id" class="hover:bg-white/[0.02] transition-colors">
|
||||
<td class="p-4 text-gray-500 font-mono text-sm">#{{ user.id }}</td>
|
||||
<td class="p-4 font-bold text-white">{{ user.name }}</td>
|
||||
<td class="p-4 text-gray-400">{{ user.email }}</td>
|
||||
<td class="p-4">
|
||||
<span
|
||||
:class="[
|
||||
'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider',
|
||||
user.role === 'admin' ? 'bg-red-500/20 text-red-400 border border-red-500/20' :
|
||||
user.role === 'mod' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/20' :
|
||||
'bg-gray-500/20 text-gray-400 border border-gray-500/20'
|
||||
]"
|
||||
>
|
||||
{{ user.role }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right space-x-2">
|
||||
<Link
|
||||
:href="`/admin/users/${user.id}/edit`"
|
||||
class="inline-flex p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</Link>
|
||||
<button
|
||||
@click="deleteUser(user.id)"
|
||||
class="inline-flex p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="users.length === 0">
|
||||
<td colspan="5" class="p-8 text-center text-gray-500">
|
||||
No users found.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user