docuseal/app/views/api_settings/index.html.erb

<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0 md:space-x-10">
  <%= render 'shared/settings_nav' %>
  <div class="flex-grow">
    <div class="flex flex-col gap-2 md:flex-row md:justify-between md:items-end mb-4">
      <h1 class="text-4xl font-bold">API</h1>
      <%= render 'shared/test_mode_toggle' %>
    </div>
    <div class="card bg-base-200">
      <div class="card-body p-6">
        <label for="api_key" class="text-sm font-semibold">X-Auth-Token</label>
        <div class="flex flex-col md:flex-row gap-4">
          <div class="flex w-full space-x-4">
            <% token = current_user.access_token.token %>
            <% obscured_token = current_user.access_token.token.sub(token[5..], '*' * token[5..].size) %>
            <% if current_account.testing? %>
              <masked-input class="block w-full" data-token="<%= token %>">
                <input id="api_key" type="text" value="<%= obscured_token %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
              </masked-input>
              <%= render 'shared/clipboard_copy', icon: 'copy', text: token, class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
            <% else %>
              <a id="access_token_container" href="<%= settings_reveal_access_token_path %>" data-turbo-frame="modal" class="flex w-full space-x-4">
                <input id="api_key" type="text" value="<%= obscured_token %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
                <div class="base-button">
                  <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
                  <span class="hidden md:inline"><%= t('copy') %></span>
                </div>
              </a>
            <% end %>
          </div>
          <%= button_to button_title(title: t('rotate'), disabled_with: t('rotate'), icon: svg_icon('reload', class: 'w-6 h-6')), settings_api_index_path, class: 'white-button w-full', data: { turbo_confirm: t('remove_existing_api_token_and_generated_a_new_one_are_you_sure_') } %>
        </div>
      </div>
    </div>
    <div class="space-y-4 mt-4">
      <div class="collapse collapse-plus bg-base-200 px-1">
        <input type="checkbox">
        <div class="collapse-title text-xl font-medium">
          <div>
            <%= t('request_signature_multiple_submitters_with_default_values') %>
          </div>
          <div class="mt-1">
            <div class="badge badge-warning badge-lg">POST</div>
            <div class="badge badge-primary badge-lg"><%= api_submissions_path %></div>
          </div>
        </div>
        <div class="collapse-content" style="display: inherit">
          <div class="mockup-code overflow-hidden">
            <% text = capture do %>curl --location '<%= api_submissions_url %>' \
       --header 'X-Auth-Token: <%= current_user.access_token.token %>' \
       --data-raw '{
         "template_id": <%= current_account.templates.last&.id || 1 %>,
         "submitters": [
           {
             "name": "John Doe",
             "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Party' %>",
             "email": "<%= current_user.email.sub('@', '+test@') %>",
             "values": {
               "Form Text Field Name": "Default Value"
             }
           },
           { "role": "Second Submitter", "email": "<%= current_user.email.sub('@', '+test2@') %>" }
         ]
       }'<% end.to_str %>
            <span class="top-0 right-0 absolute">
              <%= render 'shared/clipboard_copy', icon: 'copy', text:, class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
            </span>
            <pre data-prefix="$"><code class="overflow-hidden w-full"><%== HighlightCode.call(text, 'Shell', theme: 'base16.dark') %></code></pre>
          </div>
        </div>
      </div>
      <div class="collapse collapse-plus bg-base-200 px-1">
        <input type="checkbox">
        <div class="collapse-title text-xl font-medium">
          <div>
            <%= t('request_signature_single_submitter') %>
          </div>
          <div class="mt-1">
            <div class="badge badge-warning badge-lg">POST</div>
            <div class="badge badge-primary badge-lg"><%= api_submissions_emails_path %></div>
          </div>
        </div>
        <div class="collapse-content" style="display: inherit">
          <div class="mockup-code overflow-hidden">
            <% text = capture do %>curl --location '<%= api_submissions_emails_url %>' \
       --header 'X-Auth-Token: <%= current_user.access_token.token %>' \
       --data-raw '{
           "template_id": <%= current_account.templates.last&.id || 1 %>,
           "emails":  "<%= current_user.email.sub('@', '+test@') %>, <%= current_user.email.sub('@', '+test2@') %>"
       }'<% end.to_str %>
            <span class="top-0 right-0 absolute">
              <%= render 'shared/clipboard_copy', icon: 'copy', text:, class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
            </span>
            <pre data-prefix="$"><code class="overflow-hidden w-full"><%== HighlightCode.call(text, 'Shell', theme: 'base16.dark') %></code></pre>
          </div>
        </div>
      </div>
      <div class="collapse collapse-plus bg-base-200 px-1">
        <input type="checkbox">
        <div class="collapse-title text-xl font-medium">
          <div>
            <%= t('template_details') %>
          </div>
          <div class="mt-1">
            <div class="badge badge-info badge-lg">GET</div>
            <div class="badge badge-primary badge-lg"><%= api_template_path(':id') %></div>
          </div>
        </div>
        <div class="collapse-content" style="display: inherit">
          <div class="mockup-code overflow-hidden">
            <% text = capture do %>curl '<%= api_template_url(current_account.templates&.last || 1) %>' \
       --header 'X-Auth-Token: <%= current_user.access_token.token %>'<% end.to_str %>
            <span class="top-0 right-0 absolute">
              <%= render 'shared/clipboard_copy', icon: 'copy', text:, class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
            </span>
            <pre data-prefix="$"><code class="overflow-hidden w-full"><%== HighlightCode.call(text, 'Shell', theme: 'base16.dark') %></code></pre>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <%= link_to t('open_full_api_reference'), "#{Docuseal::PRODUCT_URL}/docs/api", class: 'btn btn-warning text-base mt-4 px-8', target: '_blank', rel: 'noopener' %>
    </div>
  </div>
</div>