<style type="text/css">
 .btn.active:focus {
   outline: none;
 }
 ul.selections {
   font-family: monospace;
   overflow: auto;
   list-style-type: none;
   padding: 0;
 }
 li[id*=-selection] {
   margin: 2px 2px 5px;
   float: left;
   clear: none;
 }
</style>

<h1 class="page-header"><%= name %></h1>
<% include ../partials/ruleInfo.ejs %>
<div class="row">
  <div id="ssrf" class="col-xs-12 col-sm-6" style="padding-bottom: 30px;">
    <div style="overflow:auto">
      <p>Select library to use when performing the server-side request.</p>
      <ul id="libs-list" class="selections">
      <% groupedSinkData.query.forEach(function(sink) { %>
        <li id="<%= sink.name %>-selection">
          <button type="submit" class="btn btn-warning"><%= sink.name %></button>
        </li>
      <% }); %>
      </ul>
    </div>

    <div style="overflow:auto">
      <p>Select part of url to contain tracked data.</p>
      <ul id="url-list" class="selections">
        <% parts.forEach(function(part) { %>
        <li id="<%= part %>-selection">
          <button type="submit" class="btn btn-warning"><%= part %></button>
        </li>
        <% }); %>
      </ul>
    </div>
    <br>

    <div>
      <form action="/ssrf" method="GET" target="test-bench-ssrf">
        <div class="form-group">
          <p>The server will make a request to the following URL using the selected Node.js package.</p>
          <pre id="constructed-url"></pre>
          <br>
          <label>Input Value</label>
          <br>
          <input name="input" class="form-control">
          <br>
          <input name="part" type="hidden">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">
 $(() => {
   const state = {
     action: '/ssrf/query/{lib}/unsafe',
     requestUrl: '<%= requestUrl %>',
     selectedLib: 'axios',
     selectedUrlPart: 'host'
   };

   $('#constructed-url').text(state.requestUrl);

   $(`li[id='${state.selectedLib}-selection'] button`).toggleClass('active');
   $(`li[id='${state.selectedUrlPart}-selection'] button`).toggleClass('active');

   // set the initial value on load so it is not empty
   if (state.selectedUrlPart === 'path') {
    $('[name=input]').val(state.requestUrl.substring(7));
   }

   $('#url-list button')
     .on('click', (e) => {
       state.selectedUrlPart = $(e.target).text();
       toggleActiveSelection(e);
       setAction();
     });

   $('#libs-list button')
     .on('click', (e) => {
       state.selectedLib = $(e.target).text();
       toggleActiveSelection(e);
       setAction();
     });

   $('[name=input]').on('keyup', (e) => {
     const url = e.currentTarget.value
      ? state.selectedUrlPart === 'host'
      ? `http://${e.currentTarget.value}`
      : state.selectedUrlPart === 'path'
      ? `${state.requestUrl}/${e.currentTarget.value}`
      : `${state.requestUrl}?input=${e.currentTarget.value}`
      : `${state.requestUrl}`
     $('#constructed-url').text(url)
   });

   setAction();

   function setAction() {
     const action = state
       .action
       .replace('{lib}', state.selectedLib);

     $('[name=part]').val(state.selectedUrlPart);
     $('form').attr('action', action);
   }

   function toggleActiveSelection(e) {
     const target = $(e.target);
     target.addClass('active');
     target
       .parent()
       .siblings()
       .children('button')
       .removeClass('active')
   }
 });
</script>
