162 lines
6.3 KiB
Vue
162 lines
6.3 KiB
Vue
<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>
|