first commit
This commit is contained in:
bryan
24
Frontend/Electron/.gitignore
vendored
Normal file
24
Frontend/Electron/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
16
Frontend/Electron/README.md
Normal file
16
Frontend/Electron/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
29
Frontend/Electron/eslint.config.js
Normal file
29
Frontend/Electron/eslint.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
13
Frontend/Electron/index.html
Normal file
13
Frontend/Electron/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>discord</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
101
Frontend/Electron/main.js
Normal file
101
Frontend/Electron/main.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import { app, BrowserWindow, ipcMain } from 'electron';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import crypto from 'node:crypto';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.cjs'),
|
||||
contextIsolation: true,
|
||||
sandbox: true,
|
||||
nodeIntegration: false,
|
||||
},
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'development' || process.argv.includes('--dev')) {
|
||||
win.loadURL('http://localhost:5173');
|
||||
win.webContents.openDevTools();
|
||||
} else {
|
||||
win.loadFile(path.join(__dirname, 'dist', 'index.html'));
|
||||
}
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
// Crypto IPC Handlers
|
||||
ipcMain.handle('crypto:deriveAuthKeys', async (_, password, salt) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
crypto.pbkdf2(password, salt, 100000, 32, 'sha512', (err, derived) => {
|
||||
if (err) reject(err);
|
||||
resolve({
|
||||
dek: derived.slice(0, 16).toString('hex'),
|
||||
dak: derived.slice(16, 32).toString('hex')
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
ipcMain.handle('crypto:encryptData', (_, plaintext, keyHex, ivHex) => {
|
||||
const key = Buffer.from(keyHex, 'hex');
|
||||
const iv = ivHex ? Buffer.from(ivHex, 'hex') : crypto.randomBytes(12);
|
||||
const cipher = crypto.createCipheriv('aes-128-gcm', key, iv);
|
||||
let encrypted = cipher.update(plaintext, 'utf8', 'hex');
|
||||
encrypted += cipher.final('hex');
|
||||
return {
|
||||
content: encrypted,
|
||||
tag: cipher.getAuthTag().toString('hex'),
|
||||
iv: iv.toString('hex')
|
||||
};
|
||||
});
|
||||
|
||||
ipcMain.handle('crypto:decryptData', (_, ciphertext, keyHex, ivHex, tagHex) => {
|
||||
const key = Buffer.from(keyHex, 'hex');
|
||||
const iv = Buffer.from(ivHex, 'hex');
|
||||
const tag = Buffer.from(tagHex, 'hex');
|
||||
const decipher = crypto.createDecipheriv('aes-128-gcm', key, iv);
|
||||
decipher.setAuthTag(tag);
|
||||
let decrypted = decipher.update(ciphertext, 'hex', 'utf8');
|
||||
decrypted += decipher.final('utf8');
|
||||
return decrypted;
|
||||
});
|
||||
|
||||
ipcMain.handle('crypto:generateKeys', async () => {
|
||||
const { publicKey: rsaPub, privateKey: rsaPriv } = crypto.generateKeyPairSync('rsa', {
|
||||
modulusLength: 2048,
|
||||
publicKeyEncoding: { type: 'spki', format: 'pem' },
|
||||
privateKeyEncoding: { type: 'pkcs8', format: 'pem' }
|
||||
});
|
||||
const { publicKey: edPub, privateKey: edPriv } = crypto.generateKeyPairSync('ed25519', {
|
||||
publicKeyEncoding: { type: 'spki', format: 'pem' },
|
||||
privateKeyEncoding: { type: 'pkcs8', format: 'pem' }
|
||||
});
|
||||
return { rsaPub, rsaPriv, edPub, edPriv };
|
||||
});
|
||||
|
||||
ipcMain.handle('crypto:randomBytes', (_, size) => {
|
||||
return crypto.randomBytes(size).toString('hex');
|
||||
});
|
||||
|
||||
ipcMain.handle('crypto:sha256', (_, data) => {
|
||||
return crypto.createHash('sha256').update(data).digest('hex');
|
||||
});
|
||||
|
||||
createWindow();
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
9620
Frontend/Electron/package-lock.json
generated
Normal file
9620
Frontend/Electron/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
Frontend/Electron/package.json
Normal file
40
Frontend/Electron/package.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "discord",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"main": "main.js",
|
||||
"homepage": "./",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"electron:dev": "concurrently \"vite\" \"wait-on tcp:5173 && electron . --dev\"",
|
||||
"electron:build": "vite build && electron-builder"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^7.11.0",
|
||||
"react-syntax-highlighter": "^16.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"socket.io-client": "^4.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"concurrently": "^9.1.2",
|
||||
"electron": "^33.2.1",
|
||||
"electron-builder": "^25.1.8",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"vite": "^7.2.4",
|
||||
"wait-on": "^8.0.1"
|
||||
}
|
||||
}
|
||||
10
Frontend/Electron/preload.cjs
Normal file
10
Frontend/Electron/preload.cjs
Normal file
@@ -0,0 +1,10 @@
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('cryptoAPI', {
|
||||
deriveAuthKeys: (password, salt) => ipcRenderer.invoke('crypto:deriveAuthKeys', password, salt),
|
||||
encryptData: (plaintext, keyHex, ivHex) => ipcRenderer.invoke('crypto:encryptData', plaintext, keyHex, ivHex),
|
||||
decryptData: (ciphertext, keyHex, ivHex, tagHex) => ipcRenderer.invoke('crypto:decryptData', ciphertext, keyHex, ivHex, tagHex),
|
||||
generateKeys: () => ipcRenderer.invoke('crypto:generateKeys'),
|
||||
randomBytes: (size) => ipcRenderer.invoke('crypto:randomBytes', size),
|
||||
sha256: (data) => ipcRenderer.invoke('crypto:sha256', data)
|
||||
});
|
||||
1
Frontend/Electron/public/vite.svg
Normal file
1
Frontend/Electron/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
42
Frontend/Electron/src/App.css
Normal file
42
Frontend/Electron/src/App.css
Normal file
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
17
Frontend/Electron/src/App.jsx
Normal file
17
Frontend/Electron/src/App.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import Login from './pages/Login';
|
||||
import Register from './pages/Register';
|
||||
import Chat from './pages/Chat';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
<Route path="/chat" element={<Chat />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
1
Frontend/Electron/src/assets/react.svg
Normal file
1
Frontend/Electron/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
160
Frontend/Electron/src/components/ChatArea.jsx
Normal file
160
Frontend/Electron/src/components/ChatArea.jsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { io } from 'socket.io-client';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
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 }) => {
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [socket, setSocket] = useState(null);
|
||||
const messagesEndRef = useRef(null);
|
||||
|
||||
// Mock Key for demo (In real app, derive from Channel Key Bundle)
|
||||
const DEMO_CHANNEL_KEY = '000102030405060708090a0b0c0d0e0f';
|
||||
|
||||
// Helper to decrypt message
|
||||
const decryptMessage = async (msg) => {
|
||||
try {
|
||||
// Check if ciphertext has appended tag
|
||||
// Tag is 16 bytes = 32 hex chars
|
||||
const TAG_LENGTH = 32;
|
||||
if (!msg.ciphertext || msg.ciphertext.length < TAG_LENGTH) {
|
||||
// Try decrypting without tag if it was legacy (though we just started)
|
||||
// Or maybe it's just raw text if not encrypted? No, we always encrypt.
|
||||
console.warn('Message missing tag, trying raw decrypt or fail');
|
||||
return '[Invalid Encrypted Message]';
|
||||
}
|
||||
|
||||
const tag = msg.ciphertext.slice(-TAG_LENGTH);
|
||||
const content = msg.ciphertext.slice(0, -TAG_LENGTH);
|
||||
|
||||
const decrypted = await window.cryptoAPI.decryptData(content, DEMO_CHANNEL_KEY, msg.nonce, tag);
|
||||
return decrypted;
|
||||
} catch (e) {
|
||||
console.error('Decryption failed for msg:', msg.id, e);
|
||||
return '[Decryption Error]';
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const newSocket = io('http://localhost:3000');
|
||||
setSocket(newSocket);
|
||||
|
||||
newSocket.emit('join_channel', channelId);
|
||||
|
||||
newSocket.on('recent_messages', async (msgs) => {
|
||||
const decryptedMessages = await Promise.all(msgs.map(async (msg) => {
|
||||
const content = await decryptMessage(msg);
|
||||
return { ...msg, content };
|
||||
}));
|
||||
setMessages(decryptedMessages);
|
||||
});
|
||||
|
||||
newSocket.on('new_message', async (msg) => {
|
||||
const content = await decryptMessage(msg);
|
||||
setMessages(prev => [...prev, { ...msg, content }]);
|
||||
});
|
||||
|
||||
return () => newSocket.close();
|
||||
}, [channelId]);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
const handleSend = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim()) return;
|
||||
|
||||
try {
|
||||
// Encrypt message
|
||||
const { content: encryptedContent, iv, tag } = await window.cryptoAPI.encryptData(input, DEMO_CHANNEL_KEY);
|
||||
|
||||
// Append tag to ciphertext for storage
|
||||
const ciphertext = encryptedContent + tag;
|
||||
|
||||
// Sign message (placeholder)
|
||||
const signature = 'placeholder_signature';
|
||||
|
||||
const messageData = {
|
||||
channelId,
|
||||
senderId: '8b105be1-981e-4200-bb07-68d0714870c2', // Placeholder default, gets overwritten below
|
||||
ciphertext,
|
||||
nonce: iv,
|
||||
signature,
|
||||
keyVersion: 1
|
||||
};
|
||||
|
||||
const storedUserId = localStorage.getItem('userId');
|
||||
if (storedUserId) messageData.senderId = storedUserId;
|
||||
|
||||
socket.emit('send_message', messageData);
|
||||
setInput('');
|
||||
} catch (err) {
|
||||
console.error('Send error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="chat-area">
|
||||
<div className="messages-list">
|
||||
{messages.map((msg, idx) => (
|
||||
<div key={idx} className="message-item">
|
||||
<div className="message-header">
|
||||
<span className="username">{msg.username || 'Unknown'}</span>
|
||||
<span className="timestamp">{new Date(msg.created_at).toLocaleTimeString()}</span>
|
||||
</div>
|
||||
<div className="message-content">
|
||||
<ReactMarkdown
|
||||
pluginPlugins={[remarkGfm]}
|
||||
components={{
|
||||
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>
|
||||
)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
<form className="chat-input-form" onSubmit={handleSend}>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={`Message #${channelId}`}
|
||||
rows={1}
|
||||
style={{ resize: 'none' }} // Disable manual resize
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatArea;
|
||||
25
Frontend/Electron/src/components/Sidebar.jsx
Normal file
25
Frontend/Electron/src/components/Sidebar.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
const Sidebar = ({ channels, activeChannel, onSelectChannel }) => {
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<div className="server-list">
|
||||
<div className="server-icon active">H</div>
|
||||
</div>
|
||||
<div className="channel-list">
|
||||
<div className="channel-header">Secure Chat</div>
|
||||
{channels.map(channel => (
|
||||
<div
|
||||
key={channel.id}
|
||||
className={`channel-item ${activeChannel === channel.id ? 'active' : ''}`}
|
||||
onClick={() => onSelectChannel(channel.id)}
|
||||
>
|
||||
# {channel.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
285
Frontend/Electron/src/index.css
Normal file
285
Frontend/Electron/src/index.css
Normal file
@@ -0,0 +1,285 @@
|
||||
:root {
|
||||
--bg-primary: #36393f;
|
||||
--bg-secondary: #2f3136;
|
||||
--bg-tertiary: #202225;
|
||||
--text-normal: #dcddde;
|
||||
--text-muted: #72767d;
|
||||
--header-primary: #ffffff;
|
||||
--header-secondary: #b9bbbe;
|
||||
--interactive-normal: #b9bbbe;
|
||||
--interactive-hover: #dcddde;
|
||||
--interactive-active: #ffffff;
|
||||
--brand-experiment: #5865f2;
|
||||
--brand-experiment-hover: #4752c4;
|
||||
--input-background: #202225;
|
||||
--danger: #ed4245;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-image: url('https://discord.com/assets/f9e794909795f472.svg');
|
||||
/* Placeholder background */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 32px;
|
||||
border-radius: 5px;
|
||||
width: 480px;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.auth-header h2 {
|
||||
color: var(--header-primary);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.auth-header p {
|
||||
color: var(--header-secondary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
color: var(--header-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: var(--input-background);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
color: var(--text-normal);
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
border-color: var(--brand-experiment);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: var(--brand-experiment);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.auth-button:hover {
|
||||
background-color: var(--brand-experiment-hover);
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.auth-footer a {
|
||||
color: var(--brand-experiment);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
background-color: var(--bg-secondary);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.server-list {
|
||||
width: 72px;
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.server-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-normal);
|
||||
cursor: pointer;
|
||||
transition: border-radius 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.server-icon:hover,
|
||||
.server-icon.active {
|
||||
border-radius: 30%;
|
||||
background-color: var(--brand-experiment);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.channel-list {
|
||||
flex: 1;
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.channel-header {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--header-primary);
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.channel-item {
|
||||
padding: 8px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.channel-item:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--interactive-hover);
|
||||
}
|
||||
|
||||
.channel-item.active {
|
||||
background-color: rgba(79, 84, 92, 0.32);
|
||||
color: var(--interactive-active);
|
||||
}
|
||||
|
||||
/* Chat Area */
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
background-color: var(--bg-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.username {
|
||||
color: var(--header-primary);
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
color: var(--text-normal);
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-input-form {
|
||||
padding: 0 16px 24px;
|
||||
}
|
||||
|
||||
.chat-input-form textarea {
|
||||
width: 100%;
|
||||
padding: 11px 16px;
|
||||
background-color: #40444b;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: var(--text-normal);
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
height: auto;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.chat-input-form textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Markdown Styles */
|
||||
.message-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-content code {
|
||||
background-color: #2f3136;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.message-content pre {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.message-content blockquote {
|
||||
border-left: 4px solid var(--interactive-normal);
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
13
Frontend/Electron/src/main.jsx
Normal file
13
Frontend/Electron/src/main.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { HashRouter } from 'react-router-dom';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<HashRouter>
|
||||
<App />
|
||||
</HashRouter>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
35
Frontend/Electron/src/pages/Chat.jsx
Normal file
35
Frontend/Electron/src/pages/Chat.jsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import ChatArea from '../components/ChatArea';
|
||||
|
||||
const Chat = () => {
|
||||
const [activeChannel, setActiveChannel] = useState(null);
|
||||
const [channels, setChannels] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('http://localhost:3000/api/channels')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setChannels(data);
|
||||
if (data.length > 0 && !activeChannel) {
|
||||
setActiveChannel(data[0].id);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Error fetching channels:', err));
|
||||
}, []);
|
||||
|
||||
if (!activeChannel) return <div style={{ color: 'white', padding: 20 }}>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<Sidebar
|
||||
channels={channels}
|
||||
activeChannel={activeChannel}
|
||||
onSelectChannel={setActiveChannel}
|
||||
/>
|
||||
<ChatArea channelId={activeChannel} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
100
Frontend/Electron/src/pages/Login.jsx
Normal file
100
Frontend/Electron/src/pages/Login.jsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
const Login = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
console.log('Starting login for:', username);
|
||||
|
||||
// 1. Get Salt
|
||||
const saltRes = await fetch('http://localhost:3000/api/auth/login/salt', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username })
|
||||
});
|
||||
const { salt } = await saltRes.json();
|
||||
console.log('Got salt');
|
||||
|
||||
// 2. Derive Keys (DEK, DAK)
|
||||
const { dek, dak } = await window.cryptoAPI.deriveAuthKeys(password, salt);
|
||||
console.log('Derived keys');
|
||||
|
||||
// 3. Verify with Server
|
||||
const verifyRes = await fetch('http://localhost:3000/api/auth/login/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, dak })
|
||||
});
|
||||
|
||||
const verifyData = await verifyRes.json();
|
||||
|
||||
if (!verifyRes.ok) {
|
||||
throw new Error(verifyData.error || 'Login failed');
|
||||
}
|
||||
|
||||
console.log('Login verified');
|
||||
if (verifyData.userId) {
|
||||
localStorage.setItem('userId', verifyData.userId);
|
||||
}
|
||||
localStorage.setItem('username', username);
|
||||
navigate('/chat');
|
||||
} catch (err) {
|
||||
console.error('Login error:', err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-box">
|
||||
<div className="auth-header">
|
||||
<h2>Welcome Back!</h2>
|
||||
<p>We're so excited to see you again!</p>
|
||||
</div>
|
||||
{error && <div style={{ color: 'red', marginBottom: 10, textAlign: 'center' }}>{error}</div>}
|
||||
<form onSubmit={handleLogin}>
|
||||
<div className="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="auth-button" disabled={loading}>
|
||||
{loading ? 'Logging in...' : 'Log In'}
|
||||
</button>
|
||||
</form>
|
||||
<div className="auth-footer">
|
||||
Need an account? <Link to="/register">Register</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
129
Frontend/Electron/src/pages/Register.jsx
Normal file
129
Frontend/Electron/src/pages/Register.jsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
const Register = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleRegister = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
console.log('Starting registration for:', username);
|
||||
|
||||
// 1. Generate Salt and Master Key (MK)
|
||||
const salt = await window.cryptoAPI.randomBytes(16);
|
||||
const mk = await window.cryptoAPI.randomBytes(16); // 128-bit MK
|
||||
|
||||
console.log('Generated Salt and MK');
|
||||
|
||||
// 2. Derive Keys (DEK, DAK)
|
||||
const { dek, dak } = await window.cryptoAPI.deriveAuthKeys(password, salt);
|
||||
console.log('Derived keys');
|
||||
|
||||
// 3. Encrypt MK with DEK
|
||||
const encryptedMKObj = await window.cryptoAPI.encryptData(mk, dek);
|
||||
const encryptedMK = JSON.stringify(encryptedMKObj); // Store as JSON string {content, tag, iv}
|
||||
|
||||
// 4. Hash DAK for Auth Proof
|
||||
const hak = await window.cryptoAPI.sha256(dak);
|
||||
|
||||
// 5. Generate Key Pairs
|
||||
const keys = await window.cryptoAPI.generateKeys();
|
||||
|
||||
// 6. Encrypt Private Keys with MK
|
||||
// We need to encrypt the private keys so the server can store them safely
|
||||
// MK is used to encrypt these.
|
||||
const encryptedRsaPriv = await window.cryptoAPI.encryptData(keys.rsaPriv, mk);
|
||||
const encryptedEdPriv = await window.cryptoAPI.encryptData(keys.edPriv, mk);
|
||||
|
||||
const encryptedPrivateKeys = JSON.stringify({
|
||||
rsa: encryptedRsaPriv,
|
||||
ed: encryptedEdPriv
|
||||
});
|
||||
|
||||
// 7. Send to Backend
|
||||
const payload = {
|
||||
username,
|
||||
salt,
|
||||
encryptedMK,
|
||||
hak,
|
||||
publicKey: keys.rsaPub,
|
||||
signingKey: keys.edPub,
|
||||
encryptedPrivateKeys // Note: Schema might need this column or we pack it into another
|
||||
};
|
||||
|
||||
// NOTE: The schema in overview.md had 'Encrypted Private Keys' in the text but not explicitly in the SQL CREATE TABLE snippet provided in the prompt's overview.md (it was in the text description).
|
||||
// The SQL snippet had: encrypted_master_key, hashed_auth_key, public_identity_key, public_signing_key.
|
||||
// It did NOT have a column for encrypted_private_keys in the SQL block in overview.md.
|
||||
// I should check schema.sql I created.
|
||||
|
||||
const response = await fetch('http://localhost:3000/api/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Registration failed');
|
||||
}
|
||||
|
||||
console.log('Registration successful:', data);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
console.error('Registration error:', err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-box">
|
||||
<div className="auth-header">
|
||||
<h2>Create an Account</h2>
|
||||
<p>Join the secure chat!</p>
|
||||
</div>
|
||||
{error && <div style={{ color: 'red', marginBottom: 10, textAlign: 'center' }}>{error}</div>}
|
||||
<form onSubmit={handleRegister}>
|
||||
<div className="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="auth-button" disabled={loading}>
|
||||
{loading ? 'Generating Keys...' : 'Continue'}
|
||||
</button>
|
||||
</form>
|
||||
<div className="auth-footer">
|
||||
Already have an account? <Link to="/">Log In</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
8
Frontend/Electron/vite.config.js
Normal file
8
Frontend/Electron/vite.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: './',
|
||||
})
|
||||
Reference in New Issue
Block a user