Disable verifier protocols that aren't compatible with the selected document

server/src/main/webapp/verifier.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="origin-trial" content="AqrF+vKVQZS3y5OJ3K2wkWZ4yEVxroNpC0oQR3kFeRmnvjBw+T9NPftQV9reLYszk8kNYyF1Zw+u3UZ9PMuxFQIAAACBeyJvcmlnaW4iOiJodHRwczovL2RpZ2l0YWwtY3JlZGVudGlhbHMuZGV2OjQ0MyIsImZlYXR1cmUiOiJXZWJJZGVudGl0eURpZ2l0YWxDcmVkZW50aWFscyIsImV4cGlyeSI6MTc0NDc2MTU5OSwiaXNTdWJkb21haW4iOnRydWV9">
-    <title>OWF Identity Credential Online Verifier</title>
+    <title>OWF Digital Document Online Verifier</title>
     <link rel="icon" type="image/x-icon" href="https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/fingerprint/default/24px.svg">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
@@ -14,13 +14,13 @@
 <div class="col-lg-8 mx-auto p-4 py-md-5">
     <header class="d-flex align-items-center pb-3 mb-4 border-bottom">
         <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
-            <span class="fs-4">OWF Identity Credential Online Verifier</span>
+            <span class="fs-4">OWF Digital Document Online Verifier</span>
         </a>
     </header>
 
     <main>
-        <h1 class="text-body-emphasis">Request Verified Identity Documents</h1>
-        <p class="fs-5 col-md-8">Request a verified identity document such as a Mobile Driving License (mDL) or EU PID</p>
+        <h1 class="text-body-emphasis">Request Digital Documents</h1>
+        <p class="fs-5 col-md-8">Request a digital document such as a Mobile Driving License (mDL) or EU PID</p>
 
         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
             <!-- Dynamically populated, see addTab() -->
@@ -38,10 +38,10 @@ <h1 class="text-body-emphasis">Request Verified Identity Documents</h1>
                     W3C Digital Credentials API (Preview)
                 </button>
                 <ul class="dropdown-menu">
-                    <li><a class="dropdown-item" value="w3c_dc_preview" href="#">
+                    <li><a class="dropdown-item w3c-option" value="w3c_dc_preview" href="#">
                         W3C Digital Credentials API (Preview)
                     </a></li>
-                    <li><a class="dropdown-item" value="w3c_dc_arf" href="#">
+                    <li><a class="dropdown-item w3c-option" value="w3c_dc_arf" href="#">
                         W3C Digital Credentials API (Austroads Request Forwarding)
                     </a></li>
                     <li><a class="dropdown-item" value="openid4vp_plain" href="#">
@@ -59,7 +59,7 @@ <h1 class="text-body-emphasis">Request Verified Identity Documents</h1>
 
     </main>
     <footer class="pt-5 my-5 text-body-secondary border-top">
-        This identity verifier is part of the <a href="https://github.com/openwallet-foundation-labs/identity-credential">OWF Identity Credential</a> project
+        This verifier is part of the <a href="https://github.com/openwallet-foundation-labs/identity-credential">OWF Identity Credential</a> project
         and is considered experimental software. Use at your own risk. <a href="verifier/readerRootCert">Reader Root Certificate</a>.
     </footer>
 </div>

server/src/main/webapp/verifier.js

@@ -1,6 +1,12 @@
 
 // Keep in sync with verifier.html
 var selectedProtocol = 'w3c_dc_preview'
+// If the user clicks on one of the protocol entries, that becomes both the selected and the
+// preferred protocol. If the selected protocol is disabled (because, for instance, the user selects
+// a document that doesn't support the selected protocol), the selected protocol will be updated but
+// the preferred one will remain the same. Then if the preferred one is enabled again, the selection
+// will change back to the preferred protocol.
+var preferredProtocol = selectedProtocol
 
 var openid4vpUri = ''
 
@@ -15,6 +21,7 @@ async function onLoad() {
             selected === 'openid4vp_eudi' ||
             selected === 'openid4vp_mdoc') {
             selectedProtocol = selected
+            preferredProtocol = selectedProtocol
             protocolDropdown.innerHTML = target.innerHTML
         }
     })
@@ -41,7 +48,10 @@ async function onLoad() {
 }
 
 function addTab(tabName, mdocOrVc, docTypeOrVct, sampleRequests, active) {
-    var tabId = mdocOrVc + '-' + docTypeOrVct
+    // For the tab ID to be queryable using jQuery, we need to mask out special characters. Replace
+    // anything that isn't a letter or number.
+    var escapedDocTypeOrVct = docTypeOrVct.replace(/[^a-zA-Z0-9]/g,'_');
+    var tabId = mdocOrVc + '-' + escapedDocTypeOrVct
     var activeStr = active ? "active" : ""
     $('<li class="nav-item" role="presentation">' +
     '<button class="nav-link ' + activeStr + '" data-bs-toggle="pill" id="pills-tab-' + tabId + '" data-bs-target="#pills-' + tabId + '" type="button" role="tab" aria-controls="pills-home" aria-selected="true">' +
@@ -64,6 +74,44 @@ function addTab(tabName, mdocOrVc, docTypeOrVct, sampleRequests, active) {
     str += '</div> '
 
     $(str).appendTo('#pills-tabContent')
+
+    // When one of the document tabs is selected, update the available protocol dropdown options.
+    $('#pills-tab-' + tabId).on('shown.bs.tab', function (e) {
+        updateProtocolOptions(mdocOrVc);
+    });
+}
+
+function updateProtocolOptions(mdocOrVc) {
+    const protocolDropdown = document.getElementById('protocolDropdown')
+    const w3cOptions = document.querySelectorAll('.w3c-option');
+
+    if (mdocOrVc === 'mdoc') {
+        // Enable W3C options for mdoc entries
+        w3cOptions.forEach(option => {
+            option.classList.remove('disabled');
+            option.removeAttribute('disabled');
+            // If the preferred protocol was just reenabled, set it as the selected protocol.
+            if (preferredProtocol == option.getAttribute('value')) {
+                selectedProtocol = preferredProtocol
+                protocolDropdown.innerHTML = option.innerHTML;
+            }
+        });
+    } else {
+        // Disable W3C options for non-mdoc entries
+        w3cOptions.forEach(option => {
+            option.classList.add('disabled');
+            option.setAttribute('disabled', 'disabled');
+            if (selectedProtocol == option.getAttribute('value')) {
+                selectedProtocol = null
+            }
+        });
+        // If the selected protocol was disabled, select the next non-disabled protocol.
+        if (selectedProtocol == null) {
+            const firstEnabledOption = document.querySelector('.dropdown-item:not(.disabled)');
+            selectedProtocol = firstEnabledOption.getAttribute('value');
+            protocolDropdown.innerHTML = firstEnabledOption.innerHTML;
+        }
+    }
 }
 
 async function onLoadRedirect() {