Update frontend/src/pages/Profile.jsx

frontend/src/pages/Profile.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useAuth } from '../components/AuthContext';
 import { toast } from 'react-hot-toast';
 
 export const Profile = () => {
   const { token, logout } = useAuth();
+  const fileInputRef = useRef(null);
   const [profile, setProfile] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -62,6 +63,186 @@ export const Profile = () => {
     }
   };
 
+  useEffect(() => {
+    const preventWindowDrop = (e) => {
+      e.preventDefault();
+    };
+    window.addEventListener('dragover', preventWindowDrop);
+    window.addEventListener('drop', preventWindowDrop);
+    return () => {
+      window.removeEventListener('dragover', preventWindowDrop);
+      window.removeEventListener('drop', preventWindowDrop);
+    };
+  }, []);
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploadingLogo, setUploadingLogo] = useState(false);
+
+  const handleUploadLogoUrl = async (imageUrl) => {
+    setUploadingLogo(true);
+    try {
+      const res = await fetch('/api/auth/organizations/logo', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ logo_url: imageUrl })
+      });
+      if (res.ok) {
+        toast.success("Report branding updated! Future PDF reports will include your logo.");
+        fetchBrandingManual();
+      } else {
+        const data = await res.json();
+        toast.error(data.message || "Failed to download and process web image.");
+      }
+    } catch (err) {
+      toast.error("Error uploading logo URL.");
+    } finally {
+      setUploadingLogo(false);
+    }
+  };
+
+  const handleUploadLogoFile = async (file) => {
+    if (!file) return;
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error("File size exceeds 5MB limit.");
+      return;
+    }
+    setUploadingLogo(true);
+    const formData = new FormData();
+    formData.append('logo', file);
+    try {
+      const res = await fetch('/api/auth/organizations/logo', {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+        body: formData
+      });
+      if (res.ok) {
+        toast.success("Report branding updated! Future PDF reports will include your logo.");
+        fetchBrandingManual();
+      } else {
+        const data = await res.json();
+        toast.error(data.message || "Failed to update report branding.");
+      }
+    } catch (err) {
+      toast.error("Error uploading logo.");
+    } finally {
+      setUploadingLogo(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'copy';
+    }
+    if (!isDragging) setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Only set false if leaving the main drop container
+    if (e.currentTarget && e.relatedTarget && e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    setIsDragging(false);
+  };
+
+  const handleDrop = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    // 1. Direct File Drop (from File Explorer or Desktop)
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const file = e.dataTransfer.files[0];
+      if (file && (file.type.startsWith('image/') || file.type === '' || file.name.match(/\.(png|jpe?g|webp|svg|gif|bmp)$/i))) {
+        await handleUploadLogoFile(file);
+        return;
+      }
+    }
+
+    // 2. DataTransfer Items (Dragging image element or file item from browser window)
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        const item = e.dataTransfer.items[i];
+        if (item.kind === 'file') {
+          const file = item.getAsFile();
+          if (file && (file.type.startsWith('image/') || file.name.match(/\.(png|jpe?g|webp|svg|gif|bmp)$/i))) {
+            await handleUploadLogoFile(file);
+            return;
+          }
+        }
+      }
+    }
+
+    // 3. Chrome / Web Image / HTML / URL Drag
+    const htmlData = e.dataTransfer.getData('text/html');
+    const uriData = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('URL') || e.dataTransfer.getData('text/plain');
+
+    let imageUrl = '';
+    if (htmlData) {
+      try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(htmlData, 'text/html');
+        const img = doc.querySelector('img');
+        if (img && img.src) {
+          imageUrl = img.src;
+        }
+      } catch (err) {
+        console.warn("Could not parse dragged HTML", err);
+      }
+    }
+
+    if (!imageUrl && uriData && uriData.trim().match(/^https?:\/\/.+/i)) {
+      imageUrl = uriData.trim();
+    }
+
+    if (imageUrl) {
+      // Base64 Data URL handling
+      if (imageUrl.startsWith('data:image/')) {
+        try {
+          const arr = imageUrl.split(',');
+          const mime = arr[0].match(/:(.*?);/)[1];
+          const bstr = atob(arr[1]);
+          let n = bstr.length;
+          const u8arr = new Uint8Array(n);
+          while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+          }
+          const file = new File([u8arr], 'dragged_logo.png', { type: mime });
+          await handleUploadLogoFile(file);
+        } catch (err) {
+          toast.error("Invalid base64 image data.");
+        }
+        return;
+      }
+
+      // Web HTTP/HTTPS URL handling - First try frontend fetch, fallback to backend fetch
+      setUploadingLogo(true);
+      try {
+        const res = await fetch(imageUrl, { mode: 'cors' });
+        if (!res.ok) throw new Error("CORS or HTTP error");
+        const blob = await res.blob();
+        const contentType = blob.type || 'image/png';
+        const fileExt = contentType.split('/')[1] || 'png';
+        const file = new File([blob], `dragged_logo.${fileExt}`, { type: contentType });
+        await handleUploadLogoFile(file);
+      } catch (frontendErr) {
+        // Fallback: send web image URL to backend to download server-side (bypasses CORS!)
+        await handleUploadLogoUrl(imageUrl);
+      } finally {
+        setUploadingLogo(false);
+      }
+      return;
+    }
+
+    toast.error("Please drop a valid image file (PNG, JPG, WebP, SVG).");
+  };
+
   const [passwordData, setPasswordData] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' });
   const [passwordStatus, setPasswordStatus] = useState({ loading: false, error: null, success: false });
   const [showPassword, setShowPassword] = useState({ current: false, new: false, confirm: false });
