pidgin/nest

Jiggle footline

2020-01-02, Jason
e6d8faf88e15
Jiggle footline

As is the footline is a hacky standin for a proper footer.
So we need to be careful to keep it clear and resonable

These changes:

* Shrink and move copyright to it's own line
* Add space between blocks to help clarify what is going on
* Add migration infomation to the footline
<!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>