Merge pull request #235 from PatchMon/release/1-3-1

fix: Remove --ignore-scripts to allow trianglify/canvas to install

docker/frontend.Dockerfile

@@ -36,24 +36,9 @@ COPY frontend/ ./
 
 RUN npm run build
 
-# Production stage - use temporary stage to install packages as root, then copy to unprivileged
-FROM nginx:alpine AS runtime-builder
-
-# Install runtime dependencies for canvas
-RUN apk add --no-cache cairo pango jpeg libpng giflib
-
-# Final production stage - unprivileged
+# Production stage
 FROM nginxinc/nginx-unprivileged:alpine
 
-# Copy runtime libraries from runtime-builder
-COPY --from=runtime-builder /usr/lib/libcairo.so.2 /usr/lib/
-COPY --from=runtime-builder /usr/lib/libpango-1.0.so.0 /usr/lib/
-COPY --from=runtime-builder /usr/lib/libpangocairo-1.0.so.0 /usr/lib/
-COPY --from=runtime-builder /usr/lib/libpangoft2-1.0.so.0 /usr/lib/
-COPY --from=runtime-builder /usr/lib/libpng16.so.16 /usr/lib/
-COPY --from=runtime-builder /usr/lib/libgif.so.7 /usr/lib/
-COPY --from=runtime-builder /usr/lib/libjpeg.so.8 /usr/lib/
-
 ENV BACKEND_HOST=backend \
     BACKEND_PORT=3001
 

frontend/src/components/Layout.jsx

@@ -240,48 +240,28 @@ const Layout = ({ children }) => {
 	// Generate Trianglify background for dark mode
 	useEffect(() => {
 		const generateBackground = () => {
-			try {
-				if (
-					bgCanvasRef.current &&
-					themeConfig?.login &&
-					document.documentElement.classList.contains("dark")
-				) {
-					// Get current date as seed for daily variation
-					const today = new Date();
-					const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+			if (
+				bgCanvasRef.current &&
+				themeConfig?.login &&
+				document.documentElement.classList.contains("dark")
+			) {
+				// Get current date as seed for daily variation
+				const today = new Date();
+				const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
 
-					// Generate pattern with selected theme configuration
-					const pattern = trianglify({
-						width: window.innerWidth,
-						height: window.innerHeight,
-						cellSize: themeConfig.login.cellSize,
-						variance: themeConfig.login.variance,
-						seed: dateSeed,
-						xColors: themeConfig.login.xColors,
-						yColors: themeConfig.login.yColors,
-					});
+				// Generate pattern with selected theme configuration
+				const pattern = trianglify({
+					width: window.innerWidth,
+					height: window.innerHeight,
+					cellSize: themeConfig.login.cellSize,
+					variance: themeConfig.login.variance,
+					seed: dateSeed,
+					xColors: themeConfig.login.xColors,
+					yColors: themeConfig.login.yColors,
+				});
 
-					// Render to canvas using SVG (browser-compatible)
-					const svg = pattern.toSVG();
-					const ctx = bgCanvasRef.current.getContext("2d");
-					const img = new Image();
-					const blob = new Blob([svg], { type: "image/svg+xml" });
-					const url = URL.createObjectURL(blob);
-					img.onload = () => {
-						ctx.drawImage(
-							img,
-							0,
-							0,
-							bgCanvasRef.current.width,
-							bgCanvasRef.current.height,
-						);
-						URL.revokeObjectURL(url);
-					};
-					img.src = url;
-				}
-			} catch (error) {
-				// Canvas/trianglify not available, skip background generation
-				console.warn("Could not generate Trianglify background:", error);
+				// Render to canvas
+				pattern.toCanvas(bgCanvasRef.current);
 			}
 		};
 

frontend/src/pages/Login.jsx

@@ -60,44 +60,24 @@ const Login = () => {
 	// Generate Trianglify background based on selected theme
 	useEffect(() => {
 		const generateBackground = () => {
-			try {
-				if (canvasRef.current && themeConfig?.login) {
-					// Get current date as seed for daily variation
-					const today = new Date();
-					const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+			if (canvasRef.current && themeConfig?.login) {
+				// Get current date as seed for daily variation
+				const today = new Date();
+				const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
 
-					// Generate pattern with selected theme configuration
-					const pattern = trianglify({
-						width: canvasRef.current.offsetWidth,
-						height: canvasRef.current.offsetHeight,
-						cellSize: themeConfig.login.cellSize,
-						variance: themeConfig.login.variance,
-						seed: dateSeed,
-						xColors: themeConfig.login.xColors,
-						yColors: themeConfig.login.yColors,
-					});
+				// Generate pattern with selected theme configuration
+				const pattern = trianglify({
+					width: canvasRef.current.offsetWidth,
+					height: canvasRef.current.offsetHeight,
+					cellSize: themeConfig.login.cellSize,
+					variance: themeConfig.login.variance,
+					seed: dateSeed,
+					xColors: themeConfig.login.xColors,
+					yColors: themeConfig.login.yColors,
+				});
 
-					// Render to canvas using SVG (browser-compatible)
-					const svg = pattern.toSVG();
-					const ctx = canvasRef.current.getContext("2d");
-					const img = new Image();
-					const blob = new Blob([svg], { type: "image/svg+xml" });
-					const url = URL.createObjectURL(blob);
-					img.onload = () => {
-						ctx.drawImage(
-							img,
-							0,
-							0,
-							canvasRef.current.width,
-							canvasRef.current.height,
-						);
-						URL.revokeObjectURL(url);
-					};
-					img.src = url;
-				}
-			} catch (error) {
-				// Canvas/trianglify not available, skip background generation
-				console.warn("Could not generate Trianglify background:", error);
+				// Render to canvas
+				pattern.toCanvas(canvasRef.current);
 			}
 		};
 

setup.sh

@@ -2931,8 +2931,6 @@ update_installation() {
     
     # Load existing .env to get database credentials
     if [ -f "$instance_dir/backend/.env" ]; then
-        # Unset color variables before sourcing to prevent ANSI escape sequences from leaking into .env
-        unset RED GREEN YELLOW BLUE NC
         source "$instance_dir/backend/.env"
         print_status "Loaded existing configuration"