Show request headers in default theme

resources/css/theme-default.style.css

@@ -1075,3 +1075,7 @@ html {
     }
 
 }
+
+button {
+    border: none;
+}

resources/js/tryitout.js

@@ -150,7 +150,7 @@ function handleResponse(endpointId, response, status, headers) {
 
     }
     responseContentEl.textContent = response === '' ? '<Empty response>' : response;
-    isJson && window.hljs.highlightBlock(responseContentEl);
+    isJson && window.hljs.highlightElement(responseContentEl);
     const statusEl = document.querySelector('#execution-response-status-' + endpointId);
     statusEl.textContent = ` (${status})`;
     document.querySelector('#execution-results-' + endpointId).hidden = false;
@@ -218,8 +218,8 @@ async function executeTryOut(endpointId, form) {
     const queryParameters = form.querySelectorAll('input[data-component=query]');
     queryParameters.forEach(el => {
         if (el.type !== 'radio' || (el.type === 'radio' && el.checked)) {
-            if (el.value === '' && el.required === false) {
-                // Don't include empty optional values in the request
+            if (el.value === '') {
+                // Don't include empty values in the request
                 return;
             }
 
@@ -231,12 +231,9 @@ async function executeTryOut(endpointId, form) {
     const urlParameters = form.querySelectorAll('input[data-component=url]');
     urlParameters.forEach(el => (path = path.replace(new RegExp(`\\{${el.name}\\??}`), el.value)));
 
-    const headers = JSON.parse(form.dataset.headers);
-    // Check for auth param that might go in header
-    if (form.dataset.authed === "1") {
-        const authHeaderEl = form.querySelector('input[data-component=header]');
-        if (authHeaderEl) headers[authHeaderEl.name] = authHeaderEl.dataset.prefix + authHeaderEl.value;
-    }
+    const headers = Object.fromEntries(Array.from(form.querySelectorAll('input[data-component=header]'))
+        .map(el => [el.name, el.value]));
+
     // When using FormData, the browser sets the correct content-type + boundary
     let method = form.dataset.method;
     if (body instanceof FormData) {

resources/views/components/field-details.blade.php

@@ -1,3 +1,6 @@
+@php
+    $html ??= []; $class = $html['class'] ?? null;
+@endphp
 <b><code>{{ $name }}</code></b>&nbsp;&nbsp;
 @if($type)<small>{{ $type }}</small>@endif&nbsp;
 @if($isInput && !$required)<i>optional</i>@endif &nbsp;
@@ -24,7 +27,7 @@
             <input type="radio" name="{{ $fullName }}"
                    value="{{$component === 'body' ? 'true' : 1}}"
                    data-endpoint="{{ $endpointId }}"
-                   data-component="{{ $component }}"
+                   data-component="{{ $component }}" @if($class)class="{{ $class }}"@endif
             >
             <code>true</code>
         </label>
@@ -32,22 +35,22 @@
             <input type="radio" name="{{ $fullName }}"
                    value="{{$component === 'body' ? 'false' : 0}}"
                    data-endpoint="{{ $endpointId }}"
-                   data-component="{{ $component }}"
+                   data-component="{{ $component }}" @if($class)class="{{ $class }}"@endif
             >
             <code>false</code>
         </label>
     @elseif($isList)
         <input type="{{ $inputType }}"
-               name="{{ $fullName."[0]" }}"
+               name="{{ $fullName."[0]" }}" @if($class)class="{{ $class }}"@endif
                data-endpoint="{{ $endpointId }}"
                data-component="{{ $component }}" hidden>
         <input type="{{ $inputType }}"
-               name="{{ $fullName."[1]" }}"
+               name="{{ $fullName."[1]" }}" @if($class)class="{{ $class }}"@endif
                data-endpoint="{{ $endpointId }}"
                data-component="{{ $component }}" hidden>
     @else
         <input type="{{ $inputType }}"
-               name="{{ $fullName }}"
+               name="{{ $fullName }}" @if($class)class="{{ $class }}"@endif
                data-endpoint="{{ $endpointId }}"
                value="{!! (isset($example) && (is_string($example) || is_numeric($example))) ? $example : '' !!}"
                data-component="{{ $component }}" hidden>

resources/views/themes/default/endpoint.blade.php

@@ -5,7 +5,7 @@
 <h2 id="{!! $endpoint->fullSlug() !!}">{{ $endpoint->name() }}</h2>
 
 <p>
-@component('scribe::components.badges.auth', ['authenticated' => $endpoint->metadata->authenticated])
+@component('scribe::components.badges.auth', ['authenticated' => $endpoint->isAuthed()])
 @endcomponent
 </p>
 
@@ -63,10 +63,9 @@
 </span>
 <form id="form-{{ $endpoint->endpointId() }}" data-method="{{ $endpoint->httpMethods[0] }}"
       data-path="{{ $endpoint->uri }}"
-      data-authed="{{ $endpoint->metadata->authenticated ? 1 : 0 }}"
+      data-authed="{{ $endpoint->isAuthed() ? 1 : 0 }}"
       data-hasfiles="{{ $endpoint->hasFiles() ? 1 : 0 }}"
       data-isarraybody="{{ $endpoint->isArrayBody() ? 1 : 0 }}"
-      data-headers='@json($endpoint->headers)'
       autocomplete="off"
       onsubmit="event.preventDefault(); executeTryOut('{{ $endpoint->endpointId() }}', this);">
     <h3>
@@ -74,8 +73,7 @@
         @if($metadata['try_it_out']['enabled'] ?? false)
             <button type="button"
                     style="background-color: #8fbcd4; padding: 5px 10px; border-radius: 5px; border-width: thin;"
-                    data-endpoint="{{ $endpoint->endpointId() }}"
-                    class="tryItOut-btn"
+                    id="btn-tryout-{{ $endpoint->endpointId() }}"
                     onclick="tryItOut('{{ $endpoint->endpointId() }}');">Try it out ⚡
             </button>
             <button type="button"
@@ -95,15 +93,30 @@
             <b><code>{{$endpoint->uri}}</code></b>
         </p>
     @endforeach
-    @if($endpoint->metadata->authenticated && $metadata['auth']['location'] === 'header')
-        <p>
-            <label id="auth-{{ $endpoint->endpointId() }}" hidden>{{ $metadata['auth']['name'] }} header:
-                <b><code>{{ $metadata['auth']['prefix'] }}</code></b>
-                <input class="auth-value" name="{{ $metadata['auth']['name'] }}"
-                       data-prefix="{{ $metadata['auth']['prefix'] }}"
-                       data-endpoint="{{ $endpoint->endpointId() }}"
-                       data-component="header"></label>
-        </p>
+    @if(count($endpoint->headers))
+        <h4 class="fancy-heading-panel"><b>Headers</b></h4>
+        @foreach($endpoint->headers as $name => $example)
+            <?php
+                $htmlOptions = [];
+                if ($endpoint->isAuthed() && $metadata['auth']['location'] == 'header' && $metadata['auth']['name'] == $name) {
+                  $htmlOptions = [ 'class' => 'auth-value', ];
+                  }
+            ?>
+            <p>
+                @component('scribe::components.field-details', [
+                  'name' => $name,
+                  'type' => null,
+                  'required' => true,
+                  'description' => null,
+                  'example' => $example,
+                  'endpointId' => $endpoint->endpointId(),
+                  'component' => 'header',
+                  'isInput' => true,
+                  'html' => $htmlOptions,
+                ])
+                @endcomponent
+            </p>
+        @endforeach
     @endif
     @if(count($endpoint->urlParameters))
         <h4 class="fancy-heading-panel"><b>URL Parameters</b></h4>

src/Scribe.php

@@ -8,7 +8,7 @@ use Symfony\Component\HttpFoundation\Request;
 
 class Scribe
 {
-    public const VERSION = '4.3.0';
+    public const VERSION = '4.4.0';
 
     /**
      * Specify a callback that will be executed just before a response call is made