10 Commits
1.0.1 ... 1.1.0

Author SHA1 Message Date
2ef6a9f30b bump version 1.0.1 -> 1.1.0
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m11s
Build & Push Docker Image / build (release) Successful in 1m12s
2026-02-24 20:36:10 +01:00
8be973a166 Add mail verification and use .env insteads of environment in compose
Some checks failed
Build & Push Docker Image / build (push) Has been cancelled
2026-02-24 20:35:08 +01:00
3898bf1b4b fix branding again
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m7s
2026-02-24 19:52:34 +01:00
69a3c83436 fix branding
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m8s
2026-02-24 19:47:23 +01:00
cd98ee4cc7 add branding option
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m10s
2026-02-24 19:43:59 +01:00
d8dcb6e628 Add sharing rooms
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m8s
2026-02-24 19:32:57 +01:00
a150bd1447 Add guest link to welcome message
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m7s
2026-02-24 19:19:19 +01:00
49769d4b51 change guest access
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m8s
2026-02-24 19:14:55 +01:00
9001aea8cd add avatar support for BBB
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m10s
2026-02-24 19:05:41 +01:00
cf74ed31af some fixing
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m6s
2026-02-24 18:55:21 +01:00
32 changed files with 1437 additions and 178 deletions

View File

@@ -12,9 +12,24 @@ JWT_SECRET=your-super-secret-jwt-key-change-this
# DATABASE_URL=postgres://user:password@localhost:5432/redlight
DATABASE_URL=
POSTGRES_USER=redlight
POSTGRES_PASSWORD=redlight
POSTGRES_DB=redlight
# SQLite file path (only used when DATABASE_URL is not set)
# SQLITE_PATH=./redlight.db
# Default Admin Account (created on first run)
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=admin123
# SMTP Configuration (for email verification)
# If not set, registration works without email verification
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=noreply@example.com
SMTP_PASS=your-smtp-password
SMTP_FROM=noreply@example.com
# App URL (used for verification links, auto-detected if not set)
# APP_URL=https://your-domain.com

View File

@@ -30,7 +30,7 @@ COPY server/ ./server/
COPY --from=builder /app/dist ./dist
# Create uploads directory
RUN mkdir -p uploads/avatars
RUN mkdir -p uploads/avatars uploads/branding
ENV NODE_ENV=production
ENV PORT=3001

View File

@@ -4,13 +4,7 @@ services:
restart: unless-stopped
ports:
- "3001:3001"
environment:
DATABASE_URL: postgres://redlight:redlight@postgres:5432/redlight
BBB_URL: https://your-bbb-server.com/bigbluebutton/api/
BBB_SECRET: your-bbb-shared-secret
JWT_SECRET: change-me-to-a-random-secret
ADMIN_EMAIL: admin@example.com
ADMIN_PASSWORD: admin123
env_file: ".env"
volumes:
- uploads:/app/uploads
depends_on:
@@ -20,10 +14,7 @@ services:
postgres:
image: postgres:17-alpine
restart: unless-stopped
environment:
POSTGRES_USER: redlight
POSTGRES_PASSWORD: redlight
POSTGRES_DB: redlight
env_file: ".env"
volumes:
- pgdata:/var/lib/postgresql/data
healthcheck:

111
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "redlight",
"version": "1.0.0",
"version": "1.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "redlight",
"version": "1.0.0",
"version": "1.1.0",
"dependencies": {
"axios": "^1.7.0",
"bcryptjs": "^2.4.3",
@@ -17,11 +17,14 @@
"express": "^4.21.0",
"jsonwebtoken": "^9.0.0",
"lucide-react": "^0.460.0",
"multer": "^2.0.2",
"nodemailer": "^8.0.1",
"pg": "^8.18.0",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react-hot-toast": "^2.4.0",
"react-router-dom": "^6.28.0",
"uuid": "^13.0.0",
"xml2js": "^0.6.0"
},
"devDependencies": {
@@ -1333,6 +1336,12 @@
"node": ">= 8"
}
},
"node_modules/append-field": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
"integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
"license": "MIT"
},
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -1599,6 +1608,23 @@
"integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
"license": "BSD-3-Clause"
},
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"license": "MIT"
},
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
"dependencies": {
"streamsearch": "^1.1.0"
},
"engines": {
"node": ">=10.16.0"
}
},
"node_modules/bytes": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -1794,6 +1820,21 @@
"node": ">= 6"
}
},
"node_modules/concat-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
"engines": [
"node >= 6.0"
],
"license": "MIT",
"dependencies": {
"buffer-from": "^1.0.0",
"inherits": "^2.0.3",
"readable-stream": "^3.0.2",
"typedarray": "^0.0.6"
}
},
"node_modules/concurrently": {
"version": "9.2.1",
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
@@ -3022,6 +3063,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
"license": "MIT",
"dependencies": {
"minimist": "^1.2.6"
},
"bin": {
"mkdirp": "bin/cmd.js"
}
},
"node_modules/mkdirp-classic": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
@@ -3034,6 +3087,24 @@
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"license": "MIT"
},
"node_modules/multer": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/multer/-/multer-2.0.2.tgz",
"integrity": "sha512-u7f2xaZ/UG8oLXHvtF/oWTRvT44p9ecwBBqTwgJVq0+4BW1g8OW01TyMEGWBHbyMOYVHXslaut7qEQ1meATXgw==",
"license": "MIT",
"dependencies": {
"append-field": "^1.0.0",
"busboy": "^1.6.0",
"concat-stream": "^2.0.0",
"mkdirp": "^0.5.6",
"object-assign": "^4.1.1",
"type-is": "^1.6.18",
"xtend": "^4.0.2"
},
"engines": {
"node": ">= 10.16.0"
}
},
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -3111,6 +3182,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/nodemailer": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.1.tgz",
"integrity": "sha512-5kcldIXmaEjZcHR6F28IKGSgpmZHaF1IXLWFTG+Xh3S+Cce4MiakLtWY+PlBU69fLbRa8HlaGIrC/QolUpHkhg==",
"license": "MIT-0",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4168,6 +4248,14 @@
"node": ">= 0.8"
}
},
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -4469,6 +4557,12 @@
"node": ">= 0.6"
}
},
"node_modules/typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
"license": "MIT"
},
"node_modules/unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -4524,6 +4618,19 @@
"node": ">= 0.4.0"
}
},
"node_modules/uuid": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
"integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
"funding": [
"https://github.com/sponsors/broofa",
"https://github.com/sponsors/ctavan"
],
"license": "MIT",
"bin": {
"uuid": "dist-node/bin/uuid"
}
},
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

View File

