176 lines
7.0 KiB
HTML
176 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Slack 2 Hangouts Chat Webhook</title>
|
|
<meta name="description" content="">
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="icon" href="favicon.jpg">
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
|
|
<link href="style.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="text-center">
|
|
<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
|
|
|
|
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
|
|
<main role="main" class="inner cover">
|
|
<article class="mb-5">
|
|
<img src="slack.png" alt="Slack"/>
|
|
<span class="text-warning">⇢</span>
|
|
<img src="chat.png" alt="Hangouts chat"/>
|
|
</article>
|
|
|
|
<h1 class="cover-heading text-warning">Slack 2 Hangouts Chat Webhook</h1>
|
|
<p class="lead mb-5">
|
|
Don't wait that applications <code>add notification</code> to Hangouts Chat. <br />
|
|
<code>Simply paste</code> your Hangouts Chat webhook url below and get a webhook url
|
|
<code>compatible</code> with Slack webhook.
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<label for="url">Enter your Hangouts Chat webhook url</label>
|
|
<input type="url" class="form-control" id="url"
|
|
placeholder="https://chat.googleapis.com/v1/spaces/{{space}}/messages?key={{key}&token={{token}}}"
|
|
required>
|
|
<div class="invalid-feedback">
|
|
Please provide a Hangouts Chat webhook url.
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="converted">Webhook url to use in your application</label>
|
|
<input type="url" class="form-control" id="converted" readonly>
|
|
</div>
|
|
<input type="button" class="mt-2 btn btn-lg btn-info convert" value="Give me my url !" />
|
|
|
|
<form class="d-none">
|
|
<div class="alert alert-dismissible mt-5 d-none text-left" role="alert">
|
|
<pre>
|
|
</pre>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="form-group mt-5">
|
|
<label for="slack">Slack webhook</label>
|
|
<textarea class="form-control" id="slack" rows="10">{
|
|
"attachments": [
|
|
{
|
|
"fallback": "Required plain-text summary of the attachment.",
|
|
"color": "#36a64f",
|
|
"pretext": "Optional text that appears above the attachment block",
|
|
"author_name": "Bobby Tables",
|
|
"author_link": "https://gsuite.google.com/products/chat/",
|
|
"author_icon": "https://www.gstatic.com/images/branding/product/2x/chat_64dp.png",
|
|
"title": "Slack API Documentation",
|
|
"title_link": "https://api.slack.com/",
|
|
"text": "Optional text that appears within the attachment",
|
|
"fields": [
|
|
{
|
|
"title": "Priority",
|
|
"value": "High",
|
|
"short": false
|
|
}
|
|
],
|
|
"image_url": "https://assets.brandfolder.com/oox8px-b08c7c-5m1qjd/original/full-color-mark%202x.png",
|
|
"thumb_url": "https://assets.brandfolder.com/oox90q-9q2cew-bw1vdr/view.png",
|
|
"footer": "Slack API",
|
|
"footer_icon": "https://platform.slack-edge.com/img/default_application_icon.png",
|
|
"ts": 123456789
|
|
}
|
|
]
|
|
}</textarea>
|
|
</div>
|
|
|
|
<input type="submit" class="mt-2 btn btn-lg btn-info" value="Test webhook !" />
|
|
</form>
|
|
</main>
|
|
|
|
<footer class="mastfoot mt-5">
|
|
<div class="inner">
|
|
<p>
|
|
<a href="https://www.npmjs.com/package/slack2hangoutschat-webhook">
|
|
<img src="https://img.shields.io/npm/dt/slack2hangoutschat-webhook.svg?style=social" alt="Npm downloads">
|
|
</a>
|
|
<a href="https://github.com/tchiotludo/slack2hangoutschat-webhook">
|
|
<img src="https://img.shields.io/github/stars/tchiotludo/slack2hangoutschat-webhook.svg?style=social&label=Stars"
|
|
alt="Github Stars"/>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
|
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
|
crossorigin="anonymous"></script>
|
|
<script type="application/javascript">
|
|
let form = $('form');
|
|
let converted = $('#converted');
|
|
let alert = $('.alert');
|
|
|
|
alert.on('ready', () => {
|
|
alert.alert();
|
|
});
|
|
|
|
$('input.convert').on('click', function() {
|
|
let url = $('#url');
|
|
|
|
let invalid = $('.invalid-feedback');
|
|
|
|
invalid.css('display', 'none');
|
|
form.addClass('d-none');
|
|
|
|
let match = url
|
|
.val()
|
|
.match(/https:\/\/chat\.googleapis\.com\/v1\/spaces\/([^/]+)\/messages\?(.*)/);
|
|
|
|
if (match && match[1] && match[2]) {
|
|
converted.val(window.location.origin + '/' + match[1] + '?' + match[2]);
|
|
form.removeClass('d-none')
|
|
} else {
|
|
converted.val('');
|
|
invalid.css('display', 'block');
|
|
}
|
|
});
|
|
|
|
form.on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
$.ajax({
|
|
url: converted.val(),
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: $('textarea').val(),
|
|
contentType: "application/json",
|
|
beforeSend: () => {
|
|
alert
|
|
.addClass('d-none')
|
|
.removeClass('alert-success')
|
|
.removeClass('alert-danger')
|
|
|
|
}
|
|
})
|
|
.done((data) => {
|
|
alert
|
|
.removeClass('d-none')
|
|
.addClass('alert-success')
|
|
.find('pre')
|
|
.text(JSON.stringify(data, null, 2))
|
|
})
|
|
.fail((xhr) => {
|
|
alert
|
|
.removeClass('d-none')
|
|
.addClass('alert-danger')
|
|
.find('pre')
|
|
.text(xhr.responseText)
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|