122 lines
4.4 KiB
HTML
122 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Minimal Nostr Login Test (Remote)</title>
|
|
</head>
|
|
<body>
|
|
<div id="user-info" style="display: none;">
|
|
<div id="user-name"></div>
|
|
<img id="user-picture" style="display: none;">
|
|
</div>
|
|
|
|
<script>
|
|
// Load nostr-login script with configuration from your website
|
|
const script = document.createElement('script');
|
|
script.src = 'https://laantungir.net/nostr-login/unpkg.js';
|
|
|
|
// Configure with Laan theme and Welcome Login start screen
|
|
script.setAttribute('data-theme', 'laan');
|
|
script.setAttribute('data-start-screen', 'welcome-login');
|
|
script.setAttribute('data-methods', 'connect,extension,local,readOnly');
|
|
script.setAttribute('data-no-banner', 'false');
|
|
|
|
document.head.appendChild(script);
|
|
|
|
// Wait for script to load, then set up event listeners
|
|
script.onload = () => {
|
|
setupEventListeners();
|
|
};
|
|
|
|
function setupEventListeners() {
|
|
// Listen for authentication events
|
|
document.addEventListener('nlAuth', (e) => {
|
|
const { type, pubkey, name } = e.detail;
|
|
|
|
if (type === 'login' || type === 'signup') {
|
|
console.log('User logged in:', e.detail);
|
|
showUserInfo();
|
|
// Check for profile updates periodically
|
|
startProfilePolling();
|
|
} else if (type === 'logout') {
|
|
console.log('User logged out');
|
|
hideUserInfo();
|
|
stopProfilePolling();
|
|
}
|
|
});
|
|
}
|
|
|
|
let profileInterval;
|
|
|
|
function startProfilePolling() {
|
|
// Check immediately
|
|
updateUserProfile();
|
|
|
|
// Then check every 2 seconds for profile updates
|
|
profileInterval = setInterval(updateUserProfile, 2000);
|
|
|
|
// Stop checking after 15 seconds (profile should be loaded by then)
|
|
setTimeout(stopProfilePolling, 15000);
|
|
}
|
|
|
|
function stopProfilePolling() {
|
|
if (profileInterval) {
|
|
clearInterval(profileInterval);
|
|
profileInterval = null;
|
|
}
|
|
}
|
|
|
|
function updateUserProfile() {
|
|
try {
|
|
// Try to get user info from localStorage (current user)
|
|
const userInfo = JSON.parse(localStorage.getItem('__nostrlogin_nip46') || 'null');
|
|
if (userInfo) {
|
|
updateUserDisplay(userInfo);
|
|
}
|
|
} catch (error) {
|
|
// Silently handle errors to avoid interference
|
|
}
|
|
}
|
|
|
|
function showUserInfo() {
|
|
const userInfoDiv = document.getElementById('user-info');
|
|
userInfoDiv.style.display = 'block';
|
|
updateUserProfile();
|
|
}
|
|
|
|
function updateUserDisplay(userInfo) {
|
|
const userNameDiv = document.getElementById('user-name');
|
|
const userPicture = document.getElementById('user-picture');
|
|
|
|
// Display name with proper fallback hierarchy
|
|
const displayName = userInfo.name ||
|
|
(userInfo.nip05 && userInfo.nip05.split('@')[0]) ||
|
|
(userInfo.pubkey && userInfo.pubkey.substring(0, 16) + '...') ||
|
|
'Unknown';
|
|
|
|
userNameDiv.textContent = displayName;
|
|
|
|
// Update profile picture if available
|
|
if (userInfo.picture) {
|
|
userPicture.src = userInfo.picture;
|
|
userPicture.style.display = 'block';
|
|
userPicture.style.width = '200px';
|
|
// userPicture.style.height = '200px';
|
|
}
|
|
}
|
|
|
|
function hideUserInfo() {
|
|
const userInfoDiv = document.getElementById('user-info');
|
|
const userNameDiv = document.getElementById('user-name');
|
|
const userPicture = document.getElementById('user-picture');
|
|
|
|
userInfoDiv.style.display = 'none';
|
|
userNameDiv.textContent = '';
|
|
userPicture.src = '';
|
|
userPicture.style.display = 'none';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|