@@ -1,7 +1,7 @@
{
"name": "redlight",
"private": true,
"version": "1.0.1",
"version": "1.1.0",
"type": "module",
"scripts": {
"dev": "concurrently -n client,server -c blue,green \"vite\" \"node --watch server/index.js\"",
@@ -21,11 +21,14 @@
"express": "^4.21.0",
"jsonwebtoken": "^9.0.0",
"lucide-react": "^0.460.0",
"multer": "^2.0.2",
"nodemailer": "^8.0.1",
"pg": "^8.18.0",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react-hot-toast": "^2.4.0",
"react-router-dom": "^6.28.0",
"uuid": "^13.0.0",
"xml2js": "^0.6.0"
},
"devDependencies": {

Binary file not shown.

Binary file not shown.

View File

@@ -39,14 +39,25 @@ function getRoomPasswords(uid) {
return { moderatorPW: modPw, attendeePW: attPw };
}
export async function createMeeting(room) {
export async function createMeeting(room, logoutURL) {
const { moderatorPW, attendeePW } = getRoomPasswords(room.uid);
// Build welcome message with guest invite link
let welcome = room.welcome_message || 'Willkommen!';
if (logoutURL) {
const guestLink = `${logoutURL}/join/${room.uid}`;
welcome += `<br><br>To invite other participants, share this link:<br><a href="${guestLink}">${guestLink}</a>`;
if (room.access_code) {
welcome += `<br>Access Code: <b>${room.access_code}</b>`;
}
}
const params = {
meetingID: room.uid,
name: room.name,
attendeePW,
moderatorPW,
welcome: room.welcome_message || 'Willkommen!',
welcome,
record: room.record_meeting ? 'true' : 'false',
autoStartRecording: 'false',
allowStartStopRecording: 'true',
@@ -54,6 +65,9 @@ export async function createMeeting(room) {
'meta_bbb-origin': 'Redlight',
'meta_bbb-origin-server-name': 'Redlight',
};
if (logoutURL) {
params.logoutURL = logoutURL;
}
if (room.max_participants > 0) {
params.maxParticipants = room.max_participants.toString();
}
@@ -63,7 +77,7 @@ export async function createMeeting(room) {
return apiCall('create', params);
}
export async function joinMeeting(uid, name, isModerator = false) {
export async function joinMeeting(uid, name, isModerator = false, avatarURL = null) {
const { moderatorPW, attendeePW } = getRoomPasswords(uid);
const params = {
meetingID: uid,
@@ -71,6 +85,9 @@ export async function joinMeeting(uid, name, isModerator = false) {
password: isModerator ? moderatorPW : attendeePW,
redirect: 'true',
};
if (avatarURL) {
params.avatarURL = avatarURL;
}
return buildUrl('join', params);
}

View File

@@ -134,6 +134,9 @@ export async function initDatabase() {
theme TEXT DEFAULT 'dark',
avatar_color TEXT DEFAULT '#6366f1',
avatar_image TEXT DEFAULT NULL,
email_verified INTEGER DEFAULT 0,
verification_token TEXT,
verification_token_expires TIMESTAMP,
created_at TIMESTAMP DEFAULT NOW(),
updated_at TIMESTAMP DEFAULT NOW()
);
@@ -157,9 +160,25 @@ export async function initDatabase() {
updated_at TIMESTAMP DEFAULT NOW()
);
CREATE TABLE IF NOT EXISTS room_shares (
id SERIAL PRIMARY KEY,
room_id INTEGER NOT NULL REFERENCES rooms(id) ON DELETE CASCADE,
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
created_at TIMESTAMP DEFAULT NOW(),
UNIQUE(room_id, user_id)
);
CREATE INDEX IF NOT EXISTS idx_rooms_user_id ON rooms(user_id);
CREATE INDEX IF NOT EXISTS idx_rooms_uid ON rooms(uid);
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_room_shares_room_id ON room_shares(room_id);
CREATE INDEX IF NOT EXISTS idx_room_shares_user_id ON room_shares(user_id);
CREATE TABLE IF NOT EXISTS settings (
key TEXT PRIMARY KEY,
value TEXT,
updated_at TIMESTAMP DEFAULT NOW()
);
`);
} else {
await db.exec(`
@@ -173,6 +192,9 @@ export async function initDatabase() {
theme TEXT DEFAULT 'dark',
avatar_color TEXT DEFAULT '#6366f1',
avatar_image TEXT DEFAULT NULL,
email_verified INTEGER DEFAULT 0,
verification_token TEXT,
verification_token_expires DATETIME,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
@@ -197,9 +219,27 @@ export async function initDatabase() {
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE TABLE IF NOT EXISTS room_shares (
id INTEGER PRIMARY KEY AUTOINCREMENT,
room_id INTEGER NOT NULL,
user_id INTEGER NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
UNIQUE(room_id, user_id),
FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_rooms_user_id ON rooms(user_id);
CREATE INDEX IF NOT EXISTS idx_rooms_uid ON rooms(uid);
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_room_shares_room_id ON room_shares(room_id);
CREATE INDEX IF NOT EXISTS idx_room_shares_user_id ON room_shares(user_id);
CREATE TABLE IF NOT EXISTS settings (
key TEXT PRIMARY KEY,
value TEXT,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
`);
}
@@ -213,6 +253,19 @@ export async function initDatabase() {
if (!(await db.columnExists('rooms', 'moderator_code'))) {
await db.exec('ALTER TABLE rooms ADD COLUMN moderator_code TEXT');
}
if (!(await db.columnExists('users', 'email_verified'))) {
await db.exec('ALTER TABLE users ADD COLUMN email_verified INTEGER DEFAULT 0');
}
if (!(await db.columnExists('users', 'verification_token'))) {
await db.exec('ALTER TABLE users ADD COLUMN verification_token TEXT');
}
if (!(await db.columnExists('users', 'verification_token_expires'))) {
if (isPostgres) {
await db.exec('ALTER TABLE users ADD COLUMN verification_token_expires TIMESTAMP');
} else {
await db.exec('ALTER TABLE users ADD COLUMN verification_token_expires DATETIME');
}
}
// ── Default admin ───────────────────────────────────────────────────────
const adminEmail = process.env.ADMIN_EMAIL || 'admin@example.com';
@@ -222,7 +275,7 @@ export async function initDatabase() {
if (!existingAdmin) {
const hash = bcrypt.hashSync(adminPassword, 12);
await db.run(
'INSERT INTO users (name, email, password_hash, role) VALUES (?, ?, ?, ?)',
'INSERT INTO users (name, email, password_hash, role, email_verified) VALUES (?, ?, ?, ?, 1)',
['Administrator', adminEmail, hash, 'admin']
);
console.log(`✅ Default admin created: ${adminEmail}`);

70
server/config/mailer.js Normal file
View File

@@ -0,0 +1,70 @@
import nodemailer from 'nodemailer';
let transporter;
export function initMailer() {
const host = process.env.SMTP_HOST;
const port = parseInt(process.env.SMTP_PORT || '587', 10);
const user = process.env.SMTP_USER;
const pass = process.env.SMTP_PASS;
if (!host || !user || !pass) {
console.warn('⚠️ SMTP not configured email verification disabled');
return false;
}
transporter = nodemailer.createTransport({
host,
port,
secure: port === 465,
auth: { user, pass },
});
console.log('✅ SMTP mailer configured');
return true;
}
export function isMailerConfigured() {
return !!transporter;
}
/**
* Send the verification email with a clickable link.
* @param {string} to recipient email
* @param {string} name user's display name
* @param {string} verifyUrl full verification URL
* @param {string} appName branding app name (default "Redlight")
*/
export async function sendVerificationEmail(to, name, verifyUrl, appName = 'Redlight') {
if (!transporter) {
throw new Error('SMTP not configured');
}
const from = process.env.SMTP_FROM || process.env.SMTP_USER;
await transporter.sendMail({
from: `"${appName}" <${from}>`,
to,
subject: `${appName} E-Mail bestätigen / Verify your email`,
html: `
<div style="font-family:Arial,sans-serif;max-width:520px;margin:0 auto;padding:32px;background:#1e1e2e;color:#cdd6f4;border-radius:12px;">
<h2 style="color:#cba6f7;margin-top:0;">Hey ${name} 👋</h2>
<p>Bitte bestätige deine E-Mail-Adresse, indem du auf den folgenden Button klickst:</p>
<p style="text-align:center;margin:28px 0;">
<a href="${verifyUrl}"
style="display:inline-block;background:#cba6f7;color:#1e1e2e;padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:bold;">
E-Mail bestätigen
</a>
</p>
<p style="font-size:13px;color:#7f849c;">
Oder kopiere diesen Link in deinen Browser:<br/>
<a href="${verifyUrl}" style="color:#89b4fa;word-break:break-all;">${verifyUrl}</a>
</p>
<p style="font-size:13px;color:#7f849c;">Der Link ist 24 Stunden gültig.</p>
<hr style="border:none;border-top:1px solid #313244;margin:24px 0;"/>
<p style="font-size:12px;color:#585b70;">Falls du dich nicht registriert hast, ignoriere diese E-Mail.</p>
</div>
`,
text: `Hey ${name},\n\nBitte bestätige deine E-Mail: ${verifyUrl}\n\nDer Link ist 24 Stunden gültig.\n\n ${appName}`,
});
}

View File

@@ -4,10 +4,12 @@ import cors from 'cors';
import path from 'path';
import { fileURLToPath } from 'url';
import { initDatabase } from './config/database.js';
import { initMailer } from './config/mailer.js';
import authRoutes from './routes/auth.js';
import roomRoutes from './routes/rooms.js';
import recordingRoutes from './routes/recordings.js';
import adminRoutes from './routes/admin.js';
import brandingRoutes from './routes/branding.js';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
@@ -15,6 +17,9 @@ const __dirname = path.dirname(__filename);
const app = express();
const PORT = process.env.PORT || 3001;
// Trust proxy for correct req.protocol behind reverse proxy
app.set('trust proxy', true);
// Middleware
app.use(cors());
app.use(express.json());
@@ -22,12 +27,14 @@ app.use(express.json());
// Initialize database & start server
async function start() {
await initDatabase();
initMailer();
// API Routes
app.use('/api/auth', authRoutes);
app.use('/api/rooms', roomRoutes);
app.use('/api/recordings', recordingRoutes);
app.use('/api/admin', adminRoutes);
app.use('/api/branding', brandingRoutes);
// Serve static files in production
if (process.env.NODE_ENV === 'production') {

View File

@@ -1,10 +1,12 @@
import { Router } from 'express';
import bcrypt from 'bcryptjs';
import { v4 as uuidv4 } from 'uuid';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import { getDb } from '../config/database.js';
import { authenticateToken, generateToken } from '../middleware/auth.js';
import { isMailerConfigured, sendVerificationEmail } from '../config/mailer.js';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
@@ -37,8 +39,36 @@ router.post('/register', async (req, res) => {
}
const hash = bcrypt.hashSync(password, 12);
// If SMTP is configured, require email verification
if (isMailerConfigured()) {
const verificationToken = uuidv4();
const expires = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
await db.run(
'INSERT INTO users (name, email, password_hash, email_verified, verification_token, verification_token_expires) VALUES (?, ?, ?, 0, ?, ?)',
[name, email.toLowerCase(), hash, verificationToken, expires]
);
// Build verification URL
const baseUrl = process.env.APP_URL || `${req.protocol}://${req.get('host')}`;
const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
// Load app name from branding settings
const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
let appName = 'Redlight';
if (brandingSetting?.value) {
try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
}
await sendVerificationEmail(email.toLowerCase(), name, verifyUrl, appName);
return res.status(201).json({ needsVerification: true, message: 'Verifizierungs-E-Mail wurde gesendet' });
}
// No SMTP configured register and login immediately (legacy behaviour)
const result = await db.run(
'INSERT INTO users (name, email, password_hash) VALUES (?, ?, ?)',
'INSERT INTO users (name, email, password_hash, email_verified) VALUES (?, ?, ?, 1)',
[name, email.toLowerCase(), hash]
);
@@ -52,6 +82,86 @@ router.post('/register', async (req, res) => {
}
});
// GET /api/auth/verify-email?token=...
router.get('/verify-email', async (req, res) => {
try {
const { token } = req.query;
if (!token) {
return res.status(400).json({ error: 'Token fehlt' });
}
const db = getDb();
const user = await db.get(
'SELECT id, verification_token_expires FROM users WHERE verification_token = ? AND email_verified = 0',
[token]
);
if (!user) {
return res.status(400).json({ error: 'Ungültiger oder bereits verwendeter Token' });
}
if (new Date(user.verification_token_expires) < new Date()) {
return res.status(400).json({ error: 'Token ist abgelaufen. Bitte registriere dich erneut.' });
}
await db.run(
'UPDATE users SET email_verified = 1, verification_token = NULL, verification_token_expires = NULL, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
[user.id]
);
res.json({ verified: true, message: 'E-Mail erfolgreich verifiziert' });
} catch (err) {
console.error('Verify email error:', err);
res.status(500).json({ error: 'Verifizierung fehlgeschlagen' });
}
});
// POST /api/auth/resend-verification
router.post('/resend-verification', async (req, res) => {
try {
const { email } = req.body;
if (!email) {
return res.status(400).json({ error: 'E-Mail ist erforderlich' });
}
if (!isMailerConfigured()) {
return res.status(400).json({ error: 'SMTP ist nicht konfiguriert' });
}
const db = getDb();
const user = await db.get('SELECT id, name, email_verified FROM users WHERE email = ?', [email.toLowerCase()]);
if (!user || user.email_verified) {
// Don't reveal whether account exists
return res.json({ message: 'Falls ein Konto existiert, wurde eine neue E-Mail gesendet.' });
}
const verificationToken = uuidv4();
const expires = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
await db.run(
'UPDATE users SET verification_token = ?, verification_token_expires = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
[verificationToken, expires, user.id]
);
const baseUrl = process.env.APP_URL || `${req.protocol}://${req.get('host')}`;
const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
let appName = 'Redlight';
if (brandingSetting?.value) {
try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
}
await sendVerificationEmail(email.toLowerCase(), user.name, verifyUrl, appName);
res.json({ message: 'Falls ein Konto existiert, wurde eine neue E-Mail gesendet.' });
} catch (err) {
console.error('Resend verification error:', err);
res.status(500).json({ error: 'E-Mail konnte nicht gesendet werden' });
}
});
// POST /api/auth/login
router.post('/login', async (req, res) => {
try {
@@ -68,6 +178,10 @@ router.post('/login', async (req, res) => {
return res.status(401).json({ error: 'Ungültige Anmeldedaten' });
}
if (!user.email_verified && isMailerConfigured()) {
return res.status(403).json({ error: 'E-Mail-Adresse noch nicht verifiziert. Bitte prüfe dein Postfach.', needsVerification: true });
}
const token = generateToken(user.id);
const { password_hash, ...safeUser } = user;
@@ -203,6 +317,36 @@ router.delete('/avatar', authenticateToken, async (req, res) => {
}
});
// GET /api/auth/avatar/initials/:name - Generate SVG avatar from initials (public, BBB fetches this)
router.get('/avatar/initials/:name', (req, res) => {
const name = decodeURIComponent(req.params.name).trim();
const color = req.query.color || generateColorFromName(name);
const initials = name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase()
.slice(0, 2) || '?';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
<rect width="128" height="128" rx="64" fill="${color}"/>
<text x="64" y="64" dy=".35em" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="52" font-weight="bold">${initials}</text>
</svg>`;
res.setHeader('Content-Type', 'image/svg+xml');
res.setHeader('Cache-Control', 'public, max-age=3600');
res.send(svg);
});
function generateColorFromName(name) {
let hash = 0;
for (let i = 0; i < name.length; i++) {
hash = name.charCodeAt(i) + ((hash << 5) - hash);
}
const hue = Math.abs(hash) % 360;
return `hsl(${hue}, 55%, 45%)`;
}
// GET /api/auth/avatar/:filename - Serve avatar image
router.get('/avatar/:filename', (req, res) => {
const filepath = path.join(uploadsDir, req.params.filename);

159
server/routes/branding.js Normal file
View File

@@ -0,0 +1,159 @@
import { Router } from 'express';
import multer from 'multer';
import path from 'path';
import fs from 'fs';
import { fileURLToPath } from 'url';
import { getDb } from '../config/database.js';
import { authenticateToken, requireAdmin } from '../middleware/auth.js';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = Router();
// Ensure uploads/branding directory exists
const brandingDir = path.join(__dirname, '..', '..', 'uploads', 'branding');
if (!fs.existsSync(brandingDir)) {
fs.mkdirSync(brandingDir, { recursive: true });
}
// Multer config for logo upload
const storage = multer.diskStorage({
destination: (req, file, cb) => cb(null, brandingDir),
filename: (req, file, cb) => {
const ext = path.extname(file.originalname).toLowerCase() || '.png';
cb(null, `logo${ext}`);
},
});
const upload = multer({
storage,
limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
fileFilter: (req, file, cb) => {
const allowed = /\.(jpg|jpeg|png|gif|svg|webp|ico)$/i;
const mimeAllowed = /^image\/(jpeg|png|gif|svg\+xml|webp|x-icon|vnd\.microsoft\.icon)$/;
if (allowed.test(path.extname(file.originalname)) && mimeAllowed.test(file.mimetype)) {
cb(null, true);
} else {
cb(new Error('Only image files are allowed'));
}
},
});
// Helper: get setting from DB
async function getSetting(key) {
const db = getDb();
const row = await db.get('SELECT value FROM settings WHERE key = ?', [key]);
return row?.value || null;
}
// Helper: set setting in DB
async function setSetting(key, value) {
const db = getDb();
// Try update first, then insert if nothing was updated
const result = await db.run('UPDATE settings SET value = ?, updated_at = CURRENT_TIMESTAMP WHERE key = ?', [value, key]);
if (result.changes === 0) {
// Use INSERT with a dummy RETURNING to satisfy PG adapter, or just use exec-style
await db.run('INSERT INTO settings (key, value) VALUES (?, ?) RETURNING key', [key, value]);
}
}
// Helper: delete setting from DB
async function deleteSetting(key) {
const db = getDb();
await db.run('DELETE FROM settings WHERE key = ?', [key]);
}
// Helper: find current logo file on disk
function findLogoFile() {
if (!fs.existsSync(brandingDir)) return null;
const files = fs.readdirSync(brandingDir);
const logo = files.find(f => f.startsWith('logo.'));
return logo ? path.join(brandingDir, logo) : null;
}
// GET /api/branding - Get branding settings (public)
router.get('/', async (req, res) => {
try {
const appName = await getSetting('app_name');
const logoFile = findLogoFile();
res.json({
appName: appName || 'Redlight',
hasLogo: !!logoFile,
logoUrl: logoFile ? '/api/branding/logo' : null,
});
} catch (err) {
console.error('Get branding error:', err);
res.status(500).json({ error: 'Could not load branding' });
}
});
// GET /api/branding/logo - Serve logo file (public)
router.get('/logo', (req, res) => {
const logoFile = findLogoFile();
if (!logoFile) {
return res.status(404).json({ error: 'No logo found' });
}
res.sendFile(logoFile);
});
// POST /api/branding/logo - Upload logo (admin only)
router.post('/logo', authenticateToken, requireAdmin, (req, res) => {
upload.single('logo')(req, res, async (err) => {
if (err) {
if (err instanceof multer.MulterError) {
return res.status(400).json({ error: err.code === 'LIMIT_FILE_SIZE' ? 'File too large (max 2MB)' : err.message });
}
return res.status(400).json({ error: err.message });
}
if (!req.file) {
return res.status(400).json({ error: 'No file uploaded' });
}
// Remove old logo files that don't match the new extension
const files = fs.readdirSync(brandingDir);
for (const f of files) {
if (f.startsWith('logo.') && f !== req.file.filename) {
fs.unlinkSync(path.join(brandingDir, f));
}
}
res.json({
logoUrl: '/api/branding/logo',
message: 'Logo uploaded',
});
});
});
// DELETE /api/branding/logo - Remove logo (admin only)
router.delete('/logo', authenticateToken, requireAdmin, async (req, res) => {
try {
const logoFile = findLogoFile();
if (logoFile) {
fs.unlinkSync(logoFile);
}
res.json({ message: 'Logo removed' });
} catch (err) {
console.error('Delete logo error:', err);
res.status(500).json({ error: 'Could not remove logo' });
}
});
// PUT /api/branding/name - Update app name (admin only)
router.put('/name', authenticateToken, requireAdmin, async (req, res) => {
try {
const { appName } = req.body;
if (!appName || !appName.trim()) {
return res.status(400).json({ error: 'App name is required' });
}
await setSetting('app_name', appName.trim());
res.json({ appName: appName.trim() });
} catch (err) {
console.error('Update app name error:', err);
res.status(500).json({ error: 'Could not update app name' });
}
});
export default router;

View File

@@ -12,25 +12,66 @@ import {
const router = Router();
// GET /api/rooms - List user's rooms
// Build avatar URL for a user (uploaded image or generated initials)
function getUserAvatarURL(req, user) {
const baseUrl = `${req.protocol}://${req.get('host')}`;
if (user.avatar_image) {
return `${baseUrl}/api/auth/avatar/${user.avatar_image}`;
}
const color = user.avatar_color ? `?color=${encodeURIComponent(user.avatar_color)}` : '';
return `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(user.name)}${color}`;
}
// GET /api/rooms - List user's rooms (owned + shared)
router.get('/', authenticateToken, async (req, res) => {
try {
const db = getDb();
const rooms = await db.all(`
SELECT r.*, u.name as owner_name
const ownRooms = await db.all(`
SELECT r.*, u.name as owner_name, 0 as shared
FROM rooms r
JOIN users u ON r.user_id = u.id
WHERE r.user_id = ?
ORDER BY r.created_at DESC
`, [req.user.id]);
res.json({ rooms });
const sharedRooms = await db.all(`
SELECT r.*, u.name as owner_name, 1 as shared
FROM rooms r
JOIN users u ON r.user_id = u.id
JOIN room_shares rs ON rs.room_id = r.id
WHERE rs.user_id = ?
ORDER BY r.created_at DESC
`, [req.user.id]);
res.json({ rooms: [...ownRooms, ...sharedRooms] });
} catch (err) {
console.error('List rooms error:', err);
res.status(500).json({ error: 'Räume konnten nicht geladen werden' });
}
});
// GET /api/rooms/users/search - Search users for sharing (must be before /:uid routes)
router.get('/users/search', authenticateToken, async (req, res) => {
try {
const { q } = req.query;
if (!q || q.length < 2) {
return res.json({ users: [] });
}
const db = getDb();
const searchTerm = `%${q}%`;
const users = await db.all(`
SELECT id, name, email, avatar_color, avatar_image
FROM users
WHERE (name LIKE ? OR email LIKE ?) AND id != ?
LIMIT 10
`, [searchTerm, searchTerm, req.user.id]);
res.json({ users });
} catch (err) {
console.error('Search users error:', err);
res.status(500).json({ error: 'Benutzersuche fehlgeschlagen' });
}
});
// GET /api/rooms/:uid - Get room details
router.get('/:uid', authenticateToken, async (req, res) => {
try {
@@ -46,7 +87,24 @@ router.get('/:uid', authenticateToken, async (req, res) => {
return res.status(404).json({ error: 'Raum nicht gefunden' });
}
res.json({ room });
// Check access: owner, admin, or shared
if (room.user_id !== req.user.id && req.user.role !== 'admin') {
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
if (!share) {
return res.status(403).json({ error: 'Keine Berechtigung' });
}
room.shared = 1;
}
// Get shared users
const sharedUsers = await db.all(`
SELECT u.id, u.name, u.email, u.avatar_color, u.avatar_image
FROM room_shares rs
JOIN users u ON rs.user_id = u.id
WHERE rs.room_id = ?
`, [room.id]);
res.json({ room, sharedUsers });
} catch (err) {
console.error('Get room error:', err);
res.status(500).json({ error: 'Raum konnte nicht geladen werden' });
@@ -187,19 +245,105 @@ router.delete('/:uid', authenticateToken, async (req, res) => {
res.status(500).json({ error: 'Raum konnte nicht gelöscht werden' });
}
});
// GET /api/rooms/:uid/shares - Get shared users for a room
router.get('/:uid/shares', authenticateToken, async (req, res) => {
try {
const db = getDb();
const room = await db.get('SELECT * FROM rooms WHERE uid = ? AND user_id = ?', [req.params.uid, req.user.id]);
if (!room) {
return res.status(404).json({ error: 'Raum nicht gefunden oder keine Berechtigung' });
}
const shares = await db.all(`
SELECT u.id, u.name, u.email, u.avatar_color, u.avatar_image
FROM room_shares rs
JOIN users u ON rs.user_id = u.id
WHERE rs.room_id = ?
`, [room.id]);
res.json({ shares });
} catch (err) {
console.error('Get shares error:', err);
res.status(500).json({ error: 'Fehler beim Laden der Freigaben' });
}
});
// POST /api/rooms/:uid/shares - Share room with a user
router.post('/:uid/shares', authenticateToken, async (req, res) => {
try {
const { user_id } = req.body;
if (!user_id) {
return res.status(400).json({ error: 'Benutzer-ID erforderlich' });
}
const db = getDb();
const room = await db.get('SELECT * FROM rooms WHERE uid = ? AND user_id = ?', [req.params.uid, req.user.id]);
if (!room) {
return res.status(404).json({ error: 'Raum nicht gefunden oder keine Berechtigung' });
}
if (user_id === req.user.id) {
return res.status(400).json({ error: 'Du kannst den Raum nicht mit dir selbst teilen' });
}
// Check if already shared
const existing = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, user_id]);
if (existing) {
return res.status(400).json({ error: 'Raum ist bereits mit diesem Benutzer geteilt' });
}
await db.run('INSERT INTO room_shares (room_id, user_id) VALUES (?, ?)', [room.id, user_id]);
const shares = await db.all(`
SELECT u.id, u.name, u.email, u.avatar_color, u.avatar_image
FROM room_shares rs
JOIN users u ON rs.user_id = u.id
WHERE rs.room_id = ?
`, [room.id]);
res.json({ shares });
} catch (err) {
console.error('Share room error:', err);
res.status(500).json({ error: 'Fehler beim Teilen des Raums' });
}
});
// DELETE /api/rooms/:uid/shares/:userId - Remove share
router.delete('/:uid/shares/:userId', authenticateToken, async (req, res) => {
try {
const db = getDb();
const room = await db.get('SELECT * FROM rooms WHERE uid = ? AND user_id = ?', [req.params.uid, req.user.id]);
if (!room) {
return res.status(404).json({ error: 'Raum nicht gefunden oder keine Berechtigung' });
}
await db.run('DELETE FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, parseInt(req.params.userId)]);
const shares = await db.all(`
SELECT u.id, u.name, u.email, u.avatar_color, u.avatar_image
FROM room_shares rs
JOIN users u ON rs.user_id = u.id
WHERE rs.room_id = ?
`, [room.id]);
res.json({ shares });
} catch (err) {
console.error('Remove share error:', err);
res.status(500).json({ error: 'Fehler beim Entfernen der Freigabe' });
}
});
// POST /api/rooms/:uid/start - Start meeting
router.post('/:uid/start', authenticateToken, async (req, res) => {
try {
const db = getDb();
const room = await db.get('SELECT * FROM rooms WHERE uid = ? AND user_id = ?', [req.params.uid, req.user.id]);
const room = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
if (!room) {
return res.status(404).json({ error: 'Raum nicht gefunden oder keine Berechtigung' });
return res.status(404).json({ error: 'Raum nicht gefunden' });
}
await createMeeting(room);
const joinUrl = await joinMeeting(room.uid, req.user.name, true);
// Check access: owner or shared user
const isOwner = room.user_id === req.user.id;
if (!isOwner) {
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
if (!share) {
return res.status(403).json({ error: 'Keine Berechtigung' });
}
}
await createMeeting(room, `${req.protocol}://${req.get('host')}`);
const avatarURL = getUserAvatarURL(req, req.user);
const joinUrl = await joinMeeting(room.uid, req.user.name, true, avatarURL);
res.json({ joinUrl });
} catch (err) {
console.error('Start meeting error:', err);
@@ -228,8 +372,12 @@ router.post('/:uid/join', authenticateToken, async (req, res) => {
return res.status(400).json({ error: 'Meeting läuft nicht. Bitte warten Sie, bis der Moderator das Meeting gestartet hat.' });
}
const isModerator = room.user_id === req.user.id || room.all_join_moderator;
const joinUrl = await joinMeeting(room.uid, req.user.name, isModerator);
// Owner and shared users join as moderator
const isOwner = room.user_id === req.user.id;
const isShared = !isOwner && await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
const isModerator = isOwner || !!isShared || room.all_join_moderator;
const avatarURL = getUserAvatarURL(req, req.user);
const joinUrl = await joinMeeting(room.uid, req.user.name, isModerator, avatarURL);
res.json({ joinUrl });
} catch (err) {
console.error('Join meeting error:', err);
@@ -241,10 +389,19 @@ router.post('/:uid/join', authenticateToken, async (req, res) => {
router.post('/:uid/end', authenticateToken, async (req, res) => {
try {
const db = getDb();
const room = await db.get('SELECT * FROM rooms WHERE uid = ? AND user_id = ?', [req.params.uid, req.user.id]);
const room = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
if (!room) {
return res.status(404).json({ error: 'Raum nicht gefunden oder keine Berechtigung' });
return res.status(404).json({ error: 'Raum nicht gefunden' });
}
// Check access: owner or shared user
const isOwner = room.user_id === req.user.id;
if (!isOwner) {
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
if (!share) {
return res.status(403).json({ error: 'Keine Berechtigung' });
}
}
await endMeeting(room.uid);
@@ -260,7 +417,7 @@ router.get('/:uid/public', async (req, res) => {
try {
const db = getDb();
const room = await db.get(`
SELECT r.uid, r.name, r.guest_access, r.welcome_message, r.access_code,
SELECT r.uid, r.name, r.welcome_message, r.access_code,
u.name as owner_name
FROM rooms r
JOIN users u ON r.user_id = u.id
@@ -271,10 +428,6 @@ router.get('/:uid/public', async (req, res) => {
return res.status(404).json({ error: 'Raum nicht gefunden' });
}
if (!room.guest_access) {
return res.status(403).json({ error: 'Gastzugang ist für diesen Raum nicht aktiviert' });
}
const running = await isMeetingRunning(room.uid);
res.json({
@@ -309,10 +462,6 @@ router.post('/:uid/guest-join', async (req, res) => {
return res.status(404).json({ error: 'Raum nicht gefunden' });
}
if (!room.guest_access) {
return res.status(403).json({ error: 'Gastzugang ist für diesen Raum nicht aktiviert' });
}
// Check access code if set
if (room.access_code && access_code !== room.access_code) {
return res.status(403).json({ error: 'Falscher Zugangscode' });
@@ -326,7 +475,7 @@ router.post('/:uid/guest-join', async (req, res) => {
// If meeting not running but anyone_can_start, create it
if (!running && room.anyone_can_start) {
await createMeeting(room);
await createMeeting(room, `${req.protocol}://${req.get('host')}`);
}
// Check moderator code
@@ -335,7 +484,9 @@ router.post('/:uid/guest-join', async (req, res) => {
isModerator = true;
}
const joinUrl = await joinMeeting(room.uid, name.trim(), isModerator);
const baseUrl = `${req.protocol}://${req.get('host')}`;
const guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}`;
const joinUrl = await joinMeeting(room.uid, name.trim(), isModerator, guestAvatarURL);
res.json({ joinUrl });
} catch (err) {
console.error('Guest join error:', err);

View File

@@ -2,11 +2,13 @@ import { useEffect } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './contexts/AuthContext';
import { useLanguage } from './contexts/LanguageContext';
import { useBranding } from './contexts/BrandingContext';
import Layout from './components/Layout';
import ProtectedRoute from './components/ProtectedRoute';
import Home from './pages/Home';
import Login from './pages/Login';
import Register from './pages/Register';
import VerifyEmail from './pages/VerifyEmail';
import Dashboard from './pages/Dashboard';
import RoomDetail from './pages/RoomDetail';
import Settings from './pages/Settings';
@@ -16,6 +18,7 @@ import GuestJoin from './pages/GuestJoin';
export default function App() {
const { user, loading } = useAuth();
const { setLanguage } = useLanguage();
const { appName } = useBranding();
// Sync language from server when user loads
useEffect(() => {
@@ -24,6 +27,11 @@ export default function App() {
}
}, [user?.language, setLanguage]);
// Update document title with branding
useEffect(() => {
document.title = `${appName} - BigBlueButton Frontend`;
}, [appName]);
if (loading) {
return (
<div className="min-h-screen bg-th-bg flex items-center justify-center">
@@ -38,6 +46,7 @@ export default function App() {
<Route path="/" element={user ? <Navigate to="/dashboard" /> : <Home />} />
<Route path="/login" element={user ? <Navigate to="/dashboard" /> : <Login />} />
<Route path="/register" element={user ? <Navigate to="/dashboard" /> : <Register />} />
<Route path="/verify-email" element={<VerifyEmail />} />
<Route path="/join/:uid" element={<GuestJoin />} />
{/* Protected routes */}

View File

@@ -0,0 +1,35 @@
import { Video } from 'lucide-react';
import { useBranding } from '../contexts/BrandingContext';
const sizes = {
sm: { box: 'w-8 h-8', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
md: { box: 'w-9 h-9', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
lg: { box: 'w-10 h-10', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
};
export default function BrandLogo({ size = 'md', className = '' }) {
const { appName, hasLogo, logoUrl } = useBranding();
const s = sizes[size] || sizes.md;
if (hasLogo && logoUrl) {
return (
<div className={`flex items-center gap-2.5 ${className}`}>
<img
src={logoUrl}
alt={appName}
className={`${s.box} ${s.rounded} object-contain`}
/>
<span className={`${s.text} font-bold gradient-text`}>{appName}</span>
</div>
);
}
return (
<div className={`flex items-center gap-2.5 ${className}`}>
<div className={`${s.box} gradient-bg ${s.rounded} flex items-center justify-center`}>
<Video size={s.icon} className="text-white" />
</div>
<span className={`${s.text} font-bold gradient-text`}>{appName}</span>
</div>
);
}

View File

@@ -1,4 +1,4 @@
import { Menu, Search, LogOut, User } from 'lucide-react';
import { Menu, LogOut, User } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import { useNavigate } from 'react-router-dom';
@@ -47,16 +47,6 @@ export default function Navbar({ onMenuClick }) {
>
<Menu size={20} />
</button>
{/* Search */}
<div className="hidden md:flex items-center gap-2 bg-th-bg-s border border-th-border rounded-lg px-3 py-2 w-64 lg:w-80">
<Search size={16} className="text-th-text-s flex-shrink-0" />
<input
type="text"
placeholder={t('common.search')}
className="bg-transparent border-none outline-none text-sm text-th-text placeholder-th-text-s w-full"
/>
</div>
</div>
{/* Right section */}

View File

@@ -1,4 +1,4 @@
import { Users, Play, Trash2, Radio, Loader2 } from 'lucide-react';
import { Users, Play, Trash2, Radio, Loader2, Share2 } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import api from '../services/api';
@@ -39,9 +39,15 @@ export default function RoomCard({ room, onDelete }) {
{t('common.live')}
</span>
)}
{room.shared ? (
<span className="flex items-center gap-1 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
<Share2 size={10} />
{t('room.shared')}
</span>
) : null}
</div>
<p className="text-sm text-th-text-s mt-0.5">
{room.uid.substring(0, 8)}...
{room.shared ? room.owner_name : `${room.uid.substring(0, 8)}...`}
</p>
</div>
</div>
@@ -93,7 +99,7 @@ export default function RoomCard({ room, onDelete }) {
{starting ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
{status.running ? t('room.join') : t('room.startMeeting')}
</button>
{onDelete && (
{onDelete && !room.shared && (
<button
onClick={(e) => { e.stopPropagation(); onDelete(room); }}
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"

View File

@@ -1,5 +1,6 @@
import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Settings, Shield, Video, X, Palette } from 'lucide-react';
import { LayoutDashboard, Settings, Shield, X, Palette } from 'lucide-react';
import BrandLogo from './BrandLogo';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import ThemeSelector from './ThemeSelector';
@@ -36,14 +37,7 @@ export default function Sidebar({ open, onClose }) {
<div className="flex flex-col h-full">
{/* Logo */}
<div className="flex items-center justify-between h-16 px-4 border-b border-th-border">
<div className="flex items-center gap-2.5">
<div className="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
<Video size={18} className="text-white" />
</div>
<div>
<h1 className="text-lg font-bold gradient-text">Redlight</h1>
</div>
</div>
<BrandLogo size="sm" />
<button
onClick={onClose}
className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"

View File

@@ -30,6 +30,9 @@ export function AuthProvider({ children }) {
const register = useCallback(async (name, email, password) => {
const res = await api.post('/auth/register', { name, email, password });
if (res.data.needsVerification) {
return { needsVerification: true };
}
localStorage.setItem('token', res.data.token);
setUser(res.data.user);
return res.data.user;

View File

@@ -0,0 +1,37 @@
import { createContext, useContext, useState, useEffect, useCallback } from 'react';
import api from '../services/api';
const BrandingContext = createContext();
export function BrandingProvider({ children }) {
const [branding, setBranding] = useState({
appName: 'Redlight',
hasLogo: false,
logoUrl: null,
});
const fetchBranding = useCallback(async () => {
try {
const res = await api.get('/branding');
setBranding(res.data);
} catch {
// keep defaults
}
}, []);
useEffect(() => {
fetchBranding();
}, [fetchBranding]);
return (
<BrandingContext.Provider value={{ ...branding, refreshBranding: fetchBranding }}>
{children}
</BrandingContext.Provider>
);
}
export function useBranding() {
const ctx = useContext(BrandingContext);
if (!ctx) throw new Error('useBranding must be used within BrandingProvider');
return ctx;
}

View File

@@ -61,7 +61,17 @@
"registerSuccess": "Registrierung erfolgreich!",
"loginFailed": "Anmeldung fehlgeschlagen",
"registerFailed": "Registrierung fehlgeschlagen",
"allFieldsRequired": "Alle Felder sind erforderlich"
"allFieldsRequired": "Alle Felder sind erforderlich",
"verificationSent": "Verifizierungs-E-Mail wurde gesendet!",
"verificationSentDesc": "Wir haben dir eine E-Mail mit einem Bestätigungslink geschickt. Bitte klicke auf den Link, um dein Konto zu aktivieren.",
"checkYourEmail": "Prüfe dein Postfach",
"verifying": "E-Mail wird verifiziert...",
"verifySuccess": "Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich jetzt anmelden.",
"verifySuccessTitle": "E-Mail bestätigt!",
"verifyFailed": "Verifizierung fehlgeschlagen",
"verifyFailedTitle": "Verifizierung fehlgeschlagen",
"verifyTokenMissing": "Kein Verifizierungstoken vorhanden.",
"emailNotVerified": "E-Mail-Adresse noch nicht verifiziert. Bitte prüfe dein Postfach."
},
"home": {
"poweredBy": "Powered by BigBlueButton",
@@ -111,7 +121,8 @@
"roomDeleted": "Raum gelöscht",
"roomDeleteFailed": "Raum konnte nicht gelöscht werden",
"roomDeleteConfirm": "Raum \"{name}\" wirklich löschen?",
"loadFailed": "Räume konnten nicht geladen werden"
"loadFailed": "Räume konnten nicht geladen werden",
"sharedWithMe": "Mit mir geteilt"
},
"room": {
"backToDashboard": "Zurück zum Dashboard",
@@ -182,9 +193,19 @@
"guestAccessDenied": "Zugang nicht möglich",
"guestNameRequired": "Name ist erforderlich",
"guestJoinFailed": "Beitritt fehlgeschlagen",
"guestAccessNotEnabled": "Der Gastzugang ist für diesen Raum nicht aktiviert.",
"guestWrongAccessCode": "Falscher Zugangscode",
"guestHasAccount": "Haben Sie ein Konto?",
"guestSignIn": "Anmelden",
"guestRoomNotFound": "Raum nicht gefunden"
"guestRoomNotFound": "Raum nicht gefunden",
"shared": "Geteilt",
"shareTitle": "Raum teilen",
"shareDescription": "Teilen Sie diesen Raum mit anderen Benutzern, damit diese ihn in ihrem Dashboard sehen und beitreten k\u00f6nnen.",
"shareSearchPlaceholder": "Benutzer suchen (Name oder E-Mail)...",
"shareAdded": "Benutzer hinzugef\u00fcgt",
"shareRemoved": "Freigabe entfernt",
"shareFailed": "Freigabe fehlgeschlagen",
"shareRemove": "Freigabe entfernen"
},
"recordings": {
"title": "Aufnahmen",
@@ -266,6 +287,19 @@
"userDeleteFailed": "Fehler beim Löschen",
"passwordReset": "Passwort zurückgesetzt",
"passwordResetFailed": "Fehler beim Zurücksetzen",
"deleteUserConfirm": "Benutzer \"{name}\" wirklich löschen? Alle Räume werden ebenfalls gelöscht."
"deleteUserConfirm": "Benutzer \"{name}\" wirklich löschen? Alle Räume werden ebenfalls gelöscht.",
"brandingTitle": "Branding",
"brandingDescription": "Logo und App-Name anpassen, die in der Anwendung angezeigt werden.",
"logoLabel": "Logo",
"logoUpload": "Logo hochladen",
"logoChange": "Logo ändern",
"logoHint": "PNG, JPG, SVG oder WebP. Max. 5 MB.",
"logoUploaded": "Logo hochgeladen",
"logoUploadFailed": "Logo konnte nicht hochgeladen werden",
"logoRemoved": "Logo entfernt",
"logoRemoveFailed": "Logo konnte nicht entfernt werden",
"appNameLabel": "App-Name",
"appNameUpdated": "App-Name aktualisiert",
"appNameUpdateFailed": "App-Name konnte nicht aktualisiert werden"
}
}

View File

@@ -61,7 +61,17 @@
"registerSuccess": "Registration successful!",
"loginFailed": "Login failed",
"registerFailed": "Registration failed",
"allFieldsRequired": "All fields are required"
"allFieldsRequired": "All fields are required",
"verificationSent": "Verification email sent!",
"verificationSentDesc": "We've sent you an email with a verification link. Please click the link to activate your account.",
"checkYourEmail": "Check your inbox",
"verifying": "Verifying your email...",
"verifySuccess": "Your email has been verified successfully. You can now sign in.",
"verifySuccessTitle": "Email verified!",
"verifyFailed": "Verification failed",
"verifyFailedTitle": "Verification failed",
"verifyTokenMissing": "No verification token provided.",
"emailNotVerified": "Email not yet verified. Please check your inbox."
},
"home": {
"poweredBy": "Powered by BigBlueButton",
@@ -111,7 +121,8 @@
"roomDeleted": "Room deleted",
"roomDeleteFailed": "Room could not be deleted",
"roomDeleteConfirm": "Really delete room \"{name}\"?",
"loadFailed": "Rooms could not be loaded"
"loadFailed": "Rooms could not be loaded",
"sharedWithMe": "Shared with me"
},
"room": {
"backToDashboard": "Back to Dashboard",
@@ -182,9 +193,19 @@
"guestAccessDenied": "Access denied",
"guestNameRequired": "Name is required",
"guestJoinFailed": "Join failed",
"guestAccessNotEnabled": "Guest access is not enabled for this room.",
"guestWrongAccessCode": "Wrong access code",
"guestHasAccount": "Have an account?",
"guestSignIn": "Sign in",
"guestRoomNotFound": "Room not found"
"guestRoomNotFound": "Room not found",
"shared": "Shared",
"shareTitle": "Share room",
"shareDescription": "Share this room with other users so they can see it in their dashboard and join meetings.",
"shareSearchPlaceholder": "Search users (name or email)...",
"shareAdded": "User added",
"shareRemoved": "Share removed",
"shareFailed": "Share failed",
"shareRemove": "Remove share"
},
"recordings": {
"title": "Recordings",
@@ -266,6 +287,19 @@
"userDeleteFailed": "Error deleting user",
"passwordReset": "Password reset",
"passwordResetFailed": "Error resetting password",
"deleteUserConfirm": "Really delete user \"{name}\"? All rooms will also be deleted."
"deleteUserConfirm": "Really delete user \"{name}\"? All rooms will also be deleted.",
"brandingTitle": "Branding",
"brandingDescription": "Customize the logo and app name shown across the application.",
"logoLabel": "Logo",
"logoUpload": "Upload logo",
"logoChange": "Change logo",
"logoHint": "PNG, JPG, SVG or WebP. Max 5 MB.",
"logoUploaded": "Logo uploaded",
"logoUploadFailed": "Logo upload failed",
"logoRemoved": "Logo removed",
"logoRemoveFailed": "Could not remove logo",
"appNameLabel": "App name",
"appNameUpdated": "App name updated",
"appNameUpdateFailed": "Could not update app name"
}
}

View File

@@ -6,6 +6,7 @@ import App from './App';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { LanguageProvider } from './contexts/LanguageContext';
import { BrandingProvider } from './contexts/BrandingContext';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
@@ -13,21 +14,23 @@ ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<LanguageProvider>
<ThemeProvider>
<AuthProvider>
<App />
<Toaster
position="top-right"
toastOptions={{
duration: 4000,
style: {
background: 'var(--card-bg)',
color: 'var(--text-primary)',
border: '1px solid var(--border)',
},
}}
/>
</AuthProvider>
</ThemeProvider>
<BrandingProvider>
<AuthProvider>
<App />
<Toaster
position="top-right"
toastOptions={{
duration: 4000,
style: {
background: 'var(--card-bg)',
color: 'var(--text-primary)',
border: '1px solid var(--border)',
},
}}
/>
</AuthProvider>
</BrandingProvider>
</ThemeProvider>
</LanguageProvider>
</BrowserRouter>
</React.StrictMode>,

View File

@@ -1,17 +1,20 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Users, Shield, Search, Trash2, ChevronDown, Loader2,
MoreVertical, Key, UserCheck, UserX, UserPlus, Mail, Lock, User,
Upload, X as XIcon, Image, Type,
} from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import { useBranding } from '../contexts/BrandingContext';
import api from '../services/api';
import toast from 'react-hot-toast';
export default function Admin() {
const { user } = useAuth();
const { t, language } = useLanguage();
const { appName, hasLogo, logoUrl, refreshBranding } = useBranding();
const navigate = useNavigate();
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
@@ -23,6 +26,12 @@ export default function Admin() {
const [creatingUser, setCreatingUser] = useState(false);
const [newUser, setNewUser] = useState({ name: '', email: '', password: '', role: 'user' });
// Branding state
const [editAppName, setEditAppName] = useState('');
const [savingName, setSavingName] = useState(false);
const [uploadingLogo, setUploadingLogo] = useState(false);
const logoInputRef = useRef(null);
useEffect(() => {
if (user?.role !== 'admin') {
navigate('/dashboard');
@@ -31,6 +40,10 @@ export default function Admin() {
fetchUsers();
}, [user]);
useEffect(() => {
setEditAppName(appName || 'Redlight');
}, [appName]);
const fetchUsers = async () => {
try {
const res = await api.get('/admin/users');
@@ -77,6 +90,51 @@ export default function Admin() {
}
};
// ── Branding handlers ──────────────────────────────────────────────────
const handleLogoUpload = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
setUploadingLogo(true);
try {
const formData = new FormData();
formData.append('logo', file);
await api.post('/branding/logo', formData, {
headers: { 'Content-Type': undefined },
});
toast.success(t('admin.logoUploaded'));
refreshBranding();
} catch (err) {
toast.error(err.response?.data?.error || t('admin.logoUploadFailed'));
} finally {
setUploadingLogo(false);
if (logoInputRef.current) logoInputRef.current.value = '';
}
};
const handleLogoRemove = async () => {
try {
await api.delete('/branding/logo');
toast.success(t('admin.logoRemoved'));
refreshBranding();
} catch {
toast.error(t('admin.logoRemoveFailed'));
}
};
const handleAppNameSave = async () => {
if (!editAppName.trim()) return;
setSavingName(true);
try {
await api.put('/branding/name', { appName: editAppName.trim() });
toast.success(t('admin.appNameUpdated'));
refreshBranding();
} catch {
toast.error(t('admin.appNameUpdateFailed'));
} finally {
setSavingName(false);
}
};
const handleCreateUser = async (e) => {
e.preventDefault();
setCreatingUser(true);
@@ -126,6 +184,90 @@ export default function Admin() {
</div>
</div>
{/* Branding */}
<div className="card p-6 mb-8">
<div className="flex items-center gap-2 mb-4">
<Image size={20} className="text-th-accent" />
<h2 className="text-lg font-semibold text-th-text">{t('admin.brandingTitle')}</h2>
</div>
<p className="text-sm text-th-text-s mb-5">{t('admin.brandingDescription')}</p>
<div className="grid gap-6 sm:grid-cols-2">
{/* Logo upload */}
<div>
<label className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</label>
<div className="flex items-center gap-4">
{hasLogo && logoUrl ? (
<div className="relative group">
<img
src={`${logoUrl}?t=${Date.now()}`}
alt="Logo"
className="w-14 h-14 rounded-xl object-contain border border-th-border bg-th-bg p-1"
/>
<button
onClick={handleLogoRemove}
className="absolute -top-2 -right-2 w-5 h-5 bg-th-error text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
>
<XIcon size={12} />
</button>
</div>
) : (
<div className="w-14 h-14 rounded-xl border-2 border-dashed border-th-border flex items-center justify-center text-th-text-s">
<Image size={24} />
</div>
)}
<div>
<input
ref={logoInputRef}
type="file"
accept="image/*"
onChange={handleLogoUpload}
className="hidden"
/>
<button
onClick={() => logoInputRef.current?.click()}
disabled={uploadingLogo}
className="btn-secondary text-sm"
>
{uploadingLogo ? (
<Loader2 size={14} className="animate-spin" />
) : (
<Upload size={14} />
)}
{hasLogo ? t('admin.logoChange') : t('admin.logoUpload')}
</button>
<p className="text-xs text-th-text-s mt-1">{t('admin.logoHint')}</p>
</div>
</div>
</div>
{/* App name */}
<div>
<label className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
<input
type="text"
value={editAppName}
onChange={e => setEditAppName(e.target.value)}
className="input-field pl-9 text-sm"
placeholder="Redlight"
maxLength={30}
/>
</div>
<button
onClick={handleAppNameSave}
disabled={savingName || editAppName.trim() === appName}
className="btn-primary text-sm px-4"
>
{savingName ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
</button>
</div>
</div>
</div>
</div>
{/* Search */}
<div className="card p-4 mb-6">
<div className="relative">

View File

@@ -131,15 +131,36 @@ export default function Dashboard() {
</button>
</div>
) : (
<div className={
viewMode === 'grid'
? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'
: 'space-y-3'
}>
{rooms.map(room => (
<RoomCard key={room.id} room={room} onDelete={handleDelete} />
))}
</div>
<>
{/* Own rooms */}
{rooms.filter(r => !r.shared).length > 0 && (
<div className={
viewMode === 'grid'
? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'
: 'space-y-3'
}>
{rooms.filter(r => !r.shared).map(room => (
<RoomCard key={room.id} room={room} onDelete={handleDelete} />
))}
</div>
)}
{/* Shared rooms */}
{rooms.filter(r => r.shared).length > 0 && (
<div className="mt-8">
<h2 className="text-lg font-semibold text-th-text mb-4">{t('dashboard.sharedWithMe')}</h2>
<div className={
viewMode === 'grid'
? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'
: 'space-y-3'
}>
{rooms.filter(r => r.shared).map(room => (
<RoomCard key={`shared-${room.id}`} room={room} onDelete={handleDelete} />
))}
</div>
</div>
)}
</>
)}
{/* Create Room Modal */}

View File

@@ -1,18 +1,22 @@
import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio } from 'lucide-react';
import BrandLogo from '../components/BrandLogo';
import api from '../services/api';
import toast from 'react-hot-toast';
import { useLanguage } from '../contexts/LanguageContext';
import { useAuth } from '../contexts/AuthContext';
export default function GuestJoin() {
const { uid } = useParams();
const { t } = useLanguage();
const { user } = useAuth();
const isLoggedIn = !!user;
const [roomInfo, setRoomInfo] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [joining, setJoining] = useState(false);
const [name, setName] = useState('');
const [name, setName] = useState(user?.name || '');
const [accessCode, setAccessCode] = useState('');
const [moderatorCode, setModeratorCode] = useState('');
const [status, setStatus] = useState({ running: false });
@@ -24,7 +28,14 @@ export default function GuestJoin() {
setRoomInfo(res.data.room);
setStatus({ running: res.data.running });
} catch (err) {
setError(err.response?.data?.error || t('room.guestRoomNotFound'));
const status = err.response?.status;
if (status === 403) {
setError(t('room.guestAccessNotEnabled'));
} else if (status === 404) {
setError(t('room.guestRoomNotFound'));
} else {
setError(t('room.guestRoomNotFound'));
}
} finally {
setLoading(false);
}
@@ -61,7 +72,14 @@ export default function GuestJoin() {
window.location.href = res.data.joinUrl;
}
} catch (err) {
toast.error(err.response?.data?.error || t('room.guestJoinFailed'));
const status = err.response?.status;
if (status === 403) {
toast.error(t('room.guestWrongAccessCode'));
} else if (status === 400) {
toast.error(t('room.guestWaitingMessage'));
} else {
toast.error(t('room.guestJoinFailed'));
}
} finally {
setJoining(false);
}
@@ -115,11 +133,8 @@ export default function GuestJoin() {
<div className="relative w-full max-w-md">
<div className="card p-8 backdrop-blur-xl bg-th-card/80 border border-th-border shadow-2xl rounded-2xl">
{/* Logo */}
<div className="flex items-center justify-center gap-2.5 mb-6">
<div className="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<Video size={22} className="text-white" />
</div>
<span className="text-2xl font-bold gradient-text">Redlight</span>
<div className="flex justify-center mb-6">
<BrandLogo size="lg" />
</div>
{/* Room info */}
@@ -148,11 +163,12 @@ export default function GuestJoin() {
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
className="input-field pl-11"
onChange={e => !isLoggedIn && setName(e.target.value)}
readOnly={isLoggedIn}
className={`input-field pl-11 ${isLoggedIn ? 'opacity-70 cursor-not-allowed' : ''}`}
placeholder={t('room.guestNamePlaceholder')}
required
autoFocus
autoFocus={!isLoggedIn}
/>
</div>
</div>
@@ -212,11 +228,13 @@ export default function GuestJoin() {
)}
</form>
<div className="mt-6 pt-4 border-t border-th-border text-center">
<Link to="/login" className="text-sm text-th-text-s hover:text-th-accent transition-colors">
{t('room.guestHasAccount')} <span className="text-th-accent font-medium">{t('room.guestSignIn')}</span>
</Link>
</div>
{!isLoggedIn && (
<div className="mt-6 pt-4 border-t border-th-border text-center">
<Link to="/login" className="text-sm text-th-text-s hover:text-th-accent transition-colors">
{t('room.guestHasAccount')} <span className="text-th-accent font-medium">{t('room.guestSignIn')}</span>
</Link>
</div>
)}
</div>
</div>
</div>

View File

@@ -1,5 +1,6 @@
import { Link } from 'react-router-dom';
import { Video, Shield, Users, Palette, ArrowRight, Zap, Globe } from 'lucide-react';
import BrandLogo from '../components/BrandLogo';
import { useLanguage } from '../contexts/LanguageContext';
export default function Home() {
@@ -48,12 +49,7 @@ export default function Home() {
{/* Navbar */}
<nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4">
<div className="flex items-center gap-2.5">
<div className="w-9 h-9 gradient-bg rounded-lg flex items-center justify-center">
<Video size={20} className="text-white" />
</div>
<span className="text-xl font-bold gradient-text">Redlight</span>
</div>
<BrandLogo size="md" />
<div className="flex items-center gap-3">
<Link to="/login" className="btn-ghost text-sm">
{t('auth.login')}

View File

@@ -2,7 +2,8 @@ import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import { Video, Mail, Lock, ArrowRight, Loader2 } from 'lucide-react';
import { Mail, Lock, ArrowRight, Loader2 } from 'lucide-react';
import BrandLogo from '../components/BrandLogo';
import toast from 'react-hot-toast';
export default function Login() {
@@ -42,11 +43,8 @@ export default function Login() {
<div className="relative w-full max-w-md">
<div className="card p-8 backdrop-blur-xl bg-th-card/80 border border-th-border shadow-2xl rounded-2xl">
{/* Logo */}
<div className="flex items-center justify-center gap-2.5 mb-8">
<div className="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<Video size={22} className="text-white" />
</div>
<span className="text-2xl font-bold gradient-text">Redlight</span>
<div className="flex justify-center mb-8">
<BrandLogo size="lg" />
</div>
<div className="mb-8">

View File

@@ -2,7 +2,8 @@ import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import { Video, Mail, Lock, User, ArrowRight, Loader2 } from 'lucide-react';
import { Mail, Lock, User, ArrowRight, Loader2, CheckCircle } from 'lucide-react';
import BrandLogo from '../components/BrandLogo';
import toast from 'react-hot-toast';
export default function Register() {
@@ -11,6 +12,7 @@ export default function Register() {
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [needsVerification, setNeedsVerification] = useState(false);
const { register } = useAuth();
const { t } = useLanguage();
const navigate = useNavigate();
@@ -30,9 +32,14 @@ export default function Register() {
setLoading(true);
try {
await register(name, email, password);
toast.success(t('auth.registerSuccess'));
navigate('/dashboard');
const result = await register(name, email, password);
if (result?.needsVerification) {
setNeedsVerification(true);
toast.success(t('auth.verificationSent'));
} else {
toast.success(t('auth.registerSuccess'));
navigate('/dashboard');
}
} catch (err) {
toast.error(err.response?.data?.error || t('auth.registerFailed'));
} finally {
@@ -55,13 +62,22 @@ export default function Register() {
<div className="relative w-full max-w-md">
<div className="card p-8 backdrop-blur-xl bg-th-card/80 border border-th-border shadow-2xl rounded-2xl">
{/* Logo */}
<div className="flex items-center justify-center gap-2.5 mb-8">
<div className="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<Video size={22} className="text-white" />
</div>
<span className="text-2xl font-bold gradient-text">Redlight</span>
<div className="flex justify-center mb-8">
<BrandLogo size="lg" />
</div>
{needsVerification ? (
<div className="text-center space-y-4">
<CheckCircle size={48} className="mx-auto text-green-400" />
<h2 className="text-2xl font-bold text-th-text">{t('auth.checkYourEmail')}</h2>
<p className="text-th-text-s">{t('auth.verificationSentDesc')}</p>
<p className="text-sm text-th-text-s font-medium">{email}</p>
<Link to="/login" className="btn-primary inline-flex items-center gap-2 mt-4">
{t('auth.login')}
</Link>
</div>
) : (
<>
<div className="mb-8">
<h2 className="text-2xl font-bold text-th-text mb-2">{t('auth.createAccount')}</h2>
<p className="text-th-text-s">
@@ -158,6 +174,8 @@ export default function Register() {
<Link to="/" className="block mt-4 text-center text-sm text-th-text-s hover:text-th-text transition-colors">
{t('auth.backToHome')}
</Link>
</>
)}
</div>
</div>
</div>

View File

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
import {
ArrowLeft, Play, Square, Users, Settings, FileVideo, Radio,
Loader2, Copy, ExternalLink, Lock, Mic, MicOff, UserCheck,
Shield, Save,
Shield, Save, UserPlus, X, Share2,
} from 'lucide-react';
import api from '../services/api';
import { useAuth } from '../contexts/AuthContext';
@@ -25,14 +25,21 @@ export default function RoomDetail() {
const [activeTab, setActiveTab] = useState('overview');
const [editRoom, setEditRoom] = useState(null);
const [saving, setSaving] = useState(false);
const [sharedUsers, setSharedUsers] = useState([]);
const [shareSearch, setShareSearch] = useState('');
const [shareResults, setShareResults] = useState([]);
const [shareSearching, setShareSearching] = useState(false);
const isOwner = room && user && room.user_id === user.id;
const isShared = room && !!room.shared;
const canManage = isOwner || isShared;
const fetchRoom = async () => {
try {
const res = await api.get(`/rooms/${uid}`);
setRoom(res.data.room);
setEditRoom(res.data.room);
if (res.data.sharedUsers) setSharedUsers(res.data.sharedUsers);
} catch {
toast.error(t('room.notFound'));
navigate('/dashboard');
@@ -144,6 +151,48 @@ export default function RoomDetail() {
toast.success(t('room.linkCopied'));
};
// Share functions
const searchUsers = async (query) => {
setShareSearch(query);
if (query.length < 2) {
setShareResults([]);
return;
}
setShareSearching(true);
try {
const res = await api.get(`/rooms/users/search?q=${encodeURIComponent(query)}`);
// Filter out already shared users
const sharedIds = new Set(sharedUsers.map(u => u.id));
setShareResults(res.data.users.filter(u => !sharedIds.has(u.id)));
} catch {
setShareResults([]);
} finally {
setShareSearching(false);
}
};
const handleShare = async (userId) => {
try {
const res = await api.post(`/rooms/${uid}/shares`, { user_id: userId });
setSharedUsers(res.data.shares);
setShareSearch('');
setShareResults([]);
toast.success(t('room.shareAdded'));
} catch (err) {
toast.error(err.response?.data?.error || t('room.shareFailed'));
}
};
const handleUnshare = async (userId) => {
try {
const res = await api.delete(`/rooms/${uid}/shares/${userId}`);
setSharedUsers(res.data.shares);
toast.success(t('room.shareRemoved'));
} catch {
toast.error(t('room.shareFailed'));
}
};
if (loading) {
return (
<div className="flex items-center justify-center py-20">
@@ -203,7 +252,7 @@ export default function RoomDetail() {
</div>
<div className="flex items-center gap-2">
{isOwner && !status.running && (
{canManage && !status.running && (
<button onClick={handleStart} disabled={actionLoading === 'start'} className="btn-primary">
{actionLoading === 'start' ? <Loader2 size={16} className="animate-spin" /> : <Play size={16} />}
{t('room.start')}
@@ -215,7 +264,7 @@ export default function RoomDetail() {
{t('room.join')}
</button>
)}
{isOwner && status.running && (
{canManage && status.running && (
<button onClick={handleEnd} disabled={actionLoading === 'end'} className="btn-danger">
{actionLoading === 'end' ? <Loader2 size={16} className="animate-spin" /> : <Square size={16} />}
{t('room.end')}
@@ -416,51 +465,119 @@ export default function RoomDetail() {
{/* Guest access section */}
<div className="pt-4 border-t border-th-border space-y-4">
<h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={!!editRoom.guest_access}
onChange={e => setEditRoom({ ...editRoom, guest_access: e.target.checked })}
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
/>
<div>
<span className="text-sm text-th-text">{t('room.guestAccess')}</span>
<p className="text-xs text-th-text-s">{t('room.guestAccessHint')}</p>
</div>
</label>
{editRoom.guest_access && (
<>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
<input
type="text"
value={editRoom.moderator_code || ''}
onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
className="input-field"
placeholder={t('room.moderatorCodeHint')}
/>
<p className="text-xs text-th-text-s mt-1">{t('room.moderatorCodeDesc')}</p>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
<input
type="text"
value={editRoom.moderator_code || ''}
onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
className="input-field"
placeholder={t('room.moderatorCodeHint')}
/>
<p className="text-xs text-th-text-s mt-1">{t('room.moderatorCodeDesc')}</p>
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestLink')}</label>
<div className="flex items-center gap-2">
<code className="flex-1 bg-th-bg-s px-3 py-2 rounded-lg text-xs text-th-text font-mono truncate border border-th-border">
{window.location.origin}/join/{room.uid}
</code>
<button
type="button"
onClick={() => {
navigator.clipboard.writeText(`${window.location.origin}/join/${room.uid}`);
toast.success(t('room.linkCopied'));
}}
className="btn-ghost text-xs py-2 px-3"
>
<Copy size={14} />
</button>
</div>
</div>
</div>
{/* Share section */}
<div className="pt-4 border-t border-th-border space-y-4">
<h3 className="text-sm font-semibold text-th-text flex items-center gap-2">
<Share2 size={16} />
{t('room.shareTitle')}
</h3>
<p className="text-xs text-th-text-s">{t('room.shareDescription')}</p>
{/* User search */}
<div className="relative">
<div className="relative">
<UserPlus size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<input
type="text"
value={shareSearch}
onChange={e => searchUsers(e.target.value)}
className="input-field pl-11"
placeholder={t('room.shareSearchPlaceholder')}
/>
</div>
{shareResults.length > 0 && (
<div className="absolute z-10 w-full mt-1 bg-th-card border border-th-border rounded-lg shadow-lg max-h-48 overflow-y-auto">
{shareResults.map(u => (
<button
key={u.id}
type="button"
onClick={() => handleShare(u.id)}
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
>
<div
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
>
{u.avatar_image ? (
<img src={`${api.defaults.baseURL}/auth/avatar/${u.avatar_image}`} alt="" className="w-full h-full object-cover" />
) : (
u.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
)}
</div>
<div className="min-w-0">
<div className="text-sm font-medium text-th-text truncate">{u.name}</div>
<div className="text-xs text-th-text-s truncate">{u.email}</div>
</div>
</button>
))}
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestLink')}</label>
<div className="flex items-center gap-2">
<code className="flex-1 bg-th-bg-s px-3 py-2 rounded-lg text-xs text-th-text font-mono truncate border border-th-border">
{window.location.origin}/join/{room.uid}
</code>
)}
</div>
{/* Shared users list */}
{sharedUsers.length > 0 && (
<div className="space-y-2">
{sharedUsers.map(u => (
<div key={u.id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
<div className="flex items-center gap-3 min-w-0">
<div
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
>
{u.avatar_image ? (
<img src={`${api.defaults.baseURL}/auth/avatar/${u.avatar_image}`} alt="" className="w-full h-full object-cover" />
) : (
u.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
)}
</div>
<div className="min-w-0">
<div className="text-sm font-medium text-th-text truncate">{u.name}</div>
<div className="text-xs text-th-text-s truncate">{u.email}</div>
</div>
</div>
<button
type="button"
onClick={() => {
navigator.clipboard.writeText(`${window.location.origin}/join/${room.uid}`);
toast.success(t('room.linkCopied'));
}}
className="btn-ghost text-xs py-2 px-3"
onClick={() => handleUnshare(u.id)}
className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-error transition-colors flex-shrink-0"
title={t('room.shareRemove')}
>
<Copy size={14} />
<X size={16} />
</button>
</div>
</div>
</>
))}
</div>
)}
</div>

87
src/pages/VerifyEmail.jsx Normal file
View File

@@ -0,0 +1,87 @@
import { useState, useEffect } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { useLanguage } from '../contexts/LanguageContext';
import { CheckCircle, XCircle, Loader2, Mail } from 'lucide-react';
import BrandLogo from '../components/BrandLogo';
import api from '../services/api';
export default function VerifyEmail() {
const [searchParams] = useSearchParams();
const token = searchParams.get('token');
const { t } = useLanguage();
const [status, setStatus] = useState('loading'); // loading | success | error
const [message, setMessage] = useState('');
useEffect(() => {
if (!token) {
setStatus('error');
setMessage(t('auth.verifyTokenMissing'));
return;
}
api.get(`/auth/verify-email?token=${token}`)
.then(() => {
setStatus('success');
setMessage(t('auth.verifySuccess'));
})
.catch(err => {
setStatus('error');
setMessage(err.response?.data?.error || t('auth.verifyFailed'));
});
}, [token]);
return (
<div className="min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
{/* Animated background */}
<div className="absolute inset-0 bg-th-bg">
<div className="absolute inset-0 opacity-30">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-th-accent rounded-full blur-[128px] animate-pulse" />
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-[128px] animate-pulse" style={{ animationDelay: '2s' }} />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-pink-500 rounded-full blur-[128px] animate-pulse" style={{ animationDelay: '4s' }} />
</div>
</div>
<div className="relative w-full max-w-md">
<div className="card p-8 backdrop-blur-xl bg-th-card/80 border border-th-border shadow-2xl rounded-2xl text-center">
<div className="flex justify-center mb-8">
<BrandLogo size="lg" />
</div>
{status === 'loading' && (
<div className="space-y-4">
<Loader2 size={48} className="mx-auto animate-spin text-th-accent" />
<p className="text-th-text">{t('auth.verifying')}</p>
</div>
)}
{status === 'success' && (
<div className="space-y-4">
<CheckCircle size={48} className="mx-auto text-green-400" />
<h2 className="text-2xl font-bold text-th-text">{t('auth.verifySuccessTitle')}</h2>
<p className="text-th-text-s">{message}</p>
<Link to="/login" className="btn-primary inline-flex items-center gap-2 mt-4">
{t('auth.login')}
</Link>
</div>
)}
{status === 'error' && (
<div className="space-y-4">
<XCircle size={48} className="mx-auto text-red-400" />
<h2 className="text-2xl font-bold text-th-text">{t('auth.verifyFailedTitle')}</h2>
<p className="text-th-text-s">{message}</p>
<Link to="/register" className="btn-primary inline-flex items-center gap-2 mt-4">
{t('auth.register')}
</Link>
</div>
)}
<Link to="/" className="block mt-6 text-center text-sm text-th-text-s hover:text-th-text transition-colors">
{t('auth.backToHome')}
</Link>
</div>
</div>
</div>
);
}