feat: add first name capture at signup and multi-step delete account confirmation
This commit is contained in:
nmemmert committed
1 parent
0cc08f7c26
commit
5b1124cd85
4 files changed
+233
-15
No files matched your search
@@ -8,8 +8,14 @@ interface AboutPageProps {
|
||||
}
|
||||
|
||||
export default function AboutPage({ userEmail }: AboutPageProps) {
|
||||
const { logout } = useAuth();
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const { logout, deleteAccount } = useAuth();
|
||||
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [deleteStep, setDeleteStep] = useState(0); // 0=initial, 1=first confirm, 2=second confirm, 3=type DELETE, 4=type email
|
||||
const [deleteConfirmText, setDeleteConfirmText] = useState('');
|
||||
const [deleteEmail, setDeleteEmail] = useState('');
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
const [deleteError, setDeleteError] = useState('');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-8">
|
||||
@@ -63,26 +69,38 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logout Section */}
|
||||
<div>
|
||||
{/* Logout and Delete Section */}
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => setShowConfirm(true)}
|
||||
onClick={() => setShowLogoutConfirm(true)}
|
||||
className="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDeleteDialog(true);
|
||||
setDeleteStep(0);
|
||||
setDeleteConfirmText('');
|
||||
setDeleteEmail('');
|
||||
setDeleteError('');
|
||||
}}
|
||||
className="w-full px-4 py-3 bg-red-900 hover:bg-red-800 text-red-200 font-medium rounded-lg transition-colors border border-red-700"
|
||||
>
|
||||
Delete Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logout Confirmation Modal */}
|
||||
{showConfirm && (
|
||||
{showLogoutConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
|
||||
<h2 className="text-xl font-bold text-white mb-2">Logout?</h2>
|
||||
<p className="text-slate-400 mb-6">Are you sure you want to logout?</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowConfirm(false)}
|
||||
onClick={() => setShowLogoutConfirm(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
@@ -97,6 +115,161 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Account Multi-Step Modal */}
|
||||
{showDeleteDialog && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
|
||||
{deleteStep === 0 && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold text-red-400 mb-2">⚠️ Delete Account?</h2>
|
||||
<p className="text-slate-300 mb-2 font-semibold">This action cannot be undone.</p>
|
||||
<p className="text-slate-400 mb-6 text-sm">All your prayers, reflections, and account data will be permanently deleted.</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowDeleteDialog(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteStep(1)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{deleteStep === 1 && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold text-red-400 mb-2">Are you absolutely sure?</h2>
|
||||
<p className="text-slate-400 mb-6">You will lose all your prayers and data. This is permanent.</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setDeleteStep(0)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteStep(2)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
|
||||
>
|
||||
I'm Sure
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{deleteStep === 2 && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold text-red-400 mb-2">Type DELETE to confirm</h2>
|
||||
<p className="text-slate-400 mb-4">Enter the word "DELETE" to proceed:</p>
|
||||
<input
|
||||
type="text"
|
||||
value={deleteConfirmText}
|
||||
onChange={(e) => setDeleteConfirmText(e.target.value.toUpperCase())}
|
||||
placeholder="Type DELETE"
|
||||
className="w-full p-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setDeleteStep(1)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteConfirmText === 'DELETE' ? setDeleteStep(3) : setDeleteError('Please type DELETE exactly')}
|
||||
disabled={deleteConfirmText !== 'DELETE'}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 disabled:bg-red-900 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
{deleteError && <p className="text-red-400 text-sm mt-2">{deleteError}</p>}
|
||||
</>
|
||||
)}
|
||||
|
||||
{deleteStep === 3 && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold text-red-400 mb-2">Confirm your email</h2>
|
||||
<p className="text-slate-400 mb-4">Enter your email to verify:</p>
|
||||
<input
|
||||
type="email"
|
||||
value={deleteEmail}
|
||||
onChange={(e) => setDeleteEmail(e.target.value)}
|
||||
placeholder="Enter your email"
|
||||
className="w-full p-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setDeleteStep(2)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteEmail === userEmail ? setDeleteStep(4) : setDeleteError('Email does not match')}
|
||||
disabled={!deleteEmail}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 disabled:bg-red-900 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
{deleteError && <p className="text-red-400 text-sm mt-2">{deleteError}</p>}
|
||||
</>
|
||||
)}
|
||||
|
||||
{deleteStep === 4 && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold text-red-400 mb-2">Final confirmation</h2>
|
||||
<p className="text-slate-400 mb-4">Check this box to confirm you understand your account will be permanently deleted:</p>
|
||||
<div className="bg-slate-700 p-3 rounded-lg mb-4">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={deleteConfirmText === 'CONFIRM'}
|
||||
onChange={(e) => setDeleteConfirmText(e.target.checked ? 'CONFIRM' : '')}
|
||||
className="w-5 h-5 rounded border-slate-600 bg-slate-600 text-red-600 focus:ring-2 focus:ring-red-500 cursor-pointer"
|
||||
/>
|
||||
<span className="text-slate-300 text-sm">
|
||||
I understand this is permanent and cannot be undone
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setDeleteStep(3)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setDeleteLoading(true);
|
||||
setDeleteError('');
|
||||
try {
|
||||
await deleteAccount();
|
||||
} catch (err: unknown) {
|
||||
setDeleteError(err instanceof Error ? err.message : 'Failed to delete account');
|
||||
setDeleteLoading(false);
|
||||
}
|
||||
}}
|
||||
disabled={deleteConfirmText !== 'CONFIRM' || deleteLoading}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-red-700 text-white font-bold hover:bg-red-800 disabled:bg-red-900 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{deleteLoading ? 'Deleting...' : 'Delete Account'}
|
||||
</button>
|
||||
</div>
|
||||
{deleteError && <p className="text-red-400 text-sm mt-2">{deleteError}</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user