silberengel
/
next.orly.dev
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add CORS headers and update UI for enhanced user profile handling. 

- Added CORS support in server responses for cross-origin requests (`Access-Control-Allow-Origin`, etc.).
- Improved header panel behavior with a sticky position and refined CSS styling.
- Integrated profile data fetching (Kind 0 metadata) for user personalization.
- Enhanced login functionality to support dynamic profile display based on fetched metadata.
- Updated `index.html` to include Tailwind CSS for better design consistency.
main
mleku 4 months ago
parent
0b69ea6d80
commit
6b38291bf9
No known key found for this signature in database
4 changed files with 347 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      app/server.go
  2. 3
      app/web/public/index.html
  3. 295
      app/web/src/App.jsx
  4. 92
      app/web/src/styles.css

11
app/server.go
Unescape View File

@ -34,6 +34,17 @@ type Server struct { @@ -34,6 +34,17 @@ type Server struct {
}
func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
// Set CORS headers for all responses
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
// Handle preflight OPTIONS requests
if r.Method == "OPTIONS" {
w.WriteHeader(http.StatusOK)
return
}
// log.T.C(
// func() string {
// return fmt.Sprintf("path %v header %v", r.URL, r.Header)

3
app/web/public/index.html
Unescape View File

@ -4,8 +4,9 @@ @@ -4,8 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nostr Relay</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<body class="bg-white">
<div id="root"></div>
<script type="module" src="index.js"></script>
</body>

295
app/web/src/App.jsx
Unescape View File

@ -4,12 +4,28 @@ function App() { @@ -4,12 +4,28 @@ function App() {
const [user, setUser] = useState(null);
const [status, setStatus] = useState('Ready to authenticate');
const [statusType, setStatusType] = useState('info');
const [profileData, setProfileData] = useState(null);
useEffect(() => {
// Check authentication status on page load
checkStatus();
}, []);
// Effect to fetch profile when user changes
useEffect(() => {
if (user?.pubkey) {
fetchUserProfile(user.pubkey);
}
}, [user?.pubkey]);
function relayURL() {
try {
return window.location.protocol.replace('http', 'ws') + '//' + window.location.host;
} catch (_) {
return 'ws://localhost:3333';
}
}
async function checkStatus() {
try {
const response = await fetch('/api/auth/status');
@ -17,7 +33,7 @@ function App() { @@ -17,7 +33,7 @@ function App() {
if (data.authenticated) {
setUser(data.pubkey);
updateStatus(`Already authenticated as: ${data.pubkey.slice(0, 16)}...`, 'success');
// Check permissions if authenticated
if (data.pubkey) {
const permResponse = await fetch(`/api/permissions/${data.pubkey}`);
@ -37,6 +53,19 @@ function App() { @@ -37,6 +53,19 @@ function App() {
setStatusType(type);
}
function statusClassName() {
const base = 'mt-5 mb-5 p-3 rounded';
switch (statusType) {
case 'success':
return base + ' bg-green-100 text-green-800';
case 'error':
return base + ' bg-red-100 text-red-800';
case 'info':
default:
return base + ' bg-cyan-100 text-cyan-800';
}
}
async function getChallenge() {
try {
const response = await fetch('/api/auth/challenge');
@ -53,38 +82,199 @@ function App() { @@ -53,38 +82,199 @@ function App() {
updateStatus('No Nostr extension found. Please install a NIP-07 compatible extension like nos2x or Alby.', 'error');
return;
}
try {
updateStatus('Connecting to extension...', 'info');
// Get public key from extension
const pubkey = await window.nostr.getPublicKey();
// Get challenge from server
const challenge = await getChallenge();
// Create authentication event
const authEvent = {
kind: 22242,
created_at: Math.floor(Date.now() / 1000),
tags: [
['relay', window.location.protocol.replace('http', 'ws') + '//' + window.location.host],
['relay', relayURL()],
['challenge', challenge]
],
content: ''
};
// Sign the event with extension
const signedEvent = await window.nostr.signEvent(authEvent);
// Send to server
await authenticate(signedEvent);
} catch (error) {
updateStatus('Extension login failed: ' + error.message, 'error');
}
}
async function fetchKind0FromRelay(pubkeyHex, timeoutMs = 4000) {
return new Promise((resolve) => {
let resolved = false;
let events = [];
let ws;
try {
ws = new WebSocket(relayURL());
} catch (e) {
resolve(null);
return;
}
const subId = 'profile-' + Math.random().toString(36).slice(2);
const timer = setTimeout(() => {
if (ws && ws.readyState === 1) {
try { ws.close(); } catch (_) {}
}
if (!resolved) {
resolved = true;
resolve(null);
}
}, timeoutMs);
ws.onopen = () => {
try {
const req = [
'REQ',
subId,
{ kinds: [0], authors: [pubkeyHex] }
];
ws.send(JSON.stringify(req));
} catch (_) {}
};
ws.onmessage = (msg) => {
try {
const data = JSON.parse(msg.data);
const type = data[0];
if (type === 'EVENT' && data[1] === subId) {
const event = data[2];
if (event && event.kind === 0 && event.content) {
events.push(event);
}
} else if (type === 'EOSE' && data[1] === subId) {
try {
ws.send(JSON.stringify(['CLOSE', subId]));
} catch (_) {}
try { ws.close(); } catch (_) {}
clearTimeout(timer);
if (!resolved) {
resolved = true;
if (events.length) {
const latest = events.reduce((a, b) => (a.created_at > b.created_at ? a : b));
try {
const meta = JSON.parse(latest.content);
resolve(meta || null);
} catch (_) {
resolve(null);
}
} else {
resolve(null);
}
}
}
} catch (_) {
// ignore malformed messages
}
};
ws.onerror = () => {
try { ws.close(); } catch (_) {}
clearTimeout(timer);
if (!resolved) {
resolved = true;
resolve(null);
}
};
ws.onclose = () => {
clearTimeout(timer);
if (!resolved) {
resolved = true;
if (events.length) {
const latest = events.reduce((a, b) => (a.created_at > b.created_at ? a : b));
try {
const meta = JSON.parse(latest.content);
resolve(meta || null);
} catch (_) {
resolve(null);
}
} else {
resolve(null);
}
}
};
});
}
// Function to fetch user profile metadata (kind 0)
async function fetchUserProfile(pubkeyHex) {
try {
// Create a simple placeholder with the pubkey
const placeholderProfile = {
name: `user:${pubkeyHex.slice(0, 8)}`,
about: 'No profile data available'
};
// Always set the placeholder profile first
setProfileData(placeholderProfile);
// First, try to get profile kind:0 from the relay itself
let relayMetadata = null;
try {
relayMetadata = await fetchKind0FromRelay(pubkeyHex);
} catch (_) {}
if (relayMetadata) {
const parsed = typeof relayMetadata === 'string' ? JSON.parse(relayMetadata) : relayMetadata;
setProfileData({
name: parsed.name || placeholderProfile.name,
display_name: parsed.display_name,
picture: parsed.picture,
banner: parsed.banner,
about: parsed.about || placeholderProfile.about
});
return parsed;
}
// Fallback: try extension metadata if available
if (window.nostr && window.nostr.getPublicKey) {
try {
if (window.nostr.getUserMetadata) {
const metadata = await window.nostr.getUserMetadata();
if (metadata) {
try {
const parsedMetadata = typeof metadata === 'string' ? JSON.parse(metadata) : metadata;
setProfileData({
name: parsedMetadata.name || placeholderProfile.name,
display_name: parsedMetadata.display_name,
picture: parsedMetadata.picture,
banner: parsedMetadata.banner,
about: parsedMetadata.about || placeholderProfile.about
});
return parsedMetadata;
} catch (parseError) {
console.log('Error parsing user metadata:', parseError);
}
}
}
} catch (nostrError) {
console.log('Could not get profile from extension:', nostrError);
}
}
return placeholderProfile;
} catch (error) {
console.error('Error handling profile data:', error);
return null;
}
}
async function authenticate(signedEvent) {
try {
const response = await fetch('/api/auth/login', {
@ -92,18 +282,21 @@ function App() { @@ -92,18 +282,21 @@ function App() {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(signedEvent)
});
const result = await response.json();
if (result.success) {
setUser(result.pubkey);
updateStatus('Successfully authenticated as: ' + result.pubkey.slice(0, 16) + '...', 'success');
// Check permissions after login
const permResponse = await fetch(`/api/permissions/${result.pubkey}`);
const permData = await permResponse.json();
if (permData && permData.permission) {
setUser({pubkey: result.pubkey, permission: permData.permission});
// Fetch user profile data
await fetchUserProfile(result.pubkey);
}
} else {
updateStatus('Authentication failed: ' + result.error, 'error');
@ -119,40 +312,58 @@ function App() { @@ -119,40 +312,58 @@ function App() {
}
return (
<div className="container">
{user?.permission && (
<div className="header-panel">
<div className="header-content">
<img src="/docs/orly.png" alt="Logo" className="header-logo" />
<div className="user-info">
{user.permission === "admin" ? "Admin Dashboard" : "Subscriber Dashboard"}
<>
{user?.permission ? (
// Logged in view with user profile
<div className="sticky top-0 left-0 w-full bg-gray-100 z-50 h-16 flex items-center overflow-hidden">
<div className="flex items-center h-full w-full box-border">
<div className="flex items-center justify-start h-full">
<img src="/docs/orly.png" alt="Logo" className="h-full aspect-square w-auto object-cover shrink-0" />
</div>
<div className="relative overflow-hidden flex flex-grow items-center justify-start h-full">
{profileData?.banner && (
<div className="absolute inset-0 opacity-70 bg-cover bg-center" style={{ backgroundImage: `url(${profileData.banner})` }}></div>
)}
<div className="relative z-10 p-2 flex items-center h-full">
{profileData?.picture && <img src={profileData.picture} alt="User Avatar" className="h-full aspect-square w-auto rounded-full object-cover border-2 border-white mr-2 shadow box-border" />}
<div>
<div className="font-bold text-base block">
{profileData?.display_name || profileData?.name || user.pubkey.slice(0, 8)}
{profileData?.name && profileData?.display_name && ` (${profileData.name})`}
</div>
<div className="font-bold text-lg text-left">
{user.permission === "admin" ? "Admin Dashboard" : "Subscriber Dashboard"}
</div>
</div>
</div>
</div>
<div className="flex items-center justify-end h-full">
<button className="bg-transparent text-gray-500 border-0 text-2xl cursor-pointer p-0 flex items-center justify-center w-12 h-full ml-2 mr-0 shrink-0 hover:bg-transparent hover:text-gray-800" onClick={logout}>✕</button>
</div>
<button className="logout-button" onClick={logout}>✕</button>
</div>
</div>
)}
) : (
// Not logged in view - shows the login form
<div className="max-w-3xl mx-auto mt-5 p-6 bg-gray-100 rounded">
<h1 className="text-2xl font-bold mb-2">Nostr Relay Authentication</h1>
<p className="mb-4">Connect to this Nostr relay using your private key or browser extension.</p>
<div className={statusClassName()}>
{status}
</div>
<div className="mb-5">
<button className="bg-blue-600 text-white px-5 py-3 rounded hover:bg-blue-700" onClick={loginWithExtension}>Login with Browser Extension (NIP-07)</button>
</div>
<h1>Nostr Relay Authentication</h1>
<p>Connect to this Nostr relay using your private key or browser extension.</p>
<div className={`status ${statusType}`}>
{status}
</div>
<div className="form-group">
<button onClick={loginWithExtension}>Login with Browser Extension (NIP-07)</button>
</div>
<div className="form-group">
<label htmlFor="nsec">Or login with private key (nsec):</label>
<input type="password" id="nsec" placeholder="nsec1..." />
<button onClick={() => updateStatus('Private key login not implemented in this basic interface. Please use a proper Nostr client or extension.', 'error')} style={{marginTop: '10px'}}>Login with Private Key</button>
</div>
<div className="form-group">
<button onClick={logout} className="danger-button">Logout</button>
</div>
</div>
<div className="mb-5">
<label className="block mb-1 font-bold" htmlFor="nsec">Or login with private key (nsec):</label>
<input className="w-full p-2 border border-gray-300 rounded" type="password" id="nsec" placeholder="nsec1..." />
<button className="mt-2 bg-red-600 text-white px-5 py-2 rounded hover:bg-red-700" onClick={() => updateStatus('Private key login not implemented in this basic interface. Please use a proper Nostr client or extension.', 'error')}>Login with Private Key</button>
</div>
</div>
)}
</>
);
}

92
app/web/src/styles.css
Unescape View File

@ -9,7 +9,7 @@ body { @@ -9,7 +9,7 @@ body {
background: #f9f9f9;
padding: 30px;
border-radius: 8px;
margin-top: 80px; /* Space for the header panel */
margin-top: 20px; /* Reduced space since header is now sticky */
}
.form-group {
@ -73,32 +73,100 @@ button:hover { @@ -73,32 +73,100 @@ button:hover {
}
.header-panel {
position: fixed;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #f8f9fa;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
height: 60px;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
overflow: hidden;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
height: 100%;
padding: 0 0 0 12px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.header-left {
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
}
.header-center {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
.header-right {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
}
.header-logo {
height: 40px;
height: 100%;
aspect-ratio: 1 / 1;
width: auto;
border-radius: 0;
object-fit: cover;
flex-shrink: 0;
}
.user-avatar {
width: 40px;
border-radius: 4px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid white;
margin-right: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.user-profile {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.user-info {
flex-grow: 1;
padding-left: 20px;
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
.user-name {
font-weight: bold;
font-size: 1em;
display: block;
}
.profile-banner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: 0.7;
}
.logout-button {
@ -111,12 +179,14 @@ button:hover { @@ -111,12 +179,14 @@ button:hover {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
width: 48px;
height: 100%;
margin-left: 10px;
margin-right: 0;
flex-shrink: 0;
}
.logout-button:hover {
background: rgba(108, 117, 125, 0.1);
background: transparent;
color: #343a40;
}
Write Preview
Loading…
Cancel
Save