344 lines
14 KiB
HTML
344 lines
14 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 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>
|