laantungir/c-relay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 7 Wiki Activity

v0.3.17 - Embedded login button

Browse Source
This commit is contained in:
Your Name
2025-09-30 06:47:09 -04:00
parent 6dac231040
commit c23d81b740
2 changed files with 395 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
api/button.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded NOSTR_LOGIN_LITE</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 40px;
background: white;
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
}
.container {
max-width: 400px;
width: 100%;
}
#login-button {
background: #0066cc;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
text-align: center;
transition: background 0.2s;
}
#login-button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<div id="login-button">Login</div>
</div>
<script src="../lite/nostr.bundle.js"></script>
<script src="../lite/nostr-lite.js"></script>
<script>
let isAuthenticated = false;
let currentUser = null;
document.addEventListener('DOMContentLoaded', async () => {
await window.NOSTR_LOGIN_LITE.init({
methods: {
extension: true,
local: true,
readonly: true,
connect: true,
remote: true,
otp: true
},
floatingTab: {
enabled: false
}
});
// Listen for authentication events
window.addEventListener('nlMethodSelected', handleAuthEvent);
window.addEventListener('nlLogout', handleLogoutEvent);
// Check for existing authentication state
checkAuthState();
// Initialize button
updateButtonState();
});
function handleAuthEvent(event) {
const { pubkey, method } = event.detail;
console.log(`Authenticated with ${method}, pubkey: ${pubkey}`);
isAuthenticated = true;
currentUser = event.detail;
updateButtonState();
}
function handleLogoutEvent() {
console.log('Logout event received');
isAuthenticated = false;
currentUser = null;
updateButtonState();
}
function checkAuthState() {
// Check if user is already authenticated (from persistent storage)
try {
// Try to get public key - this will work if already authenticated
window.nostr.getPublicKey().then(pubkey => {
console.log('Found existing authentication, pubkey:', pubkey);
isAuthenticated = true;
currentUser = { pubkey, method: 'persistent' };
updateButtonState();
}).catch(error => {
console.log('No existing authentication found:', error.message);
// User is not authenticated, button stays in login state
});
} catch (error) {
console.log('No existing authentication found');
// User is not authenticated, button stays in login state
}
}
function updateButtonState() {
const button = document.getElementById('login-button');
if (isAuthenticated) {
button.textContent = 'Logout';
button.onclick = () => window.NOSTR_LOGIN_LITE.logout();
button.style.background = '#dc3545'; // Red for logout
} else {
button.textContent = 'Login';
button.onclick = () => window.NOSTR_LOGIN_LITE.launch('login');
button.style.background = '#0066cc'; // Blue for login
}
}
</script>
</body>
</html>

355
api/index.html
View File

