Image links -> lightbox instead of download

AGENTS.md

@@ -209,6 +209,11 @@ labhelper/
 │   │       ├── clean_orphaned_files.py     # Cleanup orphaned ThingFile attachments
 │   │       └── clean_orphaned_images.py    # Cleanup orphaned Thing images
 │   ├── migrations/                         # Database migrations
+│   ├── static/
+│   │   └── css/
+│   │       ├── base.css                    # Base styles (layout, navbar, buttons, alerts, etc.)
+│   │       ├── edit_thing.css              # Edit thing form styles
+│   │       └── thing_detail.css            # Markdown content + lightbox styles
 │   ├── templates/
 │   │   └── boxes/
 │   │       ├── add_things.html             # Form to add multiple things
@@ -356,14 +361,21 @@ The project uses a base template system at `labhelper/templates/base.html`. All
 
 ### CSS Guidelines
 
+**Static CSS Files:**
+- Base styles live in `boxes/static/css/base.css` (loaded by `base.html` via `{% static %}`)
+- Page-specific styles live in separate static CSS files (e.g., `thing_detail.css`, `edit_thing.css`)
+- Child templates load their CSS via `{% block extra_css %}` with `<link>` tags
+- WhiteNoise serves and cache-busts static files via `CompressedManifestStaticFilesStorage`
+- Run `python manage.py collectstatic` after adding or modifying static CSS files
+
 **Naming:**
 - Use descriptive class names
 - BEM pattern encouraged for complex components
-- Inline styles allowed for template-specific styling
+- Inline styles allowed for template-specific one-off styling
 
 **Styles:**
-- Use base template styles when possible
-- Template-specific styles in `{% block extra_css %}`
+- Use base CSS classes when possible
+- Page-specific styles in dedicated static CSS files loaded via `{% block extra_css %}`
 - JavaScript in `{% block extra_js %}`
 - Smooth transitions (0.2s - 0.3s)
 - Hover effects with transform and box-shadow
@@ -410,36 +422,44 @@ The project uses a base template system at `labhelper/templates/base.html`. All
     - `title`: Page title tag
     - `page_header`: Page header with breadcrumbs
     - `content`: Main page content
-    - `extra_css`: Additional styles
+    - `extra_css`: Additional CSS via `<link>` tags to static files
+    - `extra_head`: Additional head elements
     - `extra_js`: Additional JavaScript
 
 3. **Load required template tags**
     ```django
-    {% load static %}
+    {% load static %}      {# Required when using {% static %} for CSS/asset links #}
     {% load mptt_tags %}
     {% load thumbnail %}
     {% load dict_extras %}
     ```
 
-4. **Use URL names for links**
+4. **Link page-specific CSS from static files**
+    ```django
+    {% block extra_css %}
+    <link rel="stylesheet" href="{% static 'css/thing_detail.css' %}">
+    {% endblock %}
+    ```
+
+5. **Use URL names for links**
     ```django
     <a href="{% url 'box_detail' box.id %}">
     ```
 
-5. **Use icons with Font Awesome**
+6. **Use icons with Font Awesome**
     ```django
     <i class="fas fa-box"></i>
     ```
 
-6. **Add breadcrumbs for navigation**
+7. **Add breadcrumbs for navigation**
     ```django
     <p class="breadcrumb">
-        <a href="/"><i class="fas fa-home"></i> Home</a> / 
+        <a href="/"><i class="fas fa-home"></i> Home</a> /
         <a href="/box/{{ box.id }}/"><i class="fas fa-box"></i> Box {{ box.id }}</a>
     </p>
     ```
 
