@jsenv/server 17.1.0 → 17.2.0

package/dist/client/route_inspector/route_inspector.html

@@ -121,7 +121,9 @@
           }
         }
       
-        customElements.define("clipboard-copy", ClipboardCopy);
+        if (!customElements.get("clipboard-copy")) {
+          customElements.define("clipboard-copy", ClipboardCopy);
+        }
       
         const addToClipboard = async (text) => {
           const type = "text/plain";
@@ -404,6 +406,13 @@
   --border-color: #e0e0e0;
   --primary-color: #1976d2;
   --secondary-color: #f5f5f5;
+  --forbidden-bg-color: #fff8f0;
+  --forbidden-border-color: #c80;
+  --forbidden-badge-bg: #fff3cc;
+  --forbidden-badge-color: #7a5000;
+  --admin-badge-bg: #f0f4ff;
+  --admin-badge-border-color: #5c7cfa;
+  --admin-badge-color: #2a4bbf;
 }
 
 :root[data-theme="dark"] {
@@ -412,6 +421,13 @@
   --border-color: #333;
   --primary-color: #4f9eff;
   --secondary-color: #1e1e1e;
+  --forbidden-bg-color: #1e1500;
+  --forbidden-border-color: #8a6000;
+  --forbidden-badge-bg: #3a2800;
+  --forbidden-badge-color: #f0c060;
+  --admin-badge-bg: #0d1a3a;
+  --admin-badge-border-color: #3b5bdb;
+  --admin-badge-color: #91a7ff;
 }
 
 :root[data-theme="dark"] a {
@@ -841,6 +857,46 @@ main {
   --method-color: var(--method-delete-color);
 }
 
+.route_details[data-forbidden] {
+  background: var(--forbidden-bg-color);
+  border-color: var(--forbidden-border-color);
+  opacity: .85;
+}
+
+.route_details[data-forbidden] .route_method {
+  opacity: .7;
+  filter: grayscale(60%);
+}
+
+.route_forbidden_badge {
+  color: var(--forbidden-badge-color);
+  white-space: nowrap;
+  background: var(--forbidden-badge-bg);
+  border: 1px solid var(--forbidden-border-color);
+  border-radius: 4px;
+  margin-right: 6px;
+  padding: 3px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.route_admin_badge {
+  color: var(--admin-badge-color);
+  white-space: nowrap;
+  background: var(--admin-badge-bg);
+  border: 1px solid var(--admin-badge-border-color);
+  border-radius: 4px;
+  margin-right: 6px;
+  padding: 3px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.route_forbidden_content {
+  color: var(--forbidden-badge-color);
+  font-style: italic;
+}
+
 .route_owner_name {
   color: #666;
   text-align: center;
@@ -1755,6 +1811,8 @@ const routesLoadingSignal = P(false);
         websocket,
         clientCodeExample,
         declarationSource,
+        forbidden,
+        visibleBecauseAdmin,
       }) => {
         const [selectedMethod] = useUrlStringParam("method");
         const [selectedPackageName] = usePackageUrlStringParam();
@@ -1767,11 +1825,16 @@ const routesLoadingSignal = P(false);
           return null;
         }
 
-        return p$3`<details class="route_details" data-method="${method}">
+        return p$3`<details
+            class="route_details"
+            data-method="${method}"
+            data-forbidden="${forbidden || undefined}"
+            data-admin-visible="${visibleBecauseAdmin || undefined}"
+          >
             <summary class="route_summary_container">
               <span class="route_method">${method}</span>
               <p class="route_resource">${resource}</p>
-              ${method === "GET"
+              ${method === "GET" && !forbidden
                 ? p$3`<a
                       style="display:inline-flex; margin-left: 5px;"
                       href="${resource}"
@@ -1779,25 +1842,45 @@ const routesLoadingSignal = P(false);
                     /></a>`
                 : null}
               <span style="flex:1"></span>
+              ${visibleBecauseAdmin
+                ? p$3`<span
+                      class="route_admin_badge"
+                      title="This route is only visible because the server was started with canExposeSensitiveData"
+                      >&#128274; admin only</span
+                    >`
+                : null}
+              ${forbidden && !visibleBecauseAdmin
+                ? p$3`<span class="route_forbidden_badge"
+                      >&#128274; access denied</span
+                    >`
+                : null}
               <${RouteBadge} meta="${meta}" />
               <span class="summary_marker">
                 <${ArrowDown} />
               </span>
             </summary>
-            <${RouteDetailsContent}
-              method="${method}"
-              resource="${resource}"
-              description="${description}"
-              availableMediaTypes="${availableMediaTypes}"
-              availableLanguages="${availableLanguages}"
-              availableVersions="${availableVersions}"
-              availableEncodings="${availableEncodings}"
-              acceptedMediaTypes="${acceptedMediaTypes}"
-              websocket="${websocket}"
-              clientCodeExample="${clientCodeExample}"
-              declarationSource="${declarationSource}"
-              meta="${meta}"
-            />
+            ${!forbidden
+              ? p$3`<${RouteDetailsContent}
+                    method="${method}"
+                    resource="${resource}"
+                    description="${description}"
+                    availableMediaTypes="${availableMediaTypes}"
+                    availableLanguages="${availableLanguages}"
+                    availableVersions="${availableVersions}"
+                    availableEncodings="${availableEncodings}"
+                    acceptedMediaTypes="${acceptedMediaTypes}"
+                    websocket="${websocket}"
+                    clientCodeExample="${clientCodeExample}"
+                    declarationSource="${declarationSource}"
+                    meta="${meta}"
+                  />`
+              : p$3`<div class="route_details_content route_forbidden_content">
+                    <p>
+                      ${visibleBecauseAdmin
+                        ? "This route is only visible because the server was started with canExposeSensitiveData. Access is denied with the current permissions."
+                        : "You do not have the required permissions to access this route."}
+                    </p>
+                  </div>`}
           </details>`;
       };
 
@@ -1928,26 +2011,26 @@ const routesLoadingSignal = P(false);
           const websocketScheme =
             self.location.protocol === "https:" ? "wss" : "ws";
           const websocketOrigin = `${websocketScheme}://${self.location.host}`;
-          jsSource = /*js */ `
-                const websocket = new WebSocket("${websocketOrigin}${resource}");
-                websocket.onerror = () => {
-                  console.error("Failed to connect to websocket endpoint");
-                };
-                websocket.onopen = () => {
-                  console.info("Connected to websocket endpoint")
-                };
-                websocket.onmessage = (event) => {
-                  console.log("Received message", event.data);
-                };
-                `;
+          jsSource = `
+const websocket = new WebSocket("${websocketOrigin}${resource}");
+websocket.onerror = () => {
+  console.error("Failed to connect to websocket endpoint");
+};
+websocket.onopen = () => {
+  console.info("Connected to websocket endpoint");
+};
+websocket.onmessage = (event) => {
+  console.log("Received message", event.data);
+};
+          `;
         } else {
           let fetchLine;
           if (method === "GET") {
             fetchLine = `const response = await window.fetch("${resource}");`;
           } else {
             fetchLine = `const response = await window.fetch("${resource}", {
-        method: "${method}",
-      }`;
+  method: "${method}",
+}`;
           }
           let readResponseLine;
           if (availableMediaTypes.includes("application/json")) {
@@ -1956,10 +2039,10 @@ const routesLoadingSignal = P(false);
             readResponseLine = `const text = await response.text();`;
           }
 
-          jsSource = /*js */ `
-      ${fetchLine}
-      ${readResponseLine}
-                `;
+          jsSource = `
+${fetchLine};
+${readResponseLine};
+          `;
         }
 
         return p$3`<code-block lang="js" data-escaped data-copy-button