mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 02:51:12 -05:00
499 lines
18 KiB
TypeScript
499 lines
18 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useProfile } from '@/hooks/useProfile';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { Trash2, Mail, AlertCircle, X, Check, Loader2 } from 'lucide-react';
|
|
import { PhotoUpload } from '@/components/upload/PhotoUpload';
|
|
import { notificationService } from '@/lib/notificationService';
|
|
import { EmailChangeDialog } from './EmailChangeDialog';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { AccountDeletionDialog } from './AccountDeletionDialog';
|
|
import { DeletionStatusBanner } from './DeletionStatusBanner';
|
|
import { EmailChangeStatus } from './EmailChangeStatus';
|
|
import { usernameSchema, displayNameSchema, bioSchema } from '@/lib/validation';
|
|
import { z } from 'zod';
|
|
import { AccountDeletionRequest } from '@/types/database';
|
|
import { handleError, handleSuccess, AppError } from '@/lib/errorHandler';
|
|
import { useAvatarUpload } from '@/hooks/useAvatarUpload';
|
|
import { useUsernameValidation } from '@/hooks/useUsernameValidation';
|
|
import { useAutoSave } from '@/hooks/useAutoSave';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const profileSchema = z.object({
|
|
username: usernameSchema,
|
|
display_name: displayNameSchema,
|
|
bio: bioSchema
|
|
});
|
|
|
|
type ProfileFormData = z.infer<typeof profileSchema>;
|
|
|
|
export function AccountProfileTab() {
|
|
const { user, pendingEmail, clearPendingEmail } = useAuth();
|
|
const { data: profile, refreshProfile } = useProfile(user?.id);
|
|
const [loading, setLoading] = useState(false);
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
|
const [showEmailDialog, setShowEmailDialog] = useState(false);
|
|
const [showCancelEmailDialog, setShowCancelEmailDialog] = useState(false);
|
|
const [cancellingEmail, setCancellingEmail] = useState(false);
|
|
const [showDeletionDialog, setShowDeletionDialog] = useState(false);
|
|
const [deletionRequest, setDeletionRequest] = useState<AccountDeletionRequest | null>(null);
|
|
|
|
// Initialize avatar upload hook
|
|
const { avatarUrl, avatarImageId, isUploading: avatarLoading, uploadAvatar } = useAvatarUpload(
|
|
profile?.avatar_url || '',
|
|
profile?.avatar_image_id || '',
|
|
profile?.username || ''
|
|
);
|
|
|
|
const form = useForm<ProfileFormData>({
|
|
resolver: zodResolver(profileSchema),
|
|
defaultValues: {
|
|
username: profile?.username || '',
|
|
display_name: profile?.display_name || '',
|
|
bio: profile?.bio || ''
|
|
}
|
|
});
|
|
|
|
// Username validation
|
|
const usernameValue = form.watch('username');
|
|
const usernameValidation = useUsernameValidation(usernameValue, profile?.username);
|
|
|
|
// Auto-save (disabled for now - can be enabled per user preference)
|
|
const formData = form.watch();
|
|
const { isSaving, lastSaved } = useAutoSave({
|
|
data: formData,
|
|
onSave: async (data) => {
|
|
const isValid = await form.trigger();
|
|
if (!isValid || usernameValidation.isAvailable === false) return;
|
|
await handleFormSubmit(data);
|
|
},
|
|
debounceMs: 3000,
|
|
enabled: false, // TODO: Get from user preferences
|
|
isValid: usernameValidation.isAvailable !== false
|
|
});
|
|
|
|
// Check for existing deletion request on mount (both pending and confirmed)
|
|
useEffect(() => {
|
|
const checkDeletionRequest = async () => {
|
|
if (!user?.id) return;
|
|
|
|
const { data, error } = await supabase
|
|
.from('account_deletion_requests')
|
|
.select('*')
|
|
.eq('user_id', user.id)
|
|
.in('status', ['pending', 'confirmed'])
|
|
.maybeSingle();
|
|
|
|
if (!error && data) {
|
|
setDeletionRequest(data);
|
|
}
|
|
};
|
|
|
|
checkDeletionRequest();
|
|
}, [user?.id]);
|
|
|
|
const handleFormSubmit = async (data: ProfileFormData) => {
|
|
if (!user) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
// Use the update_profile RPC function with server-side validation
|
|
const { data: result, error } = await supabase.rpc('update_profile', {
|
|
p_username: data.username,
|
|
p_display_name: data.display_name || null,
|
|
p_bio: data.bio || null
|
|
});
|
|
|
|
if (error) {
|
|
// Handle rate limiting error
|
|
if (error.code === 'P0001') {
|
|
const resetTime = error.message.match(/Try again at (.+)$/)?.[1];
|
|
throw new AppError(
|
|
error.message,
|
|
'RATE_LIMIT',
|
|
`Too many profile updates. ${resetTime ? 'Try again at ' + new Date(resetTime).toLocaleTimeString() : 'Please wait a few minutes.'}`
|
|
);
|
|
}
|
|
throw error;
|
|
}
|
|
|
|
// Type the RPC result
|
|
const rpcResult = result as unknown as { success: boolean; changes_count: number };
|
|
|
|
// Update Novu subscriber if username changed
|
|
if (rpcResult?.changes_count > 0 && notificationService.isEnabled()) {
|
|
await notificationService.updateSubscriber({
|
|
subscriberId: user.id,
|
|
email: user.email,
|
|
firstName: data.username,
|
|
});
|
|
}
|
|
|
|
await refreshProfile();
|
|
handleSuccess('Profile updated', 'Your profile has been successfully updated.');
|
|
} catch (error: unknown) {
|
|
handleError(error, { action: 'Update profile', userId: user.id });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const onSubmit = async (data: ProfileFormData) => {
|
|
await handleFormSubmit(data);
|
|
};
|
|
|
|
const handleAvatarUpload = async (urls: string[], imageId?: string) => {
|
|
await uploadAvatar(urls, imageId);
|
|
await refreshProfile();
|
|
};
|
|
|
|
const handleCancelEmailChange = async () => {
|
|
if (!user?.email || !pendingEmail) return;
|
|
|
|
setCancellingEmail(true);
|
|
try {
|
|
// Ensure we have a valid session with access token
|
|
const { data: { session }, error: sessionError } = await supabase.auth.getSession();
|
|
|
|
if (sessionError || !session?.access_token) {
|
|
throw new Error('Your session has expired. Please refresh the page and try again.');
|
|
}
|
|
|
|
// Call the edge function with explicit authorization header
|
|
const { data, error, requestId } = await invokeWithTracking(
|
|
'cancel-email-change',
|
|
{},
|
|
user.id
|
|
);
|
|
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
|
|
if (!data?.success) {
|
|
throw new Error(data?.error || 'Failed to cancel email change');
|
|
}
|
|
|
|
// Clear the pending email state immediately without refreshing session
|
|
clearPendingEmail();
|
|
|
|
// Update Novu subscriber back to current email
|
|
if (notificationService.isEnabled()) {
|
|
await notificationService.updateSubscriber({
|
|
subscriberId: user.id,
|
|
email: user.email,
|
|
firstName: profile?.username || user.email.split('@')[0],
|
|
});
|
|
}
|
|
|
|
handleSuccess('Email change cancelled', 'Your email change request has been cancelled.');
|
|
|
|
setShowCancelEmailDialog(false);
|
|
await refreshProfile();
|
|
} catch (error: unknown) {
|
|
handleError(error, { action: 'Cancel email change' });
|
|
} finally {
|
|
setCancellingEmail(false);
|
|
}
|
|
};
|
|
|
|
const handleDeletionRequested = async () => {
|
|
// Refresh deletion request data (check for both pending and confirmed)
|
|
const { data, error } = await supabase
|
|
.from('account_deletion_requests')
|
|
.select('*')
|
|
.eq('user_id', user!.id)
|
|
.in('status', ['pending', 'confirmed'])
|
|
.maybeSingle();
|
|
|
|
if (!error && data) {
|
|
setDeletionRequest(data);
|
|
}
|
|
};
|
|
|
|
const handleDeletionCancelled = () => {
|
|
setDeletionRequest(null);
|
|
};
|
|
|
|
const isDeactivated = profile?.deactivated || false;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Deletion Status Banner */}
|
|
{deletionRequest && (
|
|
<DeletionStatusBanner
|
|
scheduledDate={deletionRequest.scheduled_deletion_at}
|
|
status={deletionRequest.status as 'pending' | 'confirmed'}
|
|
onCancelled={handleDeletionCancelled}
|
|
/>
|
|
)}
|
|
|
|
{/* Profile Picture + Account Info Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Profile Picture */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Profile Picture</CardTitle>
|
|
<CardDescription>Upload your profile picture</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PhotoUpload
|
|
variant="avatar"
|
|
maxFiles={1}
|
|
maxSizeMB={1}
|
|
existingPhotos={avatarUrl ? [avatarUrl] : []}
|
|
onUploadComplete={handleAvatarUpload}
|
|
currentImageId={avatarImageId}
|
|
onError={(error) => {
|
|
handleError(new Error(error), { action: 'Upload avatar' });
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Account Information */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Account Information</CardTitle>
|
|
<CardDescription>View your account details</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{pendingEmail && (
|
|
<EmailChangeStatus
|
|
currentEmail={user?.email || ''}
|
|
pendingEmail={pendingEmail}
|
|
onCancel={() => setShowCancelEmailDialog(true)}
|
|
/>
|
|
)}
|
|
|
|
<div className="p-4 bg-muted/50 rounded-lg space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">Email Address</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<p className="text-sm text-muted-foreground">{user?.email}</p>
|
|
{pendingEmail ? (
|
|
<Badge variant="secondary" className="bg-blue-500/10 text-blue-500 border-blue-500/20 text-xs">
|
|
Change Pending
|
|
</Badge>
|
|
) : user?.email_confirmed_at ? (
|
|
<Badge variant="secondary" className="text-xs">Verified</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="text-xs">Pending Verification</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowEmailDialog(true)}
|
|
disabled={!!pendingEmail}
|
|
>
|
|
<Mail className="w-4 h-4 mr-2" />
|
|
Change
|
|
</Button>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<p className="text-sm font-medium">Account Created</p>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{profile?.created_at ? new Date(profile.created_at).toLocaleDateString() : 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Profile Information */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Profile Information</CardTitle>
|
|
<CardDescription>Update your public profile details</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">
|
|
Username *
|
|
{usernameValidation.isChecking && (
|
|
<Loader2 className="inline ml-2 w-3 h-3 animate-spin" />
|
|
)}
|
|
</Label>
|
|
<Input
|
|
id="username"
|
|
{...form.register('username')}
|
|
placeholder="Enter your username"
|
|
disabled={isDeactivated}
|
|
className={cn(
|
|
usernameValidation.error && !form.formState.errors.username && "border-destructive",
|
|
usernameValidation.isAvailable && "border-green-500"
|
|
)}
|
|
/>
|
|
{usernameValidation.isChecking ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Checking availability...
|
|
</p>
|
|
) : usernameValidation.isAvailable === false && !form.formState.errors.username ? (
|
|
<p className="text-sm text-destructive flex items-center gap-1">
|
|
<X className="w-3 h-3" />
|
|
{usernameValidation.error}
|
|
</p>
|
|
) : usernameValidation.isAvailable === true && !form.formState.errors.username ? (
|
|
<p className="text-sm text-green-600 flex items-center gap-1">
|
|
<Check className="w-3 h-3" />
|
|
Username is available
|
|
</p>
|
|
) : form.formState.errors.username ? (
|
|
<p className="text-sm text-destructive">
|
|
{form.formState.errors.username.message}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="display_name">Display Name</Label>
|
|
<Input
|
|
id="display_name"
|
|
{...form.register('display_name')}
|
|
placeholder="Enter your display name"
|
|
/>
|
|
{form.formState.errors.display_name && (
|
|
<p className="text-sm text-destructive">
|
|
{form.formState.errors.display_name.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bio">Bio</Label>
|
|
<Textarea
|
|
id="bio"
|
|
{...form.register('bio')}
|
|
placeholder="Tell us about yourself..."
|
|
rows={4}
|
|
/>
|
|
{form.formState.errors.bio && (
|
|
<p className="text-sm text-destructive">
|
|
{form.formState.errors.bio.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Button
|
|
type="submit"
|
|
disabled={
|
|
loading ||
|
|
isDeactivated ||
|
|
isSaving ||
|
|
usernameValidation.isChecking ||
|
|
usernameValidation.isAvailable === false
|
|
}
|
|
>
|
|
{loading || isSaving ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
|
|
{lastSaved && !loading && !isSaving && (
|
|
<span className="text-sm text-muted-foreground">
|
|
Last saved {formatDistanceToNow(lastSaved, { addSuffix: true })}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{isDeactivated && (
|
|
<p className="text-sm text-muted-foreground">
|
|
Your account is deactivated. Profile editing is disabled.
|
|
</p>
|
|
)}
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Email Change Dialog */}
|
|
{user && (
|
|
<EmailChangeDialog
|
|
open={showEmailDialog}
|
|
onOpenChange={setShowEmailDialog}
|
|
currentEmail={user.email || ''}
|
|
userId={user.id}
|
|
/>
|
|
)}
|
|
|
|
{/* Cancel Email Change Dialog */}
|
|
<AlertDialog open={showCancelEmailDialog} onOpenChange={setShowCancelEmailDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Cancel Email Change?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This will cancel your pending email change to <strong>{pendingEmail}</strong>.
|
|
Your email will remain as <strong>{user?.email}</strong>.
|
|
You can start a new email change request at any time.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={cancellingEmail}>Keep Change</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleCancelEmailChange}
|
|
disabled={cancellingEmail}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{cancellingEmail ? 'Cancelling...' : 'Yes, Cancel Change'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* Danger Zone */}
|
|
<Card className="border-destructive">
|
|
<CardHeader>
|
|
<CardTitle className="text-destructive">Danger Zone</CardTitle>
|
|
<CardDescription>
|
|
Permanently delete your account with a 2-week waiting period
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">Delete Account</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Your profile and reviews will be deleted, but your contributions (submissions, photos) will be preserved
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => setShowDeletionDialog(true)}
|
|
disabled={!!deletionRequest}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{deletionRequest ? 'Deletion Pending' : 'Delete Account'}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Account Deletion Dialog */}
|
|
<AccountDeletionDialog
|
|
open={showDeletionDialog}
|
|
onOpenChange={setShowDeletionDialog}
|
|
userEmail={user?.email || ''}
|
|
onDeletionRequested={handleDeletionRequested}
|
|
/>
|
|
</div>
|
|
);
|
|
} |