-7. **Icon alignment in lists**: When using icons in list items, use fixed width containers to ensure proper alignment
+8. **Icon alignment in lists**: When using icons in list items, use fixed width containers to ensure proper alignment
     ```django
     <a href="{% url 'thing_detail' thing.id %}" style="display: inline-block; width: 20px; text-align: center;">
         <i class="fas fa-link"></i>

Dockerfile

@@ -46,6 +46,9 @@ RUN rm -rvf /app/Dockerfile* \
            /app/requirements.txt \
            /app/node_modules \
            /app/*.json \
+	   /app/AGENTS* \
+	   /app/*.md \
+           /app/k8s-templates \
            /app/test_*.py && \
        python3 /app/manage.py collectstatic --noinput
 CMD ["sh", "-c", "python manage.py thumbnail clear && gunicorn --bind 0.0.0.0:8000 --workers 3 $GUNICORN_OPTS labhelper.wsgi:application"]

Keycloak-installation.md

@@ -0,0 +1,207 @@
+# Keycloak SSO Integration
+
+This document describes how Keycloak SSO was integrated into labhelper, replacing the built-in Django username/password authentication.
+
+## Overview
+
+Authentication is handled via OpenID Connect (OIDC) using the `mozilla-django-oidc` library. When a user visits any protected page, they are redirected to Keycloak to authenticate. On return, Keycloak group memberships are synced to Django groups, controlling what the user can do in the app.
+
+---
+
+## Keycloak Setup
+
+### 1. Create a client
+
+In the Keycloak admin console, go to **Clients → Create client**.
+
+| Field | Value | Why |
+|---|---|---|
+| Client type | OpenID Connect | The protocol mozilla-django-oidc speaks |
+| Client ID | `labhelper` | Must match `OIDC_RP_CLIENT_ID` in the app |
+| Client authentication | On (confidential) | Server-side apps use a client secret; this is more secure than a public client |
+| Authentication flow | Standard flow only | labhelper uses the standard authorisation code flow |
+
+After saving, go to the **Credentials** tab and copy the **Client secret** — this is `OIDC_RP_CLIENT_SECRET`.
+
+### 2. Set the redirect URI
+
+In the client **Settings** tab:
+
+| Field | Value | Why |
+|---|---|---|
+| Valid redirect URIs | `https://your-app/oidc/callback/` | Keycloak will only redirect back to whitelisted URIs after authentication. The trailing slash is required — without it Keycloak rejects the request. For local dev also add `http://127.0.0.1:8000/oidc/callback/` |
+
+### 3. Set the PKCE code challenge method
+
+In the client **Advanced** tab, find **"Proof Key for Code Exchange Code Challenge Method"** and set it to **S256**.
+
+Why: Keycloak 26 configures new clients with PKCE enforced. `mozilla-django-oidc` sends `S256` as the challenge method (the more secure option). If Keycloak is set to `plain`, the two sides don't agree and authentication fails with `code challenge method is not matching the configured one`.
+
+### 4. Add a Groups mapper
+
+This makes Keycloak include the user's group memberships in the token so the app can sync them to Django groups.
+
+Go to **Clients → labhelper → Client scopes** tab → click the dedicated scope (named `labhelper-dedicated`) → **Add mapper → By configuration → Group Membership**.
+
+| Field | Value | Why |
+|---|---|---|
+| Name | `groups` | Label for this mapper |
+| Token Claim Name | `groups` | The claim name the app reads from the token |
+| Full group path | Off | Sends `LabHelper Administrators` instead of `/LabHelper Administrators`. The app strips leading slashes anyway, but this is cleaner |
+| Add to ID token | On | |
+| Add to access token | On | |
+| Add to userinfo | On | The app fetches userinfo after the token exchange |
+
+### 5. Create groups
+
+Go to **Groups** (left sidebar) and create these three groups with exactly these names — they map to the existing Django groups:
+
+- `LabHelper Administrators` — gets `is_staff=True` in Django (admin access)
+- `LabHelper Staff`
+- `LabHelper Viewers`
+
+### 6. Ensure users have an email address
+
+`mozilla-django-oidc` requires the `email` claim to be present in the token. Every Keycloak user who will log into labhelper must have:
+
+- An **Email** address set (Users → select user → Details tab)
+- **Email verified** ticked
+
+Without an email, authentication fails silently with `Claims verification failed` in the Django logs.
+
+---
+
+## App Configuration
+
+The app is configured entirely via environment variables.
+
+### Required variables
+
+```bash
+OIDC_OP_BASE_URL=https://keycloak.example.com/realms/your-realm
+OIDC_RP_CLIENT_ID=labhelper
+OIDC_RP_CLIENT_SECRET=<client-secret-from-keycloak-credentials-tab>
+```
+
+`OIDC_OP_BASE_URL` is the realm URL. All OIDC endpoints (authorisation, token, userinfo, JWKS, logout) are derived from it automatically in `settings.py`.
+
+### Other relevant variables
+
+```bash
+ALLOWED_HOSTS=your-app-hostname
+CSRF_TRUSTED_ORIGINS=https://your-app
+```
+
+`CSRF_TRUSTED_ORIGINS` must include the app's origin. The OIDC callback goes through Django's CSRF middleware, and requests from untrusted origins are rejected.
+
+---
+
+## How the App Side Works
+
+### Library
+
+`mozilla-django-oidc` handles the full OIDC flow: redirecting to Keycloak, validating the returned token (RS256 signature verified against Keycloak's JWKS endpoint), exchanging the authorisation code, and fetching userinfo.
+
+### Key settings
+
+| Setting | Value | Why |
+|---|---|---|
+| `OIDC_RP_SIGN_ALGO` | `RS256` | Keycloak signs tokens with RS256 by default |
+| `OIDC_RP_SCOPES` | `openid email profile` | `profile` is needed to get `preferred_username`, `given_name`, `family_name` from Keycloak |
+| `OIDC_USE_PKCE` | `True` | Required because Keycloak enforces PKCE on this client |
+| `OIDC_STORE_ID_TOKEN` | `True` | The ID token is stored in the session and passed as `id_token_hint` when logging out, so Keycloak also ends its own session |
+| `OIDC_EXEMPT_URLS` | `['search_api']` | The search endpoint is called via AJAX. The `SessionRefresh` middleware would return a redirect instead of JSON for unauthenticated AJAX calls, breaking the UI |
+| `LOGIN_URL` | `oidc_authentication_init` | When `@login_required` intercepts an unauthenticated request, it redirects directly to the OIDC flow rather than a local login form |
+
+### Authentication backend (`labhelper/auth_backend.py`)
+
+Overrides `OIDCAuthenticationBackend` to:
+
+- Use `preferred_username` from Keycloak as the Django username
+- Set `first_name` and `last_name` from `given_name` / `family_name` claims
+- Sync group memberships on every login — if a user is added to or removed from a Keycloak group, it takes effect at their next login
+- Set `is_staff=True` for members of `LabHelper Administrators` (grants Django admin access)
+
+`django.contrib.auth.backends.ModelBackend` is kept as a fallback so the Django admin login form still works with a local username/password (useful for emergency superuser access without Keycloak).
+
+### Session refresh middleware
+
+`mozilla_django_oidc.middleware.SessionRefresh` is added after `AuthenticationMiddleware`. It periodically checks whether the user's OIDC session is still valid and forces re-authentication if the token has expired, rather than keeping a stale Django session alive indefinitely.
+
+### URLs
+
+All OIDC routes are mounted under `/oidc/`:
+
+| URL | Purpose |
+|---|---|
+| `/oidc/authenticate/` | Initiates the OIDC flow, redirects to Keycloak |
+| `/oidc/callback/` | Keycloak redirects here after authentication |
+| `/oidc/logout/` | Logs out of Django and ends the Keycloak session |
+
+`/login/` is kept as a static landing page with a "Login with SSO" button, used when users navigate to it manually or are redirected there after logout.
+
+---
+
+## Auth Flow
+
+```
+User visits protected page
+        ↓
+@login_required → redirect to /oidc/authenticate/?next=/original/url/
+        ↓
+Redirect to Keycloak (with code_challenge for PKCE)
+        ↓
+User authenticates in Keycloak
+        ↓
+Keycloak redirects to /oidc/callback/?code=...
+        ↓
+App exchanges code for tokens, verifies RS256 signature
+        ↓
+App fetches userinfo, syncs groups and attributes
+        ↓
+User redirected to original URL
+```
+
+---
+
+## Troubleshooting
+
+| Error | Cause | Fix |
+|---|---|---|
+| `Invalid parameter: redirect_uri` | Redirect URI not in Keycloak whitelist, or trailing slash missing | Add exact URI including trailing slash to Keycloak client Valid Redirect URIs |
+| `Missing parameter: code_challenge_method` | Keycloak requires PKCE but app wasn't sending it | Set `OIDC_USE_PKCE = True` in settings |
+| `code challenge method is not matching the configured one` | Keycloak client set to `plain`, app sends `S256` | Set PKCE method to `S256` in Keycloak client Advanced settings |
+| `Claims verification failed` | User has no email set in Keycloak | Set email address and tick Email Verified on the Keycloak user |
+| `NoReverseMatch` for `OIDC_EXEMPT_URLS` | Regex pattern used instead of URL name | Use the Django URL name (`'search_api'`), not a regex |
+| Login loops without showing Keycloak | Existing Keycloak session auto-authenticates | Expected behaviour — Keycloak reuses its session. Log out of Keycloak admin console to test a clean login |
+
+---
+
+## Kubernetes Deployment
+
+Split the configuration across a ConfigMap and a Secret. The client secret must not go in a ConfigMap as the contents are visible in plain text to anyone with cluster access.
+
+**ConfigMap**
+```yaml
+data:
+  OIDC_OP_BASE_URL: https://keycloak.example.com/realms/your-realm
+  OIDC_RP_CLIENT_ID: labhelper
+  CSRF_TRUSTED_ORIGINS: https://labhelper.adebaumann.com
+  ALLOWED_HOSTS: labhelper.adebaumann.com
+```
+
+**Secret**
+```yaml
+stringData:
+  OIDC_RP_CLIENT_SECRET: <client-secret-from-keycloak-credentials-tab>
+  DJANGO_SECRET_KEY: <random-secret-key>
+```
+
+Reference both in the deployment:
+```yaml
+envFrom:
+  - configMapRef:
+      name: labhelper-config
+  - secretRef:
+      name: labhelper-secret
+```

argocd/configmap.yaml

@@ -14,9 +14,11 @@ data:
   STATIC_URL: "/static/"
   MEDIA_URL: "/media/"
   CSRF_TRUSTED_ORIGINS: "https://labhelper.adebaumann.com"
-  LOGIN_URL: "login"
+  LOGIN_URL: "oidc_authentication_init"
+  OIDC_OP_BASE_URL: "https://sso.baumann.gr/realms/homelab"
+  OIDC_RP_CLIENT_ID: "labhelper"
   LOGIN_REDIRECT_URL: "index"
-  LOGOUT_REDIRECT_URL: "login"
-  TRUSTED_PROXIES: "192.168.17.44,192.168.17.53"
+  LOGOUT_REDIRECT_URL: "/login/"
+  OIDC_AUTHENTICATION_FAILURE_REDIRECT_URL: "/login/"
   GUNICORN_OPTS: "--access-logfile -"
-  IMAGE_TAG: "0.070"
+  IMAGE_TAG: "0.079"

argocd/deployment.yaml

@@ -27,7 +27,7 @@ spec:
               mountPath: /data
       containers:
         - name: web
-          image: git.baumann.gr/adebaumann/labhelper:0.070
+          image: git.baumann.gr/adebaumann/labhelper:0.082
           imagePullPolicy: Always
           ports:
             - containerPort: 8000
@@ -92,6 +92,21 @@ spec:
                 configMapKeyRef:
                   name: django-config
                   key: LOGIN_URL
+            - name: OIDC_OP_BASE_URL
+              valueFrom:
+                configMapKeyRef:
+                  name: django-config
+                  key: OIDC_OP_BASE_URL
+            - name: OIDC_RP_CLIENT_ID
+              valueFrom:
+                configMapKeyRef:
+                  name: django-config
+                  key: OIDC_RP_CLIENT_ID
+            - name: OIDC_RP_CLIENT_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: django-secret
+                  key: oidc-client-secret
             - name: LOGIN_REDIRECT_URL
               valueFrom:
                 configMapKeyRef:
@@ -102,11 +117,11 @@ spec:
                 configMapKeyRef:
                   name: django-config
                   key: LOGOUT_REDIRECT_URL
-            - name: TRUSTED_PROXIES
+            - name: OIDC_AUTHENTICATION_FAILURE_REDIRECT_URL
               valueFrom:
                 configMapKeyRef:
                   name: django-config
-                  key: TRUSTED_PROXIES
+                  key: OIDC_AUTHENTICATION_FAILURE_REDIRECT_URL
             - name: GUNICORN_OPTS
               valueFrom:
                 configMapKeyRef:
@@ -122,7 +137,7 @@ spec:
               mountPath: /app/data
           readinessProbe:
             httpGet:
-              path: /
+              path: /health/
               port: 8000
             initialDelaySeconds: 5
             periodSeconds: 10
@@ -130,7 +145,7 @@ spec:
             failureThreshold: 6
           livenessProbe:
             httpGet:
-              path: /
+              path: /health/
               port: 8000
             initialDelaySeconds: 20
             periodSeconds: 20

argocd/nfs-pv.yaml

@@ -15,4 +15,4 @@ spec:
   storageClassName: nfs
   nfs:
     server: 192.168.17.199
-    path: /mnt/user/labhelper
+    path: /mnt/user/kubernetesdata/labhelper

boxes/static/css/base.css

@@ -0,0 +1,383 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 0 20px;
+}
+
+.navbar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 15px 30px;
+    margin: 20px auto;
+    max-width: 1200px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.navbar-brand {
+    font-size: 28px;
+    font-weight: 700;
+    color: #667eea;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.navbar-brand i {
+    font-size: 24px;
+}
+
+.navbar-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: #555;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+.navbar-toggle:hover {
+    background: #667eea;
+    color: white;
+}
+
+.navbar-nav {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.navbar-nav a,
+.navbar-nav form {
+    color: #555;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 15px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.navbar-nav a:hover,
+.navbar-nav button:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.navbar-nav a i {
+    font-size: 14px;
+}
+
+.navbar-nav button {
+    background: none;
+    border: none;
+    color: #555;
+    font: inherit;
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+@media (max-width: 768px) {
+    .navbar {
+        padding: 15px 20px;
+    }
+
+    .navbar-brand {
+        font-size: 24px;
+    }
+
+    .navbar-toggle {
+        display: block;
+    }
+
+    .navbar-nav {
+        display: none;
+        width: 100%;
+        flex-direction: column;
+        gap: 0;
+        padding-top: 10px;
+    }
+
+    .navbar-nav.active {
+        display: flex;
+    }
+
+    .navbar-nav a,
+    .navbar-nav form {
+        width: 100%;
+        padding: 12px 16px;
+        border-radius: 0;
+    }
+
+    .navbar-nav a:first-child,
+    .navbar-nav form:first-child {
+        border-radius: 8px 8px 0 0;
+    }
+
+    .navbar-nav > a:last-child {
+        border-radius: 0 0 8px 8px;
+    }
+
+    .dropdown-content a:last-child {
+        border-radius: 0 0 8px 8px;
+    }
+
+    .navbar-nav button {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}
+
+.container {
+    max-width: 1200px;
+    margin: 20px auto;
+}
+
+.page-header {
+    background: white;
+    padding: 30px;
+    border-radius: 15px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.page-header h1 {
+    color: #333;
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+.page-header .breadcrumb {
+    color: #888;
+    font-size: 14px;
+}
+
+.page-header .breadcrumb a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.page-header .breadcrumb a:hover {
+    text-decoration: underline;
+}
+
+.section {
+    background: white;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    margin-bottom: 30px;
+}
+
+.section h2 {
+    color: #667eea;
+    font-size: 24px;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 3px solid #667eea;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.section h2 i {
+    font-size: 20px;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
+    box-shadow: 0 4px 15px rgba(127, 140, 141, 0.4);
+}
+
+.btn-secondary:hover {
+    box-shadow: 0 6px 20px rgba(127, 140, 141, 0.6);
+}
+
+.btn-sm {
+    padding: 8px 16px;
+    font-size: 14px;
+}
+
+.alert {
+    padding: 15px 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    font-weight: 500;
+}
+
+.alert-success {
+    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+}
+
+.alert-error {
+    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+}
+
+.footer {
+    text-align: center;
+    color: white;
+    padding: 30px;
+    margin-top: 30px;
+}
+
+.footer a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    background: white;
+    min-width: 200px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    padding: 10px 0;
+    z-index: 1000;
+    top: 100%;
+    margin-top: 10px;
+}
+
+.dropdown-content a {
+    display: block;
+    padding: 12px 20px;
+    color: #555;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.dropdown-content a:hover {
+    background: #667eea;
+    color: white;
+    transform: none;
+    box-shadow: none;
+}
+
+.dropdown-content a:first-child {
+    border-radius: 10px 10px 0 0;
+}
+
+.dropdown-content a:last-child {
+    border-radius: 0 0 10px 10px;
+}
+
+#logout-form {
+    display: none;
+}
+
+.dropdown:hover .dropdown-content,
+.dropdown:focus-within .dropdown-content {
+    display: block;
+}
+
+.dropdown-btn {
+    background: none;
+    border: none;
+    color: #667eea;
+    font-weight: 600;
+    font-size: 15px;
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.dropdown-btn:hover {
+    background: #667eea;
+    color: white;
+}
+
+@media (max-width: 768px) {
+    .dropdown {
+        display: contents;
+    }
+
+    .dropdown-btn {
+        display: none;
+    }
+
+    .dropdown-content,
+    .dropdown:hover .dropdown-content,
+    .dropdown:focus-within .dropdown-content {
+        display: contents;
+    }
+
+    .dropdown-content a {
+        width: 100%;
+        padding: 12px 16px;
+        border-radius: 0;
+    }
+}

boxes/static/css/edit_thing.css

@@ -0,0 +1,21 @@
+#id_name, #id_description {
+    width: 100%;
+    padding: 10px 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 15px;
+    background: white;
+    transition: all 0.3s;
+}
+#id_name:focus, #id_description:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    outline: none;
+}
+#id_description {
+    min-height: 120px;
+    font-family: inherit;
+}
+.detail-row {
+    margin-bottom: 25px;
+}

boxes/static/css/thing_detail.css

@@ -0,0 +1,115 @@
+.markdown-content p {
+    margin: 0 0 1em 0;
+}
+.markdown-content p:last-child {
+    margin-bottom: 0;
+}
+.markdown-content h1, .markdown-content h2, .markdown-content h3,
+.markdown-content h4, .markdown-content h5, .markdown-content h6 {
+    margin: 1.5em 0 0.5em 0;
+    color: #333;
+    font-weight: 600;
+}
+.markdown-content h1:first-child, .markdown-content h2:first-child,
+.markdown-content h3:first-child {
+    margin-top: 0;
+}
+.markdown-content ul, .markdown-content ol {
+    margin: 0.5em 0;
+    padding-left: 2em;
+}
+.markdown-content li {
+    margin: 0.25em 0;
+}
+.markdown-content code {
+    background: #f4f4f4;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.9em;
+}
+.markdown-content pre {
+    background: #f4f4f4;
+    padding: 15px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1em 0;
+}
+.markdown-content pre code {
+    background: none;
+    padding: 0;
+}
+.markdown-content blockquote {
+    border-left: 4px solid #667eea;
+    margin: 1em 0;
+    padding: 0.5em 1em;
+    background: #f8f9fa;
+    color: #666;
+}
+.markdown-content a {
+    color: #667eea;
+    text-decoration: none;
+}
+.markdown-content a:hover {
+    text-decoration: underline;
+}
+.markdown-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+}
+.markdown-content th, .markdown-content td {
+    border: 1px solid #e0e0e0;
+    padding: 8px 12px;
+    text-align: left;
+}
+.markdown-content th {
+    background: #f8f9fa;
+    font-weight: 600;
+}
+.markdown-content hr {
+    border: none;
+    border-top: 2px solid #e0e0e0;
+    margin: 1.5em 0;
+}
+
+.lightbox {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+    cursor: zoom-out;
+}
+
+.lightbox.active {
+    display: flex;
+}
+
+.lightbox img {
+    max-width: 90%;
+    max-height: 90%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+}
+
+.lightbox-close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: white;
+    font-size: 40px;
+    cursor: pointer;
+    z-index: 10000;
+    transition: opacity 0.2s;
+}
+
+.lightbox-close:hover {
+    opacity: 0.7;
+}

