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>

273
api/index.html
View File

@@ -243,6 +243,53 @@
background-color: var(--secondary-color); 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 { .user-pubkey {
font-family: var(--font-family); font-family: var(--font-family);
font-size: 12px; font-size: 12px;
@@ -378,7 +425,19 @@
transition: all 0.2s ease; 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 { body {
padding: 10px; padding: 10px;
} }
@@ -394,6 +453,12 @@
h2 { h2 {
font-size: 14px; font-size: 14px;
} }
/* Stack columns vertically on screens smaller than 700px */
.two-column-layout {
flex-direction: column;
gap: 20px;
}
} }
</style> </style>
</head> </head>
@@ -401,33 +466,35 @@
<body> <body>
<h1>C-RELAY ADMIN API</h1> <h1>C-RELAY ADMIN API</h1>
<!-- Login Section --> <!-- Persistent Authentication Header - Always Visible -->
<div id="login-section"> <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"> <div class="section">
<h2>NOSTR AUTHENTICATION</h2> <h2>NOSTR AUTHENTICATION</h2>
<p>Please login with your Nostr identity to access the admin interface.</p> <p id="login-instructions">Please login with your Nostr identity to access the admin interface.</p>
<!-- nostr-lite login UI will be injected here --> <!-- nostr-lite login UI will be injected here -->
</div> </div>
</div> </div>
<!-- Main Interface (hidden until logged in) --> <!-- Relay Connection Section - Right Column -->
<div id="main-interface" class="hidden"> <div id="relay-connection-section" class="column">
<!-- 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="section">
<h2>RELAY CONNECTION</h2>
<div class="input-group"> <div class="input-group">
<label for="relay-connection-url">Relay URL:</label> <label for="relay-connection-url">Relay URL:</label>
@@ -464,6 +531,11 @@
</div> </div>
</div> </div>
</div>
</div>
<!-- Main Interface (hidden until logged in) -->
<div id="main-interface" class="hidden">
</div> </div>
@@ -675,10 +747,10 @@
// DOM elements // DOM elements
const loginSection = document.getElementById('login-section'); const loginSection = document.getElementById('login-section');
const mainInterface = document.getElementById('main-interface'); const mainInterface = document.getElementById('main-interface');
const userName = document.getElementById('user-name'); const persistentUserName = document.getElementById('persistent-user-name');
const userPubkeyDisplay = document.getElementById('user-pubkey'); const persistentUserPubkey = document.getElementById('persistent-user-pubkey');
const userAbout = document.getElementById('user-about'); const persistentUserAbout = document.getElementById('persistent-user-about');
const logoutBtn = document.getElementById('logout-btn'); const persistentUserDetails = document.getElementById('persistent-user-details');
const relayUrl = document.getElementById('relay-url'); const relayUrl = document.getElementById('relay-url');
const relayStatus = document.getElementById('relay-status'); const relayStatus = document.getElementById('relay-status');
const fetchConfigBtn = document.getElementById('fetch-config-btn'); const fetchConfigBtn = document.getElementById('fetch-config-btn');
@@ -1106,6 +1178,7 @@
// Show main interface // Show main interface
showMainInterface(); showMainInterface();
loadUserProfile(); loadUserProfile();
updateLoginLogoutButton();
// Note: Configuration fetching now requires explicit relay connection // Note: Configuration fetching now requires explicit relay connection
// User must connect to relay manually after login // User must connect to relay manually after login
@@ -1131,25 +1204,25 @@
readonly: true, readonly: true,
connect: true, connect: true,
remote: true, remote: true,
otp: true otp: false
}, },
floatingTab: { floatingTab: {
enabled: true, enabled: false,
hPosition: 1, // 0.0-1.0 or '95%' from left // hPosition: 1, // 0.0-1.0 or '95%' from left
vPosition: 0, // 0.0-1.0 or '50%' from top // vPosition: 0, // 0.0-1.0 or '50%' from top
appearance: { // appearance: {
style: 'square', // 'pill', 'square', 'circle', 'minimal' // style: 'square', // 'pill', 'square', 'circle', 'minimal'
// icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET] // // icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET]
text: 'Login' // text: 'Login'
}, // },
behavior: { // behavior: {
hideWhenAuthenticated: false, // hideWhenAuthenticated: false,
showUserInfo: true, // showUserInfo: true,
autoSlide: true // autoSlide: true
}, // },
animation: { // animation: {
slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down' // slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
} // }
} }
}); });
@@ -1167,6 +1240,7 @@
// Listen for authentication events // Listen for authentication events
window.addEventListener('nlMethodSelected', handleAuthEvent); window.addEventListener('nlMethodSelected', handleAuthEvent);
window.addEventListener('nlLogout', handleLogoutEvent);
} catch (error) { } catch (error) {
console.log('Failed to initialize Nostr login: ' + error.message); console.log('Failed to initialize Nostr login: ' + error.message);
@@ -1185,6 +1259,7 @@
showMainInterface(); showMainInterface();
loadUserProfile(); loadUserProfile();
updateLoginLogoutButton();
// Note: Configuration fetching now requires explicit relay connection // Note: Configuration fetching now requires explicit relay connection
// User must connect to relay manually after login // 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 // Show main interface after login
function showMainInterface() { function showMainInterface() {
loginSection.classList.add('hidden'); loginSection.classList.add('hidden');
mainInterface.classList.remove('hidden'); mainInterface.classList.remove('hidden');
userPubkeyDisplay.textContent = userPubkey; updateLoginLogoutButton();
} }
// Load user profile using nostr-tools pool // Load user profile using nostr-tools pool
@@ -1207,8 +1318,8 @@
if (!userPubkey) return; if (!userPubkey) return;
console.log('Loading user profile...'); console.log('Loading user profile...');
userName.textContent = 'Loading...'; persistentUserName.textContent = 'Loading...';
userAbout.textContent = 'Loading...'; persistentUserAbout.textContent = 'Loading...';
try { try {
// Create a SimplePool instance for profile loading // Create a SimplePool instance for profile loading
@@ -1223,11 +1334,16 @@
}); });
if (events.length > 0) { if (events.length > 0) {
console.log('Profile event found:', events[0]);
const profile = JSON.parse(events[0].content); const profile = JSON.parse(events[0].content);
console.log('Parsed profile:', profile);
displayProfile(profile); displayProfile(profile);
} else { } else {
userName.textContent = 'Anonymous User'; console.log('No profile events found for pubkey:', userPubkey);
userAbout.textContent = 'No profile found'; persistentUserName.textContent = 'Anonymous User';
persistentUserAbout.textContent = 'No profile found';
// Still show the pubkey since we have it
persistentUserPubkey.textContent = userPubkey;
} }
// Close the profile pool // Close the profile pool
@@ -1235,8 +1351,10 @@
} catch (error) { } catch (error) {
console.log('Profile loading failed: ' + error.message); console.log('Profile loading failed: ' + error.message);
userName.textContent = 'Error loading profile'; persistentUserName.textContent = 'Error loading profile';
userAbout.textContent = error.message; 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 name = profile.name || profile.display_name || profile.displayName || 'Anonymous User';
const about = profile.about || 'No description provided'; const about = profile.about || 'No description provided';
userName.textContent = name; // Update persistent user details
userAbout.textContent = about; 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 // Logout function
@@ -1275,12 +1395,13 @@
isLoggedIn = false; isLoggedIn = false;
currentConfig = null; currentConfig = null;
// Reset UI // Reset UI - keep persistent auth container visible
mainInterface.classList.add('hidden'); mainInterface.classList.add('hidden');
loginSection.classList.remove('hidden'); loginSection.classList.remove('hidden');
updateConfigStatus(false); updateConfigStatus(false);
relayStatus.textContent = 'READY TO FETCH'; relayStatus.textContent = 'READY TO FETCH';
relayStatus.className = 'status disconnected'; relayStatus.className = 'status disconnected';
updateLoginLogoutButton();
console.log('Logged out successfully'); 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 // Event handlers
logoutBtn.addEventListener('click', logout); // Initialize login/logout button
updateLoginLogoutButton();
fetchConfigBtn.addEventListener('click', function (e) { fetchConfigBtn.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -2336,9 +2488,18 @@
function hideAuthRulesSection() { function hideAuthRulesSection() {
if (authRulesSection) { if (authRulesSection) {
authRulesSection.style.display = 'none'; authRulesSection.style.display = 'none';
// Add null checks for all elements
if (authRulesTableContainer) {
authRulesTableContainer.style.display = 'none'; authRulesTableContainer.style.display = 'none';
}
if (authRuleFormContainer) {
authRuleFormContainer.style.display = 'none'; authRuleFormContainer.style.display = 'none';
}
if (authRulesStatusDisplay) {
authRulesStatusDisplay.style.display = 'none'; authRulesStatusDisplay.style.display = 'none';
}
currentAuthRules = []; currentAuthRules = [];
editingAuthRule = null; editingAuthRule = null;
log('Auth rules section hidden', 'INFO'); log('Auth rules section hidden', 'INFO');
@@ -3715,6 +3876,10 @@
// Initialize the app // Initialize the app
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
console.log('C-Relay Admin API interface loaded'); console.log('C-Relay Admin API interface loaded');
// Initialize login/logout button state
updateLoginLogoutButton();
setTimeout(() => { setTimeout(() => {
initializeApp(); initializeApp();
// Enhance SimplePool for testing after initialization // Enhance SimplePool for testing after initialization