Nathan Woodburn
e66ae58494
All checks were successful
Build Docker / Build Docker (push) Successful in 27s
316 lines
8.3 KiB
HTML
316 lines
8.3 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;
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
}
|
|
|
|
button.loginbutton {
|
|
/* Put in the centre of the screen */
|
|
|
|
margin-left: 50%;
|
|
margin-top: 20px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.login-option {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
select {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.centre {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
input {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-right: 25px;
|
|
}
|
|
</style>
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
</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>
|
|
{% if user.id == 1 %}
|
|
<strong>client_owner: </strong>{{ client.user_id }}{% endif %}
|
|
{%- 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>
|
|
{% if user.id == 1 %}
|
|
{% for user_tmp in users %}
|
|
|
|
<pre>
|
|
<strong>User Info</strong>
|
|
{%- for key in user_tmp %}
|
|
<strong>{{ key }}: </strong>{{ user_tmp[key] }}
|
|
{%- endfor %}
|
|
</pre>
|
|
<hr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<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>
|
|
|
|
|
|
<div class="login-option">
|
|
{% if domains %}
|
|
<p>Login using a TXT record</p>
|
|
|
|
<div style="text-align: center;margin-top: 25px; margin-bottom: 25px;">
|
|
<select id="TXTDomainDropdown">
|
|
{% for domain in domains %}
|
|
<option value="{{domain}}">{{domain}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button onclick="TXTLoginSelect()">Login</button>
|
|
</div>
|
|
<script>
|
|
function TXTLoginSelect() {
|
|
var selectedNFT = document.getElementById("TXTDomainDropdown").value;
|
|
window.location.href = "/txt/" + selectedNFT + window.location.search;
|
|
}
|
|
</script>
|
|
|
|
<span class="centre">Login with a new domain?</span>
|
|
{% endif %}
|
|
<span class="centre">Add this TXT record to any domain or login with an existing domain in Varo Auth</span>
|
|
<div class="centre">
|
|
<pre style="display: inline;margin-right: 10px;">IDNS1 auth:login.hns.au={{uuid}}</pre>
|
|
<!-- Copy button -->
|
|
<button style="display: inline;" onclick="copyToClipboard('IDNS1 auth:login.hns.au={{uuid}}')">Copy</button>
|
|
</div>
|
|
|
|
<div class="centre" style="margin-top: 25px;">
|
|
<form action="/txt?next={{ next }}" method="post">
|
|
<input type="text" name="domain" placeholder="Enter your domain">
|
|
<button type="submit">Login</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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 with Varo</button>
|
|
|
|
|
|
<div class="login-option">
|
|
<!-- Login for HNS.ID domains -->
|
|
<script>
|
|
async function loginETH() {
|
|
if (typeof window.ethereum === 'undefined') {
|
|
alert('Please install MetaMask to use this feature');
|
|
return;
|
|
}
|
|
try {
|
|
// Check if the user is already connected
|
|
const accounts = await ethereum.request({ method: 'eth_accounts' });
|
|
var address = '';
|
|
if (accounts.length > 0) {
|
|
console.log('Already connected', accounts[0]);
|
|
address = accounts[0];
|
|
} else {
|
|
console.log('Not connected yet');
|
|
// Request connection
|
|
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
|
|
if (accounts.length > 0) {
|
|
address = accounts[0];
|
|
console.log('Connected', accounts[0]);
|
|
}
|
|
}
|
|
if (address != '') {
|
|
// Send the address to the server
|
|
console.log('Sending address to server', address);
|
|
// Sign a message
|
|
const message = 'I am signing my one-time nonce: ' + Math.floor(Math.random() * 1000000) + ' to log in to HNS Login as ' + address;
|
|
const signature = await ethereum.request({
|
|
method: 'personal_sign',
|
|
params: [message, address],
|
|
});
|
|
console.log('Signature', signature);
|
|
// Redirect user to choose a domain to log in with
|
|
$.ajax({
|
|
url: '/hnsid',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({ address: address, signature: signature, message: message }),
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
console.log('Response', response);
|
|
if (response.success) {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
} catch (error) {
|
|
console.error('Error checking connection status', error);
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
{% if address %}
|
|
|
|
|
|
<h4 style="text-align: center;">Logged in with HNS.ID</h4>
|
|
<span style="text-align: center;display: block;">Select a HNS.ID domain to log in with</span><br>
|
|
|
|
<div style="text-align: center;">
|
|
<select id="nftDropdown">
|
|
{% for nft in hnsid.nfts %}
|
|
<option value="{{nft.name}}">{{nft.name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button onclick="HNSIDLoginSelect()">Login</button>
|
|
</div>
|
|
<script>
|
|
function HNSIDLoginSelect() {
|
|
var selectedNFT = document.getElementById("nftDropdown").value;
|
|
window.location.href = "/hnsid/" + selectedNFT + window.location.search;
|
|
}
|
|
</script>
|
|
<button class="loginbutton" onclick='javascript:loginETH();'>Login with another ETH address</button>
|
|
{% else %}
|
|
<button class="loginbutton" onclick='javascript:loginETH();'>Login with HNS.ID</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(text) {
|
|
var dummy = document.createElement("textarea");
|
|
document.body.appendChild(dummy);
|
|
dummy.value = text;
|
|
dummy.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(dummy);
|
|
}
|
|
</script>
|
|
|
|
{% 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>, <a href="https://hns.id/"
|
|
target="_blank">HNS.ID</a> and <a href="https://nathan.woodburn.au" target="_blank">Nathan.Woodburn/</a>
|
|
</div>
|
|
<div style="height: 5em;"></div>
|
|
</body>
|
|
|
|
</html> |