boxes/templates/boxes/edit_thing.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% load thumbnail %}
 {% load dict_extras %}
 
@@ -283,32 +284,20 @@
     </div>
 </div>
 
+<div class="section">
+    <form method="post" action="{% url 'delete_thing' thing.id %}"
+          onsubmit="return confirm('Are you sure you want to delete {{ thing.name }}? This cannot be undone.');">
+        {% csrf_token %}
+        <button type="submit" class="btn btn-danger">
+            <i class="fas fa-trash"></i> Delete Thing
+        </button>
+    </form>
+</div>
+
 {% endblock %}
 
 {% block extra_css %}
-<style>
-#id_name, #id_description {
-    width: 100%;
-    padding: 10px 15px;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    font-size: 15px;
-    background: white;
-    transition: all 0.3s;
-}
-#id_name:focus, #id_description:focus {
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-    outline: none;
-}
-#id_description {
-    min-height: 120px;
-    font-family: inherit;
-}
-.detail-row {
-    margin-bottom: 25px;
-}
-</style>
+<link rel="stylesheet" href="{% static 'css/edit_thing.css' %}">
 {% endblock %}
 
 {% block extra_js %}

boxes/templates/boxes/thing_detail.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% load thumbnail %}
 {% load dict_extras %}
 
@@ -97,7 +98,7 @@
                     <div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border:1px solid #e9ecef;">
                         <img class="lightbox-trigger" data-url="{{ file.file.url }}" src="{{ thumb.url }}" alt="{{ file.title }}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                         <div style="flex-grow: 1;">
