Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
03098eaf2b | ||
|
|
7dd834cd35 | ||
|
|
4621010bd7 | ||
|
|
fbbcd79719 | ||
|
|
10f0ffd2e5 | ||
|
|
4aea069295 | ||
|
|
9fc51bdfc5 | ||
|
|
7f48685717 | ||
|
|
cff5398ebd | ||
|
|
109e75d976 | ||
|
|
24024cd1dd | ||
|
|
4028e913c4 | ||
|
|
aba7819f12 | ||
|
|
45fdbe4883 | ||
|
|
de696d422a | ||
|
|
995d6eabf7 | ||
|
|
9ee4f84d84 | ||
|
|
df1aa20e45 | ||
|
|
e0ce354eda | ||
|
|
1690a74c19 | ||
|
|
61585d8c63 | ||
|
|
d04793148a | ||
|
|
9bf4228d04 | ||
|
|
c058ba3bf1 | ||
|
|
b3b559e164 | ||
|
|
0db9227c20 | ||
|
|
30f106a7ea | ||
|
|
8cbe28f915 | ||
|
|
5472e190d9 | ||
|
|
45be976de1 | ||
|
|
6dcb1e959b | ||
|
|
bb2d179871 | ||
|
|
82b7d060ba | ||
|
|
0836436fe7 | ||
|
|
99d3b22f62 | ||
|
|
eed5d98ccc | ||
|
|
6513fdee41 | ||
|
|
cae84754e4 | ||
|
|
a0a972b53a | ||
|
|
9b98803053 |
@@ -1,5 +1,8 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
dist/
|
dist/
|
||||||
redlight.db
|
redlight.db
|
||||||
|
redlight.db-wal
|
||||||
|
redlight.db-shm
|
||||||
uploads/
|
uploads/
|
||||||
.env
|
.env
|
||||||
|
.claude/
|
||||||
|
|||||||
+15
-12
@@ -1,28 +1,31 @@
|
|||||||
# ── Stage 1: Build frontend ──────────────────────────────────────────────────
|
# ── Stage 1: Install dependencies ────────────────────────────────────────────
|
||||||
FROM node:20-bullseye-slim AS builder
|
FROM node:22-trixie-slim AS deps
|
||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
# Install build tools and sqlite headers for native modules
|
ENV DEBIAN_FRONTEND=noninteractive
|
||||||
|
|
||||||
|
# Install build tools for native modules (better-sqlite3, pdfkit)
|
||||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||||
python3 build-essential libsqlite3-dev ca-certificates \
|
python3 build-essential libsqlite3-dev \
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
COPY package.json package-lock.json* ./
|
COPY package.json package-lock.json* ./
|
||||||
|
|
||||||
|
# Install all dependencies (including dev for vite build)
|
||||||
RUN npm ci
|
RUN npm ci
|
||||||
|
|
||||||
|
# ── Stage 2: Build frontend ─────────────────────────────────────────────────
|
||||||
|
FROM deps AS builder
|
||||||
|
|
||||||
COPY . .
|
COPY . .
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
# Produce production node_modules (compile native modules here for the target arch)
|
|
||||||
RUN npm ci --omit=dev && npm cache clean --force
|
|
||||||
|
|
||||||
# ── Stage 2: Production image ───────────────────────────────────────────────
|
# Prune dev dependencies in-place (avoids a second npm ci)
|
||||||
|
RUN npm prune --omit=dev
|
||||||
|
|
||||||
FROM node:20-bullseye-slim
|
# ── Stage 3: Production image ───────────────────────────────────────────────
|
||||||
|
FROM node:22-trixie-slim
|
||||||
# Allow forcing build from source (useful when prebuilt binaries are not available)
|
|
||||||
ARG BUILD_FROM_SOURCE=false
|
|
||||||
ENV npm_config_build_from_source=${BUILD_FROM_SOURCE}
|
|
||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en" data-theme="dark">
|
<html lang="en" data-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
|||||||
Generated
+2475
-2439
File diff suppressed because it is too large
Load Diff
+22
-18
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "redlight",
|
"name": "redlight",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "2.0.0",
|
"version": "2.3.0",
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -14,35 +14,39 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.0",
|
"axios": "^1.7.0",
|
||||||
"bcryptjs": "^2.4.3",
|
"bcryptjs": "^3.0.3",
|
||||||
"better-sqlite3": "^11.0.0",
|
"better-sqlite3": "^12.6.2",
|
||||||
"concurrently": "^9.0.0",
|
"concurrently": "^9.0.0",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"dotenv": "^16.4.0",
|
"dotenv": "^17.3.1",
|
||||||
"express": "^4.21.0",
|
"exceljs": "^4.4.0",
|
||||||
"express-rate-limit": "^7.5.1",
|
"express": "^5.2.1",
|
||||||
|
"express-rate-limit": "^8.5.2",
|
||||||
"flatpickr": "^4.6.13",
|
"flatpickr": "^4.6.13",
|
||||||
"ioredis": "^5.10.0",
|
"ioredis": "^5.10.0",
|
||||||
"jsonwebtoken": "^9.0.0",
|
"jsonwebtoken": "^9.0.0",
|
||||||
"lucide-react": "^0.460.0",
|
"lucide-react": "^1.16.0",
|
||||||
"multer": "^2.1.0",
|
"multer": "^2.1.0",
|
||||||
"nodemailer": "^8.0.1",
|
"nodemailer": "^8.0.1",
|
||||||
|
"otpauth": "^9.5.0",
|
||||||
|
"pdfkit": "^0.18.0",
|
||||||
"pg": "^8.18.0",
|
"pg": "^8.18.0",
|
||||||
"rate-limit-redis": "^4.3.1",
|
"qrcode": "^1.5.4",
|
||||||
"react": "^18.3.0",
|
"rate-limit-redis": "^5.0.0",
|
||||||
"react-dom": "^18.3.0",
|
"react": "^19.2.6",
|
||||||
|
"react-dom": "^19.2.6",
|
||||||
"react-hot-toast": "^2.4.0",
|
"react-hot-toast": "^2.4.0",
|
||||||
"react-router-dom": "^6.28.0",
|
"react-router-dom": "^7.15.1",
|
||||||
"uuid": "^13.0.0",
|
"uuid": "^14.0.0",
|
||||||
"xml2js": "^0.6.0"
|
"xml2js": "^0.6.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.3.0",
|
"@tailwindcss/postcss": "^4.3.0",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react": "^19.2.14",
|
||||||
"@vitejs/plugin-react": "^4.7.0",
|
"@types/react-dom": "^19.2.3",
|
||||||
"autoprefixer": "^10.4.0",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
"postcss": "^8.4.0",
|
"postcss": "^8.4.0",
|
||||||
"tailwindcss": "^3.4.0",
|
"tailwindcss": "^4.3.0",
|
||||||
"vite": "^6.4.1"
|
"vite": "^8.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-2
@@ -1,6 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
'@tailwindcss/postcss': {},
|
||||||
autoprefixer: {},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<!-- Speech bubble tail -->
|
||||||
|
<path d="M 185 325 L 148 425 L 248 360 Z" fill="#2B3140" stroke="#2B3140" stroke-width="14" stroke-linejoin="round"/>
|
||||||
|
<!-- Speech bubble outline -->
|
||||||
|
<circle cx="256" cy="240" r="120" fill="none" stroke="#2B3140" stroke-width="34"/>
|
||||||
|
<!-- Red dot -->
|
||||||
|
<circle cx="262" cy="234" r="76" fill="#ED2224"/>
|
||||||
|
<!-- Sound waves right -->
|
||||||
|
<path d="M 423 100 A 218 218 0 0 1 423 380" fill="none" stroke="#ED2224" stroke-width="32" stroke-linecap="round"/>
|
||||||
|
<path d="M 413 160 A 176 176 0 0 1 413 320" fill="none" stroke="#ED2224" stroke-width="30" stroke-linecap="round"/>
|
||||||
|
<!-- Sound waves left -->
|
||||||
|
<path d="M 89 100 A 218 218 0 0 0 89 380" fill="none" stroke="#ED2224" stroke-width="32" stroke-linecap="round"/>
|
||||||
|
<path d="M 99 160 A 176 176 0 0 0 99 320" fill="none" stroke="#ED2224" stroke-width="30" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 934 B |
@@ -1,5 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
||||||
<rect width="32" height="32" rx="8" fill="#ef4444"/>
|
|
||||||
<circle cx="16" cy="16" r="8" fill="white" opacity="0.9"/>
|
|
||||||
<circle cx="16" cy="16" r="4" fill="#ef4444"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 268 B |
@@ -0,0 +1,20 @@
|
|||||||
|
import { getDb } from './database.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve the configured application name.
|
||||||
|
* Resolution order: admin-set 'app_name' setting → APP_NAME env var → 'Redlight'.
|
||||||
|
*
|
||||||
|
* The app name is stored in the settings table under the key 'app_name'
|
||||||
|
* (see routes/branding.js). This helper is the single source of truth so the
|
||||||
|
* configured name is used consistently across emails, the 2FA issuer, etc.
|
||||||
|
*/
|
||||||
|
export async function getAppName() {
|
||||||
|
try {
|
||||||
|
const db = getDb();
|
||||||
|
const row = await db.get("SELECT value FROM settings WHERE key = 'app_name'");
|
||||||
|
if (row?.value) return row.value;
|
||||||
|
} catch {
|
||||||
|
// fall through to env/default if the DB is unavailable
|
||||||
|
}
|
||||||
|
return process.env.APP_NAME || 'Redlight';
|
||||||
|
}
|
||||||
+10
-4
@@ -1,6 +1,7 @@
|
|||||||
import crypto from 'crypto';
|
import crypto from 'crypto';
|
||||||
import xml2js from 'xml2js';
|
import xml2js from 'xml2js';
|
||||||
import { log, fmtDuration, fmtStatus, fmtMethod, fmtReturncode, sanitizeBBBParams } from './logger.js';
|
import { log, fmtDuration, fmtStatus, fmtMethod, fmtReturncode, sanitizeBBBParams } from './logger.js';
|
||||||
|
import { t } from './emaili18n.js';
|
||||||
|
|
||||||
const BBB_URL = process.env.BBB_URL || 'https://your-bbb-server.com/bigbluebutton/api/';
|
const BBB_URL = process.env.BBB_URL || 'https://your-bbb-server.com/bigbluebutton/api/';
|
||||||
const BBB_SECRET = process.env.BBB_SECRET || '';
|
const BBB_SECRET = process.env.BBB_SECRET || '';
|
||||||
@@ -73,15 +74,15 @@ function getRoomPasswords(uid) {
|
|||||||
return { moderatorPW: modPw, attendeePW: attPw };
|
return { moderatorPW: modPw, attendeePW: attPw };
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function createMeeting(room, logoutURL, loginURL = null, presentationUrl = null, analyticsCallbackURL = null) {
|
export async function createMeeting(room, logoutURL, loginURL = null, presentationUrl = null, analyticsCallbackURL = null, lang = 'en') {
|
||||||
const { moderatorPW, attendeePW } = getRoomPasswords(room.uid);
|
const { moderatorPW, attendeePW } = getRoomPasswords(room.uid);
|
||||||
|
|
||||||
// Build welcome message with guest invite link
|
// Build welcome message with guest invite link
|
||||||
// HTML-escape user-controlled content to prevent stored XSS via BBB
|
// HTML-escape user-controlled content to prevent stored XSS via BBB
|
||||||
let welcome = room.welcome_message ? escapeHtml(room.welcome_message) : t('defaultWelcome');
|
let welcome = room.welcome_message ? escapeHtml(room.welcome_message) : escapeHtml(t(lang, 'bbb.defaultWelcome'));
|
||||||
if (logoutURL) {
|
if (logoutURL) {
|
||||||
const guestLink = `${logoutURL}/join/${room.uid}`;
|
const guestLink = `${logoutURL}/join/${room.uid}`;
|
||||||
welcome += `<br><br>To invite other participants, share this link:<br><a href="${escapeHtml(guestLink)}">${escapeHtml(guestLink)}</a>`;
|
welcome += `<br><br>${escapeHtml(t(lang, 'bbb.inviteHint'))}<br><a href="${escapeHtml(guestLink)}">${escapeHtml(guestLink)}</a>`;
|
||||||
// Access code is intentionally NOT shown in the welcome message to prevent
|
// Access code is intentionally NOT shown in the welcome message to prevent
|
||||||
// leaking it to all meeting participants.
|
// leaking it to all meeting participants.
|
||||||
}
|
}
|
||||||
@@ -129,7 +130,7 @@ export async function createMeeting(room, logoutURL, loginURL = null, presentati
|
|||||||
return apiCall('create', params, xmlBody);
|
return apiCall('create', params, xmlBody);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function joinMeeting(uid, name, isModerator = false, avatarURL = null) {
|
export async function joinMeeting(uid, name, isModerator = false, avatarURL = null, darkMode = false) {
|
||||||
const { moderatorPW, attendeePW } = getRoomPasswords(uid);
|
const { moderatorPW, attendeePW } = getRoomPasswords(uid);
|
||||||
const params = {
|
const params = {
|
||||||
meetingID: uid,
|
meetingID: uid,
|
||||||
@@ -140,6 +141,11 @@ export async function joinMeeting(uid, name, isModerator = false, avatarURL = nu
|
|||||||
if (avatarURL) {
|
if (avatarURL) {
|
||||||
params.avatarURL = avatarURL;
|
params.avatarURL = avatarURL;
|
||||||
}
|
}
|
||||||
|
if (darkMode) {
|
||||||
|
// Per-user userdata override: start the client in dark theme for users who
|
||||||
|
// have a dark theme active in Redlight. Read by BBB as bbb_prefer_dark_theme.
|
||||||
|
params['userdata-bbb_prefer_dark_theme'] = 'true';
|
||||||
|
}
|
||||||
return buildUrl('join', params);
|
return buildUrl('join', params);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import bcrypt from 'bcryptjs';
|
import bcrypt from 'bcryptjs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import { log } from './logger.js';
|
import { log } from './logger.js';
|
||||||
@@ -802,6 +802,64 @@ export async function initDatabase() {
|
|||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── TOTP 2FA columns ──────────────────────────────────────────────────────
|
||||||
|
if (!(await db.columnExists('users', 'totp_secret'))) {
|
||||||
|
await db.exec('ALTER TABLE users ADD COLUMN totp_secret TEXT DEFAULT NULL');
|
||||||
|
}
|
||||||
|
if (!(await db.columnExists('users', 'totp_enabled'))) {
|
||||||
|
await db.exec('ALTER TABLE users ADD COLUMN totp_enabled INTEGER DEFAULT 0');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Analytics visibility setting ────────────────────────────────────────
|
||||||
|
if (!(await db.columnExists('rooms', 'analytics_visibility'))) {
|
||||||
|
await db.exec("ALTER TABLE rooms ADD COLUMN analytics_visibility TEXT DEFAULT 'owner'");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Recordings cache table ────────────────────────────────────────────
|
||||||
|
if (isPostgres) {
|
||||||
|
await db.exec(`
|
||||||
|
CREATE TABLE IF NOT EXISTS recordings (
|
||||||
|
id SERIAL PRIMARY KEY,
|
||||||
|
record_id TEXT UNIQUE NOT NULL,
|
||||||
|
meeting_id TEXT NOT NULL,
|
||||||
|
name TEXT,
|
||||||
|
state TEXT,
|
||||||
|
published INTEGER DEFAULT 1,
|
||||||
|
start_time TEXT,
|
||||||
|
end_time TEXT,
|
||||||
|
participants TEXT,
|
||||||
|
size TEXT,
|
||||||
|
formats TEXT NOT NULL DEFAULT '[]',
|
||||||
|
metadata TEXT DEFAULT '{}',
|
||||||
|
created_at TIMESTAMP DEFAULT NOW(),
|
||||||
|
updated_at TIMESTAMP DEFAULT NOW()
|
||||||
|
);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_recordings_record_id ON recordings(record_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_recordings_meeting_id ON recordings(meeting_id);
|
||||||
|
`);
|
||||||
|
} else {
|
||||||
|
await db.exec(`
|
||||||
|
CREATE TABLE IF NOT EXISTS recordings (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
record_id TEXT UNIQUE NOT NULL,
|
||||||
|
meeting_id TEXT NOT NULL,
|
||||||
|
name TEXT,
|
||||||
|
state TEXT,
|
||||||
|
published INTEGER DEFAULT 1,
|
||||||
|
start_time TEXT,
|
||||||
|
end_time TEXT,
|
||||||
|
participants TEXT,
|
||||||
|
size TEXT,
|
||||||
|
formats TEXT NOT NULL DEFAULT '[]',
|
||||||
|
metadata TEXT DEFAULT '{}',
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_recordings_record_id ON recordings(record_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_recordings_meeting_id ON recordings(meeting_id);
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
// ── Default admin (only on very first start) ────────────────────────────
|
// ── Default admin (only on very first start) ────────────────────────────
|
||||||
const adminAlreadySeeded = await db.get("SELECT value FROM settings WHERE key = 'admin_seeded'");
|
const adminAlreadySeeded = await db.get("SELECT value FROM settings WHERE key = 'admin_seeded'");
|
||||||
if (!adminAlreadySeeded) {
|
if (!adminAlreadySeeded) {
|
||||||
|
|||||||
+56
-3
@@ -64,7 +64,6 @@ export async function sendVerificationEmail(to, name, verifyUrl, appName = 'Redl
|
|||||||
const from = process.env.SMTP_FROM || process.env.SMTP_USER;
|
const from = process.env.SMTP_FROM || process.env.SMTP_USER;
|
||||||
const headerAppName = sanitizeHeaderValue(appName);
|
const headerAppName = sanitizeHeaderValue(appName);
|
||||||
const safeName = escapeHtml(name);
|
const safeName = escapeHtml(name);
|
||||||
const safeAppName = escapeHtml(appName);
|
|
||||||
|
|
||||||
await transporter.sendMail({
|
await transporter.sendMail({
|
||||||
from: `"${headerAppName}" <${from}>`,
|
from: `"${headerAppName}" <${from}>`,
|
||||||
@@ -112,7 +111,6 @@ export async function sendFederationInviteEmail(to, name, fromUser, roomName, me
|
|||||||
const safeFromUser = escapeHtml(fromUser);
|
const safeFromUser = escapeHtml(fromUser);
|
||||||
const safeRoomName = escapeHtml(roomName);
|
const safeRoomName = escapeHtml(roomName);
|
||||||
const safeMessage = message ? escapeHtml(message) : null;
|
const safeMessage = message ? escapeHtml(message) : null;
|
||||||
const safeAppName = escapeHtml(appName);
|
|
||||||
|
|
||||||
const introHtml = t(lang, 'email.federationInvite.intro')
|
const introHtml = t(lang, 'email.federationInvite.intro')
|
||||||
.replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);
|
.replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);
|
||||||
@@ -144,6 +142,61 @@ export async function sendFederationInviteEmail(to, name, fromUser, roomName, me
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send a guest meeting invitation email with a direct join link.
|
||||||
|
* @param {string} to - recipient email
|
||||||
|
* @param {string} fromUser - sender display name
|
||||||
|
* @param {string} roomName - name of the room
|
||||||
|
* @param {string} message - optional personal message
|
||||||
|
* @param {string} joinUrl - direct guest join URL
|
||||||
|
* @param {string} appName - branding app name
|
||||||
|
* @param {string} lang - language code
|
||||||
|
*/
|
||||||
|
export async function sendGuestInviteEmail(to, fromUser, roomName, message, joinUrl, appName = 'Redlight', lang = 'en') {
|
||||||
|
if (!transporter) {
|
||||||
|
throw new Error('SMTP not configured');
|
||||||
|
}
|
||||||
|
|
||||||
|
const from = process.env.SMTP_FROM || process.env.SMTP_USER;
|
||||||
|
const headerAppName = sanitizeHeaderValue(appName);
|
||||||
|
const safeFromUser = escapeHtml(fromUser);
|
||||||
|
const safeRoomName = escapeHtml(roomName);
|
||||||
|
const safeMessage = message ? escapeHtml(message) : null;
|
||||||
|
|
||||||
|
const introHtml = t(lang, 'email.guestInvite.intro')
|
||||||
|
.replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);
|
||||||
|
|
||||||
|
await transporter.sendMail({
|
||||||
|
from: `"${headerAppName}" <${from}>`,
|
||||||
|
to,
|
||||||
|
subject: t(lang, 'email.guestInvite.subject', { appName: headerAppName, fromUser: sanitizeHeaderValue(fromUser) }),
|
||||||
|
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;">Meeting Invitation</h2>
|
||||||
|
<p>${introHtml}</p>
|
||||||
|
<div style="background:#313244;border-radius:8px;padding:16px;margin:20px 0;">
|
||||||
|
<p style="margin:0 0 8px 0;font-size:13px;color:#7f849c;">${t(lang, 'email.guestInvite.roomLabel')}</p>
|
||||||
|
<p style="margin:0;font-size:16px;font-weight:bold;color:#cdd6f4;">${safeRoomName}</p>
|
||||||
|
${safeMessage ? `<p style="margin:12px 0 0 0;font-size:13px;color:#a6adc8;font-style:italic;">"${safeMessage}"</p>` : ''}
|
||||||
|
</div>
|
||||||
|
<p style="text-align:center;margin:28px 0;">
|
||||||
|
<a href="${joinUrl}"
|
||||||
|
style="display:inline-block;background:#cba6f7;color:#1e1e2e;padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:bold;">
|
||||||
|
${t(lang, 'email.guestInvite.joinButton')}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p style="font-size:13px;color:#7f849c;">
|
||||||
|
${t(lang, 'email.linkHint')}<br/>
|
||||||
|
<a href="${joinUrl}" style="color:#89b4fa;word-break:break-all;">${escapeHtml(joinUrl)}</a>
|
||||||
|
</p>
|
||||||
|
<hr style="border:none;border-top:1px solid #313244;margin:24px 0;"/>
|
||||||
|
<p style="font-size:12px;color:#585b70;">${t(lang, 'email.guestInvite.footer')}</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
text: `${t(lang, 'email.guestInvite.intro', { fromUser })}\n${t(lang, 'email.guestInvite.roomLabel')} ${roomName}${message ? `\n"${message}"` : ''}\n\n${t(lang, 'email.guestInvite.joinButton')}: ${joinUrl}\n\n- ${appName}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Send a calendar event invitation email (federated).
|
* Send a calendar event invitation email (federated).
|
||||||
*/
|
*/
|
||||||
@@ -175,7 +228,7 @@ export async function sendCalendarInviteEmail(to, name, fromUser, title, startTi
|
|||||||
<p>${introHtml}</p>
|
<p>${introHtml}</p>
|
||||||
<div style="background:#313244;border-radius:8px;padding:16px;margin:20px 0;">
|
<div style="background:#313244;border-radius:8px;padding:16px;margin:20px 0;">
|
||||||
<p style="margin:0 0 4px 0;font-size:15px;font-weight:bold;color:#cdd6f4;">${safeTitle}</p>
|
<p style="margin:0 0 4px 0;font-size:15px;font-weight:bold;color:#cdd6f4;">${safeTitle}</p>
|
||||||
<p style="margin:6px 0 0 0;font-size:13px;color:#a6adc8;">🕐 ${escapeHtml(formatDate(startTime))} - ${escapeHtml(formatDate(endTime))}</p>
|
<p style="margin:6px 0 0 0;font-size:13px;color:#a6adc8;">${escapeHtml(formatDate(startTime))} - ${escapeHtml(formatDate(endTime))}</p>
|
||||||
${safeDesc ? `<p style="margin:10px 0 0 0;font-size:13px;color:#a6adc8;font-style:italic;">"${safeDesc}"</p>` : ''}
|
${safeDesc ? `<p style="margin:10px 0 0 0;font-size:13px;color:#a6adc8;font-style:italic;">"${safeDesc}"</p>` : ''}
|
||||||
</div>
|
</div>
|
||||||
<p style="text-align:center;margin:28px 0;">
|
<p style="text-align:center;margin:28px 0;">
|
||||||
|
|||||||
+13
-2
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"email": {
|
"email": {
|
||||||
"greeting": "Hey {name} 👋",
|
"greeting": "Hallo {name},",
|
||||||
"viewInvitation": "Einladung anzeigen",
|
"viewInvitation": "Einladung anzeigen",
|
||||||
"invitationFooter": "Öffne den Link oben, um die Einladung anzunehmen oder abzulehnen.",
|
"invitationFooter": "Öffne den Link oben, um die Einladung anzunehmen oder abzulehnen.",
|
||||||
"linkHint": "Oder kopiere diesen Link in deinen Browser:",
|
"linkHint": "Oder kopiere diesen Link in deinen Browser:",
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
},
|
},
|
||||||
"invite": {
|
"invite": {
|
||||||
"subject": "{appName} - Du wurdest eingeladen",
|
"subject": "{appName} - Du wurdest eingeladen",
|
||||||
"title": "Du wurdest eingeladen! 🎉",
|
"title": "Du wurdest eingeladen",
|
||||||
"intro": "Du wurdest eingeladen, ein Konto auf {appName} zu erstellen.",
|
"intro": "Du wurdest eingeladen, ein Konto auf {appName} zu erstellen.",
|
||||||
"prompt": "Klicke auf den Button, um dich zu registrieren:",
|
"prompt": "Klicke auf den Button, um dich zu registrieren:",
|
||||||
"button": "Konto erstellen",
|
"button": "Konto erstellen",
|
||||||
@@ -25,6 +25,13 @@
|
|||||||
"intro": "Du hast eine Meeting-Einladung von {fromUser} erhalten.",
|
"intro": "Du hast eine Meeting-Einladung von {fromUser} erhalten.",
|
||||||
"roomLabel": "Raum:"
|
"roomLabel": "Raum:"
|
||||||
},
|
},
|
||||||
|
"guestInvite": {
|
||||||
|
"subject": "{appName} - Einladung zu einem Meeting",
|
||||||
|
"intro": "{fromUser} hat dich zu einem Meeting eingeladen.",
|
||||||
|
"roomLabel": "Raum:",
|
||||||
|
"joinButton": "Meeting beitreten",
|
||||||
|
"footer": "Klicke auf den Button oben, um dem Meeting beizutreten."
|
||||||
|
},
|
||||||
"calendarInvite": {
|
"calendarInvite": {
|
||||||
"subject": "{appName} - Kalendereinladung von {fromUser}",
|
"subject": "{appName} - Kalendereinladung von {fromUser}",
|
||||||
"intro": "Du hast eine Kalendereinladung von {fromUser} erhalten."
|
"intro": "Du hast eine Kalendereinladung von {fromUser} erhalten."
|
||||||
@@ -35,5 +42,9 @@
|
|||||||
"note": "Der Termin wurde automatisch aus deinem Kalender entfernt.",
|
"note": "Der Termin wurde automatisch aus deinem Kalender entfernt.",
|
||||||
"footer": "Diese Nachricht wurde automatisch von {appName} versendet."
|
"footer": "Diese Nachricht wurde automatisch von {appName} versendet."
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"bbb": {
|
||||||
|
"defaultWelcome": "Willkommen im Meeting!",
|
||||||
|
"inviteHint": "Lade weitere Teilnehmer ein, indem du diesen Link teilst:"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+13
-2
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"email": {
|
"email": {
|
||||||
"greeting": "Hey {name} 👋",
|
"greeting": "Hello {name},",
|
||||||
"viewInvitation": "View Invitation",
|
"viewInvitation": "View Invitation",
|
||||||
"invitationFooter": "Open the link above to accept or decline the invitation.",
|
"invitationFooter": "Open the link above to accept or decline the invitation.",
|
||||||
"linkHint": "Or copy this link in your browser:",
|
"linkHint": "Or copy this link in your browser:",
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
},
|
},
|
||||||
"invite": {
|
"invite": {
|
||||||
"subject": "{appName} - You've been invited",
|
"subject": "{appName} - You've been invited",
|
||||||
"title": "You've been invited! 🎉",
|
"title": "You have been invited",
|
||||||
"intro": "You have been invited to create an account on {appName}.",
|
"intro": "You have been invited to create an account on {appName}.",
|
||||||
"prompt": "Click the button below to register:",
|
"prompt": "Click the button below to register:",
|
||||||
"button": "Create Account",
|
"button": "Create Account",
|
||||||
@@ -25,6 +25,13 @@
|
|||||||
"intro": "You have received a meeting invitation from {fromUser}.",
|
"intro": "You have received a meeting invitation from {fromUser}.",
|
||||||
"roomLabel": "Room:"
|
"roomLabel": "Room:"
|
||||||
},
|
},
|
||||||
|
"guestInvite": {
|
||||||
|
"subject": "{appName} - You're invited to a meeting",
|
||||||
|
"intro": "{fromUser} has invited you to a meeting.",
|
||||||
|
"roomLabel": "Room:",
|
||||||
|
"joinButton": "Join Meeting",
|
||||||
|
"footer": "Click the button above to join the meeting."
|
||||||
|
},
|
||||||
"calendarInvite": {
|
"calendarInvite": {
|
||||||
"subject": "{appName} - Calendar invitation from {fromUser}",
|
"subject": "{appName} - Calendar invitation from {fromUser}",
|
||||||
"intro": "You have received a calendar invitation from {fromUser}."
|
"intro": "You have received a calendar invitation from {fromUser}."
|
||||||
@@ -35,5 +42,9 @@
|
|||||||
"note": "The event has been automatically removed from your calendar.",
|
"note": "The event has been automatically removed from your calendar.",
|
||||||
"footer": "This message was sent automatically by {appName}."
|
"footer": "This message was sent automatically by {appName}."
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"bbb": {
|
||||||
|
"defaultWelcome": "Welcome to the meeting!",
|
||||||
|
"inviteHint": "To invite other participants, share this link:"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-3
@@ -51,7 +51,14 @@ const corsOptions = process.env.APP_URL
|
|||||||
? { origin: process.env.APP_URL, credentials: true }
|
? { origin: process.env.APP_URL, credentials: true }
|
||||||
: { origin: false };
|
: { origin: false };
|
||||||
app.use(cors(corsOptions));
|
app.use(cors(corsOptions));
|
||||||
app.use(express.json({ limit: '100kb' }));
|
// Global JSON body limit kept tight as a hardening measure. The BBB learning
|
||||||
|
// analytics callback can send much larger payloads, so it is excluded here and
|
||||||
|
// gets its own, more generous limit on the route itself (see routes/analytics.js).
|
||||||
|
const jsonParser = express.json({ limit: '100kb' });
|
||||||
|
app.use((req, res, next) => {
|
||||||
|
if (req.path.startsWith('/api/analytics/callback/')) return next();
|
||||||
|
return jsonParser(req, res, next);
|
||||||
|
});
|
||||||
// Request/Response logging (filters sensitive fields)
|
// Request/Response logging (filters sensitive fields)
|
||||||
app.use(requestResponseLogger);
|
app.use(requestResponseLogger);
|
||||||
|
|
||||||
@@ -60,9 +67,10 @@ async function start() {
|
|||||||
await initDatabase();
|
await initDatabase();
|
||||||
initMailer();
|
initMailer();
|
||||||
|
|
||||||
// Serve uploaded files (branding only — avatars served via /api/auth/avatar/:filename, presentations require auth)
|
// Serve uploaded files (avatars are served via /api/auth/avatar/:filename)
|
||||||
const uploadsPath = path.join(__dirname, '..', 'uploads');
|
const uploadsPath = path.join(__dirname, '..', 'uploads');
|
||||||
app.use('/uploads/branding', express.static(path.join(uploadsPath, 'branding')));
|
app.use('/uploads/branding', express.static(path.join(uploadsPath, 'branding')));
|
||||||
|
// Presentations are served via /api/rooms/presentations/:filename?token=… (HMAC-protected)
|
||||||
|
|
||||||
// API Routes
|
// API Routes
|
||||||
app.use('/api/auth', authRoutes);
|
app.use('/api/auth', authRoutes);
|
||||||
@@ -99,7 +107,7 @@ async function start() {
|
|||||||
// Serve static files in production
|
// Serve static files in production
|
||||||
if (process.env.NODE_ENV === 'production') {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
app.use(express.static(path.join(__dirname, '..', 'dist')));
|
app.use(express.static(path.join(__dirname, '..', 'dist')));
|
||||||
app.get('*', (req, res) => {
|
app.get('/*splat', (req, res) => {
|
||||||
res.sendFile(path.join(__dirname, '..', 'dist', 'index.html'));
|
res.sendFile(path.join(__dirname, '..', 'dist', 'index.html'));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ export async function authenticateToken(req, res, next) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
const user = await db.get('SELECT id, name, display_name, email, role, theme, language, avatar_color, avatar_image, email_verified, oauth_provider FROM users WHERE id = ?', [decoded.userId]);
|
const user = await db.get('SELECT id, name, display_name, email, role, theme, language, avatar_color, avatar_image, email_verified, oauth_provider, totp_enabled FROM users WHERE id = ?', [decoded.userId]);
|
||||||
if (!user) {
|
if (!user) {
|
||||||
return res.status(401).json({ error: 'User not found' });
|
return res.status(401).json({ error: 'User not found' });
|
||||||
}
|
}
|
||||||
|
|||||||
+33
-3
@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
|
|||||||
import { getDb } from '../config/database.js';
|
import { getDb } from '../config/database.js';
|
||||||
import { authenticateToken, requireAdmin, getBaseUrl } from '../middleware/auth.js';
|
import { authenticateToken, requireAdmin, getBaseUrl } from '../middleware/auth.js';
|
||||||
import { isMailerConfigured, sendInviteEmail } from '../config/mailer.js';
|
import { isMailerConfigured, sendInviteEmail } from '../config/mailer.js';
|
||||||
|
import { getAppName } from '../config/appName.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
import {
|
import {
|
||||||
getOAuthConfig,
|
getOAuthConfig,
|
||||||
@@ -38,6 +39,9 @@ router.post('/users', authenticateToken, requireAdmin, async (req, res) => {
|
|||||||
if (password.length < 8) {
|
if (password.length < 8) {
|
||||||
return res.status(400).json({ error: 'Password must be at least 8 characters long' });
|
return res.status(400).json({ error: 'Password must be at least 8 characters long' });
|
||||||
}
|
}
|
||||||
|
if (password.length > 64) {
|
||||||
|
return res.status(400).json({ error: 'Password must not exceed 64 characters' });
|
||||||
|
}
|
||||||
|
|
||||||
// M9: email format validation
|
// M9: email format validation
|
||||||
if (!EMAIL_RE.test(email)) {
|
if (!EMAIL_RE.test(email)) {
|
||||||
@@ -160,6 +164,9 @@ router.put('/users/:id/password', authenticateToken, requireAdmin, async (req, r
|
|||||||
if (!newPassword || typeof newPassword !== 'string' || newPassword.length < 8) {
|
if (!newPassword || typeof newPassword !== 'string' || newPassword.length < 8) {
|
||||||
return res.status(400).json({ error: 'Password must be at least 8 characters long' });
|
return res.status(400).json({ error: 'Password must be at least 8 characters long' });
|
||||||
}
|
}
|
||||||
|
if (newPassword.length > 64) {
|
||||||
|
return res.status(400).json({ error: 'Password must not exceed 64 characters' });
|
||||||
|
}
|
||||||
|
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
const hash = await bcrypt.hash(newPassword, 12);
|
const hash = await bcrypt.hash(newPassword, 12);
|
||||||
@@ -211,9 +218,8 @@ router.post('/invites', authenticateToken, requireAdmin, async (req, res) => {
|
|||||||
const baseUrl = getBaseUrl(req);
|
const baseUrl = getBaseUrl(req);
|
||||||
const inviteUrl = `${baseUrl}/register?invite=${token}`;
|
const inviteUrl = `${baseUrl}/register?invite=${token}`;
|
||||||
|
|
||||||
// Load app name
|
// Load configured app name (admin setting → env → default)
|
||||||
const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'app_name'");
|
const appName = await getAppName();
|
||||||
const appName = brandingSetting?.value || 'Redlight';
|
|
||||||
|
|
||||||
if (isMailerConfigured()) {
|
if (isMailerConfigured()) {
|
||||||
try {
|
try {
|
||||||
@@ -362,4 +368,28 @@ router.delete('/oauth', authenticateToken, requireAdmin, async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ── Room Management (admin only) ────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/admin/rooms - List all rooms with owner info
|
||||||
|
router.get('/rooms', authenticateToken, requireAdmin, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const db = getDb();
|
||||||
|
const rooms = await db.all(`
|
||||||
|
SELECT r.id, r.uid, r.name, r.user_id, r.max_participants, r.access_code,
|
||||||
|
r.mute_on_join, r.record_meeting, r.guest_access, r.presentation_file,
|
||||||
|
r.created_at, r.updated_at,
|
||||||
|
COALESCE(NULLIF(u.display_name,''), u.name) as owner_name,
|
||||||
|
u.email as owner_email,
|
||||||
|
(SELECT COUNT(*) FROM room_shares rs WHERE rs.room_id = r.id) as share_count
|
||||||
|
FROM rooms r
|
||||||
|
JOIN users u ON r.user_id = u.id
|
||||||
|
ORDER BY r.created_at DESC
|
||||||
|
`);
|
||||||
|
res.json({ rooms });
|
||||||
|
} catch (err) {
|
||||||
|
log.admin.error(`List rooms error: ${err.message}`);
|
||||||
|
res.status(500).json({ error: 'Rooms could not be loaded' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|||||||
+206
-13
@@ -1,5 +1,7 @@
|
|||||||
import { Router } from 'express';
|
import { Router, json } from 'express';
|
||||||
import crypto from 'crypto';
|
import crypto from 'crypto';
|
||||||
|
import ExcelJS from 'exceljs';
|
||||||
|
import PDFDocument from 'pdfkit';
|
||||||
import { getDb } from '../config/database.js';
|
import { getDb } from '../config/database.js';
|
||||||
import { authenticateToken } from '../middleware/auth.js';
|
import { authenticateToken } from '../middleware/auth.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
@@ -7,18 +9,25 @@ import { getAnalyticsToken } from '../config/bbb.js';
|
|||||||
|
|
||||||
const router = Router();
|
const router = Router();
|
||||||
|
|
||||||
|
// Token check runs BEFORE the 5mb body parser so unauthenticated callers
|
||||||
|
// cannot make the server buffer large payloads.
|
||||||
|
// Constant-time comparison to prevent timing attacks. Reject non-string tokens
|
||||||
|
// (e.g. ?token=a&token=b would yield an array and crash Buffer.from).
|
||||||
|
function verifyCallbackToken(req, res, next) {
|
||||||
|
const { token } = req.query;
|
||||||
|
const expectedToken = getAnalyticsToken(req.params.uid);
|
||||||
|
if (typeof token !== 'string' || token.length !== expectedToken.length ||
|
||||||
|
!crypto.timingSafeEqual(Buffer.from(token), Buffer.from(expectedToken))) {
|
||||||
|
return res.status(403).json({ error: 'Invalid token' });
|
||||||
|
}
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
|
||||||
// POST /api/analytics/callback/:uid?token=... - BBB Learning Analytics callback (token-secured)
|
// POST /api/analytics/callback/:uid?token=... - BBB Learning Analytics callback (token-secured)
|
||||||
router.post('/callback/:uid', async (req, res) => {
|
// Excluded from the global 100kb body limit (see index.js): learning analytics
|
||||||
|
// payloads for large meetings can be several MB.
|
||||||
|
router.post('/callback/:uid', verifyCallbackToken, json({ limit: '5mb' }), async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const { token } = req.query;
|
|
||||||
const expectedToken = getAnalyticsToken(req.params.uid);
|
|
||||||
|
|
||||||
// Constant-time comparison to prevent timing attacks
|
|
||||||
if (!token || token.length !== expectedToken.length ||
|
|
||||||
!crypto.timingSafeEqual(Buffer.from(token), Buffer.from(expectedToken))) {
|
|
||||||
return res.status(403).json({ error: 'Invalid token' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
const room = await db.get('SELECT id, uid, learning_analytics FROM rooms WHERE uid = ?', [req.params.uid]);
|
const room = await db.get('SELECT id, uid, learning_analytics FROM rooms WHERE uid = ?', [req.params.uid]);
|
||||||
|
|
||||||
@@ -72,14 +81,17 @@ router.post('/callback/:uid', async (req, res) => {
|
|||||||
router.get('/room/:uid', authenticateToken, async (req, res) => {
|
router.get('/room/:uid', authenticateToken, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [req.params.uid]);
|
const room = await db.get('SELECT id, user_id, analytics_visibility FROM rooms WHERE uid = ?', [req.params.uid]);
|
||||||
|
|
||||||
if (!room) {
|
if (!room) {
|
||||||
return res.status(404).json({ error: 'Room not found' });
|
return res.status(404).json({ error: 'Room not found' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check access: owner, shared, or admin
|
// Check access: owner, shared (if visibility allows), or admin
|
||||||
if (room.user_id !== req.user.id && req.user.role !== 'admin') {
|
if (room.user_id !== req.user.id && req.user.role !== 'admin') {
|
||||||
|
if (room.analytics_visibility !== 'shared') {
|
||||||
|
return res.status(403).json({ error: 'No permission to view analytics for this room' });
|
||||||
|
}
|
||||||
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
|
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
|
||||||
if (!share) {
|
if (!share) {
|
||||||
return res.status(403).json({ error: 'No permission to view analytics for this room' });
|
return res.status(403).json({ error: 'No permission to view analytics for this room' });
|
||||||
@@ -134,4 +146,185 @@ router.delete('/:id', authenticateToken, async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Helper: extract flat attendee rows from analytics entry
|
||||||
|
function extractRows(entry) {
|
||||||
|
const data = typeof entry.data === 'string' ? JSON.parse(entry.data) : entry.data;
|
||||||
|
const attendees = data?.data?.attendees || [];
|
||||||
|
const meetingName = data?.data?.metadata?.meeting_name || entry.meeting_name || '';
|
||||||
|
const meetingDuration = data?.data?.duration || 0;
|
||||||
|
const meetingStart = data?.data?.start || '';
|
||||||
|
const meetingFinish = data?.data?.finish || '';
|
||||||
|
|
||||||
|
return attendees.map(a => ({
|
||||||
|
meetingName,
|
||||||
|
meetingStart,
|
||||||
|
meetingFinish,
|
||||||
|
meetingDuration,
|
||||||
|
name: a.name || '',
|
||||||
|
role: a.moderator ? 'Moderator' : 'Viewer',
|
||||||
|
duration: a.duration || 0,
|
||||||
|
talkTime: a.engagement?.talk_time || 0,
|
||||||
|
chats: a.engagement?.chats || 0,
|
||||||
|
talks: a.engagement?.talks || 0,
|
||||||
|
raiseHand: a.engagement?.raisehand || 0,
|
||||||
|
emojis: a.engagement?.emojis || 0,
|
||||||
|
pollVotes: a.engagement?.poll_votes || 0,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const COLUMNS = [
|
||||||
|
{ header: 'Meeting', key: 'meetingName', width: 25 },
|
||||||
|
{ header: 'Start', key: 'meetingStart', width: 20 },
|
||||||
|
{ header: 'End', key: 'meetingFinish', width: 20 },
|
||||||
|
{ header: 'Meeting Duration (s)', key: 'meetingDuration', width: 18 },
|
||||||
|
{ header: 'Name', key: 'name', width: 25 },
|
||||||
|
{ header: 'Role', key: 'role', width: 12 },
|
||||||
|
{ header: 'Duration (s)', key: 'duration', width: 14 },
|
||||||
|
{ header: 'Talk Time (s)', key: 'talkTime', width: 14 },
|
||||||
|
{ header: 'Chats', key: 'chats', width: 8 },
|
||||||
|
{ header: 'Talks', key: 'talks', width: 8 },
|
||||||
|
{ header: 'Raise Hand', key: 'raiseHand', width: 12 },
|
||||||
|
{ header: 'Emojis', key: 'emojis', width: 8 },
|
||||||
|
{ header: 'Poll Votes', key: 'pollVotes', width: 10 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// GET /api/analytics/:id/export/:format - Export a single analytics entry (csv, xlsx, pdf)
|
||||||
|
router.get('/:id/export/:format', authenticateToken, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const format = req.params.format;
|
||||||
|
if (!['csv', 'xlsx', 'pdf'].includes(format)) {
|
||||||
|
return res.status(400).json({ error: 'Unsupported format. Use csv, xlsx, or pdf.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const db = getDb();
|
||||||
|
const entry = await db.get(
|
||||||
|
`SELECT la.*, r.user_id, r.analytics_visibility
|
||||||
|
FROM learning_analytics_data la
|
||||||
|
JOIN rooms r ON la.room_id = r.id
|
||||||
|
WHERE la.id = ?`,
|
||||||
|
[req.params.id]
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!entry) {
|
||||||
|
return res.status(404).json({ error: 'Analytics entry not found' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.user_id !== req.user.id && req.user.role !== 'admin') {
|
||||||
|
if (entry.analytics_visibility !== 'shared') {
|
||||||
|
return res.status(403).json({ error: 'No permission to export this entry' });
|
||||||
|
}
|
||||||
|
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [entry.room_id, req.user.id]);
|
||||||
|
if (!share) {
|
||||||
|
return res.status(403).json({ error: 'No permission to export this entry' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = extractRows(entry);
|
||||||
|
const safeName = (entry.meeting_name || 'analytics').replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||||
|
|
||||||
|
if (format === 'csv') {
|
||||||
|
// Prefix-escape values that start with a formula trigger character so that
|
||||||
|
// Excel/LibreOffice do not evaluate them as formulas (CSV injection).
|
||||||
|
const escapeCsv = (val) => {
|
||||||
|
if (val === null || val === undefined) return '';
|
||||||
|
let s = String(val);
|
||||||
|
if (/^[=+\-@\t\r]/.test(s)) s = "'" + s;
|
||||||
|
if (s.includes(',') || s.includes('"') || s.includes('\n') || s.includes('\r')) {
|
||||||
|
return '"' + s.replace(/"/g, '""') + '"';
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
};
|
||||||
|
const header = COLUMNS.map(c => c.header).join(',');
|
||||||
|
const csvRows = rows.map(r =>
|
||||||
|
COLUMNS.map(c => escapeCsv(r[c.key])).join(',')
|
||||||
|
);
|
||||||
|
const csv = [header, ...csvRows].join('\n');
|
||||||
|
res.setHeader('Content-Type', 'text/csv; charset=utf-8');
|
||||||
|
res.setHeader('Content-Disposition', `attachment; filename="${safeName}.csv"`);
|
||||||
|
return res.send('\uFEFF' + csv); // BOM for Excel UTF-8
|
||||||
|
}
|
||||||
|
|
||||||
|
if (format === 'xlsx') {
|
||||||
|
// Prefix-escape strings that would otherwise be evaluated as formulas.
|
||||||
|
const sanitizeXlsx = (r) => {
|
||||||
|
const out = {};
|
||||||
|
for (const k of Object.keys(r)) {
|
||||||
|
const v = r[k];
|
||||||
|
out[k] = (typeof v === 'string' && /^[=+\-@\t\r]/.test(v)) ? "'" + v : v;
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
};
|
||||||
|
const workbook = new ExcelJS.Workbook();
|
||||||
|
const sheet = workbook.addWorksheet('Analytics');
|
||||||
|
sheet.columns = COLUMNS;
|
||||||
|
rows.forEach(r => sheet.addRow(sanitizeXlsx(r)));
|
||||||
|
// Style header row
|
||||||
|
sheet.getRow(1).font = { bold: true };
|
||||||
|
sheet.getRow(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE0E0E0' } };
|
||||||
|
|
||||||
|
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
||||||
|
res.setHeader('Content-Disposition', `attachment; filename="${safeName}.xlsx"`);
|
||||||
|
await workbook.xlsx.write(res);
|
||||||
|
return res.end();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (format === 'pdf') {
|
||||||
|
const doc = new PDFDocument({ size: 'A4', layout: 'landscape', margin: 30 });
|
||||||
|
res.setHeader('Content-Type', 'application/pdf');
|
||||||
|
res.setHeader('Content-Disposition', `attachment; filename="${safeName}.pdf"`);
|
||||||
|
doc.pipe(res);
|
||||||
|
|
||||||
|
// Title
|
||||||
|
doc.fontSize(16).text(entry.meeting_name || 'Learning Analytics', { align: 'center' });
|
||||||
|
doc.moveDown(0.5);
|
||||||
|
|
||||||
|
// Table header columns for PDF (subset for readability)
|
||||||
|
const pdfCols = [
|
||||||
|
{ header: 'Name', key: 'name', width: 120 },
|
||||||
|
{ header: 'Role', key: 'role', width: 65 },
|
||||||
|
{ header: 'Duration (s)', key: 'duration', width: 75 },
|
||||||
|
{ header: 'Talk Time (s)', key: 'talkTime', width: 75 },
|
||||||
|
{ header: 'Chats', key: 'chats', width: 50 },
|
||||||
|
{ header: 'Talks', key: 'talks', width: 50 },
|
||||||
|
{ header: 'Raise Hand', key: 'raiseHand', width: 65 },
|
||||||
|
{ header: 'Emojis', key: 'emojis', width: 50 },
|
||||||
|
{ header: 'Poll Votes', key: 'pollVotes', width: 60 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const startX = doc.x;
|
||||||
|
let y = doc.y;
|
||||||
|
|
||||||
|
// Header
|
||||||
|
doc.fontSize(8).font('Helvetica-Bold');
|
||||||
|
pdfCols.forEach((col, i) => {
|
||||||
|
const x = startX + pdfCols.slice(0, i).reduce((s, c) => s + c.width, 0);
|
||||||
|
doc.text(col.header, x, y, { width: col.width, align: 'left' });
|
||||||
|
});
|
||||||
|
y += 14;
|
||||||
|
doc.moveTo(startX, y).lineTo(startX + pdfCols.reduce((s, c) => s + c.width, 0), y).stroke();
|
||||||
|
y += 4;
|
||||||
|
|
||||||
|
// Rows
|
||||||
|
doc.font('Helvetica').fontSize(8);
|
||||||
|
rows.forEach(r => {
|
||||||
|
if (y > doc.page.height - 50) {
|
||||||
|
doc.addPage();
|
||||||
|
y = 30;
|
||||||
|
}
|
||||||
|
pdfCols.forEach((col, i) => {
|
||||||
|
const x = startX + pdfCols.slice(0, i).reduce((s, c) => s + c.width, 0);
|
||||||
|
doc.text(String(r[col.key]), x, y, { width: col.width, align: 'left' });
|
||||||
|
});
|
||||||
|
y += 14;
|
||||||
|
});
|
||||||
|
|
||||||
|
doc.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
log.server.error(`Export analytics error: ${err.message}`);
|
||||||
|
res.status(500).json({ error: 'Error exporting analytics data' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|||||||
+272
-24
@@ -1,17 +1,19 @@
|
|||||||
import { Router } from 'express';
|
import { Router } from 'express';
|
||||||
import bcrypt from 'bcryptjs';
|
import bcrypt from 'bcryptjs';
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import { rateLimit } from 'express-rate-limit';
|
import { rateLimit, MemoryStore } from 'express-rate-limit';
|
||||||
import { RedisStore } from 'rate-limit-redis';
|
import { RedisStore } from 'rate-limit-redis';
|
||||||
|
import * as OTPAuth from 'otpauth';
|
||||||
import { getDb } from '../config/database.js';
|
import { getDb } from '../config/database.js';
|
||||||
import redis from '../config/redis.js';
|
import redis from '../config/redis.js';
|
||||||
import { authenticateToken, generateToken, getBaseUrl } from '../middleware/auth.js';
|
import { authenticateToken, generateToken, getBaseUrl } from '../middleware/auth.js';
|
||||||
import { isMailerConfigured, sendVerificationEmail } from '../config/mailer.js';
|
import { isMailerConfigured, sendVerificationEmail } from '../config/mailer.js';
|
||||||
import { getOAuthConfig, discoverOIDC } from '../config/oauth.js';
|
import { getOAuthConfig, discoverOIDC } from '../config/oauth.js';
|
||||||
|
import { getAppName } from '../config/appName.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
|
|
||||||
if (!process.env.JWT_SECRET) {
|
if (!process.env.JWT_SECRET) {
|
||||||
@@ -21,15 +23,65 @@ if (!process.env.JWT_SECRET) {
|
|||||||
const JWT_SECRET = process.env.JWT_SECRET;
|
const JWT_SECRET = process.env.JWT_SECRET;
|
||||||
|
|
||||||
// ── Rate Limiting ────────────────────────────────────────────────────────────
|
// ── Rate Limiting ────────────────────────────────────────────────────────────
|
||||||
function makeRedisStore(prefix) {
|
// Shared Redis store with in-memory fallback. Without the fallback, a dead
|
||||||
try {
|
// Redis connection makes every rate-limited endpoint (incl. login) return 500 —
|
||||||
return new RedisStore({
|
// rate limiting must degrade, not take auth down with it.
|
||||||
sendCommand: (...args) => redis.call(...args),
|
class ResilientStore {
|
||||||
prefix,
|
constructor(prefix) {
|
||||||
});
|
try {
|
||||||
} catch {
|
this.redisStore = new RedisStore({
|
||||||
return undefined; // falls back to in-memory if Redis unavailable
|
sendCommand: (...args) => redis.call(...args),
|
||||||
|
prefix,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
this.redisStore = null;
|
||||||
|
}
|
||||||
|
this.memoryStore = new MemoryStore();
|
||||||
}
|
}
|
||||||
|
init(options) {
|
||||||
|
try {
|
||||||
|
// RedisStore.init returns the SCRIPT LOAD promise; catch it so a dead
|
||||||
|
// Redis connection surfaces as a warning instead of an unhandled
|
||||||
|
// rejection that kills the process.
|
||||||
|
const initResult = this.redisStore?.init?.(options);
|
||||||
|
if (typeof initResult?.catch === 'function') {
|
||||||
|
initResult.catch(err => log.auth.warn(`Rate-limit Redis init failed: ${err.message}`));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
log.auth.warn(`Rate-limit Redis init failed: ${err.message}`);
|
||||||
|
}
|
||||||
|
this.memoryStore.init(options);
|
||||||
|
}
|
||||||
|
async increment(key) {
|
||||||
|
if (this.redisStore && redis.status === 'ready') {
|
||||||
|
try {
|
||||||
|
return await this.redisStore.increment(key);
|
||||||
|
} catch (err) {
|
||||||
|
log.auth.warn(`Rate-limit Redis store failed, using in-memory fallback: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.memoryStore.increment(key);
|
||||||
|
}
|
||||||
|
async decrement(key) {
|
||||||
|
if (this.redisStore && redis.status === 'ready') {
|
||||||
|
try {
|
||||||
|
return await this.redisStore.decrement(key);
|
||||||
|
} catch { /* fall through to memory */ }
|
||||||
|
}
|
||||||
|
return this.memoryStore.decrement(key);
|
||||||
|
}
|
||||||
|
async resetKey(key) {
|
||||||
|
if (this.redisStore && redis.status === 'ready') {
|
||||||
|
try {
|
||||||
|
return await this.redisStore.resetKey(key);
|
||||||
|
} catch { /* fall through to memory */ }
|
||||||
|
}
|
||||||
|
return this.memoryStore.resetKey(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeRedisStore(prefix) {
|
||||||
|
return new ResilientStore(prefix);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Validation helpers ─────────────────────────────────────────────────────
|
// ── Validation helpers ─────────────────────────────────────────────────────
|
||||||
@@ -42,6 +94,13 @@ const SAFE_ID_RE = /^[a-zA-Z0-9_-]{1,50}$/;
|
|||||||
const SAFE_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)|[a-zA-Z]{1,30})$/;
|
const SAFE_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)|[a-zA-Z]{1,30})$/;
|
||||||
|
|
||||||
const MIN_PASSWORD_LENGTH = 8;
|
const MIN_PASSWORD_LENGTH = 8;
|
||||||
|
// bcrypt only uses the first 72 bytes; cap input to prevent CPU-DoS on hashing.
|
||||||
|
const MAX_PASSWORD_LENGTH = 64;
|
||||||
|
|
||||||
|
// Pre-computed bcrypt hash of a random string used as a dummy comparison
|
||||||
|
// target when the requested account does not exist. Keeps login timing
|
||||||
|
// roughly constant so we do not leak whether an email is registered.
|
||||||
|
const DUMMY_BCRYPT_HASH = bcrypt.hashSync('dummy-password-for-timing-' + Math.random(), 12);
|
||||||
|
|
||||||
// ── Rate Limiters ────────────────────────────────────────────────────────────
|
// ── Rate Limiters ────────────────────────────────────────────────────────────
|
||||||
const loginLimiter = rateLimit({
|
const loginLimiter = rateLimit({
|
||||||
@@ -99,6 +158,15 @@ const resendVerificationLimiter = rateLimit({
|
|||||||
store: makeRedisStore('rl:resend:'),
|
store: makeRedisStore('rl:resend:'),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const twoFaLimiter = rateLimit({
|
||||||
|
windowMs: 15 * 60 * 1000,
|
||||||
|
max: 10,
|
||||||
|
standardHeaders: true,
|
||||||
|
legacyHeaders: false,
|
||||||
|
message: { error: 'Too many 2FA attempts. Please try again later.' },
|
||||||
|
store: makeRedisStore('rl:2fa:'),
|
||||||
|
});
|
||||||
|
|
||||||
const __filename = fileURLToPath(import.meta.url);
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
const __dirname = path.dirname(__filename);
|
const __dirname = path.dirname(__filename);
|
||||||
const uploadsDir = path.join(__dirname, '..', '..', 'uploads', 'avatars');
|
const uploadsDir = path.join(__dirname, '..', '..', 'uploads', 'avatars');
|
||||||
@@ -158,8 +226,12 @@ router.post('/register', registerLimiter, async (req, res) => {
|
|||||||
if (password.length < MIN_PASSWORD_LENGTH) {
|
if (password.length < MIN_PASSWORD_LENGTH) {
|
||||||
return res.status(400).json({ error: `Password must be at least ${MIN_PASSWORD_LENGTH} characters long` });
|
return res.status(400).json({ error: `Password must be at least ${MIN_PASSWORD_LENGTH} characters long` });
|
||||||
}
|
}
|
||||||
|
if (password.length > MAX_PASSWORD_LENGTH) {
|
||||||
|
return res.status(400).json({ error: `Password must not exceed ${MAX_PASSWORD_LENGTH} characters` });
|
||||||
|
}
|
||||||
|
|
||||||
const existing = await db.get('SELECT id FROM users WHERE email = ?', [email]);
|
// Emails are stored lowercased, so compare lowercased to catch case-variant duplicates
|
||||||
|
const existing = await db.get('SELECT id FROM users WHERE email = ?', [email.toLowerCase()]);
|
||||||
if (existing) {
|
if (existing) {
|
||||||
return res.status(409).json({ error: 'Email is already in use' });
|
return res.status(409).json({ error: 'Email is already in use' });
|
||||||
}
|
}
|
||||||
@@ -193,12 +265,8 @@ router.post('/register', registerLimiter, async (req, res) => {
|
|||||||
const baseUrl = getBaseUrl(req);
|
const baseUrl = getBaseUrl(req);
|
||||||
const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
|
const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
|
||||||
|
|
||||||
// Load app name from branding settings
|
// Load configured app name (admin setting → env → default)
|
||||||
const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
|
const appName = await getAppName();
|
||||||
let appName = 'Redlight';
|
|
||||||
if (brandingSetting?.value) {
|
|
||||||
try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await sendVerificationEmail(email.toLowerCase(), display_name, verifyUrl, appName, 'en');
|
await sendVerificationEmail(email.toLowerCase(), display_name, verifyUrl, appName, 'en');
|
||||||
@@ -307,11 +375,7 @@ router.post('/resend-verification', resendVerificationLimiter, async (req, res)
|
|||||||
const baseUrl = getBaseUrl(req);
|
const baseUrl = getBaseUrl(req);
|
||||||
const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
|
const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
|
||||||
|
|
||||||
const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
|
const appName = await getAppName();
|
||||||
let appName = 'Redlight';
|
|
||||||
if (brandingSetting?.value) {
|
|
||||||
try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await sendVerificationEmail(email.toLowerCase(), user.display_name || user.name, verifyUrl, appName, user.language || 'en');
|
await sendVerificationEmail(email.toLowerCase(), user.display_name || user.name, verifyUrl, appName, user.language || 'en');
|
||||||
@@ -341,10 +405,18 @@ router.post('/login', loginLimiter, async (req, res) => {
|
|||||||
return res.status(401).json({ error: 'Invalid credentials' });
|
return res.status(401).json({ error: 'Invalid credentials' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Cap password length to keep bcrypt CPU work bounded.
|
||||||
|
if (typeof password !== 'string' || password.length > MAX_PASSWORD_LENGTH) {
|
||||||
|
return res.status(401).json({ error: 'Invalid credentials' });
|
||||||
|
}
|
||||||
|
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
const user = await db.get('SELECT * FROM users WHERE email = ?', [email.toLowerCase()]);
|
const user = await db.get('SELECT * FROM users WHERE email = ?', [email.toLowerCase()]);
|
||||||
|
|
||||||
if (!user || !bcrypt.compareSync(password, user.password_hash)) {
|
// Always run bcrypt against either the real hash or a dummy hash so login
|
||||||
|
// timing does not reveal whether the email is registered.
|
||||||
|
const passwordOk = bcrypt.compareSync(password, user?.password_hash || DUMMY_BCRYPT_HASH);
|
||||||
|
if (!user || !passwordOk) {
|
||||||
return res.status(401).json({ error: 'Invalid credentials' });
|
return res.status(401).json({ error: 'Invalid credentials' });
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -352,8 +424,14 @@ router.post('/login', loginLimiter, async (req, res) => {
|
|||||||
return res.status(403).json({ error: 'Email address not yet verified. Please check your inbox.', needsVerification: true });
|
return res.status(403).json({ error: 'Email address not yet verified. Please check your inbox.', needsVerification: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── 2FA check ────────────────────────────────────────────────────────
|
||||||
|
if (user.totp_enabled) {
|
||||||
|
const tempToken = jwt.sign({ userId: user.id, purpose: '2fa' }, JWT_SECRET, { expiresIn: '5m' });
|
||||||
|
return res.json({ requires2FA: true, tempToken });
|
||||||
|
}
|
||||||
|
|
||||||
const token = generateToken(user.id);
|
const token = generateToken(user.id);
|
||||||
const { password_hash, verification_token, verification_token_expires, verification_resend_at, ...safeUser } = user;
|
const { password_hash, verification_token, verification_token_expires, verification_resend_at, totp_secret, ...safeUser } = user;
|
||||||
|
|
||||||
res.json({ token, user: safeUser });
|
res.json({ token, user: safeUser });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -362,6 +440,53 @@ router.post('/login', loginLimiter, async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// POST /api/auth/login/2fa - Verify TOTP code and complete login
|
||||||
|
router.post('/login/2fa', twoFaLimiter, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { tempToken, code } = req.body;
|
||||||
|
if (!tempToken || !code) {
|
||||||
|
return res.status(400).json({ error: 'Token and code are required' });
|
||||||
|
}
|
||||||
|
|
||||||
|
let decoded;
|
||||||
|
try {
|
||||||
|
decoded = jwt.verify(tempToken, JWT_SECRET);
|
||||||
|
} catch {
|
||||||
|
return res.status(401).json({ error: 'Invalid or expired token. Please log in again.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (decoded.purpose !== '2fa') {
|
||||||
|
return res.status(401).json({ error: 'Invalid token' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const db = getDb();
|
||||||
|
const user = await db.get('SELECT * FROM users WHERE id = ?', [decoded.userId]);
|
||||||
|
if (!user || !user.totp_enabled || !user.totp_secret) {
|
||||||
|
return res.status(401).json({ error: 'Invalid token' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
secret: OTPAuth.Secret.fromBase32(user.totp_secret),
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
});
|
||||||
|
|
||||||
|
const delta = totp.validate({ token: code.replace(/\s/g, ''), window: 1 });
|
||||||
|
if (delta === null) {
|
||||||
|
return res.status(401).json({ error: 'Invalid 2FA code' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = generateToken(user.id);
|
||||||
|
const { password_hash, verification_token, verification_token_expires, verification_resend_at, totp_secret, ...safeUser } = user;
|
||||||
|
|
||||||
|
res.json({ token, user: safeUser });
|
||||||
|
} catch (err) {
|
||||||
|
log.auth.error(`2FA login error: ${err.message}`);
|
||||||
|
res.status(500).json({ error: '2FA verification failed' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// POST /api/auth/logout - revoke JWT via DragonflyDB blacklist
|
// POST /api/auth/logout - revoke JWT via DragonflyDB blacklist
|
||||||
router.post('/logout', authenticateToken, async (req, res) => {
|
router.post('/logout', authenticateToken, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
@@ -497,6 +622,9 @@ router.put('/password', authenticateToken, passwordLimiter, async (req, res) =>
|
|||||||
if (typeof currentPassword !== 'string' || typeof newPassword !== 'string') {
|
if (typeof currentPassword !== 'string' || typeof newPassword !== 'string') {
|
||||||
return res.status(400).json({ error: 'Invalid input' });
|
return res.status(400).json({ error: 'Invalid input' });
|
||||||
}
|
}
|
||||||
|
if (currentPassword.length > MAX_PASSWORD_LENGTH || newPassword.length > MAX_PASSWORD_LENGTH) {
|
||||||
|
return res.status(400).json({ error: `Password must not exceed ${MAX_PASSWORD_LENGTH} characters` });
|
||||||
|
}
|
||||||
|
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
|
|
||||||
@@ -670,4 +798,124 @@ router.get('/avatar/:filename', (req, res) => {
|
|||||||
fs.createReadStream(filepath).pipe(res);
|
fs.createReadStream(filepath).pipe(res);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ── 2FA Management ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/auth/2fa/status
|
||||||
|
router.get('/2fa/status', authenticateToken, async (req, res) => {
|
||||||
|
const db = getDb();
|
||||||
|
const user = await db.get('SELECT totp_enabled FROM users WHERE id = ?', [req.user.id]);
|
||||||
|
res.json({ enabled: !!user?.totp_enabled });
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/auth/2fa/setup - Generate TOTP secret + provisioning URI
|
||||||
|
router.post('/2fa/setup', authenticateToken, twoFaLimiter, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const db = getDb();
|
||||||
|
const user = await db.get('SELECT totp_enabled FROM users WHERE id = ?', [req.user.id]);
|
||||||
|
if (user?.totp_enabled) {
|
||||||
|
return res.status(400).json({ error: '2FA is already enabled' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const secret = new OTPAuth.Secret({ size: 20 });
|
||||||
|
|
||||||
|
// Use the configured app name as the TOTP issuer (admin setting → env → default)
|
||||||
|
const issuer = await getAppName();
|
||||||
|
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
issuer,
|
||||||
|
label: req.user.email,
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
secret,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Store the secret (but don't enable yet — user must verify first)
|
||||||
|
await db.run('UPDATE users SET totp_secret = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?', [secret.base32, req.user.id]);
|
||||||
|
|
||||||
|
res.json({ secret: secret.base32, uri: totp.toString() });
|
||||||
|
} catch (err) {
|
||||||
|
log.auth.error(`2FA setup error: ${err.message}`);
|
||||||
|
res.status(500).json({ error: '2FA setup failed' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/auth/2fa/enable - Verify code and activate 2FA
|
||||||
|
router.post('/2fa/enable', authenticateToken, twoFaLimiter, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { code } = req.body;
|
||||||
|
if (!code) {
|
||||||
|
return res.status(400).json({ error: 'Code is required' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const db = getDb();
|
||||||
|
const user = await db.get('SELECT totp_secret, totp_enabled FROM users WHERE id = ?', [req.user.id]);
|
||||||
|
if (!user?.totp_secret) {
|
||||||
|
return res.status(400).json({ error: 'Please run 2FA setup first' });
|
||||||
|
}
|
||||||
|
if (user.totp_enabled) {
|
||||||
|
return res.status(400).json({ error: '2FA is already enabled' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
secret: OTPAuth.Secret.fromBase32(user.totp_secret),
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
});
|
||||||
|
|
||||||
|
const delta = totp.validate({ token: code.replace(/\s/g, ''), window: 1 });
|
||||||
|
if (delta === null) {
|
||||||
|
return res.status(401).json({ error: 'Invalid code. Please try again.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
await db.run('UPDATE users SET totp_enabled = 1, updated_at = CURRENT_TIMESTAMP WHERE id = ?', [req.user.id]);
|
||||||
|
res.json({ enabled: true, message: '2FA has been enabled' });
|
||||||
|
} catch (err) {
|
||||||
|
log.auth.error(`2FA enable error: ${err.message}`);
|
||||||
|
res.status(500).json({ error: '2FA could not be enabled' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/auth/2fa/disable - Disable 2FA (requires password + TOTP code)
|
||||||
|
router.post('/2fa/disable', authenticateToken, twoFaLimiter, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { password, code } = req.body;
|
||||||
|
if (!password || !code) {
|
||||||
|
return res.status(400).json({ error: 'Password and code are required' });
|
||||||
|
}
|
||||||
|
if (typeof password !== 'string' || password.length > MAX_PASSWORD_LENGTH) {
|
||||||
|
return res.status(400).json({ error: 'Invalid password' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const db = getDb();
|
||||||
|
const user = await db.get('SELECT password_hash, totp_secret, totp_enabled FROM users WHERE id = ?', [req.user.id]);
|
||||||
|
if (!user?.totp_enabled) {
|
||||||
|
return res.status(400).json({ error: '2FA is not enabled' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!bcrypt.compareSync(password, user.password_hash)) {
|
||||||
|
return res.status(401).json({ error: 'Invalid password' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
secret: OTPAuth.Secret.fromBase32(user.totp_secret),
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
});
|
||||||
|
|
||||||
|
const delta = totp.validate({ token: code.replace(/\s/g, ''), window: 1 });
|
||||||
|
if (delta === null) {
|
||||||
|
return res.status(401).json({ error: 'Invalid 2FA code' });
|
||||||
|
}
|
||||||
|
|
||||||
|
await db.run('UPDATE users SET totp_enabled = 0, totp_secret = NULL, updated_at = CURRENT_TIMESTAMP WHERE id = ?', [req.user.id]);
|
||||||
|
res.json({ enabled: false, message: '2FA has been disabled' });
|
||||||
|
} catch (err) {
|
||||||
|
log.auth.error(`2FA disable error: ${err.message}`);
|
||||||
|
res.status(500).json({ error: '2FA could not be disabled' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|||||||
+18
-4
@@ -12,12 +12,25 @@
|
|||||||
|
|
||||||
import { Router, text } from 'express';
|
import { Router, text } from 'express';
|
||||||
import crypto from 'crypto';
|
import crypto from 'crypto';
|
||||||
|
import { rateLimit } from 'express-rate-limit';
|
||||||
import { getDb } from '../config/database.js';
|
import { getDb } from '../config/database.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
import { getBaseUrl } from '../middleware/auth.js';
|
import { getBaseUrl } from '../middleware/auth.js';
|
||||||
|
|
||||||
const router = Router();
|
const router = Router();
|
||||||
|
|
||||||
|
// Brute-force protection for the Basic-Auth tokens: only failed requests count
|
||||||
|
// (skipSuccessfulRequests), so legitimate sync clients polling frequently are
|
||||||
|
// not throttled.
|
||||||
|
router.use(rateLimit({
|
||||||
|
windowMs: 15 * 60 * 1000,
|
||||||
|
max: 30,
|
||||||
|
skipSuccessfulRequests: true,
|
||||||
|
standardHeaders: true,
|
||||||
|
legacyHeaders: false,
|
||||||
|
message: 'Too many failed CalDAV requests. Please try again later.',
|
||||||
|
}));
|
||||||
|
|
||||||
// ── Body parsing for XML and iCalendar payloads ────────────────────────────
|
// ── Body parsing for XML and iCalendar payloads ────────────────────────────
|
||||||
router.use(text({ type: ['application/xml', 'text/xml', 'text/calendar', 'application/octet-stream'] }));
|
router.use(text({ type: ['application/xml', 'text/xml', 'text/calendar', 'application/octet-stream'] }));
|
||||||
|
|
||||||
@@ -194,9 +207,10 @@ async function caldavAuth(req, res, next) {
|
|||||||
const token = decoded.slice(colonIdx + 1);
|
const token = decoded.slice(colonIdx + 1);
|
||||||
|
|
||||||
const db = getDb();
|
const db = getDb();
|
||||||
|
// Emails are stored lowercased
|
||||||
const user = await db.get(
|
const user = await db.get(
|
||||||
'SELECT id, name, display_name, email FROM users WHERE email = ?',
|
'SELECT id, name, display_name, email FROM users WHERE email = ?',
|
||||||
[email],
|
[email.toLowerCase()],
|
||||||
);
|
);
|
||||||
if (!user) {
|
if (!user) {
|
||||||
res.set('WWW-Authenticate', 'Basic realm="Redlight CalDAV"');
|
res.set('WWW-Authenticate', 'Basic realm="Redlight CalDAV"');
|
||||||
@@ -243,7 +257,7 @@ function setDAVHeaders(res) {
|
|||||||
// ── CalDAV username authorization ──────────────────────────────────────────
|
// ── CalDAV username authorization ──────────────────────────────────────────
|
||||||
// Ensures the :username param matches the authenticated user's email
|
// Ensures the :username param matches the authenticated user's email
|
||||||
function validateCalDAVUser(req, res, next) {
|
function validateCalDAVUser(req, res, next) {
|
||||||
if (req.params.username && decodeURIComponent(req.params.username) !== req.caldavUser.email) {
|
if (req.params.username && decodeURIComponent(req.params.username).toLowerCase() !== req.caldavUser.email) {
|
||||||
return res.status(403).end();
|
return res.status(403).end();
|
||||||
}
|
}
|
||||||
next();
|
next();
|
||||||
@@ -278,7 +292,7 @@ ${propXml}
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ── OPTIONS ────────────────────────────────────────────────────────────────
|
// ── OPTIONS ────────────────────────────────────────────────────────────────
|
||||||
router.options('*', (req, res) => {
|
router.options('/*splat', (req, res) => {
|
||||||
setDAVHeaders(res);
|
setDAVHeaders(res);
|
||||||
res.status(200).end();
|
res.status(200).end();
|
||||||
});
|
});
|
||||||
@@ -529,7 +543,7 @@ router.delete('/:username/calendar/:filename', caldavAuth, validateCalDAVUser, a
|
|||||||
});
|
});
|
||||||
|
|
||||||
// ── Fallback ───────────────────────────────────────────────────────────────
|
// ── Fallback ───────────────────────────────────────────────────────────────
|
||||||
router.all('*', caldavAuth, (req, res) => {
|
router.all('/*splat', caldavAuth, (req, res) => {
|
||||||
setDAVHeaders(res);
|
setDAVHeaders(res);
|
||||||
res.status(405).end();
|
res.status(405).end();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { getDb } from '../config/database.js';
|
|||||||
import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
|
import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
import { sendCalendarInviteEmail } from '../config/mailer.js';
|
import { sendCalendarInviteEmail } from '../config/mailer.js';
|
||||||
|
import { getAppName } from '../config/appName.js';
|
||||||
import {
|
import {
|
||||||
isFederationEnabled,
|
isFederationEnabled,
|
||||||
getFederationDomain,
|
getFederationDomain,
|
||||||
@@ -219,7 +220,7 @@ router.put('/events/:id', authenticateToken, async (req, res) => {
|
|||||||
end_time = COALESCE(?, end_time),
|
end_time = COALESCE(?, end_time),
|
||||||
room_uid = ?,
|
room_uid = ?,
|
||||||
color = COALESCE(?, color),
|
color = COALESCE(?, color),
|
||||||
reminder_minutes = COALESCE(?, reminder_minutes),
|
reminder_minutes = ?,
|
||||||
reminder_sent_at = ${resetReminder ? 'NULL' : 'reminder_sent_at'},
|
reminder_sent_at = ${resetReminder ? 'NULL' : 'reminder_sent_at'},
|
||||||
updated_at = CURRENT_TIMESTAMP
|
updated_at = CURRENT_TIMESTAMP
|
||||||
WHERE id = ?
|
WHERE id = ?
|
||||||
@@ -230,7 +231,9 @@ router.put('/events/:id', authenticateToken, async (req, res) => {
|
|||||||
end_time || null,
|
end_time || null,
|
||||||
room_uid !== undefined ? (room_uid || null) : event.room_uid,
|
room_uid !== undefined ? (room_uid || null) : event.room_uid,
|
||||||
color || null,
|
color || null,
|
||||||
validReminder !== undefined ? validReminder : null,
|
// Not in payload → keep existing; present (incl. null) → set/clear directly.
|
||||||
|
// COALESCE can't be used here: it would treat an explicit null as "keep".
|
||||||
|
validReminder !== undefined ? validReminder : event.reminder_minutes,
|
||||||
req.params.id,
|
req.params.id,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -323,7 +326,7 @@ router.post('/events/:id/share', authenticateToken, async (req, res) => {
|
|||||||
if (targetUser?.email) {
|
if (targetUser?.email) {
|
||||||
const appUrl = getBaseUrl(req);
|
const appUrl = getBaseUrl(req);
|
||||||
const inboxUrl = `${appUrl}/federation/inbox`;
|
const inboxUrl = `${appUrl}/federation/inbox`;
|
||||||
const appName = process.env.APP_NAME || 'Redlight';
|
const appName = await getAppName();
|
||||||
const senderUser = await db.get('SELECT name, display_name FROM users WHERE id = ?', [req.user.id]);
|
const senderUser = await db.get('SELECT name, display_name FROM users WHERE id = ?', [req.user.id]);
|
||||||
const fromDisplay = (senderUser?.display_name && senderUser.display_name !== '') ? senderUser.display_name : (senderUser?.name || req.user.name);
|
const fromDisplay = (senderUser?.display_name && senderUser.display_name !== '') ? senderUser.display_name : (senderUser?.name || req.user.name);
|
||||||
sendCalendarInviteEmail(
|
sendCalendarInviteEmail(
|
||||||
@@ -645,7 +648,7 @@ router.post(['/receive-event', '/calendar-event'], calendarFederationLimiter, as
|
|||||||
if (targetUser.email) {
|
if (targetUser.email) {
|
||||||
const appUrl = getBaseUrl(req);
|
const appUrl = getBaseUrl(req);
|
||||||
const inboxUrl = `${appUrl}/federation/inbox`;
|
const inboxUrl = `${appUrl}/federation/inbox`;
|
||||||
const appName = process.env.APP_NAME || 'Redlight';
|
const appName = await getAppName();
|
||||||
sendCalendarInviteEmail(
|
sendCalendarInviteEmail(
|
||||||
targetUser.email, targetUser.name, from_user,
|
targetUser.email, targetUser.name, from_user,
|
||||||
title, start_time, end_time, description || null,
|
title, start_time, end_time, description || null,
|
||||||
|
|||||||
+23
-22
@@ -6,14 +6,15 @@ import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
|
|||||||
import { sendFederationInviteEmail, sendCalendarEventDeletedEmail } from '../config/mailer.js';
|
import { sendFederationInviteEmail, sendCalendarEventDeletedEmail } from '../config/mailer.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
import { createNotification } from '../config/notifications.js';
|
import { createNotification } from '../config/notifications.js';
|
||||||
|
import { getAppName } from '../config/appName.js';
|
||||||
|
|
||||||
// M13: rate limit the unauthenticated federation receive endpoint
|
// M13: rate limit the unauthenticated federation receive endpoint
|
||||||
const federationReceiveLimiter = rateLimit({
|
const federationReceiveLimiter = rateLimit({
|
||||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||||
max: 100,
|
max: 100,
|
||||||
standardHeaders: true,
|
standardHeaders: true,
|
||||||
legacyHeaders: false,
|
legacyHeaders: false,
|
||||||
message: { error: 'Too many federation requests. Please try again later.' },
|
message: { error: 'Too many federation requests. Please try again later.' },
|
||||||
});
|
});
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -40,7 +41,7 @@ export function wellKnownHandler(req, res) {
|
|||||||
federation_api: '/api/federation',
|
federation_api: '/api/federation',
|
||||||
public_key: getPublicKey(),
|
public_key: getPublicKey(),
|
||||||
software: 'Redlight',
|
software: 'Redlight',
|
||||||
version: '2.0.0',
|
version: '2.3.0',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -198,7 +199,7 @@ router.post('/receive', federationReceiveLimiter, async (req, res) => {
|
|||||||
|
|
||||||
// Look up user by name (case-insensitive)
|
// Look up user by name (case-insensitive)
|
||||||
const targetUser = await db.get(
|
const targetUser = await db.get(
|
||||||
'SELECT id, name, email FROM users WHERE LOWER(name) = LOWER(?)',
|
'SELECT id, name, email, language FROM users WHERE LOWER(name) = LOWER(?)',
|
||||||
[username]
|
[username]
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -236,24 +237,24 @@ router.post('/receive', federationReceiveLimiter, async (req, res) => {
|
|||||||
|
|
||||||
// Send notification email (truly fire-and-forget - never blocks the response)
|
// Send notification email (truly fire-and-forget - never blocks the response)
|
||||||
if (targetUser.email) {
|
if (targetUser.email) {
|
||||||
const appUrl = getBaseUrl(req);
|
const appUrl = getBaseUrl(req);
|
||||||
const inboxUrl = `${appUrl}/federation/inbox`;
|
const inboxUrl = `${appUrl}/federation/inbox`;
|
||||||
const appName = process.env.APP_NAME || 'Redlight';
|
const appName = await getAppName();
|
||||||
sendFederationInviteEmail(
|
sendFederationInviteEmail(
|
||||||
targetUser.email, targetUser.name, from_user,
|
targetUser.email, targetUser.name, from_user,
|
||||||
room_name, message || null, inboxUrl, appName, targetUser.language || 'en'
|
room_name, message || null, inboxUrl, appName, targetUser.language || 'en'
|
||||||
).catch(mailErr => {
|
).catch(mailErr => {
|
||||||
log.federation.warn('Federation invite mail failed (non-fatal):', mailErr.message);
|
log.federation.warn('Federation invite mail failed (non-fatal):', mailErr.message);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// In-app notification
|
// In-app notification
|
||||||
await createNotification(
|
await createNotification(
|
||||||
targetUser.id,
|
targetUser.id,
|
||||||
'federation_invite_received',
|
'federation_invite_received',
|
||||||
from_user,
|
from_user,
|
||||||
room_name,
|
room_name,
|
||||||
'/federation/inbox',
|
'/federation/inbox',
|
||||||
);
|
);
|
||||||
|
|
||||||
res.json({ success: true });
|
res.json({ success: true });
|
||||||
@@ -627,7 +628,7 @@ router.post('/calendar-event-deleted', federationReceiveLimiter, async (req, res
|
|||||||
|
|
||||||
// Notify affected users by email (fire-and-forget)
|
// Notify affected users by email (fire-and-forget)
|
||||||
if (affectedUsers.length > 0) {
|
if (affectedUsers.length > 0) {
|
||||||
const appName = process.env.APP_NAME || 'Redlight';
|
const appName = await getAppName();
|
||||||
for (const u of affectedUsers) {
|
for (const u of affectedUsers) {
|
||||||
sendCalendarEventDeletedEmail(u.email, u.name, u.from_user, u.title, appName, u.language || 'en')
|
sendCalendarEventDeletedEmail(u.email, u.name, u.from_user, u.title, appName, u.language || 'en')
|
||||||
.catch(mailErr => {
|
.catch(mailErr => {
|
||||||
|
|||||||
@@ -200,7 +200,13 @@ router.get('/callback', callbackLimiter, async (req, res) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (user) {
|
if (user) {
|
||||||
// Link OAuth to existing account
|
// Only auto-link to an existing local account if the IdP has actually
|
||||||
|
// verified the email. Otherwise an attacker who registers at the IdP
|
||||||
|
// with someone else's email could take over the local account.
|
||||||
|
if (userInfo.email_verified !== true) {
|
||||||
|
log.auth.warn(`OAuth account-linking blocked: provider did not assert email_verified=true for ${email}`);
|
||||||
|
return errorRedirect('Your OAuth provider has not verified this email address. Please verify it with the provider before logging in here.');
|
||||||
|
}
|
||||||
await db.run(
|
await db.run(
|
||||||
'UPDATE users SET oauth_provider = ?, oauth_provider_id = ?, email_verified = 1, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
|
'UPDATE users SET oauth_provider = ?, oauth_provider_id = ?, email_verified = 1, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
|
||||||
['oidc', sub, user.id],
|
['oidc', sub, user.id],
|
||||||
|
|||||||
+201
-63
@@ -11,6 +11,171 @@ import {
|
|||||||
|
|
||||||
const router = Router();
|
const router = Router();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format a raw BBB recording into a normalised object.
|
||||||
|
*/
|
||||||
|
function formatBbbRecording(rec, fallbackName) {
|
||||||
|
const playback = rec.playback?.format;
|
||||||
|
let formats = [];
|
||||||
|
if (playback) {
|
||||||
|
formats = Array.isArray(playback) ? playback : [playback];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
recordID: rec.recordID,
|
||||||
|
meetingID: rec.meetingID,
|
||||||
|
name: rec.name || fallbackName || 'Recording',
|
||||||
|
state: rec.state,
|
||||||
|
published: rec.published === 'true',
|
||||||
|
startTime: rec.startTime,
|
||||||
|
endTime: rec.endTime,
|
||||||
|
participants: rec.participants,
|
||||||
|
size: rec.size,
|
||||||
|
formats: formats.map(f => ({
|
||||||
|
type: f.type,
|
||||||
|
url: f.url,
|
||||||
|
length: f.length,
|
||||||
|
size: f.size,
|
||||||
|
})),
|
||||||
|
metadata: rec.metadata || {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format a DB row into the same shape the frontend expects.
|
||||||
|
*/
|
||||||
|
function formatDbRecording(row) {
|
||||||
|
return {
|
||||||
|
recordID: row.record_id,
|
||||||
|
meetingID: row.meeting_id,
|
||||||
|
name: row.name || 'Recording',
|
||||||
|
state: row.state,
|
||||||
|
published: row.published === 1,
|
||||||
|
startTime: row.start_time,
|
||||||
|
endTime: row.end_time,
|
||||||
|
participants: row.participants,
|
||||||
|
size: row.size,
|
||||||
|
formats: JSON.parse(row.formats || '[]'),
|
||||||
|
metadata: JSON.parse(row.metadata || '{}'),
|
||||||
|
fromCache: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Upsert a single formatted recording into the DB.
|
||||||
|
* - If the record_id already exists AND is the same recording, merge new formats.
|
||||||
|
* - If it's a new recording or a different one with the same record_id, overwrite.
|
||||||
|
*/
|
||||||
|
async function upsertRecording(db, rec) {
|
||||||
|
const existing = await db.get('SELECT * FROM recordings WHERE record_id = ?', [rec.recordID]);
|
||||||
|
const formatsJson = JSON.stringify(rec.formats);
|
||||||
|
const metadataJson = JSON.stringify(rec.metadata || {});
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
// Verify it's still the same recording (same startTime)
|
||||||
|
if (String(rec.startTime) === String(existing.start_time)) {
|
||||||
|
// Merge formats: keep existing formats, add any new types
|
||||||
|
const existingFormats = JSON.parse(existing.formats || '[]');
|
||||||
|
const existingTypes = new Set(existingFormats.map(f => f.type));
|
||||||
|
const mergedFormats = [...existingFormats];
|
||||||
|
|
||||||
|
for (const f of rec.formats) {
|
||||||
|
if (existingTypes.has(f.type)) {
|
||||||
|
// Update URL for existing format type (server may have changed)
|
||||||
|
const idx = mergedFormats.findIndex(ef => ef.type === f.type);
|
||||||
|
if (idx !== -1) mergedFormats[idx] = f;
|
||||||
|
} else {
|
||||||
|
// New format type added
|
||||||
|
mergedFormats.push(f);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await db.run(
|
||||||
|
`UPDATE recordings SET name = ?, state = ?, published = ?, end_time = ?,
|
||||||
|
participants = ?, size = ?, formats = ?, metadata = ?, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE record_id = ?`,
|
||||||
|
[rec.name, rec.state, rec.published ? 1 : 0, rec.endTime,
|
||||||
|
rec.participants, rec.size, JSON.stringify(mergedFormats), metadataJson,
|
||||||
|
rec.recordID]
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// Different recording with same record_id – overwrite completely
|
||||||
|
await db.run(
|
||||||
|
`UPDATE recordings SET meeting_id = ?, name = ?, state = ?, published = ?,
|
||||||
|
start_time = ?, end_time = ?, participants = ?, size = ?, formats = ?,
|
||||||
|
metadata = ?, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE record_id = ?`,
|
||||||
|
[rec.meetingID, rec.name, rec.state, rec.published ? 1 : 0,
|
||||||
|
rec.startTime, rec.endTime, rec.participants, rec.size,
|
||||||
|
formatsJson, metadataJson, rec.recordID]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Completely new recording – insert
|
||||||
|
await db.run(
|
||||||
|
`INSERT INTO recordings (record_id, meeting_id, name, state, published, start_time,
|
||||||
|
end_time, participants, size, formats, metadata) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||||
|
[rec.recordID, rec.meetingID, rec.name, rec.state, rec.published ? 1 : 0,
|
||||||
|
rec.startTime, rec.endTime, rec.participants, rec.size,
|
||||||
|
formatsJson, metadataJson]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Core logic: fetch recordings from BBB, sync with DB, fall back to DB on error.
|
||||||
|
* Returns an array of formatted recordings.
|
||||||
|
*/
|
||||||
|
async function fetchAndSyncRecordings(meetingID, fallbackName) {
|
||||||
|
const db = getDb();
|
||||||
|
let bbbRecordings = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const raw = await getRecordings(meetingID || undefined);
|
||||||
|
bbbRecordings = raw.map(rec => formatBbbRecording(rec, fallbackName));
|
||||||
|
} catch (err) {
|
||||||
|
log.recordings.warn(`BBB API unreachable, falling back to cached recordings: ${err.message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bbbRecordings !== null) {
|
||||||
|
// BBB API was reachable – sync each recording into the DB
|
||||||
|
for (const rec of bbbRecordings) {
|
||||||
|
try {
|
||||||
|
await upsertRecording(db, rec);
|
||||||
|
} catch (err) {
|
||||||
|
log.recordings.error(`Failed to cache recording ${rec.recordID}: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// For recordings in DB that were NOT returned by BBB (possibly deleted on server
|
||||||
|
// or server changed), keep them in DB with their cached URLs – don't delete.
|
||||||
|
// However, we return the BBB result merged with any DB-only recordings.
|
||||||
|
const bbbIds = new Set(bbbRecordings.map(r => r.recordID));
|
||||||
|
const params = meetingID ? [meetingID] : [];
|
||||||
|
const query = meetingID
|
||||||
|
? 'SELECT * FROM recordings WHERE meeting_id = ?'
|
||||||
|
: 'SELECT * FROM recordings';
|
||||||
|
const dbRows = await db.all(query, params);
|
||||||
|
|
||||||
|
// Add DB-only recordings (not on current BBB server) with cached URLs
|
||||||
|
for (const row of dbRows) {
|
||||||
|
if (!bbbIds.has(row.record_id)) {
|
||||||
|
bbbRecordings.push(formatDbRecording(row));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return bbbRecordings;
|
||||||
|
} else {
|
||||||
|
// BBB API unreachable – serve everything from DB
|
||||||
|
const params = meetingID ? [meetingID] : [];
|
||||||
|
const query = meetingID
|
||||||
|
? 'SELECT * FROM recordings WHERE meeting_id = ?'
|
||||||
|
: 'SELECT * FROM recordings';
|
||||||
|
const rows = await db.all(query, params);
|
||||||
|
return rows.map(formatDbRecording);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// GET /api/recordings - Get recordings for a room (by meetingID/uid)
|
// GET /api/recordings - Get recordings for a room (by meetingID/uid)
|
||||||
router.get('/', authenticateToken, async (req, res) => {
|
router.get('/', authenticateToken, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
@@ -34,36 +199,7 @@ router.get('/', authenticateToken, async (req, res) => {
|
|||||||
return res.status(400).json({ error: 'meetingID query parameter is required' });
|
return res.status(400).json({ error: 'meetingID query parameter is required' });
|
||||||
}
|
}
|
||||||
|
|
||||||
const recordings = await getRecordings(meetingID || undefined);
|
const formatted = await fetchAndSyncRecordings(meetingID);
|
||||||
|
|
||||||
// Format recordings
|
|
||||||
const formatted = recordings.map(rec => {
|
|
||||||
const playback = rec.playback?.format;
|
|
||||||
let formats = [];
|
|
||||||
if (playback) {
|
|
||||||
formats = Array.isArray(playback) ? playback : [playback];
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
recordID: rec.recordID,
|
|
||||||
meetingID: rec.meetingID,
|
|
||||||
name: rec.name || 'Recording',
|
|
||||||
state: rec.state,
|
|
||||||
published: rec.published === 'true',
|
|
||||||
startTime: rec.startTime,
|
|
||||||
endTime: rec.endTime,
|
|
||||||
participants: rec.participants,
|
|
||||||
size: rec.size,
|
|
||||||
formats: formats.map(f => ({
|
|
||||||
type: f.type,
|
|
||||||
url: f.url,
|
|
||||||
length: f.length,
|
|
||||||
size: f.size,
|
|
||||||
})),
|
|
||||||
metadata: rec.metadata || {},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
res.json({ recordings: formatted });
|
res.json({ recordings: formatted });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.recordings.error(`Get recordings error: ${err.message}`);
|
log.recordings.error(`Get recordings error: ${err.message}`);
|
||||||
@@ -89,33 +225,7 @@ router.get('/room/:uid', authenticateToken, async (req, res) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const recordings = await getRecordings(room.uid);
|
const formatted = await fetchAndSyncRecordings(room.uid, room.name);
|
||||||
const formatted = recordings.map(rec => {
|
|
||||||
const playback = rec.playback?.format;
|
|
||||||
let formats = [];
|
|
||||||
if (playback) {
|
|
||||||
formats = Array.isArray(playback) ? playback : [playback];
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
recordID: rec.recordID,
|
|
||||||
meetingID: rec.meetingID,
|
|
||||||
name: rec.name || room.name,
|
|
||||||
state: rec.state,
|
|
||||||
published: rec.published === 'true',
|
|
||||||
startTime: rec.startTime,
|
|
||||||
endTime: rec.endTime,
|
|
||||||
participants: rec.participants,
|
|
||||||
size: rec.size,
|
|
||||||
formats: formats.map(f => ({
|
|
||||||
type: f.type,
|
|
||||||
url: f.url,
|
|
||||||
length: f.length,
|
|
||||||
size: f.size,
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
res.json({ recordings: formatted });
|
res.json({ recordings: formatted });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.recordings.error(`Get room recordings error: ${err.message}`);
|
log.recordings.error(`Get room recordings error: ${err.message}`);
|
||||||
@@ -126,14 +236,21 @@ router.get('/room/:uid', authenticateToken, async (req, res) => {
|
|||||||
// DELETE /api/recordings/:recordID
|
// DELETE /api/recordings/:recordID
|
||||||
router.delete('/:recordID', authenticateToken, async (req, res) => {
|
router.delete('/:recordID', authenticateToken, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
|
const db = getDb();
|
||||||
// M14 fix: look up the recording from BBB to find its meetingID (room UID),
|
// M14 fix: look up the recording from BBB to find its meetingID (room UID),
|
||||||
// then verify the user owns or shares that room.
|
// then verify the user owns or shares that room.
|
||||||
if (req.user.role !== 'admin') {
|
if (req.user.role !== 'admin') {
|
||||||
const rec = await getRecordingByRecordId(req.params.recordID);
|
// Try BBB first, fall back to DB cache
|
||||||
|
let rec = await getRecordingByRecordId(req.params.recordID).catch(() => null);
|
||||||
|
if (!rec) {
|
||||||
|
const dbRow = await db.get('SELECT * FROM recordings WHERE record_id = ?', [req.params.recordID]);
|
||||||
|
if (dbRow) {
|
||||||
|
rec = { meetingID: dbRow.meeting_id };
|
||||||
|
}
|
||||||
|
}
|
||||||
if (!rec) {
|
if (!rec) {
|
||||||
return res.status(404).json({ error: 'Recording not found' });
|
return res.status(404).json({ error: 'Recording not found' });
|
||||||
}
|
}
|
||||||
const db = getDb();
|
|
||||||
const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [rec.meetingID]);
|
const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [rec.meetingID]);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
return res.status(404).json({ error: 'Room not found' });
|
return res.status(404).json({ error: 'Room not found' });
|
||||||
@@ -145,7 +262,14 @@ router.delete('/:recordID', authenticateToken, async (req, res) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
await deleteRecording(req.params.recordID);
|
// Try to delete on BBB (may fail if server changed – that's OK)
|
||||||
|
try {
|
||||||
|
await deleteRecording(req.params.recordID);
|
||||||
|
} catch (err) {
|
||||||
|
log.recordings.warn(`BBB deleteRecording failed (may already be gone): ${err.message}`);
|
||||||
|
}
|
||||||
|
// Always remove from local cache
|
||||||
|
await db.run('DELETE FROM recordings WHERE record_id = ?', [req.params.recordID]);
|
||||||
res.json({ message: 'Recording deleted' });
|
res.json({ message: 'Recording deleted' });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.recordings.error(`Delete recording error: ${err.message}`);
|
log.recordings.error(`Delete recording error: ${err.message}`);
|
||||||
@@ -156,14 +280,20 @@ router.delete('/:recordID', authenticateToken, async (req, res) => {
|
|||||||
// PUT /api/recordings/:recordID/publish
|
// PUT /api/recordings/:recordID/publish
|
||||||
router.put('/:recordID/publish', authenticateToken, async (req, res) => {
|
router.put('/:recordID/publish', authenticateToken, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
|
const db = getDb();
|
||||||
// M14 fix: look up the recording from BBB to find its meetingID (room UID),
|
// M14 fix: look up the recording from BBB to find its meetingID (room UID),
|
||||||
// then verify the user owns or shares that room.
|
// then verify the user owns or shares that room.
|
||||||
if (req.user.role !== 'admin') {
|
if (req.user.role !== 'admin') {
|
||||||
const rec = await getRecordingByRecordId(req.params.recordID);
|
let rec = await getRecordingByRecordId(req.params.recordID).catch(() => null);
|
||||||
|
if (!rec) {
|
||||||
|
const dbRow = await db.get('SELECT * FROM recordings WHERE record_id = ?', [req.params.recordID]);
|
||||||
|
if (dbRow) {
|
||||||
|
rec = { meetingID: dbRow.meeting_id };
|
||||||
|
}
|
||||||
|
}
|
||||||
if (!rec) {
|
if (!rec) {
|
||||||
return res.status(404).json({ error: 'Recording not found' });
|
return res.status(404).json({ error: 'Recording not found' });
|
||||||
}
|
}
|
||||||
const db = getDb();
|
|
||||||
const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [rec.meetingID]);
|
const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [rec.meetingID]);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
return res.status(404).json({ error: 'Room not found' });
|
return res.status(404).json({ error: 'Room not found' });
|
||||||
@@ -176,7 +306,15 @@ router.put('/:recordID/publish', authenticateToken, async (req, res) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { publish } = req.body;
|
const { publish } = req.body;
|
||||||
await publishRecording(req.params.recordID, publish);
|
// Try BBB API
|
||||||
|
try {
|
||||||
|
await publishRecording(req.params.recordID, publish);
|
||||||
|
} catch (err) {
|
||||||
|
log.recordings.warn(`BBB publishRecording failed: ${err.message}`);
|
||||||
|
}
|
||||||
|
// Update DB cache
|
||||||
|
await db.run('UPDATE recordings SET published = ?, updated_at = CURRENT_TIMESTAMP WHERE record_id = ?',
|
||||||
|
[publish ? 1 : 0, req.params.recordID]);
|
||||||
res.json({ message: publish ? 'Recording published' : 'Recording unpublished' });
|
res.json({ message: publish ? 'Recording published' : 'Recording unpublished' });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.recordings.error(`Publish recording error: ${err.message}`);
|
log.recordings.error(`Publish recording error: ${err.message}`);
|
||||||
|
|||||||
+204
-24
@@ -8,6 +8,8 @@ import { getDb } from '../config/database.js';
|
|||||||
import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
|
import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
|
||||||
import { log } from '../config/logger.js';
|
import { log } from '../config/logger.js';
|
||||||
import { createNotification } from '../config/notifications.js';
|
import { createNotification } from '../config/notifications.js';
|
||||||
|
import { sendGuestInviteEmail } from '../config/mailer.js';
|
||||||
|
import { getAppName } from '../config/appName.js';
|
||||||
import {
|
import {
|
||||||
createMeeting,
|
createMeeting,
|
||||||
joinMeeting,
|
joinMeeting,
|
||||||
@@ -23,6 +25,14 @@ import {
|
|||||||
discoverInstance,
|
discoverInstance,
|
||||||
} from '../config/federation.js';
|
} from '../config/federation.js';
|
||||||
|
|
||||||
|
// Avatar image filenames are produced by the upload endpoint as
|
||||||
|
// "<userId>_<timestamp>.<ext>". Reject anything that doesn't match this shape
|
||||||
|
// so a guest can't smuggle path traversal or arbitrary URL fragments through
|
||||||
|
// the unauthenticated guest-join endpoint.
|
||||||
|
const SAFE_AVATAR_FILENAME_RE = /^[0-9]+_[0-9]+\.(jpg|png|gif|webp)$/;
|
||||||
|
// Mirrors auth.js: only allow hex/hsl/named CSS colors.
|
||||||
|
const SAFE_AVATAR_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)|[a-zA-Z]{1,30})$/;
|
||||||
|
|
||||||
// L6: constant-time string comparison for access/moderator codes
|
// L6: constant-time string comparison for access/moderator codes
|
||||||
function timingSafeEqual(a, b) {
|
function timingSafeEqual(a, b) {
|
||||||
if (typeof a !== 'string' || typeof b !== 'string') return false;
|
if (typeof a !== 'string' || typeof b !== 'string') return false;
|
||||||
@@ -37,6 +47,17 @@ const __dirname = path.dirname(__filename);
|
|||||||
const presentationsDir = path.join(__dirname, '..', '..', 'uploads', 'presentations');
|
const presentationsDir = path.join(__dirname, '..', '..', 'uploads', 'presentations');
|
||||||
if (!fs.existsSync(presentationsDir)) fs.mkdirSync(presentationsDir, { recursive: true });
|
if (!fs.existsSync(presentationsDir)) fs.mkdirSync(presentationsDir, { recursive: true });
|
||||||
|
|
||||||
|
const PRESENTATION_TOKEN_SECRET = process.env.BBB_SECRET || crypto.randomBytes(32).toString('hex');
|
||||||
|
const PRESENTATION_TOKEN_TTL = 60 * 60 * 1000; // 1 hour
|
||||||
|
|
||||||
|
function signPresentationUrl(roomUid, filename) {
|
||||||
|
const expires = Date.now() + PRESENTATION_TOKEN_TTL;
|
||||||
|
const token = crypto.createHmac('sha256', PRESENTATION_TOKEN_SECRET)
|
||||||
|
.update(`${roomUid}/${filename}:${expires}`)
|
||||||
|
.digest('hex');
|
||||||
|
return { token, expires };
|
||||||
|
}
|
||||||
|
|
||||||
// M8: rate limit unauthenticated guest-join to prevent access_code brute-force
|
// M8: rate limit unauthenticated guest-join to prevent access_code brute-force
|
||||||
const guestJoinLimiter = rateLimit({
|
const guestJoinLimiter = rateLimit({
|
||||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||||
@@ -46,6 +67,16 @@ const guestJoinLimiter = rateLimit({
|
|||||||
message: { error: 'Too many join attempts. Please try again later.' },
|
message: { error: 'Too many join attempts. Please try again later.' },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Rate limit email invitations: each request may carry up to 50 addresses, so
|
||||||
|
// without a cap any registered account could be abused as an SMTP spam relay.
|
||||||
|
const inviteEmailLimiter = rateLimit({
|
||||||
|
windowMs: 60 * 60 * 1000, // 1 hour
|
||||||
|
max: 10,
|
||||||
|
standardHeaders: true,
|
||||||
|
legacyHeaders: false,
|
||||||
|
message: { error: 'Too many email invitations. Please try again later.' },
|
||||||
|
});
|
||||||
|
|
||||||
const router = Router();
|
const router = Router();
|
||||||
|
|
||||||
// Build avatar URL for a user (uploaded image or generated initials)
|
// Build avatar URL for a user (uploaded image or generated initials)
|
||||||
@@ -245,6 +276,7 @@ router.put('/:uid', authenticateToken, async (req, res) => {
|
|||||||
guest_access,
|
guest_access,
|
||||||
moderator_code,
|
moderator_code,
|
||||||
learning_analytics,
|
learning_analytics,
|
||||||
|
analytics_visibility,
|
||||||
} = req.body;
|
} = req.body;
|
||||||
|
|
||||||
// M12: field length limits (same as create)
|
// M12: field length limits (same as create)
|
||||||
@@ -285,6 +317,7 @@ router.put('/:uid', authenticateToken, async (req, res) => {
|
|||||||
guest_access = COALESCE(?, guest_access),
|
guest_access = COALESCE(?, guest_access),
|
||||||
moderator_code = ?,
|
moderator_code = ?,
|
||||||
learning_analytics = COALESCE(?, learning_analytics),
|
learning_analytics = COALESCE(?, learning_analytics),
|
||||||
|
analytics_visibility = COALESCE(?, analytics_visibility),
|
||||||
updated_at = CURRENT_TIMESTAMP
|
updated_at = CURRENT_TIMESTAMP
|
||||||
WHERE uid = ?
|
WHERE uid = ?
|
||||||
`, [
|
`, [
|
||||||
@@ -300,6 +333,7 @@ router.put('/:uid', authenticateToken, async (req, res) => {
|
|||||||
guest_access !== undefined ? (guest_access ? 1 : 0) : null,
|
guest_access !== undefined ? (guest_access ? 1 : 0) : null,
|
||||||
moderator_code !== undefined ? (moderator_code || null) : room.moderator_code,
|
moderator_code !== undefined ? (moderator_code || null) : room.moderator_code,
|
||||||
learning_analytics !== undefined ? (learning_analytics ? 1 : 0) : null,
|
learning_analytics !== undefined ? (learning_analytics ? 1 : 0) : null,
|
||||||
|
analytics_visibility && ['owner', 'shared'].includes(analytics_visibility) ? analytics_visibility : null,
|
||||||
req.params.uid,
|
req.params.uid,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -401,6 +435,10 @@ router.post('/:uid/shares', authenticateToken, async (req, res) => {
|
|||||||
if (user_id === req.user.id) {
|
if (user_id === req.user.id) {
|
||||||
return res.status(400).json({ error: 'You cannot share the room with yourself' });
|
return res.status(400).json({ error: 'You cannot share the room with yourself' });
|
||||||
}
|
}
|
||||||
|
const targetUser = await db.get('SELECT id FROM users WHERE id = ?', [user_id]);
|
||||||
|
if (!targetUser) {
|
||||||
|
return res.status(404).json({ error: 'User not found' });
|
||||||
|
}
|
||||||
// Check if already shared
|
// Check if already shared
|
||||||
const existing = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, user_id]);
|
const existing = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, user_id]);
|
||||||
if (existing) {
|
if (existing) {
|
||||||
@@ -470,9 +508,10 @@ router.post('/:uid/start', authenticateToken, async (req, res) => {
|
|||||||
return res.status(404).json({ error: 'Room not found' });
|
return res.status(404).json({ error: 'Room not found' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check access: owner or shared
|
// Check access: owner, admin, shared, or anyone_can_start
|
||||||
const isOwner = room.user_id === req.user.id;
|
const isOwner = room.user_id === req.user.id;
|
||||||
if (!isOwner) {
|
const isAdmin = req.user.role === 'admin';
|
||||||
|
if (!isOwner && !isAdmin && !room.anyone_can_start) {
|
||||||
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
|
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
|
||||||
if (!share) {
|
if (!share) {
|
||||||
return res.status(403).json({ error: 'No permission' });
|
return res.status(403).json({ error: 'No permission' });
|
||||||
@@ -481,16 +520,20 @@ router.post('/:uid/start', authenticateToken, async (req, res) => {
|
|||||||
|
|
||||||
const baseUrl = getBaseUrl(req);
|
const baseUrl = getBaseUrl(req);
|
||||||
const loginURL = `${baseUrl}/join/${room.uid}`;
|
const loginURL = `${baseUrl}/join/${room.uid}`;
|
||||||
const presentationUrl = room.presentation_file
|
let presentationUrl = null;
|
||||||
? `${baseUrl}/uploads/presentations/${room.presentation_file}`
|
if (room.presentation_file) {
|
||||||
: null;
|
const { token, expires } = signPresentationUrl(room.uid, room.presentation_file);
|
||||||
|
presentationUrl = `${baseUrl}/api/rooms/presentations/${token}/${expires}/${room.uid}/${encodeURIComponent(room.presentation_file)}`;
|
||||||
|
}
|
||||||
const analyticsCallbackURL = room.learning_analytics
|
const analyticsCallbackURL = room.learning_analytics
|
||||||
? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
|
? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
|
||||||
: null;
|
: null;
|
||||||
await createMeeting(room, baseUrl, loginURL, presentationUrl, analyticsCallbackURL);
|
// Localise BBB's default welcome message in the room owner's language
|
||||||
|
const owner = await db.get('SELECT language FROM users WHERE id = ?', [room.user_id]);
|
||||||
|
await createMeeting(room, baseUrl, loginURL, presentationUrl, analyticsCallbackURL, owner?.language || 'en');
|
||||||
const avatarURL = getUserAvatarURL(req, req.user);
|
const avatarURL = getUserAvatarURL(req, req.user);
|
||||||
const displayName = req.user.display_name || req.user.name;
|
const displayName = req.user.display_name || req.user.name;
|
||||||
const joinUrl = await joinMeeting(room.uid, displayName, true, avatarURL);
|
const joinUrl = await joinMeeting(room.uid, displayName, true, avatarURL, !!req.body.dark_mode);
|
||||||
res.json({ joinUrl });
|
res.json({ joinUrl });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.rooms.error(`Start meeting error: ${err.message}`);
|
log.rooms.error(`Start meeting error: ${err.message}`);
|
||||||
@@ -524,7 +567,7 @@ router.post('/:uid/join', authenticateToken, async (req, res) => {
|
|||||||
const isShared = !isOwner && await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.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 isModerator = isOwner || !!isShared || room.all_join_moderator;
|
||||||
const avatarURL = getUserAvatarURL(req, req.user);
|
const avatarURL = getUserAvatarURL(req, req.user);
|
||||||
const joinUrl = await joinMeeting(room.uid, req.user.display_name || req.user.name, isModerator, avatarURL);
|
const joinUrl = await joinMeeting(room.uid, req.user.display_name || req.user.name, isModerator, avatarURL, !!req.body.dark_mode);
|
||||||
res.json({ joinUrl });
|
res.json({ joinUrl });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.rooms.error(`Join meeting error: ${err.message}`);
|
log.rooms.error(`Join meeting error: ${err.message}`);
|
||||||
@@ -542,9 +585,10 @@ router.post('/:uid/end', authenticateToken, async (req, res) => {
|
|||||||
return res.status(404).json({ error: 'Room not found' });
|
return res.status(404).json({ error: 'Room not found' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check access: owner or shared user
|
// Check access: owner, admin, or shared user
|
||||||
const isOwner = room.user_id === req.user.id;
|
const isOwner = room.user_id === req.user.id;
|
||||||
if (!isOwner) {
|
const isAdmin = req.user.role === 'admin';
|
||||||
|
if (!isOwner && !isAdmin) {
|
||||||
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
|
const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
|
||||||
if (!share) {
|
if (!share) {
|
||||||
return res.status(403).json({ error: 'No permission' });
|
return res.status(403).json({ error: 'No permission' });
|
||||||
@@ -599,7 +643,7 @@ router.get('/:uid/public', async (req, res) => {
|
|||||||
// POST /api/rooms/:uid/guest-join - Join meeting as guest (no auth needed)
|
// POST /api/rooms/:uid/guest-join - Join meeting as guest (no auth needed)
|
||||||
router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
|
router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const { name, access_code, moderator_code } = req.body;
|
const { name, access_code, moderator_code, avatar_image, avatar_color, dark_mode } = req.body;
|
||||||
|
|
||||||
if (!name || name.trim().length === 0) {
|
if (!name || name.trim().length === 0) {
|
||||||
return res.status(400).json({ error: 'Name is required' });
|
return res.status(400).json({ error: 'Name is required' });
|
||||||
@@ -635,7 +679,9 @@ router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
|
|||||||
const analyticsCallbackURL = room.learning_analytics
|
const analyticsCallbackURL = room.learning_analytics
|
||||||
? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
|
? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
|
||||||
: null;
|
: null;
|
||||||
await createMeeting(room, baseUrl, loginURL, null, analyticsCallbackURL);
|
// Localise BBB's default welcome message in the room owner's language
|
||||||
|
const owner = await db.get('SELECT language FROM users WHERE id = ?', [room.user_id]);
|
||||||
|
await createMeeting(room, baseUrl, loginURL, null, analyticsCallbackURL, owner?.language || 'en');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check moderator code
|
// Check moderator code
|
||||||
@@ -645,8 +691,21 @@ router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const baseUrl = getBaseUrl(req);
|
const baseUrl = getBaseUrl(req);
|
||||||
const guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}`;
|
// Validate client-supplied avatar fields before embedding them in a URL
|
||||||
const joinUrl = await joinMeeting(room.uid, name.trim(), isModerator, guestAvatarURL);
|
// that BBB will fetch — guest-join is unauthenticated.
|
||||||
|
const safeAvatarImage = (typeof avatar_image === 'string' && SAFE_AVATAR_FILENAME_RE.test(avatar_image))
|
||||||
|
? avatar_image : null;
|
||||||
|
const safeAvatarColor = (typeof avatar_color === 'string' && SAFE_AVATAR_COLOR_RE.test(avatar_color))
|
||||||
|
? avatar_color : null;
|
||||||
|
let guestAvatarURL;
|
||||||
|
if (safeAvatarImage) {
|
||||||
|
guestAvatarURL = `${baseUrl}/api/auth/avatar/${encodeURIComponent(safeAvatarImage)}`;
|
||||||
|
} else if (safeAvatarColor) {
|
||||||
|
guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}?color=${encodeURIComponent(safeAvatarColor)}`;
|
||||||
|
} else {
|
||||||
|
guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}`;
|
||||||
|
}
|
||||||
|
const joinUrl = await joinMeeting(room.uid, name.trim(), isModerator, guestAvatarURL, !!dark_mode);
|
||||||
res.json({ joinUrl });
|
res.json({ joinUrl });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log.rooms.error(`Guest join error: ${err.message}`);
|
log.rooms.error(`Guest join error: ${err.message}`);
|
||||||
@@ -676,6 +735,46 @@ router.get('/:uid/status', async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// GET /api/rooms/presentations/:token/:expires/:roomUid/:filename - Serve presentation file (token-protected for BBB)
|
||||||
|
// Token and expires are path segments so the URL ends with the original filename,
|
||||||
|
// allowing BBB to detect the file type from the extension.
|
||||||
|
router.get('/presentations/:token/:expires/:roomUid/:filename', (req, res) => {
|
||||||
|
const { token, expires, roomUid, filename } = req.params;
|
||||||
|
|
||||||
|
if (!token || !expires) {
|
||||||
|
return res.status(401).json({ error: 'Missing token' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const expiresNum = Number(expires);
|
||||||
|
if (isNaN(expiresNum) || Date.now() > expiresNum) {
|
||||||
|
return res.status(403).json({ error: 'Token expired' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const expected = crypto.createHmac('sha256', PRESENTATION_TOKEN_SECRET)
|
||||||
|
.update(`${roomUid}/${filename}:${expires}`)
|
||||||
|
.digest('hex');
|
||||||
|
|
||||||
|
// timingSafeEqual throws on length mismatch, so compare lengths first
|
||||||
|
const tokenBuf = Buffer.from(token);
|
||||||
|
const expectedBuf = Buffer.from(expected);
|
||||||
|
if (tokenBuf.length !== expectedBuf.length || !crypto.timingSafeEqual(tokenBuf, expectedBuf)) {
|
||||||
|
return res.status(403).json({ error: 'Invalid token' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// S8: prevent path traversal
|
||||||
|
const roomDir = path.resolve(presentationsDir, roomUid);
|
||||||
|
const filepath = path.resolve(roomDir, filename);
|
||||||
|
if (!filepath.startsWith(presentationsDir + path.sep) || !filepath.startsWith(roomDir + path.sep)) {
|
||||||
|
return res.status(400).json({ error: 'Invalid filename' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!fs.existsSync(filepath)) {
|
||||||
|
return res.status(404).json({ error: 'File not found' });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.sendFile(filepath);
|
||||||
|
});
|
||||||
|
|
||||||
// POST /api/rooms/:uid/presentation - Upload a presentation file for the room
|
// POST /api/rooms/:uid/presentation - Upload a presentation file for the room
|
||||||
router.post('/:uid/presentation', authenticateToken, async (req, res) => {
|
router.post('/:uid/presentation', authenticateToken, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
@@ -730,22 +829,28 @@ router.post('/:uid/presentation', authenticateToken, async (req, res) => {
|
|||||||
|
|
||||||
// Preserve original filename (sent as X-Filename header)
|
// Preserve original filename (sent as X-Filename header)
|
||||||
const rawName = req.headers['x-filename'];
|
const rawName = req.headers['x-filename'];
|
||||||
const originalName = rawName
|
const filename = rawName
|
||||||
? decodeURIComponent(rawName).replace(/[^a-zA-Z0-9._\- ]/g, '_').slice(0, 200)
|
? decodeURIComponent(rawName).replace(/[^a-zA-Z0-9._\- ]/g, '_').slice(0, 200)
|
||||||
: `presentation.${ext}`;
|
: `presentation.${ext}`;
|
||||||
|
|
||||||
const filename = `${room.uid}_${Date.now()}.${ext}`;
|
// Each room gets its own folder: uploads/presentations/{roomUID}/
|
||||||
const filepath = path.join(presentationsDir, filename);
|
const roomDir = path.join(presentationsDir, room.uid);
|
||||||
|
if (!fs.existsSync(roomDir)) fs.mkdirSync(roomDir, { recursive: true });
|
||||||
|
const filepath = path.join(roomDir, filename);
|
||||||
|
|
||||||
|
// S8: defense-in-depth path traversal check
|
||||||
|
if (!path.resolve(filepath).startsWith(roomDir + path.sep)) {
|
||||||
|
return res.status(400).json({ error: 'Invalid filename' });
|
||||||
|
}
|
||||||
|
|
||||||
// Remove old presentation file if exists
|
// Remove old presentation file if exists
|
||||||
if (room.presentation_file) {
|
if (room.presentation_file) {
|
||||||
// S8: defense-in-depth path traversal check
|
const oldPath = path.resolve(roomDir, room.presentation_file);
|
||||||
const oldPath = path.resolve(presentationsDir, room.presentation_file);
|
if (oldPath.startsWith(roomDir + path.sep) && fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
|
||||||
if (oldPath.startsWith(presentationsDir + path.sep) && fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fs.writeFileSync(filepath, buffer);
|
fs.writeFileSync(filepath, buffer);
|
||||||
await db.run('UPDATE rooms SET presentation_file = ?, presentation_name = ?, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [filename, originalName, req.params.uid]);
|
await db.run('UPDATE rooms SET presentation_file = ?, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [filename, req.params.uid]);
|
||||||
const updated = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
|
const updated = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
|
||||||
res.json({ room: updated });
|
res.json({ room: updated });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -763,11 +868,14 @@ router.delete('/:uid/presentation', authenticateToken, async (req, res) => {
|
|||||||
|
|
||||||
if (room.presentation_file) {
|
if (room.presentation_file) {
|
||||||
// S8: defense-in-depth path traversal check
|
// S8: defense-in-depth path traversal check
|
||||||
const filepath = path.resolve(presentationsDir, room.presentation_file);
|
const roomDir = path.join(presentationsDir, room.uid);
|
||||||
if (filepath.startsWith(presentationsDir + path.sep) && fs.existsSync(filepath)) fs.unlinkSync(filepath);
|
const filepath = path.resolve(roomDir, room.presentation_file);
|
||||||
|
if (filepath.startsWith(roomDir + path.sep) && fs.existsSync(filepath)) fs.unlinkSync(filepath);
|
||||||
|
// Remove empty room folder
|
||||||
|
if (fs.existsSync(roomDir) && fs.readdirSync(roomDir).length === 0) fs.rmdirSync(roomDir);
|
||||||
}
|
}
|
||||||
|
|
||||||
await db.run('UPDATE rooms SET presentation_file = NULL, presentation_name = NULL, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [req.params.uid]);
|
await db.run('UPDATE rooms SET presentation_file = NULL, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [req.params.uid]);
|
||||||
const updated = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
|
const updated = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
|
||||||
res.json({ room: updated });
|
res.json({ room: updated });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -776,4 +884,76 @@ router.delete('/:uid/presentation', authenticateToken, async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ── POST /api/rooms/invite-email — Send email invitation to guest(s) ────────
|
||||||
|
router.post('/invite-email', authenticateToken, inviteEmailLimiter, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { room_uid, emails, message } = req.body;
|
||||||
|
if (!room_uid || !emails || !emails.length) {
|
||||||
|
return res.status(400).json({ error: 'room_uid and emails are required' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (emails.length > 50) {
|
||||||
|
return res.status(400).json({ error: 'Maximum 50 email addresses allowed' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate all emails
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
for (const email of emails) {
|
||||||
|
if (!emailRegex.test(email) || email.length > 254) {
|
||||||
|
return res.status(400).json({ error: `Invalid email address: ${email}` });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (message && message.length > 2000) {
|
||||||
|
return res.status(400).json({ error: 'Message must not exceed 2000 characters' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const db = getDb();
|
||||||
|
|
||||||
|
// Verify room exists and user has access
|
||||||
|
const room = await db.get('SELECT * FROM rooms WHERE uid = ?', [room_uid]);
|
||||||
|
if (!room) {
|
||||||
|
return res.status(404).json({ error: 'Room not found' });
|
||||||
|
}
|
||||||
|
|
||||||
|
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: 'No permission to invite from this room' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build guest join URL
|
||||||
|
const baseUrl = getBaseUrl(req);
|
||||||
|
const joinUrl = room.access_code
|
||||||
|
? `${baseUrl}/join/${room.uid}?ac=${encodeURIComponent(room.access_code)}`
|
||||||
|
: `${baseUrl}/join/${room.uid}`;
|
||||||
|
|
||||||
|
const appName = await getAppName();
|
||||||
|
const fromUser = req.user.display_name || req.user.name;
|
||||||
|
const lang = req.user.language || 'en';
|
||||||
|
|
||||||
|
// Send emails (in parallel but collect errors)
|
||||||
|
const results = await Promise.allSettled(
|
||||||
|
emails.map(email =>
|
||||||
|
sendGuestInviteEmail(email, fromUser, room.name, message || null, joinUrl, appName, lang)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const failed = results.filter(r => r.status === 'rejected');
|
||||||
|
if (failed.length === emails.length) {
|
||||||
|
return res.status(500).json({ error: 'Failed to send all email invitations' });
|
||||||
|
}
|
||||||
|
if (failed.length > 0) {
|
||||||
|
log.rooms.warn(`${failed.length}/${emails.length} email invitations failed`);
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ success: true, sent: emails.length - failed.length, failed: failed.length });
|
||||||
|
} catch (err) {
|
||||||
|
log.rooms.error('Email invite error:', err);
|
||||||
|
res.status(500).json({ error: err.message || 'Failed to send email invitations' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
import { BarChart3, Trash2, Clock, Users, MessageSquare, Video, Mic, ChevronDown, ChevronUp, Hand, BarChart2 } from 'lucide-react';
|
import { BarChart3, Trash2, Clock, Users, MessageSquare, Video, Mic, ChevronDown, ChevronUp, Hand, BarChart2, Download } from 'lucide-react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import api from '../services/api';
|
import api from '../services/api';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
export default function AnalyticsList({ analytics, onRefresh }) {
|
export default function AnalyticsList({ analytics, onRefresh, isOwner = true }) {
|
||||||
const [loading, setLoading] = useState({});
|
const [loading, setLoading] = useState({});
|
||||||
const [expanded, setExpanded] = useState({});
|
const [expanded, setExpanded] = useState({});
|
||||||
|
const [exportMenu, setExportMenu] = useState({});
|
||||||
const { t, language } = useLanguage();
|
const { t, language } = useLanguage();
|
||||||
|
|
||||||
const formatDate = (dateStr) => {
|
const formatDate = (dateStr) => {
|
||||||
@@ -49,6 +50,34 @@ export default function AnalyticsList({ analytics, onRefresh }) {
|
|||||||
setExpanded(prev => ({ ...prev, [id]: !prev[id] }));
|
setExpanded(prev => ({ ...prev, [id]: !prev[id] }));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const toggleExportMenu = (id) => {
|
||||||
|
setExportMenu(prev => ({ ...prev, [id]: !prev[id] }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExport = async (id, format) => {
|
||||||
|
setExportMenu(prev => ({ ...prev, [id]: false }));
|
||||||
|
setLoading(prev => ({ ...prev, [id]: 'exporting' }));
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/analytics/${id}/export/${format}`, { responseType: 'blob' });
|
||||||
|
const disposition = response.headers['content-disposition'];
|
||||||
|
const match = disposition?.match(/filename="?([^"]+)"?/);
|
||||||
|
const filename = match?.[1] || `analytics.${format}`;
|
||||||
|
const url = window.URL.createObjectURL(response.data);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = filename;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
a.remove();
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
toast.success(t('analytics.exportSuccess'));
|
||||||
|
} catch {
|
||||||
|
toast.error(t('analytics.exportFailed'));
|
||||||
|
} finally {
|
||||||
|
setLoading(prev => ({ ...prev, [id]: null }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Extract user summary from BBB learning analytics callback data
|
// Extract user summary from BBB learning analytics callback data
|
||||||
// Payload: { meeting_id, data: { duration, start, finish, attendees: [{ name, moderator, duration, engagement: { chats, talks, raisehand, emojis, poll_votes, talk_time } }] } }
|
// Payload: { meeting_id, data: { duration, start, finish, attendees: [{ name, moderator, duration, engagement: { chats, talks, raisehand, emojis, poll_votes, talk_time } }] } }
|
||||||
const getUserSummary = (data) => {
|
const getUserSummary = (data) => {
|
||||||
@@ -123,7 +152,39 @@ export default function AnalyticsList({ analytics, onRefresh }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-1 flex-shrink-0">
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleExportMenu(entry.id)}
|
||||||
|
disabled={loading[entry.id] === 'exporting'}
|
||||||
|
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-text transition-colors"
|
||||||
|
title={t('analytics.export')}
|
||||||
|
>
|
||||||
|
<Download size={16} />
|
||||||
|
</button>
|
||||||
|
{exportMenu[entry.id] && (
|
||||||
|
<div className="absolute right-0 top-full mt-1 bg-th-bg border border-th-border rounded-lg shadow-lg z-10 min-w-[120px] py-1">
|
||||||
|
<button
|
||||||
|
onClick={() => handleExport(entry.id, 'csv')}
|
||||||
|
className="w-full text-left px-3 py-1.5 text-sm text-th-text hover:bg-th-hover transition-colors"
|
||||||
|
>
|
||||||
|
CSV
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleExport(entry.id, 'xlsx')}
|
||||||
|
className="w-full text-left px-3 py-1.5 text-sm text-th-text hover:bg-th-hover transition-colors"
|
||||||
|
>
|
||||||
|
Excel (.xlsx)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleExport(entry.id, 'pdf')}
|
||||||
|
className="w-full text-left px-3 py-1.5 text-sm text-th-text hover:bg-th-hover transition-colors"
|
||||||
|
>
|
||||||
|
PDF
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => toggleExpand(entry.id)}
|
onClick={() => toggleExpand(entry.id)}
|
||||||
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-text transition-colors"
|
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-text transition-colors"
|
||||||
@@ -131,6 +192,7 @@ export default function AnalyticsList({ analytics, onRefresh }) {
|
|||||||
>
|
>
|
||||||
{isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
{isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
||||||
</button>
|
</button>
|
||||||
|
{isOwner && (
|
||||||
<button
|
<button
|
||||||
onClick={() => handleDelete(entry.id)}
|
onClick={() => handleDelete(entry.id)}
|
||||||
disabled={loading[entry.id] === 'deleting'}
|
disabled={loading[entry.id] === 'deleting'}
|
||||||
@@ -139,6 +201,7 @@ export default function AnalyticsList({ analytics, onRefresh }) {
|
|||||||
>
|
>
|
||||||
<Trash2 size={16} />
|
<Trash2 size={16} />
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -2,9 +2,9 @@ import { Video } from 'lucide-react';
|
|||||||
import { useBranding } from '../contexts/BrandingContext';
|
import { useBranding } from '../contexts/BrandingContext';
|
||||||
|
|
||||||
const sizes = {
|
const sizes = {
|
||||||
sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
|
sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-32', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
|
||||||
md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
|
md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-40', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
|
||||||
lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
|
lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-48', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function BrandLogo({ size = 'md', className = '' }) {
|
export default function BrandLogo({ size = 'md', className = '' }) {
|
||||||
|
|||||||
@@ -90,7 +90,7 @@ export default function DateTimePicker({
|
|||||||
</label>
|
</label>
|
||||||
)}
|
)}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-[1]" />
|
<Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-1" />
|
||||||
<input
|
<input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
type="text"
|
type="text"
|
||||||
|
|||||||
@@ -30,22 +30,35 @@ export default function FederatedRoomCard({ room, onRemove }) {
|
|||||||
|
|
||||||
const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
|
const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
|
||||||
|
|
||||||
|
const openRoom = () => navigate(`/federation/rooms/${room.id}`);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`card-hover group p-5 cursor-pointer ${isDeleted ? 'opacity-60' : ''}`} onClick={() => navigate(`/federation/rooms/${room.id}`)}>
|
<div
|
||||||
|
role="link"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label={room.room_name}
|
||||||
|
onClick={openRoom}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.target !== e.currentTarget) return;
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRoom(); }
|
||||||
|
}}
|
||||||
|
className={`card-hover group p-5 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2 ${isDeleted ? 'opacity-60' : ''}`}
|
||||||
|
style={{ '--tw-ring-offset-color': 'var(--bg-primary)' }}
|
||||||
|
>
|
||||||
<div className="flex items-start justify-between mb-3">
|
<div className="flex items-start justify-between mb-3">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Globe size={14} className="text-th-accent flex-shrink-0" />
|
<Globe size={14} className="text-th-accent shrink-0" />
|
||||||
<h3 className="text-base font-semibold text-th-text truncate group-hover:text-th-accent transition-colors">
|
<h3 className="text-base font-semibold text-th-text truncate group-hover:text-th-accent transition-colors">
|
||||||
{room.room_name}
|
{room.room_name}
|
||||||
</h3>
|
</h3>
|
||||||
{isDeleted ? (
|
{isDeleted ? (
|
||||||
<span className="flex-shrink-0 px-2 py-0.5 bg-red-500/15 text-red-500 rounded-full text-xs font-medium flex items-center gap-1">
|
<span className="shrink-0 px-2 py-0.5 bg-red-500/15 text-red-500 rounded-full text-xs font-medium flex items-center gap-1">
|
||||||
<AlertTriangle size={10} />
|
<AlertTriangle size={10} />
|
||||||
{t('federation.roomDeleted')}
|
{t('federation.roomDeleted')}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span className="flex-shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
|
<span className="shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
|
||||||
{t('federation.federated')}
|
{t('federation.federated')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@@ -60,12 +73,12 @@ export default function FederatedRoomCard({ room, onRemove }) {
|
|||||||
<div className="grid grid-cols-2 gap-2 mb-4">
|
<div className="grid grid-cols-2 gap-2 mb-4">
|
||||||
{room.meet_id && (
|
{room.meet_id && (
|
||||||
<div className="flex items-center gap-1.5 text-xs text-th-text-s">
|
<div className="flex items-center gap-1.5 text-xs text-th-text-s">
|
||||||
<Hash size={12} className="text-th-accent flex-shrink-0" />
|
<Hash size={12} className="text-th-accent shrink-0" />
|
||||||
<span className="truncate font-mono" title={room.meet_id}>{room.meet_id.slice(0, 10)}…</span>
|
<span className="truncate font-mono" title={room.meet_id}>{room.meet_id.slice(0, 10)}…</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center gap-1.5 text-xs text-th-text-s">
|
<div className="flex items-center gap-1.5 text-xs text-th-text-s">
|
||||||
<Users size={12} className="text-th-accent flex-shrink-0" />
|
<Users size={12} className="text-th-accent shrink-0" />
|
||||||
<span>
|
<span>
|
||||||
{t('federation.maxParticipants')}:{' '}
|
{t('federation.maxParticipants')}:{' '}
|
||||||
<span className="text-th-text font-medium">
|
<span className="text-th-text font-medium">
|
||||||
@@ -76,12 +89,12 @@ export default function FederatedRoomCard({ room, onRemove }) {
|
|||||||
<div className="flex items-center gap-1.5 text-xs col-span-2">
|
<div className="flex items-center gap-1.5 text-xs col-span-2">
|
||||||
{recordingOn ? (
|
{recordingOn ? (
|
||||||
<>
|
<>
|
||||||
<Video size={12} className="text-amber-500 flex-shrink-0" />
|
<Video size={12} className="text-amber-500 shrink-0" />
|
||||||
<span className="text-amber-500 font-medium">{t('federation.recordingOn')}</span>
|
<span className="text-amber-500 font-medium">{t('federation.recordingOn')}</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<VideoOff size={12} className="text-th-text-s flex-shrink-0" />
|
<VideoOff size={12} className="text-th-text-s shrink-0" />
|
||||||
<span className="text-th-text-s">{t('federation.recordingOff')}</span>
|
<span className="text-th-text-s">{t('federation.recordingOff')}</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -107,6 +120,7 @@ export default function FederatedRoomCard({ room, onRemove }) {
|
|||||||
<button
|
<button
|
||||||
onClick={handleRemove}
|
onClick={handleRemove}
|
||||||
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
|
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
|
||||||
|
aria-label={t('federation.removeRoom')}
|
||||||
title={t('federation.removeRoom')}
|
title={t('federation.removeRoom')}
|
||||||
>
|
>
|
||||||
<Trash2 size={14} />
|
<Trash2 size={14} />
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export default function Layout() {
|
|||||||
{/* Email verification banner */}
|
{/* Email verification banner */}
|
||||||
{user && user.email_verified === 0 && (
|
{user && user.email_verified === 0 && (
|
||||||
<div className="bg-amber-500/15 border-b border-amber-500/30 px-4 py-2.5 flex items-center justify-center gap-3 text-sm">
|
<div className="bg-amber-500/15 border-b border-amber-500/30 px-4 py-2.5 flex items-center justify-center gap-3 text-sm">
|
||||||
<AlertTriangle size={15} className="text-amber-400 flex-shrink-0" />
|
<AlertTriangle size={15} className="text-amber-400 shrink-0" />
|
||||||
<span className="text-amber-200">{t('auth.emailVerificationBanner')}</span>
|
<span className="text-amber-200">{t('auth.emailVerificationBanner')}</span>
|
||||||
<button
|
<button
|
||||||
onClick={handleResendVerification}
|
onClick={handleResendVerification}
|
||||||
|
|||||||
@@ -1,15 +1,56 @@
|
|||||||
|
import { useEffect, useId, useRef } from 'react';
|
||||||
import { X } from 'lucide-react';
|
import { X } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
|
|
||||||
export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg' }) {
|
export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg' }) {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
const titleId = useId();
|
||||||
|
const dialogRef = useRef(null);
|
||||||
|
const previouslyFocused = useRef(null);
|
||||||
|
|
||||||
|
// Keep the latest onClose in a ref so the mount-only effect below can call it
|
||||||
|
// without listing onClose as a dependency. Callers pass a fresh inline arrow
|
||||||
|
// each render; depending on it would re-run the effect on every keystroke and
|
||||||
|
// steal focus back to the dialog (kicking the user out of input fields).
|
||||||
|
const onCloseRef = useRef(onClose);
|
||||||
|
onCloseRef.current = onClose;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
previouslyFocused.current = document.activeElement;
|
||||||
|
const handleKey = (e) => {
|
||||||
|
if (e.key === 'Escape') onCloseRef.current?.();
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleKey);
|
||||||
|
// Focus the dialog so screen readers announce it and keyboard focus lands inside
|
||||||
|
dialogRef.current?.focus();
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKey);
|
||||||
|
previouslyFocused.current?.focus?.();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
<div
|
||||||
<div className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth}`}>
|
className="fixed inset-0 bg-black/60 backdrop-blur-xs"
|
||||||
|
onClick={onClose}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
ref={dialogRef}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby={titleId}
|
||||||
|
tabIndex={-1}
|
||||||
|
className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} focus:outline-hidden`}
|
||||||
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
|
<div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
|
||||||
<h2 className="text-lg font-semibold text-th-text">{title}</h2>
|
<h2 id={titleId} className="text-lg font-semibold text-th-text">{title}</h2>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
|
aria-label={t('common.close')}
|
||||||
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
>
|
>
|
||||||
<X size={20} />
|
<X size={20} />
|
||||||
|
|||||||
@@ -38,12 +38,13 @@ export default function Navbar({ onMenuClick }) {
|
|||||||
: '?';
|
: '?';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-20 bg-th-nav border-b border-th-border backdrop-blur-sm">
|
<header className="sticky top-0 z-20 bg-th-nav border-b border-th-border backdrop-blur-xs">
|
||||||
<div className="flex items-center justify-between h-16 px-4 md:px-6">
|
<div className="flex items-center justify-between h-16 px-4 md:px-6">
|
||||||
{/* Left section */}
|
{/* Left section */}
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={onMenuClick}
|
onClick={onMenuClick}
|
||||||
|
aria-label={t('nav.navigation')}
|
||||||
className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
>
|
>
|
||||||
<Menu size={20} />
|
<Menu size={20} />
|
||||||
@@ -59,6 +60,9 @@ export default function Navbar({ onMenuClick }) {
|
|||||||
<div className="relative" ref={dropdownRef}>
|
<div className="relative" ref={dropdownRef}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setDropdownOpen(!dropdownOpen)}
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
||||||
|
aria-label={user?.display_name || user?.name}
|
||||||
|
aria-haspopup="menu"
|
||||||
|
aria-expanded={dropdownOpen}
|
||||||
className="flex items-center gap-2 p-1.5 rounded-lg hover:bg-th-hover transition-colors"
|
className="flex items-center gap-2 p-1.5 rounded-lg hover:bg-th-hover transition-colors"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@@ -68,7 +72,7 @@ export default function Navbar({ onMenuClick }) {
|
|||||||
{user?.avatar_image ? (
|
{user?.avatar_image ? (
|
||||||
<img
|
<img
|
||||||
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
|
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
|
||||||
alt="Avatar"
|
alt=""
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -83,6 +83,11 @@ export default function NotificationBell() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => setOpen(prev => !prev)}
|
onClick={() => setOpen(prev => !prev)}
|
||||||
className="relative p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
className="relative p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
|
aria-label={unreadCount > 0
|
||||||
|
? `${t('notifications.bell')} (${unreadCount})`
|
||||||
|
: t('notifications.bell')}
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={open}
|
||||||
title={t('notifications.bell')}
|
title={t('notifications.bell')}
|
||||||
>
|
>
|
||||||
<Bell size={20} />
|
<Bell size={20} />
|
||||||
@@ -148,7 +153,7 @@ export default function NotificationBell() {
|
|||||||
${n.read ? 'hover:bg-th-hover' : 'bg-th-accent/5 hover:bg-th-accent/10'}`}
|
${n.read ? 'hover:bg-th-hover' : 'bg-th-accent/5 hover:bg-th-accent/10'}`}
|
||||||
>
|
>
|
||||||
{/* Icon */}
|
{/* Icon */}
|
||||||
<span className="text-lg flex-shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
|
<span className="text-lg shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
@@ -164,7 +169,7 @@ export default function NotificationBell() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right side: unread dot, link icon, delete button */}
|
{/* Right side: unread dot, link icon, delete button */}
|
||||||
<div className="flex flex-col items-end gap-1 flex-shrink-0">
|
<div className="flex flex-col items-end gap-1 shrink-0">
|
||||||
{!n.read && (
|
{!n.read && (
|
||||||
<span className="w-2 h-2 rounded-full bg-th-accent mt-1" />
|
<span className="w-2 h-2 rounded-full bg-th-accent mt-1" />
|
||||||
)}
|
)}
|
||||||
@@ -173,7 +178,8 @@ export default function NotificationBell() {
|
|||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={(e) => handleDelete(e, n.id)}
|
onClick={(e) => handleDelete(e, n.id)}
|
||||||
className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:text-th-error transition-all text-th-text-s/50"
|
className="opacity-0 group-hover:opacity-100 p-0.5 rounded-sm hover:text-th-error transition-all text-th-text-s/50"
|
||||||
|
aria-label={t('notifications.delete')}
|
||||||
title={t('notifications.delete')}
|
title={t('notifications.delete')}
|
||||||
>
|
>
|
||||||
<X size={13} />
|
<X size={13} />
|
||||||
|
|||||||
@@ -122,9 +122,9 @@ export default function RecordingList({ recordings, onRefresh }) {
|
|||||||
href={format.url}
|
href={format.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-th-accent/10 text-th-accent text-xs font-medium hover:bg-th-accent/20 transition-colors"
|
className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-th-accent/10 text-th-accent text-sm font-medium hover:bg-th-accent/20 transition-colors"
|
||||||
>
|
>
|
||||||
<Play size={12} />
|
<Play size={14} />
|
||||||
{format.type === 'presentation' ? t('recordings.presentation') : format.type}
|
{format.type === 'presentation' ? t('recordings.presentation') : format.type}
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
@@ -133,7 +133,7 @@ export default function RecordingList({ recordings, onRefresh }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="flex items-center gap-1 flex-shrink-0">
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
<button
|
<button
|
||||||
onClick={() => handlePublish(rec.recordID, !rec.published)}
|
onClick={() => handlePublish(rec.recordID, !rec.published)}
|
||||||
disabled={loading[rec.recordID] === 'publishing'}
|
disabled={loading[rec.recordID] === 'publishing'}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { Users, Play, Trash2, Radio, Loader2, Share2, Copy, Link } from 'lucide-
|
|||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useState, useEffect, useRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import api from '../services/api';
|
import api from '../services/api';
|
||||||
|
import { isCurrentThemeDark } from '../themes';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
@@ -43,8 +44,21 @@ export default function RoomCard({ room, onDelete }) {
|
|||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, [room.uid]);
|
}, [room.uid]);
|
||||||
|
|
||||||
|
const openRoom = () => navigate(`/rooms/${room.uid}`);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card-hover group p-5 cursor-pointer" onClick={() => navigate(`/rooms/${room.uid}`)}>
|
<div
|
||||||
|
role="link"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label={room.name}
|
||||||
|
onClick={openRoom}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.target !== e.currentTarget) return;
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRoom(); }
|
||||||
|
}}
|
||||||
|
className="card-hover group p-5 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2"
|
||||||
|
style={{ '--tw-ring-offset-color': 'var(--bg-primary)' }}
|
||||||
|
>
|
||||||
<div className="flex items-start justify-between mb-3">
|
<div className="flex items-start justify-between mb-3">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
@@ -80,7 +94,7 @@ export default function RoomCard({ room, onDelete }) {
|
|||||||
<span>Max: {room.max_participants}</span>
|
<span>Max: {room.max_participants}</span>
|
||||||
)}
|
)}
|
||||||
{room.access_code && (
|
{room.access_code && (
|
||||||
<span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded text-[10px] font-medium">
|
<span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded-sm text-[10px] font-medium">
|
||||||
{t('common.protected')}
|
{t('common.protected')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@@ -94,11 +108,12 @@ export default function RoomCard({ room, onDelete }) {
|
|||||||
setStarting(true);
|
setStarting(true);
|
||||||
try {
|
try {
|
||||||
if (status.running) {
|
if (status.running) {
|
||||||
const data = room.access_code ? { access_code: prompt(t('room.enterAccessCode')) } : {};
|
const data = { dark_mode: isCurrentThemeDark() };
|
||||||
|
if (room.access_code) data.access_code = prompt(t('room.enterAccessCode'));
|
||||||
const res = await api.post(`/rooms/${room.uid}/join`, data);
|
const res = await api.post(`/rooms/${room.uid}/join`, data);
|
||||||
if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
|
if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
|
||||||
} else {
|
} else {
|
||||||
const res = await api.post(`/rooms/${room.uid}/start`);
|
const res = await api.post(`/rooms/${room.uid}/start`, { dark_mode: isCurrentThemeDark() });
|
||||||
if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
|
if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
|
||||||
toast.success(t('room.meetingStarted'));
|
toast.success(t('room.meetingStarted'));
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -121,6 +136,9 @@ export default function RoomCard({ room, onDelete }) {
|
|||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
|
onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
|
||||||
className="btn-ghost text-xs py-1.5 px-2"
|
className="btn-ghost text-xs py-1.5 px-2"
|
||||||
|
aria-label={t('room.copyLink')}
|
||||||
|
aria-haspopup="menu"
|
||||||
|
aria-expanded={showCopyMenu}
|
||||||
title={t('room.copyLink')}
|
title={t('room.copyLink')}
|
||||||
>
|
>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
@@ -148,6 +166,7 @@ export default function RoomCard({ room, onDelete }) {
|
|||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); onDelete(room); }}
|
onClick={(e) => { e.stopPropagation(); onDelete(room); }}
|
||||||
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
|
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
|
||||||
|
aria-label={t('common.delete')}
|
||||||
title={t('common.delete')}
|
title={t('common.delete')}
|
||||||
>
|
>
|
||||||
<Trash2 size={14} />
|
<Trash2 size={14} />
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export default function Sidebar({ open, onClose }) {
|
|||||||
|
|
||||||
const linkClasses = ({ isActive }) =>
|
const linkClasses = ({ isActive }) =>
|
||||||
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${isActive
|
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${isActive
|
||||||
? 'bg-th-accent text-th-accent-t shadow-sm'
|
? 'bg-th-accent text-th-accent-t shadow-xs'
|
||||||
: 'text-th-text-s hover:text-th-text hover:bg-th-hover'
|
: 'text-th-text-s hover:text-th-text hover:bg-th-hover'
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
@@ -60,6 +60,7 @@ export default function Sidebar({ open, onClose }) {
|
|||||||
<BrandLogo size="md" className="flex-1 min-w-0" />
|
<BrandLogo size="md" className="flex-1 min-w-0" />
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
|
aria-label={t('common.close')}
|
||||||
className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
>
|
>
|
||||||
<X size={18} />
|
<X size={18} />
|
||||||
@@ -106,13 +107,13 @@ export default function Sidebar({ open, onClose }) {
|
|||||||
<div className="p-4 border-t border-th-border">
|
<div className="p-4 border-t border-th-border">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 overflow-hidden"
|
className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 overflow-hidden"
|
||||||
style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{user?.avatar_image ? (
|
{user?.avatar_image ? (
|
||||||
<img
|
<img
|
||||||
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
|
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
|
||||||
alt="Avatar"
|
alt=""
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -10,17 +10,23 @@ export default function ThemeSelector({ onClose }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} aria-hidden="true" />
|
||||||
|
|
||||||
<div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="theme-selector-title"
|
||||||
|
className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
|
||||||
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
|
<div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
|
<h2 id="theme-selector-title" className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
|
||||||
<p className="text-sm text-th-text-s mt-0.5">{t('themes.selectThemeSubtitle')}</p>
|
<p className="text-sm text-th-text-s mt-0.5">{t('themes.selectThemeSubtitle')}</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
|
aria-label={t('common.close')}
|
||||||
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
>
|
>
|
||||||
<X size={20} />
|
<X size={20} />
|
||||||
|
|||||||
@@ -23,6 +23,16 @@ export function AuthProvider({ children }) {
|
|||||||
|
|
||||||
const login = useCallback(async (email, password) => {
|
const login = useCallback(async (email, password) => {
|
||||||
const res = await api.post('/auth/login', { email, password });
|
const res = await api.post('/auth/login', { email, password });
|
||||||
|
if (res.data.requires2FA) {
|
||||||
|
return { requires2FA: true, tempToken: res.data.tempToken };
|
||||||
|
}
|
||||||
|
localStorage.setItem('token', res.data.token);
|
||||||
|
setUser(res.data.user);
|
||||||
|
return res.data.user;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const verify2FA = useCallback(async (tempToken, code) => {
|
||||||
|
const res = await api.post('/auth/login/2fa', { tempToken, code });
|
||||||
localStorage.setItem('token', res.data.token);
|
localStorage.setItem('token', res.data.token);
|
||||||
setUser(res.data.user);
|
setUser(res.data.user);
|
||||||
return res.data.user;
|
return res.data.user;
|
||||||
@@ -75,7 +85,7 @@ export function AuthProvider({ children }) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider value={{ user, loading, login, register, logout, loginWithOAuth, updateUser }}>
|
<AuthContext.Provider value={{ user, loading, login, verify2FA, register, logout, loginWithOAuth, updateUser }}>
|
||||||
{children}
|
{children}
|
||||||
</AuthContext.Provider>
|
</AuthContext.Provider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -49,14 +49,20 @@ export function NotificationProvider({ children }) {
|
|||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const [notifications, setNotifications] = useState([]);
|
const [notifications, setNotifications] = useState([]);
|
||||||
const [unreadCount, setUnreadCount] = useState(0);
|
const [unreadCount, setUnreadCount] = useState(0);
|
||||||
|
const activeUserId = useRef(null);
|
||||||
// Track seen IDs to detect genuinely new arrivals and show toasts
|
// Track seen IDs to detect genuinely new arrivals and show toasts
|
||||||
const seenIds = useRef(new Set());
|
const seenIds = useRef(new Set());
|
||||||
const initialized = useRef(false);
|
const initialized = useRef(false);
|
||||||
|
|
||||||
const fetch = useCallback(async () => {
|
const fetch = useCallback(async () => {
|
||||||
if (!user) return;
|
const requestUserId = user?.id;
|
||||||
|
if (!requestUserId) return;
|
||||||
try {
|
try {
|
||||||
const res = await api.get('/notifications');
|
const res = await api.get('/notifications');
|
||||||
|
|
||||||
|
// Ignore stale responses that arrived after logout or account switch.
|
||||||
|
if (activeUserId.current !== requestUserId) return;
|
||||||
|
|
||||||
const incoming = res.data.notifications || [];
|
const incoming = res.data.notifications || [];
|
||||||
setNotifications(incoming);
|
setNotifications(incoming);
|
||||||
setUnreadCount(res.data.unreadCount || 0);
|
setUnreadCount(res.data.unreadCount || 0);
|
||||||
@@ -92,10 +98,10 @@ export function NotificationProvider({ children }) {
|
|||||||
}
|
}
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
// Unlock audio playback on the first real user interaction.
|
// Unlock audio playback only for authenticated sessions.
|
||||||
// Browsers block audio from timer callbacks unless the element was previously
|
// This avoids any audio interaction while logged out (e.g. anonymous/incognito tabs).
|
||||||
// "touched" inside a gesture handler — this one-time listener does exactly that.
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!user?.id) return;
|
||||||
const events = ['click', 'keydown', 'pointerdown'];
|
const events = ['click', 'keydown', 'pointerdown'];
|
||||||
const handler = () => {
|
const handler = () => {
|
||||||
unlockAudio();
|
unlockAudio();
|
||||||
@@ -103,10 +109,12 @@ export function NotificationProvider({ children }) {
|
|||||||
};
|
};
|
||||||
events.forEach(e => window.addEventListener(e, handler, { once: true }));
|
events.forEach(e => window.addEventListener(e, handler, { once: true }));
|
||||||
return () => events.forEach(e => window.removeEventListener(e, handler));
|
return () => events.forEach(e => window.removeEventListener(e, handler));
|
||||||
}, []);
|
}, [user?.id]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
activeUserId.current = user?.id ?? null;
|
||||||
if (!user) {
|
if (!user) {
|
||||||
|
_audioUnlocked = false;
|
||||||
setNotifications([]);
|
setNotifications([]);
|
||||||
setUnreadCount(0);
|
setUnreadCount(0);
|
||||||
seenIds.current = new Set();
|
seenIds.current = new Set();
|
||||||
|
|||||||
+95
-45
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"common": {
|
"common": {
|
||||||
"appName": "Redlight",
|
"appName": "Redlight",
|
||||||
"loading": "Laden...",
|
"loading": "Laden...",
|
||||||
@@ -23,7 +23,9 @@
|
|||||||
"protected": "Geschützt",
|
"protected": "Geschützt",
|
||||||
"live": "Live",
|
"live": "Live",
|
||||||
"error": "Fehler",
|
"error": "Fehler",
|
||||||
"success": "Erfolg"
|
"success": "Erfolg",
|
||||||
|
"gridView": "Rasteransicht",
|
||||||
|
"listView": "Listenansicht"
|
||||||
},
|
},
|
||||||
"nav": {
|
"nav": {
|
||||||
"dashboard": "Dashboard",
|
"dashboard": "Dashboard",
|
||||||
@@ -62,16 +64,16 @@
|
|||||||
"passwordMismatch": "Passwörter stimmen nicht überein",
|
"passwordMismatch": "Passwörter stimmen nicht überein",
|
||||||
"passwordTooShort": "Passwort muss mindestens 6 Zeichen lang sein",
|
"passwordTooShort": "Passwort muss mindestens 6 Zeichen lang sein",
|
||||||
"loginSuccess": "Willkommen zurück!",
|
"loginSuccess": "Willkommen zurück!",
|
||||||
"registerSuccess": "Registrierung erfolgreich!",
|
"registerSuccess": "Registrierung erfolgreich",
|
||||||
"loginFailed": "Anmeldung fehlgeschlagen",
|
"loginFailed": "Anmeldung fehlgeschlagen",
|
||||||
"registerFailed": "Registrierung fehlgeschlagen",
|
"registerFailed": "Registrierung fehlgeschlagen",
|
||||||
"allFieldsRequired": "Alle Felder sind erforderlich",
|
"allFieldsRequired": "Alle Felder sind erforderlich",
|
||||||
"verificationSent": "Verifizierungs-E-Mail wurde gesendet!",
|
"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.",
|
"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",
|
"checkYourEmail": "Prüfe dein Postfach",
|
||||||
"verifying": "E-Mail wird verifiziert...",
|
"verifying": "E-Mail wird verifiziert...",
|
||||||
"verifySuccess": "Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich jetzt anmelden.",
|
"verifySuccess": "Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich jetzt anmelden.",
|
||||||
"verifySuccessTitle": "E-Mail bestätigt!",
|
"verifySuccessTitle": "E-Mail bestätigt",
|
||||||
"verifyFailed": "Verifizierung fehlgeschlagen",
|
"verifyFailed": "Verifizierung fehlgeschlagen",
|
||||||
"verifyFailedTitle": "Verifizierung fehlgeschlagen",
|
"verifyFailedTitle": "Verifizierung fehlgeschlagen",
|
||||||
"verifyTokenMissing": "Kein Verifizierungstoken vorhanden.",
|
"verifyTokenMissing": "Kein Verifizierungstoken vorhanden.",
|
||||||
@@ -88,7 +90,7 @@
|
|||||||
"emailVerificationBanner": "Deine E-Mail-Adresse wurde noch nicht verifiziert.",
|
"emailVerificationBanner": "Deine E-Mail-Adresse wurde noch nicht verifiziert.",
|
||||||
"emailVerificationResend": "Hier klicken um eine neue Verifizierungsmail zu erhalten",
|
"emailVerificationResend": "Hier klicken um eine neue Verifizierungsmail zu erhalten",
|
||||||
"emailVerificationResendCooldown": "Erneut senden in {seconds}s",
|
"emailVerificationResendCooldown": "Erneut senden in {seconds}s",
|
||||||
"emailVerificationResendSuccess": "Verifizierungsmail wurde gesendet!",
|
"emailVerificationResendSuccess": "Verifizierungsmail wurde gesendet",
|
||||||
"emailVerificationResendFailed": "Verifizierungsmail konnte nicht gesendet werden",
|
"emailVerificationResendFailed": "Verifizierungsmail konnte nicht gesendet werden",
|
||||||
"inviteOnly": "Nur mit Einladung",
|
"inviteOnly": "Nur mit Einladung",
|
||||||
"inviteOnlyDesc": "Die Registrierung ist derzeit eingeschränkt. Sie benötigen einen Einladungslink von einem Administrator, um ein Konto zu erstellen.",
|
"inviteOnlyDesc": "Die Registrierung ist derzeit eingeschränkt. Sie benötigen einen Einladungslink von einem Administrator, um ein Konto zu erstellen.",
|
||||||
@@ -99,31 +101,33 @@
|
|||||||
"oauthError": "Anmeldung fehlgeschlagen",
|
"oauthError": "Anmeldung fehlgeschlagen",
|
||||||
"oauthNoToken": "Kein Authentifizierungstoken erhalten.",
|
"oauthNoToken": "Kein Authentifizierungstoken erhalten.",
|
||||||
"oauthLoginFailed": "Anmeldung konnte nicht abgeschlossen werden. Bitte versuche es erneut.",
|
"oauthLoginFailed": "Anmeldung konnte nicht abgeschlossen werden. Bitte versuche es erneut.",
|
||||||
"oauthRedirecting": "Du wirst angemeldet..."
|
"oauthRedirecting": "Du wirst angemeldet...",
|
||||||
|
"2fa": {
|
||||||
|
"title": "Zwei-Faktor-Authentifizierung",
|
||||||
|
"prompt": "Gib den 6-stelligen Code aus deiner Authenticator-App ein.",
|
||||||
|
"codeLabel": "Bestätigungscode",
|
||||||
|
"verify": "Bestätigen",
|
||||||
|
"verifyFailed": "Überprüfung fehlgeschlagen",
|
||||||
|
"backToLogin": "← Zurück zum Login"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"home": {
|
"home": {
|
||||||
"madeFor": "Made for BigBlueButton",
|
"heroTitle": "Selbst gehostetes Frontend für BigBlueButton",
|
||||||
"heroTitle": "Meetings neu ",
|
"heroSubtitle": "Redlight verwaltet Räume, Aufnahmen und Termine für deinen BigBlueButton-Server – mit Federation zwischen Instanzen, CalDAV-Sync und SSO-Anbindung.",
|
||||||
"heroTitleHighlight": "definiert",
|
"getStarted": "Konto erstellen",
|
||||||
"heroSubtitle": "Das moderne, selbst gehostete BigBlueButton-Frontend. Erstellen Sie Räume, verwalten Sie Aufnahmen und genießen Sie ein wunderschönes Interface mit über 15 Themes.",
|
"features": "Funktionen",
|
||||||
"getStarted": "Jetzt starten",
|
|
||||||
"features": "Alles was Sie brauchen",
|
|
||||||
"featuresSubtitle": "Redlight bietet alle Funktionen, die Sie für professionelle Videokonferenzen benötigen.",
|
|
||||||
"featureVideoTitle": "Videokonferenzen",
|
|
||||||
"featureVideoDesc": "Erstellen und verwalten Sie Meetings direkt über BigBlueButton.",
|
|
||||||
"featureRoomsTitle": "Raumverwaltung",
|
"featureRoomsTitle": "Raumverwaltung",
|
||||||
"featureRoomsDesc": "Unbegrenzte Räume mit individuellen Einstellungen und Zugangscodes.",
|
"featureRoomsDesc": "Räume mit eigenen Einstellungen, Zugangscodes und geteiltem Zugriff für Kolleginnen und Kollegen.",
|
||||||
"featureUsersTitle": "Benutzerverwaltung",
|
|
||||||
"featureUsersDesc": "Registrierung, Login und Rollenverwaltung für Ihre Organisation.",
|
|
||||||
"featureThemesTitle": "15+ Themes",
|
|
||||||
"featureThemesDesc": "Dracula, Nord, Catppuccin, Rosé Pine, Gruvbox und viele mehr.",
|
|
||||||
"featureRecordingsTitle": "Aufnahmen",
|
"featureRecordingsTitle": "Aufnahmen",
|
||||||
"featureRecordingsDesc": "Alle Aufnahmen pro Raum einsehen, veröffentlichen oder löschen.",
|
"featureRecordingsDesc": "Aufnahmen pro Raum einsehen, veröffentlichen oder löschen.",
|
||||||
"featureOpenSourceTitle": "Open Source",
|
"featureFederationTitle": "Federation",
|
||||||
"featureOpenSourceDesc": "Vollständig quelloffen und selbst gehostet. Ihre Daten bleiben bei Ihnen.",
|
"featureFederationDesc": "Nutzer anderer Redlight-Instanzen einladen und instanzübergreifende Einladungen annehmen.",
|
||||||
"statThemes": "Themes",
|
"featureCalendarTitle": "Kalender",
|
||||||
"statRooms": "Räume",
|
"featureCalendarDesc": "Meetings planen, per CalDAV mit Thunderbird, Apple Calendar oder DAVx⁵ synchronisieren, Erinnerungen erhalten.",
|
||||||
"statOpenSource": "Open Source",
|
"featureVideoTitle": "Videokonferenzen",
|
||||||
|
"featureVideoDesc": "Meetings direkt über BigBlueButton erstellen, starten und verwalten.",
|
||||||
|
"featureAnalyticsTitle": "Learning Analytics",
|
||||||
|
"featureAnalyticsDesc": "Teilnahme- und Aktivitätsdaten aus Meetings einsehen und als CSV, Excel oder PDF exportieren.",
|
||||||
"footer": "© {year} Redlight. Ein Open-Source BigBlueButton Frontend."
|
"footer": "© {year} Redlight. Ein Open-Source BigBlueButton Frontend."
|
||||||
},
|
},
|
||||||
"dashboard": {
|
"dashboard": {
|
||||||
@@ -144,7 +148,7 @@
|
|||||||
"accessCode": "Zugangscode",
|
"accessCode": "Zugangscode",
|
||||||
"muteOnJoin": "Teilnehmer beim Beitritt stummschalten",
|
"muteOnJoin": "Teilnehmer beim Beitritt stummschalten",
|
||||||
"allowRecording": "Aufnahme erlauben",
|
"allowRecording": "Aufnahme erlauben",
|
||||||
"roomCreated": "Raum erstellt!",
|
"roomCreated": "Raum erstellt",
|
||||||
"roomCreateFailed": "Raum konnte nicht erstellt werden",
|
"roomCreateFailed": "Raum konnte nicht erstellt werden",
|
||||||
"roomDeleted": "Raum gelöscht",
|
"roomDeleted": "Raum gelöscht",
|
||||||
"roomDeleteFailed": "Raum konnte nicht gelöscht werden",
|
"roomDeleteFailed": "Raum konnte nicht gelöscht werden",
|
||||||
@@ -168,7 +172,7 @@
|
|||||||
"copyLink": "Link kopieren",
|
"copyLink": "Link kopieren",
|
||||||
"copyRoomLink": "Raum-Link",
|
"copyRoomLink": "Raum-Link",
|
||||||
"copyGuestLink": "Gast-Link",
|
"copyGuestLink": "Gast-Link",
|
||||||
"linkCopied": "Link kopiert!",
|
"linkCopied": "Link kopiert",
|
||||||
"meetingDetails": "Meeting-Details",
|
"meetingDetails": "Meeting-Details",
|
||||||
"meetingId": "Meeting ID",
|
"meetingId": "Meeting ID",
|
||||||
"status": "Status",
|
"status": "Status",
|
||||||
@@ -193,7 +197,7 @@
|
|||||||
"emptyNoCode": "Leer = kein Code",
|
"emptyNoCode": "Leer = kein Code",
|
||||||
"settingsSaved": "Einstellungen gespeichert",
|
"settingsSaved": "Einstellungen gespeichert",
|
||||||
"settingsSaveFailed": "Einstellungen konnten nicht gespeichert werden",
|
"settingsSaveFailed": "Einstellungen konnten nicht gespeichert werden",
|
||||||
"meetingStarted": "Meeting gestartet!",
|
"meetingStarted": "Meeting gestartet",
|
||||||
"meetingStartFailed": "Meeting konnte nicht gestartet werden",
|
"meetingStartFailed": "Meeting konnte nicht gestartet werden",
|
||||||
"meetingEnded": "Meeting beendet",
|
"meetingEnded": "Meeting beendet",
|
||||||
"meetingEndFailed": "Meeting konnte nicht beendet werden",
|
"meetingEndFailed": "Meeting konnte nicht beendet werden",
|
||||||
@@ -208,7 +212,7 @@
|
|||||||
"moderatorCodeHint": "Optionaler Code für Moderator-Rechte",
|
"moderatorCodeHint": "Optionaler Code für Moderator-Rechte",
|
||||||
"moderatorCodeDesc": "Gäste, die diesen Code eingeben, erhalten Moderator-Rechte.",
|
"moderatorCodeDesc": "Gäste, die diesen Code eingeben, erhalten Moderator-Rechte.",
|
||||||
"guestLink": "Gast-Einladungslink",
|
"guestLink": "Gast-Einladungslink",
|
||||||
"guestLinkCopied": "Gast-Link kopiert!",
|
"guestLinkCopied": "Gast-Link kopiert",
|
||||||
"guestJoinTitle": "Meeting beitreten",
|
"guestJoinTitle": "Meeting beitreten",
|
||||||
"guestCreatedBy": "Erstellt von",
|
"guestCreatedBy": "Erstellt von",
|
||||||
"guestMeetingRunning": "Meeting läuft",
|
"guestMeetingRunning": "Meeting läuft",
|
||||||
@@ -258,7 +262,11 @@
|
|||||||
"defaultWelcome": "Willkommen zum Meeting!",
|
"defaultWelcome": "Willkommen zum Meeting!",
|
||||||
"analytics": "Lernanalyse",
|
"analytics": "Lernanalyse",
|
||||||
"enableAnalytics": "Lernanalyse aktivieren",
|
"enableAnalytics": "Lernanalyse aktivieren",
|
||||||
"enableAnalyticsHint": "Sammelt Engagement-Daten der Teilnehmer nach jedem Meeting."
|
"enableAnalyticsHint": "Sammelt Engagement-Daten der Teilnehmer nach jedem Meeting.",
|
||||||
|
"analyticsVisibility": "Wer kann die Analyse sehen?",
|
||||||
|
"analyticsOwnerOnly": "Nur Raumbesitzer",
|
||||||
|
"analyticsSharedUsers": "Alle geteilten Benutzer",
|
||||||
|
"analyticsVisibilityHint": "Legt fest, wer die Analysedaten dieses Raums einsehen und exportieren kann."
|
||||||
},
|
},
|
||||||
"recordings": {
|
"recordings": {
|
||||||
"title": "Aufnahmen",
|
"title": "Aufnahmen",
|
||||||
@@ -295,7 +303,10 @@
|
|||||||
"duration": "Dauer",
|
"duration": "Dauer",
|
||||||
"meetingDuration": "Meeting-Dauer",
|
"meetingDuration": "Meeting-Dauer",
|
||||||
"raiseHand": "Handheben",
|
"raiseHand": "Handheben",
|
||||||
"reactions": "Reaktionen"
|
"reactions": "Reaktionen",
|
||||||
|
"export": "Herunterladen",
|
||||||
|
"exportSuccess": "Download gestartet",
|
||||||
|
"exportFailed": "Fehler beim Herunterladen"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"title": "Einstellungen",
|
"title": "Einstellungen",
|
||||||
@@ -327,6 +338,26 @@
|
|||||||
"passwordChangeFailed": "Fehler beim Ändern",
|
"passwordChangeFailed": "Fehler beim Ändern",
|
||||||
"passwordMismatch": "Passwörter stimmen nicht überein",
|
"passwordMismatch": "Passwörter stimmen nicht überein",
|
||||||
"selectLanguage": "Sprache auswählen",
|
"selectLanguage": "Sprache auswählen",
|
||||||
|
"security": {
|
||||||
|
"title": "Sicherheit",
|
||||||
|
"subtitle": "Schütze dein Konto mit Zwei-Faktor-Authentifizierung (2FA). Nach der Aktivierung benötigst du sowohl dein Passwort als auch einen Code aus deiner Authenticator-App zum Anmelden.",
|
||||||
|
"statusEnabled": "2FA ist aktiviert",
|
||||||
|
"statusEnabledDesc": "Dein Konto ist durch Zwei-Faktor-Authentifizierung geschützt.",
|
||||||
|
"statusDisabled": "2FA ist nicht aktiviert",
|
||||||
|
"statusDisabledDesc": "Aktiviere die Zwei-Faktor-Authentifizierung für zusätzliche Sicherheit.",
|
||||||
|
"enable": "2FA aktivieren",
|
||||||
|
"disable": "2FA deaktivieren",
|
||||||
|
"enabled": "Zwei-Faktor-Authentifizierung aktiviert",
|
||||||
|
"disabled": "Zwei-Faktor-Authentifizierung deaktiviert.",
|
||||||
|
"enableFailed": "2FA konnte nicht aktiviert werden",
|
||||||
|
"disableFailed": "2FA konnte nicht deaktiviert werden",
|
||||||
|
"setupFailed": "2FA-Einrichtung konnte nicht gestartet werden",
|
||||||
|
"scanQR": "Scanne diesen QR-Code mit deiner Authenticator-App (Google Authenticator, Authy, etc.).",
|
||||||
|
"manualKey": "Oder gib diesen Schlüssel manuell ein:",
|
||||||
|
"verifyCode": "Gib den Code aus deiner App zur Überprüfung ein",
|
||||||
|
"codeLabel": "6-stelliger Code",
|
||||||
|
"disableConfirm": "Gib dein Passwort und einen aktuellen 2FA-Code ein, um die Zwei-Faktor-Authentifizierung zu deaktivieren."
|
||||||
|
},
|
||||||
"caldav": {
|
"caldav": {
|
||||||
"title": "CalDAV",
|
"title": "CalDAV",
|
||||||
"subtitle": "Verbinde deine Kalender-App (z. B. Apple Kalender, Thunderbird, DAVx⁵) über das CalDAV-Protokoll. Verwende deine E-Mail-Adresse und ein App-Token als Passwort.",
|
"subtitle": "Verbinde deine Kalender-App (z. B. Apple Kalender, Thunderbird, DAVx⁵) über das CalDAV-Protokoll. Verwende deine E-Mail-Adresse und ein App-Token als Passwort.",
|
||||||
@@ -345,7 +376,7 @@
|
|||||||
"revoked": "Token widerrufen",
|
"revoked": "Token widerrufen",
|
||||||
"revokeFailed": "Token konnte nicht widerrufen werden",
|
"revokeFailed": "Token konnte nicht widerrufen werden",
|
||||||
"createFailed": "Token konnte nicht erstellt werden",
|
"createFailed": "Token konnte nicht erstellt werden",
|
||||||
"newTokenCreated": "Token erstellt — jetzt kopieren!",
|
"newTokenCreated": "Token erstellt — jetzt kopieren",
|
||||||
"newTokenHint": "Dieses Token wird nur einmal angezeigt. Kopiere es und trage es als Passwort in deiner Kalender-App ein.",
|
"newTokenHint": "Dieses Token wird nur einmal angezeigt. Kopiere es und trage es als Passwort in deiner Kalender-App ein.",
|
||||||
"dismiss": "Ich habe das Token kopiert"
|
"dismiss": "Ich habe das Token kopiert"
|
||||||
}
|
}
|
||||||
@@ -413,11 +444,11 @@
|
|||||||
"inviteTitle": "Benutzer-Einladungen",
|
"inviteTitle": "Benutzer-Einladungen",
|
||||||
"inviteDescription": "Laden Sie neue Benutzer per E-Mail ein. Sie erhalten einen Registrierungslink, der 7 Tage gültig ist.",
|
"inviteDescription": "Laden Sie neue Benutzer per E-Mail ein. Sie erhalten einen Registrierungslink, der 7 Tage gültig ist.",
|
||||||
"sendInvite": "Einladung senden",
|
"sendInvite": "Einladung senden",
|
||||||
"inviteSent": "Einladung gesendet!",
|
"inviteSent": "Einladung gesendet",
|
||||||
"inviteFailed": "Einladung konnte nicht gesendet werden",
|
"inviteFailed": "Einladung konnte nicht gesendet werden",
|
||||||
"inviteDeleted": "Einladung gelöscht",
|
"inviteDeleted": "Einladung gelöscht",
|
||||||
"inviteDeleteFailed": "Einladung konnte nicht gelöscht werden",
|
"inviteDeleteFailed": "Einladung konnte nicht gelöscht werden",
|
||||||
"inviteLinkCopied": "Einladungslink kopiert!",
|
"inviteLinkCopied": "Einladungslink kopiert",
|
||||||
"copyInviteLink": "Einladungslink kopieren",
|
"copyInviteLink": "Einladungslink kopieren",
|
||||||
"inviteExpired": "Abgelaufen",
|
"inviteExpired": "Abgelaufen",
|
||||||
"inviteUsedBy": "Verwendet von",
|
"inviteUsedBy": "Verwendet von",
|
||||||
@@ -449,7 +480,21 @@
|
|||||||
"oauthRemoveConfirm": "OAuth-Konfiguration wirklich entfernen? Benutzer können sich dann nicht mehr per SSO anmelden.",
|
"oauthRemoveConfirm": "OAuth-Konfiguration wirklich entfernen? Benutzer können sich dann nicht mehr per SSO anmelden.",
|
||||||
"oauthNotConfigured": "OAuth ist noch nicht konfiguriert.",
|
"oauthNotConfigured": "OAuth ist noch nicht konfiguriert.",
|
||||||
"oauthSave": "OAuth speichern",
|
"oauthSave": "OAuth speichern",
|
||||||
"oauthRemove": "OAuth entfernen"
|
"oauthRemove": "OAuth entfernen",
|
||||||
|
"roomsTitle": "Raumverwaltung",
|
||||||
|
"roomsDescription": "Alle Räume der Instanz einsehen, verwalten und bei Bedarf löschen.",
|
||||||
|
"searchRooms": "Räume suchen...",
|
||||||
|
"roomName": "Name",
|
||||||
|
"roomOwner": "Besitzer",
|
||||||
|
"roomShares": "Geteilt",
|
||||||
|
"roomCreated": "Erstellt",
|
||||||
|
"roomView": "Raum öffnen",
|
||||||
|
"deleteRoom": "Raum löschen",
|
||||||
|
"deleteRoomConfirm": "Raum \"{name}\" wirklich löschen? Dies kann nicht rückgängig gemacht werden.",
|
||||||
|
"roomDeleted": "Raum gelöscht",
|
||||||
|
"roomDeleteFailed": "Raum konnte nicht gelöscht werden",
|
||||||
|
"noRoomsFound": "Keine Räume vorhanden",
|
||||||
|
"showAllRooms": "Alle {count} Räume anzeigen"
|
||||||
},
|
},
|
||||||
"notifications": {
|
"notifications": {
|
||||||
"bell": "Benachrichtigungen",
|
"bell": "Benachrichtigungen",
|
||||||
@@ -465,14 +510,19 @@
|
|||||||
"inbox": "Einladungen",
|
"inbox": "Einladungen",
|
||||||
"inboxSubtitle": "Meeting-Einladungen von anderen Redlight-Instanzen",
|
"inboxSubtitle": "Meeting-Einladungen von anderen Redlight-Instanzen",
|
||||||
"inviteTitle": "Remote-Benutzer einladen",
|
"inviteTitle": "Remote-Benutzer einladen",
|
||||||
"inviteSubtitle": "Einen Benutzer von einer anderen Redlight-Instanz zu diesem Meeting einladen.",
|
"inviteSubtitle": "Du kannst entweder einen Benutzer von einer anderen Redlight-Instanz über seine Adresse einladen oder direkt eine E-Mail-Einladung senden. Es kann nur eine Option gleichzeitig verwendet werden.",
|
||||||
"addressLabel": "Benutzeradresse",
|
"addressLabel": "Benutzeradresse",
|
||||||
"addressPlaceholder": "@benutzer@andere-instanz.com",
|
"addressPlaceholder": "@benutzer@andere-instanz.com",
|
||||||
"addressHint": "Format: @Benutzername@Domain der Redlight-Instanz",
|
"addressHint": "Format: @Benutzername@Domain der Redlight-Instanz",
|
||||||
|
"emailLabel": "Per E-Mail einladen",
|
||||||
|
"emailPlaceholder": "name@beispiel.de, name2@beispiel.de",
|
||||||
|
"emailHint": "Eine oder mehrere E-Mail-Adressen, durch Komma getrennt",
|
||||||
"messageLabel": "Nachricht (optional)",
|
"messageLabel": "Nachricht (optional)",
|
||||||
"messagePlaceholder": "Hallo, ich lade dich zu unserem Meeting ein!",
|
"messagePlaceholder": "Hallo, ich lade dich zu unserem Meeting ein!",
|
||||||
"send": "Einladung senden",
|
"send": "Einladung senden",
|
||||||
"sent": "Einladung gesendet!",
|
"sent": "Einladung gesendet",
|
||||||
|
"emailSent": "E-Mail-Einladung(en) gesendet",
|
||||||
|
"emailSendFailed": "E-Mail-Einladung konnte nicht gesendet werden",
|
||||||
"sendFailed": "Einladung konnte nicht gesendet werden",
|
"sendFailed": "Einladung konnte nicht gesendet werden",
|
||||||
"from": "Von",
|
"from": "Von",
|
||||||
"accept": "Annehmen",
|
"accept": "Annehmen",
|
||||||
@@ -497,7 +547,7 @@
|
|||||||
"removeRoomConfirm": "Raum wirklich entfernen?",
|
"removeRoomConfirm": "Raum wirklich entfernen?",
|
||||||
"roomRemoved": "Raum entfernt",
|
"roomRemoved": "Raum entfernt",
|
||||||
"roomRemoveFailed": "Raum konnte nicht entfernt werden",
|
"roomRemoveFailed": "Raum konnte nicht entfernt werden",
|
||||||
"acceptedSaved": "Einladung angenommen - Raum wurde in deinem Dashboard gespeichert!",
|
"acceptedSaved": "Einladung angenommen - Raum wurde in deinem Dashboard gespeichert",
|
||||||
"meetingId": "Meeting ID",
|
"meetingId": "Meeting ID",
|
||||||
"maxParticipants": "Max. Teilnehmer",
|
"maxParticipants": "Max. Teilnehmer",
|
||||||
"recordingOn": "Aufnahme aktiviert",
|
"recordingOn": "Aufnahme aktiviert",
|
||||||
@@ -513,9 +563,9 @@
|
|||||||
"roomDeleted": "Gelöscht",
|
"roomDeleted": "Gelöscht",
|
||||||
"roomDeletedNotice": "Dieser Raum wurde vom Besitzer auf der Ursprungsinstanz gelöscht und ist nicht mehr verfügbar.",
|
"roomDeletedNotice": "Dieser Raum wurde vom Besitzer auf der Ursprungsinstanz gelöscht und ist nicht mehr verfügbar.",
|
||||||
"calendarEvent": "Kalendereinladung",
|
"calendarEvent": "Kalendereinladung",
|
||||||
"calendarAccepted": "Kalender-Event angenommen und in deinen Kalender eingetragen!",
|
"calendarAccepted": "Kalender-Event angenommen und in deinen Kalender eingetragen",
|
||||||
"localCalendarEvent": "Lokale Kalendereinladung",
|
"localCalendarEvent": "Lokale Kalendereinladung",
|
||||||
"calendarLocalAccepted": "Einladung angenommen - Event wurde in deinen Kalender eingetragen!",
|
"calendarLocalAccepted": "Einladung angenommen - Event wurde in deinen Kalender eingetragen",
|
||||||
"invitationRemoved": "Einladung entfernt",
|
"invitationRemoved": "Einladung entfernt",
|
||||||
"removeInvitation": "Einladung entfernen"
|
"removeInvitation": "Einladung entfernen"
|
||||||
},
|
},
|
||||||
@@ -544,8 +594,8 @@
|
|||||||
"reminder1440": "1 Tag vorher",
|
"reminder1440": "1 Tag vorher",
|
||||||
"timezone": "Zeitzone",
|
"timezone": "Zeitzone",
|
||||||
"color": "Farbe",
|
"color": "Farbe",
|
||||||
"eventCreated": "Event erstellt!",
|
"eventCreated": "Event erstellt",
|
||||||
"eventUpdated": "Event aktualisiert!",
|
"eventUpdated": "Event aktualisiert",
|
||||||
"eventDeleted": "Event gelöscht",
|
"eventDeleted": "Event gelöscht",
|
||||||
"saveFailed": "Event konnte nicht gespeichert werden",
|
"saveFailed": "Event konnte nicht gespeichert werden",
|
||||||
"deleteFailed": "Event konnte nicht gelöscht werden",
|
"deleteFailed": "Event konnte nicht gelöscht werden",
|
||||||
@@ -572,7 +622,7 @@
|
|||||||
"shareAdded": "Benutzer zum Event hinzugefügt",
|
"shareAdded": "Benutzer zum Event hinzugefügt",
|
||||||
"shareRemoved": "Freigabe entfernt",
|
"shareRemoved": "Freigabe entfernt",
|
||||||
"shareFailed": "Event konnte nicht geteilt werden",
|
"shareFailed": "Event konnte nicht geteilt werden",
|
||||||
"invitationSent": "Einladung gesendet!",
|
"invitationSent": "Einladung gesendet",
|
||||||
"invitationCancelled": "Einladung widerrufen",
|
"invitationCancelled": "Einladung widerrufen",
|
||||||
"invitationPending": "Einladung ausstehend",
|
"invitationPending": "Einladung ausstehend",
|
||||||
"pendingInvitations": "Ausstehende Einladungen",
|
"pendingInvitations": "Ausstehende Einladungen",
|
||||||
|
|||||||
+96
-46
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"common": {
|
"common": {
|
||||||
"appName": "Redlight",
|
"appName": "Redlight",
|
||||||
"loading": "Loading...",
|
"loading": "Loading...",
|
||||||
@@ -23,7 +23,9 @@
|
|||||||
"protected": "Protected",
|
"protected": "Protected",
|
||||||
"live": "Live",
|
"live": "Live",
|
||||||
"error": "Error",
|
"error": "Error",
|
||||||
"success": "Success"
|
"success": "Success",
|
||||||
|
"gridView": "Grid view",
|
||||||
|
"listView": "List view"
|
||||||
},
|
},
|
||||||
"nav": {
|
"nav": {
|
||||||
"dashboard": "Dashboard",
|
"dashboard": "Dashboard",
|
||||||
@@ -62,16 +64,16 @@
|
|||||||
"passwordMismatch": "Passwords do not match",
|
"passwordMismatch": "Passwords do not match",
|
||||||
"passwordTooShort": "Password must be at least 6 characters",
|
"passwordTooShort": "Password must be at least 6 characters",
|
||||||
"loginSuccess": "Welcome back!",
|
"loginSuccess": "Welcome back!",
|
||||||
"registerSuccess": "Registration successful!",
|
"registerSuccess": "Registration successful",
|
||||||
"loginFailed": "Login failed",
|
"loginFailed": "Login failed",
|
||||||
"registerFailed": "Registration failed",
|
"registerFailed": "Registration failed",
|
||||||
"allFieldsRequired": "All fields are required",
|
"allFieldsRequired": "All fields are required",
|
||||||
"verificationSent": "Verification email sent!",
|
"verificationSent": "Verification email sent",
|
||||||
"verificationSentDesc": "We've sent you an email with a verification link. Please click the link to activate your account.",
|
"verificationSentDesc": "We've sent you an email with a verification link. Please click the link to activate your account.",
|
||||||
"checkYourEmail": "Check your inbox",
|
"checkYourEmail": "Check your inbox",
|
||||||
"verifying": "Verifying your email...",
|
"verifying": "Verifying your email...",
|
||||||
"verifySuccess": "Your email has been verified successfully. You can now sign in.",
|
"verifySuccess": "Your email has been verified successfully. You can now sign in.",
|
||||||
"verifySuccessTitle": "Email verified!",
|
"verifySuccessTitle": "Email verified",
|
||||||
"verifyFailed": "Verification failed",
|
"verifyFailed": "Verification failed",
|
||||||
"verifyFailedTitle": "Verification failed",
|
"verifyFailedTitle": "Verification failed",
|
||||||
"verifyTokenMissing": "No verification token provided.",
|
"verifyTokenMissing": "No verification token provided.",
|
||||||
@@ -88,7 +90,7 @@
|
|||||||
"emailVerificationBanner": "Your email address has not been verified yet.",
|
"emailVerificationBanner": "Your email address has not been verified yet.",
|
||||||
"emailVerificationResend": "Click here to receive a new verification email",
|
"emailVerificationResend": "Click here to receive a new verification email",
|
||||||
"emailVerificationResendCooldown": "Resend in {seconds}s",
|
"emailVerificationResendCooldown": "Resend in {seconds}s",
|
||||||
"emailVerificationResendSuccess": "Verification email sent!",
|
"emailVerificationResendSuccess": "Verification email sent",
|
||||||
"emailVerificationResendFailed": "Could not send verification email",
|
"emailVerificationResendFailed": "Could not send verification email",
|
||||||
"inviteOnly": "Invite Only",
|
"inviteOnly": "Invite Only",
|
||||||
"inviteOnlyDesc": "Registration is currently restricted. You need an invitation link from an administrator to create an account.",
|
"inviteOnlyDesc": "Registration is currently restricted. You need an invitation link from an administrator to create an account.",
|
||||||
@@ -99,31 +101,33 @@
|
|||||||
"oauthError": "Authentication failed",
|
"oauthError": "Authentication failed",
|
||||||
"oauthNoToken": "No authentication token received.",
|
"oauthNoToken": "No authentication token received.",
|
||||||
"oauthLoginFailed": "Could not complete sign in. Please try again.",
|
"oauthLoginFailed": "Could not complete sign in. Please try again.",
|
||||||
"oauthRedirecting": "Signing you in..."
|
"oauthRedirecting": "Signing you in...",
|
||||||
|
"2fa": {
|
||||||
|
"title": "Two-Factor Authentication",
|
||||||
|
"prompt": "Enter the 6-digit code from your authenticator app.",
|
||||||
|
"codeLabel": "Verification code",
|
||||||
|
"verify": "Verify",
|
||||||
|
"verifyFailed": "Verification failed",
|
||||||
|
"backToLogin": "← Back to login"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"home": {
|
"home": {
|
||||||
"madeFor": "Made for BigBlueButton",
|
"heroTitle": "Self-hosted frontend for BigBlueButton",
|
||||||
"heroTitle": "Meetings re",
|
"heroSubtitle": "Redlight manages rooms, recordings and scheduling for your BigBlueButton server – with federation between instances, CalDAV sync and SSO support.",
|
||||||
"heroTitleHighlight": "defined",
|
"getStarted": "Create account",
|
||||||
"heroSubtitle": "The modern, self-hosted BigBlueButton frontend. Create rooms, manage recordings and enjoy a beautiful interface with over 15 themes.",
|
"features": "Features",
|
||||||
"getStarted": "Get started",
|
"featureRoomsTitle": "Room management",
|
||||||
"features": "Everything you need",
|
"featureRoomsDesc": "Rooms with individual settings, access codes and shared access for colleagues.",
|
||||||
"featuresSubtitle": "Redlight provides all the features you need for professional video conferencing.",
|
|
||||||
"featureVideoTitle": "Video Conferencing",
|
|
||||||
"featureVideoDesc": "Create and manage meetings directly via BigBlueButton.",
|
|
||||||
"featureRoomsTitle": "Room Management",
|
|
||||||
"featureRoomsDesc": "Unlimited rooms with individual settings and access codes.",
|
|
||||||
"featureUsersTitle": "User Management",
|
|
||||||
"featureUsersDesc": "Registration, login and role management for your organization.",
|
|
||||||
"featureThemesTitle": "15+ Themes",
|
|
||||||
"featureThemesDesc": "Dracula, Nord, Catppuccin, Rosé Pine, Gruvbox and many more.",
|
|
||||||
"featureRecordingsTitle": "Recordings",
|
"featureRecordingsTitle": "Recordings",
|
||||||
"featureRecordingsDesc": "View, publish or delete all recordings per room.",
|
"featureRecordingsDesc": "View, publish or delete recordings per room.",
|
||||||
"featureOpenSourceTitle": "Open Source",
|
"featureFederationTitle": "Federation",
|
||||||
"featureOpenSourceDesc": "Fully open source and self-hosted. Your data stays with you.",
|
"featureFederationDesc": "Invite users from other Redlight instances and accept cross-instance invitations.",
|
||||||
"statThemes": "Themes",
|
"featureCalendarTitle": "Calendar",
|
||||||
"statRooms": "Rooms",
|
"featureCalendarDesc": "Schedule meetings, sync via CalDAV with Thunderbird, Apple Calendar or DAVx⁵, get reminders.",
|
||||||
"statOpenSource": "Open Source",
|
"featureVideoTitle": "Video conferencing",
|
||||||
|
"featureVideoDesc": "Create, start and manage meetings directly via BigBlueButton.",
|
||||||
|
"featureAnalyticsTitle": "Learning analytics",
|
||||||
|
"featureAnalyticsDesc": "Review attendance and activity data from meetings and export it as CSV, Excel or PDF.",
|
||||||
"footer": "© {year} Redlight. An open source BigBlueButton frontend."
|
"footer": "© {year} Redlight. An open source BigBlueButton frontend."
|
||||||
},
|
},
|
||||||
"dashboard": {
|
"dashboard": {
|
||||||
@@ -144,7 +148,7 @@
|
|||||||
"accessCode": "Access code",
|
"accessCode": "Access code",
|
||||||
"muteOnJoin": "Mute participants on join",
|
"muteOnJoin": "Mute participants on join",
|
||||||
"allowRecording": "Allow recording",
|
"allowRecording": "Allow recording",
|
||||||
"roomCreated": "Room created!",
|
"roomCreated": "Room created",
|
||||||
"roomCreateFailed": "Room could not be created",
|
"roomCreateFailed": "Room could not be created",
|
||||||
"roomDeleted": "Room deleted",
|
"roomDeleted": "Room deleted",
|
||||||
"roomDeleteFailed": "Room could not be deleted",
|
"roomDeleteFailed": "Room could not be deleted",
|
||||||
@@ -168,7 +172,7 @@
|
|||||||
"copyLink": "Copy link",
|
"copyLink": "Copy link",
|
||||||
"copyRoomLink": "Room Link",
|
"copyRoomLink": "Room Link",
|
||||||
"copyGuestLink": "Guest Link",
|
"copyGuestLink": "Guest Link",
|
||||||
"linkCopied": "Link copied!",
|
"linkCopied": "Link copied",
|
||||||
"meetingDetails": "Meeting details",
|
"meetingDetails": "Meeting details",
|
||||||
"meetingId": "Meeting ID",
|
"meetingId": "Meeting ID",
|
||||||
"status": "Status",
|
"status": "Status",
|
||||||
@@ -193,7 +197,7 @@
|
|||||||
"emptyNoCode": "Empty = no code",
|
"emptyNoCode": "Empty = no code",
|
||||||
"settingsSaved": "Settings saved",
|
"settingsSaved": "Settings saved",
|
||||||
"settingsSaveFailed": "Settings could not be saved",
|
"settingsSaveFailed": "Settings could not be saved",
|
||||||
"meetingStarted": "Meeting started!",
|
"meetingStarted": "Meeting started",
|
||||||
"meetingStartFailed": "Meeting could not be started",
|
"meetingStartFailed": "Meeting could not be started",
|
||||||
"meetingEnded": "Meeting ended",
|
"meetingEnded": "Meeting ended",
|
||||||
"meetingEndFailed": "Meeting could not be ended",
|
"meetingEndFailed": "Meeting could not be ended",
|
||||||
@@ -208,7 +212,7 @@
|
|||||||
"moderatorCodeHint": "Optional code for moderator rights",
|
"moderatorCodeHint": "Optional code for moderator rights",
|
||||||
"moderatorCodeDesc": "Guests who enter this code will receive moderator rights.",
|
"moderatorCodeDesc": "Guests who enter this code will receive moderator rights.",
|
||||||
"guestLink": "Guest Invite Link",
|
"guestLink": "Guest Invite Link",
|
||||||
"guestLinkCopied": "Guest link copied!",
|
"guestLinkCopied": "Guest link copied",
|
||||||
"guestJoinTitle": "Join Meeting",
|
"guestJoinTitle": "Join Meeting",
|
||||||
"guestCreatedBy": "Created by",
|
"guestCreatedBy": "Created by",
|
||||||
"guestMeetingRunning": "Meeting in progress",
|
"guestMeetingRunning": "Meeting in progress",
|
||||||
@@ -258,7 +262,11 @@
|
|||||||
"defaultWelcome": "Welcome to the meeting!",
|
"defaultWelcome": "Welcome to the meeting!",
|
||||||
"analytics": "Learning Analytics",
|
"analytics": "Learning Analytics",
|
||||||
"enableAnalytics": "Enable learning analytics",
|
"enableAnalytics": "Enable learning analytics",
|
||||||
"enableAnalyticsHint": "Collects participant engagement data after each meeting."
|
"enableAnalyticsHint": "Collects participant engagement data after each meeting.",
|
||||||
|
"analyticsVisibility": "Who can see analytics?",
|
||||||
|
"analyticsOwnerOnly": "Room owner only",
|
||||||
|
"analyticsSharedUsers": "All shared users",
|
||||||
|
"analyticsVisibilityHint": "Controls who can view and export analytics data for this room."
|
||||||
},
|
},
|
||||||
"recordings": {
|
"recordings": {
|
||||||
"title": "Recordings",
|
"title": "Recordings",
|
||||||
@@ -295,7 +303,10 @@
|
|||||||
"duration": "Duration",
|
"duration": "Duration",
|
||||||
"meetingDuration": "Meeting duration",
|
"meetingDuration": "Meeting duration",
|
||||||
"raiseHand": "Raise hand",
|
"raiseHand": "Raise hand",
|
||||||
"reactions": "Reactions"
|
"reactions": "Reactions",
|
||||||
|
"export": "Download",
|
||||||
|
"exportSuccess": "Download started",
|
||||||
|
"exportFailed": "Error downloading data"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"title": "Settings",
|
"title": "Settings",
|
||||||
@@ -327,6 +338,26 @@
|
|||||||
"passwordChangeFailed": "Error changing password",
|
"passwordChangeFailed": "Error changing password",
|
||||||
"passwordMismatch": "Passwords do not match",
|
"passwordMismatch": "Passwords do not match",
|
||||||
"selectLanguage": "Select language",
|
"selectLanguage": "Select language",
|
||||||
|
"security": {
|
||||||
|
"title": "Security",
|
||||||
|
"subtitle": "Protect your account with two-factor authentication (2FA). After enabling, you will need both your password and a code from your authenticator app to sign in.",
|
||||||
|
"statusEnabled": "2FA is enabled",
|
||||||
|
"statusEnabledDesc": "Your account is protected with two-factor authentication.",
|
||||||
|
"statusDisabled": "2FA is not enabled",
|
||||||
|
"statusDisabledDesc": "Enable two-factor authentication for an extra layer of security.",
|
||||||
|
"enable": "Enable 2FA",
|
||||||
|
"disable": "Disable 2FA",
|
||||||
|
"enabled": "Two-factor authentication enabled",
|
||||||
|
"disabled": "Two-factor authentication disabled.",
|
||||||
|
"enableFailed": "Could not enable 2FA",
|
||||||
|
"disableFailed": "Could not disable 2FA",
|
||||||
|
"setupFailed": "Could not start 2FA setup",
|
||||||
|
"scanQR": "Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.).",
|
||||||
|
"manualKey": "Or enter this key manually:",
|
||||||
|
"verifyCode": "Enter the code from your app to verify",
|
||||||
|
"codeLabel": "6-digit code",
|
||||||
|
"disableConfirm": "Enter your password and a current 2FA code to disable two-factor authentication."
|
||||||
|
},
|
||||||
"caldav": {
|
"caldav": {
|
||||||
"title": "CalDAV",
|
"title": "CalDAV",
|
||||||
"subtitle": "Connect your calendar app (e.g. Apple Calendar, Thunderbird, DAVx⁵) using the CalDAV protocol. Use your email address and an app token as password.",
|
"subtitle": "Connect your calendar app (e.g. Apple Calendar, Thunderbird, DAVx⁵) using the CalDAV protocol. Use your email address and an app token as password.",
|
||||||
@@ -345,7 +376,7 @@
|
|||||||
"revoked": "Token revoked",
|
"revoked": "Token revoked",
|
||||||
"revokeFailed": "Could not revoke token",
|
"revokeFailed": "Could not revoke token",
|
||||||
"createFailed": "Could not create token",
|
"createFailed": "Could not create token",
|
||||||
"newTokenCreated": "Token created — copy it now!",
|
"newTokenCreated": "Token created — copy it now",
|
||||||
"newTokenHint": "This token will only be shown once. Copy it and enter it as the password in your calendar app.",
|
"newTokenHint": "This token will only be shown once. Copy it and enter it as the password in your calendar app.",
|
||||||
"dismiss": "I have copied the token"
|
"dismiss": "I have copied the token"
|
||||||
}
|
}
|
||||||
@@ -413,11 +444,11 @@
|
|||||||
"inviteTitle": "User Invitations",
|
"inviteTitle": "User Invitations",
|
||||||
"inviteDescription": "Invite new users by email. They will receive a registration link valid for 7 days.",
|
"inviteDescription": "Invite new users by email. They will receive a registration link valid for 7 days.",
|
||||||
"sendInvite": "Send invite",
|
"sendInvite": "Send invite",
|
||||||
"inviteSent": "Invitation sent!",
|
"inviteSent": "Invitation sent",
|
||||||
"inviteFailed": "Could not send invitation",
|
"inviteFailed": "Could not send invitation",
|
||||||
"inviteDeleted": "Invitation deleted",
|
"inviteDeleted": "Invitation deleted",
|
||||||
"inviteDeleteFailed": "Could not delete invitation",
|
"inviteDeleteFailed": "Could not delete invitation",
|
||||||
"inviteLinkCopied": "Invite link copied!",
|
"inviteLinkCopied": "Invite link copied",
|
||||||
"copyInviteLink": "Copy invite link",
|
"copyInviteLink": "Copy invite link",
|
||||||
"inviteExpired": "Expired",
|
"inviteExpired": "Expired",
|
||||||
"inviteUsedBy": "Used by",
|
"inviteUsedBy": "Used by",
|
||||||
@@ -449,7 +480,21 @@
|
|||||||
"oauthRemoveConfirm": "Really remove OAuth configuration? Users will no longer be able to sign in with SSO.",
|
"oauthRemoveConfirm": "Really remove OAuth configuration? Users will no longer be able to sign in with SSO.",
|
||||||
"oauthNotConfigured": "OAuth is not configured yet.",
|
"oauthNotConfigured": "OAuth is not configured yet.",
|
||||||
"oauthSave": "Save OAuth",
|
"oauthSave": "Save OAuth",
|
||||||
"oauthRemove": "Remove OAuth"
|
"oauthRemove": "Remove OAuth",
|
||||||
|
"roomsTitle": "Room Management",
|
||||||
|
"roomsDescription": "View, manage, and delete all rooms on this instance.",
|
||||||
|
"searchRooms": "Search rooms...",
|
||||||
|
"roomName": "Name",
|
||||||
|
"roomOwner": "Owner",
|
||||||
|
"roomShares": "Shared",
|
||||||
|
"roomCreated": "Created",
|
||||||
|
"roomView": "View room",
|
||||||
|
"deleteRoom": "Delete room",
|
||||||
|
"deleteRoomConfirm": "Really delete room \"{name}\"? This cannot be undone.",
|
||||||
|
"roomDeleted": "Room deleted",
|
||||||
|
"roomDeleteFailed": "Room could not be deleted",
|
||||||
|
"noRoomsFound": "No rooms found",
|
||||||
|
"showAllRooms": "Show all {count} rooms"
|
||||||
},
|
},
|
||||||
"notifications": {
|
"notifications": {
|
||||||
"bell": "Notifications",
|
"bell": "Notifications",
|
||||||
@@ -465,14 +510,19 @@
|
|||||||
"inbox": "Invitations",
|
"inbox": "Invitations",
|
||||||
"inboxSubtitle": "Meeting invitations from other Redlight instances",
|
"inboxSubtitle": "Meeting invitations from other Redlight instances",
|
||||||
"inviteTitle": "Invite Remote User",
|
"inviteTitle": "Invite Remote User",
|
||||||
"inviteSubtitle": "Invite a user from another Redlight instance to this meeting.",
|
"inviteSubtitle": "You can either invite a user from another Redlight instance by their address, or send an email invitation directly. Only one option can be used at a time.",
|
||||||
"addressLabel": "User address",
|
"addressLabel": "User address",
|
||||||
"addressPlaceholder": "@user@other-instance.com",
|
"addressPlaceholder": "@user@other-instance.com",
|
||||||
"addressHint": "Format: @username@domain of the Redlight instance",
|
"addressHint": "Format: @username@domain of the Redlight instance",
|
||||||
|
"emailLabel": "Invite by email",
|
||||||
|
"emailPlaceholder": "name@example.com, name2@example.com",
|
||||||
|
"emailHint": "Enter one or more email addresses, separated by commas",
|
||||||
"messageLabel": "Message (optional)",
|
"messageLabel": "Message (optional)",
|
||||||
"messagePlaceholder": "Hi, I'd like to invite you to our meeting!",
|
"messagePlaceholder": "Hi, I'd like to invite you to our meeting!",
|
||||||
"send": "Send invitation",
|
"send": "Send invitation",
|
||||||
"sent": "Invitation sent!",
|
"sent": "Invitation sent",
|
||||||
|
"emailSent": "Email invitation(s) sent",
|
||||||
|
"emailSendFailed": "Could not send email invitation",
|
||||||
"sendFailed": "Could not send invitation",
|
"sendFailed": "Could not send invitation",
|
||||||
"from": "From",
|
"from": "From",
|
||||||
"accept": "Accept",
|
"accept": "Accept",
|
||||||
@@ -497,7 +547,7 @@
|
|||||||
"removeRoomConfirm": "Really remove this room?",
|
"removeRoomConfirm": "Really remove this room?",
|
||||||
"roomRemoved": "Room removed",
|
"roomRemoved": "Room removed",
|
||||||
"roomRemoveFailed": "Could not remove room",
|
"roomRemoveFailed": "Could not remove room",
|
||||||
"acceptedSaved": "Invitation accepted - room saved to your dashboard!",
|
"acceptedSaved": "Invitation accepted - room saved to your dashboard",
|
||||||
"meetingId": "Meeting ID",
|
"meetingId": "Meeting ID",
|
||||||
"maxParticipants": "Max. participants",
|
"maxParticipants": "Max. participants",
|
||||||
"recordingOn": "Recording enabled",
|
"recordingOn": "Recording enabled",
|
||||||
@@ -513,9 +563,9 @@
|
|||||||
"roomDeleted": "Deleted",
|
"roomDeleted": "Deleted",
|
||||||
"roomDeletedNotice": "This room has been deleted by the owner on the origin instance and is no longer available.",
|
"roomDeletedNotice": "This room has been deleted by the owner on the origin instance and is no longer available.",
|
||||||
"calendarEvent": "Calendar Invitation",
|
"calendarEvent": "Calendar Invitation",
|
||||||
"calendarAccepted": "Calendar event accepted and added to your calendar!",
|
"calendarAccepted": "Calendar event accepted and added to your calendar",
|
||||||
"localCalendarEvent": "Local Calendar Invitation",
|
"localCalendarEvent": "Local Calendar Invitation",
|
||||||
"calendarLocalAccepted": "Invitation accepted - event added to your calendar!",
|
"calendarLocalAccepted": "Invitation accepted - event added to your calendar",
|
||||||
"invitationRemoved": "Invitation removed",
|
"invitationRemoved": "Invitation removed",
|
||||||
"removeInvitation": "Remove invitation"
|
"removeInvitation": "Remove invitation"
|
||||||
},
|
},
|
||||||
@@ -544,8 +594,8 @@
|
|||||||
"reminder1440": "1 day before",
|
"reminder1440": "1 day before",
|
||||||
"timezone": "Timezone",
|
"timezone": "Timezone",
|
||||||
"color": "Color",
|
"color": "Color",
|
||||||
"eventCreated": "Event created!",
|
"eventCreated": "Event created",
|
||||||
"eventUpdated": "Event updated!",
|
"eventUpdated": "Event updated",
|
||||||
"eventDeleted": "Event deleted",
|
"eventDeleted": "Event deleted",
|
||||||
"saveFailed": "Could not save event",
|
"saveFailed": "Could not save event",
|
||||||
"deleteFailed": "Could not delete event",
|
"deleteFailed": "Could not delete event",
|
||||||
@@ -572,7 +622,7 @@
|
|||||||
"shareAdded": "User added to event",
|
"shareAdded": "User added to event",
|
||||||
"shareRemoved": "Share removed",
|
"shareRemoved": "Share removed",
|
||||||
"shareFailed": "Could not share event",
|
"shareFailed": "Could not share event",
|
||||||
"invitationSent": "Invitation sent!",
|
"invitationSent": "Invitation sent",
|
||||||
"invitationCancelled": "Invitation cancelled",
|
"invitationCancelled": "Invitation cancelled",
|
||||||
"invitationPending": "Invitation pending",
|
"invitationPending": "Invitation pending",
|
||||||
"pendingInvitations": "Pending Invitations",
|
"pendingInvitations": "Pending Invitations",
|
||||||
|
|||||||
+140
-84
@@ -1,6 +1,132 @@
|
|||||||
@tailwind base;
|
@import 'tailwindcss';
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
@theme {
|
||||||
|
--color-th-bg: var(--bg-primary);
|
||||||
|
--color-th-bg-s: var(--bg-secondary);
|
||||||
|
--color-th-bg-t: var(--bg-tertiary);
|
||||||
|
--color-th-text: var(--text-primary);
|
||||||
|
--color-th-text-s: var(--text-secondary);
|
||||||
|
--color-th-accent: var(--accent);
|
||||||
|
--color-th-accent-h: var(--accent-hover);
|
||||||
|
--color-th-accent-t: var(--accent-text);
|
||||||
|
--color-th-border: var(--border);
|
||||||
|
--color-th-card: var(--card-bg);
|
||||||
|
--color-th-input: var(--input-bg);
|
||||||
|
--color-th-input-b: var(--input-border);
|
||||||
|
--color-th-nav: var(--nav-bg);
|
||||||
|
--color-th-side: var(--sidebar-bg);
|
||||||
|
--color-th-hover: var(--hover-bg);
|
||||||
|
--color-th-success: var(--success);
|
||||||
|
--color-th-warning: var(--warning);
|
||||||
|
--color-th-error: var(--error);
|
||||||
|
--color-th-ring: var(--ring);
|
||||||
|
|
||||||
|
--font-sans: Inter, system-ui, -apple-system, sans-serif;
|
||||||
|
|
||||||
|
--shadow-th:
|
||||||
|
0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
|
||||||
|
--shadow-th-lg:
|
||||||
|
0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||||
|
so we've added these compatibility styles to make sure everything still
|
||||||
|
looks the same as it did with Tailwind CSS v3.
|
||||||
|
|
||||||
|
If we ever want to remove these styles, we need to add an explicit border
|
||||||
|
color utility to any element that depends on these defaults.
|
||||||
|
*/
|
||||||
|
@layer base {
|
||||||
|
*,
|
||||||
|
::after,
|
||||||
|
::before,
|
||||||
|
::backdrop,
|
||||||
|
::file-selector-button {
|
||||||
|
border-color: var(--color-gray-200, currentcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Restore Tailwind v3 default: buttons get a pointer cursor */
|
||||||
|
button:not(:disabled),
|
||||||
|
[role="button"]:not([aria-disabled="true"]) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility btn-primary {
|
||||||
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
||||||
|
bg-th-accent text-th-accent-t hover:bg-th-accent-h
|
||||||
|
transition-all duration-200 ease-out
|
||||||
|
focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
||||||
|
cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
|
||||||
|
--tw-ring-offset-color: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility btn-secondary {
|
||||||
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
||||||
|
bg-th-bg-s text-th-text border border-th-border
|
||||||
|
hover:bg-th-hover transition-all duration-200 ease-out
|
||||||
|
focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
||||||
|
cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
|
||||||
|
--tw-ring-offset-color: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility btn-danger {
|
||||||
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
||||||
|
bg-th-error text-white hover:opacity-90
|
||||||
|
transition-all duration-200 ease-out
|
||||||
|
focus:outline-hidden focus:ring-2 focus:ring-th-error focus:ring-offset-2
|
||||||
|
cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
|
||||||
|
--tw-ring-offset-color: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility btn-ghost {
|
||||||
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
||||||
|
text-th-text-s hover:bg-th-hover hover:text-th-text
|
||||||
|
transition-all duration-200 ease-out
|
||||||
|
focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
||||||
|
cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
|
||||||
|
--tw-ring-offset-color: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility input-field {
|
||||||
|
@apply w-full px-4 py-2.5 rounded-lg
|
||||||
|
bg-th-input text-th-text placeholder-th-text-s
|
||||||
|
border border-th-input-b
|
||||||
|
focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:border-transparent
|
||||||
|
transition-all duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility card {
|
||||||
|
@apply bg-th-card rounded-xl border border-th-border
|
||||||
|
shadow-th transition-all duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility card-hover {
|
||||||
|
@apply card hover:shadow-th-lg cursor-pointer;
|
||||||
|
&:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility gradient-text {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--gradient-start),
|
||||||
|
var(--gradient-end)
|
||||||
|
);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility gradient-bg {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--gradient-start),
|
||||||
|
var(--gradient-end)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
/* ===== DEFAULT LIGHT ===== */
|
/* ===== DEFAULT LIGHT ===== */
|
||||||
@@ -444,8 +570,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
/* ===== SCRUNKLY.CAT DARK ===== */
|
/* ===== SCRUNKLY.CAT DARK ===== */
|
||||||
[data-theme="scrunkly-cat"] {
|
[data-theme='scrunkly-cat'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--picker-icon-filter: invert(0.8);
|
--picker-icon-filter: invert(0.8);
|
||||||
--bg-primary: #161924;
|
--bg-primary: #161924;
|
||||||
@@ -472,8 +599,8 @@
|
|||||||
--gradient-end: #d6336a;
|
--gradient-end: #d6336a;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== RED MODULAR LIGHT ===== */
|
/* ===== RED MODULAR LIGHT ===== */
|
||||||
[data-theme="red-modular-light"] {
|
[data-theme='red-modular-light'] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--picker-icon-filter: none;
|
--picker-icon-filter: none;
|
||||||
--bg-primary: #ffffff;
|
--bg-primary: #ffffff;
|
||||||
@@ -501,7 +628,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== EVERFOREST DARK ===== */
|
/* ===== EVERFOREST DARK ===== */
|
||||||
[data-theme="everforest-dark"] {
|
[data-theme='everforest-dark'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--picker-icon-filter: invert(0.8);
|
--picker-icon-filter: invert(0.8);
|
||||||
--bg-primary: #2d353b;
|
--bg-primary: #2d353b;
|
||||||
@@ -529,7 +656,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== EVERFOREST LIGHT ===== */
|
/* ===== EVERFOREST LIGHT ===== */
|
||||||
[data-theme="everforest-light"] {
|
[data-theme='everforest-light'] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--picker-icon-filter: none;
|
--picker-icon-filter: none;
|
||||||
--bg-primary: #fdf6e3;
|
--bg-primary: #fdf6e3;
|
||||||
@@ -557,7 +684,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== KANAGAWA ===== */
|
/* ===== KANAGAWA ===== */
|
||||||
[data-theme="kanagawa"] {
|
[data-theme='kanagawa'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--picker-icon-filter: invert(0.8);
|
--picker-icon-filter: invert(0.8);
|
||||||
--bg-primary: #1f1f28;
|
--bg-primary: #1f1f28;
|
||||||
@@ -585,7 +712,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== AYU DARK ===== */
|
/* ===== AYU DARK ===== */
|
||||||
[data-theme="ayu-dark"] {
|
[data-theme='ayu-dark'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--picker-icon-filter: invert(0.8);
|
--picker-icon-filter: invert(0.8);
|
||||||
--bg-primary: #0d1017;
|
--bg-primary: #0d1017;
|
||||||
@@ -613,7 +740,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== MOONLIGHT ===== */
|
/* ===== MOONLIGHT ===== */
|
||||||
[data-theme="moonlight"] {
|
[data-theme='moonlight'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--picker-icon-filter: invert(0.8);
|
--picker-icon-filter: invert(0.8);
|
||||||
--bg-primary: #212337;
|
--bg-primary: #212337;
|
||||||
@@ -641,7 +768,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== CYBERPUNK ===== */
|
/* ===== CYBERPUNK ===== */
|
||||||
[data-theme="cyberpunk"] {
|
[data-theme='cyberpunk'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--picker-icon-filter: invert(0.8);
|
--picker-icon-filter: invert(0.8);
|
||||||
--bg-primary: #0a0a0f;
|
--bg-primary: #0a0a0f;
|
||||||
@@ -669,7 +796,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== COTTON CANDY LIGHT ===== */
|
/* ===== COTTON CANDY LIGHT ===== */
|
||||||
[data-theme="cotton-candy-light"] {
|
[data-theme='cotton-candy-light'] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--picker-icon-filter: none;
|
--picker-icon-filter: none;
|
||||||
--bg-primary: #fff5f9;
|
--bg-primary: #fff5f9;
|
||||||
@@ -695,77 +822,6 @@
|
|||||||
--gradient-start: #ff85a2;
|
--gradient-start: #ff85a2;
|
||||||
--gradient-end: #c084fc;
|
--gradient-end: #c084fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@layer components {
|
|
||||||
.btn-primary {
|
|
||||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
||||||
bg-th-accent text-th-accent-t hover:bg-th-accent-h
|
|
||||||
transition-all duration-200 ease-out
|
|
||||||
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
||||||
--tw-ring-offset-color: var(--bg-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
||||||
bg-th-bg-s text-th-text border border-th-border
|
|
||||||
hover:bg-th-hover transition-all duration-200 ease-out
|
|
||||||
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
||||||
--tw-ring-offset-color: var(--bg-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
||||||
bg-th-error text-white hover:opacity-90
|
|
||||||
transition-all duration-200 ease-out
|
|
||||||
focus:outline-none focus:ring-2 focus:ring-th-error focus:ring-offset-2
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
||||||
--tw-ring-offset-color: var(--bg-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ghost {
|
|
||||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
||||||
text-th-text-s hover:bg-th-hover hover:text-th-text
|
|
||||||
transition-all duration-200 ease-out
|
|
||||||
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
||||||
--tw-ring-offset-color: var(--bg-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
@apply w-full px-4 py-2.5 rounded-lg
|
|
||||||
bg-th-input text-th-text placeholder-th-text-s
|
|
||||||
border border-th-input-b
|
|
||||||
focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
|
|
||||||
transition-all duration-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
@apply bg-th-card rounded-xl border border-th-border
|
|
||||||
shadow-th transition-all duration-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-hover {
|
|
||||||
@apply card hover:shadow-th-lg cursor-pointer;
|
|
||||||
}
|
|
||||||
.card-hover:hover {
|
|
||||||
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-bg {
|
|
||||||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════
|
/* ═══════════════════════════════════════════════════════════════
|
||||||
|
|||||||
+327
-42
@@ -4,7 +4,7 @@ import {
|
|||||||
Users, Shield, Search, Trash2, ChevronDown, Loader2,
|
Users, Shield, Search, Trash2, ChevronDown, Loader2,
|
||||||
MoreVertical, Key, UserCheck, UserX, UserPlus, Mail, Lock, User,
|
MoreVertical, Key, UserCheck, UserX, UserPlus, Mail, Lock, User,
|
||||||
Upload, X as XIcon, Image, Type, Palette, Send, Copy, Clock, Check,
|
Upload, X as XIcon, Image, Type, Palette, Send, Copy, Clock, Check,
|
||||||
ShieldCheck, Globe, Link as LinkIcon, LogIn,
|
ShieldCheck, Globe, Link as LinkIcon, LogIn, DoorOpen, Eye, ExternalLink,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
@@ -55,6 +55,14 @@ export default function Admin() {
|
|||||||
const [oauthForm, setOauthForm] = useState({ issuer: '', clientId: '', clientSecret: '', displayName: 'SSO', autoRegister: true });
|
const [oauthForm, setOauthForm] = useState({ issuer: '', clientId: '', clientSecret: '', displayName: 'SSO', autoRegister: true });
|
||||||
const [savingOauth, setSavingOauth] = useState(false);
|
const [savingOauth, setSavingOauth] = useState(false);
|
||||||
|
|
||||||
|
// Rooms state
|
||||||
|
const [adminRooms, setAdminRooms] = useState([]);
|
||||||
|
const [adminRoomsLoading, setAdminRoomsLoading] = useState(true);
|
||||||
|
const [roomSearch, setRoomSearch] = useState('');
|
||||||
|
const [roomsExpanded, setRoomsExpanded] = useState(false);
|
||||||
|
const [showAllRoomsModal, setShowAllRoomsModal] = useState(false);
|
||||||
|
const [allRoomsSearch, setAllRoomsSearch] = useState('');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user?.role !== 'admin') {
|
if (user?.role !== 'admin') {
|
||||||
navigate('/dashboard');
|
navigate('/dashboard');
|
||||||
@@ -63,6 +71,7 @@ export default function Admin() {
|
|||||||
fetchUsers();
|
fetchUsers();
|
||||||
fetchInvites();
|
fetchInvites();
|
||||||
fetchOauthConfig();
|
fetchOauthConfig();
|
||||||
|
fetchAdminRooms();
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -101,6 +110,29 @@ export default function Admin() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const fetchAdminRooms = async () => {
|
||||||
|
setAdminRoomsLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await api.get('/admin/rooms');
|
||||||
|
setAdminRooms(res.data.rooms);
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setAdminRoomsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdminDeleteRoom = async (uid, name) => {
|
||||||
|
if (!confirm(t('admin.deleteRoomConfirm', { name }))) return;
|
||||||
|
try {
|
||||||
|
await api.delete(`/rooms/${uid}`);
|
||||||
|
toast.success(t('admin.roomDeleted'));
|
||||||
|
fetchAdminRooms();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.response?.data?.error || t('admin.roomDeleteFailed'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleRoleChange = async (userId, newRole) => {
|
const handleRoleChange = async (userId, newRole) => {
|
||||||
try {
|
try {
|
||||||
await api.put(`/admin/users/${userId}/role`, { role: newRole });
|
await api.put(`/admin/users/${userId}/role`, { role: newRole });
|
||||||
@@ -391,17 +423,18 @@ export default function Admin() {
|
|||||||
<div className="grid gap-6 sm:grid-cols-2">
|
<div className="grid gap-6 sm:grid-cols-2">
|
||||||
{/* Logo upload */}
|
{/* Logo upload */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</label>
|
<p className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</p>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
{hasLogo && logoUrl ? (
|
{hasLogo && logoUrl ? (
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<img
|
<img
|
||||||
src={`${logoUrl}?t=${Date.now()}`}
|
src={`${logoUrl}?t=${Date.now()}`}
|
||||||
alt="Logo"
|
alt=""
|
||||||
className="w-14 h-14 rounded-xl object-contain border border-th-border bg-th-bg p-1"
|
className="w-14 h-14 rounded-xl object-contain border border-th-border bg-th-bg p-1"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={handleLogoRemove}
|
onClick={handleLogoRemove}
|
||||||
|
aria-label={t('common.delete')}
|
||||||
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"
|
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} />
|
<XIcon size={12} />
|
||||||
@@ -439,11 +472,12 @@ export default function Admin() {
|
|||||||
|
|
||||||
{/* App name */}
|
{/* App name */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
|
<label htmlFor="admin-app-name" className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="relative flex-1">
|
<div className="relative flex-1">
|
||||||
<Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="admin-app-name"
|
||||||
type="text"
|
type="text"
|
||||||
value={editAppName}
|
value={editAppName}
|
||||||
onChange={e => setEditAppName(e.target.value)}
|
onChange={e => setEditAppName(e.target.value)}
|
||||||
@@ -470,7 +504,7 @@ export default function Admin() {
|
|||||||
type="button"
|
type="button"
|
||||||
disabled={savingHideAppName}
|
disabled={savingHideAppName}
|
||||||
onClick={() => handleHideAppNameToggle(!hideAppName)}
|
onClick={() => handleHideAppNameToggle(!hideAppName)}
|
||||||
className={`relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-1 disabled:opacity-50 ml-4 ${
|
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-1 disabled:opacity-50 ml-4 ${
|
||||||
hideAppName ? 'bg-th-accent' : 'bg-th-border'
|
hideAppName ? 'bg-th-accent' : 'bg-th-border'
|
||||||
}`}
|
}`}
|
||||||
aria-checked={hideAppName}
|
aria-checked={hideAppName}
|
||||||
@@ -488,12 +522,13 @@ export default function Admin() {
|
|||||||
{/* Default theme */}
|
{/* Default theme */}
|
||||||
<div className="mt-6 pt-6 border-t border-th-border">
|
<div className="mt-6 pt-6 border-t border-th-border">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Palette size={16} className="text-th-accent" />
|
<Palette size={16} className="text-th-accent" aria-hidden="true" />
|
||||||
<label className="block text-sm font-medium text-th-text">{t('admin.defaultThemeLabel')}</label>
|
<label htmlFor="admin-default-theme" className="block text-sm font-medium text-th-text">{t('admin.defaultThemeLabel')}</label>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-th-text-s mb-3">{t('admin.defaultThemeDesc')}</p>
|
<p className="text-xs text-th-text-s mb-3">{t('admin.defaultThemeDesc')}</p>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<select
|
<select
|
||||||
|
id="admin-default-theme"
|
||||||
value={editDefaultTheme}
|
value={editDefaultTheme}
|
||||||
onChange={e => setEditDefaultTheme(e.target.value)}
|
onChange={e => setEditDefaultTheme(e.target.value)}
|
||||||
className="input-field text-sm flex-1"
|
className="input-field text-sm flex-1"
|
||||||
@@ -507,7 +542,7 @@ export default function Admin() {
|
|||||||
<button
|
<button
|
||||||
onClick={handleDefaultThemeSave}
|
onClick={handleDefaultThemeSave}
|
||||||
disabled={savingDefaultTheme || editDefaultTheme === (defaultTheme || 'dark')}
|
disabled={savingDefaultTheme || editDefaultTheme === (defaultTheme || 'dark')}
|
||||||
className="btn-primary text-sm px-4 flex-shrink-0"
|
className="btn-primary text-sm px-4 shrink-0"
|
||||||
>
|
>
|
||||||
{savingDefaultTheme ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
|
{savingDefaultTheme ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
|
||||||
</button>
|
</button>
|
||||||
@@ -517,16 +552,17 @@ export default function Admin() {
|
|||||||
{/* Legal links */}
|
{/* Legal links */}
|
||||||
<div className="mt-6 pt-6 border-t border-th-border">
|
<div className="mt-6 pt-6 border-t border-th-border">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<LinkIcon size={16} className="text-th-accent" />
|
<LinkIcon size={16} className="text-th-accent" aria-hidden="true" />
|
||||||
<label className="block text-sm font-medium text-th-text">{t('admin.legalLinksTitle')}</label>
|
<p className="block text-sm font-medium text-th-text">{t('admin.legalLinksTitle')}</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-th-text-s mb-4">{t('admin.legalLinksDesc')}</p>
|
<p className="text-xs text-th-text-s mb-4">{t('admin.legalLinksDesc')}</p>
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
{/* Imprint */}
|
{/* Imprint */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-th-text-s mb-1">{t('admin.imprintUrl')}</label>
|
<label htmlFor="admin-imprint-url" className="block text-xs font-medium text-th-text-s mb-1">{t('admin.imprintUrl')}</label>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<input
|
<input
|
||||||
|
id="admin-imprint-url"
|
||||||
type="url"
|
type="url"
|
||||||
value={editImprintUrl}
|
value={editImprintUrl}
|
||||||
onChange={e => setEditImprintUrl(e.target.value)}
|
onChange={e => setEditImprintUrl(e.target.value)}
|
||||||
@@ -537,7 +573,7 @@ export default function Admin() {
|
|||||||
<button
|
<button
|
||||||
onClick={handleImprintUrlSave}
|
onClick={handleImprintUrlSave}
|
||||||
disabled={savingImprintUrl || editImprintUrl === (imprintUrl || '')}
|
disabled={savingImprintUrl || editImprintUrl === (imprintUrl || '')}
|
||||||
className="btn-primary text-sm px-4 flex-shrink-0"
|
className="btn-primary text-sm px-4 shrink-0"
|
||||||
>
|
>
|
||||||
{savingImprintUrl ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
|
{savingImprintUrl ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
|
||||||
</button>
|
</button>
|
||||||
@@ -545,9 +581,10 @@ export default function Admin() {
|
|||||||
</div>
|
</div>
|
||||||
{/* Privacy Policy */}
|
{/* Privacy Policy */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-th-text-s mb-1">{t('admin.privacyUrl')}</label>
|
<label htmlFor="admin-privacy-url" className="block text-xs font-medium text-th-text-s mb-1">{t('admin.privacyUrl')}</label>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<input
|
<input
|
||||||
|
id="admin-privacy-url"
|
||||||
type="url"
|
type="url"
|
||||||
value={editPrivacyUrl}
|
value={editPrivacyUrl}
|
||||||
onChange={e => setEditPrivacyUrl(e.target.value)}
|
onChange={e => setEditPrivacyUrl(e.target.value)}
|
||||||
@@ -558,7 +595,7 @@ export default function Admin() {
|
|||||||
<button
|
<button
|
||||||
onClick={handlePrivacyUrlSave}
|
onClick={handlePrivacyUrlSave}
|
||||||
disabled={savingPrivacyUrl || editPrivacyUrl === (privacyUrl || '')}
|
disabled={savingPrivacyUrl || editPrivacyUrl === (privacyUrl || '')}
|
||||||
className="btn-primary text-sm px-4 flex-shrink-0"
|
className="btn-primary text-sm px-4 shrink-0"
|
||||||
>
|
>
|
||||||
{savingPrivacyUrl ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
|
{savingPrivacyUrl ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
|
||||||
</button>
|
</button>
|
||||||
@@ -615,20 +652,21 @@ export default function Admin() {
|
|||||||
{/* Send invite form */}
|
{/* Send invite form */}
|
||||||
<form onSubmit={handleSendInvite} className="flex items-center gap-2 mb-6">
|
<form onSubmit={handleSendInvite} className="flex items-center gap-2 mb-6">
|
||||||
<div className="relative flex-1">
|
<div className="relative flex-1">
|
||||||
<Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
value={inviteEmail}
|
value={inviteEmail}
|
||||||
onChange={e => setInviteEmail(e.target.value)}
|
onChange={e => setInviteEmail(e.target.value)}
|
||||||
className="input-field pl-9 text-sm"
|
className="input-field pl-9 text-sm"
|
||||||
placeholder={t('auth.emailPlaceholder')}
|
placeholder={t('auth.emailPlaceholder')}
|
||||||
|
aria-label={t('auth.email')}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={sendingInvite || !inviteEmail.trim()}
|
disabled={sendingInvite || !inviteEmail.trim()}
|
||||||
className="btn-primary text-sm px-4 flex-shrink-0"
|
className="btn-primary text-sm px-4 shrink-0"
|
||||||
>
|
>
|
||||||
{sendingInvite ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
|
{sendingInvite ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
|
||||||
{t('admin.sendInvite')}
|
{t('admin.sendInvite')}
|
||||||
@@ -644,7 +682,7 @@ export default function Admin() {
|
|||||||
return (
|
return (
|
||||||
<div key={inv.id} className="flex items-center justify-between gap-3 p-3 rounded-xl bg-th-bg border border-th-border">
|
<div key={inv.id} className="flex items-center justify-between gap-3 p-3 rounded-xl bg-th-bg border border-th-border">
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 ${
|
||||||
isUsed ? 'bg-green-500/15 text-green-400' : isExpired ? 'bg-red-500/15 text-red-400' : 'bg-th-accent/15 text-th-accent'
|
isUsed ? 'bg-green-500/15 text-green-400' : isExpired ? 'bg-red-500/15 text-red-400' : 'bg-th-accent/15 text-th-accent'
|
||||||
}`}>
|
}`}>
|
||||||
{isUsed ? <Check size={14} /> : isExpired ? <XIcon size={14} /> : <Clock size={14} />}
|
{isUsed ? <Check size={14} /> : isExpired ? <XIcon size={14} /> : <Clock size={14} />}
|
||||||
@@ -661,7 +699,7 @@ export default function Admin() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1 flex-shrink-0">
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
{!isUsed && !isExpired && (
|
{!isUsed && !isExpired && (
|
||||||
<button
|
<button
|
||||||
onClick={() => handleCopyInviteLink(inv.token)}
|
onClick={() => handleCopyInviteLink(inv.token)}
|
||||||
@@ -706,8 +744,9 @@ export default function Admin() {
|
|||||||
<form onSubmit={handleOauthSave} className="space-y-4">
|
<form onSubmit={handleOauthSave} className="space-y-4">
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
|
<label htmlFor="admin-oauth-issuer" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="admin-oauth-issuer"
|
||||||
type="url"
|
type="url"
|
||||||
value={oauthForm.issuer}
|
value={oauthForm.issuer}
|
||||||
onChange={e => setOauthForm(f => ({ ...f, issuer: e.target.value }))}
|
onChange={e => setOauthForm(f => ({ ...f, issuer: e.target.value }))}
|
||||||
@@ -718,8 +757,9 @@ export default function Admin() {
|
|||||||
<p className="text-xs text-th-text-s mt-1">{t('admin.oauthIssuerHint')}</p>
|
<p className="text-xs text-th-text-s mt-1">{t('admin.oauthIssuerHint')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
|
<label htmlFor="admin-oauth-client-id" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="admin-oauth-client-id"
|
||||||
type="text"
|
type="text"
|
||||||
value={oauthForm.clientId}
|
value={oauthForm.clientId}
|
||||||
onChange={e => setOauthForm(f => ({ ...f, clientId: e.target.value }))}
|
onChange={e => setOauthForm(f => ({ ...f, clientId: e.target.value }))}
|
||||||
@@ -732,9 +772,11 @@ export default function Admin() {
|
|||||||
|
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
|
<label htmlFor="admin-oauth-client-secret" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="admin-oauth-client-secret"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={oauthForm.clientSecret}
|
value={oauthForm.clientSecret}
|
||||||
onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))}
|
onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))}
|
||||||
className="input-field text-sm"
|
className="input-field text-sm"
|
||||||
@@ -745,8 +787,9 @@ export default function Admin() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
|
<label htmlFor="admin-oauth-display-name" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="admin-oauth-display-name"
|
||||||
type="text"
|
type="text"
|
||||||
value={oauthForm.displayName}
|
value={oauthForm.displayName}
|
||||||
onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))}
|
onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))}
|
||||||
@@ -790,16 +833,133 @@ export default function Admin() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Room Management */}
|
||||||
|
<div className="card p-6 mb-8">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setRoomsExpanded(v => !v)}
|
||||||
|
className="flex items-center justify-between w-full text-left"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DoorOpen size={20} className="text-th-accent" />
|
||||||
|
<h2 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h2>
|
||||||
|
<span className="text-sm text-th-text-s">({adminRooms.length})</span>
|
||||||
|
</div>
|
||||||
|
<ChevronDown size={18} className={`text-th-text-s transition-transform duration-200 ${roomsExpanded ? 'rotate-180' : ''}`} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{roomsExpanded && (
|
||||||
|
<div className="mt-4">
|
||||||
|
<p className="text-sm text-th-text-s mb-5">{t('admin.roomsDescription')}</p>
|
||||||
|
|
||||||
|
{adminRoomsLoading ? (
|
||||||
|
<div className="flex justify-center py-4">
|
||||||
|
<Loader2 size={20} className="animate-spin text-th-accent" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{adminRooms.length > 0 && (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-th-border">
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
|
||||||
|
{t('admin.roomName')}
|
||||||
|
</th>
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
|
||||||
|
{t('admin.roomOwner')}
|
||||||
|
</th>
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
|
||||||
|
{t('admin.roomShares')}
|
||||||
|
</th>
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
|
||||||
|
{t('admin.roomCreated')}
|
||||||
|
</th>
|
||||||
|
<th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
|
||||||
|
{t('admin.actions')}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{adminRooms.slice(0, 10).map(r => (
|
||||||
|
<tr key={r.id} className="border-b border-th-border last:border-0 hover:bg-th-hover transition-colors">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-th-text">{r.name}</p>
|
||||||
|
<p className="text-xs text-th-text-s font-mono">{r.uid}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 hidden sm:table-cell">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-th-text">{r.owner_name}</p>
|
||||||
|
<p className="text-xs text-th-text-s">{r.owner_email}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-th-text hidden md:table-cell">
|
||||||
|
{r.share_count}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-th-text-s hidden lg:table-cell">
|
||||||
|
{new Date(r.created_at).toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US')}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div className="flex items-center justify-end gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate(`/rooms/${r.uid}`)}
|
||||||
|
className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
|
title={t('admin.roomView')}
|
||||||
|
>
|
||||||
|
<Eye size={15} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAdminDeleteRoom(r.uid, r.name)}
|
||||||
|
className="p-1.5 rounded-lg hover:bg-th-hover text-th-error transition-colors"
|
||||||
|
title={t('admin.deleteRoom')}
|
||||||
|
>
|
||||||
|
<Trash2 size={15} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{adminRooms.length > 10 && (
|
||||||
|
<div className="mt-4 text-center">
|
||||||
|
<button
|
||||||
|
onClick={() => { setAllRoomsSearch(''); setShowAllRoomsModal(true); }}
|
||||||
|
className="btn-secondary text-sm"
|
||||||
|
>
|
||||||
|
{t('admin.showAllRooms', { count: adminRooms.length })}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{adminRooms.length === 0 && (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<DoorOpen size={36} className="mx-auto text-th-text-s/40 mb-2" />
|
||||||
|
<p className="text-th-text-s text-sm">{t('admin.noRoomsFound')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Search */}
|
{/* Search */}
|
||||||
<div className="card p-4 mb-6">
|
<div className="card p-4 mb-6">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="search"
|
||||||
value={search}
|
value={search}
|
||||||
onChange={e => setSearch(e.target.value)}
|
onChange={e => setSearch(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
placeholder={t('admin.searchUsers')}
|
placeholder={t('admin.searchUsers')}
|
||||||
|
aria-label={t('admin.searchUsers')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -833,7 +993,7 @@ export default function Admin() {
|
|||||||
<td className="px-5 py-4">
|
<td className="px-5 py-4">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 overflow-hidden"
|
className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 overflow-hidden"
|
||||||
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{u.avatar_image ? (
|
{u.avatar_image ? (
|
||||||
@@ -951,14 +1111,16 @@ export default function Admin() {
|
|||||||
{/* Reset password modal */}
|
{/* Reset password modal */}
|
||||||
{resetPwModal && (
|
{resetPwModal && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setResetPwModal(null)} />
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setResetPwModal(null)} aria-hidden="true" />
|
||||||
<div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6">
|
<div role="dialog" aria-modal="true" aria-labelledby="reset-pw-title" className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6">
|
||||||
<h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.resetPasswordTitle')}</h3>
|
<h3 id="reset-pw-title" className="text-lg font-semibold text-th-text mb-4">{t('admin.resetPasswordTitle')}</h3>
|
||||||
<form onSubmit={handleResetPassword}>
|
<form onSubmit={handleResetPassword}>
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('admin.newPasswordLabel')}</label>
|
<label htmlFor="admin-reset-pw" className="block text-sm font-medium text-th-text mb-1.5">{t('admin.newPasswordLabel')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="admin-reset-pw"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={newPassword}
|
value={newPassword}
|
||||||
onChange={e => setNewPassword(e.target.value)}
|
onChange={e => setNewPassword(e.target.value)}
|
||||||
className="input-field"
|
className="input-field"
|
||||||
@@ -983,16 +1145,18 @@ export default function Admin() {
|
|||||||
{/* Create user modal */}
|
{/* Create user modal */}
|
||||||
{showCreateUser && (
|
{showCreateUser && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowCreateUser(false)} />
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowCreateUser(false)} aria-hidden="true" />
|
||||||
<div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6">
|
<div role="dialog" aria-modal="true" aria-labelledby="create-user-title" className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6">
|
||||||
<h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
|
<h3 id="create-user-title" className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
|
||||||
<form onSubmit={handleCreateUser} className="space-y-4">
|
<form onSubmit={handleCreateUser} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
|
<label htmlFor="admin-new-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="admin-new-username"
|
||||||
type="text"
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
value={newUser.name}
|
value={newUser.name}
|
||||||
onChange={e => setNewUser({ ...newUser, name: e.target.value })}
|
onChange={e => setNewUser({ ...newUser, name: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -1003,11 +1167,13 @@ export default function Admin() {
|
|||||||
<p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
|
<p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
|
<label htmlFor="admin-new-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="admin-new-display-name"
|
||||||
type="text"
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
value={newUser.display_name}
|
value={newUser.display_name}
|
||||||
onChange={e => setNewUser({ ...newUser, display_name: e.target.value })}
|
onChange={e => setNewUser({ ...newUser, display_name: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -1016,11 +1182,13 @@ export default function Admin() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
<label htmlFor="admin-new-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="admin-new-email"
|
||||||
type="email"
|
type="email"
|
||||||
|
autoComplete="off"
|
||||||
value={newUser.email}
|
value={newUser.email}
|
||||||
onChange={e => setNewUser({ ...newUser, email: e.target.value })}
|
onChange={e => setNewUser({ ...newUser, email: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -1030,11 +1198,13 @@ export default function Admin() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
|
<label htmlFor="admin-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="admin-new-password"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={newUser.password}
|
value={newUser.password}
|
||||||
onChange={e => setNewUser({ ...newUser, password: e.target.value })}
|
onChange={e => setNewUser({ ...newUser, password: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -1045,8 +1215,9 @@ export default function Admin() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('admin.role')}</label>
|
<label htmlFor="admin-new-role" className="block text-sm font-medium text-th-text mb-1.5">{t('admin.role')}</label>
|
||||||
<select
|
<select
|
||||||
|
id="admin-new-role"
|
||||||
value={newUser.role}
|
value={newUser.role}
|
||||||
onChange={e => setNewUser({ ...newUser, role: e.target.value })}
|
onChange={e => setNewUser({ ...newUser, role: e.target.value })}
|
||||||
className="input-field"
|
className="input-field"
|
||||||
@@ -1067,6 +1238,120 @@ export default function Admin() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* All rooms modal */}
|
||||||
|
{showAllRoomsModal && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowAllRoomsModal(false)} />
|
||||||
|
<div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col">
|
||||||
|
<div className="flex items-center justify-between p-6 border-b border-th-border">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DoorOpen size={20} className="text-th-accent" />
|
||||||
|
<h3 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h3>
|
||||||
|
<span className="text-sm text-th-text-s">({adminRooms.length})</span>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => setShowAllRoomsModal(false)} aria-label={t('common.close')} className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors">
|
||||||
|
<XIcon size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 border-b border-th-border">
|
||||||
|
<div className="relative">
|
||||||
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
value={allRoomsSearch}
|
||||||
|
onChange={e => setAllRoomsSearch(e.target.value)}
|
||||||
|
className="input-field pl-9 text-sm"
|
||||||
|
placeholder={t('admin.searchRooms')}
|
||||||
|
aria-label={t('admin.searchRooms')}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-y-auto flex-1 p-0">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="sticky top-0 bg-th-card z-10">
|
||||||
|
<tr className="border-b border-th-border">
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
|
||||||
|
{t('admin.roomName')}
|
||||||
|
</th>
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
|
||||||
|
{t('admin.roomOwner')}
|
||||||
|
</th>
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
|
||||||
|
{t('admin.roomShares')}
|
||||||
|
</th>
|
||||||
|
<th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
|
||||||
|
{t('admin.roomCreated')}
|
||||||
|
</th>
|
||||||
|
<th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
|
||||||
|
{t('admin.actions')}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{adminRooms
|
||||||
|
.filter(r =>
|
||||||
|
r.name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
|
||||||
|
r.owner_name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
|
||||||
|
r.uid.toLowerCase().includes(allRoomsSearch.toLowerCase())
|
||||||
|
)
|
||||||
|
.map(r => (
|
||||||
|
<tr key={r.id} className="border-b border-th-border last:border-0 hover:bg-th-hover transition-colors">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-th-text">{r.name}</p>
|
||||||
|
<p className="text-xs text-th-text-s font-mono">{r.uid}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 hidden sm:table-cell">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-th-text">{r.owner_name}</p>
|
||||||
|
<p className="text-xs text-th-text-s">{r.owner_email}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-th-text hidden md:table-cell">
|
||||||
|
{r.share_count}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-th-text-s hidden lg:table-cell">
|
||||||
|
{new Date(r.created_at).toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US')}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div className="flex items-center justify-end gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => { setShowAllRoomsModal(false); navigate(`/rooms/${r.uid}`); }}
|
||||||
|
className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
|
||||||
|
title={t('admin.roomView')}
|
||||||
|
>
|
||||||
|
<Eye size={15} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAdminDeleteRoom(r.uid, r.name)}
|
||||||
|
className="p-1.5 rounded-lg hover:bg-th-hover text-th-error transition-colors"
|
||||||
|
title={t('admin.deleteRoom')}
|
||||||
|
>
|
||||||
|
<Trash2 size={15} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{adminRooms.filter(r =>
|
||||||
|
r.name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
|
||||||
|
r.owner_name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
|
||||||
|
r.uid.toLowerCase().includes(allRoomsSearch.toLowerCase())
|
||||||
|
).length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<DoorOpen size={36} className="mx-auto text-th-text-s/40 mb-2" />
|
||||||
|
<p className="text-th-text-s text-sm">{t('admin.noRoomsFound')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+23
-15
@@ -454,7 +454,7 @@ export default function Calendar() {
|
|||||||
<div
|
<div
|
||||||
key={ev.id}
|
key={ev.id}
|
||||||
onClick={(e) => { e.stopPropagation(); setShowDetail(ev); }}
|
onClick={(e) => { e.stopPropagation(); setShowDetail(ev); }}
|
||||||
className="text-[10px] leading-tight px-1.5 py-0.5 rounded truncate text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
|
className="text-[10px] leading-tight px-1.5 py-0.5 rounded-sm truncate text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
|
||||||
style={{ backgroundColor: ev.color || '#6366f1' }}
|
style={{ backgroundColor: ev.color || '#6366f1' }}
|
||||||
title={ev.title}
|
title={ev.title}
|
||||||
>
|
>
|
||||||
@@ -492,11 +492,11 @@ export default function Calendar() {
|
|||||||
<div
|
<div
|
||||||
key={ev.id}
|
key={ev.id}
|
||||||
onClick={(e) => { e.stopPropagation(); setShowDetail(ev); }}
|
onClick={(e) => { e.stopPropagation(); setShowDetail(ev); }}
|
||||||
className="text-xs px-2 py-1.5 rounded text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
|
className="text-xs px-2 py-1.5 rounded-sm text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
|
||||||
style={{ backgroundColor: ev.color || '#6366f1' }}
|
style={{ backgroundColor: ev.color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-1 truncate">
|
<div className="flex items-center gap-1 truncate">
|
||||||
{ev.reminder_minutes && <Bell size={9} className="flex-shrink-0 opacity-70" />}
|
{ev.reminder_minutes && <Bell size={9} className="shrink-0 opacity-70" />}
|
||||||
<span className="truncate">{ev.title}</span>
|
<span className="truncate">{ev.title}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="opacity-80 text-[10px]">{formatTime(ev.start_time)} - {formatTime(ev.end_time)}</div>
|
<div className="opacity-80 text-[10px]">{formatTime(ev.start_time)} - {formatTime(ev.end_time)}</div>
|
||||||
@@ -515,8 +515,9 @@ export default function Calendar() {
|
|||||||
<Modal title={editingEvent ? t('calendar.editEvent') : t('calendar.createEvent')} onClose={() => { setShowCreate(false); setEditingEvent(null); }}>
|
<Modal title={editingEvent ? t('calendar.editEvent') : t('calendar.createEvent')} onClose={() => { setShowCreate(false); setEditingEvent(null); }}>
|
||||||
<form onSubmit={handleSave} className="space-y-4">
|
<form onSubmit={handleSave} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.eventTitle')} *</label>
|
<label htmlFor="calendar-event-title" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.eventTitle')} *</label>
|
||||||
<input
|
<input
|
||||||
|
id="calendar-event-title"
|
||||||
type="text"
|
type="text"
|
||||||
value={form.title}
|
value={form.title}
|
||||||
onChange={e => setForm({ ...form, title: e.target.value })}
|
onChange={e => setForm({ ...form, title: e.target.value })}
|
||||||
@@ -527,8 +528,9 @@ export default function Calendar() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.description')}</label>
|
<label htmlFor="calendar-event-description" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.description')}</label>
|
||||||
<textarea
|
<textarea
|
||||||
|
id="calendar-event-description"
|
||||||
value={form.description}
|
value={form.description}
|
||||||
onChange={e => setForm({ ...form, description: e.target.value })}
|
onChange={e => setForm({ ...form, description: e.target.value })}
|
||||||
className="input-field resize-none"
|
className="input-field resize-none"
|
||||||
@@ -555,13 +557,14 @@ export default function Calendar() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1.5 -mt-2 text-xs text-th-text-s">
|
<div className="flex items-center gap-1.5 -mt-2 text-xs text-th-text-s">
|
||||||
<Globe size={12} className="flex-shrink-0" />
|
<Globe size={12} className="shrink-0" />
|
||||||
<span>{getLocalTimezone()}</span>
|
<span>{getLocalTimezone()}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
|
<label htmlFor="calendar-event-room" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
|
||||||
<select
|
<select
|
||||||
|
id="calendar-event-room"
|
||||||
value={form.room_uid}
|
value={form.room_uid}
|
||||||
onChange={e => setForm({ ...form, room_uid: e.target.value })}
|
onChange={e => setForm({ ...form, room_uid: e.target.value })}
|
||||||
className="input-field"
|
className="input-field"
|
||||||
@@ -575,10 +578,11 @@ export default function Calendar() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.reminderLabel')}</label>
|
<label htmlFor="calendar-event-reminder" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.reminderLabel')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Bell size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" />
|
<Bell size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" aria-hidden="true" />
|
||||||
<select
|
<select
|
||||||
|
id="calendar-event-reminder"
|
||||||
value={form.reminder_minutes ?? ''}
|
value={form.reminder_minutes ?? ''}
|
||||||
onChange={e => setForm({ ...form, reminder_minutes: e.target.value === '' ? null : Number(e.target.value) })}
|
onChange={e => setForm({ ...form, reminder_minutes: e.target.value === '' ? null : Number(e.target.value) })}
|
||||||
className="input-field pl-9"
|
className="input-field pl-9"
|
||||||
@@ -595,13 +599,16 @@ export default function Calendar() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.color')}</label>
|
<p id="calendar-event-color-label" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.color')}</p>
|
||||||
<div className="flex gap-2">
|
<div role="radiogroup" aria-labelledby="calendar-event-color-label" className="flex gap-2">
|
||||||
{COLORS.map(c => (
|
{COLORS.map(c => (
|
||||||
<button
|
<button
|
||||||
key={c}
|
key={c}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setForm({ ...form, color: c })}
|
onClick={() => setForm({ ...form, color: c })}
|
||||||
|
role="radio"
|
||||||
|
aria-checked={form.color === c}
|
||||||
|
aria-label={c}
|
||||||
className={`w-7 h-7 rounded-full border-2 transition-all ${form.color === c ? 'border-th-text scale-110' : 'border-transparent'}`}
|
className={`w-7 h-7 rounded-full border-2 transition-all ${form.color === c ? 'border-th-text scale-110' : 'border-transparent'}`}
|
||||||
style={{ backgroundColor: c }}
|
style={{ backgroundColor: c }}
|
||||||
/>
|
/>
|
||||||
@@ -750,7 +757,7 @@ export default function Calendar() {
|
|||||||
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
|
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
|
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
|
||||||
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
{(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
||||||
@@ -772,7 +779,7 @@ export default function Calendar() {
|
|||||||
<div key={u.user_id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border border-dashed">
|
<div key={u.user_id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border border-dashed">
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
<div
|
<div
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
|
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
|
||||||
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
{(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
||||||
@@ -799,7 +806,7 @@ export default function Calendar() {
|
|||||||
<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 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="flex items-center gap-3 min-w-0">
|
||||||
<div
|
<div
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
|
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
|
||||||
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
{(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
||||||
@@ -826,8 +833,9 @@ export default function Calendar() {
|
|||||||
<p className="text-sm text-th-text-s mb-4">{t('calendar.sendFederatedDesc')}</p>
|
<p className="text-sm text-th-text-s mb-4">{t('calendar.sendFederatedDesc')}</p>
|
||||||
<form onSubmit={handleFedSend} className="space-y-4">
|
<form onSubmit={handleFedSend} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
|
<label htmlFor="calendar-fed-share-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="calendar-fed-share-address"
|
||||||
type="text"
|
type="text"
|
||||||
value={fedAddress}
|
value={fedAddress}
|
||||||
onChange={e => setFedAddress(e.target.value)}
|
onChange={e => setFedAddress(e.target.value)}
|
||||||
|
|||||||
+15
-7
@@ -103,9 +103,11 @@ export default function Dashboard() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{/* View toggle */}
|
{/* View toggle */}
|
||||||
<div className="hidden sm:flex items-center bg-th-bg-s rounded-lg border border-th-border p-0.5">
|
<div role="group" aria-label={t('common.gridView') + ' / ' + t('common.listView')} className="hidden sm:flex items-center bg-th-bg-s rounded-lg border border-th-border p-0.5">
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode('grid')}
|
onClick={() => setViewMode('grid')}
|
||||||
|
aria-label={t('common.gridView')}
|
||||||
|
aria-pressed={viewMode === 'grid'}
|
||||||
className={`p-1.5 rounded-md transition-colors ${
|
className={`p-1.5 rounded-md transition-colors ${
|
||||||
viewMode === 'grid' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
|
viewMode === 'grid' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
|
||||||
}`}
|
}`}
|
||||||
@@ -114,6 +116,8 @@ export default function Dashboard() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode('list')}
|
onClick={() => setViewMode('list')}
|
||||||
|
aria-label={t('common.listView')}
|
||||||
|
aria-pressed={viewMode === 'list'}
|
||||||
className={`p-1.5 rounded-md transition-colors ${
|
className={`p-1.5 rounded-md transition-colors ${
|
||||||
viewMode === 'list' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
|
viewMode === 'list' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
|
||||||
}`}
|
}`}
|
||||||
@@ -197,8 +201,9 @@ export default function Dashboard() {
|
|||||||
<Modal title={t('dashboard.createRoom')} onClose={() => setShowCreate(false)}>
|
<Modal title={t('dashboard.createRoom')} onClose={() => setShowCreate(false)}>
|
||||||
<form onSubmit={handleCreate} className="space-y-4">
|
<form onSubmit={handleCreate} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')} *</label>
|
<label htmlFor="create-room-name" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')} *</label>
|
||||||
<input
|
<input
|
||||||
|
id="create-room-name"
|
||||||
type="text"
|
type="text"
|
||||||
value={newRoom.name}
|
value={newRoom.name}
|
||||||
onChange={e => setNewRoom({ ...newRoom, name: e.target.value })}
|
onChange={e => setNewRoom({ ...newRoom, name: e.target.value })}
|
||||||
@@ -210,8 +215,9 @@ export default function Dashboard() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.welcomeMessage')}</label>
|
<label htmlFor="create-room-welcome" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.welcomeMessage')}</label>
|
||||||
<textarea
|
<textarea
|
||||||
|
id="create-room-welcome"
|
||||||
value={newRoom.welcome_message}
|
value={newRoom.welcome_message}
|
||||||
onChange={e => setNewRoom({ ...newRoom, welcome_message: e.target.value })}
|
onChange={e => setNewRoom({ ...newRoom, welcome_message: e.target.value })}
|
||||||
className="input-field resize-none"
|
className="input-field resize-none"
|
||||||
@@ -222,8 +228,9 @@ export default function Dashboard() {
|
|||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.maxParticipants')}</label>
|
<label htmlFor="create-room-max" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.maxParticipants')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="create-room-max"
|
||||||
type="number"
|
type="number"
|
||||||
value={newRoom.max_participants}
|
value={newRoom.max_participants}
|
||||||
onChange={e => setNewRoom({ ...newRoom, max_participants: parseInt(e.target.value) || 0 })}
|
onChange={e => setNewRoom({ ...newRoom, max_participants: parseInt(e.target.value) || 0 })}
|
||||||
@@ -233,8 +240,9 @@ export default function Dashboard() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.accessCode')}</label>
|
<label htmlFor="create-room-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.accessCode')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="create-room-access-code"
|
||||||
type="text"
|
type="text"
|
||||||
value={newRoom.access_code}
|
value={newRoom.access_code}
|
||||||
onChange={e => setNewRoom({ ...newRoom, access_code: e.target.value })}
|
onChange={e => setNewRoom({ ...newRoom, access_code: e.target.value })}
|
||||||
@@ -250,7 +258,7 @@ export default function Dashboard() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={newRoom.mute_on_join}
|
checked={newRoom.mute_on_join}
|
||||||
onChange={e => setNewRoom({ ...newRoom, mute_on_join: e.target.checked })}
|
onChange={e => setNewRoom({ ...newRoom, mute_on_join: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('dashboard.muteOnJoin')}</span>
|
<span className="text-sm text-th-text">{t('dashboard.muteOnJoin')}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -259,7 +267,7 @@ export default function Dashboard() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={newRoom.record_meeting}
|
checked={newRoom.record_meeting}
|
||||||
onChange={e => setNewRoom({ ...newRoom, record_meeting: e.target.checked })}
|
onChange={e => setNewRoom({ ...newRoom, record_meeting: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('dashboard.allowRecording')}</span>
|
<span className="text-sm text-th-text">{t('dashboard.allowRecording')}</span>
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ export default function FederatedRoomDetail() {
|
|||||||
{isDeleted && (
|
{isDeleted && (
|
||||||
<div className="card p-4 mb-4 border-red-500/30 bg-red-500/10">
|
<div className="card p-4 mb-4 border-red-500/30 bg-red-500/10">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<AlertTriangle size={20} className="text-red-500 flex-shrink-0" />
|
<AlertTriangle size={20} className="text-red-500 shrink-0" />
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-semibold text-red-500">{t('federation.roomDeleted')}</p>
|
<p className="text-sm font-semibold text-red-500">{t('federation.roomDeleted')}</p>
|
||||||
<p className="text-xs text-th-text-s mt-0.5">{t('federation.roomDeletedNotice')}</p>
|
<p className="text-xs text-th-text-s mt-0.5">{t('federation.roomDeletedNotice')}</p>
|
||||||
@@ -106,7 +106,7 @@ export default function FederatedRoomDetail() {
|
|||||||
<div className="card p-6 mb-4">
|
<div className="card p-6 mb-4">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||||
<div className="flex items-start gap-3 min-w-0">
|
<div className="flex items-start gap-3 min-w-0">
|
||||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 ${isDeleted ? 'bg-red-500/15' : 'bg-th-accent/15'}`}>
|
<div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 mt-0.5 ${isDeleted ? 'bg-red-500/15' : 'bg-th-accent/15'}`}>
|
||||||
{isDeleted ? <AlertTriangle size={20} className="text-red-500" /> : <Globe size={20} className="text-th-accent" />}
|
{isDeleted ? <AlertTriangle size={20} className="text-red-500" /> : <Globe size={20} className="text-th-accent" />}
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
@@ -128,7 +128,7 @@ export default function FederatedRoomDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
{!isDeleted && (
|
{!isDeleted && (
|
||||||
<button
|
<button
|
||||||
onClick={handleJoin}
|
onClick={handleJoin}
|
||||||
@@ -189,7 +189,7 @@ export default function FederatedRoomDetail() {
|
|||||||
|
|
||||||
{room.meet_id && (
|
{room.meet_id && (
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Hash size={16} className="text-th-accent flex-shrink-0 mt-0.5" />
|
<Hash size={16} className="text-th-accent shrink-0 mt-0.5" />
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<p className="text-xs text-th-text-s mb-0.5">{t('federation.meetingId')}</p>
|
<p className="text-xs text-th-text-s mb-0.5">{t('federation.meetingId')}</p>
|
||||||
<p className="text-sm font-mono text-th-text break-all">{room.meet_id}</p>
|
<p className="text-sm font-mono text-th-text break-all">{room.meet_id}</p>
|
||||||
@@ -198,7 +198,7 @@ export default function FederatedRoomDetail() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Link2 size={16} className="text-th-accent flex-shrink-0 mt-0.5" />
|
<Link2 size={16} className="text-th-accent shrink-0 mt-0.5" />
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<p className="text-xs text-th-text-s mb-0.5">{t('federation.joinUrl')}</p>
|
<p className="text-xs text-th-text-s mb-0.5">{t('federation.joinUrl')}</p>
|
||||||
<p className="text-sm font-mono text-th-text break-all opacity-60 select-all">{room.join_url}</p>
|
<p className="text-sm font-mono text-th-text break-all opacity-60 select-all">{room.join_url}</p>
|
||||||
|
|||||||
@@ -167,7 +167,7 @@ export default function FederationInbox() {
|
|||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Mail size={16} className="text-th-accent flex-shrink-0" />
|
<Mail size={16} className="text-th-accent shrink-0" />
|
||||||
<h3 className="text-base font-semibold text-th-text truncate">{inv.room_name}</h3>
|
<h3 className="text-base font-semibold text-th-text truncate">{inv.room_name}</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-th-text-s">
|
<p className="text-sm text-th-text-s">
|
||||||
@@ -180,7 +180,7 @@ export default function FederationInbox() {
|
|||||||
{new Date(inv.created_at).toLocaleString()}
|
{new Date(inv.created_at).toLocaleString()}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<button onClick={() => handleAccept(inv.id)} className="btn-primary text-sm">
|
<button onClick={() => handleAccept(inv.id)} className="btn-primary text-sm">
|
||||||
<Check size={16} />
|
<Check size={16} />
|
||||||
{t('federation.accept')}
|
{t('federation.accept')}
|
||||||
@@ -200,7 +200,7 @@ export default function FederationInbox() {
|
|||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Calendar size={16} className="text-th-success flex-shrink-0" />
|
<Calendar size={16} className="text-th-success shrink-0" />
|
||||||
<span className="text-xs font-semibold uppercase tracking-wide text-th-success mr-1">
|
<span className="text-xs font-semibold uppercase tracking-wide text-th-success mr-1">
|
||||||
{t('federation.calendarEvent')}
|
{t('federation.calendarEvent')}
|
||||||
</span>
|
</span>
|
||||||
@@ -219,7 +219,7 @@ export default function FederationInbox() {
|
|||||||
{new Date(inv.created_at).toLocaleString()}
|
{new Date(inv.created_at).toLocaleString()}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<button onClick={() => handleCalAccept(inv.id)} className="btn-primary text-sm">
|
<button onClick={() => handleCalAccept(inv.id)} className="btn-primary text-sm">
|
||||||
<Check size={16} />
|
<Check size={16} />
|
||||||
{t('federation.accept')}
|
{t('federation.accept')}
|
||||||
@@ -239,7 +239,7 @@ export default function FederationInbox() {
|
|||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Calendar size={16} className="text-th-accent flex-shrink-0" />
|
<Calendar size={16} className="text-th-accent shrink-0" />
|
||||||
<span className="text-xs font-semibold uppercase tracking-wide text-th-accent mr-1">
|
<span className="text-xs font-semibold uppercase tracking-wide text-th-accent mr-1">
|
||||||
{t('federation.localCalendarEvent')}
|
{t('federation.localCalendarEvent')}
|
||||||
</span>
|
</span>
|
||||||
@@ -258,7 +258,7 @@ export default function FederationInbox() {
|
|||||||
{new Date(inv.created_at).toLocaleString()}
|
{new Date(inv.created_at).toLocaleString()}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<button onClick={() => handleLocalCalAccept(inv.id)} className="btn-primary text-sm">
|
<button onClick={() => handleLocalCalAccept(inv.id)} className="btn-primary text-sm">
|
||||||
<Check size={16} />
|
<Check size={16} />
|
||||||
{t('federation.accept')}
|
{t('federation.accept')}
|
||||||
@@ -287,13 +287,13 @@ export default function FederationInbox() {
|
|||||||
<div key={`room-past-${inv.id}`} className="card p-4 opacity-70">
|
<div key={`room-past-${inv.id}`} className="card p-4 opacity-70">
|
||||||
<div className="flex items-center justify-between gap-4">
|
<div className="flex items-center justify-between gap-4">
|
||||||
<div className="min-w-0 flex items-center gap-2">
|
<div className="min-w-0 flex items-center gap-2">
|
||||||
<Mail size={14} className="text-th-text-s flex-shrink-0" />
|
<Mail size={14} className="text-th-text-s shrink-0" />
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h3 className="text-sm font-medium text-th-text truncate">{inv.room_name}</h3>
|
<h3 className="text-sm font-medium text-th-text truncate">{inv.room_name}</h3>
|
||||||
<p className="text-xs text-th-text-s">{inv.from_user}</p>
|
<p className="text-xs text-th-text-s">{inv.from_user}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
|
<span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
|
||||||
? 'bg-th-success/15 text-th-success'
|
? 'bg-th-success/15 text-th-success'
|
||||||
: 'bg-th-error/15 text-th-error'
|
: 'bg-th-error/15 text-th-error'
|
||||||
@@ -326,13 +326,13 @@ export default function FederationInbox() {
|
|||||||
<div key={`cal-past-${inv.id}`} className="card p-4 opacity-70">
|
<div key={`cal-past-${inv.id}`} className="card p-4 opacity-70">
|
||||||
<div className="flex items-center justify-between gap-4">
|
<div className="flex items-center justify-between gap-4">
|
||||||
<div className="min-w-0 flex items-center gap-2">
|
<div className="min-w-0 flex items-center gap-2">
|
||||||
<Calendar size={14} className="text-th-text-s flex-shrink-0" />
|
<Calendar size={14} className="text-th-text-s shrink-0" />
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
|
<h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
|
||||||
<p className="text-xs text-th-text-s">{inv.from_user} · {new Date(inv.start_time).toLocaleDateString()}</p>
|
<p className="text-xs text-th-text-s">{inv.from_user} · {new Date(inv.start_time).toLocaleDateString()}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
|
<span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
|
||||||
? 'bg-th-success/15 text-th-success'
|
? 'bg-th-success/15 text-th-success'
|
||||||
: 'bg-th-error/15 text-th-error'
|
: 'bg-th-error/15 text-th-error'
|
||||||
@@ -365,13 +365,13 @@ export default function FederationInbox() {
|
|||||||
<div key={`localcal-past-${inv.id}`} className="card p-4 opacity-70">
|
<div key={`localcal-past-${inv.id}`} className="card p-4 opacity-70">
|
||||||
<div className="flex items-center justify-between gap-4">
|
<div className="flex items-center justify-between gap-4">
|
||||||
<div className="min-w-0 flex items-center gap-2">
|
<div className="min-w-0 flex items-center gap-2">
|
||||||
<Calendar size={14} className="text-th-text-s flex-shrink-0" />
|
<Calendar size={14} className="text-th-text-s shrink-0" />
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
|
<h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
|
||||||
<p className="text-xs text-th-text-s">{inv.from_name} · {new Date(inv.start_time).toLocaleDateString()}</p>
|
<p className="text-xs text-th-text-s">{inv.from_name} · {new Date(inv.start_time).toLocaleDateString()}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
|
<span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
|
||||||
? 'bg-th-success/15 text-th-success'
|
? 'bg-th-success/15 text-th-success'
|
||||||
: 'bg-th-error/15 text-th-error'
|
: 'bg-th-error/15 text-th-error'
|
||||||
|
|||||||
+112
-86
@@ -1,8 +1,9 @@
|
|||||||
import { useState, useEffect, useRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import { useParams, Link, useSearchParams } from 'react-router-dom';
|
import { useParams, Link, useSearchParams, useNavigate } from 'react-router-dom';
|
||||||
import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio, AlertCircle, FileText, Clock, X } from 'lucide-react';
|
import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio, AlertCircle, FileText, Clock, X } from 'lucide-react';
|
||||||
import BrandLogo from '../components/BrandLogo';
|
import BrandLogo from '../components/BrandLogo';
|
||||||
import api from '../services/api';
|
import api from '../services/api';
|
||||||
|
import { isCurrentThemeDark } from '../themes';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
@@ -11,6 +12,7 @@ import { useBranding } from '../contexts/BrandingContext';
|
|||||||
export default function GuestJoin() {
|
export default function GuestJoin() {
|
||||||
const { uid } = useParams();
|
const { uid } = useParams();
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { imprintUrl, privacyUrl } = useBranding();
|
const { imprintUrl, privacyUrl } = useBranding();
|
||||||
@@ -19,7 +21,7 @@ export default function GuestJoin() {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [joining, setJoining] = useState(false);
|
const [joining, setJoining] = useState(false);
|
||||||
const [name, setName] = useState(user?.name || '');
|
const [name, setName] = useState(user?.display_name || user?.name || '');
|
||||||
const [accessCode, setAccessCode] = useState(searchParams.get('ac') || '');
|
const [accessCode, setAccessCode] = useState(searchParams.get('ac') || '');
|
||||||
const [moderatorCode, setModeratorCode] = useState('');
|
const [moderatorCode, setModeratorCode] = useState('');
|
||||||
const [status, setStatus] = useState({ running: false });
|
const [status, setStatus] = useState({ running: false });
|
||||||
@@ -30,11 +32,18 @@ export default function GuestJoin() {
|
|||||||
const joinMeeting = async () => {
|
const joinMeeting = async () => {
|
||||||
setJoining(true);
|
setJoining(true);
|
||||||
try {
|
try {
|
||||||
const res = await api.post(`/rooms/${uid}/guest-join`, {
|
const payload = {
|
||||||
name: name.trim(),
|
name: name.trim(),
|
||||||
access_code: accessCode || undefined,
|
access_code: accessCode || undefined,
|
||||||
moderator_code: moderatorCode || undefined,
|
moderator_code: moderatorCode || undefined,
|
||||||
});
|
dark_mode: isCurrentThemeDark(),
|
||||||
|
};
|
||||||
|
// If logged in, send avatar data
|
||||||
|
if (isLoggedIn && user) {
|
||||||
|
if (user.avatar_image) payload.avatar_image = user.avatar_image;
|
||||||
|
if (user.avatar_color) payload.avatar_color = user.avatar_color;
|
||||||
|
}
|
||||||
|
const res = await api.post(`/rooms/${uid}/guest-join`, payload);
|
||||||
if (res.data.joinUrl) {
|
if (res.data.joinUrl) {
|
||||||
window.location.href = res.data.joinUrl;
|
window.location.href = res.data.joinUrl;
|
||||||
}
|
}
|
||||||
@@ -54,6 +63,17 @@ export default function GuestJoin() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchRoom = async () => {
|
const fetchRoom = async () => {
|
||||||
|
// If logged in, check if user owns or has access to this room
|
||||||
|
if (isLoggedIn) {
|
||||||
|
try {
|
||||||
|
await api.get(`/rooms/${uid}`);
|
||||||
|
navigate(`/rooms/${uid}`, { replace: true });
|
||||||
|
return;
|
||||||
|
} catch {
|
||||||
|
// User doesn't have access — continue as guest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await api.get(`/rooms/${uid}/public`);
|
const res = await api.get(`/rooms/${uid}/public`);
|
||||||
setRoomInfo(res.data.room);
|
setRoomInfo(res.data.room);
|
||||||
@@ -89,7 +109,7 @@ export default function GuestJoin() {
|
|||||||
// Auto-join when meeting starts while waiting
|
// Auto-join when meeting starts while waiting
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!prevRunningRef.current && status.running && waiting) {
|
if (!prevRunningRef.current && status.running && waiting) {
|
||||||
new Audio('/sounds/meeting-started.mp3').play().catch(() => {});
|
new Audio('/sounds/meeting-started.mp3').play().catch(() => { });
|
||||||
toast.success(t('room.guestMeetingStartedJoining'));
|
toast.success(t('room.guestMeetingStartedJoining'));
|
||||||
joinMeeting();
|
joinMeeting();
|
||||||
}
|
}
|
||||||
@@ -106,7 +126,7 @@ export default function GuestJoin() {
|
|||||||
toast.error(t('room.guestRecordingConsent'));
|
toast.error(t('room.guestRecordingConsent'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!status.running) {
|
if (!status.running && !roomInfo?.anyone_can_start) {
|
||||||
setWaiting(true);
|
setWaiting(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -210,97 +230,103 @@ export default function GuestJoin() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleJoin} className="space-y-4">
|
<form onSubmit={handleJoin} className="space-y-4">
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
|
|
||||||
<div className="relative">
|
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={name}
|
|
||||||
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={!isLoggedIn}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{roomInfo.has_access_code && (
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
|
<label htmlFor="guest-name" className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="guest-name"
|
||||||
type="text"
|
type="text"
|
||||||
value={accessCode}
|
autoComplete="name"
|
||||||
onChange={e => setAccessCode(e.target.value)}
|
value={name}
|
||||||
className="input-field pl-11"
|
onChange={e => !isLoggedIn && setName(e.target.value)}
|
||||||
placeholder={t('room.guestAccessCodePlaceholder')}
|
readOnly={isLoggedIn}
|
||||||
|
className={`input-field pl-11 ${isLoggedIn ? 'opacity-70 cursor-not-allowed' : ''}`}
|
||||||
|
placeholder={t('room.guestNamePlaceholder')}
|
||||||
|
required
|
||||||
|
autoFocus={!isLoggedIn}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
{roomInfo.has_access_code && (
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">
|
<div>
|
||||||
{t('room.guestModeratorCode')}
|
<label htmlFor="guest-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
|
||||||
<span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span>
|
<div className="relative">
|
||||||
</label>
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<div className="relative">
|
<input
|
||||||
<Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
id="guest-access-code"
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
autoComplete="off"
|
||||||
value={moderatorCode}
|
value={accessCode}
|
||||||
onChange={e => setModeratorCode(e.target.value)}
|
onChange={e => setAccessCode(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
placeholder={t('room.guestModeratorPlaceholder')}
|
placeholder={t('room.guestAccessCodePlaceholder')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Recording consent notice */}
|
|
||||||
{roomInfo.allow_recording && (
|
|
||||||
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 space-y-3">
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<AlertCircle size={16} className="text-amber-500 flex-shrink-0 mt-0.5" />
|
|
||||||
<p className="text-sm text-amber-400">{t('room.guestRecordingNotice')}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<label className="flex items-center gap-2.5 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={recordingConsent}
|
|
||||||
onChange={e => setRecordingConsent(e.target.checked)}
|
|
||||||
className="w-4 h-4 rounded accent-amber-500 cursor-pointer"
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-th-text">{t('room.guestRecordingConsent')}</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={joining || (roomInfo.allow_recording && !recordingConsent)}
|
|
||||||
className="btn-primary w-full py-3"
|
|
||||||
>
|
|
||||||
{joining ? (
|
|
||||||
<Loader2 size={18} className="animate-spin" />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{t('room.guestJoinButton')}
|
|
||||||
<ArrowRight size={18} />
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</button>
|
|
||||||
|
|
||||||
{!status.running && (
|
<div>
|
||||||
<p className="text-xs text-th-text-s text-center">
|
<label htmlFor="guest-moderator-code" className="block text-sm font-medium text-th-text mb-1.5">
|
||||||
{t('room.guestWaitingMessage')}
|
{t('room.guestModeratorCode')}
|
||||||
</p>
|
<span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span>
|
||||||
)}
|
</label>
|
||||||
</form>
|
<div className="relative">
|
||||||
|
<Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
|
<input
|
||||||
|
id="guest-moderator-code"
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
value={moderatorCode}
|
||||||
|
onChange={e => setModeratorCode(e.target.value)}
|
||||||
|
className="input-field pl-11"
|
||||||
|
placeholder={t('room.guestModeratorPlaceholder')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recording consent notice */}
|
||||||
|
{roomInfo.allow_recording && (
|
||||||
|
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 space-y-3">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<AlertCircle size={16} className="text-amber-500 shrink-0 mt-0.5" />
|
||||||
|
<p className="text-sm text-amber-400">{t('room.guestRecordingNotice')}</p>
|
||||||
|
</div>
|
||||||
|
<label className="flex items-center gap-2.5 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={recordingConsent}
|
||||||
|
onChange={e => setRecordingConsent(e.target.checked)}
|
||||||
|
className="w-4 h-4 rounded-sm accent-amber-500 cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-th-text">{t('room.guestRecordingConsent')}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={joining || (roomInfo.allow_recording && !recordingConsent)}
|
||||||
|
className="btn-primary w-full py-3"
|
||||||
|
>
|
||||||
|
{joining ? (
|
||||||
|
<Loader2 size={18} className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{t('room.guestJoinButton')}
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{!status.running && !roomInfo?.anyone_can_start && (
|
||||||
|
<p className="text-xs text-th-text-s text-center">
|
||||||
|
{t('room.guestWaitingMessage')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isLoggedIn && (
|
{!isLoggedIn && (
|
||||||
|
|||||||
+39
-72
@@ -1,5 +1,5 @@
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { Video, Shield, Users, Palette, ArrowRight, Zap, Globe, FileText, Lock } from 'lucide-react';
|
import { Video, Users, FileVideo, Network, CalendarDays, BarChart2, ArrowRight, FileText, Lock } from 'lucide-react';
|
||||||
import BrandLogo from '../components/BrandLogo';
|
import BrandLogo from '../components/BrandLogo';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
import { useBranding } from '../contexts/BrandingContext';
|
import { useBranding } from '../contexts/BrandingContext';
|
||||||
@@ -21,37 +21,35 @@ export default function Home() {
|
|||||||
desc: t('home.featureRoomsDesc'),
|
desc: t('home.featureRoomsDesc'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: FileVideo,
|
||||||
title: t('home.featureUsersTitle'),
|
|
||||||
desc: t('home.featureUsersDesc'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Palette,
|
|
||||||
title: t('home.featureThemesTitle'),
|
|
||||||
desc: t('home.featureThemesDesc'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Zap,
|
|
||||||
title: t('home.featureRecordingsTitle'),
|
title: t('home.featureRecordingsTitle'),
|
||||||
desc: t('home.featureRecordingsDesc'),
|
desc: t('home.featureRecordingsDesc'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Globe,
|
icon: Network,
|
||||||
title: t('home.featureOpenSourceTitle'),
|
title: t('home.featureFederationTitle'),
|
||||||
desc: t('home.featureOpenSourceDesc'),
|
desc: t('home.featureFederationDesc'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: CalendarDays,
|
||||||
|
title: t('home.featureCalendarTitle'),
|
||||||
|
desc: t('home.featureCalendarDesc'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: BarChart2,
|
||||||
|
title: t('home.featureAnalyticsTitle'),
|
||||||
|
desc: t('home.featureAnalyticsDesc'),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-th-bg">
|
<div className="min-h-screen bg-th-bg">
|
||||||
{/* Hero Section */}
|
|
||||||
<div className="relative overflow-hidden">
|
<div className="relative overflow-hidden">
|
||||||
{/* Background gradient */}
|
{/* Background gradient */}
|
||||||
<div className="absolute inset-0 gradient-bg opacity-5" />
|
<div className="absolute inset-0 gradient-bg opacity-5" />
|
||||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] gradient-bg opacity-10 blur-3xl rounded-full" />
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] gradient-bg opacity-10 blur-3xl rounded-full" />
|
||||||
|
|
||||||
{/* Navbar */}
|
<nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4 border-b border-th-border">
|
||||||
<nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4">
|
|
||||||
<BrandLogo size="md" />
|
<BrandLogo size="md" />
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Link to="/login" className="btn-ghost text-sm">
|
<Link to="/login" className="btn-ghost text-sm">
|
||||||
@@ -60,81 +58,50 @@ export default function Home() {
|
|||||||
{!isInviteOnly && (
|
{!isInviteOnly && (
|
||||||
<Link to="/register" className="btn-primary text-sm">
|
<Link to="/register" className="btn-primary text-sm">
|
||||||
{t('auth.register')}
|
{t('auth.register')}
|
||||||
<ArrowRight size={16} />
|
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Hero content */}
|
{/* Hero */}
|
||||||
<div className="relative z-10 max-w-4xl mx-auto text-center px-6 pt-20 pb-32">
|
<div className="relative z-10 max-w-3xl mx-auto px-6 pt-24 pb-20">
|
||||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-th-accent/10 text-th-accent text-sm font-medium mb-6">
|
<h1 className="text-3xl md:text-4xl font-bold text-th-text mb-4">
|
||||||
<Zap size={14} />
|
{t('home.heroTitle')}
|
||||||
{t('home.madeFor')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-th-text mb-6 leading-tight tracking-tight">
|
|
||||||
{t('home.heroTitle')}{' '}
|
|
||||||
<span className="gradient-text">{t('home.heroTitleHighlight')}</span>
|
|
||||||
</h1>
|
</h1>
|
||||||
|
<p className="text-lg text-th-text-s mb-8 leading-relaxed">
|
||||||
<p className="text-lg md:text-xl text-th-text-s max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
||||||
{t('home.heroSubtitle')}
|
{t('home.heroSubtitle')}
|
||||||
</p>
|
</p>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-4 justify-center">
|
|
||||||
{!isInviteOnly && (
|
{!isInviteOnly && (
|
||||||
<Link to="/register" className="btn-primary text-base px-8 py-3">
|
<Link to="/register" className="btn-primary px-6 py-2.5">
|
||||||
{t('home.getStarted')}
|
{t('home.getStarted')}
|
||||||
<ArrowRight size={18} />
|
<ArrowRight size={16} />
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
<Link to="/login" className={`${isInviteOnly ? 'btn-primary' : 'btn-secondary'} text-base px-8 py-3`}>
|
<Link to="/login" className={`${isInviteOnly ? 'btn-primary' : 'btn-secondary'} px-6 py-2.5`}>
|
||||||
{t('auth.login')}
|
{t('auth.login')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats */}
|
|
||||||
<div className="flex items-center justify-center gap-8 md:gap-16 mt-16">
|
|
||||||
{[
|
|
||||||
{ value: '15+', label: t('home.statThemes') },
|
|
||||||
{ value: '∞', label: t('home.statRooms') },
|
|
||||||
{ value: '100%', label: t('home.statOpenSource') },
|
|
||||||
].map(stat => (
|
|
||||||
<div key={stat.label} className="text-center">
|
|
||||||
<div className="text-2xl md:text-3xl font-bold gradient-text">{stat.value}</div>
|
|
||||||
<div className="text-sm text-th-text-s mt-1">{stat.label}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Features Section */}
|
{/* Features */}
|
||||||
<div className="max-w-6xl mx-auto px-6 py-20">
|
<div className="border-t border-th-border">
|
||||||
<div className="text-center mb-16">
|
<div className="max-w-5xl mx-auto px-6 py-16">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-th-text mb-4">
|
<h2 className="text-xl font-semibold text-th-text mb-10">
|
||||||
{t('home.features')}
|
{t('home.features')}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-th-text-s max-w-2xl mx-auto">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{t('home.featuresSubtitle')}
|
{features.map(feature => (
|
||||||
</p>
|
<div key={feature.title} className="card p-6 hover:shadow-th-lg transition-shadow">
|
||||||
</div>
|
<div className="w-12 h-12 rounded-xl bg-th-accent/10 flex items-center justify-center mb-4">
|
||||||
|
<feature.icon size={24} className="text-th-accent" />
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
</div>
|
||||||
{features.map((feature, idx) => (
|
<h3 className="text-base font-semibold text-th-text mb-2">{feature.title}</h3>
|
||||||
<div key={idx} className="card p-6 hover:shadow-th-lg transition-all duration-300 group">
|
<p className="text-sm text-th-text-s leading-relaxed">{feature.desc}</p>
|
||||||
<div className="w-12 h-12 rounded-xl gradient-bg/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
|
|
||||||
style={{ background: `linear-gradient(135deg, var(--gradient-start), var(--gradient-end))`, opacity: 0.15 }}>
|
|
||||||
<feature.icon size={24} className="text-th-accent" style={{ opacity: 1 }} />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 -mt-16 relative">
|
))}
|
||||||
<feature.icon size={24} className="text-th-accent" />
|
</div>
|
||||||
</div>
|
|
||||||
<h3 className="text-base font-semibold text-th-text mb-2">{feature.title}</h3>
|
|
||||||
<p className="text-sm text-th-text-s leading-relaxed">{feature.desc}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+203
-98
@@ -1,9 +1,9 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
import { useBranding } from '../contexts/BrandingContext';
|
import { useBranding } from '../contexts/BrandingContext';
|
||||||
import { Mail, Lock, ArrowRight, Loader2, AlertTriangle, RefreshCw, LogIn } from 'lucide-react';
|
import { Mail, Lock, ArrowRight, Loader2, AlertTriangle, RefreshCw, LogIn, ShieldCheck } from 'lucide-react';
|
||||||
import BrandLogo from '../components/BrandLogo';
|
import BrandLogo from '../components/BrandLogo';
|
||||||
import api from '../services/api';
|
import api from '../services/api';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
@@ -15,7 +15,14 @@ export default function Login() {
|
|||||||
const [needsVerification, setNeedsVerification] = useState(false);
|
const [needsVerification, setNeedsVerification] = useState(false);
|
||||||
const [resendCooldown, setResendCooldown] = useState(0);
|
const [resendCooldown, setResendCooldown] = useState(0);
|
||||||
const [resending, setResending] = useState(false);
|
const [resending, setResending] = useState(false);
|
||||||
const { login } = useAuth();
|
// 2FA state
|
||||||
|
const [needs2FA, setNeeds2FA] = useState(false);
|
||||||
|
const [tempToken, setTempToken] = useState('');
|
||||||
|
const [totpCode, setTotpCode] = useState('');
|
||||||
|
const [verifying2FA, setVerifying2FA] = useState(false);
|
||||||
|
const totpInputRef = useRef(null);
|
||||||
|
|
||||||
|
const { login, verify2FA } = useAuth();
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
const { registrationMode, oauthEnabled, oauthDisplayName } = useBranding();
|
const { registrationMode, oauthEnabled, oauthDisplayName } = useBranding();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -26,6 +33,13 @@ export default function Login() {
|
|||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [resendCooldown]);
|
}, [resendCooldown]);
|
||||||
|
|
||||||
|
// Auto-focus TOTP input when 2FA screen appears
|
||||||
|
useEffect(() => {
|
||||||
|
if (needs2FA && totpInputRef.current) {
|
||||||
|
totpInputRef.current.focus();
|
||||||
|
}
|
||||||
|
}, [needs2FA]);
|
||||||
|
|
||||||
const handleResend = async () => {
|
const handleResend = async () => {
|
||||||
if (resendCooldown > 0 || resending) return;
|
if (resendCooldown > 0 || resending) return;
|
||||||
setResending(true);
|
setResending(true);
|
||||||
@@ -48,7 +62,13 @@ export default function Login() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
await login(email, password);
|
const result = await login(email, password);
|
||||||
|
if (result?.requires2FA) {
|
||||||
|
setTempToken(result.tempToken);
|
||||||
|
setNeeds2FA(true);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
toast.success(t('auth.loginSuccess'));
|
toast.success(t('auth.loginSuccess'));
|
||||||
navigate('/dashboard');
|
navigate('/dashboard');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -62,6 +82,27 @@ export default function Login() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handle2FASubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setVerifying2FA(true);
|
||||||
|
try {
|
||||||
|
await verify2FA(tempToken, totpCode);
|
||||||
|
toast.success(t('auth.loginSuccess'));
|
||||||
|
navigate('/dashboard');
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.response?.data?.error || t('auth.2fa.verifyFailed'));
|
||||||
|
setTotpCode('');
|
||||||
|
} finally {
|
||||||
|
setVerifying2FA(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
setNeeds2FA(false);
|
||||||
|
setTempToken('');
|
||||||
|
setTotpCode('');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
|
<div className="min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
|
||||||
{/* Animated background */}
|
{/* Animated background */}
|
||||||
@@ -81,111 +122,175 @@ export default function Login() {
|
|||||||
<BrandLogo size="lg" />
|
<BrandLogo size="lg" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-8">
|
{needs2FA ? (
|
||||||
<h2 className="text-2xl font-bold text-th-text mb-2">{t('auth.welcomeBack')}</h2>
|
<>
|
||||||
<p className="text-th-text-s">
|
{/* 2FA verification step */}
|
||||||
{t('auth.loginSubtitle')}
|
<div className="mb-8 text-center">
|
||||||
</p>
|
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-th-accent/10 mb-4">
|
||||||
</div>
|
<ShieldCheck size={28} className="text-th-accent" />
|
||||||
|
</div>
|
||||||
<form onSubmit={handleSubmit} className="space-y-5">
|
<h2 className="text-2xl font-bold text-th-text mb-2">{t('auth.2fa.title')}</h2>
|
||||||
<div>
|
<p className="text-th-text-s text-sm">
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
{t('auth.2fa.prompt')}
|
||||||
<div className="relative">
|
</p>
|
||||||
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={e => setEmail(e.target.value)}
|
|
||||||
className="input-field pl-11"
|
|
||||||
placeholder={t('auth.emailPlaceholder')}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<form onSubmit={handle2FASubmit} className="space-y-5">
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
|
<div>
|
||||||
<div className="relative">
|
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.2fa.codeLabel')}</label>
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<div className="relative">
|
||||||
<input
|
<ShieldCheck size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
||||||
type="password"
|
<input
|
||||||
value={password}
|
ref={totpInputRef}
|
||||||
onChange={e => setPassword(e.target.value)}
|
type="text"
|
||||||
className="input-field pl-11"
|
inputMode="numeric"
|
||||||
placeholder={t('auth.passwordPlaceholder')}
|
autoComplete="one-time-code"
|
||||||
required
|
value={totpCode}
|
||||||
/>
|
onChange={e => setTotpCode(e.target.value.replace(/[^0-9\s]/g, '').slice(0, 7))}
|
||||||
|
className="input-field pl-11 text-center text-lg tracking-[0.3em] font-mono"
|
||||||
|
placeholder="000 000"
|
||||||
|
required
|
||||||
|
maxLength={7}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={verifying2FA || totpCode.replace(/\s/g, '').length < 6}
|
||||||
|
className="btn-primary w-full py-3"
|
||||||
|
>
|
||||||
|
{verifying2FA ? (
|
||||||
|
<Loader2 size={18} className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{t('auth.2fa.verify')}
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleBack}
|
||||||
|
className="block mt-4 w-full text-center text-sm text-th-text-s hover:text-th-text transition-colors"
|
||||||
|
>
|
||||||
|
{t('auth.2fa.backToLogin')}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-th-text mb-2">{t('auth.welcomeBack')}</h2>
|
||||||
|
<p className="text-th-text-s">
|
||||||
|
{t('auth.loginSubtitle')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
type="submit"
|
<div>
|
||||||
disabled={loading}
|
<label htmlFor="login-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
||||||
className="btn-primary w-full py-3"
|
<div className="relative">
|
||||||
>
|
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
{loading ? (
|
<input
|
||||||
<Loader2 size={18} className="animate-spin" />
|
id="login-email"
|
||||||
) : (
|
type="email"
|
||||||
|
autoComplete="email"
|
||||||
|
value={email}
|
||||||
|
onChange={e => setEmail(e.target.value)}
|
||||||
|
className="input-field pl-11"
|
||||||
|
placeholder={t('auth.emailPlaceholder')}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="login-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
|
<input
|
||||||
|
id="login-password"
|
||||||
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
value={password}
|
||||||
|
onChange={e => setPassword(e.target.value)}
|
||||||
|
className="input-field pl-11"
|
||||||
|
placeholder={t('auth.passwordPlaceholder')}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="btn-primary w-full py-3"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<Loader2 size={18} className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{t('auth.login')}
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{oauthEnabled && (
|
||||||
<>
|
<>
|
||||||
{t('auth.login')}
|
<div className="relative my-6">
|
||||||
<ArrowRight size={18} />
|
<div className="absolute inset-0 flex items-center">
|
||||||
|
<div className="w-full border-t border-th-border" />
|
||||||
|
</div>
|
||||||
|
<div className="relative flex justify-center text-xs">
|
||||||
|
<span className="px-3 bg-th-card/80 text-th-text-s">{t('auth.orContinueWith')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="/api/oauth/authorize"
|
||||||
|
className="btn-secondary w-full py-3 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<LogIn size={18} />
|
||||||
|
{t('auth.loginWithOAuth').replace('{provider}', oauthDisplayName || 'SSO')}
|
||||||
|
</a>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
{oauthEnabled && (
|
{needsVerification && (
|
||||||
<>
|
<div className="mt-4 p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 space-y-2">
|
||||||
<div className="relative my-6">
|
<div className="flex items-start gap-2">
|
||||||
<div className="absolute inset-0 flex items-center">
|
<AlertTriangle size={16} className="text-amber-400 shrink-0 mt-0.5" />
|
||||||
<div className="w-full border-t border-th-border" />
|
<p className="text-sm text-amber-200">{t('auth.emailVerificationBanner')}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleResend}
|
||||||
|
disabled={resendCooldown > 0 || resending}
|
||||||
|
className="flex items-center gap-1.5 text-sm text-amber-400 hover:text-amber-300 underline underline-offset-2 transition-colors disabled:opacity-60 disabled:no-underline disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<RefreshCw size={13} className={resending ? 'animate-spin' : ''} />
|
||||||
|
{resendCooldown > 0
|
||||||
|
? t('auth.emailVerificationResendCooldown').replace('{seconds}', resendCooldown)
|
||||||
|
: t('auth.emailVerificationResend')}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex justify-center text-xs">
|
)}
|
||||||
<span className="px-3 bg-th-card/80 text-th-text-s">{t('auth.orContinueWith')}</span>
|
|
||||||
</div>
|
{registrationMode !== 'invite' && (
|
||||||
</div>
|
<p className="mt-6 text-center text-sm text-th-text-s">
|
||||||
<a
|
{t('auth.noAccount')}{' '}
|
||||||
href="/api/oauth/authorize"
|
<Link to="/register" className="text-th-accent hover:underline font-medium">
|
||||||
className="btn-secondary w-full py-3 flex items-center justify-center gap-2"
|
{t('auth.signUpNow')}
|
||||||
>
|
</Link>
|
||||||
<LogIn size={18} />
|
</p>
|
||||||
{t('auth.loginWithOAuth').replace('{provider}', oauthDisplayName || 'SSO')}
|
)}
|
||||||
</a>
|
|
||||||
|
<Link to="/" className="block mt-4 text-center text-sm text-th-text-s hover:text-th-text transition-colors">
|
||||||
|
{t('auth.backToHome')}
|
||||||
|
</Link>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{needsVerification && (
|
|
||||||
<div className="mt-4 p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 space-y-2">
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<AlertTriangle size={16} className="text-amber-400 flex-shrink-0 mt-0.5" />
|
|
||||||
<p className="text-sm text-amber-200">{t('auth.emailVerificationBanner')}</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleResend}
|
|
||||||
disabled={resendCooldown > 0 || resending}
|
|
||||||
className="flex items-center gap-1.5 text-sm text-amber-400 hover:text-amber-300 underline underline-offset-2 transition-colors disabled:opacity-60 disabled:no-underline disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
<RefreshCw size={13} className={resending ? 'animate-spin' : ''} />
|
|
||||||
{resendCooldown > 0
|
|
||||||
? t('auth.emailVerificationResendCooldown').replace('{seconds}', resendCooldown)
|
|
||||||
: t('auth.emailVerificationResend')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{registrationMode !== 'invite' && (
|
|
||||||
<p className="mt-6 text-center text-sm text-th-text-s">
|
|
||||||
{t('auth.noAccount')}{' '}
|
|
||||||
<Link to="/register" className="text-th-accent hover:underline font-medium">
|
|
||||||
{t('auth.signUpNow')}
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+20
-10
@@ -104,11 +104,13 @@ export default function Register() {
|
|||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-5">
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
|
<label htmlFor="register-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="register-username"
|
||||||
type="text"
|
type="text"
|
||||||
|
autoComplete="username"
|
||||||
value={username}
|
value={username}
|
||||||
onChange={e => setUsername(e.target.value)}
|
onChange={e => setUsername(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -120,11 +122,13 @@ export default function Register() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
|
<label htmlFor="register-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="register-display-name"
|
||||||
type="text"
|
type="text"
|
||||||
|
autoComplete="name"
|
||||||
value={displayName}
|
value={displayName}
|
||||||
onChange={e => setDisplayName(e.target.value)}
|
onChange={e => setDisplayName(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -135,11 +139,13 @@ export default function Register() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
<label htmlFor="register-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="register-email"
|
||||||
type="email"
|
type="email"
|
||||||
|
autoComplete="email"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={e => setEmail(e.target.value)}
|
onChange={e => setEmail(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -150,11 +156,13 @@ export default function Register() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
|
<label htmlFor="register-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="register-password"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={e => setPassword(e.target.value)}
|
onChange={e => setPassword(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -166,11 +174,13 @@ export default function Register() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
|
<label htmlFor="register-confirm-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="register-confirm-password"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={confirmPassword}
|
value={confirmPassword}
|
||||||
onChange={e => setConfirmPassword(e.target.value)}
|
onChange={e => setConfirmPassword(e.target.value)}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
|
|||||||
+117
-41
@@ -8,6 +8,7 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import Modal from '../components/Modal';
|
import Modal from '../components/Modal';
|
||||||
import api from '../services/api';
|
import api from '../services/api';
|
||||||
|
import { isCurrentThemeDark } from '../themes';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
import RecordingList from '../components/RecordingList';
|
import RecordingList from '../components/RecordingList';
|
||||||
@@ -51,6 +52,7 @@ export default function RoomDetail() {
|
|||||||
// Federation invite state
|
// Federation invite state
|
||||||
const [showFedInvite, setShowFedInvite] = useState(false);
|
const [showFedInvite, setShowFedInvite] = useState(false);
|
||||||
const [fedAddress, setFedAddress] = useState('');
|
const [fedAddress, setFedAddress] = useState('');
|
||||||
|
const [fedEmails, setFedEmails] = useState('');
|
||||||
const [fedMessage, setFedMessage] = useState('');
|
const [fedMessage, setFedMessage] = useState('');
|
||||||
const [fedSending, setFedSending] = useState(false);
|
const [fedSending, setFedSending] = useState(false);
|
||||||
|
|
||||||
@@ -61,7 +63,10 @@ export default function RoomDetail() {
|
|||||||
|
|
||||||
const isOwner = room && user && room.user_id === user.id;
|
const isOwner = room && user && room.user_id === user.id;
|
||||||
const isShared = room && !!room.shared;
|
const isShared = room && !!room.shared;
|
||||||
|
const isAdmin = user?.role === 'admin';
|
||||||
const canManage = isOwner || isShared;
|
const canManage = isOwner || isShared;
|
||||||
|
const canStart = canManage || isAdmin || !!room?.anyone_can_start;
|
||||||
|
const canEnd = canManage || isAdmin;
|
||||||
|
|
||||||
const fetchRoom = async () => {
|
const fetchRoom = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -120,7 +125,7 @@ export default function RoomDetail() {
|
|||||||
toast.success(t('room.meetingStarted'));
|
toast.success(t('room.meetingStarted'));
|
||||||
setWaitingToJoin(false);
|
setWaitingToJoin(false);
|
||||||
setActionLoading('join');
|
setActionLoading('join');
|
||||||
api.post(`/rooms/${uid}/join`, {})
|
api.post(`/rooms/${uid}/join`, { dark_mode: isCurrentThemeDark() })
|
||||||
.then(res => { if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank'); })
|
.then(res => { if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank'); })
|
||||||
.catch(err => toast.error(err.response?.data?.error || t('room.joinFailed')))
|
.catch(err => toast.error(err.response?.data?.error || t('room.joinFailed')))
|
||||||
.finally(() => setActionLoading(null));
|
.finally(() => setActionLoading(null));
|
||||||
@@ -131,7 +136,7 @@ export default function RoomDetail() {
|
|||||||
const handleStart = async () => {
|
const handleStart = async () => {
|
||||||
setActionLoading('start');
|
setActionLoading('start');
|
||||||
try {
|
try {
|
||||||
const res = await api.post(`/rooms/${uid}/start`);
|
const res = await api.post(`/rooms/${uid}/start`, { dark_mode: isCurrentThemeDark() });
|
||||||
if (res.data.joinUrl) {
|
if (res.data.joinUrl) {
|
||||||
window.open(res.data.joinUrl, '_blank');
|
window.open(res.data.joinUrl, '_blank');
|
||||||
}
|
}
|
||||||
@@ -153,7 +158,8 @@ export default function RoomDetail() {
|
|||||||
setWaitingToJoin(false);
|
setWaitingToJoin(false);
|
||||||
setActionLoading('join');
|
setActionLoading('join');
|
||||||
try {
|
try {
|
||||||
const data = room.access_code ? { access_code: prompt(t('room.enterAccessCode')) } : {};
|
const data = { dark_mode: isCurrentThemeDark() };
|
||||||
|
if (room.access_code) data.access_code = prompt(t('room.enterAccessCode'));
|
||||||
const res = await api.post(`/rooms/${uid}/join`, data);
|
const res = await api.post(`/rooms/${uid}/join`, data);
|
||||||
if (res.data.joinUrl) {
|
if (res.data.joinUrl) {
|
||||||
window.open(res.data.joinUrl, '_blank');
|
window.open(res.data.joinUrl, '_blank');
|
||||||
@@ -196,6 +202,7 @@ export default function RoomDetail() {
|
|||||||
guest_access: !!editRoom.guest_access,
|
guest_access: !!editRoom.guest_access,
|
||||||
moderator_code: editRoom.moderator_code,
|
moderator_code: editRoom.moderator_code,
|
||||||
learning_analytics: !!editRoom.learning_analytics,
|
learning_analytics: !!editRoom.learning_analytics,
|
||||||
|
analytics_visibility: editRoom.analytics_visibility || 'owner',
|
||||||
});
|
});
|
||||||
setRoom(res.data.room);
|
setRoom(res.data.room);
|
||||||
setEditRoom(res.data.room);
|
setEditRoom(res.data.room);
|
||||||
@@ -265,25 +272,51 @@ export default function RoomDetail() {
|
|||||||
|
|
||||||
const handleFedInvite = async (e) => {
|
const handleFedInvite = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Accept @user@domain or user@domain — must have a domain part
|
const hasAddress = fedAddress.trim().length > 0;
|
||||||
const normalized = fedAddress.startsWith('@') ? fedAddress.slice(1) : fedAddress;
|
const hasEmails = fedEmails.trim().length > 0;
|
||||||
if (!normalized.includes('@') || normalized.endsWith('@')) {
|
|
||||||
|
if (!hasAddress && !hasEmails) {
|
||||||
toast.error(t('federation.addressHint'));
|
toast.error(t('federation.addressHint'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setFedSending(true);
|
setFedSending(true);
|
||||||
try {
|
try {
|
||||||
await api.post('/federation/invite', {
|
if (hasAddress) {
|
||||||
room_uid: uid,
|
// Federation address mode
|
||||||
to: fedAddress,
|
const normalized = fedAddress.startsWith('@') ? fedAddress.slice(1) : fedAddress;
|
||||||
message: fedMessage || undefined,
|
if (!normalized.includes('@') || normalized.endsWith('@')) {
|
||||||
});
|
toast.error(t('federation.addressHint'));
|
||||||
toast.success(t('federation.sent'));
|
setFedSending(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await api.post('/federation/invite', {
|
||||||
|
room_uid: uid,
|
||||||
|
to: fedAddress,
|
||||||
|
message: fedMessage || undefined,
|
||||||
|
});
|
||||||
|
toast.success(t('federation.sent'));
|
||||||
|
} else {
|
||||||
|
// Email mode
|
||||||
|
const emailList = fedEmails.split(',').map(e => e.trim()).filter(Boolean);
|
||||||
|
if (emailList.length === 0) {
|
||||||
|
toast.error(t('federation.emailHint'));
|
||||||
|
setFedSending(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await api.post('/rooms/invite-email', {
|
||||||
|
room_uid: uid,
|
||||||
|
emails: emailList,
|
||||||
|
message: fedMessage || undefined,
|
||||||
|
});
|
||||||
|
toast.success(t('federation.emailSent'));
|
||||||
|
}
|
||||||
setShowFedInvite(false);
|
setShowFedInvite(false);
|
||||||
setFedAddress('');
|
setFedAddress('');
|
||||||
|
setFedEmails('');
|
||||||
setFedMessage('');
|
setFedMessage('');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err.response?.data?.error || t('federation.sendFailed'));
|
toast.error(err.response?.data?.error || t(hasAddress ? 'federation.sendFailed' : 'federation.emailSendFailed'));
|
||||||
} finally {
|
} finally {
|
||||||
setFedSending(false);
|
setFedSending(false);
|
||||||
}
|
}
|
||||||
@@ -344,7 +377,7 @@ export default function RoomDetail() {
|
|||||||
const tabs = [
|
const tabs = [
|
||||||
{ id: 'overview', label: t('room.overview'), icon: Play },
|
{ id: 'overview', label: t('room.overview'), icon: Play },
|
||||||
{ id: 'recordings', label: t('room.recordings'), icon: FileVideo, count: recordings.length },
|
{ id: 'recordings', label: t('room.recordings'), icon: FileVideo, count: recordings.length },
|
||||||
{ id: 'analytics', label: t('room.analytics'), icon: BarChart3, count: analytics.length },
|
{ id: 'analytics', label: t('room.analytics'), icon: BarChart3, count: analytics.length, hidden: !room.learning_analytics || (isShared && room.analytics_visibility !== 'shared') },
|
||||||
...(isOwner ? [{ id: 'settings', label: t('room.settings'), icon: Settings }] : []),
|
...(isOwner ? [{ id: 'settings', label: t('room.settings'), icon: Settings }] : []),
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -424,7 +457,7 @@ export default function RoomDetail() {
|
|||||||
<span className="hidden sm:inline">{t('federation.inviteRemote')}</span>
|
<span className="hidden sm:inline">{t('federation.inviteRemote')}</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{canManage && !status.running && !waitingToJoin && (
|
{canStart && !status.running && !waitingToJoin && (
|
||||||
<button onClick={handleStart} disabled={actionLoading === 'start'} className="btn-primary">
|
<button onClick={handleStart} disabled={actionLoading === 'start'} className="btn-primary">
|
||||||
{actionLoading === 'start' ? <Loader2 size={16} className="animate-spin" /> : <Play size={16} />}
|
{actionLoading === 'start' ? <Loader2 size={16} className="animate-spin" /> : <Play size={16} />}
|
||||||
{t('room.start')}
|
{t('room.start')}
|
||||||
@@ -439,7 +472,7 @@ export default function RoomDetail() {
|
|||||||
{(actionLoading === 'join' || waitingToJoin) ? <Loader2 size={16} className="animate-spin" /> : <ExternalLink size={16} />}
|
{(actionLoading === 'join' || waitingToJoin) ? <Loader2 size={16} className="animate-spin" /> : <ExternalLink size={16} />}
|
||||||
{waitingToJoin ? t('room.waitingToJoin') : t('room.join')}
|
{waitingToJoin ? t('room.waitingToJoin') : t('room.join')}
|
||||||
</button>
|
</button>
|
||||||
{canManage && status.running && (
|
{canEnd && status.running && (
|
||||||
<button onClick={handleEnd} disabled={actionLoading === 'end'} className="btn-danger">
|
<button onClick={handleEnd} disabled={actionLoading === 'end'} className="btn-danger">
|
||||||
{actionLoading === 'end' ? <Loader2 size={16} className="animate-spin" /> : <Square size={16} />}
|
{actionLoading === 'end' ? <Loader2 size={16} className="animate-spin" /> : <Square size={16} />}
|
||||||
{t('room.end')}
|
{t('room.end')}
|
||||||
@@ -451,7 +484,7 @@ export default function RoomDetail() {
|
|||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
<div className="flex items-center gap-1 mb-6 border-b border-th-border">
|
<div className="flex items-center gap-1 mb-6 border-b border-th-border">
|
||||||
{tabs.map(tab => (
|
{tabs.filter(tab => !tab.hidden).map(tab => (
|
||||||
<button
|
<button
|
||||||
key={tab.id}
|
key={tab.id}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
onClick={() => setActiveTab(tab.id)}
|
||||||
@@ -480,7 +513,7 @@ export default function RoomDetail() {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center justify-between text-sm">
|
<div className="flex items-center justify-between text-sm">
|
||||||
<span className="text-th-text-s">{t('room.meetingId')}</span>
|
<span className="text-th-text-s">{t('room.meetingId')}</span>
|
||||||
<code className="bg-th-bg-s px-2 py-0.5 rounded text-xs text-th-text font-mono">{room.uid}</code>
|
<code className="bg-th-bg-s px-2 py-0.5 rounded-sm text-xs text-th-text font-mono">{room.uid}</code>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between text-sm">
|
<div className="flex items-center justify-between text-sm">
|
||||||
<span className="text-th-text-s">{t('room.status')}</span>
|
<span className="text-th-text-s">{t('room.status')}</span>
|
||||||
@@ -543,14 +576,15 @@ export default function RoomDetail() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'analytics' && (
|
{activeTab === 'analytics' && (
|
||||||
<AnalyticsList analytics={analytics} onRefresh={fetchAnalytics} />
|
<AnalyticsList analytics={analytics} onRefresh={fetchAnalytics} isOwner={isOwner} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'settings' && isOwner && editRoom && (
|
{activeTab === 'settings' && isOwner && editRoom && (
|
||||||
<form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl">
|
<form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
|
<label htmlFor="room-settings-name" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="room-settings-name"
|
||||||
type="text"
|
type="text"
|
||||||
value={editRoom.name}
|
value={editRoom.name}
|
||||||
onChange={e => setEditRoom({ ...editRoom, name: e.target.value })}
|
onChange={e => setEditRoom({ ...editRoom, name: e.target.value })}
|
||||||
@@ -561,8 +595,9 @@ export default function RoomDetail() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
|
<label htmlFor="room-settings-welcome" className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
|
||||||
<textarea
|
<textarea
|
||||||
|
id="room-settings-welcome"
|
||||||
value={editRoom.welcome_message || ''}
|
value={editRoom.welcome_message || ''}
|
||||||
onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })}
|
onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })}
|
||||||
className="input-field resize-none"
|
className="input-field resize-none"
|
||||||
@@ -572,8 +607,9 @@ export default function RoomDetail() {
|
|||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
|
<label htmlFor="room-settings-max" className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="room-settings-max"
|
||||||
type="number"
|
type="number"
|
||||||
value={editRoom.max_participants}
|
value={editRoom.max_participants}
|
||||||
onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })}
|
onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })}
|
||||||
@@ -582,8 +618,9 @@ export default function RoomDetail() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
|
<label htmlFor="room-settings-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="room-settings-access-code"
|
||||||
type="text"
|
type="text"
|
||||||
value={editRoom.access_code || ''}
|
value={editRoom.access_code || ''}
|
||||||
onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })}
|
onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })}
|
||||||
@@ -599,7 +636,7 @@ export default function RoomDetail() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!!editRoom.mute_on_join}
|
checked={!!editRoom.mute_on_join}
|
||||||
onChange={e => setEditRoom({ ...editRoom, mute_on_join: e.target.checked })}
|
onChange={e => setEditRoom({ ...editRoom, mute_on_join: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('room.muteOnJoin')}</span>
|
<span className="text-sm text-th-text">{t('room.muteOnJoin')}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -608,7 +645,7 @@ export default function RoomDetail() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!!editRoom.require_approval}
|
checked={!!editRoom.require_approval}
|
||||||
onChange={e => setEditRoom({ ...editRoom, require_approval: e.target.checked })}
|
onChange={e => setEditRoom({ ...editRoom, require_approval: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('room.requireApproval')}</span>
|
<span className="text-sm text-th-text">{t('room.requireApproval')}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -617,7 +654,7 @@ export default function RoomDetail() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!!editRoom.anyone_can_start}
|
checked={!!editRoom.anyone_can_start}
|
||||||
onChange={e => setEditRoom({ ...editRoom, anyone_can_start: e.target.checked })}
|
onChange={e => setEditRoom({ ...editRoom, anyone_can_start: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('room.anyoneCanStart')}</span>
|
<span className="text-sm text-th-text">{t('room.anyoneCanStart')}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -626,7 +663,7 @@ export default function RoomDetail() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!!editRoom.all_join_moderator}
|
checked={!!editRoom.all_join_moderator}
|
||||||
onChange={e => setEditRoom({ ...editRoom, all_join_moderator: e.target.checked })}
|
onChange={e => setEditRoom({ ...editRoom, all_join_moderator: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('room.allJoinModerator')}</span>
|
<span className="text-sm text-th-text">{t('room.allJoinModerator')}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -635,7 +672,7 @@ export default function RoomDetail() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!!editRoom.record_meeting}
|
checked={!!editRoom.record_meeting}
|
||||||
onChange={e => setEditRoom({ ...editRoom, record_meeting: e.target.checked })}
|
onChange={e => setEditRoom({ ...editRoom, record_meeting: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('room.allowRecording')}</span>
|
<span className="text-sm text-th-text">{t('room.allowRecording')}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -644,10 +681,25 @@ export default function RoomDetail() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!!editRoom.learning_analytics}
|
checked={!!editRoom.learning_analytics}
|
||||||
onChange={e => setEditRoom({ ...editRoom, learning_analytics: e.target.checked })}
|
onChange={e => setEditRoom({ ...editRoom, learning_analytics: e.target.checked })}
|
||||||
className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
|
className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-th-text">{t('room.enableAnalytics')}</span>
|
<span className="text-sm text-th-text">{t('room.enableAnalytics')}</span>
|
||||||
</label>
|
</label>
|
||||||
|
{!!editRoom.learning_analytics && (
|
||||||
|
<div className="ml-7">
|
||||||
|
<label htmlFor="room-settings-analytics-visibility" className="block text-xs font-medium text-th-text-s mb-1">{t('room.analyticsVisibility')}</label>
|
||||||
|
<select
|
||||||
|
id="room-settings-analytics-visibility"
|
||||||
|
value={editRoom.analytics_visibility || 'owner'}
|
||||||
|
onChange={e => setEditRoom({ ...editRoom, analytics_visibility: e.target.value })}
|
||||||
|
className="input-field text-sm py-1.5 max-w-xs"
|
||||||
|
>
|
||||||
|
<option value="owner">{t('room.analyticsOwnerOnly')}</option>
|
||||||
|
<option value="shared">{t('room.analyticsSharedUsers')}</option>
|
||||||
|
</select>
|
||||||
|
<p className="text-xs text-th-text-s mt-1">{t('room.analyticsVisibilityHint')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Guest access section */}
|
{/* Guest access section */}
|
||||||
@@ -655,8 +707,9 @@ export default function RoomDetail() {
|
|||||||
<h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>
|
<h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
|
<label htmlFor="room-settings-moderator-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="room-settings-moderator-code"
|
||||||
type="text"
|
type="text"
|
||||||
value={editRoom.moderator_code || ''}
|
value={editRoom.moderator_code || ''}
|
||||||
onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
|
onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
|
||||||
@@ -698,11 +751,11 @@ export default function RoomDetail() {
|
|||||||
{room.presentation_file ? (
|
{room.presentation_file ? (
|
||||||
<div 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 justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
|
||||||
<div className="flex items-center gap-2 min-w-0">
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
<FileText size={16} className="text-th-accent flex-shrink-0" />
|
<FileText size={16} className="text-th-accent shrink-0" />
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<p className="text-xs text-th-text-s">{t('room.presentationCurrent')}</p>
|
<p className="text-xs text-th-text-s">{t('room.presentationCurrent')}</p>
|
||||||
<p className="text-sm text-th-text font-medium truncate">
|
<p className="text-sm text-th-text font-medium truncate">
|
||||||
{room.presentation_name || `presentation.${room.presentation_file?.split('.').pop()}`}
|
{room.presentation_file}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -710,7 +763,7 @@ export default function RoomDetail() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={handlePresentationRemove}
|
onClick={handlePresentationRemove}
|
||||||
disabled={removingPresentation}
|
disabled={removingPresentation}
|
||||||
className="btn-ghost text-th-error hover:bg-th-error/10 flex-shrink-0 text-xs py-1.5 px-3"
|
className="btn-ghost text-th-error hover:bg-th-error/10 shrink-0 text-xs py-1.5 px-3"
|
||||||
>
|
>
|
||||||
{removingPresentation ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
|
{removingPresentation ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
|
||||||
{t('room.presentationRemove')}
|
{t('room.presentationRemove')}
|
||||||
@@ -769,7 +822,7 @@ export default function RoomDetail() {
|
|||||||
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
|
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
|
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0 overflow-hidden"
|
||||||
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{u.avatar_image ? (
|
{u.avatar_image ? (
|
||||||
@@ -795,7 +848,7 @@ export default function RoomDetail() {
|
|||||||
<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 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="flex items-center gap-3 min-w-0">
|
||||||
<div
|
<div
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
|
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0 overflow-hidden"
|
||||||
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
style={{ backgroundColor: u.avatar_color || '#6366f1' }}
|
||||||
>
|
>
|
||||||
{u.avatar_image ? (
|
{u.avatar_image ? (
|
||||||
@@ -812,7 +865,7 @@ export default function RoomDetail() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => handleUnshare(u.id)}
|
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"
|
className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-error transition-colors shrink-0"
|
||||||
title={t('room.shareRemove')}
|
title={t('room.shareRemove')}
|
||||||
>
|
>
|
||||||
<X size={16} />
|
<X size={16} />
|
||||||
@@ -838,20 +891,43 @@ export default function RoomDetail() {
|
|||||||
<p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
|
<p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
|
||||||
<form onSubmit={handleFedInvite} className="space-y-4">
|
<form onSubmit={handleFedInvite} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
|
<label htmlFor="fed-invite-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
|
||||||
<input
|
<input
|
||||||
|
id="fed-invite-address"
|
||||||
type="text"
|
type="text"
|
||||||
value={fedAddress}
|
value={fedAddress}
|
||||||
onChange={e => setFedAddress(e.target.value)}
|
onChange={e => { setFedAddress(e.target.value); if (e.target.value) setFedEmails(''); }}
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder={t('federation.addressPlaceholder')}
|
placeholder={t('federation.addressPlaceholder')}
|
||||||
required
|
disabled={fedEmails.trim().length > 0}
|
||||||
/>
|
/>
|
||||||
<p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
|
<p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 my-2">
|
||||||
|
<div className="flex-1 border-t border-th-border" />
|
||||||
|
<span className="text-xs text-th-text-s uppercase">{t('common.or')}</span>
|
||||||
|
<div className="flex-1 border-t border-th-border" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
|
<label htmlFor="fed-invite-emails" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.emailLabel')}</label>
|
||||||
|
<input
|
||||||
|
id="fed-invite-emails"
|
||||||
|
type="text"
|
||||||
|
value={fedEmails}
|
||||||
|
onChange={e => { setFedEmails(e.target.value); if (e.target.value) setFedAddress(''); }}
|
||||||
|
className="input-field"
|
||||||
|
placeholder={t('federation.emailPlaceholder')}
|
||||||
|
disabled={fedAddress.trim().length > 0}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-th-text-s mt-1">{t('federation.emailHint')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="fed-invite-message" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
|
||||||
<textarea
|
<textarea
|
||||||
|
id="fed-invite-message"
|
||||||
value={fedMessage}
|
value={fedMessage}
|
||||||
onChange={e => setFedMessage(e.target.value)}
|
onChange={e => setFedMessage(e.target.value)}
|
||||||
className="input-field resize-none"
|
className="input-field resize-none"
|
||||||
@@ -863,7 +939,7 @@ export default function RoomDetail() {
|
|||||||
<button type="button" onClick={() => setShowFedInvite(false)} className="btn-secondary flex-1">
|
<button type="button" onClick={() => setShowFedInvite(false)} className="btn-secondary flex-1">
|
||||||
{t('common.cancel')}
|
{t('common.cancel')}
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" disabled={fedSending} className="btn-primary flex-1">
|
<button type="submit" disabled={fedSending || (!fedAddress.trim() && !fedEmails.trim())} className="btn-primary flex-1">
|
||||||
{fedSending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
|
{fedSending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
|
||||||
{t('federation.send')}
|
{t('federation.send')}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
+254
-23
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useRef, useEffect } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
import { User, Mail, Lock, Palette, Save, Loader2, Globe, Camera, X, Calendar, Plus, Trash2, Copy, Eye, EyeOff } from 'lucide-react';
|
import { User, Mail, Lock, Palette, Save, Loader2, Globe, Camera, X, Calendar, Plus, Trash2, Copy, Eye, EyeOff, Shield, ShieldCheck, ShieldOff } from 'lucide-react';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import { useTheme } from '../contexts/ThemeContext';
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
import { useLanguage } from '../contexts/LanguageContext';
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
@@ -46,6 +46,17 @@ export default function Settings() {
|
|||||||
const [newlyCreatedToken, setNewlyCreatedToken] = useState(null);
|
const [newlyCreatedToken, setNewlyCreatedToken] = useState(null);
|
||||||
const [tokenVisible, setTokenVisible] = useState(false);
|
const [tokenVisible, setTokenVisible] = useState(false);
|
||||||
|
|
||||||
|
// 2FA state
|
||||||
|
const [twoFaEnabled, setTwoFaEnabled] = useState(!!user?.totp_enabled);
|
||||||
|
const [twoFaLoading, setTwoFaLoading] = useState(false);
|
||||||
|
const [twoFaSetupData, setTwoFaSetupData] = useState(null); // { secret, uri, qrDataUrl }
|
||||||
|
const [twoFaCode, setTwoFaCode] = useState('');
|
||||||
|
const [twoFaEnabling, setTwoFaEnabling] = useState(false);
|
||||||
|
const [twoFaDisablePassword, setTwoFaDisablePassword] = useState('');
|
||||||
|
const [twoFaDisableCode, setTwoFaDisableCode] = useState('');
|
||||||
|
const [twoFaDisabling, setTwoFaDisabling] = useState(false);
|
||||||
|
const [showDisableForm, setShowDisableForm] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (activeSection === 'caldav') {
|
if (activeSection === 'caldav') {
|
||||||
setCaldavLoading(true);
|
setCaldavLoading(true);
|
||||||
@@ -54,6 +65,13 @@ export default function Settings() {
|
|||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
.finally(() => setCaldavLoading(false));
|
.finally(() => setCaldavLoading(false));
|
||||||
}
|
}
|
||||||
|
if (activeSection === 'security') {
|
||||||
|
setTwoFaLoading(true);
|
||||||
|
api.get('/auth/2fa/status')
|
||||||
|
.then(r => setTwoFaEnabled(r.data.enabled))
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => setTwoFaLoading(false));
|
||||||
|
}
|
||||||
}, [activeSection]);
|
}, [activeSection]);
|
||||||
|
|
||||||
const handleCreateToken = async (e) => {
|
const handleCreateToken = async (e) => {
|
||||||
@@ -85,6 +103,56 @@ export default function Settings() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 2FA handlers
|
||||||
|
const handleSetup2FA = async () => {
|
||||||
|
setTwoFaLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await api.post('/auth/2fa/setup');
|
||||||
|
// Generate QR code data URL client-side
|
||||||
|
const QRCode = (await import('qrcode')).default;
|
||||||
|
const qrDataUrl = await QRCode.toDataURL(res.data.uri, { width: 200, margin: 2, color: { dark: '#000000', light: '#ffffff' } });
|
||||||
|
setTwoFaSetupData({ secret: res.data.secret, uri: res.data.uri, qrDataUrl });
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.response?.data?.error || t('settings.security.setupFailed'));
|
||||||
|
} finally {
|
||||||
|
setTwoFaLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEnable2FA = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setTwoFaEnabling(true);
|
||||||
|
try {
|
||||||
|
await api.post('/auth/2fa/enable', { code: twoFaCode });
|
||||||
|
setTwoFaEnabled(true);
|
||||||
|
setTwoFaSetupData(null);
|
||||||
|
setTwoFaCode('');
|
||||||
|
toast.success(t('settings.security.enabled'));
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.response?.data?.error || t('settings.security.enableFailed'));
|
||||||
|
setTwoFaCode('');
|
||||||
|
} finally {
|
||||||
|
setTwoFaEnabling(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDisable2FA = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setTwoFaDisabling(true);
|
||||||
|
try {
|
||||||
|
await api.post('/auth/2fa/disable', { password: twoFaDisablePassword, code: twoFaDisableCode });
|
||||||
|
setTwoFaEnabled(false);
|
||||||
|
setShowDisableForm(false);
|
||||||
|
setTwoFaDisablePassword('');
|
||||||
|
setTwoFaDisableCode('');
|
||||||
|
toast.success(t('settings.security.disabled'));
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.response?.data?.error || t('settings.security.disableFailed'));
|
||||||
|
} finally {
|
||||||
|
setTwoFaDisabling(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const groups = getThemeGroups();
|
const groups = getThemeGroups();
|
||||||
|
|
||||||
const avatarColors = [
|
const avatarColors = [
|
||||||
@@ -184,6 +252,7 @@ export default function Settings() {
|
|||||||
const sections = [
|
const sections = [
|
||||||
{ id: 'profile', label: t('settings.profile'), icon: User },
|
{ id: 'profile', label: t('settings.profile'), icon: User },
|
||||||
{ id: 'password', label: t('settings.password'), icon: Lock },
|
{ id: 'password', label: t('settings.password'), icon: Lock },
|
||||||
|
{ id: 'security', label: t('settings.security.title'), icon: Shield },
|
||||||
{ id: 'language', label: t('settings.language'), icon: Globe },
|
{ id: 'language', label: t('settings.language'), icon: Globe },
|
||||||
{ id: 'themes', label: t('settings.themes'), icon: Palette },
|
{ id: 'themes', label: t('settings.themes'), icon: Palette },
|
||||||
{ id: 'caldav', label: t('settings.caldav.title'), icon: Calendar },
|
{ id: 'caldav', label: t('settings.caldav.title'), icon: Calendar },
|
||||||
@@ -198,7 +267,7 @@ export default function Settings() {
|
|||||||
|
|
||||||
<div className="flex flex-col md:flex-row gap-6">
|
<div className="flex flex-col md:flex-row gap-6">
|
||||||
{/* Section nav */}
|
{/* Section nav */}
|
||||||
<div className="md:w-56 flex-shrink-0">
|
<div className="md:w-56 shrink-0">
|
||||||
<nav className="flex md:flex-col gap-1">
|
<nav className="flex md:flex-col gap-1">
|
||||||
{sections.map(s => (
|
{sections.map(s => (
|
||||||
<button
|
<button
|
||||||
@@ -232,7 +301,7 @@ export default function Settings() {
|
|||||||
{user?.avatar_image ? (
|
{user?.avatar_image ? (
|
||||||
<img
|
<img
|
||||||
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
|
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
|
||||||
alt="Avatar"
|
alt=""
|
||||||
className="w-16 h-16 rounded-full object-cover"
|
className="w-16 h-16 rounded-full object-cover"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
@@ -247,6 +316,7 @@ export default function Settings() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => fileInputRef.current?.click()}
|
onClick={() => fileInputRef.current?.click()}
|
||||||
disabled={uploadingAvatar}
|
disabled={uploadingAvatar}
|
||||||
|
aria-label={t('settings.uploadImage')}
|
||||||
className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
|
className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
|
||||||
>
|
>
|
||||||
{uploadingAvatar ? (
|
{uploadingAvatar ? (
|
||||||
@@ -291,12 +361,15 @@ export default function Settings() {
|
|||||||
|
|
||||||
{/* Avatar Color (fallback) */}
|
{/* Avatar Color (fallback) */}
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<label className="block text-sm font-medium text-th-text mb-3">{t('settings.avatarColor')}</label>
|
<p id="avatar-color-label" className="block text-sm font-medium text-th-text mb-3">{t('settings.avatarColor')}</p>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div role="radiogroup" aria-labelledby="avatar-color-label" className="flex flex-wrap gap-2">
|
||||||
{avatarColors.map(color => (
|
{avatarColors.map(color => (
|
||||||
<button
|
<button
|
||||||
key={color}
|
key={color}
|
||||||
onClick={() => handleAvatarColor(color)}
|
onClick={() => handleAvatarColor(color)}
|
||||||
|
role="radio"
|
||||||
|
aria-checked={user?.avatar_color === color}
|
||||||
|
aria-label={color}
|
||||||
className={`w-7 h-7 rounded-full ring-2 ring-offset-2 transition-all ${
|
className={`w-7 h-7 rounded-full ring-2 ring-offset-2 transition-all ${
|
||||||
user?.avatar_color === color ? 'ring-th-accent' : 'ring-transparent hover:ring-th-border'
|
user?.avatar_color === color ? 'ring-th-accent' : 'ring-transparent hover:ring-th-border'
|
||||||
}`}
|
}`}
|
||||||
@@ -309,11 +382,13 @@ export default function Settings() {
|
|||||||
|
|
||||||
<form onSubmit={handleProfileSave} className="space-y-4">
|
<form onSubmit={handleProfileSave} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
|
<label htmlFor="settings-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="settings-username"
|
||||||
type="text"
|
type="text"
|
||||||
|
autoComplete="username"
|
||||||
value={profile.name}
|
value={profile.name}
|
||||||
onChange={e => setProfile({ ...profile, name: e.target.value })}
|
onChange={e => setProfile({ ...profile, name: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -323,11 +398,13 @@ export default function Settings() {
|
|||||||
<p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
|
<p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
|
<label htmlFor="settings-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="settings-display-name"
|
||||||
type="text"
|
type="text"
|
||||||
|
autoComplete="name"
|
||||||
value={profile.display_name}
|
value={profile.display_name}
|
||||||
onChange={e => setProfile({ ...profile, display_name: e.target.value })}
|
onChange={e => setProfile({ ...profile, display_name: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -335,11 +412,13 @@ export default function Settings() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
<label htmlFor="settings-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="settings-email"
|
||||||
type="email"
|
type="email"
|
||||||
|
autoComplete="email"
|
||||||
value={profile.email}
|
value={profile.email}
|
||||||
onChange={e => setProfile({ ...profile, email: e.target.value })}
|
onChange={e => setProfile({ ...profile, email: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -361,11 +440,13 @@ export default function Settings() {
|
|||||||
<h2 className="text-lg font-semibold text-th-text mb-6">{t('settings.changePassword')}</h2>
|
<h2 className="text-lg font-semibold text-th-text mb-6">{t('settings.changePassword')}</h2>
|
||||||
<form onSubmit={handlePasswordSave} className="space-y-4">
|
<form onSubmit={handlePasswordSave} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
|
<label htmlFor="settings-current-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="settings-current-password"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
value={passwords.currentPassword}
|
value={passwords.currentPassword}
|
||||||
onChange={e => setPasswords({ ...passwords, currentPassword: e.target.value })}
|
onChange={e => setPasswords({ ...passwords, currentPassword: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -374,11 +455,13 @@ export default function Settings() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.newPassword')}</label>
|
<label htmlFor="settings-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.newPassword')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="settings-new-password"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={passwords.newPassword}
|
value={passwords.newPassword}
|
||||||
onChange={e => setPasswords({ ...passwords, newPassword: e.target.value })}
|
onChange={e => setPasswords({ ...passwords, newPassword: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -389,11 +472,13 @@ export default function Settings() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.confirmNewPassword')}</label>
|
<label htmlFor="settings-confirm-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.confirmNewPassword')}</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
<input
|
<input
|
||||||
|
id="settings-confirm-new-password"
|
||||||
type="password"
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
value={passwords.confirmPassword}
|
value={passwords.confirmPassword}
|
||||||
onChange={e => setPasswords({ ...passwords, confirmPassword: e.target.value })}
|
onChange={e => setPasswords({ ...passwords, confirmPassword: e.target.value })}
|
||||||
className="input-field pl-11"
|
className="input-field pl-11"
|
||||||
@@ -411,6 +496,152 @@ export default function Settings() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Security / 2FA section */}
|
||||||
|
{activeSection === 'security' && (
|
||||||
|
<div className="space-y-5">
|
||||||
|
<div className="card p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-th-text mb-1">{t('settings.security.title')}</h2>
|
||||||
|
<p className="text-sm text-th-text-s mb-6">{t('settings.security.subtitle')}</p>
|
||||||
|
|
||||||
|
{twoFaLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 size={24} className="animate-spin text-th-text-s" />
|
||||||
|
</div>
|
||||||
|
) : twoFaEnabled ? (
|
||||||
|
/* 2FA is enabled */
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 mb-5">
|
||||||
|
<ShieldCheck size={22} className="text-emerald-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-emerald-300">{t('settings.security.statusEnabled')}</p>
|
||||||
|
<p className="text-xs text-emerald-400/70">{t('settings.security.statusEnabledDesc')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!showDisableForm ? (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDisableForm(true)}
|
||||||
|
className="btn-ghost text-th-error hover:text-th-error text-sm"
|
||||||
|
>
|
||||||
|
<ShieldOff size={16} />
|
||||||
|
{t('settings.security.disable')}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleDisable2FA} className="space-y-4 p-4 rounded-xl bg-th-bg-t border border-th-border">
|
||||||
|
<p className="text-sm text-th-text-s">{t('settings.security.disableConfirm')}</p>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="twofa-disable-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
|
||||||
|
<input
|
||||||
|
id="twofa-disable-password"
|
||||||
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
value={twoFaDisablePassword}
|
||||||
|
onChange={e => setTwoFaDisablePassword(e.target.value)}
|
||||||
|
className="input-field pl-11"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="twofa-disable-code" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.codeLabel')}</label>
|
||||||
|
<input
|
||||||
|
id="twofa-disable-code"
|
||||||
|
type="text"
|
||||||
|
inputMode="numeric"
|
||||||
|
autoComplete="one-time-code"
|
||||||
|
value={twoFaDisableCode}
|
||||||
|
onChange={e => setTwoFaDisableCode(e.target.value.replace(/[^0-9\s]/g, '').slice(0, 7))}
|
||||||
|
className="input-field text-center text-lg tracking-[0.3em] font-mono"
|
||||||
|
placeholder="000 000"
|
||||||
|
required
|
||||||
|
maxLength={7}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button type="submit" disabled={twoFaDisabling} className="btn-primary bg-red-600 hover:bg-red-700 border-red-600">
|
||||||
|
{twoFaDisabling ? <Loader2 size={14} className="animate-spin" /> : <ShieldOff size={14} />}
|
||||||
|
{t('settings.security.disable')}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={() => { setShowDisableForm(false); setTwoFaDisablePassword(''); setTwoFaDisableCode(''); }} className="btn-ghost text-sm">
|
||||||
|
{t('common.cancel')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : twoFaSetupData ? (
|
||||||
|
/* Setup flow: show QR code + verification */
|
||||||
|
<div className="space-y-5">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-th-text mb-4">{t('settings.security.scanQR')}</p>
|
||||||
|
<div className="inline-block p-3 bg-white rounded-xl">
|
||||||
|
<img src={twoFaSetupData.qrDataUrl} alt="TOTP QR Code" className="w-[200px] h-[200px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-th-text-s mb-1">{t('settings.security.manualKey')}</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="flex-1 text-xs bg-th-bg-t px-3 py-2 rounded-lg text-th-accent font-mono break-all">
|
||||||
|
{twoFaSetupData.secret}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() => { navigator.clipboard.writeText(twoFaSetupData.secret); toast.success(t('room.linkCopied')); }}
|
||||||
|
className="btn-ghost py-1.5 px-2 shrink-0"
|
||||||
|
aria-label={t('room.copyLink')}
|
||||||
|
>
|
||||||
|
<Copy size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleEnable2FA} className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="twofa-enable-code" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.verifyCode')}</label>
|
||||||
|
<input
|
||||||
|
id="twofa-enable-code"
|
||||||
|
type="text"
|
||||||
|
inputMode="numeric"
|
||||||
|
autoComplete="one-time-code"
|
||||||
|
value={twoFaCode}
|
||||||
|
onChange={e => setTwoFaCode(e.target.value.replace(/[^0-9\s]/g, '').slice(0, 7))}
|
||||||
|
className="input-field text-center text-lg tracking-[0.3em] font-mono"
|
||||||
|
placeholder="000 000"
|
||||||
|
required
|
||||||
|
maxLength={7}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button type="submit" disabled={twoFaEnabling || twoFaCode.replace(/\s/g, '').length < 6} className="btn-primary">
|
||||||
|
{twoFaEnabling ? <Loader2 size={14} className="animate-spin" /> : <ShieldCheck size={14} />}
|
||||||
|
{t('settings.security.enable')}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={() => { setTwoFaSetupData(null); setTwoFaCode(''); }} className="btn-ghost text-sm">
|
||||||
|
{t('common.cancel')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* 2FA is disabled — show enable button */
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 p-4 rounded-xl bg-th-bg-t border border-th-border mb-5">
|
||||||
|
<ShieldOff size={22} className="text-th-text-s shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-th-text">{t('settings.security.statusDisabled')}</p>
|
||||||
|
<p className="text-xs text-th-text-s">{t('settings.security.statusDisabledDesc')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onClick={handleSetup2FA} disabled={twoFaLoading} className="btn-primary">
|
||||||
|
{twoFaLoading ? <Loader2 size={16} className="animate-spin" /> : <Shield size={16} />}
|
||||||
|
{t('settings.security.enable')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Language section */}
|
{/* Language section */}
|
||||||
{activeSection === 'language' && (
|
{activeSection === 'language' && (
|
||||||
<div className="card p-6">
|
<div className="card p-6">
|
||||||
@@ -457,7 +688,7 @@ export default function Settings() {
|
|||||||
>
|
>
|
||||||
{/* Color preview */}
|
{/* Color preview */}
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 border"
|
className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 border"
|
||||||
style={{ backgroundColor: th.colors.bg, borderColor: th.colors.accent + '40' }}
|
style={{ backgroundColor: th.colors.bg, borderColor: th.colors.accent + '40' }}
|
||||||
>
|
>
|
||||||
<div className="w-4 h-4 rounded-full" style={{ backgroundColor: th.colors.accent }} />
|
<div className="w-4 h-4 rounded-full" style={{ backgroundColor: th.colors.accent }} />
|
||||||
@@ -489,7 +720,7 @@ export default function Settings() {
|
|||||||
</code>
|
</code>
|
||||||
<button
|
<button
|
||||||
onClick={() => { navigator.clipboard.writeText(`${window.location.origin}/caldav/`); toast.success(t('room.linkCopied')); }}
|
onClick={() => { navigator.clipboard.writeText(`${window.location.origin}/caldav/`); toast.success(t('room.linkCopied')); }}
|
||||||
className="btn-ghost py-1.5 px-2 flex-shrink-0"
|
className="btn-ghost py-1.5 px-2 shrink-0"
|
||||||
>
|
>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</button>
|
</button>
|
||||||
@@ -503,7 +734,7 @@ export default function Settings() {
|
|||||||
</code>
|
</code>
|
||||||
<button
|
<button
|
||||||
onClick={() => { navigator.clipboard.writeText(user?.email || ''); toast.success(t('room.linkCopied')); }}
|
onClick={() => { navigator.clipboard.writeText(user?.email || ''); toast.success(t('room.linkCopied')); }}
|
||||||
className="btn-ghost py-1.5 px-2 flex-shrink-0"
|
className="btn-ghost py-1.5 px-2 shrink-0"
|
||||||
>
|
>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</button>
|
</button>
|
||||||
@@ -522,12 +753,12 @@ export default function Settings() {
|
|||||||
<code className="flex-1 text-xs bg-th-bg-t px-3 py-2 rounded-lg font-mono text-th-text break-all">
|
<code className="flex-1 text-xs bg-th-bg-t px-3 py-2 rounded-lg font-mono text-th-text break-all">
|
||||||
{tokenVisible ? newlyCreatedToken : '•'.repeat(48)}
|
{tokenVisible ? newlyCreatedToken : '•'.repeat(48)}
|
||||||
</code>
|
</code>
|
||||||
<button onClick={() => setTokenVisible(v => !v)} className="btn-ghost py-1.5 px-2 flex-shrink-0">
|
<button onClick={() => setTokenVisible(v => !v)} className="btn-ghost py-1.5 px-2 shrink-0">
|
||||||
{tokenVisible ? <EyeOff size={14} /> : <Eye size={14} />}
|
{tokenVisible ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => { navigator.clipboard.writeText(newlyCreatedToken); toast.success(t('room.linkCopied')); }}
|
onClick={() => { navigator.clipboard.writeText(newlyCreatedToken); toast.success(t('room.linkCopied')); }}
|
||||||
className="btn-ghost py-1.5 px-2 flex-shrink-0"
|
className="btn-ghost py-1.5 px-2 shrink-0"
|
||||||
>
|
>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</button>
|
</button>
|
||||||
@@ -580,7 +811,7 @@ export default function Settings() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleRevokeToken(tk.id)}
|
onClick={() => handleRevokeToken(tk.id)}
|
||||||
className="btn-ghost py-1 px-2 text-th-error hover:text-th-error flex-shrink-0"
|
className="btn-ghost py-1 px-2 text-th-error hover:text-th-error shrink-0"
|
||||||
title={t('settings.caldav.revoke')}
|
title={t('settings.caldav.revoke')}
|
||||||
>
|
>
|
||||||
<Trash2 size={14} />
|
<Trash2 size={14} />
|
||||||
|
|||||||
@@ -173,6 +173,18 @@ export function getThemeById(id) {
|
|||||||
return themes.find(t => t.id === id) || themes[1]; // default to dark
|
return themes.find(t => t.id === id) || themes[1]; // default to dark
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Whether the currently applied theme is a dark one. Reads the resolved theme
|
||||||
|
// from the <html data-theme> attribute (set by ThemeContext) with a localStorage
|
||||||
|
// fallback, so it works without React context — handy for one-off API payloads
|
||||||
|
// such as the BBB join call that forwards dark mode to the meeting.
|
||||||
|
export function isCurrentThemeDark() {
|
||||||
|
const id = (typeof document !== 'undefined'
|
||||||
|
&& document.documentElement.getAttribute('data-theme'))
|
||||||
|
|| (typeof localStorage !== 'undefined' && localStorage.getItem('theme'))
|
||||||
|
|| 'dark';
|
||||||
|
return getThemeById(id).type === 'dark';
|
||||||
|
}
|
||||||
|
|
||||||
export function getThemeGroups() {
|
export function getThemeGroups() {
|
||||||
const groups = {};
|
const groups = {};
|
||||||
themes.forEach(theme => {
|
themes.forEach(theme => {
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
th: {
|
|
||||||
bg: 'var(--bg-primary)',
|
|
||||||
'bg-s': 'var(--bg-secondary)',
|
|
||||||
'bg-t': 'var(--bg-tertiary)',
|
|
||||||
text: 'var(--text-primary)',
|
|
||||||
'text-s': 'var(--text-secondary)',
|
|
||||||
accent: 'var(--accent)',
|
|
||||||
'accent-h': 'var(--accent-hover)',
|
|
||||||
'accent-t': 'var(--accent-text)',
|
|
||||||
border: 'var(--border)',
|
|
||||||
card: 'var(--card-bg)',
|
|
||||||
input: 'var(--input-bg)',
|
|
||||||
'input-b': 'var(--input-border)',
|
|
||||||
nav: 'var(--nav-bg)',
|
|
||||||
side: 'var(--sidebar-bg)',
|
|
||||||
hover: 'var(--hover-bg)',
|
|
||||||
success: 'var(--success)',
|
|
||||||
warning: 'var(--warning)',
|
|
||||||
error: 'var(--error)',
|
|
||||||
ring: 'var(--ring)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
||||||
},
|
|
||||||
boxShadow: {
|
|
||||||
'th': '0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color)',
|
|
||||||
'th-lg': '0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user