feat: Initialize Electron application with core backend, frontend chat/login UI, and IPC for crypto and link previews.
This commit is contained in:
bryan
@@ -38,7 +38,7 @@ io.on('connection', (socket) => {
|
||||
// Load recent messages
|
||||
try {
|
||||
const result = await db.query(
|
||||
`SELECT m.*, u.username
|
||||
`SELECT m.*, u.username, u.public_signing_key
|
||||
FROM messages m
|
||||
JOIN users u ON m.sender_id = u.id
|
||||
WHERE m.channel_id = $1
|
||||
@@ -69,10 +69,11 @@ io.on('connection', (socket) => {
|
||||
...data
|
||||
};
|
||||
|
||||
// Get username for display
|
||||
const userRes = await db.query('SELECT username FROM users WHERE id = $1', [senderId]);
|
||||
// Get username and signing key for display/verification
|
||||
const userRes = await db.query('SELECT username, public_signing_key FROM users WHERE id = $1', [senderId]);
|
||||
if (userRes.rows.length > 0) {
|
||||
message.username = userRes.rows[0].username;
|
||||
message.public_signing_key = userRes.rows[0].public_signing_key;
|
||||
}
|
||||
|
||||
// Broadcast to channel
|
||||
|
||||
@@ -110,6 +110,15 @@ app.whenReady().then(() => {
|
||||
return crypto.createHash('sha256').update(data).digest('hex');
|
||||
});
|
||||
|
||||
ipcMain.handle('sign-message', (event, privateKeyPem, message) => {
|
||||
// message should be a string or buffer
|
||||
return crypto.sign(null, Buffer.from(message), privateKeyPem).toString('hex');
|
||||
});
|
||||
|
||||
ipcMain.handle('verify-signature', (event, publicKeyPem, message, signature) => {
|
||||
return crypto.verify(null, Buffer.from(message), publicKeyPem, Buffer.from(signature, 'hex'));
|
||||
});
|
||||
|
||||
ipcMain.handle('derive-auth-keys', (event, password, salt) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
crypto.scrypt(password, salt, 64, (err, derivedKey) => {
|
||||
|
||||
@@ -4,6 +4,8 @@ contextBridge.exposeInMainWorld('cryptoAPI', {
|
||||
generateKeys: () => ipcRenderer.invoke('generate-keys'),
|
||||
randomBytes: (size) => ipcRenderer.invoke('random-bytes', size),
|
||||
sha256: (data) => ipcRenderer.invoke('sha256', data),
|
||||
signMessage: (privateKey, message) => ipcRenderer.invoke('sign-message', privateKey, message),
|
||||
verifySignature: (publicKey, message, signature) => ipcRenderer.invoke('verify-signature', publicKey, message, signature),
|
||||
deriveAuthKeys: (password, salt) => ipcRenderer.invoke('derive-auth-keys', password, salt),
|
||||
encryptData: (data, key) => ipcRenderer.invoke('encrypt-data', data, key),
|
||||
decryptData: (encryptedData, key, iv, tag) => ipcRenderer.invoke('decrypt-data', encryptedData, key, iv, tag),
|
||||
|
||||
@@ -5,7 +5,91 @@ import remarkGfm from 'remark-gfm';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
|
||||
const ChatArea = ({ channelId, username }) => {
|
||||
// Cache for link metadata to prevent pop-in
|
||||
const metadataCache = new Map();
|
||||
|
||||
// Extracted LinkPreview to prevent re-renders on ChatArea updates
|
||||
const LinkPreview = ({ url }) => {
|
||||
const [metadata, setMetadata] = useState(metadataCache.get(url) || null);
|
||||
const [loading, setLoading] = useState(!metadataCache.has(url));
|
||||
const [playing, setPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (metadataCache.has(url)) {
|
||||
setMetadata(metadataCache.get(url));
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let isMounted = true;
|
||||
const fetchMeta = async () => {
|
||||
try {
|
||||
const data = await window.cryptoAPI.fetchMetadata(url);
|
||||
if (isMounted) {
|
||||
if (data) metadataCache.set(url, data);
|
||||
setMetadata(data);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch metadata", err);
|
||||
if (isMounted) setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchMeta();
|
||||
return () => { isMounted = false; };
|
||||
}, [url]);
|
||||
|
||||
// Helper to extract video ID
|
||||
const getYouTubeId = (link) => {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = link.match(regExp);
|
||||
return (match && match[2].length === 11) ? match[2] : null;
|
||||
};
|
||||
|
||||
const videoId = getYouTubeId(url);
|
||||
const isYouTube = !!videoId;
|
||||
|
||||
if (loading || !metadata || (!metadata.title && !metadata.image)) return null;
|
||||
|
||||
return (
|
||||
<div className={`link-preview ${isYouTube ? 'youtube-preview' : ''}`} style={{ borderLeftColor: metadata.themeColor || '#202225' }}>
|
||||
<div className="preview-content">
|
||||
{metadata.siteName && <div className="preview-site-name">{metadata.siteName}</div>}
|
||||
{metadata.title && (
|
||||
<a href={url} onClick={(e) => { e.preventDefault(); window.cryptoAPI.openExternal(url); }} className="preview-title">
|
||||
{metadata.title}
|
||||
</a>
|
||||
)}
|
||||
{metadata.description && <div className="preview-description">{metadata.description}</div>}
|
||||
|
||||
{isYouTube && playing && (
|
||||
<div className="youtube-video-wrapper">
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
|
||||
title={metadata.title || "YouTube video player"}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{metadata.image && (!isYouTube || !playing) && (
|
||||
<div
|
||||
className="preview-image-container"
|
||||
onClick={() => isYouTube && setPlaying(true)}
|
||||
style={isYouTube ? { cursor: 'pointer' } : {}}
|
||||
>
|
||||
<img src={metadata.image} alt="Preview" className="preview-image" />
|
||||
{isYouTube && <div className="play-icon">▶</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ChatArea = ({ channelId, channelName, username }) => {
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [socket, setSocket] = useState(null);
|
||||
@@ -50,77 +134,20 @@ const ChatArea = ({ channelId, username }) => {
|
||||
return text.match(urlRegex) || [];
|
||||
};
|
||||
|
||||
const LinkPreview = ({ url }) => {
|
||||
const [metadata, setMetadata] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const fetchMeta = async () => {
|
||||
try {
|
||||
const data = await window.cryptoAPI.fetchMetadata(url);
|
||||
if (isMounted) {
|
||||
setMetadata(data);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch metadata", err);
|
||||
if (isMounted) setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchMeta();
|
||||
return () => { isMounted = false; };
|
||||
}, [url]);
|
||||
|
||||
// Helper to extract video ID
|
||||
const getYouTubeId = (link) => {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = link.match(regExp);
|
||||
return (match && match[2].length === 11) ? match[2] : null;
|
||||
};
|
||||
|
||||
const videoId = getYouTubeId(url);
|
||||
const isYouTube = !!videoId;
|
||||
|
||||
if (loading || !metadata || (!metadata.title && !metadata.image)) return null;
|
||||
|
||||
return (
|
||||
<div className={`link-preview ${isYouTube ? 'youtube-preview' : ''}`} style={{ borderLeftColor: metadata.themeColor || '#202225' }}>
|
||||
<div className="preview-content">
|
||||
{metadata.siteName && <div className="preview-site-name">{metadata.siteName}</div>}
|
||||
{metadata.title && (
|
||||
<a href={url} onClick={(e) => { e.preventDefault(); window.cryptoAPI.openExternal(url); }} className="preview-title">
|
||||
{metadata.title}
|
||||
</a>
|
||||
)}
|
||||
{metadata.description && <div className="preview-description">{metadata.description}</div>}
|
||||
|
||||
{isYouTube && playing && (
|
||||
<div className="youtube-video-wrapper">
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
|
||||
title={metadata.title || "YouTube video player"}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{metadata.image && (!isYouTube || !playing) && (
|
||||
<div
|
||||
className="preview-image-container"
|
||||
onClick={() => isYouTube && setPlaying(true)}
|
||||
style={isYouTube ? { cursor: 'pointer' } : {}}
|
||||
>
|
||||
<img src={metadata.image} alt="Preview" className="preview-image" />
|
||||
{isYouTube && <div className="play-icon">▶</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
// Helper to verify message signature
|
||||
const verifyMessage = async (msg) => {
|
||||
if (!msg.signature || !msg.public_signing_key) return false;
|
||||
try {
|
||||
const isValid = await window.cryptoAPI.verifySignature(
|
||||
msg.public_signing_key,
|
||||
msg.ciphertext,
|
||||
msg.signature
|
||||
);
|
||||
return isValid;
|
||||
} catch (e) {
|
||||
console.error('Verification error for msg:', msg.id, e);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -130,16 +157,18 @@ const ChatArea = ({ channelId, username }) => {
|
||||
newSocket.emit('join_channel', channelId);
|
||||
|
||||
newSocket.on('recent_messages', async (msgs) => {
|
||||
const decryptedMessages = await Promise.all(msgs.map(async (msg) => {
|
||||
const processedMessages = await Promise.all(msgs.map(async (msg) => {
|
||||
const content = await decryptMessage(msg);
|
||||
return { ...msg, content };
|
||||
const isVerified = await verifyMessage(msg);
|
||||
return { ...msg, content, isVerified };
|
||||
}));
|
||||
setMessages(decryptedMessages);
|
||||
setMessages(processedMessages);
|
||||
});
|
||||
|
||||
newSocket.on('new_message', async (msg) => {
|
||||
const content = await decryptMessage(msg);
|
||||
setMessages(prev => [...prev, { ...msg, content }]);
|
||||
const isVerified = await verifyMessage(msg);
|
||||
setMessages(prev => [...prev, { ...msg, content, isVerified }]);
|
||||
});
|
||||
|
||||
return () => newSocket.close();
|
||||
@@ -163,20 +192,24 @@ const ChatArea = ({ channelId, username }) => {
|
||||
try {
|
||||
const { content: encryptedContent, iv, tag } = await window.cryptoAPI.encryptData(input, DEMO_CHANNEL_KEY);
|
||||
const ciphertext = encryptedContent + tag;
|
||||
const signature = 'placeholder_signature';
|
||||
|
||||
const senderId = localStorage.getItem('userId');
|
||||
const signingKey = sessionStorage.getItem('signingKey');
|
||||
|
||||
if (!senderId) {
|
||||
console.error('No userId found in localStorage');
|
||||
return;
|
||||
}
|
||||
if (!signingKey) {
|
||||
console.error('No signingKey found in sessionStorage. Please relogin.');
|
||||
return; // Prevent sending unsigned messages
|
||||
}
|
||||
|
||||
const messageData = {
|
||||
channelId,
|
||||
senderId,
|
||||
ciphertext,
|
||||
nonce: iv,
|
||||
signature,
|
||||
signature: await window.cryptoAPI.signMessage(signingKey, ciphertext),
|
||||
keyVersion: 1
|
||||
};
|
||||
|
||||
@@ -197,81 +230,106 @@ const ChatArea = ({ channelId, username }) => {
|
||||
return (
|
||||
<div className="chat-area">
|
||||
<div className="messages-list">
|
||||
{messages.map((msg, idx) => {
|
||||
const urls = extractUrls(msg.content);
|
||||
return (
|
||||
<div key={idx} className="message-item">
|
||||
<div className="message-avatar-wrapper">
|
||||
<div
|
||||
className="message-avatar"
|
||||
style={{ backgroundColor: getUserColor(msg.username || 'Unknown') }}
|
||||
>
|
||||
{(msg.username || '?').substring(0, 1).toUpperCase()}
|
||||
<div className="messages-content-wrapper">
|
||||
{messages.map((msg, idx) => {
|
||||
const urls = extractUrls(msg.content);
|
||||
const currentDate = new Date(msg.created_at);
|
||||
const previousDate = idx > 0 ? new Date(messages[idx - 1].created_at) : null;
|
||||
|
||||
const isNewDay = !previousDate || (
|
||||
currentDate.getDate() !== previousDate.getDate() ||
|
||||
currentDate.getMonth() !== previousDate.getMonth() ||
|
||||
currentDate.getFullYear() !== previousDate.getFullYear()
|
||||
);
|
||||
|
||||
return (
|
||||
<React.Fragment key={idx}>
|
||||
{isNewDay && (
|
||||
<div className="date-divider">
|
||||
<span>{currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="message-item">
|
||||
<div className="message-avatar-wrapper">
|
||||
<div
|
||||
className="message-avatar"
|
||||
style={{ backgroundColor: getUserColor(msg.username || 'Unknown') }}
|
||||
>
|
||||
{(msg.username || '?').substring(0, 1).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="message-body">
|
||||
<div className="message-header">
|
||||
<span className="username" style={{ color: getUserColor(msg.username || 'Unknown') }}>
|
||||
{msg.username || 'Unknown'}
|
||||
</span>
|
||||
{!msg.isVerified && (
|
||||
<span className="verification-failed" title="Signature Verification Failed!">
|
||||
<svg aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" fill="var(--danger)">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<span className="timestamp">
|
||||
{currentDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="message-content">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
{...props}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.cryptoAPI.openExternal(props.href);
|
||||
}}
|
||||
style={{ color: '#00b0f4', cursor: 'pointer', textDecoration: 'none' }}
|
||||
onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
|
||||
onMouseOut={(e) => e.target.style.textDecoration = 'none'}
|
||||
/>
|
||||
),
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter
|
||||
style={oneDark}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
p: ({ node, ...props }) => <p style={{ margin: '0 0 6px 0' }} {...props} />,
|
||||
h1: ({ node, ...props }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 700, margin: '12px 0 6px 0', lineHeight: 1.1 }} {...props} />,
|
||||
h2: ({ node, ...props }) => <h2 style={{ fontSize: '1.25rem', fontWeight: 700, margin: '10px 0 6px 0', lineHeight: 1.1 }} {...props} />,
|
||||
h3: ({ node, ...props }) => <h3 style={{ fontSize: '1.1rem', fontWeight: 700, margin: '8px 0 6px 0', lineHeight: 1.1 }} {...props} />,
|
||||
ul: ({ node, ...props }) => <ul style={{ margin: '0 0 6px 0', paddingLeft: '20px' }} {...props} />,
|
||||
ol: ({ node, ...props }) => <ol style={{ margin: '0 0 6px 0', paddingLeft: '20px' }} {...props} />,
|
||||
li: ({ node, ...props }) => <li style={{ margin: '0' }} {...props} />,
|
||||
hr: ({ node, ...props }) => <hr style={{ border: 'none', borderTop: '1px solid #4f545c', margin: '12px 0' }} {...props} />,
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
</ReactMarkdown>
|
||||
{urls.map((url, i) => (
|
||||
<LinkPreview key={i} url={url} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message-body">
|
||||
<div className="message-header">
|
||||
<span className="username" style={{ color: getUserColor(msg.username || 'Unknown') }}>
|
||||
{msg.username || 'Unknown'}
|
||||
</span>
|
||||
<span className="timestamp">
|
||||
{new Date(msg.created_at).toLocaleDateString()} at {new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="message-content">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
{...props}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.cryptoAPI.openExternal(props.href);
|
||||
}}
|
||||
style={{ color: '#00b0f4', cursor: 'pointer', textDecoration: 'none' }}
|
||||
onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
|
||||
onMouseOut={(e) => e.target.style.textDecoration = 'none'}
|
||||
/>
|
||||
),
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter
|
||||
style={oneDark}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
p: ({ node, ...props }) => <p style={{ margin: '0 0 6px 0' }} {...props} />,
|
||||
h1: ({ node, ...props }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 700, margin: '12px 0 6px 0', lineHeight: 1.1 }} {...props} />,
|
||||
h2: ({ node, ...props }) => <h2 style={{ fontSize: '1.25rem', fontWeight: 700, margin: '10px 0 6px 0', lineHeight: 1.1 }} {...props} />,
|
||||
h3: ({ node, ...props }) => <h3 style={{ fontSize: '1.1rem', fontWeight: 700, margin: '8px 0 6px 0', lineHeight: 1.1 }} {...props} />,
|
||||
ul: ({ node, ...props }) => <ul style={{ margin: '0 0 6px 0', paddingLeft: '20px' }} {...props} />,
|
||||
ol: ({ node, ...props }) => <ol style={{ margin: '0 0 6px 0', paddingLeft: '20px' }} {...props} />,
|
||||
li: ({ node, ...props }) => <li style={{ margin: '0' }} {...props} />,
|
||||
hr: ({ node, ...props }) => <hr style={{ border: 'none', borderTop: '1px solid #4f545c', margin: '12px 0' }} {...props} />,
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
</ReactMarkdown>
|
||||
{urls.map((url, i) => (
|
||||
<LinkPreview key={i} url={url} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div ref={messagesEndRef} />
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
<form className="chat-input-form" onSubmit={handleSend}>
|
||||
<div className="chat-input-wrapper">
|
||||
@@ -285,7 +343,7 @@ const ChatArea = ({ channelId, username }) => {
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={`Message #${channelId}`}
|
||||
placeholder={`Message #${channelName || channelId}`}
|
||||
rows={1}
|
||||
style={{ height: '44px' }}
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
:root {
|
||||
--bg-primary: #36393f;
|
||||
--bg-secondary: #2f3136;
|
||||
--bg-tertiary: #202225;
|
||||
--bg-primary: #1a1a1e;
|
||||
--bg-secondary: #121214;
|
||||
--bg-tertiary: #121214;
|
||||
--div-border: #222225;
|
||||
--text-normal: #dcddde;
|
||||
--text-muted: #72767d;
|
||||
--header-primary: #ffffff;
|
||||
@@ -18,7 +19,8 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -125,15 +127,18 @@ body {
|
||||
background-color: var(--bg-secondary);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.server-list {
|
||||
width: 72px;
|
||||
border-right: 1px solid var(--div-border);
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.server-icon {
|
||||
@@ -194,6 +199,8 @@ body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
/* Ensure no scrollbars on body/container */
|
||||
}
|
||||
|
||||
.chat-area {
|
||||
@@ -202,6 +209,8 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
/* CRITICAL: Allows flex item to shrink below content size */
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
@@ -263,7 +272,7 @@ body {
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-right: 0.25rem;
|
||||
cursor: pointer;
|
||||
@@ -348,7 +357,7 @@ body {
|
||||
}
|
||||
|
||||
.chat-input-wrapper {
|
||||
background-color: #40444b;
|
||||
background-color: #222327;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -427,7 +436,11 @@ body {
|
||||
padding: 10px;
|
||||
margin-top: 8px;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
overflow: hidden;
|
||||
/* Ensure content stays inside */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
@@ -451,21 +464,31 @@ body {
|
||||
text-decoration: none;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
/* Ensure long words don't overflow */
|
||||
}
|
||||
|
||||
.preview-title:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* .messages-content-wrapper */
|
||||
.messages-content-wrapper {
|
||||
/* Use margin-top: auto to push content to bottom safely */
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ... existing styles ... */
|
||||
|
||||
.preview-description {
|
||||
font-size: 14px;
|
||||
color: #dcddde;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -539,3 +562,37 @@ body {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 24px 16px 8px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.date-divider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: #42454a;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.date-divider span {
|
||||
background-color: var(--bg-primary);
|
||||
padding: 0 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.verification-failed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0.25rem;
|
||||
cursor: help;
|
||||
}
|
||||
@@ -27,7 +27,10 @@ const Chat = () => {
|
||||
activeChannel={activeChannel}
|
||||
onSelectChannel={setActiveChannel}
|
||||
/>
|
||||
<ChatArea channelId={activeChannel} />
|
||||
<ChatArea
|
||||
channelId={activeChannel}
|
||||
channelName={channels.find(c => c.id === activeChannel)?.name || activeChannel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -51,6 +51,33 @@ const Login = () => {
|
||||
console.error('MISSING USERID IN VERIFY RESPONSE!', verifyData);
|
||||
}
|
||||
|
||||
// 4. Decrypt Master Key (using DEK)
|
||||
console.log('Decrypting Master Key...');
|
||||
const encryptedMKObj = JSON.parse(verifyData.encryptedMK);
|
||||
const mkHex = await window.cryptoAPI.decryptData(
|
||||
encryptedMKObj.content,
|
||||
dek,
|
||||
encryptedMKObj.iv,
|
||||
encryptedMKObj.tag
|
||||
);
|
||||
|
||||
// 5. Decrypt Private Keys (using MK)
|
||||
console.log('Decrypting Private Keys...');
|
||||
const encryptedPrivateKeysObj = JSON.parse(verifyData.encryptedPrivateKeys);
|
||||
|
||||
// Decrypt Ed25519 Signing Key
|
||||
const edPrivObj = encryptedPrivateKeysObj.ed; // Already an object
|
||||
const signingKey = await window.cryptoAPI.decryptData(
|
||||
edPrivObj.content,
|
||||
mkHex, // MK acts as the key
|
||||
edPrivObj.iv,
|
||||
edPrivObj.tag
|
||||
);
|
||||
|
||||
// Store Signing Key in Session (Memory-like) storage
|
||||
sessionStorage.setItem('signingKey', signingKey);
|
||||
console.log('Signing Key decrypted and stored in session.');
|
||||
|
||||
localStorage.setItem('username', username);
|
||||
|
||||
// Verify immediate read back
|
||||
|
||||
Reference in New Issue
Block a user