laantungir/nostr_login_lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

button example

Browse Source
This commit is contained in:
Your Name
2025-09-14 18:51:27 -04:00
parent 9f0b0638e5
commit bac621bbaa
16 changed files with 1155 additions and 1460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
examples/login-and-profile.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,249 +10,33 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #ffffff;
min-height: 100vh;
color: white;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
background: linear-gradient(45deg, #fff, #007bff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.status {
padding: 15px;
border-radius: 10px;
margin: 15px 0;
font-weight: 500;
}
.status.logged-out {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.status.logged-in {
background: rgba(76, 175, 80, 0.2);
border: 1px solid rgba(76, 175, 80, 0.5);
}
.status.loading {
background: rgba(255, 193, 7, 0.2);
border: 1px solid rgba(255, 193, 7, 0.5);
}
.button {
background: linear-gradient(45deg, #007bff, #0056b3);
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
margin: 10px 5px;
text-decoration: none;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}
.button.secondary {
background: linear-gradient(45deg, #6c757d, #495057);
}
.button.secondary:hover {
box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}
.button.danger {
background: linear-gradient(45deg, #dc3545, #c82333);
}
.button.danger:hover {
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}
.profile-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
margin: 20px 0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.profile-header {
text-align: center;
margin-bottom: 20px;
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 15px;
display: block;
background: rgba(255, 255, 255, 0.2);
}
.profile-name {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.profile-about {
font-style: italic;
opacity: 0.8;
margin-bottom: 15px;
}
.profile-pubkey {
font-family: 'Courier New', monospace;
font-size: 14px;
background: rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 5px;
word-break: break-all;
}
.console-output {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
max-height: 300px;
overflow-y: auto;
font-family: 'Courier New', monospace;
font-size: 14px;
}
.console-entry {
margin: 5px 0;
}
.console-timestamp {
color: #ccc;
margin-right: 10px;
}
.info-section {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
.info-section h3 {
margin-top: 0;
color: #007bff;
}
.methods-list {
list-style: none;
padding: 0;
}
.methods-list li {
background: rgba(255, 255, 255, 0.1);
margin: 10px 0;
padding: 10px 15px;
border-radius: 8px;
border-left: 4px solid #007bff;
color: #000000;
}
</style>
</head>
<body>
<div class="container">
<h1>🔐 NOSTR_LOGIN_LITE - All Login Methods Test</h1>
<div id="status" class="status logged-out">
⏳ Initializing NOSTR_LOGIN_LITE...
</div>
<div id="login-section">
<button id="launch-modal" class="button">🚀 Launch Login Modal</button>
<p style="font-size: 14px; opacity: 0.8; margin-top: 10px;">
Click to open the NOSTR_LOGIN_LITE modal and test all available login methods:
</p>
<div class="info-section">
<h3>Available Login Methods</h3>
<ul class="methods-list">
<li><strong>Browser Extension:</strong> Alby, nos2x, etc. (if installed)</li>
<li><strong>Local Key:</strong> Generate new keys or import existing private key/nsec</li>
<li><strong>Read Only:</strong> Access public content without authentication</li>
<li><strong>Nostr Connect (NIP-46):</strong> Connect to remote signing services</li>
<li><strong>DM/OTP:</strong> Secure local accounts with one-time passwords</li>
</ul>
</div>
</div>
<div id="profile-section" style="display: none;">
<div class="profile-card">
<div class="profile-header">
<img id="profile-picture" class="profile-avatar" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iNDAiIGZpbGw9IiNmNmY2ZjYiLz4KPHBhdGggZD0iTTQwIDQ1QzQ1IDQ1IDUwIDQyIDUwIDQwUzQ1IDQxIDQwIDQ1WiIgc3Ryb2tlPSIjYmJkIiBzdHJva2Utd2lkdGg9IjIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8Y2lyY2xlIGN4PSIzNSIgY3k9IjM1IiByPSIyIiBmaWxsPSIjYmJkIi8+CjxjaXJjbGUgY3g9IjQ1IiBjeT0iMzUiIHI9IjIiIGZpbGw9IiNiYmQiLz4KPGRlZnM+Cj08L2RlZnM+Cjwvc3ZnPgo=" alt="Profile Picture">
<div id="profile-name" class="profile-name">Loading...</div>
<div id="profile-about" class="profile-about"></div>
</div>
<div>
<strong>Public Key:</strong>
<div id="profile-pubkey" class="profile-pubkey"></div>
</div>
</div>
<button id="refresh-profile" class="button secondary">🔄 Refresh Profile</button>
<button id="logout" class="button danger">🚪 Logout</button>
</div>
<div class="console-output" id="console-display">
<div class="console-entry">
<span class="console-timestamp">[Console]</span> Ready for testing
</div>
</div>
<div id="login-section">
<!-- Login UI if needed -->
</div>
<div id="profile-section">
<img id="profile-picture">
<div id="profile-pubkey"></div>
<div id="profile-name"></div>
<div id="profile-about"></div>
</div>
<!-- Load the official nostr-tools bundle first -->
<script src="../lite/nostr.bundle.js"></script>
<!-- Load NOSTR_LOGIN_LITE main library (now includes NIP-46 extension) -->
<script src="../lite/nostr-lite.js"></script>
<script>
// Console logging helper
function log(level, message) {
const consoleDiv = document.getElementById('console-display');
const entry = document.createElement('div');
entry.className = 'console-entry';
const timestamp = new Date().toLocaleTimeString();
const prefix = level === 'ERROR' ? '[ERROR]' :
level === 'SUCCESS' ? '[SUCCESS]' :
level === 'WARNING' ? '[WARNING]' : '[INFO]';
entry.innerHTML = `<span class="console-timestamp">[${timestamp}] ${prefix}</span> ${message}`;
consoleDiv.appendChild(entry);
consoleDiv.scrollTop = consoleDiv.scrollHeight;
}
// Global variables
let nlLite = null;
@@ -260,11 +45,11 @@
// Initialize NOSTR_LOGIN_LITE
async function initializeApp() {
log('INFO', 'Initializing NOSTR_LOGIN_LITE...');
// console.log('INFO', 'Initializing NOSTR_LOGIN_LITE...');
try {
await window.NOSTR_LOGIN_LITE.init({
theme: 'dark',
theme: 'default',
darkMode: false,
relays: [relayUrl, 'wss://relay.damus.io'],
methods: {
@@ -300,137 +85,67 @@
});
nlLite = window.NOSTR_LOGIN_LITE;
log('SUCCESS', 'NOSTR_LOGIN_LITE initialized successfully');
document.getElementById('status').innerHTML = '✅ Ready - Click "Launch Login Modal" to test all login methods';
document.getElementById('status').className = 'status logged-in';
console.log('SUCCESS', 'NOSTR_LOGIN_LITE initialized successfully');
window.addEventListener('nlMethodSelected', handleAuthEvent);
} catch (error) {
log('ERROR', `Initialization failed: ${error.message}`);
document.getElementById('status').innerHTML = '❌ Failed to initialize NOSTR_LOGIN_LITE';
document.getElementById('status').className = 'status logged-out';
console.log('ERROR', `Initialization failed: ${error.message}`);
}
}
// Launch the login modal
async function launchLoginModal() {
log('INFO', 'Launching NOSTR_LOGIN_LITE modal...');
document.getElementById('status').innerHTML = '🔄 Opening login modal...';
document.getElementById('status').className = 'status loading';
try {
// Launch the modal
await nlLite.launch('login');
log('SUCCESS', 'Login modal launched successfully');
} catch (error) {
log('ERROR', `Failed to launch modal: ${error.message}`);
document.getElementById('status').innerHTML = '❌ Failed to launch modal';
document.getElementById('status').className = 'status logged-out';
}
}
// Handle authentication events
function handleAuthEvent(event) {
const { type, pubkey, method, error } = event.detail;
log('INFO', `Auth event received: type=${type}, method=${method}`);
if (type === 'login' && pubkey) {
const {pubkey, method, error } = event.detail;
console.log('INFO', `Auth event received: method=${method}`);
if (method && pubkey) {
userPubkey = pubkey;
log('SUCCESS', `Login successful! Method: ${method}, Pubkey: ${pubkey}`);
document.getElementById('status').innerHTML = `✅ Logged in via ${method}!`;
document.getElementById('status').className = 'status logged-in';
// Show profile section
document.getElementById('login-section').style.display = 'none';
document.getElementById('profile-section').style.display = 'block';
// Load profile
console.log('SUCCESS', `Login successful! Method: ${method}, Pubkey: ${pubkey}`);
loadUserProfile();
} else if (type === 'logout') {
log('INFO', 'User logged out');
userPubkey = null;
document.getElementById('status').innerHTML = '✅ Ready - Click "Launch Login Modal" to test all login methods';
document.getElementById('status').className = 'status logged-in';
// Show login section
document.getElementById('login-section').style.display = 'block';
document.getElementById('profile-section').style.display = 'none';
} else if (error) {
log('ERROR', `Authentication error: ${error}`);
document.getElementById('status').innerHTML = '❌ Authentication failed';
document.getElementById('status').className = 'status logged-out';
console.log('ERROR', `Authentication error: ${error}`);
}
}
// Load user profile
// Load user profile using nostr-tools pool
async function loadUserProfile() {
if (!userPubkey) return;
log('INFO', `Loading profile for: ${userPubkey}`);
console.log('INFO', `Loading profile for: ${userPubkey}`);
document.getElementById('profile-name').textContent = 'Loading profile...';
document.getElementById('profile-pubkey').textContent = userPubkey;
try {
// Simple WebSocket connection to get profile
const ws = new WebSocket(relayUrl);
// Create a SimplePool instance
const pool = new window.NostrTools.SimplePool();
const relays = [relayUrl, 'wss://relay.laantungir.net'];
// Get profile event (kind 0) for the user using querySync
const events = await pool.querySync(relays, {
kinds: [0],
authors: [userPubkey],
limit: 1
});
ws.onopen = () => {
log('SUCCESS', 'WebSocket connected, requesting profile...');
const req = JSON.stringify([
'REQ',
'profile',
{
kinds: [0],
authors: [userPubkey],
limit: 1
}
]);
ws.send(req);
};
pool.close(relays); // Clean up connections
ws.onmessage = (event) => {
try {
const message = JSON.parse(event.data);
const [type, subscriptionId, eventData] = message;
if (type === 'EVENT' && eventData && eventData.kind === 0) {
log('SUCCESS', 'Profile event received');
const profile = JSON.parse(eventData.content);
displayProfile(profile);
ws.close();
} else if (type === 'EOSE') {
log('INFO', 'End of subscription');
ws.close();
}
} catch (parseError) {
log('ERROR', `Failed to parse WebSocket message: ${parseError.message}`);
}
};
ws.onerror = (error) => {
log('ERROR', `WebSocket error: ${error.message || 'Connection failed'}`);
document.getElementById('profile-name').textContent = 'Error loading profile';
};
// Timeout after 5 seconds
setTimeout(() => {
if (ws.readyState !== WebSocket.CLOSED) {
ws.close();
if (document.getElementById('profile-name').textContent === 'Loading profile...') {
document.getElementById('profile-name').textContent = 'Profile timeout';
document.getElementById('profile-about').textContent = 'Could not load profile from relay.';
log('WARNING', 'Profile request timed out');
}
}
}, 5000);
if (events.length > 0) {
console.log('SUCCESS', 'Profile event received');
const profile = JSON.parse(events[0].content);
displayProfile(profile);
} else {
console.log('INFO', 'No profile found');
document.getElementById('profile-name').textContent = 'No profile found';
document.getElementById('profile-about').textContent = 'User has not set up a profile yet.';
}
} catch (error) {
log('ERROR', `Profile loading failed: ${error.message}`);
console.log('ERROR', `Profile loading failed: ${error.message}`);
document.getElementById('profile-name').textContent = 'Error loading profile';
document.getElementById('profile-about').textContent = error.message;
}
@@ -449,33 +164,26 @@
document.getElementById('profile-picture').src = picture;
}
log('SUCCESS', `Profile displayed: ${name}`);
console.log('SUCCESS', `Profile displayed: ${name}`);
}
// Logout function
async function logout() {
log('INFO', 'Logging out...');
console.log('INFO', 'Logging out...');
try {
await nlLite.logout();
log('SUCCESS', 'Logged out successfully');
console.log('SUCCESS', 'Logged out successfully');
} catch (error) {
log('ERROR', `Logout failed: ${error.message}`);
console.log('ERROR', `Logout failed: ${error.message}`);
}
}
// Set up event listeners
document.addEventListener('DOMContentLoaded', () => {
// Button event listeners
document.getElementById('launch-modal').addEventListener('click', launchLoginModal);
document.getElementById('refresh-profile').addEventListener('click', loadUserProfile);
document.getElementById('logout').addEventListener('click', logout);
// Listen for authentication events
window.addEventListener('nlAuth', handleAuthEvent);
// Initialize the app
setTimeout(initializeApp, 100);
});
</script>
</body>
</html>