mirror of
https://github.com/donpat1to/Schichtenplaner.git
synced 2025-11-30 22:45:46 +01:00
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 19357d12c1 | |||
| 8ccd506b7d | |||
| e09979aa77 | |||
| 0eda1ac125 | |||
| 6aa9511fbe | |||
| ab24f5cf35 | |||
| 2e81ed48c4 | |||
| da2b3b0126 | |||
| 7a87c49703 | |||
| 52f559199d |
@@ -1,27 +1,29 @@
|
|||||||
# === SCHICHTPLANER DOCKER COMPOSE ENVIRONMENT VARIABLES ===
|
# .env.template
|
||||||
# Diese Datei wird von docker-compose automatisch geladen
|
# ============================================
|
||||||
|
# DOCKER COMPOSE ENVIRONMENT TEMPLATE
|
||||||
|
# Copy this file to .env and adjust values
|
||||||
|
# ============================================
|
||||||
|
|
||||||
# Security
|
# Application settings
|
||||||
JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
|
NODE_ENV=production
|
||||||
NODE_ENV=${NODE_ENV:-production}
|
JWT_SECRET=your-secret-key-please-change
|
||||||
|
HOSTNAME=localhost
|
||||||
|
|
||||||
|
# Security & Network
|
||||||
|
TRUST_PROXY_ENABLED=false
|
||||||
|
TRUSTED_PROXY_IPS=127.0.0.1,::1
|
||||||
|
FORCE_HTTPS=false
|
||||||
|
|
||||||
# Database
|
# Database
|
||||||
DB_PATH=${DB_PATH:-/app/data/database.db}
|
DATABASE_PATH=/app/data/schichtplaner.db
|
||||||
|
|
||||||
# Server
|
# Optional features
|
||||||
PORT=${PORT:-3002}
|
ENABLE_PRO=false
|
||||||
|
DEBUG=false
|
||||||
|
|
||||||
# App Configuration
|
# Port configuration
|
||||||
APP_TITLE="Shift Planning App"
|
APP_PORT=3002
|
||||||
ENABLE_PRO=${ENABLE_PRO:-false}
|
|
||||||
|
|
||||||
# Trust Proxy Configuration
|
# ============================================
|
||||||
TRUST_PROXY_ENABLED=false
|
# END OF TEMPLATE
|
||||||
TRUSTED_PROXY_IPS= # Your load balancer/reverse proxy IPs
|
# ============================================
|
||||||
TRUSTED_PROXY_HEADER=x-forwarded-for
|
|
||||||
|
|
||||||
# Rate Limiting Configuration
|
|
||||||
RATE_LIMIT_WINDOW_MS=900000
|
|
||||||
RATE_LIMIT_MAX_REQUESTS=100
|
|
||||||
RATE_LIMIT_SKIP_PATHS=/api/health,/api/status
|
|
||||||
RATE_LIMIT_WHITELIST=127.0.0.1,::1
|
|
||||||
6
.github/workflows/docker.yml
vendored
6
.github/workflows/docker.yml
vendored
@@ -83,9 +83,13 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version: '20'
|
node-version: '20'
|
||||||
|
|
||||||
|
- name: Create package-lock.json
|
||||||
|
working-directory: .
|
||||||
|
run: npm i --package-lock-only
|
||||||
|
|
||||||
- name: Install backend dependencies
|
- name: Install backend dependencies
|
||||||
working-directory: ./backend
|
working-directory: ./backend
|
||||||
run: npm install
|
run: npm ci
|
||||||
|
|
||||||
- name: Run TypeScript check
|
- name: Run TypeScript check
|
||||||
working-directory: ./backend
|
working-directory: ./backend
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -57,6 +57,7 @@ yarn-error.log*
|
|||||||
# Build outputs
|
# Build outputs
|
||||||
dist/
|
dist/
|
||||||
build/
|
build/
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
# Environment variables
|
# Environment variables
|
||||||
.env
|
.env
|
||||||
|
|||||||
@@ -16,7 +16,9 @@ COPY tsconfig.base.json ./
|
|||||||
COPY ecosystem.config.cjs ./
|
COPY ecosystem.config.cjs ./
|
||||||
|
|
||||||
# Install root dependencies
|
# Install root dependencies
|
||||||
RUN npm install --only=production
|
#RUN npm install --only=production
|
||||||
|
RUN npm i --package-lock-only
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
# Copy workspace files
|
# Copy workspace files
|
||||||
COPY backend/ ./backend/
|
COPY backend/ ./backend/
|
||||||
@@ -30,7 +32,7 @@ RUN npm install --workspace=frontend
|
|||||||
RUN npm run build --only=production --workspace=backend
|
RUN npm run build --only=production --workspace=backend
|
||||||
|
|
||||||
# Build frontend
|
# Build frontend
|
||||||
RUN npm run build --workspace=frontend
|
RUN npm run build --only=production --workspace=frontend
|
||||||
|
|
||||||
# Verify Python and OR-Tools installation
|
# Verify Python and OR-Tools installation
|
||||||
RUN python -c "from ortools.sat.python import cp_model; print('OR-Tools installed successfully')"
|
RUN python -c "from ortools.sat.python import cp_model; print('OR-Tools installed successfully')"
|
||||||
|
|||||||
@@ -72,8 +72,8 @@ const getRateLimitConfig = () => {
|
|||||||
return {
|
return {
|
||||||
windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000'), // 15 minutes default
|
windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000'), // 15 minutes default
|
||||||
max: isProduction
|
max: isProduction
|
||||||
? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '100') // Stricter in production
|
? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '1000') // Stricter in production
|
||||||
: parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '1000'), // More lenient in development
|
: parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '5000'), // More lenient in development
|
||||||
|
|
||||||
// Development-specific relaxations
|
// Development-specific relaxations
|
||||||
skip: (req: Request) => {
|
skip: (req: Request) => {
|
||||||
@@ -112,7 +112,7 @@ export const apiLimiter = rateLimit({
|
|||||||
// Strict limiter for auth endpoints
|
// Strict limiter for auth endpoints
|
||||||
export const authLimiter = rateLimit({
|
export const authLimiter = rateLimit({
|
||||||
windowMs: 15 * 60 * 1000,
|
windowMs: 15 * 60 * 1000,
|
||||||
max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '5'),
|
max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '100'),
|
||||||
message: {
|
message: {
|
||||||
error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut'
|
error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut'
|
||||||
},
|
},
|
||||||
@@ -135,7 +135,7 @@ export const authLimiter = rateLimit({
|
|||||||
// Separate limiter for expensive endpoints
|
// Separate limiter for expensive endpoints
|
||||||
export const expensiveEndpointLimiter = rateLimit({
|
export const expensiveEndpointLimiter = rateLimit({
|
||||||
windowMs: 15 * 60 * 1000,
|
windowMs: 15 * 60 * 1000,
|
||||||
max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '10'),
|
max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '100'),
|
||||||
message: {
|
message: {
|
||||||
error: 'Zu viele Anfragen für diese Ressource'
|
error: 'Zu viele Anfragen für diese Ressource'
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
|
|
||||||
const configureTrustProxy = (): string | string[] | boolean | number => {
|
const configureTrustProxy = (): string | string[] | boolean | number => {
|
||||||
const trustedProxyIps = process.env.TRUSTED_PROXY_IPS;
|
const trustedProxyIps = process.env.TRUSTED_PROXY_IPS;
|
||||||
const trustProxyEnabled = process.env.TRUST_PROXY_ENABLED !== 'false'; // Default true for production
|
const trustProxyEnabled = process.env.TRUST_PROXY_ENABLED !== 'false';
|
||||||
|
|
||||||
// If explicitly disabled
|
// If explicitly disabled
|
||||||
if (!trustProxyEnabled) {
|
if (!trustProxyEnabled) {
|
||||||
@@ -106,25 +106,28 @@ const configureTrustProxy = (): string | string[] | boolean | number => {
|
|||||||
return trustedProxyIps.trim();
|
return trustedProxyIps.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Default behavior based on environment
|
// Default behavior for reverse proxy setup
|
||||||
if (process.env.NODE_ENV === 'production') {
|
console.log('🔒 Trust proxy: Using reverse proxy defaults (trust all)');
|
||||||
console.log('🔒 Trust proxy: Using production defaults (private networks)');
|
return true; // Trust all proxies when behind nginx
|
||||||
return [
|
|
||||||
'loopback',
|
|
||||||
'linklocal',
|
|
||||||
'uniquelocal',
|
|
||||||
'10.0.0.0/8',
|
|
||||||
'172.16.0.0/12',
|
|
||||||
'192.168.0.0/16'
|
|
||||||
];
|
|
||||||
} else {
|
|
||||||
console.log('🔒 Trust proxy: Development mode (disabled)');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
app.set('trust proxy', configureTrustProxy());
|
app.set('trust proxy', configureTrustProxy());
|
||||||
|
|
||||||
|
app.use((req, res, next) => {
|
||||||
|
const protocol = req.headers['x-forwarded-proto'] || req.protocol;
|
||||||
|
const isHttps = protocol === 'https';
|
||||||
|
|
||||||
|
// Add security warning for HTTP requests
|
||||||
|
if (!isHttps && process.env.NODE_ENV === 'production') {
|
||||||
|
res.setHeader('X-Security-Warning', 'This application is being accessed over HTTP. For secure communication, please use HTTPS.');
|
||||||
|
|
||||||
|
// Log HTTP access in production
|
||||||
|
console.warn(`⚠️ HTTP access detected: ${req.method} ${req.path} from ${req.ip}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
// Security headers
|
// Security headers
|
||||||
app.use(helmet({
|
app.use(helmet({
|
||||||
contentSecurityPolicy: {
|
contentSecurityPolicy: {
|
||||||
@@ -138,9 +141,14 @@ app.use(helmet({
|
|||||||
objectSrc: ["'none'"],
|
objectSrc: ["'none'"],
|
||||||
mediaSrc: ["'self'"],
|
mediaSrc: ["'self'"],
|
||||||
frameSrc: ["'none'"],
|
frameSrc: ["'none'"],
|
||||||
|
upgradeInsecureRequests: process.env.FORCE_HTTPS === 'true' ? [] : null
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
hsts: false,
|
hsts: {
|
||||||
|
maxAge: 31536000,
|
||||||
|
includeSubDomains: true,
|
||||||
|
preload: true
|
||||||
|
}, // Enable HSTS for HTTPS
|
||||||
crossOriginEmbedderPolicy: false
|
crossOriginEmbedderPolicy: false
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@@ -6,17 +6,22 @@ services:
|
|||||||
image: ghcr.io/donpat1to/schichtenplaner:v1.0.0
|
image: ghcr.io/donpat1to/schichtenplaner:v1.0.0
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
- JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
|
- JWT_SECRET=${JWT_SECRET}
|
||||||
ports:
|
- TRUST_PROXY_ENABLED=true
|
||||||
- "3002:3002"
|
- TRUSTED_PROXY_IPS=nginx-proxy,172.0.0.0/8,10.0.0.0/8,192.168.0.0/16
|
||||||
|
- FORCE_HTTPS=${FORCE_HTTPS:-false}
|
||||||
|
networks:
|
||||||
|
- app-network
|
||||||
volumes:
|
volumes:
|
||||||
- app_data:/app/data
|
- app_data:/app/data
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "curl", "-f", "http://localhost:3002/api/health"]
|
test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3002/api/health"]
|
||||||
interval: 30s
|
interval: 30s
|
||||||
timeout: 10s
|
timeout: 10s
|
||||||
retries: 3
|
retries: 3
|
||||||
|
expose:
|
||||||
|
- "3002"
|
||||||
|
|
||||||
volumes:
|
volumes:
|
||||||
app_data:
|
app_data:
|
||||||
@@ -3,17 +3,15 @@ set -e
|
|||||||
|
|
||||||
echo "🚀 Container Initialisierung gestartet..."
|
echo "🚀 Container Initialisierung gestartet..."
|
||||||
|
|
||||||
# Funktion zum Generieren eines sicheren Secrets
|
|
||||||
generate_secret() {
|
generate_secret() {
|
||||||
length=$1
|
length=$1
|
||||||
tr -dc 'A-Za-z0-9!@#$%^&*()_+-=' < /dev/urandom | head -c $length
|
tr -dc 'A-Za-z0-9!@#$%^&*()_+-=' < /dev/urandom | head -c $length
|
||||||
}
|
}
|
||||||
|
|
||||||
# Prüfe ob .env existiert
|
# Create .env if it doesn't exist
|
||||||
if [ ! -f /app/.env ]; then
|
if [ ! -f /app/.env ]; then
|
||||||
echo "📝 Erstelle .env Datei..."
|
echo "📝 Erstelle .env Datei..."
|
||||||
|
|
||||||
# Verwende vorhandenes JWT_SECRET oder generiere ein neues
|
|
||||||
if [ -z "$JWT_SECRET" ] || [ "$JWT_SECRET" = "your-secret-key-please-change" ]; then
|
if [ -z "$JWT_SECRET" ] || [ "$JWT_SECRET" = "your-secret-key-please-change" ]; then
|
||||||
export JWT_SECRET=$(generate_secret 64)
|
export JWT_SECRET=$(generate_secret 64)
|
||||||
echo "🔑 Automatisch sicheres JWT Secret generiert"
|
echo "🔑 Automatisch sicheres JWT Secret generiert"
|
||||||
@@ -21,30 +19,37 @@ if [ ! -f /app/.env ]; then
|
|||||||
echo "🔑 Verwende vorhandenes JWT Secret aus Umgebungsvariable"
|
echo "🔑 Verwende vorhandenes JWT Secret aus Umgebungsvariable"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Erstelle .env aus Template mit envsubst
|
# Create .env with all proxy settings
|
||||||
envsubst < /app/.env.template > /app/.env
|
cat > /app/.env << EOF
|
||||||
echo "✅ .env Datei erstellt"
|
NODE_ENV=production
|
||||||
|
JWT_SECRET=${JWT_SECRET}
|
||||||
|
TRUST_PROXY_ENABLED=${TRUST_PROXY_ENABLED:-true}
|
||||||
|
TRUSTED_PROXY_IPS=${TRUSTED_PROXY_IPS:-172.0.0.0/8,10.0.0.0/8,192.168.0.0/16}
|
||||||
|
HOSTNAME=${HOSTNAME:-localhost}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
echo "✅ .env Datei erstellt"
|
||||||
else
|
else
|
||||||
echo "ℹ️ .env Datei existiert bereits"
|
echo "ℹ️ .env Datei existiert bereits"
|
||||||
|
|
||||||
# Wenn .env existiert, aber JWT_SECRET Umgebungsvariable gesetzt ist, aktualisiere sie
|
# Update JWT_SECRET if provided
|
||||||
if [ -n "$JWT_SECRET" ] && [ "$JWT_SECRET" != "your-secret-key-please-change" ]; then
|
if [ -n "$JWT_SECRET" ] && [ "$JWT_SECRET" != "your-secret-key-please-change" ]; then
|
||||||
echo "🔑 Aktualisiere JWT Secret in .env Datei"
|
echo "🔑 Aktualisiere JWT Secret in .env Datei"
|
||||||
# Aktualisiere nur das JWT_SECRET in der .env Datei
|
|
||||||
sed -i "s/^JWT_SECRET=.*/JWT_SECRET=$JWT_SECRET/" /app/.env
|
sed -i "s/^JWT_SECRET=.*/JWT_SECRET=$JWT_SECRET/" /app/.env
|
||||||
fi
|
fi
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Validiere dass JWT_SECERT nicht der Standardwert ist
|
# Validate JWT_SECRET
|
||||||
if grep -q "JWT_SECRET=your-secret-key-please-change" /app/.env; then
|
if grep -q "JWT_SECRET=your-secret-key-please-change" /app/.env; then
|
||||||
echo "❌ FEHLER: Standard JWT Secret in .env gefunden!"
|
echo "❌ FEHLER: Standard JWT Secret in .env gefunden!"
|
||||||
echo "❌ Bitte setzen Sie JWT_SECRET Umgebungsvariable"
|
echo "❌ Bitte setzen Sie JWT_SECRET Umgebungsvariable"
|
||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Setze sichere Berechtigungen
|
|
||||||
chmod 600 /app/.env
|
chmod 600 /app/.env
|
||||||
|
|
||||||
|
echo "🔧 Proxy Configuration:"
|
||||||
|
echo " - TRUST_PROXY_ENABLED: ${TRUST_PROXY_ENABLED:-true}"
|
||||||
|
echo " - TRUSTED_PROXY_IPS: ${TRUSTED_PROXY_IPS:-172.0.0.0/8,10.0.0.0/8,192.168.0.0/16}"
|
||||||
echo "🔧 Starte Anwendung..."
|
echo "🔧 Starte Anwendung..."
|
||||||
exec "$@"
|
exec "$@"
|
||||||
178
frontend/donpat1to.svg
Normal file
178
frontend/donpat1to.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 102 KiB |
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/donpat1to.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Shift Planning App</title>
|
<title>Shift Planning App</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -7,7 +7,9 @@
|
|||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-router-dom": "^6.28.0",
|
"react-router-dom": "^6.28.0",
|
||||||
"date-fns": "4.1.0"
|
"date-fns": "4.1.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.3",
|
||||||
|
"vite": "^6.0.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "20.19.23",
|
"@types/node": "20.19.23",
|
||||||
|
|||||||
@@ -15,6 +15,8 @@ import EmployeeManagement from './pages/Employees/EmployeeManagement';
|
|||||||
import Settings from './pages/Settings/Settings';
|
import Settings from './pages/Settings/Settings';
|
||||||
import Help from './pages/Help/Help';
|
import Help from './pages/Help/Help';
|
||||||
import Setup from './pages/Setup/Setup';
|
import Setup from './pages/Setup/Setup';
|
||||||
|
import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
|
||||||
|
import SecurityWarning from './components/SecurityWarning/SecurityWarning';
|
||||||
|
|
||||||
// Free Footer Link Pages (always available)
|
// Free Footer Link Pages (always available)
|
||||||
import FAQ from './components/Layout/FooterLinks/FAQ/FAQ';
|
import FAQ from './components/Layout/FooterLinks/FAQ/FAQ';
|
||||||
@@ -160,14 +162,17 @@ const AppContent: React.FC = () => {
|
|||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
<ErrorBoundary>
|
||||||
<NotificationProvider>
|
<NotificationProvider>
|
||||||
<AuthProvider>
|
<AuthProvider>
|
||||||
<Router>
|
<Router>
|
||||||
|
<SecurityWarning />
|
||||||
<NotificationContainer />
|
<NotificationContainer />
|
||||||
<AppContent />
|
<AppContent />
|
||||||
</Router>
|
</Router>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
</NotificationProvider>
|
</NotificationProvider>
|
||||||
|
</ErrorBoundary>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
101
frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
Normal file
101
frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
// src/components/ErrorBoundary/ErrorBoundary.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode;
|
||||||
|
fallback?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
hasError: boolean;
|
||||||
|
error?: Error;
|
||||||
|
}
|
||||||
|
|
||||||
|
class ErrorBoundary extends React.Component<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { hasError: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error): State {
|
||||||
|
return { hasError: true, error };
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||||
|
console.error('🚨 Application Error:', error);
|
||||||
|
console.error('📋 Error Details:', errorInfo);
|
||||||
|
|
||||||
|
// In production, send to your error reporting service
|
||||||
|
// logErrorToService(error, errorInfo);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
// You can render any custom fallback UI
|
||||||
|
return this.props.fallback || (
|
||||||
|
<div style={{
|
||||||
|
padding: '40px',
|
||||||
|
textAlign: 'center',
|
||||||
|
fontFamily: 'Arial, sans-serif'
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '48px', marginBottom: '20px' }}>⚠️</div>
|
||||||
|
<h2>Oops! Something went wrong</h2>
|
||||||
|
<p style={{ margin: '20px 0', color: '#666' }}>
|
||||||
|
We encountered an unexpected error. Please try refreshing the page.
|
||||||
|
</p>
|
||||||
|
<div style={{ marginTop: '30px' }}>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
style={{
|
||||||
|
padding: '10px 20px',
|
||||||
|
backgroundColor: '#007bff',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
marginRight: '10px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Refresh Page
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => this.setState({ hasError: false })}
|
||||||
|
style={{
|
||||||
|
padding: '10px 20px',
|
||||||
|
backgroundColor: '#6c757d',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Try Again
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{process.env.NODE_ENV === 'development' && this.state.error && (
|
||||||
|
<details style={{
|
||||||
|
marginTop: '20px',
|
||||||
|
textAlign: 'left',
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}>
|
||||||
|
<summary>Error Details (Development)</summary>
|
||||||
|
<pre style={{
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#dc3545'
|
||||||
|
}}>
|
||||||
|
{this.state.error.stack}
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ErrorBoundary;
|
||||||
59
frontend/src/components/SecurityWarning/SecurityWarning.tsx
Normal file
59
frontend/src/components/SecurityWarning/SecurityWarning.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
// src/components/SecurityWarning/SecurityWarning.tsx
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
const SecurityWarning: React.FC = () => {
|
||||||
|
const [isHttp, setIsHttp] = useState(false);
|
||||||
|
const [isDismissed, setIsDismissed] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if current protocol is HTTP
|
||||||
|
const checkProtocol = () => {
|
||||||
|
setIsHttp(window.location.protocol === 'http:');
|
||||||
|
};
|
||||||
|
|
||||||
|
checkProtocol();
|
||||||
|
window.addEventListener('load', checkProtocol);
|
||||||
|
|
||||||
|
return () => window.removeEventListener('load', checkProtocol);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!isHttp || isDismissed) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
backgroundColor: '#ff6b35',
|
||||||
|
color: 'white',
|
||||||
|
padding: '10px 20px',
|
||||||
|
textAlign: 'center',
|
||||||
|
zIndex: 10000,
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
|
||||||
|
}}>
|
||||||
|
⚠️ SECURITY WARNING: This site is being accessed over HTTP.
|
||||||
|
For secure communication, please use HTTPS.
|
||||||
|
<button
|
||||||
|
onClick={() => setIsDismissed(true)}
|
||||||
|
style={{
|
||||||
|
marginLeft: '15px',
|
||||||
|
background: 'rgba(255,255,255,0.2)',
|
||||||
|
border: '1px solid white',
|
||||||
|
color: 'white',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '3px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Dismiss
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SecurityWarning;
|
||||||
5511
package-lock.json
generated
5511
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user