-                            <a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
+                            <a href="#" class="lightbox-trigger" data-url="{{ file.file.url }}" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
                             <span style="color: #999; font-size: 12px;">({{ file.filename }})</span>
                         </div>
                         <i class="fas fa-expand lightbox-trigger" data-url="{{ file.file.url }}" style="color: #999; font-size: 14px; cursor: pointer;"></i>
@@ -169,121 +170,5 @@ $(document).ready(function() {
 {% endblock %}
 
 {% block extra_css %}
-<style>
-.markdown-content p {
-    margin: 0 0 1em 0;
-}
-.markdown-content p:last-child {
-    margin-bottom: 0;
-}
-.markdown-content h1, .markdown-content h2, .markdown-content h3,
-.markdown-content h4, .markdown-content h5, .markdown-content h6 {
-    margin: 1.5em 0 0.5em 0;
-    color: #333;
-    font-weight: 600;
-}
-.markdown-content h1:first-child, .markdown-content h2:first-child,
-.markdown-content h3:first-child {
-    margin-top: 0;
-}
-.markdown-content ul, .markdown-content ol {
-    margin: 0.5em 0;
-    padding-left: 2em;
-}
-.markdown-content li {
-    margin: 0.25em 0;
-}
-.markdown-content code {
-    background: #f4f4f4;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-family: 'Consolas', 'Monaco', monospace;
-    font-size: 0.9em;
-}
-.markdown-content pre {
-    background: #f4f4f4;
-    padding: 15px;
-    border-radius: 8px;
-    overflow-x: auto;
-    margin: 1em 0;
-}
-.markdown-content pre code {
-    background: none;
-    padding: 0;
-}
-.markdown-content blockquote {
-    border-left: 4px solid #667eea;
-    margin: 1em 0;
-    padding: 0.5em 1em;
-    background: #f8f9fa;
-    color: #666;
-}
-.markdown-content a {
-    color: #667eea;
-    text-decoration: none;
-}
-.markdown-content a:hover {
-    text-decoration: underline;
-}
-.markdown-content table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 1em 0;
-}
-.markdown-content th, .markdown-content td {
-    border: 1px solid #e0e0e0;
-    padding: 8px 12px;
-    text-align: left;
-}
-.markdown-content th {
-    background: #f8f9fa;
-    font-weight: 600;
-}
-.markdown-content hr {
-    border: none;
-    border-top: 2px solid #e0e0e0;
-    margin: 1.5em 0;
-}
-
-.lightbox {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.9);
-    z-index: 9999;
-    justify-content: center;
-    align-items: center;
-    cursor: zoom-out;
-}
-
-.lightbox.active {
-    display: flex;
-}
-
-.lightbox img {
-    max-width: 90%;
-    max-height: 90%;
-    object-fit: contain;
-    border-radius: 8px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-}
-
-.lightbox-close {
-    position: absolute;
-    top: 20px;
-    right: 30px;
-    color: white;
-    font-size: 40px;
-    cursor: pointer;
-    z-index: 10000;
-    transition: opacity 0.2s;
-}
-
-.lightbox-close:hover {
-    opacity: 0.7;
-}
-</style>
+<link rel="stylesheet" href="{% static 'css/thing_detail.css' %}">
 {% endblock %}

