hns-login/website/templates/home.html
Nathan Woodburn e66ae58494
All checks were successful
Build Docker / Build Docker (push) Successful in 27s
feat: Add TXT login using HIP 13
2024-06-15 13:29:25 +10:00

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>