Jannis Braun
836f0acef6
- Define 4 input tier CSS classes (input-standard, input-search, input-embedded, input-danger) in globals.css, migrating ~50 inputs across ~28 component files to use them - Add subtle border and inset shadow to solid input tiers for resting-state visibility - Fix focus ring clipping in settings panel scroll container - Fix phantom Tailwind tokens (border-border-primary, placeholder-txt-muted) - Add admin user management panel, storage management, and account deletion utilities
400 lines
17 KiB
TypeScript
400 lines
17 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useAuthStore } from '../../stores/authStore';
|
|
import { useInstanceStore } from '../../stores/instanceStore';
|
|
import { useSpaceStore } from '../../stores/spaceStore';
|
|
import { api } from '../../api/client';
|
|
import { deleteAccountOnRemotes, type FederationOpResult } from '../../utils/federationOps';
|
|
|
|
interface DeleteAccountModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
type Step = 'warning' | 'confirm' | 'federation' | 'complete';
|
|
|
|
interface OwnedSpaceInfo {
|
|
id: string;
|
|
name: string;
|
|
members: { userId: string; username: string; displayName: string | null }[];
|
|
action: 'none' | 'transfer' | 'delete';
|
|
transferTo: string;
|
|
}
|
|
|
|
export function DeleteAccountModal({ isOpen, onClose }: DeleteAccountModalProps) {
|
|
const user = useAuthStore((s) => s.user);
|
|
const instances = useInstanceStore((s) => s.instances);
|
|
const spaces = useSpaceStore((s) => s.spaces);
|
|
|
|
const [step, setStep] = useState<Step>('warning');
|
|
const [ownedSpaces, setOwnedSpaces] = useState<OwnedSpaceInfo[]>([]);
|
|
const [confirmUsername, setConfirmUsername] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [federationResults, setFederationResults] = useState<FederationOpResult[]>([]);
|
|
const [deletionComplete, setDeletionComplete] = useState(false);
|
|
|
|
// Reset state when modal opens/closes
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setStep('warning');
|
|
setConfirmUsername('');
|
|
setConfirmPassword('');
|
|
setError('');
|
|
setIsLoading(false);
|
|
setFederationResults([]);
|
|
setDeletionComplete(false);
|
|
|
|
// Build owned spaces list and fetch members for each
|
|
if (user) {
|
|
const owned = spaces.filter(s => s.ownerId === user.id);
|
|
if (owned.length > 0) {
|
|
Promise.all(
|
|
owned.map(async (s) => {
|
|
try {
|
|
const members = await api.spaces.members(s.id);
|
|
return {
|
|
id: s.id,
|
|
name: s.name,
|
|
members: members
|
|
.filter(m => m.userId !== user.id)
|
|
.map(m => ({
|
|
userId: m.userId,
|
|
username: m.user.username,
|
|
displayName: m.user.displayName,
|
|
})),
|
|
action: 'none' as const,
|
|
transferTo: '',
|
|
};
|
|
} catch {
|
|
return {
|
|
id: s.id,
|
|
name: s.name,
|
|
members: [] as OwnedSpaceInfo['members'],
|
|
action: 'none' as const,
|
|
transferTo: '',
|
|
};
|
|
}
|
|
})
|
|
).then(setOwnedSpaces);
|
|
}
|
|
}
|
|
}
|
|
}, [isOpen, user]);
|
|
|
|
// Auto-redirect after deletion — must be before early return to maintain hooks order
|
|
useEffect(() => {
|
|
if (deletionComplete && step === 'complete') {
|
|
const timer = setTimeout(() => {
|
|
localStorage.removeItem('backspace_token');
|
|
window.location.href = '/login';
|
|
}, 3000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [deletionComplete, step]);
|
|
|
|
if (!isOpen || !user) return null;
|
|
|
|
const hasRemotes = instances.filter(i => i.status === 'connected').length > 0;
|
|
const allOwnedHandled = ownedSpaces.every(s => s.action !== 'none');
|
|
|
|
const handleSpaceAction = (spaceId: string, action: 'transfer' | 'delete') => {
|
|
setOwnedSpaces(prev => prev.map(s =>
|
|
s.id === spaceId ? { ...s, action, transferTo: action === 'transfer' ? s.transferTo : '' } : s
|
|
));
|
|
};
|
|
|
|
const handleTransferTo = (spaceId: string, userId: string) => {
|
|
setOwnedSpaces(prev => prev.map(s =>
|
|
s.id === spaceId ? { ...s, transferTo: userId } : s
|
|
));
|
|
};
|
|
|
|
const handleContinueFromWarning = async () => {
|
|
setError('');
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// Process owned spaces
|
|
for (const space of ownedSpaces) {
|
|
if (space.action === 'transfer' && space.transferTo) {
|
|
await api.spaces.transferOwnership(space.id, space.transferTo);
|
|
} else if (space.action === 'delete') {
|
|
await api.spaces.delete(space.id);
|
|
}
|
|
}
|
|
setStep('confirm');
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to process spaces');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleConfirmDelete = async () => {
|
|
if (confirmUsername !== user.username) {
|
|
setError('Username does not match');
|
|
return;
|
|
}
|
|
|
|
setError('');
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
if (hasRemotes) {
|
|
setStep('federation');
|
|
// Delete on remotes first
|
|
const results = await deleteAccountOnRemotes();
|
|
setFederationResults(results);
|
|
// Then delete home account
|
|
await api.users.deleteAccount({ password: confirmPassword, username: confirmUsername });
|
|
setDeletionComplete(true);
|
|
setStep('complete');
|
|
} else {
|
|
// No remotes — direct delete via API (don't clear auth state yet — let the modal show "complete")
|
|
await api.users.deleteAccount({ password: confirmPassword, username: confirmUsername });
|
|
setDeletionComplete(true);
|
|
setStep('complete');
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to delete account');
|
|
if (step === 'federation') {
|
|
// Stay on federation step so user can see results
|
|
} else {
|
|
setStep('confirm');
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteAnyway = async () => {
|
|
setError('');
|
|
setIsLoading(true);
|
|
try {
|
|
await api.users.deleteAccount({ password: confirmPassword, username: confirmUsername });
|
|
setDeletionComplete(true);
|
|
setStep('complete');
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to delete account');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center animate-fade-in">
|
|
<div className="absolute inset-0 bg-surface-overlay" onClick={step !== 'complete' ? onClose : undefined} />
|
|
<div className="relative max-w-lg w-full mx-4 max-h-[calc(100vh-2rem)] flex flex-col bg-surface-elevated rounded-lg shadow-xl animate-slide-up overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 pt-5 flex-shrink-0">
|
|
<h2 className="text-lg font-bold text-txt-primary">Delete Account</h2>
|
|
{step !== 'complete' && (
|
|
<button onClick={onClose} className="text-txt-tertiary hover:text-txt-primary transition-colors p-1">
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-5 overflow-y-auto space-y-4">
|
|
{/* Step 1: Warning & Space Handling */}
|
|
{step === 'warning' && (
|
|
<>
|
|
<div className="bg-accent-rose/10 border border-accent-rose/20 rounded-lg p-3.5">
|
|
<p className="text-sm text-txt-primary font-medium mb-2">This will permanently delete your account.</p>
|
|
<ul className="text-xs text-txt-secondary space-y-1">
|
|
<li>- All space memberships will be removed</li>
|
|
<li>- All friend connections will be removed</li>
|
|
<li>- All DM memberships will be removed</li>
|
|
<li>- Your messages will remain but be attributed to "Deleted User"</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{ownedSpaces.length > 0 && (
|
|
<div>
|
|
<p className="text-sm text-txt-primary font-medium mb-2">
|
|
You own {ownedSpaces.length} space{ownedSpaces.length > 1 ? 's' : ''}. Handle each before continuing:
|
|
</p>
|
|
<div className="space-y-3">
|
|
{ownedSpaces.map(space => (
|
|
<div key={space.id} className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3">
|
|
<div className="text-sm font-medium text-txt-primary mb-2">{space.name}</div>
|
|
<div className="flex gap-2 mb-2">
|
|
<button
|
|
onClick={() => handleSpaceAction(space.id, 'transfer')}
|
|
className={`px-2.5 py-1 text-xs rounded transition-colors ${
|
|
space.action === 'transfer'
|
|
? 'bg-accent-primary text-white'
|
|
: 'bg-white/[0.06] text-txt-secondary hover:text-txt-primary'
|
|
}`}
|
|
>
|
|
Transfer
|
|
</button>
|
|
<button
|
|
onClick={() => handleSpaceAction(space.id, 'delete')}
|
|
className={`px-2.5 py-1 text-xs rounded transition-colors ${
|
|
space.action === 'delete'
|
|
? 'bg-accent-rose text-white'
|
|
: 'bg-white/[0.06] text-txt-secondary hover:text-txt-primary'
|
|
}`}
|
|
>
|
|
Delete Space
|
|
</button>
|
|
</div>
|
|
{space.action === 'transfer' && (
|
|
<select
|
|
value={space.transferTo}
|
|
onChange={(e) => handleTransferTo(space.id, e.target.value)}
|
|
className="input-standard w-full px-2.5 py-1.5 text-xs"
|
|
>
|
|
<option value="">Select new owner...</option>
|
|
{space.members.map(m => (
|
|
<option key={m.userId} value={m.userId}>
|
|
{m.displayName || m.username}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{error}</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={ownedSpaces.length > 0 ? handleContinueFromWarning : () => setStep('confirm')}
|
|
disabled={
|
|
isLoading ||
|
|
(ownedSpaces.length > 0 && (!allOwnedHandled || ownedSpaces.some(s => s.action === 'transfer' && !s.transferTo)))
|
|
}
|
|
className="w-full py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isLoading ? 'Processing...' : 'Continue'}
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{/* Step 2: Confirmation */}
|
|
{step === 'confirm' && (
|
|
<form onSubmit={(e) => { e.preventDefault(); handleConfirmDelete(); }} className="space-y-4">
|
|
<div className="bg-accent-rose/10 border border-accent-rose/20 rounded-lg p-3.5">
|
|
<p className="text-sm text-txt-danger font-medium">This action is permanent and cannot be undone.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs text-txt-secondary mb-1.5">
|
|
Type your username <span className="font-mono text-txt-primary">{user.username}</span> to confirm
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={confirmUsername}
|
|
onChange={(e) => setConfirmUsername(e.target.value)}
|
|
className="input-danger w-full"
|
|
placeholder={user.username}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs text-txt-secondary mb-1.5">Password</label>
|
|
<input
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
className="input-danger w-full"
|
|
placeholder="Enter your password"
|
|
autoComplete="current-password"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{error}</div>
|
|
)}
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => { setStep('warning'); setError(''); }}
|
|
className="flex-1 py-2 bg-white/[0.06] hover:bg-white/[0.1] text-txt-secondary text-sm font-medium rounded-lg transition-colors"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || confirmUsername !== user.username || !confirmPassword}
|
|
className="flex-1 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isLoading ? 'Deleting...' : 'Delete My Account'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
|
|
{/* Step 3: Federation Progress */}
|
|
{step === 'federation' && (
|
|
<>
|
|
<p className="text-sm text-txt-secondary">Removing your account from connected instances...</p>
|
|
<div className="space-y-2">
|
|
{instances.filter(i => i.status === 'connected').map(inst => {
|
|
const result = federationResults.find(r => r.origin === inst.origin);
|
|
return (
|
|
<div key={inst.origin} className="flex items-center justify-between px-3 py-2 rounded-lg bg-white/[0.03] border border-white/[0.04]">
|
|
<span className="text-sm text-txt-primary">{inst.label || new URL(inst.origin).host}</span>
|
|
{!result ? (
|
|
<svg className="animate-spin w-4 h-4 text-txt-tertiary" viewBox="0 0 24 24" fill="none">
|
|
<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 12h4z" />
|
|
</svg>
|
|
) : result.success ? (
|
|
<svg className="w-4 h-4 text-status-online" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : (
|
|
<div className="flex items-center gap-1.5">
|
|
<svg className="w-4 h-4 text-txt-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
<span className="text-xs text-txt-danger">{result.error}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{error}</div>
|
|
)}
|
|
|
|
{federationResults.length > 0 && !deletionComplete && (
|
|
<button
|
|
onClick={handleDeleteAnyway}
|
|
disabled={isLoading}
|
|
className="w-full py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
{isLoading ? 'Deleting...' : 'Delete Account Now'}
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Step 4: Complete */}
|
|
{step === 'complete' && (
|
|
<div className="text-center py-6">
|
|
<svg className="w-12 h-12 text-txt-tertiary mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<p className="text-lg font-medium text-txt-primary mb-1">Account deleted</p>
|
|
<p className="text-sm text-txt-tertiary">Redirecting to login...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|