Add admin user edit flow
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import PasswordInput from '@/components/PasswordInput.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { edit, index, save } from '@/routes/admin/users';
|
||||
import type { AdminUserEditPageProps, BreadcrumbItem } from '@/types';
|
||||
|
||||
const props = defineProps<AdminUserEditPageProps>();
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'User management',
|
||||
href: index(),
|
||||
},
|
||||
{
|
||||
title: 'Edit user',
|
||||
href: edit(props.user.id),
|
||||
},
|
||||
];
|
||||
|
||||
const form = useForm({
|
||||
name: props.user.name,
|
||||
email: props.user.email,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
must_change_password_on_next_login:
|
||||
props.user.must_change_password_on_next_login,
|
||||
});
|
||||
|
||||
const submit = (): void => {
|
||||
form.patch(save(props.user.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbs">
|
||||
<Head :title="`Edit ${user.name}`" />
|
||||
|
||||
<div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
|
||||
<Heading
|
||||
:title="`Edit ${user.name}`"
|
||||
description="Update user details, reset the password if needed, and control whether the user must change it on next login."
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>User details</CardTitle>
|
||||
<CardDescription>
|
||||
Leave the password fields empty if the current password
|
||||
should stay unchanged.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form class="space-y-6" @submit.prevent="submit">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="name"
|
||||
placeholder="Jane Admin"
|
||||
/>
|
||||
<InputError :message="form.errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="jane@example.com"
|
||||
/>
|
||||
<InputError :message="form.errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">New password</Label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Leave blank to keep current password"
|
||||
/>
|
||||
<InputError :message="form.errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password_confirmation"
|
||||
>Confirm new password</Label
|
||||
>
|
||||
<PasswordInput
|
||||
id="password_confirmation"
|
||||
v-model="form.password_confirmation"
|
||||
autocomplete="new-password"
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
<InputError
|
||||
:message="form.errors.password_confirmation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label
|
||||
for="must_change_password_on_next_login"
|
||||
class="flex items-start gap-3 rounded-lg border px-4 py-3"
|
||||
>
|
||||
<input
|
||||
id="must_change_password_on_next_login"
|
||||
v-model="form.must_change_password_on_next_login"
|
||||
type="checkbox"
|
||||
class="border-input text-primary focus:ring-ring mt-0.5 size-4 rounded"
|
||||
/>
|
||||
<span class="space-y-1">
|
||||
<span class="block font-medium">
|
||||
Must change password on next login
|
||||
</span>
|
||||
<span class="text-muted-foreground block text-sm">
|
||||
Keep the user locked to the security settings page until they save a new password.
|
||||
</span>
|
||||
</span>
|
||||
</Label>
|
||||
<InputError
|
||||
:message="form.errors.must_change_password_on_next_login"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<Button type="submit" :disabled="form.processing">
|
||||
Save user
|
||||
</Button>
|
||||
|
||||
<Button as-child variant="outline">
|
||||
<Link :href="index()">Cancel</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head, Link } from '@inertiajs/vue3';
|
||||
import { FolderPlus, KeyRound, Shield, UserPlus, Users } from 'lucide-vue-next';
|
||||
import { FolderPlus, KeyRound, Pencil, Shield, UserPlus, Users } from 'lucide-vue-next';
|
||||
import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -13,7 +13,11 @@ import {
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { create as createAdminUser, index as adminUsers } from '@/routes/admin/users';
|
||||
import {
|
||||
create as createAdminUser,
|
||||
edit as editAdminUser,
|
||||
index as adminUsers,
|
||||
} from '@/routes/admin/users';
|
||||
import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
|
||||
|
||||
const props = defineProps<AdminUsersPageProps>();
|
||||
@@ -166,48 +170,57 @@ const hasPermission = (actorId: number, permission: string) =>
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex justify-end">
|
||||
<Form
|
||||
v-bind="
|
||||
UserManagementController.update.form(
|
||||
user.id,
|
||||
)
|
||||
"
|
||||
class="flex flex-wrap justify-end gap-3"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<label
|
||||
v-for="option in permissionOptions"
|
||||
:key="`${user.id}-${option.value}`"
|
||||
class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions[]"
|
||||
:value="option.value"
|
||||
:checked="
|
||||
hasPermission(
|
||||
user.id,
|
||||
option.value,
|
||||
)
|
||||
"
|
||||
class="border-input text-primary focus:ring-ring size-4 rounded"
|
||||
/>
|
||||
<span>{{
|
||||
option.label
|
||||
}}</span>
|
||||
</label>
|
||||
|
||||
<div class="w-full sm:hidden" />
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:disabled="processing"
|
||||
>
|
||||
Save
|
||||
<div class="flex flex-wrap justify-end gap-3">
|
||||
<Button as-child size="sm" variant="outline">
|
||||
<Link :href="editAdminUser(user.id)">
|
||||
<Pencil class="size-4" />
|
||||
Edit
|
||||
</Link>
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<Form
|
||||
v-bind="
|
||||
UserManagementController.update.form(
|
||||
user.id,
|
||||
)
|
||||
"
|
||||
class="flex flex-wrap justify-end gap-3"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<label
|
||||
v-for="option in permissionOptions"
|
||||
:key="`${user.id}-${option.value}`"
|
||||
class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions[]"
|
||||
:value="option.value"
|
||||
:checked="
|
||||
hasPermission(
|
||||
user.id,
|
||||
option.value,
|
||||
)
|
||||
"
|
||||
class="border-input text-primary focus:ring-ring size-4 rounded"
|
||||
/>
|
||||
<span>{{
|
||||
option.label
|
||||
}}</span>
|
||||
</label>
|
||||
|
||||
<div class="w-full sm:hidden" />
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:disabled="processing"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user