2024-02-09 23:04:20 +11:00
<!DOCTYPE html>
< html lang = "en" >
2024-06-14 15:32:04 +10:00
2024-02-09 23:04:20 +11:00
< 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" >
2024-06-14 15:32:04 +10:00
< style >
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Dark theme*/
background-color: #222;
color: #fff;
}
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
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;
}
2024-06-14 16:45:52 +10:00
a {
color: white;
}
2024-06-14 15:32:04 +10:00
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;
}
< / style >
2024-02-09 23:04:20 +11:00
< / head >
2024-06-14 15:32:04 +10:00
2024-02-09 23:04:20 +11:00
< body >
2024-06-14 15:32:04 +10:00
< h1 > HNS Login< / h1 >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
{% if user %}
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
< h2 > You are currently logged in as < strong > {{ user }}/< / strong > < / h2 >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
< a href = "{{ url_for('.logout') }}" class = "button" > Log Out< / a >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
{% for client in clients %}
2024-06-14 16:39:58 +10:00
2024-06-14 15:32:04 +10:00
< pre >
2024-02-09 23:04:20 +11:00
< strong > Client Info< / strong >
2024-06-14 16:39:58 +10:00
{% if user.id == 1 %}
< strong > client_owner: < / strong > {{ client.user_id }}{% endif %}
2024-02-09 23:04:20 +11:00
{%- 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 >
2024-06-14 15:32:04 +10:00
< hr >
{% endfor %}
2024-06-14 16:39:58 +10:00
< 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 %}
2024-06-14 15:32:04 +10:00
< 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 >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
< script src = "https://code.jquery.com/jquery-3.6.4.min.js" > < / script >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
< div class = "login-option" >
< 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 = > {
2024-02-09 23:04:20 +11:00
if (auth.success) {
// handle success by calling your api to update the users session
$.post("/", JSON.stringify(auth.data), (response) => {
window.location.reload();
});
}
2024-06-14 15:32:04 +10:00
});'>Login with Varo< / button >
< / div >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
< 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 as {{address}}< / h4 >
< span style = "text-align: center;display: block;" > Select a HNS.ID domain to log in with< / span > < br >
2024-02-09 23:04:20 +11:00
2024-06-14 15:32:04 +10:00
< 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 >
2024-02-09 23:04:20 +11:00
< / div >
2024-06-14 15:32:04 +10:00
< script >
function HNSIDLoginSelect() {
var selectedNFT = document.getElementById("nftDropdown").value;
2024-06-14 15:51:28 +10:00
window.location.href = "/hnsid/" + selectedNFT + window.location.search;
2024-06-14 15:32:04 +10:00
}
< / 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 >
{% endif %}
< div style = "position: fixed; bottom: 0; width: 100%; text-align: center; background-color: #333; padding: 10px;" >
2024-06-14 16:45:52 +10:00
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 >
2024-06-14 15:32:04 +10:00
< / div >
2024-06-14 16:45:52 +10:00
< div style = "height: 5em;" > < / div >
2024-02-09 23:04:20 +11:00
< / body >
2024-06-14 15:32:04 +10:00
2024-02-09 23:04:20 +11:00
< / html >
