hns-login/website/templates/home.html
Nathan Woodburn 49f23261c3
All checks were successful
Build Docker / Build Docker (push) Successful in 1m39s
fix: Use absolute links in footer
2024-02-13 22:43:11 +11:00

119 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HNS Login</title>
<link rel="icon" href="favicon.png" type="image/png">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Dark theme*/
background-color: #222;
color: #fff;
}
h1 {
margin: 0;
padding: 20px;
background-color: #333;
color: #fff;
text-align: center;
}
h2 {
margin: 0;
padding: 20px;
text-align: center;
}
p {
margin: 0;
padding: 20px;
text-align: center;
}
form {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
a.button {
display: block;
width: 200px;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
text-align: center;
text-decoration: none;
}
button.loginbutton {
/* Put in the centre of the screen */
margin-left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h1>HNS Login</h1>
{% if user %}
<h2>You are currently logged in as <strong>{{ user }}/</strong></h2>
<a href="{{ url_for('.logout') }}" class="button">Log Out</a>
{% for client in clients %}
<pre>
<strong>Client Info</strong>
{%- for key in client.client_info %}
<strong>{{ key }}: </strong>{{ client.client_info[key] }}
{%- endfor %}
<strong>Client Metadata</strong>
{%- for key in client.client_metadata %}
<strong>{{ key }}: </strong>{{ client.client_metadata[key] }}
{%- endfor %}
</pre>
<hr>
{% endfor %}
<br><br>
<p>Want to implement OAuth?<br>
Contact Nathan.Woodburn/ on any social media platform</p>
{% else %}
<h2>Login with your Handshake domain</h2>
<p>If you have already used Varo Auth, you can just select the domain you want to login with.</p>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="https://auth.varo.domains/v1"></script>
<script>var varo = new Varo();</script>
<button class="loginbutton" onclick='varo.auth().then(auth => {
if (auth.success) {
// handle success by calling your api to update the users session
$.post("/", JSON.stringify(auth.data), (response) => {
window.location.reload();
});
}
});'>Login</button>
{% endif %}
<div style="position: fixed; bottom: 0; width: 100%; text-align: center; background-color: #333; padding: 10px;">
Powered by <a href="https://auth.varo.domains/implement" target="_blank">Varo Auth</a> and <a href="https://nathan.woodburn.au" target="_blank">Nathan.Woodburn/</a>
</div>
</body>
</html>