paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: overhaul public landing page and backup tooling

Browse Source
This commit is contained in:
paul
2025-09-19 16:39:18 +02:00
parent ad9c6d63d3
commit 2a4d38813f
72 changed files with 4332 additions and 1466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/useCSSProtection.ts
+31 -19
View File
@@ -1,6 +1,12 @@
import { useEffect, useRef } from 'react';
import { ProtectionLevel } from './useImageProtection';
type VendorStyle = CSSStyleDeclaration & {
webkitUserSelect?: string;
webkitTouchCallout?: string;
webkitUserDrag?: string;
};
interface UseCSSProtectionOptions {
enabled: boolean;
protectionLevel: ProtectionLevel;
@@ -63,19 +69,22 @@ export const useCSSProtection = (options: UseCSSProtectionOptions) => {
// Apply inline styles for enhanced protection
if (options.protectionLevel === 'enhanced' || options.protectionLevel === 'maximum') {
// Disable various browser features
container.style.userSelect = 'none';
container.style.webkitUserSelect = 'none';
container.style.webkitTouchCallout = 'none';
container.style.webkitUserDrag = 'none';
const containerStyle = container.style as VendorStyle;
containerStyle.userSelect = 'none';
containerStyle.webkitUserSelect = 'none';
containerStyle.webkitTouchCallout = 'none';
containerStyle.webkitUserDrag = 'none';
// Find all img and canvas elements and protect them
const mediaElements = container.querySelectorAll('img, canvas');
mediaElements.forEach(element => {
(element as HTMLElement).draggable = false;
(element as HTMLElement).style.userSelect = 'none';
(element as HTMLElement).style.webkitUserSelect = 'none';
(element as HTMLElement).style.webkitUserDrag = 'none';
(element as HTMLElement).style.webkitTouchCallout = 'none';
const el = element as HTMLElement;
const elStyle = el.style as VendorStyle;
el.draggable = false;
elStyle.userSelect = 'none';
elStyle.webkitUserSelect = 'none';
elStyle.webkitUserDrag = 'none';
elStyle.webkitTouchCallout = 'none';
if (options.protectionLevel === 'maximum') {
(element as HTMLElement).style.pointerEvents = 'none';
@@ -101,19 +110,22 @@ export const useCSSProtection = (options: UseCSSProtectionOptions) => {
}
// Reset inline styles
container.style.userSelect = '';
container.style.webkitUserSelect = '';
container.style.webkitTouchCallout = '';
container.style.webkitUserDrag = '';
const containerStyle = container.style as VendorStyle;
containerStyle.userSelect = '';
containerStyle.webkitUserSelect = '';
containerStyle.webkitTouchCallout = '';
containerStyle.webkitUserDrag = '';
// Reset media element styles
const mediaElements = container.querySelectorAll('img, canvas');
mediaElements.forEach(element => {
(element as HTMLElement).style.userSelect = '';
(element as HTMLElement).style.webkitUserSelect = '';
(element as HTMLElement).style.webkitUserDrag = '';
(element as HTMLElement).style.webkitTouchCallout = '';
(element as HTMLElement).style.pointerEvents = '';
const el = element as HTMLElement;
const elStyle = el.style as VendorStyle;
elStyle.userSelect = '';
elStyle.webkitUserSelect = '';
elStyle.webkitUserDrag = '';
elStyle.webkitTouchCallout = '';
elStyle.pointerEvents = '';
});
};
}, [
@@ -125,4 +137,4 @@ export const useCSSProtection = (options: UseCSSProtectionOptions) => {
]);
return containerRef;
};
};
frontend/src/hooks/useDevToolsProtection.ts
+1 -2
View File
@@ -11,7 +11,6 @@ interface UseDevToolsProtectionOptions {
export const useDevToolsProtection = (options: UseDevToolsProtectionOptions) => {
const detectionTimerRef = useRef<NodeJS.Timeout | null>(null);
const lastConsoleCountRef = useRef(0);
const startTimeRef = useRef<number>(Date.now());
const isDetectedRef = useRef(false);
const handleDevToolsDetected = useCallback(() => {
@@ -246,4 +245,4 @@ export const useDevToolsProtection = (options: UseDevToolsProtectionOptions) =>
isDetectedRef.current = false;
}
};
};
};
frontend/src/hooks/useImageProtection.ts
+24 -15
View File
@@ -1,5 +1,13 @@
import { useEffect, useRef, useCallback } from 'react';
type VendorStyle = CSSStyleDeclaration & {
webkitUserSelect?: string;
webkitTouchCallout?: string;
webkitUserDrag?: string;
MozAppearance?: string;
webkitAppearance?: string;
};
export type ProtectionLevel = 'basic' | 'standard' | 'enhanced' | 'maximum';
interface UseImageProtectionOptions {
@@ -16,9 +24,9 @@ interface UseImageProtectionOptions {
}
export const useImageProtection = (options: UseImageProtectionOptions) => {
const elementRef = useRef<HTMLImageElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const overlayRef = useRef<HTMLDivElement>(null);
const elementRef = useRef<HTMLImageElement | null>(null);
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const overlayRef = useRef<HTMLDivElement | null>(null);
const printScreenDetectorRef = useRef<HTMLCanvasElement | null>(null);
const printScreenIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -195,25 +203,26 @@ export const useImageProtection = (options: UseImageProtectionOptions) => {
}
// CSS protection
element.style.userSelect = 'none';
element.style.webkitUserSelect = 'none';
element.style.webkitTouchCallout = 'none';
element.style.pointerEvents = 'auto';
element.style.webkitUserDrag = 'none';
element.style.webkitTouchCallout = 'none';
const elementStyle = element.style as VendorStyle;
elementStyle.userSelect = 'none';
elementStyle.webkitUserSelect = 'none';
elementStyle.webkitTouchCallout = 'none';
elementStyle.pointerEvents = 'auto';
elementStyle.webkitUserDrag = 'none';
element.draggable = false;
// Enhanced CSS protection
if (protectionLevel !== 'basic') {
element.style.outline = 'none';
element.style.webkitAppearance = 'none';
element.style.MozAppearance = 'none';
elementStyle.outline = 'none';
elementStyle.webkitAppearance = 'none';
elementStyle.MozAppearance = 'none';
// Disable text selection on parent elements
let parent = element.parentElement;
while (parent) {
parent.style.userSelect = 'none';
parent.style.webkitUserSelect = 'none';
const parentStyle = parent.style as VendorStyle;
parentStyle.userSelect = 'none';
parentStyle.webkitUserSelect = 'none';
parent = parent.parentElement;
}
}
@@ -287,4 +296,4 @@ export const useImageProtection = (options: UseImageProtectionOptions) => {
canvasRef,
overlayRef
};
};
};