@@ -243,6 +243,53 @@
background-color: var(--secondary-color);
}
.user-info-container {
display: flex;
align-items: flex-start;
gap: 20px;
}
.user-details {
flex: 1;
}
.login-logout-btn {
width: auto;
min-width: 120px;
padding: 12px 16px;
background: var(--secondary-color);
color: var(--primary-color);
border: var(--border-width) solid var(--primary-color);
border-radius: var(--border-radius);
font-family: var(--font-family);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
margin: 0;
flex-shrink: 0;
}
.login-logout-btn:hover {
border-color: var(--accent-color);
}
.login-logout-btn:active {
background: var(--accent-color);
color: var(--secondary-color);
}
.login-logout-btn.logout-state {
background: var(--accent-color);
color: var(--secondary-color);
border-color: var(--accent-color);
}
.login-logout-btn.logout-state:hover {
background: var(--primary-color);
border-color: var(--primary-color);
}
.user-pubkey {
font-family: var(--font-family);
font-size: 12px;
@@ -378,7 +425,19 @@
transition: all 0.2s ease;
}
@media (max-width: 768px) {
/* Two-Column Layout */
.two-column-layout {
display: flex;
gap: var(--border-width);
margin-bottom: 20px;
}
.column {
flex: 1;
min-width: 300px; /* Ensure columns are at least 300px wide */
}
@media (max-width: 700px) {
body {
padding: 10px;
}
@@ -394,6 +453,12 @@
h2 {
font-size: 14px;
}
/* Stack columns vertically on screens smaller than 700px */
.two-column-layout {
flex-direction: column;
gap: 20px;
}
}
</style>
</head>
@@ -401,70 +466,77 @@
<body>
<h1>C-RELAY ADMIN API</h1>
<!-- Login Section -->
<div id="login-section">
<div class="section">
<h2>NOSTR AUTHENTICATION</h2>
<p>Please login with your Nostr identity to access the admin interface.</p>
<!-- nostr-lite login UI will be injected here -->
<!-- Persistent Authentication Header - Always Visible -->
<div id="persistent-auth-container" class="section">
<div class="user-info-container">
<button type="button" id="login-logout-btn" class="login-logout-btn">LOGIN</button>
<div class="user-details" id="persistent-user-details" style="display: none;">
<div><strong>Name:</strong> <span id="persistent-user-name">Loading...</span></div>
<div><strong>Public Key:</strong>
<div class="user-pubkey" id="persistent-user-pubkey">Loading...</div>
</div>
<div><strong>About:</strong> <span id="persistent-user-about">Loading...</span></div>
</div>
</div>
</div>
<!-- Two-Column Layout: Authentication + Relay Connection -->
<div class="two-column-layout">
<!-- Login Section - Left Column -->
<div id="login-section" class="column">
<div class="section">
<h2>NOSTR AUTHENTICATION</h2>
<p id="login-instructions">Please login with your Nostr identity to access the admin interface.</p>
<!-- nostr-lite login UI will be injected here -->
</div>
</div>
<!-- Relay Connection Section - Right Column -->
<div id="relay-connection-section" class="column">
<div class="section">
<h2>RELAY CONNECTION</h2>
<div class="input-group">
<label for="relay-connection-url">Relay URL:</label>
<input type="text" id="relay-connection-url" value="ws://localhost:8888" placeholder="ws://localhost:8888 or wss://relay.example.com">
</div>
<div class="input-group">
<label for="relay-pubkey-manual">Relay Pubkey (if not available via NIP-11):</label>
<input type="text" id="relay-pubkey-manual" placeholder="64-character hex pubkey" pattern="[0-9a-fA-F]{64}" title="64-character hexadecimal public key">
<small>If the relay hasn't been configured yet, enter the relay pubkey shown during startup</small>
</div>
<div class="inline-buttons">
<button type="button" id="connect-relay-btn">CONNECT TO RELAY</button>
<button type="button" id="disconnect-relay-btn" disabled>DISCONNECT</button>
<button type="button" id="test-websocket-btn" disabled>TEST WEBSOCKET</button>
</div>
<div class="status disconnected" id="relay-connection-status">NOT CONNECTED</div>
<!-- Relay Information Display -->
<div id="relay-info-display" class="hidden">
<h3>Relay Information (NIP-11)</h3>
<table class="config-table" id="relay-info-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody id="relay-info-table-body">
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Main Interface (hidden until logged in) -->
<div id="main-interface" class="hidden">
<!-- User Info Section - At the top of main interface -->
<div class="section">
<h2>LOGGED IN USER</h2>
<div class="user-info">
<div><strong>Name:</strong> <span id="user-name">Loading...</span></div>
<div><strong>Public Key:</strong>
<div class="user-pubkey" id="user-pubkey">Loading...</div>
</div>
<div><strong>About:</strong> <span id="user-about">Loading...</span></div>
</div>
<button type="button" id="logout-btn">LOGOUT</button>
</div>
<!-- Relay Connection Section -->
<div class="section">
<div class="input-group">
<label for="relay-connection-url">Relay URL:</label>
<input type="text" id="relay-connection-url" value="ws://localhost:8888" placeholder="ws://localhost:8888 or wss://relay.example.com">
</div>
<div class="input-group">
<label for="relay-pubkey-manual">Relay Pubkey (if not available via NIP-11):</label>
<input type="text" id="relay-pubkey-manual" placeholder="64-character hex pubkey" pattern="[0-9a-fA-F]{64}" title="64-character hexadecimal public key">
<small>If the relay hasn't been configured yet, enter the relay pubkey shown during startup</small>
</div>
<div class="inline-buttons">
<button type="button" id="connect-relay-btn">CONNECT TO RELAY</button>
<button type="button" id="disconnect-relay-btn" disabled>DISCONNECT</button>
<button type="button" id="test-websocket-btn" disabled>TEST WEBSOCKET</button>
</div>
<div class="status disconnected" id="relay-connection-status">NOT CONNECTED</div>
<!-- Relay Information Display -->
<div id="relay-info-display" class="hidden">
<h3>Relay Information (NIP-11)</h3>
<table class="config-table" id="relay-info-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody id="relay-info-table-body">
</tbody>
</table>
</div>
</div>
</div>
<!-- Testing Section - Always Visible -->
@@ -675,10 +747,10 @@
// DOM elements
const loginSection = document.getElementById('login-section');
const mainInterface = document.getElementById('main-interface');
const userName = document.getElementById('user-name');
const userPubkeyDisplay = document.getElementById('user-pubkey');
const userAbout = document.getElementById('user-about');
const logoutBtn = document.getElementById('logout-btn');
const persistentUserName = document.getElementById('persistent-user-name');
const persistentUserPubkey = document.getElementById('persistent-user-pubkey');
const persistentUserAbout = document.getElementById('persistent-user-about');
const persistentUserDetails = document.getElementById('persistent-user-details');
const relayUrl = document.getElementById('relay-url');
const relayStatus = document.getElementById('relay-status');
const fetchConfigBtn = document.getElementById('fetch-config-btn');
@@ -1106,6 +1178,7 @@
// Show main interface
showMainInterface();
loadUserProfile();
updateLoginLogoutButton();
// Note: Configuration fetching now requires explicit relay connection
// User must connect to relay manually after login
@@ -1131,25 +1204,25 @@
readonly: true,
connect: true,
remote: true,
otp: true
otp: false
},
floatingTab: {
enabled: true,
hPosition: 1, // 0.0-1.0 or '95%' from left
vPosition: 0, // 0.0-1.0 or '50%' from top
appearance: {
style: 'square', // 'pill', 'square', 'circle', 'minimal'
// icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET]
text: 'Login'
},
behavior: {
hideWhenAuthenticated: false,
showUserInfo: true,
autoSlide: true
},
animation: {
slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
}
enabled: false,
// hPosition: 1, // 0.0-1.0 or '95%' from left
// vPosition: 0, // 0.0-1.0 or '50%' from top
// appearance: {
// style: 'square', // 'pill', 'square', 'circle', 'minimal'
// // icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET]
// text: 'Login'
// },
// behavior: {
// hideWhenAuthenticated: false,
// showUserInfo: true,
// autoSlide: true
// },
// animation: {
// slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
// }
}
});
@@ -1167,6 +1240,7 @@
// Listen for authentication events
window.addEventListener('nlMethodSelected', handleAuthEvent);
window.addEventListener('nlLogout', handleLogoutEvent);
} catch (error) {
console.log('Failed to initialize Nostr login: ' + error.message);
@@ -1185,6 +1259,7 @@
showMainInterface();
loadUserProfile();
updateLoginLogoutButton();
// Note: Configuration fetching now requires explicit relay connection
// User must connect to relay manually after login
@@ -1195,11 +1270,47 @@
}
}
// Handle logout events
function handleLogoutEvent() {
console.log('Logout event received');
userPubkey = null;
isLoggedIn = false;
currentConfig = null;
// Clean up relay connection
disconnectFromRelay();
// Reset UI
mainInterface.classList.add('hidden');
loginSection.classList.remove('hidden');
updateConfigStatus(false);
relayStatus.textContent = 'READY TO FETCH';
relayStatus.className = 'status disconnected';
updateLoginLogoutButton();
hideAuthRulesSection();
console.log('Logout event handled successfully');
}
// Disconnect from relay and clean up connections
function disconnectFromRelay() {
if (relayPool) {
console.log('Cleaning up relay pool connection...');
const url = relayUrl.value.trim();
if (url) {
relayPool.close([url]);
}
relayPool = null;
subscriptionId = null;
}
}
// Show main interface after login
function showMainInterface() {
loginSection.classList.add('hidden');
mainInterface.classList.remove('hidden');
userPubkeyDisplay.textContent = userPubkey;
updateLoginLogoutButton();
}
// Load user profile using nostr-tools pool
@@ -1207,8 +1318,8 @@
if (!userPubkey) return;
console.log('Loading user profile...');
userName.textContent = 'Loading...';
userAbout.textContent = 'Loading...';
persistentUserName.textContent = 'Loading...';
persistentUserAbout.textContent = 'Loading...';
try {
// Create a SimplePool instance for profile loading
@@ -1223,11 +1334,16 @@
});
if (events.length > 0) {
console.log('Profile event found:', events[0]);
const profile = JSON.parse(events[0].content);
console.log('Parsed profile:', profile);
displayProfile(profile);
} else {
userName.textContent = 'Anonymous User';
userAbout.textContent = 'No profile found';
console.log('No profile events found for pubkey:', userPubkey);
persistentUserName.textContent = 'Anonymous User';
persistentUserAbout.textContent = 'No profile found';
// Still show the pubkey since we have it
persistentUserPubkey.textContent = userPubkey;
}
// Close the profile pool
@@ -1235,8 +1351,10 @@
} catch (error) {
console.log('Profile loading failed: ' + error.message);
userName.textContent = 'Error loading profile';
userAbout.textContent = error.message;
persistentUserName.textContent = 'Error loading profile';
persistentUserAbout.textContent = error.message;
// Still show the pubkey since we have it
persistentUserPubkey.textContent = userPubkey;
}
}
@@ -1245,10 +1363,12 @@
const name = profile.name || profile.display_name || profile.displayName || 'Anonymous User';
const about = profile.about || 'No description provided';
userName.textContent = name;
userAbout.textContent = about;
// Update persistent user details
persistentUserName.textContent = name;
persistentUserPubkey.textContent = userPubkey;
persistentUserAbout.textContent = about;
console.log(`Profile loaded for: ${name}`);
console.log(`Profile loaded for: ${name} with pubkey: ${userPubkey}`);
}
// Logout function
@@ -1275,12 +1395,13 @@
isLoggedIn = false;
currentConfig = null;
// Reset UI
// Reset UI - keep persistent auth container visible
mainInterface.classList.add('hidden');
loginSection.classList.remove('hidden');
updateConfigStatus(false);
relayStatus.textContent = 'READY TO FETCH';
relayStatus.className = 'status disconnected';
updateLoginLogoutButton();
console.log('Logged out successfully');
@@ -2224,8 +2345,39 @@
// Login/Logout button functionality
function updateLoginLogoutButton() {
const loginLogoutBtn = document.getElementById('login-logout-btn');
if (!loginLogoutBtn) return;
if (isLoggedIn) {
loginLogoutBtn.textContent = 'LOGOUT';
loginLogoutBtn.className = 'login-logout-btn logout-state';
loginLogoutBtn.onclick = logout;
// Show user details when logged in
if (persistentUserDetails) {
persistentUserDetails.style.display = 'block';
}
} else {
loginLogoutBtn.textContent = 'ADMIN NOSTR LOGIN';
loginLogoutBtn.className = 'login-logout-btn';
loginLogoutBtn.onclick = () => {
if (window.NOSTR_LOGIN_LITE && window.NOSTR_LOGIN_LITE.launch) {
window.NOSTR_LOGIN_LITE.launch('login');
} else {
console.log('NOSTR_LOGIN_LITE not available');
}
};
// Hide user details when logged out
if (persistentUserDetails) {
persistentUserDetails.style.display = 'none';
}
}
}
// Event handlers
logoutBtn.addEventListener('click', logout);
// Initialize login/logout button
updateLoginLogoutButton();
fetchConfigBtn.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
@@ -2336,9 +2488,18 @@
function hideAuthRulesSection() {
if (authRulesSection) {
authRulesSection.style.display = 'none';
authRulesTableContainer.style.display = 'none';
authRuleFormContainer.style.display = 'none';
authRulesStatusDisplay.style.display = 'none';
// Add null checks for all elements
if (authRulesTableContainer) {
authRulesTableContainer.style.display = 'none';
}
if (authRuleFormContainer) {
authRuleFormContainer.style.display = 'none';
}
if (authRulesStatusDisplay) {
authRulesStatusDisplay.style.display = 'none';
}
currentAuthRules = [];
editingAuthRule = null;
log('Auth rules section hidden', 'INFO');
@@ -3715,6 +3876,10 @@
// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
console.log('C-Relay Admin API interface loaded');
// Initialize login/logout button state
updateLoginLogoutButton();
setTimeout(() => {
initializeApp();
// Enhance SimplePool for testing after initialization