boxes/views.py

@@ -18,6 +18,11 @@ from .forms import (
 from .models import Box, BoxType, Facet, Tag, Thing, ThingFile, ThingLink
 
 
+def health_check(request):
+    """Health check endpoint for Kubernetes liveness/readiness probes."""
+    return HttpResponse('OK', status=200)
+
+
 def _strip_markdown(text, max_length=100):
     """Convert Markdown to plain text and truncate."""
     if not text:
@@ -373,6 +378,21 @@ def delete_box(request, box_id):
     return redirect('box_management')
 
 
+@login_required
+def delete_thing(request, thing_id):
+    """Delete a thing and its associated files."""
+    thing = get_object_or_404(Thing, pk=thing_id)
+    if request.method == 'POST':
+        box_id = thing.box.id
+        if thing.picture:
+            thing.picture.delete(save=False)
+        for thing_file in thing.files.all():
+            thing_file.file.delete(save=False)
+        thing.delete()
+        return redirect('box_detail', box_id=box_id)
+    return redirect('edit_thing', thing_id=thing_id)
+
+
 @login_required
 def resources_list(request):
     """List all links and files from things that have them."""

gunicorn.conf.py

@@ -1,14 +1,7 @@
 import logging
-import os
 
 from gunicorn.glogging import Logger
 
-TRUSTED_PROXIES = {
-    ip.strip()
-    for ip in os.environ.get("TRUSTED_PROXIES", "").split(",")
-    if ip.strip()
-}
-
 
 class HealthCheckFilter(logging.Filter):
     def filter(self, record):
@@ -17,62 +10,9 @@ class HealthCheckFilter(logging.Filter):
 
 
 class CustomLogger(Logger):
-    def atoms(self, resp, req, environ, request_time):
-        atoms = super().atoms(resp, req, environ, request_time)
-        atoms["{client-ip}e"] = self._get_client_ip(environ)
-        return atoms
-
-    @staticmethod
-    def _get_client_ip(environ):
-        remote_addr = environ.get("REMOTE_ADDR", "-")
-        xff = environ.get("HTTP_X_FORWARDED_FOR", "")
-        if not xff:
-            return remote_addr
-        # Walk the chain from right to left, skipping trusted proxies
-        ips = [ip.strip() for ip in xff.split(",")]
-        for ip in reversed(ips):
-            if ip not in TRUSTED_PROXIES:
-                return ip
-        # All IPs in the chain are trusted; fall back to the leftmost
-        return ips[0]
+    def setup(self, cfg):
+        super().setup(cfg)
+        self.access_log.addFilter(HealthCheckFilter())
 
 
 logger_class = CustomLogger
-access_log_format = '%({client-ip}e)s %(l)s %(u)s %(t)s "%(r)s" %(s)s %(b)s "%(f)s" "%(a)s"'
-
-logconfig_dict = {
-    "version": 1,
-    "disable_existing_loggers": False,
-    "filters": {
-        "health_check": {
-            "()": HealthCheckFilter,
-        },
-    },
-    "handlers": {
-        "console": {
-            "class": "logging.StreamHandler",
-            "stream": "ext://sys.stderr",
-        },
-        "access_console": {
-            "class": "logging.StreamHandler",
-            "filters": ["health_check"],
-            "stream": "ext://sys.stdout",
-        },
-    },
-    "root": {
-        "level": "INFO",
-        "handlers": ["console"],
-    },
-    "loggers": {
-        "gunicorn.error": {
-            "level": "INFO",
-            "handlers": ["console"],
-            "propagate": False,
-        },
-        "gunicorn.access": {
-            "level": "INFO",
-            "handlers": ["access_console"],
-            "propagate": False,
-        },
-    },
-}

labhelper/auth_backend.py

@@ -0,0 +1,54 @@
+from mozilla_django_oidc.auth import OIDCAuthenticationBackend
+from django.contrib.auth.models import Group
+
+# Keycloak group name → Django group name mapping.
+# Keycloak may send group paths with a leading slash (e.g. "/LabHelper Administrators");
+# these are stripped before comparison.
+KEYCLOAK_GROUP_MAP = {
+    'LabHelper Administrators': 'LabHelper Administrators',
+    'LabHelper Staff': 'LabHelper Staff',
+    'LabHelper Viewers': 'LabHelper Viewers',
+}
+
+# Members of these groups receive is_staff=True (Django admin access)
+STAFF_GROUPS = {'LabHelper Administrators'}
+
+
+class KeycloakOIDCBackend(OIDCAuthenticationBackend):
+    """OIDC backend that maps Keycloak groups to Django groups on every login."""
+
+    def get_username(self, claims):
+        return claims.get('preferred_username') or super().get_username(claims)
+
+    def create_user(self, claims):
+        user = super().create_user(claims)
+        self._sync_from_claims(user, claims)
+        return user
+
+    def update_user(self, user, claims):
+        user = super().update_user(user, claims)
+        self._sync_from_claims(user, claims)
+        return user
+
+    def _sync_from_claims(self, user, claims):
+        """Sync user attributes and group memberships from Keycloak token claims."""
+        user.first_name = claims.get('given_name', user.first_name)
+        user.last_name = claims.get('family_name', user.last_name)
+
+        # Keycloak sends group paths like "/LabHelper Administrators"; normalise them.
+        raw_groups = claims.get('groups', [])
+        keycloak_groups = {g.lstrip('/') for g in raw_groups}
+
+        user.is_staff = bool(keycloak_groups & STAFF_GROUPS)
+        user.save()
+
+        # Add/remove the user from each managed Django group to match Keycloak.
+        for kc_group, django_group_name in KEYCLOAK_GROUP_MAP.items():
+            try:
+                group = Group.objects.get(name=django_group_name)
+            except Group.DoesNotExist:
+                continue
+            if kc_group in keycloak_groups:
+                user.groups.add(group)
+            else:
+                user.groups.remove(group)

labhelper/management/commands/create_default_users.py

@@ -9,9 +9,9 @@ class Command(BaseCommand):
         self.stdout.write('Creating default users and groups...')
 
         groups = {
-            'Lab Administrators': 'Full access to all lab functions',
-            'Lab Staff': 'Can view and search items, add things to boxes',
-            'Lab Viewers': 'Read-only access to view and search',
+            'LabHelper Administrators': 'Full access to all lab functions',
+            'LabHelper Staff': 'Can view and search items, add things to boxes',
+            'LabHelper Viewers': 'Read-only access to view and search',
         }
 
         for group_name, description in groups.items():
@@ -22,9 +22,9 @@ class Command(BaseCommand):
                 self.stdout.write(f'Group already exists: {group_name}')
 
         users = {
-            'admin': ('Lab Administrators', True),
-            'staff': ('Lab Staff', False),
-            'viewer': ('Lab Viewers', False),
+            'admin': ('LabHelper Administrators', True),
+            'staff': ('LabHelper Staff', False),
+            'viewer': ('LabHelper Viewers', False),
         }
 
         for username, (group_name, is_superuser) in users.items():

labhelper/settings.py

@@ -39,6 +39,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'mozilla_django_oidc',
     'mptt',
     'django_mptt_admin',
     'sorl.thumbnail',
@@ -52,6 +53,7 @@ MIDDLEWARE = [
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'mozilla_django_oidc.middleware.SessionRefresh',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
@@ -137,8 +139,47 @@ MEDIA_ROOT = BASE_DIR / 'data' / 'media'
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-CSRF_TRUSTED_ORIGINS=os.environ.get('CSRF_TRUSTED_ORIGINS', 'https://labhelper.adebaumann.com').split(',')
+CSRF_TRUSTED_ORIGINS=os.environ.get('CSRF_TRUSTED_ORIGINS', 'https://labhelper.adebaumann.com,http://127.0.0.1:8000').split(',')
 
-LOGIN_URL = os.environ.get('LOGIN_URL', 'login')
+LOGIN_URL = os.environ.get('LOGIN_URL', 'oidc_authentication_init')
 LOGIN_REDIRECT_URL = os.environ.get('LOGIN_REDIRECT_URL', 'index')
 LOGOUT_REDIRECT_URL = os.environ.get('LOGOUT_REDIRECT_URL', 'login')
+
+AUTHENTICATION_BACKENDS = [
+    'labhelper.auth_backend.KeycloakOIDCBackend',
+    # ModelBackend kept as fallback for Django admin emergency access
+    'django.contrib.auth.backends.ModelBackend',
+]
+
+# ---------------------------------------------------------------------------
+# Keycloak / OIDC configuration
+#
+# Set OIDC_OP_BASE_URL to your realm URL, e.g.:
+#   https://keycloak.example.com/realms/myrealm
+#
+# All individual endpoints are derived from OIDC_OP_BASE_URL automatically.
+# You can override any individual endpoint with its own env var.
+# ---------------------------------------------------------------------------
+_oidc_base = os.environ.get('OIDC_OP_BASE_URL', '').rstrip('/')
+_oidc_connect = f'{_oidc_base}/protocol/openid-connect' if _oidc_base else ''
+
+OIDC_RP_CLIENT_ID = os.environ.get('OIDC_RP_CLIENT_ID', '')
+OIDC_RP_CLIENT_SECRET = os.environ.get('OIDC_RP_CLIENT_SECRET', '')
+OIDC_RP_SIGN_ALGO = 'RS256'
+OIDC_RP_SCOPES = 'openid email profile'
+OIDC_USE_PKCE = True
+
+OIDC_OP_AUTHORIZATION_ENDPOINT = os.environ.get('OIDC_OP_AUTHORIZATION_ENDPOINT', f'{_oidc_connect}/auth')
+OIDC_OP_TOKEN_ENDPOINT = os.environ.get('OIDC_OP_TOKEN_ENDPOINT', f'{_oidc_connect}/token')
+OIDC_OP_USER_ENDPOINT = os.environ.get('OIDC_OP_USER_ENDPOINT', f'{_oidc_connect}/userinfo')
+OIDC_OP_JWKS_ENDPOINT = os.environ.get('OIDC_OP_JWKS_ENDPOINT', f'{_oidc_connect}/certs')
+OIDC_OP_LOGOUT_ENDPOINT = os.environ.get('OIDC_OP_LOGOUT_ENDPOINT', f'{_oidc_connect}/logout')
+
+# Store the ID token in the session so Keycloak logout can use id_token_hint
+OIDC_STORE_ID_TOKEN = True
+
+# Redirect to the static login page on auth failure instead of looping back into OIDC
+OIDC_AUTHENTICATION_FAILURE_REDIRECT_URL = os.environ.get('OIDC_AUTHENTICATION_FAILURE_REDIRECT_URL', '/login/')
+
+# Exempt AJAX endpoints from the session-refresh middleware redirect
+OIDC_EXEMPT_URLS = ['search_api']

labhelper/templates/base.html

@@ -7,388 +7,8 @@
     <title>{% block title %}LabHelper{% endblock %}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 0 20px;
-        }
-        
-        .navbar {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 15px;
-            padding: 15px 30px;
-            margin: 20px auto;
-            max-width: 1200px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 15px;
-        }
-        
-        .navbar-brand {
-            font-size: 28px;
-            font-weight: 700;
-            color: #667eea;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        
-        .navbar-brand i {
-            font-size: 24px;
-        }
-        
-        .navbar-toggle {
-            display: none;
-            background: none;
-            border: none;
-            color: #555;
-            font-size: 24px;
-            cursor: pointer;
-            padding: 10px;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .navbar-toggle:hover {
-            background: #667eea;
-            color: white;
-        }
-        
-        .navbar-nav {
-            display: flex;
-            gap: 20px;
-            align-items: center;
-        }
-        
-        .navbar-nav a,
-        .navbar-nav form {
-            color: #555;
-            text-decoration: none;
-            font-weight: 500;
-            font-size: 15px;
-            padding: 8px 16px;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .navbar-nav a:hover,
-        .navbar-nav button:hover {
-            background: #667eea;
-            color: white;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-        }
-        
-        .navbar-nav a i {
-            font-size: 14px;
-        }
-        
-        .navbar-nav button {
-            background: none;
-            border: none;
-            color: #555;
-            font: inherit;
-            cursor: pointer;
-            padding: 8px 16px;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        @media (max-width: 768px) {
-            .navbar {
-                padding: 15px 20px;
-            }
-            
-            .navbar-brand {
-                font-size: 24px;
-            }
-            
-            .navbar-toggle {
-                display: block;
-            }
-            
-            .navbar-nav {
-                display: none;
-                width: 100%;
-                flex-direction: column;
-                gap: 0;
-                padding-top: 10px;
-            }
-            
-            .navbar-nav.active {
-                display: flex;
-            }
-            
-            .navbar-nav a,
-            .navbar-nav form {
-                width: 100%;
-                padding: 12px 16px;
-                border-radius: 0;
-            }
-            
-            .navbar-nav a:first-child,
-            .navbar-nav form:first-child {
-                border-radius: 8px 8px 0 0;
-            }
-            
-            .navbar-nav a:last-child,
-            .navbar-nav form:last-child {
-                border-radius: 0 0 8px 8px;
-            }
-            
-            .navbar-nav button {
-                width: 100%;
-                justify-content: flex-start;
-            }
-        }
-        
-        .container {
-            max-width: 1200px;
-            margin: 20px auto;
-        }
-        
-        .page-header {
-            background: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-        }
-        
-        .page-header h1 {
-            color: #333;
-            font-size: 32px;
-            font-weight: 700;
-            margin-bottom: 10px;
-        }
-        
-        .page-header .breadcrumb {
-            color: #888;
-            font-size: 14px;
-        }
-        
-        .page-header .breadcrumb a {
-            color: #667eea;
-            text-decoration: none;
-        }
-        
-        .page-header .breadcrumb a:hover {
-            text-decoration: underline;
-        }
-        
-        .section {
-            background: white;
-            padding: 30px;
-            border-radius: 15px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            margin-bottom: 30px;
-        }
-        
-        .section h2 {
-            color: #667eea;
-            font-size: 24px;
-            font-weight: 700;
-            margin-top: 0;
-            margin-bottom: 20px;
-            padding-bottom: 15px;
-            border-bottom: 3px solid #667eea;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        
-        .section h2 i {
-            font-size: 20px;
-        }
-        
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 12px 24px;
-            border: none;
-            border-radius: 10px;
-            font-size: 15px;
-            font-weight: 600;
-            cursor: pointer;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-        }
-        
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
-        }
-        
-        .btn:active {
-            transform: translateY(0);
-        }
-        
-        .btn-secondary {
-            background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
-            box-shadow: 0 4px 15px rgba(127, 140, 141, 0.4);
-        }
-        
-        .btn-secondary:hover {
-            box-shadow: 0 6px 20px rgba(127, 140, 141, 0.6);
-        }
-        
-        .btn-sm {
-            padding: 8px 16px;
-            font-size: 14px;
-        }
-        
-        .alert {
-            padding: 15px 20px;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            font-weight: 500;
-        }
-        
-        .alert-success {
-            background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
-        }
-        
-        .alert-error {
-            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
-        }
-        
-        .footer {
-            text-align: center;
-            color: white;
-            padding: 30px;
-            margin-top: 30px;
-        }
-        
-        .footer a {
-            color: white;
-            text-decoration: none;
-            font-weight: 500;
-        }
-        
-        .footer a:hover {
-            text-decoration: underline;
-        }
-        
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-        
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            right: 0;
-            background: white;
-            min-width: 200px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            border-radius: 10px;
-            padding: 10px 0;
-            z-index: 1000;
-            top: 100%;
-            margin-top: 10px;
-        }
-        
-        .dropdown-content a {
-            display: block;
-            padding: 12px 20px;
-            color: #555;
-            text-decoration: none;
-            transition: all 0.2s ease;
-        }
-        
-        .dropdown-content a:hover {
-            background: #667eea;
-            color: white;
-        }
-        
-        .dropdown-content a:first-child {
-            border-radius: 10px 10px 0 0;
-        }
-        
-        .dropdown-content a:last-child {
-            border-radius: 0 0 10px 10px;
-        }
-        
-        .dropdown-content button:hover {
-            background: #667eea;
-            color: white;
-        }
-        
-        .dropdown:hover .dropdown-content,
-        .dropdown:focus-within .dropdown-content {
-            display: block;
-        }
-        
-        .dropdown-btn {
-            background: none;
-            border: none;
-            color: #667eea;
-            font-weight: 600;
-            font-size: 15px;
-            cursor: pointer;
-            padding: 8px 16px;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .dropdown-btn:hover {
-            background: #667eea;
-            color: white;
-        }
-        
-        @media (max-width: 768px) {
-            .dropdown-content {
-                position: static;
-                box-shadow: none;
-                border-radius: 0;
-                margin-top: 0;
-                padding: 0;
-            }
-            
-            .dropdown-content a {
-                width: 100%;
-                padding: 12px 16px;
-                border-radius: 0;
-            }
-            
-            .dropdown-btn {
-                width: 100%;
-                justify-content: flex-start;
-            }
-        }
-        
-        {% block extra_css %}{% endblock %}
-    </style>
+    <link rel="stylesheet" href="{% static 'css/base.css' %}">
+    {% block extra_css %}{% endblock %}
     {% block extra_head %}{% endblock %}
 </head>
 <body>
@@ -413,12 +33,12 @@
                     <a href="/resources/"><i class="fas fa-folder-open"></i> Resources</a>
                     <a href="/fixme/"><i class="fas fa-exclamation-triangle"></i> Fixme</a>
                     <a href="/admin/"><i class="fas fa-cog"></i> Admin</a>
-                    <form method="post" action="{% url 'logout' %}" style="padding: 0; margin: 0; background: none; border: none;">
+                    <form method="post" action="{% url 'oidc_logout' %}" id="logout-form">
                         {% csrf_token %}
-                        <button type="submit" style="width: 100%; text-align: left; padding: 12px 20px; background: none; border: none; color: #555; font: inherit; cursor: pointer; display: block; transition: all 0.2s ease;">
-                            <i class="fas fa-sign-out-alt"></i> Logout
-                        </button>
                     </form>
+                    <a href="#" onclick="document.getElementById('logout-form').submit(); return false;">
+                        <i class="fas fa-sign-out-alt"></i> Logout
+                    </a>
                 </div>
             </div>
             {% else %}

labhelper/templates/login.html

@@ -9,70 +9,24 @@
 {% endblock %}
 
 {% block content %}
-<div class="section" style="max-width: 500px; margin: 0 auto;">
-    {% if form.errors %}
-    <div class="alert alert-error">
-        <i class="fas fa-exclamation-circle"></i> Your username and password didn't match. Please try again.
+<div class="section" style="max-width: 500px; margin: 0 auto; text-align: center;">
+    {% if request.GET.next and user.is_authenticated %}
+    <div class="alert alert-error" style="margin-bottom: 24px;">
+        <i class="fas fa-info-circle"></i> Your account doesn't have access to this page.
     </div>
-    {% endif %}
-
-    {% if next %}
-    {% if user.is_authenticated %}
-    <div class="alert alert-error">
-        <i class="fas fa-info-circle"></i> Your account doesn't have access to this page. To proceed,
-        please login with an account that has access.
-    </div>
-    {% else %}
-    <div class="alert alert-error">
+    {% elif request.GET.next %}
+    <div class="alert alert-error" style="margin-bottom: 24px;">
         <i class="fas fa-info-circle"></i> Please login to see this page.
     </div>
     {% endif %}
-    {% endif %}
 
-    <form method="post" action="{% url 'login' %}" style="display: flex; flex-direction: column; gap: 20px;">
-        {% csrf_token %}
-        
-        <div>
-            <label for="{{ form.username.id_for_label }}" style="display: block; font-weight: 600; margin-bottom: 8px; color: #555;">
-                <i class="fas fa-user"></i> Username
-            </label>
-            <input type="{{ form.username.field.widget.input_type }}"
-                   name="{{ form.username.name }}"
-                   id="{{ form.username.id_for_label }}"
-                   {% if form.username.value %}value="{{ form.username.value }}"{% endif %}
-                   required
-                   autofocus
-                   style="width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; transition: all 0.3s;">
-        </div>
+    <p style="color: #555; margin-bottom: 28px;">
+        Authentication is handled via Single Sign-On. Click below to continue to the login page.
+    </p>
 
-        <div>
-            <label for="{{ form.password.id_for_label }}" style="display: block; font-weight: 600; margin-bottom: 8px; color: #555;">
-                <i class="fas fa-lock"></i> Password
-            </label>
-            <input type="password"
-                   name="{{ form.password.name }}"
-                   id="{{ form.password.id_for_label }}"
-                   required
-                   style="width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; transition: all 0.3s;">
-        </div>
-
-        <input type="hidden" name="next" value="{{ next }}">
-
-        <button type="submit" class="btn" style="justify-content: center; margin-top: 10px;">
-            <i class="fas fa-sign-in-alt"></i> Login
-        </button>
-    </form>
+    <a href="{% url 'oidc_authentication_init' %}{% if request.GET.next %}?next={{ request.GET.next }}{% endif %}"
+       class="btn" style="justify-content: center; display: inline-flex;">
+        <i class="fas fa-sign-in-alt"></i> Login with SSO
+    </a>
 </div>
 {% endblock %}
-
-{% block extra_js %}
-<script>
-$('input[type="text"], input[type="password"]').on('focus', function() {
-    $(this).css('border-color', '#667eea');
-    $(this).css('box-shadow', '0 0 0 3px rgba(102, 126, 234, 0.1)');
-}).on('blur', function() {
-    $(this).css('border-color', '#e0e0e0');
-    $(this).css('box-shadow', 'none');
-});
-</script>
-{% endblock %}

labhelper/urls.py

@@ -17,8 +17,8 @@ Including another URLconf
 from django.conf import settings
 from django.conf.urls.static import static
 from django.contrib import admin
-from django.urls import path
-from django.contrib.auth import views as auth_views
+from django.urls import include, path
+from django.views.generic import TemplateView
 
 from boxes.views import (
     add_box,
@@ -29,10 +29,12 @@ from boxes.views import (
     boxes_list,
     delete_box,
     delete_box_type,
+    delete_thing,
     edit_box,
     edit_box_type,
     edit_thing,
     fixme,
+    health_check,
     index,
     resources_list,
     search_api,
@@ -40,8 +42,9 @@ from boxes.views import (
 )
 
 urlpatterns = [
-    path('login/', auth_views.LoginView.as_view(template_name='login.html'), name='login'),
-    path('logout/', auth_views.LogoutView.as_view(), name='logout'),
+    path('oidc/', include('mozilla_django_oidc.urls')),
+    path('login/', TemplateView.as_view(template_name='login.html'), name='login'),
+    path('health/', health_check, name='health_check'),
     path('', index, name='index'),
     path('box-management/', box_management, name='box_management'),
     path('box-type/add/', add_box_type, name='add_box_type'),
@@ -53,6 +56,7 @@ urlpatterns = [
     path('box/<str:box_id>/', box_detail, name='box_detail'),
     path('thing/<int:thing_id>/', thing_detail, name='thing_detail'),
     path('thing/<int:thing_id>/edit/', edit_thing, name='edit_thing'),
+    path('thing/<int:thing_id>/delete/', delete_thing, name='delete_thing'),
     path('box/<str:box_id>/add/', add_things, name='add_things'),
     path('boxes/', boxes_list, name='boxes_list'),
     path('inventory/', boxes_list, name='inventory'),

requirements.txt

@@ -37,3 +37,4 @@ sorl-thumbnail==12.11.0
 bleach==6.1.0
 coverage==7.6.1
 whitenoise==6.8.2
+mozilla-django-oidc==4.0.1