65 lines
3.0 KiB
TypeScript
65 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { ModalBase } from './ModalBase'
|
|
import { apiFetch } from '../_api'
|
|
|
|
export function AssignRoleModal({ onClose, onAssigned }: { onClose: () => void; onAssigned: () => void }) {
|
|
const [form, setForm] = useState({ user_id: '', role_id: '', namespace_id: '', expires_at: '' })
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.user_id || !form.role_id) { setError('User-ID und Rolle sind Pflichtfelder'); return }
|
|
setSaving(true)
|
|
try {
|
|
await apiFetch('user-roles', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
user_id: form.user_id,
|
|
role_id: form.role_id,
|
|
namespace_id: form.namespace_id || null,
|
|
expires_at: form.expires_at || null,
|
|
}),
|
|
})
|
|
onAssigned()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
return (
|
|
<ModalBase title="Rolle zuweisen" onClose={onClose}>
|
|
{error && <div className="mb-3 p-2 bg-red-50 text-red-700 rounded text-sm">{error}</div>}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">User-ID</label>
|
|
<input type="text" value={form.user_id} onChange={e => setForm(f => ({ ...f, user_id: e.target.value }))}
|
|
placeholder="UUID" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Rollen-ID</label>
|
|
<input type="text" value={form.role_id} onChange={e => setForm(f => ({ ...f, role_id: e.target.value }))}
|
|
placeholder="UUID" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Namespace-ID (optional)</label>
|
|
<input type="text" value={form.namespace_id} onChange={e => setForm(f => ({ ...f, namespace_id: e.target.value }))}
|
|
placeholder="Leer = Global" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Ablaufdatum (optional)</label>
|
|
<input type="date" value={form.expires_at} onChange={e => setForm(f => ({ ...f, expires_at: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-5">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Abbrechen</button>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Speichern...' : 'Zuweisen'}
|
|
</button>
|
|
</div>
|
|
</ModalBase>
|
|
)
|
|
}
|