Still don't have dm working because I can't decrypt at primal.
This commit is contained in:
Your Name
411
examples/modal-login-demo.html
Normal file
411
examples/modal-login-demo.html
Normal file
@@ -0,0 +1,411 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user