mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
9c5e38b594
Sweep 30 files: text/bg/border/ring/from/to/via/fill/stroke/shadow/divide/decoration/ outline/placeholder-red-N → -error-N. All red usages were semantically error/danger (no brand red), so tokens now flow through the design-system CSS variables and respond to palette overrides.
777 lines
27 KiB
TypeScript
777 lines
27 KiB
TypeScript
import { useState, useCallback, useMemo } from 'react';
|
|
import { useNavigate, useParams } from 'react-router';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { rbacApi, AccessPolicy, CreatePolicyPayload, UpdatePolicyPayload } from '@/api/rbac';
|
|
import { AdminBackButton } from '@/components/admin';
|
|
|
|
// === Types ===
|
|
|
|
interface PolicyConditions {
|
|
time_range?: { start: string; end: string };
|
|
ip_whitelist?: string[];
|
|
rate_limit?: number;
|
|
weekdays?: number[];
|
|
}
|
|
|
|
interface PolicyFormData {
|
|
name: string;
|
|
description: string;
|
|
effect: 'allow' | 'deny';
|
|
resource: string;
|
|
actions: string[];
|
|
role_id: number | null;
|
|
priority: number;
|
|
conditions: PolicyConditions;
|
|
conditionsEnabled: {
|
|
time_range: boolean;
|
|
ip_whitelist: boolean;
|
|
rate_limit: boolean;
|
|
weekdays: boolean;
|
|
};
|
|
}
|
|
|
|
const INITIAL_FORM: PolicyFormData = {
|
|
name: '',
|
|
description: '',
|
|
effect: 'allow',
|
|
resource: '',
|
|
actions: [],
|
|
role_id: null,
|
|
priority: 0,
|
|
conditions: {
|
|
time_range: { start: '09:00', end: '18:00' },
|
|
ip_whitelist: [],
|
|
rate_limit: 100,
|
|
weekdays: [1, 2, 3, 4, 5],
|
|
},
|
|
conditionsEnabled: {
|
|
time_range: false,
|
|
ip_whitelist: false,
|
|
rate_limit: false,
|
|
weekdays: false,
|
|
},
|
|
};
|
|
|
|
// === Helpers ===
|
|
|
|
function parseConditions(raw: Record<string, unknown>): PolicyConditions {
|
|
const result: PolicyConditions = {};
|
|
|
|
if (raw.time_range && typeof raw.time_range === 'object') {
|
|
const tr = raw.time_range as Record<string, unknown>;
|
|
if (typeof tr.start === 'string' && typeof tr.end === 'string') {
|
|
result.time_range = { start: tr.start, end: tr.end };
|
|
}
|
|
}
|
|
|
|
if (Array.isArray(raw.ip_whitelist)) {
|
|
result.ip_whitelist = raw.ip_whitelist.filter((ip): ip is string => typeof ip === 'string');
|
|
}
|
|
|
|
if (typeof raw.rate_limit === 'number') {
|
|
result.rate_limit = raw.rate_limit;
|
|
}
|
|
|
|
if (Array.isArray(raw.weekdays)) {
|
|
result.weekdays = raw.weekdays.filter((d): d is number => typeof d === 'number');
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function buildConditionsPayload(
|
|
conditions: PolicyConditions,
|
|
enabled: PolicyFormData['conditionsEnabled'],
|
|
): Record<string, unknown> {
|
|
const result: Record<string, unknown> = {};
|
|
|
|
if (enabled.time_range && conditions.time_range) {
|
|
result.time_range = conditions.time_range;
|
|
}
|
|
if (enabled.ip_whitelist && conditions.ip_whitelist && conditions.ip_whitelist.length > 0) {
|
|
result.ip_whitelist = conditions.ip_whitelist;
|
|
}
|
|
if (enabled.rate_limit && conditions.rate_limit !== undefined) {
|
|
result.rate_limit = conditions.rate_limit;
|
|
}
|
|
if (enabled.weekdays && conditions.weekdays && conditions.weekdays.length > 0) {
|
|
result.weekdays = conditions.weekdays;
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
// === Sub-components ===
|
|
|
|
interface IpTagInputProps {
|
|
values: string[];
|
|
onChange: (values: string[]) => void;
|
|
}
|
|
|
|
function IpTagInput({ values, onChange }: IpTagInputProps) {
|
|
const { t } = useTranslation();
|
|
const [inputValue, setInputValue] = useState('');
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' || e.key === ',') {
|
|
e.preventDefault();
|
|
const trimmed = inputValue.trim().replace(/,+$/, '');
|
|
if (trimmed && !values.includes(trimmed)) {
|
|
onChange([...values, trimmed]);
|
|
}
|
|
setInputValue('');
|
|
} else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
|
|
onChange(values.slice(0, -1));
|
|
}
|
|
},
|
|
[inputValue, values, onChange],
|
|
);
|
|
|
|
const removeIp = useCallback(
|
|
(ip: string) => {
|
|
onChange(values.filter((v) => v !== ip));
|
|
},
|
|
[values, onChange],
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-1.5 rounded-lg border border-dark-600 bg-dark-900 px-3 py-2">
|
|
{values.map((ip) => (
|
|
<span
|
|
key={ip}
|
|
className="inline-flex items-center gap-1 rounded-md bg-dark-700 px-2 py-0.5 text-xs text-dark-200"
|
|
>
|
|
{ip}
|
|
<button
|
|
type="button"
|
|
onClick={() => removeIp(ip)}
|
|
className="text-dark-400 transition-colors hover:text-dark-200"
|
|
aria-label={t('admin.policies.conditions.removeIp', { ip })}
|
|
>
|
|
<svg
|
|
className="h-3 w-3"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
))}
|
|
<input
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="min-w-[120px] flex-1 bg-transparent text-sm text-dark-100 placeholder-dark-500 outline-none"
|
|
placeholder={values.length === 0 ? t('admin.policies.conditions.ipPlaceholder') : ''}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ConditionToggleProps {
|
|
label: string;
|
|
enabled: boolean;
|
|
onToggle: () => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function ConditionToggle({ label, enabled, onToggle, children }: ConditionToggleProps) {
|
|
return (
|
|
<div className="rounded-lg border border-dark-700/50 bg-dark-800/30">
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
className="flex w-full items-center justify-between px-3 py-2"
|
|
>
|
|
<span className="text-sm font-medium text-dark-200">{label}</span>
|
|
<div
|
|
className={`relative h-5 w-9 rounded-full transition-colors ${
|
|
enabled ? 'bg-accent-500' : 'bg-dark-600'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
|
|
enabled ? 'translate-x-4' : 'translate-x-0.5'
|
|
}`}
|
|
/>
|
|
</div>
|
|
</button>
|
|
{enabled && <div className="border-t border-dark-700/50 px-3 py-2.5">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// === Main Page ===
|
|
|
|
export default function AdminPolicyEdit() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { id } = useParams<{ id: string }>();
|
|
const queryClient = useQueryClient();
|
|
const isEdit = !!id;
|
|
|
|
const [formData, setFormData] = useState<PolicyFormData>(INITIAL_FORM);
|
|
const [formError, setFormError] = useState<string | null>(null);
|
|
|
|
// Fetch policy for editing
|
|
const { isLoading: isLoadingPolicy } = useQuery({
|
|
queryKey: ['admin-policy', id],
|
|
queryFn: () => rbacApi.getPolicies(),
|
|
enabled: isEdit,
|
|
select: useCallback(
|
|
(policies: AccessPolicy[]) => {
|
|
const policy = policies.find((p) => p.id === Number(id));
|
|
if (policy) {
|
|
const parsed = parseConditions(policy.conditions);
|
|
const actions = Array.isArray(policy.actions) ? policy.actions : [];
|
|
|
|
setFormData({
|
|
name: policy.name,
|
|
description: policy.description ?? '',
|
|
effect: policy.effect,
|
|
resource: policy.resource,
|
|
actions,
|
|
role_id: policy.role_id ?? null,
|
|
priority: policy.priority,
|
|
conditions: {
|
|
time_range: parsed.time_range ?? { start: '09:00', end: '18:00' },
|
|
ip_whitelist: parsed.ip_whitelist ?? [],
|
|
rate_limit: parsed.rate_limit ?? 100,
|
|
weekdays: parsed.weekdays ?? [1, 2, 3, 4, 5],
|
|
},
|
|
conditionsEnabled: {
|
|
time_range: !!parsed.time_range,
|
|
ip_whitelist: !!parsed.ip_whitelist && parsed.ip_whitelist.length > 0,
|
|
rate_limit: parsed.rate_limit !== undefined,
|
|
weekdays: !!parsed.weekdays && parsed.weekdays.length > 0,
|
|
},
|
|
});
|
|
}
|
|
return policy;
|
|
},
|
|
[id],
|
|
),
|
|
});
|
|
|
|
const { data: roles } = useQuery({
|
|
queryKey: ['admin-roles'],
|
|
queryFn: rbacApi.getRoles,
|
|
});
|
|
|
|
const { data: permissionRegistry } = useQuery({
|
|
queryKey: ['admin-permission-registry'],
|
|
queryFn: rbacApi.getPermissionRegistry,
|
|
});
|
|
|
|
// Mutations
|
|
const createMutation = useMutation({
|
|
mutationFn: (payload: CreatePolicyPayload) => rbacApi.createPolicy(payload),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-policies'] });
|
|
navigate('/admin/policies');
|
|
},
|
|
onError: () => {
|
|
setFormError(t('admin.policies.errors.createFailed'));
|
|
},
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ policyId, payload }: { policyId: number; payload: UpdatePolicyPayload }) =>
|
|
rbacApi.updatePolicy(policyId, payload),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-policies'] });
|
|
navigate('/admin/policies');
|
|
},
|
|
onError: () => {
|
|
setFormError(t('admin.policies.errors.updateFailed'));
|
|
},
|
|
});
|
|
|
|
// Derived data
|
|
const selectedResourceActions = useMemo(() => {
|
|
if (!formData.resource || !permissionRegistry) return [];
|
|
const section = permissionRegistry.find((s) => s.section === formData.resource);
|
|
return section?.actions ?? [];
|
|
}, [formData.resource, permissionRegistry]);
|
|
|
|
// Handlers
|
|
const handleToggleAction = useCallback((action: string) => {
|
|
setFormData((prev) => {
|
|
const has = prev.actions.includes(action);
|
|
return {
|
|
...prev,
|
|
actions: has ? prev.actions.filter((a) => a !== action) : [...prev.actions, action],
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
const handleResourceChange = useCallback((resource: string) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
resource,
|
|
actions: [],
|
|
}));
|
|
}, []);
|
|
|
|
const handleSubmit = useCallback(
|
|
(e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setFormError(null);
|
|
|
|
if (!formData.name.trim()) {
|
|
setFormError(t('admin.policies.errors.nameRequired'));
|
|
return;
|
|
}
|
|
if (!formData.resource) {
|
|
setFormError(t('admin.policies.errors.resourceRequired'));
|
|
return;
|
|
}
|
|
if (formData.actions.length === 0) {
|
|
setFormError(t('admin.policies.errors.actionsRequired'));
|
|
return;
|
|
}
|
|
|
|
const conditionsPayload = buildConditionsPayload(
|
|
formData.conditions,
|
|
formData.conditionsEnabled,
|
|
);
|
|
|
|
if (isEdit) {
|
|
const payload: UpdatePolicyPayload = {
|
|
name: formData.name.trim(),
|
|
description: formData.description.trim() || null,
|
|
effect: formData.effect,
|
|
resource: formData.resource,
|
|
actions: formData.actions,
|
|
conditions: conditionsPayload,
|
|
priority: formData.priority,
|
|
role_id: formData.role_id,
|
|
};
|
|
updateMutation.mutate({ policyId: Number(id), payload });
|
|
} else {
|
|
const payload: CreatePolicyPayload = {
|
|
name: formData.name.trim(),
|
|
description: formData.description.trim() || null,
|
|
effect: formData.effect,
|
|
resource: formData.resource,
|
|
actions: formData.actions,
|
|
conditions: conditionsPayload,
|
|
priority: formData.priority,
|
|
role_id: formData.role_id,
|
|
};
|
|
createMutation.mutate(payload);
|
|
}
|
|
},
|
|
[formData, isEdit, id, createMutation, updateMutation, t],
|
|
);
|
|
|
|
const isSaving = createMutation.isPending || updateMutation.isPending;
|
|
|
|
// Loading state
|
|
if (isEdit && isLoadingPolicy) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="animate-fade-in space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<AdminBackButton to="/admin/policies" />
|
|
<div>
|
|
<h1 className="text-xl font-semibold text-dark-100">
|
|
{isEdit ? t('admin.policies.modal.editTitle') : t('admin.policies.modal.createTitle')}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Basic info */}
|
|
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
|
|
<div className="space-y-4">
|
|
{/* Name */}
|
|
<div>
|
|
<label htmlFor="policy-name" className="mb-1 block text-sm font-medium text-dark-200">
|
|
{t('admin.policies.form.name')}
|
|
</label>
|
|
<input
|
|
id="policy-name"
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
|
|
className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 placeholder-dark-500 outline-none transition-colors focus:border-accent-500"
|
|
placeholder={t('admin.policies.form.namePlaceholder')}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label
|
|
htmlFor="policy-description"
|
|
className="mb-1 block text-sm font-medium text-dark-200"
|
|
>
|
|
{t('admin.policies.form.description')}
|
|
</label>
|
|
<textarea
|
|
id="policy-description"
|
|
value={formData.description}
|
|
onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
|
|
className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 placeholder-dark-500 outline-none transition-colors focus:border-accent-500"
|
|
placeholder={t('admin.policies.form.descriptionPlaceholder')}
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
|
|
{/* Effect toggle */}
|
|
<div>
|
|
<label className="mb-1 block text-sm font-medium text-dark-200">
|
|
{t('admin.policies.form.effect')}
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData((prev) => ({ ...prev, effect: 'allow' }))}
|
|
className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
|
|
formData.effect === 'allow'
|
|
? 'border-success-500/50 bg-success-500/10 text-success-400'
|
|
: 'border-dark-600 bg-dark-900 text-dark-400 hover:border-dark-500'
|
|
}`}
|
|
>
|
|
{t('admin.policies.effectAllow')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData((prev) => ({ ...prev, effect: 'deny' }))}
|
|
className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
|
|
formData.effect === 'deny'
|
|
? 'border-error-500/50 bg-error-500/10 text-error-400'
|
|
: 'border-dark-600 bg-dark-900 text-dark-400 hover:border-dark-500'
|
|
}`}
|
|
>
|
|
{t('admin.policies.effectDeny')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resource & Actions */}
|
|
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
|
|
<div className="space-y-4">
|
|
{/* Resource dropdown */}
|
|
<div>
|
|
<label
|
|
htmlFor="policy-resource"
|
|
className="mb-1 block text-sm font-medium text-dark-200"
|
|
>
|
|
{t('admin.policies.form.resource')}
|
|
</label>
|
|
<select
|
|
id="policy-resource"
|
|
value={formData.resource}
|
|
onChange={(e) => handleResourceChange(e.target.value)}
|
|
className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
|
|
>
|
|
<option value="">{t('admin.policies.form.selectResource')}</option>
|
|
{permissionRegistry?.map((section) => (
|
|
<option key={section.section} value={section.section}>
|
|
{t(`admin.roles.form.permissionSections.${section.section}`, section.section)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Actions checkboxes */}
|
|
{formData.resource && selectedResourceActions.length > 0 && (
|
|
<div>
|
|
<label className="mb-1 block text-sm font-medium text-dark-200">
|
|
{t('admin.policies.form.actions')}
|
|
</label>
|
|
<div className="flex flex-wrap gap-2 rounded-lg border border-dark-600 bg-dark-900/50 p-3">
|
|
{selectedResourceActions.map((action) => {
|
|
const selected = formData.actions.includes(action);
|
|
return (
|
|
<button
|
|
key={action}
|
|
type="button"
|
|
onClick={() => handleToggleAction(action)}
|
|
className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
|
|
selected
|
|
? 'bg-accent-500/20 text-accent-400'
|
|
: 'bg-dark-700/50 text-dark-400 hover:bg-dark-700 hover:text-dark-300'
|
|
}`}
|
|
aria-pressed={selected}
|
|
>
|
|
{t(`admin.roles.form.permissionActions.${action}`, action)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Role dropdown */}
|
|
<div>
|
|
<label htmlFor="policy-role" className="mb-1 block text-sm font-medium text-dark-200">
|
|
{t('admin.policies.form.role')}
|
|
</label>
|
|
<select
|
|
id="policy-role"
|
|
value={formData.role_id ?? ''}
|
|
onChange={(e) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
role_id: e.target.value ? Number(e.target.value) : null,
|
|
}))
|
|
}
|
|
className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
|
|
>
|
|
<option value="">{t('admin.policies.form.globalOption')}</option>
|
|
{roles?.map((role) => (
|
|
<option key={role.id} value={role.id}>
|
|
{role.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="mt-1 text-xs text-dark-500">{t('admin.policies.form.roleHint')}</p>
|
|
</div>
|
|
|
|
{/* Priority */}
|
|
<div>
|
|
<label
|
|
htmlFor="policy-priority"
|
|
className="mb-1 block text-sm font-medium text-dark-200"
|
|
>
|
|
{t('admin.policies.form.priority')}
|
|
</label>
|
|
<input
|
|
id="policy-priority"
|
|
type="number"
|
|
min={0}
|
|
max={999}
|
|
value={formData.priority}
|
|
onChange={(e) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
priority: Math.min(999, Math.max(0, Number(e.target.value) || 0)),
|
|
}))
|
|
}
|
|
className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
|
|
/>
|
|
<p className="mt-1 text-xs text-dark-500">{t('admin.policies.form.priorityHint')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conditions */}
|
|
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
|
|
<label className="mb-3 block text-sm font-medium text-dark-200">
|
|
{t('admin.policies.form.conditions')}
|
|
</label>
|
|
<div className="space-y-2">
|
|
{/* Time range */}
|
|
<ConditionToggle
|
|
label={t('admin.policies.conditions.timeRange')}
|
|
enabled={formData.conditionsEnabled.time_range}
|
|
onToggle={() =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditionsEnabled: {
|
|
...prev.conditionsEnabled,
|
|
time_range: !prev.conditionsEnabled.time_range,
|
|
},
|
|
}))
|
|
}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="time"
|
|
value={formData.conditions.time_range?.start ?? '09:00'}
|
|
onChange={(e) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditions: {
|
|
...prev.conditions,
|
|
time_range: {
|
|
start: e.target.value,
|
|
end: prev.conditions.time_range?.end ?? '18:00',
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
className="rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
|
|
aria-label={t('admin.policies.conditions.timeStart')}
|
|
/>
|
|
<span className="text-dark-500">-</span>
|
|
<input
|
|
type="time"
|
|
value={formData.conditions.time_range?.end ?? '18:00'}
|
|
onChange={(e) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditions: {
|
|
...prev.conditions,
|
|
time_range: {
|
|
start: prev.conditions.time_range?.start ?? '09:00',
|
|
end: e.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
className="rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
|
|
aria-label={t('admin.policies.conditions.timeEnd')}
|
|
/>
|
|
</div>
|
|
</ConditionToggle>
|
|
|
|
{/* IP whitelist */}
|
|
<ConditionToggle
|
|
label={t('admin.policies.conditions.ipWhitelist')}
|
|
enabled={formData.conditionsEnabled.ip_whitelist}
|
|
onToggle={() =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditionsEnabled: {
|
|
...prev.conditionsEnabled,
|
|
ip_whitelist: !prev.conditionsEnabled.ip_whitelist,
|
|
},
|
|
}))
|
|
}
|
|
>
|
|
<IpTagInput
|
|
values={formData.conditions.ip_whitelist ?? []}
|
|
onChange={(ips) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditions: {
|
|
...prev.conditions,
|
|
ip_whitelist: ips,
|
|
},
|
|
}))
|
|
}
|
|
/>
|
|
</ConditionToggle>
|
|
|
|
{/* Rate limit */}
|
|
<ConditionToggle
|
|
label={t('admin.policies.conditions.rateLimit')}
|
|
enabled={formData.conditionsEnabled.rate_limit}
|
|
onToggle={() =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditionsEnabled: {
|
|
...prev.conditionsEnabled,
|
|
rate_limit: !prev.conditionsEnabled.rate_limit,
|
|
},
|
|
}))
|
|
}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
max={10000}
|
|
value={formData.conditions.rate_limit ?? 100}
|
|
onChange={(e) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditions: {
|
|
...prev.conditions,
|
|
rate_limit: Math.max(1, Number(e.target.value) || 1),
|
|
},
|
|
}))
|
|
}
|
|
className="w-24 rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
|
|
aria-label={t('admin.policies.conditions.rateLimitValue')}
|
|
/>
|
|
<span className="text-xs text-dark-500">
|
|
{t('admin.policies.conditions.perHour')}
|
|
</span>
|
|
</div>
|
|
</ConditionToggle>
|
|
|
|
{/* Weekdays */}
|
|
<ConditionToggle
|
|
label={t('admin.policies.conditions.weekdays')}
|
|
enabled={formData.conditionsEnabled.weekdays}
|
|
onToggle={() =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
conditionsEnabled: {
|
|
...prev.conditionsEnabled,
|
|
weekdays: !prev.conditionsEnabled.weekdays,
|
|
},
|
|
}))
|
|
}
|
|
>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{[1, 2, 3, 4, 5, 6, 0].map((day) => {
|
|
const selected = (formData.conditions.weekdays ?? []).includes(day);
|
|
return (
|
|
<button
|
|
key={day}
|
|
type="button"
|
|
onClick={() =>
|
|
setFormData((prev) => {
|
|
const current = prev.conditions.weekdays ?? [];
|
|
const next = selected
|
|
? current.filter((d) => d !== day)
|
|
: [...current, day];
|
|
return {
|
|
...prev,
|
|
conditions: { ...prev.conditions, weekdays: next },
|
|
};
|
|
})
|
|
}
|
|
className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
|
|
selected
|
|
? 'bg-accent-500/20 text-accent-400'
|
|
: 'bg-dark-700/50 text-dark-400 hover:bg-dark-700 hover:text-dark-300'
|
|
}`}
|
|
aria-pressed={selected}
|
|
>
|
|
{t(`admin.policies.conditions.day${day}`)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</ConditionToggle>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error & Submit */}
|
|
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
|
|
{formError && <p className="mb-4 text-sm text-error-400">{formError}</p>}
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate('/admin/policies')}
|
|
className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
|
|
>
|
|
{t('admin.policies.form.cancel')}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSaving}
|
|
className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
|
|
>
|
|
{isSaving ? t('admin.policies.form.saving') : t('admin.policies.form.save')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|