SMusatov
/
hoppscotch
mirror of https://github.com/hoppscotch/hoppscotch.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
  <title>Postwoman - API request builder</title>
  <meta name="description" content="The Postwoman API request builder helps you create your requests faster, saving you precious time on your development.">
  <link rel="icon" href="favicon.ico">
  <meta itemprop="name" content="Postwoman - API request builder">
  <meta itemprop="description" content="The Postwoman API request builder helps you create your requests faster, saving you precious time on your development.">
  <meta itemprop="image" content="icons/icon-192x192.png">
  <!-- See https://goo.gl/OOhYW5 -->
  <link rel="manifest" href="manifest.json">
  <!-- See https://goo.gl/qRE0vM -->
  <meta name="theme-color" content="#121212">
  <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Postwoman - API request builder">
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Postwoman - API request builder">
  <!-- Homescreen icons -->
  <link rel="apple-touch-icon" href="icons/icon-48x48.png">
  <link rel="apple-touch-icon" sizes="72x72" href="icons/icon-72x72.png">
  <link rel="apple-touch-icon" sizes="96x96" href="icons/icon-96x96.png">
  <link rel="apple-touch-icon" sizes="144x144" href="icons/icon-144x144.png">
  <link rel="apple-touch-icon" sizes="192x192" href="icons/icon-192x192.png">
  <!-- Tile icon for Windows 8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="icons/icon-144x144.png">
  <meta name="msapplication-TileColor" content="#121212">
  <meta name="msapplication-tap-highlight" content="no">
  <!-- OpenGraph -->
  <meta property="og:site_name" content="Postwoman - API request builder">
  <meta property="og:url" content="https://liyasthomas.github.io/postwoman">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Postwoman - API request builder">
  <meta property="og:description" content="API request builder">
  <meta property="og:image" content="icons/icon-144x144.png">
  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@liyasthomas">
  <meta name="twitter:creator" content="@liyasthomas">
  <meta name="twitter:url" content="https://liyasthomas.github.io/postwoman">
  <meta name="twitter:title" content="Postwoman - API request builder">
  <meta name="twitter:description" content="API request builder">
  <meta name="twitter:image" content="icons/icon-144x144.png">
  <!-- Web Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('sw.js').then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }

  </script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
</head>

