fix: user diff

Author: Anonymous961

backend/config/tiers.ts

@@ -10,7 +10,7 @@ export const TIERS = {
     },
     [TIER.FREE]: {
         maxSize: 200 * 1024 * 1024,
-        expiryHours: 24,
+        expiryHours: 168, // 7 days
         password: false,
     },
     [TIER.PRO]: {

backend/routes/handleFile.ts

@@ -41,8 +41,19 @@ router.post("/upload-file", async (req, res) => {
     const tierConfig = TIERS[tierKey];
 
     if (size > tierConfig.maxSize) {
+        const maxSizeMB = Math.round(tierConfig.maxSize / (1024 * 1024));
+        const fileSizeMB = Math.round(size / (1024 * 1024));
+
         return res.status(400).json({
-            error: `File too large. Max size for ${tier} tier: ${tierConfig.maxSize / (1024 * 1024)}MB`
+            error: "FILE_TOO_LARGE",
+            message: `File too large. Your file is ${fileSizeMB}MB but the ${tier} tier limit is ${maxSizeMB}MB.`,
+            details: {
+                fileSize: size,
+                maxSize: tierConfig.maxSize,
+                tier: tier,
+                fileSizeMB: fileSizeMB,
+                maxSizeMB: maxSizeMB
+            }
         })
     }
 

frontend/app/api/auth/[...nextauth]/route.ts

@@ -66,10 +66,16 @@ const handler = NextAuth({
                         const userData = await response.json();
                         session.user.id = userData.id;
                         session.user.tier = userData.tier;
+                    } else {
+                        console.warn('Failed to fetch fresh user data, using cached data');
+                        session.user.id = token.id;
+                        session.user.tier = token.tier;
                     }
                 }
             } catch (error) {
                 console.error('Error fetching user session:', error);
+                session.user.id = token.id;
+                session.user.tier = token.tier;
             }
 
             return session;

frontend/app/page.tsx

@@ -4,12 +4,13 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import UploadSuccessAlert from "@/components/UploadSuccessAlert";
+import FileSizeErrorAlert from "@/components/FileSizeErrorAlert";
 import FileUploadCard from "@/components/FileUploadCard";
 import WelcomeCard from "@/components/WelcomeCard";
 import TierInfoSection from "@/components/TierInfoSection";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-import { uploadFile } from "@/lib/api";
+import { uploadFile, validateFileSize, calculateExpiryTime } from "@/lib/api";
 
 export default function Home() {
   const router = useRouter();
@@ -21,6 +22,7 @@ export default function Home() {
   const [fileId, setFileId] = useState<string | null>(null);
   const [fileSize, setFileSize] = useState<string>("");
   const [uploadSuccess, setUploadSuccess] = useState<boolean>(false);
+  const [fileSizeError, setFileSizeError] = useState<string | null>(null);
 
   // Auto-close success alert after 3 seconds
   useEffect(() => {
@@ -38,12 +40,42 @@ export default function Home() {
     setIsSuccess(false);
     setUploadSuccess(false);
     setProgress(0);
-    setFileSize((selectedFile.size / 1024).toFixed(2) + " KB");
+    setFileSizeError(null);
+
+    // Convert to appropriate unit
+    const sizeInMB = selectedFile.size / (1024 * 1024);
+    if (sizeInMB >= 1) {
+      setFileSize(sizeInMB.toFixed(2) + " MB");
+    } else {
+      setFileSize((selectedFile.size / 1024).toFixed(2) + " KB");
+    }
+  };
+
+  const scrollToPricing = () => {
+    const pricingSection = document.getElementById('pricing');
+    if (pricingSection) {
+      pricingSection.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
   };
 
   const handleUpload = async () => {
     if (!file) return;
 
+    // Clear any previous errors
+    setFileSizeError(null);
+
+    // Client-side validation first
+    const currentTier = session?.user?.tier?.toLowerCase() || "anonymous";
+    const validation = validateFileSize(file, currentTier);
+
+    if (!validation.isValid) {
+      setFileSizeError(validation.error || "File size validation failed");
+      return;
+    }
+
     setIsUploading(true);
     setProgress(0);
     setIsSuccess(false);
@@ -53,7 +85,7 @@ export default function Home() {
       // 1. Request presigned URL from backend using the new API utility
       const { url, key, fileId, tier } = await uploadFile(
         file,
-        session?.user?.tier?.toLowerCase() || "anonymous",
+        currentTier,
         ""
       );
 
@@ -87,7 +119,7 @@ export default function Home() {
               size: file.size,
               tier: tier || "anonymous",
               hasPassword: false,
-              expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+              expiresAt: calculateExpiryTime(tier || "anonymous"),
               downloadCount: 0
             };
 
@@ -117,9 +149,17 @@ export default function Home() {
         xhr.setRequestHeader("Content-Type", file.type);
         xhr.send(file);
       });
-    } catch (err) {
+    } catch (err: any) {
       console.error("Upload failed", err);
       setIsUploading(false);
+
+      // Handle file size errors specifically
+      if (err.error === "FILE_TOO_LARGE" || err.message?.includes("File too large")) {
+        setFileSizeError(err.message || "File is too large for your current tier");
+      } else {
+        // Handle other errors
+        setFileSizeError(err.message || "Upload failed. Please try again.");
+      }
     } finally {
       setIsUploading(false);
     }
@@ -144,6 +184,7 @@ export default function Home() {
                   isUploading={isUploading}
                   progress={progress}
                   uploadSuccess={uploadSuccess}
+                  tier={session?.user?.tier?.toLowerCase() || "anonymous"}
                 />
               </div>
 
@@ -163,6 +204,16 @@ export default function Home() {
       {isSuccess && (
         <UploadSuccessAlert onClose={() => setIsSuccess(false)} />
       )}
+
+      {/* File Size Error Alert */}
+      {fileSizeError && (
+        <FileSizeErrorAlert
+          error={fileSizeError}
+          onClose={() => setFileSizeError(null)}
+          onUpgrade={scrollToPricing}
+        />
+      )}
+
       <Footer />
     </div>
   );

frontend/app/results/[id]/page.tsx

@@ -21,6 +21,7 @@ import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import QRCode from "qrcode";
 import Image from "next/image";
+import { calculateExpiryTime } from "@/lib/api";
 
 interface FileData {
   id: string;
@@ -92,7 +93,7 @@ export default function ResultsPage() {
             size: 1024000, // 1MB default
             tier: "anonymous",
             hasPassword: false,
-            expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+            expiresAt: calculateExpiryTime("anonymous"),
             downloadCount: 0
           });
         }
@@ -106,7 +107,7 @@ export default function ResultsPage() {
           size: 1024000,
           tier: "anonymous",
           hasPassword: false,
-          expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+          expiresAt: calculateExpiryTime("anonymous"),
           downloadCount: 0
         });
       } finally {

frontend/components/FileSizeErrorAlert.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { X, AlertTriangle, Crown } from "lucide-react";
+
+interface FileSizeErrorAlertProps {
+    error: string;
+    onClose: () => void;
+    onUpgrade?: () => void;
+}
+
+export default function FileSizeErrorAlert({ error, onClose, onUpgrade }: FileSizeErrorAlertProps) {
+    return (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
+                <div className="p-6">
+                    <div className="flex items-start gap-3">
+                        <div className="flex-shrink-0">
+                            <AlertTriangle className="w-6 h-6 text-red-500" />
+                        </div>
+                        <div className="flex-1">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                File Too Large
+                            </h3>
+                            <p className="text-gray-600 mb-4">
+                                {error}
+                            </p>
+                            <div className="flex gap-3">
+                                {onUpgrade && (
+                                    <Button
+                                        onClick={onUpgrade}
+                                        className="flex items-center gap-2 bg-purple-600 hover:bg-purple-700"
+                                    >
+                                        <Crown className="w-4 h-4" />
+                                        Upgrade to Pro
+                                    </Button>
+                                )}
+                                <Button
+                                    onClick={onClose}
+                                    variant="outline"
+                                    className="flex items-center gap-2"
+                                >
+                                    <X className="w-4 h-4" />
+                                    Close
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+

frontend/components/FileUploadCard.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Progress } from "@/components/ui/progress";
 import { Upload, File, Loader2, CheckCircle2 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { getTierDisplayInfo } from "@/lib/api";
 
 interface FileUploadCardProps {
   onFileSelect: (file: File) => void;
@@ -14,6 +15,7 @@ interface FileUploadCardProps {
   isUploading: boolean;
   progress: number;
   uploadSuccess: boolean;
+  tier?: string;
 }
 
 export default function FileUploadCard({
@@ -22,7 +24,8 @@ export default function FileUploadCard({
   file,
   isUploading,
   progress,
-  uploadSuccess
+  uploadSuccess,
+  tier = "anonymous"
 }: FileUploadCardProps) {
   const [isDragOver, setIsDragOver] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -37,7 +40,7 @@ export default function FileUploadCard({
   const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsDragOver(false);
-    
+
     const droppedFile = e.dataTransfer.files[0];
     if (droppedFile) {
       onFileSelect(droppedFile);
@@ -61,6 +64,8 @@ export default function FileUploadCard({
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
 
+  const tierInfo = getTierDisplayInfo(tier);
+
   return (
     <Card className="w-full max-w-md">
       <CardHeader>
@@ -69,10 +74,10 @@ export default function FileUploadCard({
           Upload File
         </CardTitle>
         <CardDescription>
-          Choose a file to share securely with our anonymous tier
+          Choose a file to share securely with your {tierInfo.name} tier
         </CardDescription>
       </CardHeader>
-      
+
       <CardContent className="space-y-4">
         {/* File Drop Zone */}
         <div
@@ -82,8 +87,8 @@ export default function FileUploadCard({
           onDragLeave={handleDragLeave}
           className={cn(
             "relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200 cursor-pointer",
-            isDragOver 
-              ? "border-blue-500 bg-blue-50" 
+            isDragOver
+              ? "border-blue-500 bg-blue-50"
               : "border-gray-300 hover:border-gray-400 hover:bg-gray-50",
             isUploading && "opacity-50 cursor-not-allowed",
             uploadSuccess && "border-green-500 bg-green-50"
@@ -96,7 +101,7 @@ export default function FileUploadCard({
             className="hidden"
             disabled={isUploading}
           />
-          
+
           <div className="flex flex-col items-center gap-3">
             {uploadSuccess ? (
               <CheckCircle2 className="w-12 h-12 text-green-500" />
@@ -105,21 +110,21 @@ export default function FileUploadCard({
             ) : (
               <Upload className="w-12 h-12 text-gray-400" />
             )}
-            
+
             <div className="space-y-1">
               <p className="text-sm font-medium text-gray-900">
-                {uploadSuccess 
-                  ? "Upload Complete!" 
-                  : isUploading 
-                    ? "Uploading..." 
-                    : isDragOver 
-                      ? "Drop file here" 
+                {uploadSuccess
+                  ? "Upload Complete!"
+                  : isUploading
+                    ? "Uploading..."
+                    : isDragOver
+                      ? "Drop file here"
                       : "Click to upload or drag & drop"
                 }
               </p>
               <p className="text-xs text-gray-500">
-                {uploadSuccess 
-                  ? "Your file is ready to share" 
+                {uploadSuccess
+                  ? "Your file is ready to share"
                   : "Supports all file types"
                 }
               </p>
@@ -182,20 +187,20 @@ export default function FileUploadCard({
         <div className="text-center space-y-2 pt-2 border-t">
           <div className="flex justify-center gap-4 text-xs text-gray-500">
             <span className="flex items-center gap-1">
-              <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
-              Anonymous
+              <div className={`w-2 h-2 ${tierInfo.color} rounded-full`}></div>
+              {tierInfo.name}
             </span>
             <span className="flex items-center gap-1">
-              <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
-              24h Expiry
+              <div className={`w-2 h-2 ${tierInfo.color} rounded-full`}></div>
+              {tierInfo.expiry} Expiry
             </span>
             <span className="flex items-center gap-1">
-              <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
-              Up to 10MB
+              <div className={`w-2 h-2 ${tierInfo.color} rounded-full`}></div>
+              Up to {tierInfo.maxSize}
             </span>
           </div>
           <p className="text-xs text-gray-400">
-            No registration required • Secure & private
+            {tierInfo.description}
           </p>
         </div>
       </CardContent>