Add complete frontend implementation and Docker deployment setup

- Implement React frontend with TypeScript and Tailwind CSS
- Add scrappbook.de-inspired UI design with photo galleries
- Implement authentication, photo viewing, and download features
- Add Docker Swarm configuration with Traefik reverse proxy
- Set up Drone CI/CD pipeline for automated deployments
- Add monitoring stack with Prometheus and Grafana
- Create comprehensive deployment documentation
- Add simple local development setup with docker-compose.local.yml

Features:
- Password-protected galleries with expiration warnings
- Responsive photo grid with lightbox viewer
- Bulk download functionality
- Hot reload development environment
- Email testing with Mailhog
- Production-ready deployment scripts

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-07-06 20:23:13 +02:00
parent 032bbae50d
commit 6c82958c79
73 changed files with 10611 additions and 2 deletions
@@ -0,0 +1,81 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
import type { ReactNode } from 'react';
import { getAuthToken } from '../config/api';
import { authService } from '../services';
import type { AdminUser } from '../types';
interface AdminAuthContextType {
isAuthenticated: boolean;
user: AdminUser | null;
login: (username: string, password: string) => Promise<void>;
logout: () => void;
isLoading: boolean;
error: string | null;
}
const AdminAuthContext = createContext<AdminAuthContextType | undefined>(undefined);
export const useAdminAuth = () => {
const context = useContext(AdminAuthContext);
if (!context) {
throw new Error('useAdminAuth must be used within an AdminAuthProvider');
}
return context;
};
interface AdminAuthProviderProps {
children: ReactNode;
}
export const AdminAuthProvider: React.FC<AdminAuthProviderProps> = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [user, setUser] = useState<AdminUser | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
// Check if user has a valid token on mount
const token = getAuthToken(true);
if (token) {
// TODO: Validate token with backend and get user info
setIsAuthenticated(true);
}
setIsLoading(false);
}, []);
const login = async (username: string, password: string) => {
try {
setError(null);
setIsLoading(true);
const response = await authService.adminLogin(username, password);
setUser(response.user);
setIsAuthenticated(true);
} catch (err: any) {
setError(err.response?.data?.error || 'Invalid credentials');
throw err;
} finally {
setIsLoading(false);
}
};
const logout = () => {
authService.adminLogout();
setIsAuthenticated(false);
setUser(null);
};
return (
<AdminAuthContext.Provider
value={{
isAuthenticated,
user,
login,
logout,
isLoading,
error,
}}
>
{children}
</AdminAuthContext.Provider>
);
};