added a button to quickly copy the callback url to the clipboard

This commit is contained in:
Gonçalo Valério 2019-04-07 22:17:19 +01:00
parent aad18205e7
commit d724d3043b
2 changed files with 31 additions and 4 deletions

View File

@ -8,7 +8,7 @@ function getCallbackCode() {
return urlParams.get("cb");
}
function setCallbackUrl(callbackCode) {
function setCallbackUrl() {
let protocol = document.location.protocol;
let host = document.location.host;
let submitURL = `${protocol}//${host}/${getCallbackCode()}`;
@ -88,6 +88,20 @@ var requestList = new Vue({
}
});
var callbackDetails = new Vue({
el: "#callback-details",
delimiters: ["[[", "]]"],
data: {},
methods: {
copytoclipboard: function() {
var url = document.getElementById("callback-uuid-field");
url.select();
document.execCommand("copy");
alert("The callback url was copied to your clipboard.");
}
}
});
/*
Prepare the page for action
*/

View File

@ -8,13 +8,18 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{% static 'css/main.css' %}"></link>
<link rel="stylesheet" href="{% static 'css/gh-corner.css' %}"></link>
<title>Webhook Logger</title>
</head>
<body>
<div class="main">
<section class="section">
<section class="section" id="callback-details">
<div class="container">
<h1 class="title">Webhook Logger</h1>
<h2 class="subtitle">
@ -22,8 +27,8 @@
<a href="https://en.wikipedia.org/wiki/Webhook">webhooks</a>
</h2>
<p>Use the following URL as your webhook callback:</p>
<div class="field">
<div class="control">
<div class="field has-addons">
<div class="control has-icons-left is-expanded">
<input
id="callback-uuid-field"
class="input is-large is-info"
@ -31,6 +36,14 @@
placeholder="Large input"
readonly
/>
<span class="icon is-medium is-left">
<i class="fa fa-globe"></i>
</span>
</div>
<div class="control">
<a class="button is-info is-outlined is-large" v-on:click="copytoclipboard()">
<i class="fa fa-files-o"></i>
</a>
</div>
</div>
</div>