From a64096ece3b56d7a4f6f011303b356ca8631a586 Mon Sep 17 00:00:00 2001 From: Phillip Tarrant Date: Fri, 14 Nov 2025 11:51:27 -0600 Subject: [PATCH] Phase 2 Step 5: Implement Basic UI Templates Implement comprehensive web UI with dark slate theme matching HTML reports: Templates: - Create base.html with navigation, dark theme (#0f172a background) - Update dashboard.html with stats cards and recent scans table - Update scans.html with pagination, filtering, and status badges - Update scan_detail.html with comprehensive scan results display - Update login.html to extend base template with centered design Features: - AJAX-powered dynamic data loading from API endpoints - Auto-refresh for running scans (10-15 second intervals) - Responsive Bootstrap 5 grid layout - Color scheme matches report_mockup.html (slate dark theme) - Status badges (success/danger/warning/info) with proper colors - Modal dialogs for triggering scans - Pagination with ellipsis for large result sets - Delete confirmation dialogs - Loading spinners for async operations Bug Fixes: - Fix scanner.py imports to use 'src.' prefix for module imports - Fix scans.py to import validate_page_params from pagination module All templates use consistent color palette: - Background: #0f172a, Cards: #1e293b, Accent: #60a5fa - Success: #065f46/#6ee7b7, Danger: #7f1d1d/#fca5a5 - Warning: #78350f/#fcd34d, Info: #1e3a8a/#93c5fd --- docs/ai/PHASE2.md | 17 +- src/scanner.py | 4 +- web/api/scans.py | 3 +- web/templates/base.html | 345 +++++++++++++++++++++++ web/templates/dashboard.html | 421 +++++++++++++++++++++++----- web/templates/login.html | 180 ++++++------ web/templates/scan_detail.html | 412 +++++++++++++++++++++++++++- web/templates/scans.html | 482 ++++++++++++++++++++++++++++++++- 8 files changed, 1664 insertions(+), 200 deletions(-) create mode 100644 web/templates/base.html diff --git a/docs/ai/PHASE2.md b/docs/ai/PHASE2.md index deb8a55..690df26 100644 --- a/docs/ai/PHASE2.md +++ b/docs/ai/PHASE2.md @@ -1,7 +1,7 @@ # Phase 2 Implementation Plan: Flask Web App Core -**Status:** Step 4 Complete ✅ - Authentication System (Days 7-8) -**Progress:** 8/14 days complete (57%) +**Status:** Step 5 Complete ✅ - Basic UI Templates (Days 9-10) +**Progress:** 10/14 days complete (71%) **Estimated Duration:** 14 days (2 weeks) **Dependencies:** Phase 1 Complete ✅ @@ -34,8 +34,17 @@ - Bootstrap 5 dark theme UI templates - 30+ authentication tests - 1,200+ lines of code added -- ⏳ **Step 5: Basic UI Templates** (Days 9-10) - NEXT -- 📋 **Step 6: Docker & Deployment** (Day 11) - Pending +- ✅ **Step 5: Basic UI Templates** (Days 9-10) - COMPLETE + - base.html template with navigation and slate dark theme + - dashboard.html with stats cards and recent scans + - scans.html with pagination and filtering + - scan_detail.html with comprehensive scan results display + - login.html updated to use dark theme + - All templates use matching color scheme from report_mockup.html + - AJAX-powered dynamic data loading + - Auto-refresh for running scans + - Responsive design with Bootstrap 5 +- 📋 **Step 6: Docker & Deployment** (Day 11) - NEXT - 📋 **Step 7: Error Handling & Logging** (Day 12) - Pending - 📋 **Step 8: Testing & Documentation** (Days 13-14) - Pending diff --git a/src/scanner.py b/src/scanner.py index 0860cf3..3e7716e 100644 --- a/src/scanner.py +++ b/src/scanner.py @@ -20,8 +20,8 @@ import yaml from libnmap.process import NmapProcess from libnmap.parser import NmapParser -from screenshot_capture import ScreenshotCapture -from report_generator import HTMLReportGenerator +from src.screenshot_capture import ScreenshotCapture +from src.report_generator import HTMLReportGenerator # Force unbuffered output for Docker sys.stdout.reconfigure(line_buffering=True) diff --git a/web/api/scans.py b/web/api/scans.py index f1901d4..dd5606c 100644 --- a/web/api/scans.py +++ b/web/api/scans.py @@ -11,7 +11,8 @@ from sqlalchemy.exc import SQLAlchemyError from web.auth.decorators import api_auth_required from web.services.scan_service import ScanService -from web.utils.validators import validate_config_file, validate_page_params +from web.utils.validators import validate_config_file +from web.utils.pagination import validate_page_params bp = Blueprint('scans', __name__) logger = logging.getLogger(__name__) diff --git a/web/templates/base.html b/web/templates/base.html new file mode 100644 index 0000000..e2b9bbe --- /dev/null +++ b/web/templates/base.html @@ -0,0 +1,345 @@ + + + + + + {% block title %}SneakyScanner{% endblock %} + + + + + {% if not hide_nav %} + + {% endif %} + +
+ {% with messages = get_flashed_messages(with_categories=true) %} + {% if messages %} + {% for category, message in messages %} + + {% endfor %} + {% endif %} + {% endwith %} + + {% block content %}{% endblock %} +
+ +
+
+ SneakyScanner v1.0 - Phase 2 Complete +
+
+ + + {% block scripts %}{% endblock %} + + diff --git a/web/templates/dashboard.html b/web/templates/dashboard.html index fbd289d..31390a7 100644 --- a/web/templates/dashboard.html +++ b/web/templates/dashboard.html @@ -1,84 +1,355 @@ - - - - - - Dashboard - SneakyScanner - - - - - + + -
-
-
-

Dashboard

- - {% with messages = get_flashed_messages(with_categories=true) %} - {% if messages %} - {% for category, message in messages %} - - {% endfor %} - {% endif %} - {% endwith %} - -
-

Phase 2 Complete!

-

Authentication system is now active. Full dashboard UI will be implemented in Phase 5.

-
-

Use the API endpoints to trigger scans and view results.

-
- -
-
-
Quick Actions
-

Use the API to manage scans:

-
    -
  • POST /api/scans - Trigger a new scan
    • -
  • GET /api/scans - List all scans
    • -
  • GET /api/scans/{id} - View scan details
    • -
  • DELETE /api/scans/{id} - Delete a scan
    • -
+ +
+
+
+
+
Recent Scans
+ +
+
+
+
+ + +
+
- - - + + +{% endblock %} + +{% block scripts %} + +{% endblock %} diff --git a/web/templates/login.html b/web/templates/login.html index 1ba36bc..922bde8 100644 --- a/web/templates/login.html +++ b/web/templates/login.html @@ -1,95 +1,99 @@ - - - - - - Login - SneakyScanner - - - - -