fix(frontend): address PR review findings (round 3)

- useColorScheme: install the data-scheme watcher in a detached effectScope so
  it lives for the app lifetime, decoupled from whichever component first calls
  useColorScheme (previously it was implicitly tied to that caller's component
  scope and would stop if that component unmounted)
- useAuth: document that login(returnUrl) takes a relative/same-origin path only,
  to avoid widening the open-redirect surface
- ci.yml: build the admin frontend via the directory form (-w packages/admin/
  frontend-src), consistent with the frontend test step

Author: tdjager

.github/workflows/ci.yml

@@ -571,7 +571,8 @@ jobs:
 
       - name: Build admin frontend
         if: matrix.package == 'admin' && needs.changes.outputs.admin == 'true'
-        run: npm run build -w regelrecht-admin-ui
+        # Directory form, consistent with the frontend test step above.
+        run: npm run build -w packages/admin/frontend-src
 
       - name: Skip (no relevant changes)
         if: needs.changes.outputs[matrix.package] != 'true'

packages/frontend-shared/src/useAuth.js

@@ -37,7 +37,10 @@ export function useAuth() {
   // Accepts an explicit return URL so callers that know the user's intended
   // destination (e.g. a router guard firing before navigation commits, where
   // `window.location` still points at the source route) can forward it to
-  // SSO. Falls back to the current location for the common case.
+  // SSO. Falls back to the current location for the common case. Pass a
+  // relative/same-origin path only: `returnUrl` is forwarded verbatim as the
+  // SSO `return_url` (the backend validates it, but don't widen the surface by
+  // handing it an absolute external URL).
   function login(returnUrl) {
     // Only accept an explicit string: a template that passes `login` as a
     // bare event handler (`@click="login"`) hands us a PointerEvent, which

packages/frontend-shared/src/useColorScheme.js

@@ -16,7 +16,7 @@
  *
  * A persistence adapter is `{ theme: Ref<string>, setTheme(value): void }`.
  */
-import { ref, readonly, watch } from 'vue';
+import { ref, readonly, watch, effectScope } from 'vue';
 
 export const VALID_THEMES = ['auto', 'light', 'dark'];
 
@@ -75,6 +75,13 @@ let defaultPersistence = null;
 // so repeated `useColorScheme` calls don't stack duplicate watchers.
 const appliedBackends = new WeakSet();
 
+// Detached scope so the data-scheme watcher lives for the app's lifetime,
+// independent of which component's setup() first calls `useColorScheme`. Without
+// this the watcher would be owned by that first caller's component scope and
+// would be auto-stopped if that component ever unmounts, silently killing the
+// applier.
+const applierScope = effectScope(true);
+
 /**
  * @param {{ theme: import('vue').Ref<string>, setTheme: (v: string) => void }} [persistence]
  *   Optional persistence adapter. Defaults to a shared localStorage adapter.
@@ -88,7 +95,9 @@ export function useColorScheme(persistence) {
   if (!appliedBackends.has(backend)) {
     appliedBackends.add(backend);
     // `immediate` applies the current (cached/default) theme now and on change.
-    watch(backend.theme, applyColorScheme, { immediate: true });
+    // Run inside the detached scope so the watcher isn't tied to the caller's
+    // component lifetime.
+    applierScope.run(() => watch(backend.theme, applyColorScheme, { immediate: true }));
   }
 
   return {