sky121113
7dfe46ff9a
- 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
198 lines
9.9 KiB
TypeScript
198 lines
9.9 KiB
TypeScript
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
|
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import { Users, ArrowLeft, Check, Lock, Mail, User } from 'lucide-react';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { Input } from '@/Components/ui/input';
|
|
import { Label } from '@/Components/ui/label';
|
|
import { Checkbox } from '@/Components/ui/checkbox';
|
|
import { FormEvent } from 'react';
|
|
|
|
interface Props {
|
|
roles: Record<string, string>; // Name (ID) -> DisplayName map from pluck
|
|
}
|
|
|
|
export default function UserCreate({ roles }: Props) {
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
name: '',
|
|
email: '',
|
|
username: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
roles: [] as string[], // Role names
|
|
});
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
post(route('users.store'));
|
|
};
|
|
|
|
const toggleRole = (roleName: string) => {
|
|
if (data.roles.includes(roleName)) {
|
|
setData('roles', data.roles.filter(r => r !== roleName));
|
|
} else {
|
|
setData('roles', [...data.roles, roleName]);
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
breadcrumbs={[
|
|
{ label: '系統管理', href: '#' },
|
|
{ label: '使用者管理', href: route('users.index') },
|
|
{ label: '新增使用者', href: route('users.create'), isPage: true },
|
|
]}
|
|
>
|
|
<Head title="新增使用者" />
|
|
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Header Area */}
|
|
<div>
|
|
<Link href={route('users.index')}>
|
|
<Button
|
|
variant="outline"
|
|
type="button"
|
|
className="gap-2 button-outlined-primary mb-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
返回使用者管理
|
|
</Button>
|
|
</Link>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
|
<Users className="h-6 w-6 text-[#01ab83]" />
|
|
新增使用者
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
建立新帳號並設定初始密碼與角色
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
className="button-filled-primary"
|
|
disabled={processing}
|
|
>
|
|
<Check className="h-4 w-4 mr-2" />
|
|
建立帳號
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Basic Info */}
|
|
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
|
|
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username" className="flex items-center gap-2">
|
|
<User className="h-4 w-4" /> 使用者名稱 (登入用)
|
|
</Label>
|
|
<Input
|
|
id="username"
|
|
value={data.username}
|
|
onChange={e => setData('username', e.target.value)}
|
|
placeholder="請輸入登入帳號"
|
|
/>
|
|
{errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="flex items-center gap-2">
|
|
<User className="h-4 w-4" /> 姓名
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
value={data.name}
|
|
onChange={e => setData('name', e.target.value)}
|
|
placeholder="例如：王小明"
|
|
/>
|
|
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="flex items-center gap-2">
|
|
<Mail className="h-4 w-4" /> 電子郵件 (選填)
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={data.email}
|
|
onChange={e => setData('email', e.target.value)}
|
|
placeholder="user@example.com (可省略)"
|
|
/>
|
|
{errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Roles */}
|
|
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
|
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{Object.entries(roles).map(([roleName, displayName]) => (
|
|
<div key={roleName} className="flex items-center space-x-3 p-3 border border-gray-100 bg-gray-50/50 hover:bg-gray-100 rounded-lg transition-colors">
|
|
<Checkbox
|
|
id={`role-${roleName}`}
|
|
checked={data.roles.includes(roleName)}
|
|
onCheckedChange={() => toggleRole(roleName)}
|
|
/>
|
|
<div className="grid gap-1 leading-none">
|
|
<label
|
|
htmlFor={`role-${roleName}`}
|
|
className="text-sm font-medium leading-none cursor-pointer"
|
|
onClick={() => toggleRole(roleName)}
|
|
>
|
|
{displayName}
|
|
</label>
|
|
<p className="text-xs text-gray-500 font-mono">
|
|
{roleName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{errors.roles && <p className="text-sm text-red-500 mt-2">{errors.roles}</p>}
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
|
|
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">安全設定</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password" className="flex items-center gap-2">
|
|
<Lock className="h-4 w-4" /> 設定密碼
|
|
</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={data.password}
|
|
onChange={e => setData('password', e.target.value)}
|
|
/>
|
|
{errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password_confirmation" className="flex items-center gap-2">
|
|
<Lock className="h-4 w-4" /> 確認密碼
|
|
</Label>
|
|
<Input
|
|
id="password_confirmation"
|
|
type="password"
|
|
value={data.password_confirmation}
|
|
onChange={e => setData('password_confirmation', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|