@@ -430,71 +611,77 @@ export const Profile = () => {
 
       {/* Second Row for Report Branding */}
       {(profile.role === 'super_admin' || profile.role === 'org_admin') && (
-        <div className="w-full bg-surface-container-lowest border border-outline-variant/70 rounded-2xl shadow-2xs p-6 mt-6">
+        <div className="w-full bg-white border border-[#e5e7eb] rounded-xl shadow-xs p-6 md:p-8 mt-6">
           <div className="flex items-center gap-2 mb-1">
-            <span className="material-symbols-outlined text-[#2563eb] text-[24px]">palette</span>
-            <h3 className="font-bold text-on-surface text-[18px] m-0">
+            <span className="material-symbols-outlined text-[#2563eb] text-[22px]">palette</span>
+            <h3 className="font-bold text-[#111827] text-[18px] m-0">
               Report Branding
             </h3>
           </div>
-          <p className="text-on-surface-variant text-sm mb-6 m-0">
+          <p className="text-[#4b5563] text-sm mt-1 mb-5 m-0">
             Customize generated PDF security reports with your organization's logo.
           </p>
 
-          <div className="border-t border-outline-variant/40 pt-6">
-            <div className="border-2 border-dashed border-outline-variant/60 rounded-xl bg-surface-container-low/30 p-10 flex flex-col items-center justify-center text-center">
-              <span className="material-symbols-outlined text-[#2563eb] text-[44px] mb-3">cloud_upload</span>
-              
-              <h4 className="font-bold text-on-surface text-[16px] mb-1">
-                Upload Organization Logo
-              </h4>
-              <p className="text-on-surface-variant text-sm mb-5">
-                Upload your custom logo to brand all PDF security reports
-              </p>
+          <div className="border-t border-[#f3f4f6] pt-6">
+            <div
+              onDragOver={handleDragOver}
+              onDragEnter={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              onClick={() => fileInputRef.current?.click()}
+              className={`relative border-2 border-dashed rounded-xl py-12 px-6 flex flex-col items-center justify-center text-center transition-all duration-200 cursor-pointer ${
+                isDragging
+                  ? 'border-[#2563eb] bg-[#eff6ff] scale-[1.005]'
+                  : 'border-[#d1d5db] bg-[#f9fafb] hover:border-[#9ca3af] hover:bg-[#f3f4f6]'
+              }`}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                onChange={(e) => {
+                  if (e.target.files && e.target.files[0]) {
+                    handleUploadLogoFile(e.target.files[0]);
+                  }
+                }}
+                className="hidden"
+              />
 
-              {reportLogoUrl && (
-                <div className="mb-4 p-2 bg-surface-container rounded-lg border border-outline-variant/40">
-                  <img src={reportLogoUrl} alt="Organization Logo" className="max-h-20 max-w-full object-contain rounded" />
-                </div>
-              )}
+              <div className="pointer-events-none flex flex-col items-center justify-center">
+                <span className={`material-symbols-outlined text-[36px] text-[#2563eb] mb-3 transition-transform ${isDragging ? 'scale-110' : ''} ${uploadingLogo ? 'animate-spin' : ''}`}>
+                  {uploadingLogo ? 'sync' : 'cloud'}
+                </span>
+                
+                <h4 className="font-bold text-[#111827] text-[16px] mb-1 m-0">
+                  {isDragging ? 'Drop Image Here to Upload' : 'Upload Organization Logo'}
+                </h4>
+                <p className="text-[#6b7280] text-sm mt-1 mb-5 m-0">
+                  {isDragging ? 'Release to upload your custom logo immediately' : 'Upload your custom logo to brand all PDF security reports'}
+                </p>
+
+                {reportLogoUrl && (
+                  <div className="mb-5 p-3 bg-white rounded-lg border border-[#e5e7eb] shadow-2xs flex items-center justify-center pointer-events-auto">
+                    <img src={reportLogoUrl} alt="Organization Logo" className="max-h-16 max-w-xs object-contain" />
+                  </div>
+                )}
+              </div>
 
               <button
                 type="button"
-                onClick={() => {
-                  const fileInput = document.createElement('input');
-                  fileInput.type = 'file';
-                  fileInput.accept = 'image/*';
-                  fileInput.onchange = async (e) => {
-                    const file = e.target.files[0];
-                    if (!file) return;
-                    const formData = new FormData();
-                    formData.append('logo', file);
-                    try {
-                      const res = await fetch('/api/auth/organizations/logo', {
-                        method: 'POST',
-                        headers: { 'Authorization': `Bearer ${token}` },
-                        body: formData
-                      });
-                      if (res.ok) {
-                        toast.success("Report branding updated! Future PDF reports will include your logo.");
-                        fetchBrandingManual();
-                      } else {
-                        const data = await res.json();
-                        toast.error(data.message || "Failed to update report branding.");
-                      }
-                    } catch (err) {
-                      toast.error("Error uploading logo.");
-                    }
-                  };
-                  fileInput.click();
+                disabled={uploadingLogo}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  fileInputRef.current?.click();
                 }}
-                className="bg-[#2563eb] hover:bg-[#1d4ed8] text-white font-bold px-6 py-2.5 rounded-lg flex items-center gap-2 text-sm transition-all cursor-pointer shadow-2xs mb-4"
+                className="relative z-20 bg-[#2563eb] hover:bg-[#1d4ed8] text-white font-semibold px-5 py-2.5 rounded-lg flex items-center gap-2 text-sm shadow-xs transition-colors cursor-pointer mb-4 disabled:opacity-50"
               >
-                <span className="material-symbols-outlined text-[18px]">upload</span>
-                <span>{reportLogoUrl ? 'Change Logo' : 'Upload Here'}</span>
+                <span className={`material-symbols-outlined text-[18px] ${uploadingLogo ? 'animate-spin' : ''}`}>
+                  {uploadingLogo ? 'sync' : 'upload'}
+                </span>
+                <span>{uploadingLogo ? 'Uploading...' : (reportLogoUrl ? 'Change Logo' : 'Upload Here')}</span>
               </button>
 
-              <p className="text-on-surface-variant text-[12px] m-0 font-medium">
+              <p className="text-[#6b7280] text-[12px] m-0 font-normal pointer-events-none">
                 Supported formats: PNG, JPG, WebP, SVG (Max 5MB)
               </p>
             </div>