feat: overhaul public landing page and backup tooling

frontend/src/components/common/AuthenticatedImage.tsx

@@ -6,6 +6,23 @@ interface AuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageEleme
   fallbackSrc?: string;
   useWatermark?: boolean;
   isGallery?: boolean;
+  protectFromDownload?: boolean;
+  slug?: string;
+  photoId?: number;
+  requiresToken?: boolean;
+  secureUrlTemplate?: string;
+  downloadUrlTemplate?: string;
+  onProtectionViolation?: (violationType: string) => void;
+  watermarkText?: string;
+  overlayProtection?: boolean;
+  fragmentGrid?: boolean;
+  scrambleFragments?: boolean;
+  useCanvasRendering?: boolean;
+  blockKeyboardShortcuts?: boolean;
+  detectPrintScreen?: boolean;
+  detectDevTools?: boolean;
+  protectionLevel?: 'basic' | 'standard' | 'enhanced' | 'maximum';
+  useEnhancedProtection?: boolean;
 }
 
 export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
@@ -14,8 +31,46 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
   alt,
   useWatermark = false,
   isGallery = false,
+  protectFromDownload,
+  slug,
+  photoId,
+  requiresToken,
+  secureUrlTemplate,
+  downloadUrlTemplate,
+  onProtectionViolation,
+  watermarkText,
+  overlayProtection,
+  fragmentGrid,
+  scrambleFragments,
+  useCanvasRendering,
+  blockKeyboardShortcuts,
+  detectPrintScreen,
+  detectDevTools,
+  protectionLevel,
+  useEnhancedProtection,
   ...props
 }) => {
+  const unusedProps = {
+    protectFromDownload,
+    slug,
+    photoId,
+    requiresToken,
+    secureUrlTemplate,
+    downloadUrlTemplate,
+    onProtectionViolation,
+    watermarkText,
+    overlayProtection,
+    fragmentGrid,
+    scrambleFragments,
+    useCanvasRendering,
+    blockKeyboardShortcuts,
+    detectPrintScreen,
+    detectDevTools,
+    protectionLevel,
+    useEnhancedProtection
+  };
+  void unusedProps;
+
   const [imageSrc, setImageSrc] = useState<string>('');
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);

frontend/src/components/common/PasswordGenerator.tsx

@@ -183,7 +183,7 @@ export const PasswordGenerator: React.FC<PasswordGeneratorProps> = ({
                       <Button
                         type="button"
                         variant="outline"
-                        size="xs"
+                        size="sm"
                         onClick={() => selectPassword(password)}
                       >
                         {t('passwordGenerator.use')}
@@ -206,4 +206,4 @@ export const PasswordGenerator: React.FC<PasswordGeneratorProps> = ({
   );
 };
 
-export default PasswordGenerator;
+export default PasswordGenerator;

frontend/src/components/common/ProtectedImage.tsx

@@ -1,6 +1,12 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { ProtectionLevel } from '../../hooks/useImageProtection';
 
+type VendorStyle = CSSStyleDeclaration & {
+  webkitUserSelect?: string;
+  webkitTouchCallout?: string;
+  webkitUserDrag?: string;
+};
+
 interface ProtectedImageProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
   src: string;
   alt: string;
@@ -31,7 +37,6 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
-  const overlayCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
 
@@ -201,9 +206,6 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
         // Render normal image - ensure image is valid before drawing
         if (img.naturalWidth > 0 && img.naturalHeight > 0) {
           ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-          
-          // Verify the image was drawn by checking a pixel
-          const pixelData = ctx.getImageData(10, 10, 1, 1).data;
         }
       }
       
@@ -288,11 +290,12 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
     }
     
     // Apply CSS protection
-    canvas.style.userSelect = 'none';
-    canvas.style.webkitUserSelect = 'none';
-    canvas.style.webkitTouchCallout = 'none';
-    canvas.style.webkitUserDrag = 'none';
-    canvas.style.pointerEvents = protectionLevel === 'maximum' ? 'none' : 'auto';
+    const canvasStyle = canvas.style as VendorStyle;
+    canvasStyle.userSelect = 'none';
+    canvasStyle.webkitUserSelect = 'none';
+    canvasStyle.webkitTouchCallout = 'none';
+    canvasStyle.webkitUserDrag = 'none';
+    canvasStyle.pointerEvents = protectionLevel === 'maximum' ? 'none' : 'auto';
     
     return () => {
       canvas.removeEventListener('contextmenu', handleContextMenu);
@@ -402,4 +405,4 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
       }}
     />
   );
-};
+};

frontend/src/components/common/ProtectionWarning.tsx

@@ -102,7 +102,7 @@ export const ProtectionWarning: React.FC<ProtectionWarningProps> = ({
         />
       )}
       
-      <style jsx>{`
+      <style>{`
         @keyframes shrink {
           from { width: 100%; }
           to { width: 0%; }
@@ -110,4 +110,4 @@ export const ProtectionWarning: React.FC<ProtectionWarningProps> = ({
       `}</style>
     </div>
   );
-};
+};