<body>
  <main id="app">
    <header>
      <div>
        <a href="">
          <h1 class="logo"><img src="icons/logo.svg" alt="" style="height: 24px; margin-right: 16px">Postwoman</h1>
        </a>
        <h3>API request builder</h3>
      </div>
    </header>
    <fieldset class="request" ref="request">
      <legend v-on:click="collapse">Request ↕</legend>
      <div class="collapsible">
        <ul>
          <li>
            <label for="method">Method</label>
            <select v-model="method">
              <option>GET</option>
              <option>POST</option>
              <option>PUT</option>
              <option>DELETE</option>
              <option>OPTIONS</option>
            </select>
          </li>
          <li>
            <label for="url">URL</label>
            <input type="url" v-bind:class="{ error: urlNotValid }" v-model="url" v-on:keyup.enter="sendRequest">
          </li>
          <li>
            <label for="path">Path</label>
            <input v-model="path" v-on:keyup.enter="sendRequest">
          </li>
          <li>
            <label for="action">&nbsp;</label>
            <button v-bind:class="{ disabled: urlNotValid }" name="action" @click="sendRequest">Send</button>
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
      <legend v-on:click="collapse">Request Body ↕</legend>
      <div class="collapsible">
        <ul>
          <li>
            <label>Content Type</label>
            <select v-model="contentType">
              <option>application/json</option>
              <option>www-form/urlencoded</option>
            </select>
          </li>
        </ul>
        <ol v-for="(param, index) in bodyParams">
          <li>
            <label :for="'bparam'+index">Key {{index + 1}}</label>
            <input :name="'bparam'+index" v-model="param.key">
          </li>
          <li>
            <label :for="'bvalue'+index">Value {{index + 1}}</label>
            <input :name="'bvalue'+index" v-model="param.value">
          </li>
          <li>
            <label for="request">&nbsp;</label>
            <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
          </li>
        </ol>
        <ul>
          <li>
            <label for="addrequest">Action</label>
            <button name="addrequest" @click="addRequestBodyParam">Add</button>
          </li>
        </ul>
        <ul>
          <li>
            <label for="request">Parameter List</label>
            <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="authentication hidden">
      <legend v-on:click="collapse">Authentication ↕</legend>
      <div class="collapsible">
        <ul>
          <li>
            <label for="auth">Authentication Type</label>
            <select v-model="auth">
              <option>None</option>
              <option>Basic</option>
              <option>Bearer Token</option>
            </select>
          </li>
        </ul>
        <ul v-if="auth === 'Basic'">
          <li>
            <label for="http_basic_user">User</label>
            <input v-model="httpUser">
          </li>
          <li>
            <label for="http_basic_passwd">Password</label>
            <input v-model="httpPassword" type="password">
          </li>
        </ul>
        <ul v-if="auth === 'Bearer Token'">
          <li>
            <label for="bearer_token">Token</label>
            <input v-model="bearerToken">
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="parameters hidden">
      <legend v-on:click="collapse">Parameters ↕</legend>
      <div class="collapsible">
        <ol v-for="(param, index) in params">
          <li>
            <label :for="'param'+index">Key {{index + 1}}</label>
            <input :name="'param'+index" v-model="param.key">
          </li>
          <li>
            <label :for="'value'+index">Value {{index + 1}}</label>
            <input :name="'value'+index" v-model="param.value">
          </li>
          <li>
            <label for="param">&nbsp;</label>
            <button name="param" @click="removeRequestParam(index)">Remove</button>
          </li>
        </ol>
        <ul>
          <li>
            <label for="add">Action</label>
            <button name="add" @click="addRequestParam">Add</button>
          </li>
        </ul>
        <ul>
          <li>
            <label for="request">Parameter List</label>
            <textarea name="request" rows="1" readonly>{{queryString || '(add at least one parameter)'}}</textarea>
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="response" id="response" ref="response">
      <legend v-on:click="collapse">Response ↕</legend>
      <div class="collapsible">
        <ul>
          <li>
            <label for="status">status</label>
            <input name="status" type="text" readonly :value="response.status || '(waiting to send request)'">
          </li>
        </ul>
        <ul v-for="(value, key) in response.headers">
          <li>
            <label for="value">{{key}}</label>
            <input name="value" :value="value" readonly>
          </li>
        </ul>
        <ul>
          <li>
            <label for="body">response</label>
            <textarea name="body" rows="10" readonly>{{response.body || '(waiting to send request)'}}</textarea>
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="history">
      <legend v-on:click="collapse">History ↕</legend>
      <div class="collapsible">
        <ul>
          <li>
            <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
          </li>
        </ul>
        <ul v-for="entry in history">
          <li>
            <label for="time">Time</label>
            <input name="time" type="text" readonly :value="entry.time">
          </li>
          <li>
            <label for="name">Method</label>
            <input name="name" type="text" readonly :value="entry.method">
          </li>
          <li>
            <label for="name">URL</label>
            <input name="name" type="text" readonly :value="entry.url">
          </li>
          <li>
            <label for="name">Path</label>
            <input name="name" type="text" readonly :value="entry.path">
          </li>
          <li>
            <label for="delete">&nbsp;</label>
            <button name="delete" @click="deleteHistory(entry)">Delete</button>
          </li>
          <li>
            <label for="use">&nbsp;</label>
            <button name="use" @click="useHistory(entry)">Use</button>
          </li>
        </ul>
      </div>
    </fieldset>
    <footer>
      <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
      <button id="installPWA" onclick="installPWA()">
        Install PWA
      </button>
    </footer>
  </main>
  <script src="script.js"></script>
  <script>
    let pwaInstalled = localStorage.getItem('pwaInstalled') == 'yes'
    if (window.matchMedia('(display-mode: standalone)').matches) {
      localStorage.setItem('pwaInstalled', 'yes')
      pwaInstalled = true
    }
    if (window.navigator.standalone === true) {
      localStorage.setItem('pwaInstalled', 'yes')
      pwaInstalled = true
    }
    if (pwaInstalled) {
      document.getElementById('installPWA').style.display = 'none'
    } else {
      document.getElementById('installPWA').style.display = 'block'
    }
    let deferredPrompt = null
    window.addEventListener('beforeinstallprompt', (e) => {
      deferredPrompt = e
    })
    async function installPWA() {
      if (deferredPrompt) {
        deferredPrompt.prompt()
        deferredPrompt.userChoice.then(({
          outcome
        }) => {
          if (outcome === 'accepted') {
            console.log('Your PWA has been installed')
          } else {
            console.log('User chose to not install your PWA')
          }
          deferredPrompt = null
        })
      }
    }
    window.addEventListener('appinstalled', (evt) => {
      localStorage.setItem('pwaInstalled', 'yes')
      pwaInstalled = true
      document.getElementById('installPWA').style.display = 'none'
    })

  </script>
</body>

</html>