Neuaufbau des Repositories

2026-04-13 14:01:19 +02:00
parent 4a7638d5e9
commit 35b5f39843
14 changed files with 494 additions and 13 deletions
@@ -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>