Provide the option to highlight a specific grant

documentation/access-requests.md

@@ -93,6 +93,49 @@ curl --location 'http://localhost:4000/uma/policies' --header 'Authorization: We
 3. Verify that the request appears in Alice's **Accepted** tab.
 4. Verify that the request appears in Bob's **Accepted** tab.
 
+## Deep-linking to a specific access request (Grant Access page)
+
+External clients can redirect a resource owner directly to the **Grant Access** page with a specific incoming request pre-filtered, so they immediately see the one they need to act on.
+
+### How it works
+
+Append:
+
+- a `request` query parameter whose value is the URL-encoded UID of the access request
+- an optional `returnUrl` query parameter whose value is the URL-encoded callback URL of the originating client
+
+```
+/access-grants/?request=<url-encoded-request-uid>&returnUrl=<url-encoded-callback-url>
+```
+
+**Example:**
+
+```
+http://localhost:5173/access-grants/?request=http%3A%2F%2Fexample.org%2Fc432df06-9bae-4a20-a21d-0e30833552b0
+```
+
+```text
+http://localhost:5173/access-grants/?request=http%3A%2F%2Fexample.org%2Fc432df06-9bae-4a20-a21d-0e30833552b0&returnUrl=https%3A%2F%2Fclient.example%2Fgrant-callback
+```
+
+When the parameter is present the page will:
+
+1. Show a **purple filter banner** at the top: *"Active filter: showing only the request you were directed to."*
+2. Display **only the matching request**, with the Accept / Deny buttons available as normal.
+3. Provide a **"Show all requests"** button inside the banner to clear the filter and return to the full grouped view (Requested / Accepted / Denied).
+
+If the UID in the parameter does not match any known request, a *"The requested access request could not be found."* message is shown instead.
+
+When `returnUrl` is provided, clicking **Accept** or **Deny** redirects the user to that URL only in the filtered deep-link flow (the `request` query is active and matches the acted item). The redirect appends:
+
+- `request=<request uid>`
+- `decision=accepted` or `decision=denied`
+
+### Usage notes
+
+- The filter is applied purely client-side via the Vue Router query parameter; no server changes are required.
+- Clicking **"Show all requests"** removes the `request` parameter from the URL via `router.replace`, so the browser history is not polluted with the filtered URL.
+
 ## Known bugs and limitations
 
 * **UI State Sync:** When you update a policy on a selected resource, the interface does not visually refresh until you manually deselect and reselect that resource.

loama/src/components/access-grants/AccessGrant.vue

@@ -1,14 +1,49 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
 import AccessRequestEntry from '../access-requests/AccessRequestEntry.vue';
 import type { AccessRequest } from 'loama-controller';
 import { useControllerStore } from '@/stores/useControllerStore';
+import { useRoute, useRouter } from 'vue-router';
 
 const controllerStore = useControllerStore();
+const route = useRoute();
+const router = useRouter();
 const accessRequests: Ref<AccessRequest[]> = ref([]);
 
+const highlightedUid = computed(() =>
+  typeof route.query.request === 'string' ? route.query.request : null
+);
+
+const returnUrl = computed(() =>
+  typeof route.query.returnUrl === 'string' ? route.query.returnUrl : null
+);
+
+const buildReturnLocation = (requestID: string, status: 'accepted' | 'denied'): string | null => {
+  // Redirect callbacks are only enabled for deep-linked filtered requests.
+  if (!highlightedUid.value || highlightedUid.value !== requestID) return null;
+  if (!returnUrl.value) return null;
+
+  try {
+    const target = new URL(returnUrl.value);
+    // Never allow javascript: style redirects from query parameters.
+    if (target.protocol === 'javascript:') return null;
+    target.searchParams.set('request', requestID);
+    target.searchParams.set('decision', status);
+    return target.toString();
+  } catch {
+    return null;
+  }
+};
+
 const updateStatus = async (requestID: string, status: 'accepted' | 'denied') => {
   await controllerStore.current.handleAccessRequest(requestID, status);
+
+  const returnLocation = buildReturnLocation(requestID, status);
+  if (returnLocation) {
+    window.location.assign(returnLocation);
+    return;
+  }
+
   await fetchAccessRequests();
 };
 
@@ -24,6 +59,19 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => clearInterval(interval));
+
+
+const filteredRequests = computed(() =>
+  highlightedUid.value
+    ? accessRequests.value.filter(r => r.uid === highlightedUid.value)
+    : null
+);
+
+const clearHighlight = () => {
+  const query = { ...route.query };
+  delete query.request;
+  router.replace({ query });
+};
 </script>
 
 <template>
@@ -33,59 +81,90 @@ onBeforeUnmount(() => clearInterval(interval));
       <button @click="fetchAccessRequests" class="refresh-button">refresh</button>
     </div>
 
