mirror-chatterino2/resources/auth.html

103 lines
3.5 KiB
HTML

<html>
<head>
<title>Login - Chatterino</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel="icon" href="https://chatterino.com/logo.png">
<style>
body {
font-family: 'Noto Sans', sans-serif;
color: #efefef;
background-color: #1f1f1f;
font-size: 1.1em;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.title {
display: flex;
align-items: center;
font-size: 44px;
font-weight: bolder;
margin: 16px 0;
margin-bottom: 0.2em;
}
.title > img {
margin-right: 22px;
height: 40px;
width: 40px;
}
p {
margin: 6px 0;
text-decoration: none;
font-size: 1.5em;
max-width: 960px;
}
</style>
</head>
<body>
<div class="title">
<img src="https://chatterino.com/logo.png">Chatterino
</div>
<noscript>
<style>
#status {
display: none;
}
</style>
<p>This page requires Javascript to run
<br>
<br>Alternatively, copy your access token from the URL
<br>and click "Paste token from clipboard" button in Chatterino
</p>
</noscript>
<p id="status">Loading...</p>
<script>
(function() {
// Address of local Chatterino's http server
const address = "localhost";
const port = 52107;
// Retrieve hash with token and hide it immidiatelly
const fragment = location.hash.substring(1);
history.replaceState(null, null, " ");
// Find token in the hash
const token = new URLSearchParams(fragment).get("access_token");
let status = document.getElementById("status");
// Return if no token was found
if (!token) {
status.innerHTML = "Bad request";
return;
}
// Call Chatterino's http server
status.innerHTML = "Sending your credentials to Chatterino...";
fetch(`http://${address}:${port}/token`, {
method: "PUT",
headers: {
"X-Access-Token": token
}
}).then(resp => {
// Failure
if (resp.status !== 200) {
status.innerHTML = `Chatterino refused your credentials, error ${resp.status}`;
return;
}
// Success
status.innerHTML = "Chatterino added your account successfully!<br>You can close this tab now.";
}).catch(err => {
// Unexpected the unexpectable
console.log(err);
status.innerHTML = "Something went wrong, check console for details";
});
})();
</script>
</body>
</html>