mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 19:31:14 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
457
src-old/components/settings/SecurityTab.tsx
Normal file
457
src-old/components/settings/SecurityTab.tsx
Normal file
@@ -0,0 +1,457 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { handleError, handleSuccess } from '@/lib/errorHandler';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { Shield, Key, Smartphone, Globe, Loader2, Monitor, Tablet, Trash2 } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { TOTPSetup } from '@/components/auth/TOTPSetup';
|
||||
import { GoogleIcon } from '@/components/icons/GoogleIcon';
|
||||
import { DiscordIcon } from '@/components/icons/DiscordIcon';
|
||||
import { PasswordUpdateDialog } from './PasswordUpdateDialog';
|
||||
import {
|
||||
getUserIdentities,
|
||||
checkDisconnectSafety,
|
||||
disconnectIdentity,
|
||||
connectIdentity,
|
||||
addPasswordToAccount
|
||||
} from '@/lib/identityService';
|
||||
import type { UserIdentity, OAuthProvider } from '@/types/identity';
|
||||
import type { AuthSession } from '@/types/auth';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { SessionRevokeConfirmDialog } from './SessionRevokeConfirmDialog';
|
||||
|
||||
export function SecurityTab() {
|
||||
const { user } = useAuth();
|
||||
const { isModerator } = useUserRole();
|
||||
const navigate = useNavigate();
|
||||
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
|
||||
const [identities, setIdentities] = useState<UserIdentity[]>([]);
|
||||
const [loadingIdentities, setLoadingIdentities] = useState(true);
|
||||
const [disconnectingProvider, setDisconnectingProvider] = useState<OAuthProvider | null>(null);
|
||||
const [hasPassword, setHasPassword] = useState(false);
|
||||
const [addingPassword, setAddingPassword] = useState(false);
|
||||
const [sessions, setSessions] = useState<AuthSession[]>([]);
|
||||
const [loadingSessions, setLoadingSessions] = useState(true);
|
||||
const [sessionToRevoke, setSessionToRevoke] = useState<{ id: string; isCurrent: boolean } | null>(null);
|
||||
|
||||
// Load user identities on mount
|
||||
useEffect(() => {
|
||||
loadIdentities();
|
||||
fetchSessions();
|
||||
}, []);
|
||||
|
||||
const loadIdentities = async () => {
|
||||
try {
|
||||
setLoadingIdentities(true);
|
||||
const fetchedIdentities = await getUserIdentities();
|
||||
setIdentities(fetchedIdentities);
|
||||
|
||||
// Check if user has email/password auth
|
||||
const hasEmailProvider = fetchedIdentities.some(i => i.provider === 'email');
|
||||
setHasPassword(hasEmailProvider);
|
||||
} catch (error: unknown) {
|
||||
handleError(error, { action: 'Load connected accounts', userId: user?.id });
|
||||
} finally {
|
||||
setLoadingIdentities(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSocialLogin = async (provider: OAuthProvider) => {
|
||||
try {
|
||||
const result = await connectIdentity(provider, '/settings?tab=security');
|
||||
|
||||
if (!result.success) {
|
||||
handleError(
|
||||
new Error(result.error || 'Connection failed'),
|
||||
{ action: `Connect ${provider} account` }
|
||||
);
|
||||
} else {
|
||||
handleSuccess('Redirecting...', `Connecting your ${provider} account...`);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
handleError(error, { action: `Connect ${provider} account` });
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnlinkSocial = async (provider: OAuthProvider) => {
|
||||
// Check if disconnect is safe
|
||||
const safetyCheck = await checkDisconnectSafety(provider);
|
||||
|
||||
if (!safetyCheck.canDisconnect) {
|
||||
if (safetyCheck.reason === 'no_password_backup') {
|
||||
// Trigger password reset flow first
|
||||
await handleAddPassword();
|
||||
handleSuccess(
|
||||
"Password Required First",
|
||||
"Check your email for a password reset link. Once you've set a password, you can disconnect your social login."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (safetyCheck.reason === 'last_identity') {
|
||||
handleError(
|
||||
new Error("You cannot disconnect your only login method"),
|
||||
{ action: "Disconnect social login" }
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Proceed with disconnect
|
||||
setDisconnectingProvider(provider);
|
||||
const result = await disconnectIdentity(provider);
|
||||
setDisconnectingProvider(null);
|
||||
|
||||
if (result.success) {
|
||||
await loadIdentities(); // Refresh identities list
|
||||
handleSuccess("Disconnected", `Your ${provider} account has been successfully disconnected.`);
|
||||
} else {
|
||||
handleError(
|
||||
new Error(result.error || 'Disconnect failed'),
|
||||
{ action: `Disconnect ${provider} account` }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPassword = async () => {
|
||||
setAddingPassword(true);
|
||||
|
||||
const result = await addPasswordToAccount();
|
||||
|
||||
if (result.success) {
|
||||
handleSuccess(
|
||||
"Password Setup Email Sent!",
|
||||
`Check ${result.email} for a password reset link. Click it to set your password.`
|
||||
);
|
||||
} else {
|
||||
handleError(
|
||||
new Error(result.error || 'Failed to send email'),
|
||||
{ action: 'Send password setup email' }
|
||||
);
|
||||
}
|
||||
|
||||
setAddingPassword(false);
|
||||
};
|
||||
|
||||
const fetchSessions = async () => {
|
||||
if (!user) return;
|
||||
|
||||
setLoadingSessions(true);
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase.rpc('get_my_sessions');
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
setSessions((data as AuthSession[]) || []);
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: 'Load active sessions',
|
||||
userId: user.id
|
||||
});
|
||||
setSessions([]);
|
||||
} finally {
|
||||
setLoadingSessions(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initiateSessionRevoke = async (sessionId: string) => {
|
||||
// Get current session to check if revoking self
|
||||
const { data: { session: currentSession } } = await supabase.auth.getSession();
|
||||
const isCurrentSession = currentSession && sessions.some(s =>
|
||||
s.id === sessionId && s.refreshed_at === currentSession.access_token
|
||||
);
|
||||
|
||||
setSessionToRevoke({ id: sessionId, isCurrent: !!isCurrentSession });
|
||||
};
|
||||
|
||||
const confirmRevokeSession = async () => {
|
||||
if (!sessionToRevoke) return;
|
||||
|
||||
const { error } = await supabase.rpc('revoke_my_session', { session_id: sessionToRevoke.id });
|
||||
|
||||
if (error) {
|
||||
handleError(error, { action: 'Revoke session', userId: user?.id });
|
||||
} else {
|
||||
handleSuccess('Success', 'Session revoked successfully');
|
||||
|
||||
if (sessionToRevoke.isCurrent) {
|
||||
// Redirect to login after revoking current session
|
||||
setTimeout(() => {
|
||||
window.location.href = '/auth';
|
||||
}, 1000);
|
||||
} else {
|
||||
fetchSessions();
|
||||
}
|
||||
}
|
||||
|
||||
setSessionToRevoke(null);
|
||||
};
|
||||
|
||||
const getDeviceIcon = (userAgent: string | null) => {
|
||||
if (!userAgent) return <Monitor className="w-4 h-4" />;
|
||||
|
||||
const ua = userAgent.toLowerCase();
|
||||
if (ua.includes('mobile') || ua.includes('android') || ua.includes('iphone')) {
|
||||
return <Smartphone className="w-4 h-4" />;
|
||||
}
|
||||
if (ua.includes('tablet') || ua.includes('ipad')) {
|
||||
return <Tablet className="w-4 h-4" />;
|
||||
}
|
||||
return <Monitor className="w-4 h-4" />;
|
||||
};
|
||||
|
||||
const getBrowserName = (userAgent: string | null) => {
|
||||
if (!userAgent) return 'Unknown Browser';
|
||||
|
||||
const ua = userAgent.toLowerCase();
|
||||
if (ua.includes('firefox')) return 'Firefox';
|
||||
if (ua.includes('chrome') && !ua.includes('edg')) return 'Chrome';
|
||||
if (ua.includes('safari') && !ua.includes('chrome')) return 'Safari';
|
||||
if (ua.includes('edg')) return 'Edge';
|
||||
return 'Unknown Browser';
|
||||
};
|
||||
|
||||
// Get connected accounts with identity data
|
||||
const connectedAccounts = [
|
||||
{
|
||||
provider: 'google' as OAuthProvider,
|
||||
identity: identities.find(i => i.provider === 'google'),
|
||||
icon: <GoogleIcon className="w-5 h-5" />
|
||||
},
|
||||
{
|
||||
provider: 'discord' as OAuthProvider,
|
||||
identity: identities.find(i => i.provider === 'discord'),
|
||||
icon: <DiscordIcon className="w-5 h-5" />
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PasswordUpdateDialog
|
||||
open={passwordDialogOpen}
|
||||
onOpenChange={setPasswordDialogOpen}
|
||||
onSuccess={() => {
|
||||
handleSuccess('Password updated', 'Your password has been successfully changed.');
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Password + Connected Accounts Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Password Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Key className="w-5 h-5" />
|
||||
<CardTitle>{hasPassword ? 'Change Password' : 'Add Password'}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{hasPassword ? (
|
||||
<>Update your password to keep your account secure.</>
|
||||
) : (
|
||||
<>Add password authentication to your account for increased security and backup access.</>
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{hasPassword ? (
|
||||
<Button onClick={() => setPasswordDialogOpen(true)}>
|
||||
Change Password
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={handleAddPassword} disabled={addingPassword}>
|
||||
{addingPassword ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Sending Email...
|
||||
</>
|
||||
) : (
|
||||
'Add Password'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Connected Accounts */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-5 h-5" />
|
||||
<CardTitle>Connected Accounts</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Manage your social login connections for easier access to your account.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{loadingIdentities ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
connectedAccounts.map(account => {
|
||||
const isConnected = !!account.identity;
|
||||
const isDisconnecting = disconnectingProvider === account.provider;
|
||||
const email = account.identity?.identity_data?.email;
|
||||
|
||||
return (
|
||||
<div key={account.provider} className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
|
||||
{account.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium capitalize">{account.provider}</p>
|
||||
{isConnected && email && (
|
||||
<p className="text-sm text-muted-foreground">{email}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isConnected ? (
|
||||
<>
|
||||
<Badge variant="secondary">Connected</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleUnlinkSocial(account.provider)}
|
||||
disabled={isDisconnecting}
|
||||
>
|
||||
{isDisconnecting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Disconnecting...
|
||||
</>
|
||||
) : (
|
||||
'Disconnect'
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSocialLogin(account.provider)}
|
||||
>
|
||||
Connect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Multi-Factor Authentication - Full Width (Moderators+ Only) */}
|
||||
{isModerator() && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Smartphone className="w-5 h-5" />
|
||||
<CardTitle>Multi-Factor Authentication</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Add an extra layer of security to your account with Multi-Factor Authentication
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TOTPSetup />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Active Sessions - Full Width */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-5 h-5" />
|
||||
<CardTitle>Active Sessions {sessions.length > 0 && `(${sessions.length})`}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Review and manage your active login sessions across all devices
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loadingSessions ? (
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="flex items-start justify-between p-3 border rounded-lg">
|
||||
<div className="flex gap-3 flex-1">
|
||||
<Skeleton className="w-4 h-4 rounded" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-48" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="w-20 h-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : sessions.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{sessions.map((session) => (
|
||||
<div key={session.id} className="flex items-start justify-between p-3 border rounded-lg">
|
||||
<div className="flex gap-3">
|
||||
{getDeviceIcon(session.user_agent)}
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
{getBrowserName(session.user_agent)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{session.ip && (
|
||||
<span title="Last 8 characters of hashed IP address for privacy">
|
||||
{session.ip} •{' '}
|
||||
</span>
|
||||
)}
|
||||
Last active: {format(new Date(session.refreshed_at || session.created_at), 'PPpp')}
|
||||
{session.aal === 'aal2' && ' • Multi-Factor'}
|
||||
</p>
|
||||
{session.not_after && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Expires: {format(new Date(session.not_after), 'PPpp')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => initiateSessionRevoke(session.id)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Revoke
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-8 text-muted-foreground">
|
||||
<p className="text-sm">No active sessions found</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<SessionRevokeConfirmDialog
|
||||
open={!!sessionToRevoke}
|
||||
onOpenChange={(open) => !open && setSessionToRevoke(null)}
|
||||
onConfirm={confirmRevokeSession}
|
||||
isCurrentSession={sessionToRevoke?.isCurrent ?? false}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user