Account deletion logic

components/ProfileSettings.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { Loader2, Check } from 'lucide-react';
+import { Loader2, Check, AlertTriangle } from 'lucide-react';
 import { Button } from './ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
-import { useSession } from '../lib/auth-client';
+import { useSession, signOut } from '../lib/auth-client';
 import { validatePhoneOrEmail } from '../lib/validators';
 
 export function ProfileSettings() {
@@ -17,6 +17,9 @@ export function ProfileSettings() {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
   const [saved, setSaved] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState('');
 
   useEffect(() => {
     fetch('/api/profile', { credentials: 'include' })
@@ -172,6 +175,78 @@ export function ProfileSettings() {
         </Card>
       </form>
 
+      <Card className="mt-4 border-red-200">
+        <CardHeader>
+          <CardTitle className="text-base text-red-600 flex items-center gap-2">
+            <AlertTriangle className="w-4 h-4" /> Delete account
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pb-6">
+          {!showDeleteConfirm ? (
+            <>
+              <p className="text-sm text-muted-foreground mb-3">
+                Permanently delete your account and all associated data including
+                chemicals and protocols. This action cannot be undone.
+              </p>
+              <Button
+                variant="destructive"
+                onClick={() => setShowDeleteConfirm(true)}
+              >
+                Delete account
+              </Button>
+            </>
+          ) : (
+            <>
+              <p className="text-sm text-red-600 font-medium mb-3">
+                Are you sure? All your data will be permanently deleted.
+              </p>
+              {deleteError && (
+                <p className="text-sm text-red-600 mb-3">{deleteError}</p>
+              )}
+              <div className="flex gap-2">
+                <Button
+                  variant="destructive"
+                  disabled={deleting}
+                  onClick={async () => {
+                    setDeleting(true);
+                    setDeleteError('');
+                    try {
+                      const res = await fetch('/api/account/delete', {
+                        method: 'POST',
+                        credentials: 'include',
+                      });
+                      if (!res.ok) {
+                        const data = await res.json().catch(() => ({}));
+                        setDeleteError(data.error || 'Failed to delete account.');
+                        setDeleting(false);
+                        return;
+                      }
+                      await signOut();
+                      window.location.href = '/';
+                    } catch {
+                      setDeleteError('Failed to delete account.');
+                      setDeleting(false);
+                    }
+                  }}
+                >
+                  {deleting ? 'Deleting...' : 'Yes, delete my account'}
+                </Button>
+                <Button
+                  variant="outline"
+                  disabled={deleting}
+                  onClick={() => {
+                    setShowDeleteConfirm(false);
+                    setDeleteError('');
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
       <p className="text-center mt-6">
         <a href="/privacy" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
           Privacy Policy