pidgin/nest

Improve protocols index page

2021-07-19, Sorvival
aa9b6946a636
Improve protocols index page

Make the protocols index page more detailed:

- Explain what are services/protocols.
- Make it clear that we will only answer questions for protocols that come
built into Pidgin.
- Explain that for third party protocol plugins users need to ask questions
directly to their respective authors.

Testing Done:
Ran `dev-server.sh` and verified contents look as intended.

Bugs closed: NEST-33

Reviewed at https://reviews.imfreedom.org/r/820/
<!DOCTYPE html>
<html>
<head>
<title>libpurple oauth helper</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"
></script>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<style>
body {
margin-top: 1em;
}
.blur {
filter: blur(3px);
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div class="row">
<img
src="/images/pidgin-circle-256.png"
class="img-responsive center-block"
/>
</div>
<div class="row">
<div class="panel panel-info">
<div class="panel-heading">About</div>
<div class="panel-body">
This page helps you to login your accounts that
require oauth authentication. Due to the way
OAuth2's implicit flow works, we do not have access
to, nor do we store, this access token.
</div>
</div>
</div>
<div class="row">
<div class="panel panel-success">
<div class="panel-heading">Usage</div>
<div class="panel-body">
To use this page, click the copy button next to the
access token and paste it into the password entry
for the pidgin account you just enabled.
</div>
</div>
</div>
<div class="row">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> This access code is used to
access your account. Do not share it with anyone!
</div>
</div>
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button
class="btn btn-secondary"
type="button"
id="access_token_toggle"
onclick="toggleAccessToken()"
>
Show
</button>
</span>
<input
type="text"
class="blur form-control"
id="access_token"
/>
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
aria-label="Copy to clipboard"
onclick="copyToClipboard();"
>
<span
class="glyphicon glyphicon-copy"
aria-hidden="true"
></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// set the input box's value to the value of access_token in window.location.hash
var data = window.location.hash.slice(1);
var vars = data.split("&");
for (var i = 0; i < vars.length; i++) {
var parts = vars[i].split("=");
if (parts[0] == "access_token") {
// remove the hash from the url so we don't leak it.
window.location.hash = "";
// update the input box with the access token
var element = $("#access_token");
element.val(parts[1]);
element.select();
// stop processing
break;
}
}
});
function copyToClipboard(e) {
$("#access_token").select();
document.execCommand("copy");
}
function toggleAccessToken() {
var toggle = $("#access_token_toggle");
var token = $("#access_token");
if (toggle.text() == "Show") {
toggle.text("Hide");
token.removeClass("blur");
} else {
toggle.text("Show");
token.addClass("blur");
}
token.select();
}
</script>
</body>
</html>