-    <div class="card">
-      <h3>Requested</h3>
-      <div v-if="accessRequests.filter(r => r.status.toLowerCase() === 'requested').length">
+    <!-- Active filter banner -->
+    <div v-if="highlightedUid" class="filter-banner">
+      <span>
+        <strong>Active filter:</strong> showing only the request you were directed to.
+      </span>
+      <button class="clear-filter-button" @click="clearHighlight">Show all requests</button>
+    </div>
+
+    <!-- Filtered view: single highlighted request -->
+    <template v-if="filteredRequests !== null">
+      <div v-if="filteredRequests.length" class="card">
         <div
-          v-for="request in accessRequests.filter(r => r.status.toLowerCase() === 'requested')"
+          v-for="request in filteredRequests"
           :key="request.uid"
-          class="access-request-item"
+          class="access-request-item highlighted"
         >
           <AccessRequestEntry :request="request" />
-          <div class="actions">
-            <button class="accept" @click="updateStatus(request.uid, 'accepted')">
-              Accept
-            </button>
+          <div v-if="request.status.toLowerCase() === 'requested'" class="actions">
+            <button class="accept" @click="updateStatus(request.uid, 'accepted')">Accept</button>
             <button class="deny" @click="updateStatus(request.uid, 'denied')">Deny</button>
           </div>
         </div>
       </div>
-      <div v-else class="no-requests-message">
-        No new access requests at the moment.
+      <div v-else class="card no-requests-message">
+        The requested access request could not be found.
       </div>
-    </div>
+    </template>
 
-    <div class="card">
-      <h3>Accepted</h3>
-      <div v-if="accessRequests.filter(r => r.status.toLowerCase() === 'accepted').length">
-        <div
-          v-for="request in accessRequests.filter(r => r.status.toLowerCase() === 'accepted')"
-          :key="request.uid"
-          class="access-request-item"
-        >
-          <AccessRequestEntry :request="request" />
+    <!-- Default view: all requests grouped by status -->
+    <template v-else>
+      <div class="card">
+        <h3>Requested</h3>
+        <div v-if="accessRequests.filter(r => r.status.toLowerCase() === 'requested').length">
+          <div
+            v-for="request in accessRequests.filter(r => r.status.toLowerCase() === 'requested')"
+            :key="request.uid"
+            class="access-request-item"
+          >
+            <AccessRequestEntry :request="request" />
+            <div class="actions">
+              <button class="accept" @click="updateStatus(request.uid, 'accepted')">
+                Accept
+              </button>
+              <button class="deny" @click="updateStatus(request.uid, 'denied')">Deny</button>
+            </div>
+          </div>
+        </div>
+        <div v-else class="no-requests-message">
+          No new access requests at the moment.
         </div>
       </div>
-      <div v-else class="no-requests-message">
-        No accepted requests.
-      </div>
-    </div>
 
-    <div class="card">
-      <h3>Denied</h3>
-      <div v-if="accessRequests.filter(r => r.status.toLowerCase() === 'denied').length">
-        <div
-          v-for="request in accessRequests.filter(r => r.status.toLowerCase() === 'denied')"
-          :key="request.uid"
-          class="access-request-item"
-        >
-          <AccessRequestEntry :request="request" />
+      <div class="card">
+        <h3>Accepted</h3>
+        <div v-if="accessRequests.filter(r => r.status.toLowerCase() === 'accepted').length">
+          <div
+            v-for="request in accessRequests.filter(r => r.status.toLowerCase() === 'accepted')"
+            :key="request.uid"
+            class="access-request-item"
+          >
+            <AccessRequestEntry :request="request" />
+          </div>
+        </div>
+        <div v-else class="no-requests-message">
+          No accepted requests.
         </div>
       </div>
-      <div v-else class="no-requests-message">
-        No denied requests.
+
+      <div class="card">
+        <h3>Denied</h3>
+        <div v-if="accessRequests.filter(r => r.status.toLowerCase() === 'denied').length">
+          <div
+            v-for="request in accessRequests.filter(r => r.status.toLowerCase() === 'denied')"
+            :key="request.uid"
+            class="access-request-item"
+          >
+            <AccessRequestEntry :request="request" />
+          </div>
+        </div>
+        <div v-else class="no-requests-message">
+          No denied requests.
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -190,4 +269,42 @@ button.deny:hover {
   text-align: center;
   padding: 1rem;
 }
+
+.filter-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  background-color: color-mix(in srgb, var(--solid-purple) 10%, white);
+  border: 1.5px solid var(--solid-purple);
+  border-radius: var(--base-corner);
+  padding: 0.75rem 1.25rem;
+  font-size: calc(var(--base-unit) * 1.75);
+  color: var(--solid-purple);
+}
+
+.clear-filter-button {
+  background: none;
+  border: 1.5px solid var(--solid-purple);
+  color: var(--solid-purple);
+  border-radius: var(--base-corner);
+  padding: 0.4rem 0.9rem;
+  font-weight: 600;
+  font-size: calc(var(--base-unit) * 1.75);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.clear-filter-button:hover {
+  background-color: var(--solid-purple);
+  color: white;
+}
+
+.access-request-item.highlighted {
+  border-radius: var(--base-corner);
+  outline: 2.5px solid var(--solid-purple);
+  outline-offset: 2px;
+  background-color: color-mix(in srgb, var(--solid-purple) 5%, white);
+}
 </style>