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

first

Browse Source
This commit is contained in:
Your Name
2025-09-09 09:32:09 -04:00
commit 37fb89c0a9
135 changed files with 36437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
examples/test_options.html Normal file
View File

@@ -0,0 +1,343 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nostr Login Interactive Test</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.container { max-width: 800px; margin: 0 auto; }
.controls { background: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.control-group { margin-bottom: 15px; }
.control-group label { display: inline-block; width: 150px; font-weight: bold; }
.control-group input, .control-group select { margin-left: 10px; padding: 5px; }
.checkbox-group { display: flex; gap: 10px; flex-wrap: wrap; }
.checkbox-group label { width: auto; margin-right: 15px; }
.current-config { background: #e8f4fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
.login-area { background: #fff; border: 2px solid #ddd; padding: 20px; border-radius: 8px; }
button { padding: 10px 15px; margin: 5px; cursor: pointer; }
.apply-btn { background: #007cba; color: white; border: none; border-radius: 5px; }
.reset-btn { background: #999; color: white; border: none; border-radius: 5px; }
.note { background: #fff3cd; padding: 10px; border-radius: 5px; margin-top: 10px; font-size: 14px; }
</style>
</head>
<body>
<div class="container">
<h1>Nostr Login Interactive Test</h1>
<!-- Controls Section -->
<div class="controls">
<h3>Configuration Options</h3>
<div class="control-group">
<label>Theme:</label>
<select id="themeSelect">
<option value="default">Default</option>
<option value="ocean">Ocean</option>
<option value="lemonade">Lemonade</option>
<option value="purple">Purple</option>
<option value="laan">Laan</option>
</select>
</div>
<div class="control-group">
<label>Dark Mode:</label>
<input type="checkbox" id="darkModeCheck">
</div>
<div class="control-group">
<label>Start Screen:</label>
<select id="startScreenSelect">
<option value="">Default</option>
<option value="welcome">Welcome</option>
<option value="welcome-login">Welcome Login</option>
<option value="welcome-signup">Welcome Signup</option>
<option value="signup">Signup</option>
<option value="local-signup">Local Signup</option>
<option value="login">Login</option>
<option value="connect">Connect</option>
<option value="login-bunker-url">Login Bunker URL</option>
<option value="login-read-only">Login Read Only</option>
<option value="switch-account">Switch Account</option>
</select>
</div>
<div class="control-group">
<label>Auth Methods:</label>
<div class="checkbox-group">
<label><input type="checkbox" value="connect" checked> Connect (NIP-46)</label>
<label><input type="checkbox" value="extension" checked> Extension</label>
<label><input type="checkbox" value="readOnly" checked> Read Only</label>
<label><input type="checkbox" value="local" checked> Local</label>
</div>
</div>
<div class="control-group">
<label>No Banner:</label>
<input type="checkbox" id="noBannerCheck">
</div>
<div class="control-group">
<label>Bunkers:</label>
<input type="text" id="bunkersInput" placeholder="e.g., nsec.app,highlighter.com" style="width: 300px;">
</div>
<div class="control-group">
<label>Permissions:</label>
<input type="text" id="permsInput" placeholder="e.g., sign_event:1,nip04_encrypt" style="width: 300px;">
</div>
<div class="control-group">
<label>Title:</label>
<input type="text" id="titleInput" placeholder="Custom welcome title" style="width: 300px;">
</div>
<div class="control-group">
<label>Description:</label>
<input type="text" id="descriptionInput" placeholder="Custom welcome description" style="width: 300px;">
</div>
<button class="apply-btn" onclick="applyConfig()">Apply Configuration</button>
<button class="reset-btn" onclick="resetConfig()">Reset to Defaults</button>
<div class="note">
<strong>Note:</strong> Configuration changes will be applied by reloading the page with new settings.
</div>
</div>
<!-- Current Configuration Display -->
<div class="current-config">
<h4>Current Configuration:</h4>
<pre id="configDisplay"></pre>
</div>
<!-- Login/User Section -->
<div class="login-area">
<!-- Login Section -->
<div id="loginSection">
<h3>Test Login</h3>
<button id="loginBtn">Login with Nostr</button>
<button onclick="launchSpecificScreen()">Launch with Start Screen</button>
</div>
<!-- User Info Section (hidden initially) -->
<div id="userSection" style="display: none;">
<h3>Welcome!</h3>
<p><strong>Your Public Key (hex):</strong></p>
<div id="pubkeyHex" style="word-break: break-all; background: #f0f0f0; padding: 10px; border-radius: 4px;"></div>
<br>
<button id="logoutBtn">Logout</button>
</div>
</div>
</div>
<!-- Dynamic script loading with configuration -->
<script>
let currentConfig = {};
let scriptLoaded = false;
// Load nostr-login with current configuration
function loadNostrLogin() {
if (scriptLoaded) return;
const script = document.createElement('script');
script.src = '../packages/auth/dist/unpkg.js';
// Apply configuration as data attributes
const config = getStoredConfig();
if (config.theme) script.setAttribute('data-theme', config.theme);
if (config.darkMode !== undefined) script.setAttribute('data-dark-mode', config.darkMode);
if (config.startScreen) script.setAttribute('data-start-screen', config.startScreen);
if (config.noBanner !== undefined) script.setAttribute('data-no-banner', config.noBanner);
if (config.bunkers) script.setAttribute('data-bunkers', config.bunkers);
if (config.perms) script.setAttribute('data-perms', config.perms);
if (config.title) script.setAttribute('data-title', config.title);
if (config.description) script.setAttribute('data-description', config.description);
if (config.methods && config.methods.length > 0) {
script.setAttribute('data-methods', config.methods.join(','));
}
document.head.appendChild(script);
scriptLoaded = true;
// Wait for script to load, then set up event listeners
script.onload = () => {
setupEventListeners();
};
}
// Get stored configuration from localStorage
function getStoredConfig() {
try {
return JSON.parse(localStorage.getItem('nostrLoginConfig') || '{}');
} catch {
return {};
}
}
// Store configuration in localStorage
function storeConfig(config) {
localStorage.setItem('nostrLoginConfig', JSON.stringify(config));
}
// Listen for nostr-login auth events
function setupEventListeners() {
document.addEventListener('nlAuth', async (e) => {
console.log('nlAuth event:', e.detail);
if (e.detail.type === 'login' || e.detail.type === 'signup') {
await showUserInfo();
} else if (e.detail.type === 'logout') {
showLoginSection();
}
});
}
// Get and display user info
async function showUserInfo() {
try {
const pubkey = await window.nostr.getPublicKey();
console.log('Got pubkey:', pubkey);
// Display pubkey
document.getElementById('pubkeyHex').textContent = pubkey;
// Hide login section, show user section
document.getElementById('loginSection').style.display = 'none';
document.getElementById('userSection').style.display = 'block';
} catch (error) {
console.error('Failed to get pubkey:', error);
}
}
// Show login section
function showLoginSection() {
document.getElementById('loginSection').style.display = 'block';
document.getElementById('userSection').style.display = 'none';
document.getElementById('pubkeyHex').textContent = '';
}
// Apply configuration
function applyConfig() {
// Collect all settings
const config = {
theme: document.getElementById('themeSelect').value,
darkMode: document.getElementById('darkModeCheck').checked,
startScreen: document.getElementById('startScreenSelect').value,
noBanner: document.getElementById('noBannerCheck').checked,
bunkers: document.getElementById('bunkersInput').value,
perms: document.getElementById('permsInput').value,
title: document.getElementById('titleInput').value,
description: document.getElementById('descriptionInput').value,
methods: Array.from(document.querySelectorAll('input[type="checkbox"][value]'))
.filter(cb => cb.checked)
.map(cb => cb.value)
};
// Remove empty values
Object.keys(config).forEach(key => {
if (config[key] === '' || (Array.isArray(config[key]) && config[key].length === 0)) {
delete config[key];
}
});
currentConfig = config;
storeConfig(config);
updateConfigDisplay();
console.log('Applied config:', config);
// Reload page to apply new configuration
window.location.reload();
}
// Reset configuration
function resetConfig() {
document.getElementById('themeSelect').value = 'default';
document.getElementById('darkModeCheck').checked = false;
document.getElementById('startScreenSelect').value = '';
document.getElementById('noBannerCheck').checked = false;
document.getElementById('bunkersInput').value = '';
document.getElementById('permsInput').value = '';
document.getElementById('titleInput').value = '';
document.getElementById('descriptionInput').value = '';
// Reset auth methods to all checked
document.querySelectorAll('input[type="checkbox"][value]').forEach(cb => cb.checked = true);
currentConfig = {};
localStorage.removeItem('nostrLoginConfig');
updateConfigDisplay();
}
// Update config display
function updateConfigDisplay() {
document.getElementById('configDisplay').textContent = JSON.stringify(currentConfig, null, 2);
}
// Launch with specific screen
function launchSpecificScreen() {
const startScreen = document.getElementById('startScreenSelect').value || 'welcome';
document.dispatchEvent(new CustomEvent('nlLaunch', { detail: startScreen }));
}
// Load configuration from storage and update UI
function loadConfigIntoUI() {
const config = getStoredConfig();
currentConfig = config;
// Set default to laan theme for testing
if (config.theme) document.getElementById('themeSelect').value = config.theme;
else document.getElementById('themeSelect').value = 'laan';
if (config.darkMode !== undefined) document.getElementById('darkModeCheck').checked = config.darkMode;
if (config.startScreen) document.getElementById('startScreenSelect').value = config.startScreen;
if (config.noBanner !== undefined) document.getElementById('noBannerCheck').checked = config.noBanner;
if (config.bunkers) document.getElementById('bunkersInput').value = config.bunkers;
if (config.perms) document.getElementById('permsInput').value = config.perms;
if (config.title) document.getElementById('titleInput').value = config.title;
if (config.description) document.getElementById('descriptionInput').value = config.description;
// Load auth methods
document.querySelectorAll('input[type="checkbox"][value]').forEach(cb => {
cb.checked = !config.methods || config.methods.includes(cb.value);
});
updateConfigDisplay();
}
// Handle login button click
document.addEventListener('DOMContentLoaded', () => {
// Load configuration into UI
loadConfigIntoUI();
// Load nostr-login with current config
loadNostrLogin();
document.getElementById('loginBtn').addEventListener('click', () => {
// Trigger nostr-login modal
document.dispatchEvent(new CustomEvent('nlLaunch', { detail: 'welcome' }));
});
// Handle logout button click
document.getElementById('logoutBtn').addEventListener('click', () => {
// Trigger logout
document.dispatchEvent(new Event('nlLogout'));
});
// Update config display when inputs change
document.querySelectorAll('input, select').forEach(input => {
input.addEventListener('change', () => {
// Auto-apply dark mode for immediate feedback
if (input.id === 'darkModeCheck') {
document.dispatchEvent(new CustomEvent('nlDarkMode', { detail: input.checked }));
}
});
});
});
</script>
</body>
</html>