411 lines
13 KiB
HTML
411 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🔐 NOSTR_LOGIN_LITE - Full Modal Login Demo</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
color: white;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
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;
|
|
}
|
|
|
|
.demo-section {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.demo-section h2 {
|
|
margin-top: 0;
|
|
font-size: 24px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.status {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status.success { background: rgba(76, 175, 80, 0.2); color: #81c784; }
|
|
.status.error { background: rgba(244, 67, 54, 0.2); color: #ef5350; }
|
|
.status.warning { background: rgba(255, 193, 7, 0.2); color: #ffd54f; }
|
|
.status.info { background: rgba(33, 150, 243, 0.2); color: #64b5f6; }
|
|
|
|
.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;
|
|
}
|
|
|
|
.feature-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.feature-item {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-item .icon {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.feature-item h3 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.feature-item p {
|
|
margin: 0;
|
|
opacity: 0.8;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔐 NOSTR_LOGIN_LITE Full Modal Login Demo</h1>
|
|
|
|
<div class="demo-section">
|
|
<h2>📚 Available Login Methods</h2>
|
|
<p>This demo showcases all login methods provided by NOSTR_LOGIN_LITE:</p>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<div class="icon">📱</div>
|
|
<h3>Extension Login</h3>
|
|
<p>Use browser extensions like Alby, nos2x, or other Nostr-compatible extensions</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="icon">💾</div>
|
|
<h3>Local Account</h3>
|
|
<p>Create and manage local Nostr keypairs stored in browser storage</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="icon">👁️</div>
|
|
<h3>Read-Only Account</h3>
|
|
<p>Access public content without authentication (limited functionality)</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="icon">🔗</div>
|
|
<h3>NIP-46 Remote</h3>
|
|
<p>Connect to remote signers for secure key management</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="icon">🔐</div>
|
|
<h3>OTP Backup</h3>
|
|
<p>Secure local accounts with time-based one-time passwords</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Library Status -->
|
|
<div class="demo-section">
|
|
<h2>⚙️ Library Status</h2>
|
|
<div id="dep-status" class="status info">Loading nostr-tools...</div>
|
|
<div id="lib-status" class="status info">Loading NOSTR_LOGIN_LITE...</div>
|
|
</div>
|
|
|
|
<!-- Modal Authentication -->
|
|
<div class="demo-section">
|
|
<h2>🎯 Launch Full Login Modal</h2>
|
|
<p>Click the button below to launch the complete authentication modal with all available login options:</p>
|
|
<button id="launch-auth" class="button">🚀 Launch Authentication Modal</button>
|
|
<button onclick="location.reload()" class="button secondary">🔄 Reload Page</button>
|
|
<div id="auth-status" class="status" style="margin-top: 15px;">Ready to authenticate...</div>
|
|
<div style="font-size: 14px; opacity: 0.8; margin-top: 10px;">
|
|
The modal will show all available login methods based on your browser setup and library configuration.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Info Display (shown after login) -->
|
|
<div id="user-info" class="demo-section" style="display: none;">
|
|
<h2>👤 User Information</h2>
|
|
<div id="user-details">
|
|
<strong>Public Key:</strong> <span id="user-pubkey">Loading...</span><br>
|
|
<strong>Login Method:</strong> <span id="user-method">Loading...</span><br>
|
|
<strong>Account Type:</strong> <span id="user-type">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Console Log -->
|
|
<div class="console-output" id="console-display">
|
|
<div class="console-entry">
|
|
<span class="console-timestamp">[Demo]</span> Modal Login Demo initialized
|
|
</div>
|
|
</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 addConsoleEntry(message, type = 'info') {
|
|
const consoleDiv = document.getElementById('console-display');
|
|
const entry = document.createElement('div');
|
|
entry.className = 'console-entry';
|
|
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const prefix = type === 'error' ? '[ERROR]' :
|
|
type === 'success' ? '[SUCCESS]' :
|
|
type === 'warning' ? '[WARNING]' : '[INFO]';
|
|
|
|
entry.innerHTML = `<span class="console-timestamp">[${timestamp}] ${prefix}</span> ${message}`;
|
|
consoleDiv.appendChild(entry);
|
|
consoleDiv.scrollTop = consoleDiv.scrollHeight;
|
|
}
|
|
|
|
// Global state
|
|
let authInitialized = false;
|
|
|
|
// Event listeners for authentication events
|
|
window.addEventListener('nlAuth', (event) => {
|
|
addConsoleEntry(`Authentication event: ${event.detail.type}`, 'success');
|
|
if (event.detail.pubkey) {
|
|
addConsoleEntry(`User authenticated: ${event.detail.pubkey}`, 'success');
|
|
displayUserInfo(event.detail);
|
|
}
|
|
});
|
|
|
|
window.addEventListener('nlLogout', (event) => {
|
|
addConsoleEntry('User logged out', 'warning');
|
|
hideUserInfo();
|
|
});
|
|
|
|
window.addEventListener('nlAuthUrl', (event) => {
|
|
addConsoleEntry(`Auth URL generated: ${event.detail.url}`, 'info');
|
|
});
|
|
|
|
window.addEventListener('nlError', (event) => {
|
|
addConsoleEntry(`Authentication error: ${event.detail.message}`, 'error');
|
|
});
|
|
|
|
// Library load checking with retry
|
|
function checkLibraryLoaded() {
|
|
let attempts = 0;
|
|
const maxAttempts = 50; // 5 seconds
|
|
|
|
const check = () => {
|
|
if (window.NostrTools) {
|
|
document.getElementById('dep-status').textContent = '✓ nostr-tools loaded successfully!';
|
|
document.getElementById('dep-status').className = 'status success';
|
|
}
|
|
|
|
if (window.NOSTR_LOGIN_LITE) {
|
|
document.getElementById('lib-status').textContent = '✓ NOSTR_LOGIN_LITE loaded successfully!';
|
|
document.getElementById('lib-status').className = 'status success';
|
|
enableModalLaunch();
|
|
} else {
|
|
attempts++;
|
|
if (attempts < maxAttempts) {
|
|
setTimeout(check, 100);
|
|
} else {
|
|
document.getElementById('lib-status').textContent = '✗ Failed to load NOSTR_LOGIN_LITE';
|
|
document.getElementById('lib-status').className = 'status error';
|
|
addConsoleEntry('Bundle might have JavaScript errors - check browser console', 'error');
|
|
}
|
|
}
|
|
};
|
|
|
|
check();
|
|
}
|
|
|
|
// Enable the modal launch button
|
|
function enableModalLaunch() {
|
|
const launchBtn = document.getElementById('launch-auth');
|
|
launchBtn.disabled = false;
|
|
launchBtn.textContent = '🚀 Launch Authentication Modal';
|
|
addConsoleEntry('Full modal authentication ready', 'success');
|
|
}
|
|
|
|
// Launch authentication modal
|
|
async function launchAuthModal() {
|
|
const launchBtn = document.getElementById('launch-auth');
|
|
const status = document.getElementById('auth-status');
|
|
|
|
try {
|
|
status.textContent = '🔄 Initializing authentication...';
|
|
status.className = 'status warning';
|
|
launchBtn.disabled = true;
|
|
|
|
// Initialize NOSTR_LOGIN_LITE with all methods enabled
|
|
const options = {
|
|
theme: 'dark',
|
|
darkMode: false,
|
|
relays: ['wss://relay.damus.io', 'wss://relay.nostr.band', 'wss://nos.lol'],
|
|
methods: {
|
|
extension: true,
|
|
local: true,
|
|
readonly: true,
|
|
remote: true,
|
|
otp: true
|
|
},
|
|
debug: true
|
|
};
|
|
|
|
addConsoleEntry('Initializing NOSTR_LOGIN_LITE with full configuration', 'info');
|
|
|
|
if (!authInitialized) {
|
|
await window.NOSTR_LOGIN_LITE.init(options);
|
|
authInitialized = true;
|
|
}
|
|
|
|
addConsoleEntry('Launching full authentication modal', 'info');
|
|
status.textContent = '🎨 Opening authentication modal...';
|
|
|
|
// Launch the modal - this will show all available methods
|
|
window.NOSTR_LOGIN_LITE.launch('login');
|
|
|
|
status.textContent = '✅ Authentication modal launched!';
|
|
status.className = 'status success';
|
|
|
|
addConsoleEntry('Modal launched successfully - all login methods available', 'success');
|
|
|
|
// Re-enable button after a delay
|
|
setTimeout(() => {
|
|
launchBtn.disabled = false;
|
|
launchBtn.textContent = '🔄 Launch Again';
|
|
status.textContent = 'Ready to launch modal again...';
|
|
status.className = 'status info';
|
|
}, 3000);
|
|
|
|
} catch (error) {
|
|
addConsoleEntry(`Modal launch failed: ${error.message}`, 'error');
|
|
status.textContent = '❌ Failed to launch modal';
|
|
status.className = 'status error';
|
|
launchBtn.disabled = false;
|
|
launchBtn.textContent = '🚀 Try Again';
|
|
}
|
|
}
|
|
|
|
// Display user information after successful authentication
|
|
function displayUserInfo(details) {
|
|
document.getElementById('user-info').style.display = 'block';
|
|
document.getElementById('user-pubkey').textContent = details.pubkey || 'Unknown';
|
|
document.getElementById('user-method').textContent = details.method || 'Unknown';
|
|
document.getElementById('user-type').textContent = getAccountType(details.method);
|
|
|
|
const status = document.getElementById('auth-status');
|
|
status.textContent = '✅ Successfully authenticated!';
|
|
status.className = 'status success';
|
|
}
|
|
|
|
// Hide user info on logout
|
|
function hideUserInfo() {
|
|
document.getElementById('user-info').style.display = 'none';
|
|
|
|
const status = document.getElementById('auth-status');
|
|
status.textContent = '👋 User logged out';
|
|
status.className = 'status warning';
|
|
}
|
|
|
|
// Helper function to get readable account type
|
|
function getAccountType(method) {
|
|
const types = {
|
|
extension: 'Browser Extension',
|
|
local: 'Local Account',
|
|
readonly: 'Read-Only Account',
|
|
remote: 'NIP-46 Remote',
|
|
otp: 'OTP Secured Local'
|
|
};
|
|
return types[method] || 'Unknown';
|
|
}
|
|
|
|
// Initialize everything when DOM loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
addConsoleEntry('Demo page loaded, initializing libraries...', 'info');
|
|
|
|
// Check if libraries are loaded
|
|
checkLibraryLoaded();
|
|
|
|
// Set up the modal launch button
|
|
document.getElementById('launch-auth').addEventListener('click', launchAuthModal);
|
|
});
|
|
|
|
// Debug logging
|
|
console.log('NOSTR_LOGIN_LITE Modal Demo loaded');
|
|
console.log('Available login methods will be shown in modal');
|
|
</script>
|
|
</body>
|
|
</html> |