feat(ui): add dedicated Devices page for mobile tokens and registered devices

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

app/api/api_tokens.py

@@ -42,6 +42,9 @@ TOKEN_HASH_ITERATIONS = 100_000
 #: PBKDF2 salt for API token hashing (not secret, but fixed for determinism).
 TOKEN_HASH_SALT = b"api-token-v1"
 
+#: Name prefix used for tokens created by the mobile app flow.
+MOBILE_TOKEN_PREFIX = "Mobile App"
+
 
 # ---------------------------------------------------------------------------
 # Auth helper
@@ -91,6 +94,20 @@ def hash_token(token: str) -> str:
     return dk.hex()
 
 
+def _token_to_dict(t: ApiToken) -> dict[str, Any]:
+    """Convert an ``ApiToken`` ORM instance to a serialisable dict."""
+    return {
+        "id": t.id,
+        "name": t.name,
+        "token_prefix": t.token_prefix,
+        "is_active": t.is_active,
+        "last_used_at": t.last_used_at,
+        "last_used_ip": t.last_used_ip,
+        "created_at": t.created_at,
+        "revoked_at": t.revoked_at,
+    }
+
+
 # ---------------------------------------------------------------------------
 # Pydantic schemas
 # ---------------------------------------------------------------------------
@@ -177,21 +194,44 @@ async def list_tokens(
     owner_id: CurrentOwner,
     db: DbSession,
 ) -> list[dict[str, Any]]:
-    """List all API tokens for the authenticated user."""
-    tokens = db.query(ApiToken).filter(ApiToken.owner_id == owner_id).order_by(ApiToken.created_at.desc()).all()
-    return [
-        {
-            "id": t.id,
-            "name": t.name,
-            "token_prefix": t.token_prefix,
-            "is_active": t.is_active,
-            "last_used_at": t.last_used_at,
-            "last_used_ip": t.last_used_ip,
-            "created_at": t.created_at,
-            "revoked_at": t.revoked_at,
-        }
-        for t in tokens
-    ]
+    """List non-mobile API tokens for the authenticated user.
+
+    Mobile tokens (whose names start with ``"Mobile App"``) are excluded
+    from this list; they are managed on the dedicated Devices page via
+    ``GET /api/api-tokens/mobile``.
+    """
+    tokens = (
+        db.query(ApiToken)
+        .filter(
+            ApiToken.owner_id == owner_id,
+            ~ApiToken.name.startswith(MOBILE_TOKEN_PREFIX),
+        )
+        .order_by(ApiToken.created_at.desc())
+        .all()
+    )
+    return [_token_to_dict(t) for t in tokens]
+
+
+@router.get("/mobile", response_model=list[TokenResponse])
+async def list_mobile_tokens(
+    owner_id: CurrentOwner,
+    db: DbSession,
+) -> list[dict[str, Any]]:
+    """List mobile API tokens for the authenticated user.
+
+    Returns tokens whose names start with ``"Mobile App"`` — these are
+    created via the mobile SSO flow or QR code login.
+    """
+    tokens = (
+        db.query(ApiToken)
+        .filter(
+            ApiToken.owner_id == owner_id,
+            ApiToken.name.startswith(MOBILE_TOKEN_PREFIX),
+        )
+        .order_by(ApiToken.created_at.desc())
+        .all()
+    )
+    return [_token_to_dict(t) for t in tokens]
 
 
 @router.delete("/{token_id}", status_code=status.HTTP_200_OK)

app/views/__init__.py

@@ -10,6 +10,7 @@ from app.views.audit_logs import router as audit_logs_router
 from app.views.backup import router as backup_router
 from app.views.compliance import router as compliance_router
 from app.views.db_wizard import router as db_wizard_router
+from app.views.devices import router as devices_router  # Mobile devices dashboard
 from app.views.dropbox import router as dropbox_router
 from app.views.filemanager import router as filemanager_router
 
@@ -69,3 +70,4 @@ router.include_router(scheduled_jobs_router)  # Admin scheduled batch jobs
 router.include_router(audit_logs_router)  # Comprehensive audit log viewer
 router.include_router(help_router)  # Built-in help / How-To docs
 router.include_router(compliance_router)  # Compliance templates dashboard
+router.include_router(devices_router)  # Mobile devices dashboard

app/views/devices.py

@@ -0,0 +1,25 @@
+"""View route for the Devices management page.
+
+Renders the ``devices.html`` template where users can see their registered
+mobile devices, mobile API tokens (created via the mobile SSO flow or QR
+code login), and revoke access per-device.
+"""
+
+import logging
+
+from fastapi import APIRouter, Request
+
+from app.views.base import require_login, templates
+
+logger = logging.getLogger(__name__)
+router = APIRouter()
+
+
+@router.get("/devices", include_in_schema=False)
+@require_login
+async def devices_page(request: Request):
+    """Render the Devices management page."""
+    return templates.TemplateResponse(
+        "devices.html",
+        {"request": request, "page_title": "Devices"},
+    )