ICAS/html/verify.html

267 lines
7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Setup Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--Setup Override CSS-->
<link rel="stylesheet" href="/style.css">
<!--Site icon and title-->
<link rel="icon" type="image/png" href="/favicon.ico">
<title>IC Anime Society</title>
<!--Script to set [[discordID]]-->
<script>
async function setDiscordID() {
const id = new URLSearchParams(window.location.search).get("id");
if (id == null) {
window.location.replace("/");
} else {
const { username, avatar_url } = await fetch(`/discord?id=${id}`).then((r) => r.json()).catch(console.error);
// const { username, avatar_url } = { username: `User #${id}`, avatar_url: "https://cdn.discordapp.com/embed/avatars/0.png" };
document.getElementById("discordID").value = id;
document.getElementById("discord-username").innerText = username;
document.getElementById("discord-avatar").src = avatar_url;
}
}
</script>
<style>
::-webkit-input-placeholder {
color: #dfdfdf;
}
:-ms-input-placeholder {
color: #dfdfdf;
}
::-ms-input-placeholder {
color: #dfdfdf;
}
:-moz-placeholder {
color: #dfdfdf;
opacity: 1;
}
::-moz-placeholder {
color: #dfdfdf;
opacity: 1;
}
.verify-body {
width: 100%;
margin: 0;
padding: 10px 20%;
background: #222;
color: #dddddd;
}
#discord-text {
margin-right: 10px;
}
.discord-user {
align-self: center;
display: flex;
align-items: center;
width: 100%;
text-align: center;
justify-content: center;
}
#discord-username {
margin-left: 10px;
}
.verify-form {
align-self: center;
display: flex;
flex-direction: column;
height: 100px;
margin-bottom: 60px;
}
.verify-input {
width: 40%;
margin: 3px 30%;
padding: 5px;
border: none;
border-radius: 6px;
background-color: #337ab7;
text-align: center;
}
.verify-submit {
width: 20%;
margin: 3px 40%;
padding: 10px;
border: none;
border-radius: 6px;
background-color: #337ab7;
color: #fff;
font-size: 1.5em;
cursor: pointer;
}
.verify-submit:hover,
.verify-submit:active {
background-color: #3d90d9;
}
@media (500px < width <=1000px) {
.verify-form {
margin-bottom: 80px;
}
.verify-body {
padding: 10px 10%;
}
.verify-input {
width: 60%;
margin: 3px 20%;
}
.verify-submit {
width: 40%;
margin: 3px 30%;
}
}
@media (width <=500px) {
.verify-form {
margin-bottom: 80px;
}
.verify-body {
padding: 10px 5%;
}
.verify-input {
width: 80%;
margin: 3px 10%;
}
.verify-submit {
width: 60%;
margin: 3px 20%;
}
}
</style>
</head>
<body onload="setDiscordID()">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="/images/logo.png" id="logo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/about">Who we are</a></li>
<li><a href="/committee">Committee</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">What we Do<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/manga">Manga club</a></li>
<li><a href="/library">Manga Library</a></li>
</ul>
</li>
<li>
<a
href="https://www.imperialcollegeunion.org/shop/club-society-project-products/animesoc-products">Join
Now!</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Title bar -->
<div class="jumbotron top-item">
<div class="container">
<h1>Automatic Verification</h1>
<p>This page allows you to easily prove Imperial student status</p>
</div>
</div>
<!-- Page Contents -->
<div class="verify-body">
<h1>Verification Form</h1>
<p>When you submit the form below, your Imperial login details are checked using the Union login page and then
discarded, the only data saved is whether the login succeeded and your Imperial shortcode, to be connected
to your Discord account by Nano. <b>Details input here will not be sent/visible to anyone nor will they be
stored at any point, and will only be used to verify the account is a valid Imperial login using the
Imperial eActivities API directly.</b></p>
<p>We don't want to ever know your login details as that's a whole GDPR and security nightmare. The code for
this website and the verification system is available on <a
href="https://github.com/supleed2/ICAS">GitHub</a>.</p>
<p><b>If you would prefer, you can continue to use verification via membership (if you have bought membership
this year) or manual verification, such as when verifying using College ID or an acceptance letter.</b>
</p>
<br>
<div class="discord-user">
<p id="discord-text"><b>Verification for:</b></p>
<img id="discord-avatar" height="50px" width="50px" src="https://cdn.discordapp.com/embed/avatars/0.png">
<p id="discord-username">Loading...</p>
</div>
<br>
<form class="verify-form" method="post" action="submit">
<input class="verify-input" type="text" name="username" id="username" autocomplete="username"
placeholder="Imperial Shortcode (ab1234)" required />
<input class="verify-input" type="password" name="password" id="password" autocomplete="current-password"
placeholder="Password" required />
<input type="hidden" name="discordID" id="discordID" autocomplete="off" value="[[discordID]]" />
<input class="verify-submit" type="submit" value="Let's go!" />
</form>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<span class="footer-text">
Join our <a href="http://discord.gg/BgwDD69">Discord</a> server.
Sign up to our <a href="https://mailman.ic.ac.uk/mailman/listinfo/animesoc-list">mailing list</a>.
</span>
</div>
</footer>
<!--Bootstrap Javascript-->
<!--=======================================================================-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>