Add form to verify page and styling

This commit is contained in:
Aadi Desai 2023-09-08 00:35:12 +01:00
parent 1d19db3876
commit d97d45b326
Signed by: supleed2
SSH key fingerprint: SHA256:CkbNRs0yVzXEiUp2zd0PSxsfRUMFF9bLlKXtE1xEbKM
2 changed files with 76 additions and 3 deletions

View file

@ -82,3 +82,56 @@ html, body {
.row h1 {
font-size:20pt;
}
.verify-body{
padding-left:15px;
padding-right:15px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-direction:column;
}
.discord-user{
align-self:center;
display:flex;
justify-content:space-around;
align-items:center;
width:300px;
}
#discord-username{
margin-left:10px;
}
.verify-form{
align-self:center;
display:flex;
flex-direction:column;
justify-content:space-between;
height:100px;
}
.verify-input{
border-radius:2px;
border:0;
background-color:#d1f0ff;
box-sizing:border-box;
padding:4px 20px 0;
}
.verify-submit{
border-radius:2px;
border:0;
background-color:#83d8ff;
box-sizing:border-box;
padding:4px 20px 0;
cursor:pointer;
}
.verify-submit:hover,
.verify-submit:active{
background-color:#72fff3;
}

View file

@ -95,15 +95,35 @@
</div>
<!-- Page Contents -->
<div class="container">
<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.</p>
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>
<br><br>
<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><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 Short-code" 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>
<br>
</div>
<!-- Footer -->