114 lines
5.5 KiB
TypeScript
114 lines
5.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export default function DeleteAccountModal({
|
|
isOpen,
|
|
onClose,
|
|
}: {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}) {
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [step, setStep] = useState(1)
|
|
const [confirmText, setConfirmText] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setStep(1)
|
|
setConfirmText('')
|
|
setIsLoading(false)
|
|
}
|
|
}, [isOpen])
|
|
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
|
<div className="w-full max-w-md bg-surface-dark border border-gray-800 rounded-2xl p-6 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
|
|
<h2 className="text-xl font-bold text-white mb-2">Delete Account</h2>
|
|
|
|
{step === 1 ? (
|
|
<>
|
|
<p className="text-gray-400 mb-6">
|
|
Are you sure you want to delete your account? This action cannot be
|
|
undone. Your data will be permanently removed.
|
|
</p>
|
|
<div className="flex justify-end space-x-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={() => setStep(2)}
|
|
className="px-4 py-2 rounded-lg bg-red-500/10 text-red-500 hover:bg-red-500/20 hover:text-red-400 border border-red-500/20 transition-all font-medium"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-gray-400 mb-4">
|
|
To confirm deletion, please type <span className="text-white font-mono font-bold">DELETE</span> below.
|
|
</p>
|
|
<input
|
|
type="text"
|
|
value={confirmText}
|
|
onChange={(e) => setConfirmText(e.target.value)}
|
|
placeholder="Type DELETE"
|
|
className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white mb-6 focus:outline-none focus:border-red-500 transition-colors"
|
|
autoFocus
|
|
/>
|
|
<div className="flex justify-end space-x-3">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="px-4 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<form
|
|
action="/api/delete-account"
|
|
method="POST"
|
|
onSubmit={() => setIsLoading(true)}
|
|
>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || confirmText !== 'DELETE'}
|
|
className="px-4 py-2 rounded-lg bg-red-500/10 text-red-500 hover:bg-red-500/20 hover:text-red-400 border border-red-500/20 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
Deleting...
|
|
</>
|
|
) : (
|
|
'Delete Account'
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|