feat: improve file upload authentication and error handling

- Add better error messages for authentication failures
- Display warning in ReportForm when user is not signed in
- Update documentation with authentication requirements
- Improve error handling in reportService.uploadPhoto()

This helps users understand they need to be signed in to upload photos.

src/components/report/ReportForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@clerk/clerk-react';
 import { PhotoUpload, type PhotoMetadata } from './PhotoUpload';
 import { LocationSelector } from './LocationSelector';
 import { reportService } from '@/services/reportService';
@@ -56,6 +57,7 @@ const CONCERN_TYPES = [
 
 export function ReportForm() {
   const navigate = useNavigate();
+  const { isSignedIn, isLoaded } = useAuth();
   const [currentStep, setCurrentStep] = useState(1);
   const [formData, setFormData] = useState<FormData>({
     photos: [],
@@ -232,6 +234,31 @@ export function ReportForm() {
 
   return (
     <div className="max-w-3xl mx-auto">
+      {/* Authentication Warning */}
+      {isLoaded && !isSignedIn && (
+        <div className="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <div className="flex items-start">
+            <svg className="w-5 h-5 text-yellow-600 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+            </svg>
+            <div>
+              <h3 className="text-sm font-medium text-yellow-800">Authentication Required</h3>
+              <p className="mt-1 text-sm text-yellow-700">
+                You must be signed in to submit a report. Please{' '}
+                <a href="/sign-in" className="font-medium underline hover:text-yellow-900">
+                  sign in
+                </a>{' '}
+                or{' '}
+                <a href="/sign-up" className="font-medium underline hover:text-yellow-900">
+                  create an account
+                </a>{' '}
+                to continue.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+      
       {/* Progress Indicator */}
       <div className="mb-8">
         <div className="flex items-center justify-between">

src/services/reportService.ts

@@ -49,7 +49,17 @@ class ReportService {
     });
 
     if (!response.ok) {
-      throw new Error('Failed to upload photo');
+      if (response.status === 401) {
+        throw new Error('You must be signed in to upload photos. Please sign in and try again.');
+      }
+      
+      // Try to get error details from response
+      try {
+        const errorData = await response.json();
+        throw new Error(errorData.error?.message || 'Failed to upload photo');
+      } catch {
+        throw new Error('Failed to upload photo');
+      }
     }
 
     return response.json();