Start of dev pages

This commit is contained in:
2025-06-19 23:02:34 +02:00
parent 2f6de65e5c
commit e486b8a83d
17 changed files with 2704 additions and 1 deletions

View File

@@ -0,0 +1,523 @@
<div class="row">
<div class="col-lg-8">
<!-- Overview Section -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-3">Authentication & Security Overview</h5>
<p class="text-muted lead">
DocuPulse implements a comprehensive multi-layered security system designed to protect user data,
ensure secure access control, and maintain detailed audit trails. The system combines traditional
web authentication with modern security practices including CSRF protection, secure session management,
granular permissions, and comprehensive event logging for compliance and security monitoring.
</p>
</div>
<!-- Authentication System -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Authentication System</h5>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h6 style="color: var(--primary-color);" class="card-title mb-3">User Authentication</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Secure password hashing with Werkzeug</li>
<li class="mb-2">• Session-based authentication with Flask-Login</li>
<li class="mb-2">• Remember me functionality</li>
<li class="mb-2">• Secure logout with session cleanup</li>
<li class="mb-2">• Failed login attempt logging</li>
<li class="mb-2">• IP address tracking for security</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h6 style="color: var(--primary-color);" class="card-title mb-3">Password Management</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Strong password requirements (8+ chars)</li>
<li class="mb-2">• Mixed case, numbers, and special chars</li>
<li class="mb-2">• Secure password reset via email</li>
<li class="mb-2">• Initial password setup tokens</li>
<li class="mb-2">• Password change enforcement</li>
<li class="mb-2">• Default password detection</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h6 style="color: var(--primary-color);" class="card-title mb-3">Access Control</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Role-based permissions (Admin/Manager/User)</li>
<li class="mb-2">• Granular room-level permissions (7 levels)</li>
<li class="mb-2">• API key authentication for integrations</li>
<li class="mb-2">• CSRF token protection on all forms</li>
<li class="mb-2">• Secure headers and content security policy</li>
<li class="mb-2">• Input validation and sanitization</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h6 style="color: var(--primary-color);" class="card-title mb-3">Audit & Monitoring</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Comprehensive event logging system</li>
<li class="mb-2">• User activity tracking and history</li>
<li class="mb-2">• Security event monitoring</li>
<li class="mb-2">• Failed login attempt logging</li>
<li class="mb-2">• File access audit trails</li>
<li class="mb-2">• Admin action logging</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Authentication Flow -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Authentication Flow</h5>
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-sign-in-alt" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Login Process</h6>
<p class="text-muted small mb-0">User credentials are validated against the database, password is verified using secure hashing, and a session is created with appropriate permissions</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-shield-alt" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Permission Validation</h6>
<p class="text-muted small mb-0">Each request is validated against user roles and room permissions, ensuring users can only access resources they're authorized to use</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-history" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Session Management</h6>
<p class="text-muted small mb-0">Sessions are managed securely with automatic timeout, remember me functionality, and proper cleanup on logout</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-clipboard-list" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Audit Logging</h6>
<p class="text-muted small mb-0">All authentication events, security actions, and user activities are logged for compliance and security monitoring</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Password Security -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Password Security</h5>
<!-- Password Requirements -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-key me-2"></i>Password Requirements
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Minimum Requirements</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Minimum 8 characters</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one uppercase letter</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one lowercase letter</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one number</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one special character</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Features</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Werkzeug secure hashing</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Default password detection</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Password change enforcement</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure reset tokens</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Token expiration (1 hour)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Password Reset Flow -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-unlock me-2"></i>Password Reset Process
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Reset Request</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> User requests password reset</li>
<li class="mb-1"><code>2.</code> System validates email address</li>
<li class="mb-1"><code>3.</code> Generates secure token (32 chars)</li>
<li class="mb-1"><code>4.</code> Creates reset token record</li>
<li class="mb-1"><code>5.</code> Sends email with reset link</li>
<li class="mb-1"><code>6.</code> Logs reset request event</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Reset Completion</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> User clicks reset link</li>
<li class="mb-1"><code>2.</code> System validates token</li>
<li class="mb-1"><code>3.</code> Checks token expiration</li>
<li class="mb-1"><code>4.</code> Validates new password</li>
<li class="mb-1"><code>5.</code> Updates user password</li>
<li class="mb-1"><code>6.</code> Marks token as used</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Permission System -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Permission System</h5>
<!-- Role-Based Access Control -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-users-cog me-2"></i>Role-Based Access Control
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<h6 class="text-muted mb-2">Administrator</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>Full system access</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>User management</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>System settings</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>All room permissions</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>Audit log access</li>
</ul>
</div>
<div class="col-md-4">
<h6 class="text-muted mb-2">Manager</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Room management</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Member management</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Permission assignment</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>File operations</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Limited admin access</li>
</ul>
</div>
<div class="col-md-4">
<h6 class="text-muted mb-2">Standard User</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Basic file access</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Room participation</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Conversation access</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Profile management</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Permission-based actions</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Granular Room Permissions -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-door-open me-2"></i>Granular Room Permissions
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">File Operations</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>can_view</code> - View files and folders</li>
<li class="mb-1"><code>can_download</code> - Download files</li>
<li class="mb-1"><code>can_upload</code> - Upload new files</li>
<li class="mb-1"><code>can_delete</code> - Delete files</li>
<li class="mb-1"><code>can_rename</code> - Rename files</li>
<li class="mb-1"><code>can_move</code> - Move files between folders</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Room Management</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>can_share</code> - Share files with others</li>
<li class="mb-1"><code>can_manage_members</code> - Add/remove members</li>
<li class="mb-1"><code>can_edit_room</code> - Modify room settings</li>
<li class="mb-1"><code>can_delete_room</code> - Delete entire room</li>
<li class="mb-1"><code>can_view_activity</code> - View room activity</li>
<li class="mb-1"><code>can_export_data</code> - Export room data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Security Features -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Security Features</h5>
<!-- CSRF Protection -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-shield-alt me-2"></i>CSRF Protection
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Cross-Site Request Forgery protection is implemented across all forms and API endpoints.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Implementation</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>Flask-WTF</code> - CSRF protection library</li>
<li class="mb-1"><code>csrf_token</code> - Hidden form fields</li>
<li class="mb-1"><code>generate_csrf()</code> - Token generation</li>
<li class="mb-1"><code>validate_csrf()</code> - Token validation</li>
<li class="mb-1"><code>exempt_routes</code> - API exemptions</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Benefits</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Prevents unauthorized actions</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Protects against malicious sites</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Session-based token validation</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Automatic token rotation</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure token storage</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Session Security -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-clock me-2"></i>Session Management
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Session Features</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>Flask-Login</code> - Session management</li>
<li class="mb-1"><code>remember_me</code> - Persistent sessions</li>
<li class="mb-1"><code>session_timeout</code> - Automatic expiration</li>
<li class="mb-1"><code>secure_logout</code> - Session cleanup</li>
<li class="mb-1"><code>session_regeneration</code> - Security rotation</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Measures</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure session cookies</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>HTTPS enforcement</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Session fixation protection</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Concurrent session limits</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>IP address tracking</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Audit Logging -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Audit Logging System</h5>
<!-- Event Types -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-clipboard-list me-2"></i>Event Types
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">User Events</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>user_login</code> - Login attempts</li>
<li class="mb-1"><code>user_logout</code> - Logout events</li>
<li class="mb-1"><code>user_create</code> - Account creation</li>
<li class="mb-1"><code>user_update</code> - Profile changes</li>
<li class="mb-1"><code>user_delete</code> - Account deletion</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Events</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>password_change</code> - Password updates</li>
<li class="mb-1"><code>password_reset</code> - Reset attempts</li>
<li class="mb-1"><code>failed_login</code> - Failed attempts</li>
<li class="mb-1"><code>permission_change</code> - Access updates</li>
<li class="mb-1"><code>admin_action</code> - Administrative actions</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Logging Details -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-database me-2"></i>Logging Details
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Captured Information</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>event_type</code> - Type of event</li>
<li class="mb-1"><code>user_id</code> - User identifier</li>
<li class="mb-1"><code>timestamp</code> - Event time</li>
<li class="mb-1"><code>ip_address</code> - Client IP</li>
<li class="mb-1"><code>user_agent</code> - Browser info</li>
<li class="mb-1"><code>details</code> - Event specifics</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Retention & Access</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Permanent storage</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Admin-only access</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Search and filter</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Export capabilities</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Compliance ready</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Quick Reference -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-info-circle me-2"></i>Quick Reference
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">User Roles</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Admin</span>
<span class="badge bg-danger">Full Access</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Manager</span>
<span class="badge bg-warning">Room & Conversation Management</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">User</span>
<span class="badge bg-info">Basic Access</span>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Room Permissions</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">View</span>
<span class="badge bg-success"></span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Download</span>
<span class="badge bg-warning">Optional</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Upload</span>
<span class="badge bg-warning">Optional</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Delete</span>
<span class="badge bg-danger">Restricted</span>
</div>
</div>
</div>
</div>
<!-- Security Configuration -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-cogs me-2"></i>Security Configuration
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Framework</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Flask-Login</div>
<small class="text-muted">Session management</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">CSRF Protection</h6>
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--secondary-color);">Flask-WTF</div>
<small class="text-muted">Cross-site request forgery</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Password Hashing</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Werkzeug</div>
<small class="text-muted">Secure password hashing</small>
</div>
</div>
</div>
</div>
</div>
</div>