58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { deleteLicenseAction } from '../actions'
|
||
|
||
const CONFIRM_WORD = 'SİL'
|
||
|
||
export default function DeleteLicenseButton({ id }: { id: string }) {
|
||
const [confirmText, setConfirmText] = useState('')
|
||
const [open, setOpen] = useState(false)
|
||
const canDelete = confirmText.trim().toUpperCase() === CONFIRM_WORD
|
||
|
||
if (!open) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => setOpen(true)}
|
||
className="rounded-md border border-red-300 dark:border-red-900 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 text-sm font-medium px-4 py-2 transition-colors"
|
||
>
|
||
Lisansı Sil
|
||
</button>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<form action={deleteLicenseAction} className="space-y-3">
|
||
<input type="hidden" name="id" value={id} />
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
Bu işlem geri alınamaz — lisans ve bağlı cihaz aktivasyonları kalıcı olarak silinir. Sadece kullanımı durdurmak için "Durum" alanını <span className="font-mono">revoked</span> yapmanız yeterli olabilir.
|
||
Onaylamak için <span className="font-mono text-gray-900 dark:text-white">{CONFIRM_WORD}</span> yazın:
|
||
</p>
|
||
<input
|
||
type="text"
|
||
value={confirmText}
|
||
onChange={(e) => setConfirmText(e.target.value)}
|
||
placeholder={CONFIRM_WORD}
|
||
className="w-full max-w-xs rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
type="submit"
|
||
disabled={!canDelete}
|
||
className="rounded-md bg-red-600 hover:bg-red-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium px-4 py-2 transition-colors"
|
||
>
|
||
Kalıcı Olarak Sil
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => { setOpen(false); setConfirmText('') }}
|
||
className="text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||
>
|
||
Vazgeç
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)
|
||
}
|