2019-08-21 13:18:20 +00:00
<!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 >
2019-08-23 06:06:04 +00:00
< meta name = "description" content = "The Postwoman API request builder helps you create your requests faster, saving you precious time on your development." >
2019-08-21 13:18:20 +00:00
< link rel = "icon" href = "favicon.ico" >
2019-08-23 06:06:04 +00:00
< 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." >
2019-08-21 13:18:20 +00:00
< 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" >
2019-08-23 06:06:04 +00:00
< meta name = "application-name" content = "Postwoman - API request builder" >
2019-08-21 13:18:20 +00:00
<!-- 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" >
2019-08-23 06:06:04 +00:00
< meta name = "apple-mobile-web-app-title" content = "Postwoman - API request builder" >
2019-08-21 13:18:20 +00:00
<!-- 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 -->
2019-08-23 06:06:04 +00:00
< meta property = "og:site_name" content = "Postwoman - API request builder" >
< meta property = "og:url" content = "https://liyasthomas.github.io/postwoman" >
2019-08-21 13:18:20 +00:00
< meta property = "og:type" content = "website" >
2019-08-23 06:06:04 +00:00
< meta property = "og:title" content = "Postwoman - API request builder" >
2019-08-21 13:18:20 +00:00
< 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" >
2019-08-23 06:06:04 +00:00
< meta name = "twitter:url" content = "https://liyasthomas.github.io/postwoman" >
< meta name = "twitter:title" content = "Postwoman - API request builder" >
2019-08-21 13:18:20 +00:00
< 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 >
2019-08-22 04:40:40 +00:00
< a href = "" >
2019-08-22 06:13:56 +00:00
< h1 class = "logo" > < img src = "icons/logo.svg" alt = "" style = "height: 24px; margin-right: 16px" > Postwoman< / h1 >
2019-08-21 13:18:20 +00:00
< / a >
< h3 > API request builder< / h3 >
< / div >
< / header >
2019-08-23 05:19:35 +00:00
< fieldset class = "request" ref = "request" >
2019-08-22 13:11:33 +00:00
< legend v-on:click = "collapse" > Request ↕< / legend >
2019-08-21 14:58:37 +00:00
< 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 >
2019-08-23 04:48:05 +00:00
< input type = "url" v-bind:class = "{ error: urlNotValid }" v-model = "url" v-on:keyup . enter = "sendRequest" >
2019-08-21 14:58:37 +00:00
< / li >
< li >
< label for = "path" > Path< / label >
2019-08-23 04:48:05 +00:00
< input v-model = "path" v-on:keyup . enter = "sendRequest" >
2019-08-21 14:58:37 +00:00
< / li >
< li >
2019-08-22 04:34:41 +00:00
< label for = "action" > < / label >
2019-08-22 14:41:08 +00:00
< button v-bind:class = "{ disabled: urlNotValid }" name = "action" @ click = "sendRequest" > Send< / button >
2019-08-21 14:58:37 +00:00
< / li >
< / ul >
< / div >
2019-08-21 13:18:20 +00:00
< / fieldset >
2019-08-22 04:34:41 +00:00
< fieldset class = "reqbody" v-if = "method === 'POST' || method === 'PUT'" >
2019-08-22 13:11:33 +00:00
< legend v-on:click = "collapse" > Request Body ↕< / legend >
2019-08-22 04:34:41 +00:00
< 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" > < / 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 >
2019-08-22 18:53:17 +00:00
< textarea name = "request" rows = "1" readonly > {{rawRequestBody || '(add at least one parameter)'}}< / textarea >
2019-08-22 04:34:41 +00:00
< / li >
< / ul >
< / div >
< / fieldset >
< fieldset class = "authentication hidden" >
2019-08-22 13:11:33 +00:00
< legend v-on:click = "collapse" > Authentication ↕< / legend >
2019-08-21 14:58:37 +00:00
< div class = "collapsible" >
< ul >
< li >
< label for = "auth" > Authentication Type< / label >
< select v-model = "auth" >
< option > None< / option >
< option > Basic< / 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 >
< / div >
2019-08-21 13:18:20 +00:00
< / fieldset >
2019-08-22 04:34:41 +00:00
< fieldset class = "parameters hidden" >
2019-08-22 13:11:33 +00:00
< legend v-on:click = "collapse" > Parameters ↕< / legend >
2019-08-21 14:58:37 +00:00
< 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 >
2019-08-22 04:34:41 +00:00
< label for = "param" > < / label >
2019-08-21 14:58:37 +00:00
< 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 >
2019-08-22 18:53:17 +00:00
< textarea name = "request" rows = "1" readonly > {{queryString || '(add at least one parameter)'}}< / textarea >
2019-08-21 14:58:37 +00:00
< / li >
< / ul >
< / div >
2019-08-21 13:18:20 +00:00
< / fieldset >
2019-08-21 14:58:37 +00:00
< fieldset class = "response" id = "response" ref = "response" >
2019-08-22 13:11:33 +00:00
< legend v-on:click = "collapse" > Response ↕< / legend >
2019-08-21 14:58:37 +00:00
< div class = "collapsible" >
< ul >
< li >
2019-08-22 04:34:41 +00:00
< label for = "status" > status< / label >
< input name = "status" type = "text" readonly :value = "response.status || '(waiting to send request)'" >
2019-08-21 14:58:37 +00:00
< / li >
< / ul >
< ul v-for = "(value, key) in response.headers" >
< li >
< label for = "value" > {{key}}< / label >
< input name = "value" :value = "value" readonly >
< / li >
< / ul >
2019-08-22 04:34:41 +00:00
< ul >
< li >
< label for = "body" > response< / label >
< textarea name = "body" rows = "6" readonly > {{response.body || '(waiting to send request)'}}< / textarea >
< / li >
< / ul >
2019-08-21 14:58:37 +00:00
< / div >
2019-08-21 13:18:20 +00:00
< / fieldset >
2019-08-23 05:19:35 +00:00
< fieldset class = "history" >
< legend v-on:click = "collapse" > History ↕< / legend >
< div class = "collapsible" >
2019-08-23 05:26:22 +00:00
< ul >
< li >
< button v-bind:class = "{ disabled: noHistoryToClear }" v-on:click = "clearHistory" > Clear History< / button >
< / li >
< / ul >
2019-08-23 05:19:35 +00:00
< 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" > < / label >
< button name = "delete" @ click = "deleteHistory(entry)" > Delete< / button >
< / li >
< li >
< label for = "use" > < / label >
< button name = "use" @ click = "useHistory(entry)" > Use< / button >
< / li >
< / ul >
< / div >
< / fieldset >
2019-08-21 13:18:20 +00:00
< footer >
2019-08-23 05:47:24 +00:00
< a href = "https://github.com/liyasthomas/postwoman" target = "_blank" > < img src = "icons/github.svg" alt = "" style = "margin-right: 16px" > GitHub< / a >
2019-08-21 13:18:20 +00:00
< button id = "installPWA" onclick = "installPWA()" >
2019-08-22 04:34:41 +00:00
Install PWA
2019-08-21 13:18:20 +00:00
< / 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 >
