56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { deleteUserAction } from '../actions'
|
||
|
||
export default function DeleteUserButton({ id, email }: { id: string; email: string }) {
|
||
const [confirmText, setConfirmText] = useState('')
|
||
const [open, setOpen] = useState(false)
|
||
const canDelete = confirmText.trim().toLowerCase() === email.toLowerCase()
|
||
|
||
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"
|
||
>
|
||
Kullanıcıyı Sil
|
||
</button>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<form action={deleteUserAction} 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 — kullanıcının Supabase Auth hesabı ve profili silinir. Bu kullanıcıya bağlı lisanslar askıda kalabilir, gerekirse Lisanslar sayfasından bağlantısını kaldırın.
|
||
Onaylamak için e-postasını yazın: <span className="font-mono text-gray-900 dark:text-white">{email}</span>
|
||
</p>
|
||
<input
|
||
type="text"
|
||
value={confirmText}
|
||
onChange={(e) => setConfirmText(e.target.value)}
|
||
placeholder={email}
|
||
className="w-full 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>
|
||
)
|
||
}
|