Add full portal expansion: 2FA, change password, history, announcements, recording guidelines, Seafile link, draft saving, file validation; v2.0.17
Publish Container / docker (push) Successful in 14m36s
Publish Container / docker (push) Successful in 14m36s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed
1 parent
afff859d17
commit
ef1d9fd8fc
6 files changed
+930
-132
No files matched your search
@@ -1,45 +1,128 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
|
||||
interface SubmittedEpisode {
|
||||
const DRAFT_KEY = 'nuggets_ep_draft'
|
||||
|
||||
interface HistoryEntry {
|
||||
episodeName: string
|
||||
passage: string
|
||||
filename: string
|
||||
at: string
|
||||
uploadedAt: string
|
||||
}
|
||||
|
||||
type Screen = 'checking' | 'login' | 'otp' | 'portal' | 'settings'
|
||||
|
||||
function formatBytes(b: number) {
|
||||
if (b >= 1024 * 1024) return `${(b / (1024 * 1024)).toFixed(1)} MB`
|
||||
if (b >= 1024) return `${(b / 1024).toFixed(0)} KB`
|
||||
return `${b} B`
|
||||
}
|
||||
|
||||
function saveDraft(ep: string, passage: string, desc: string) {
|
||||
try { localStorage.setItem(DRAFT_KEY, JSON.stringify({ ep, passage, desc })) } catch {}
|
||||
}
|
||||
|
||||
function loadDraft() {
|
||||
try {
|
||||
const raw = localStorage.getItem(DRAFT_KEY)
|
||||
if (!raw) return null
|
||||
return JSON.parse(raw) as { ep: string; passage: string; desc: string }
|
||||
} catch { return null }
|
||||
}
|
||||
|
||||
function clearDraft() {
|
||||
try { localStorage.removeItem(DRAFT_KEY) } catch {}
|
||||
}
|
||||
|
||||
export function NuggetsHostPortal() {
|
||||
const [checking, setChecking] = useState(true)
|
||||
const [authenticated, setAuthenticated] = useState(false)
|
||||
const [screen, setScreen] = useState<Screen>('checking')
|
||||
const [hostName, setHostName] = useState('')
|
||||
const [seafileConfigured, setSeafileConfigured] = useState(true)
|
||||
const [twoFaEnabled, setTwoFaEnabled] = useState(false)
|
||||
const [announcement, setAnnouncement] = useState('')
|
||||
|
||||
// Login state
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [loginError, setLoginError] = useState('')
|
||||
const [loggingIn, setLoggingIn] = useState(false)
|
||||
|
||||
// OTP state
|
||||
const [otpToken, setOtpToken] = useState('')
|
||||
const [otpCode, setOtpCode] = useState('')
|
||||
const [otpError, setOtpError] = useState('')
|
||||
const [verifyingOtp, setVerifyingOtp] = useState(false)
|
||||
|
||||
// Upload form state
|
||||
const [episodeName, setEpisodeName] = useState('')
|
||||
const [passage, setPassage] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [fileWarning, setFileWarning] = useState('')
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [uploadError, setUploadError] = useState('')
|
||||
const [submitted, setSubmitted] = useState<SubmittedEpisode[]>([])
|
||||
const [lastSuccess, setLastSuccess] = useState<{ episodeName: string; filename: string; seafileUrl?: string } | null>(null)
|
||||
const [guidelinesOpen, setGuidelinesOpen] = useState(false)
|
||||
|
||||
// History
|
||||
const [history, setHistory] = useState<HistoryEntry[]>([])
|
||||
const [historyOpen, setHistoryOpen] = useState(false)
|
||||
|
||||
// Settings state
|
||||
const [currentPw, setCurrentPw] = useState('')
|
||||
const [newPw, setNewPw] = useState('')
|
||||
const [confirmPw, setConfirmPw] = useState('')
|
||||
const [pwError, setPwError] = useState('')
|
||||
const [pwSuccess, setPwSuccess] = useState('')
|
||||
const [savingPw, setSavingPw] = useState(false)
|
||||
const [toggling2fa, setToggling2fa] = useState(false)
|
||||
const [twoFaMsg, setTwoFaMsg] = useState('')
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Load session on mount
|
||||
useEffect(() => {
|
||||
fetch('/api/nuggets-upload/me')
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
setAuthenticated(d.authenticated)
|
||||
setHostName(d.hostName ?? '')
|
||||
setSeafileConfigured(d.configured !== false)
|
||||
if (d.authenticated) {
|
||||
setHostName(d.hostName ?? '')
|
||||
setSeafileConfigured(d.configured !== false)
|
||||
setTwoFaEnabled(Boolean(d.twoFaEnabled))
|
||||
setScreen('portal')
|
||||
const draft = loadDraft()
|
||||
if (draft) { setEpisodeName(draft.ep); setPassage(draft.passage); setDescription(draft.desc) }
|
||||
} else {
|
||||
setScreen('login')
|
||||
}
|
||||
})
|
||||
.finally(() => setChecking(false))
|
||||
.catch(() => setScreen('login'))
|
||||
}, [])
|
||||
|
||||
// Load announcement
|
||||
useEffect(() => {
|
||||
fetch('/api/nuggets-upload/announcement')
|
||||
.then(r => r.json())
|
||||
.then(d => { if (d.text) setAnnouncement(d.text) })
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
// Load history when history panel is opened
|
||||
useEffect(() => {
|
||||
if (historyOpen && screen === 'portal') {
|
||||
fetch('/api/nuggets-upload/history')
|
||||
.then(r => r.json())
|
||||
.then(d => setHistory(d.entries ?? []))
|
||||
.catch(() => {})
|
||||
}
|
||||
}, [historyOpen, screen])
|
||||
|
||||
// Autosave draft
|
||||
useEffect(() => {
|
||||
if (screen === 'portal') saveDraft(episodeName, passage, description)
|
||||
}, [episodeName, passage, description, screen])
|
||||
|
||||
async function handleLogin(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setLoginError('')
|
||||
@@ -52,51 +135,89 @@ export function NuggetsHostPortal() {
|
||||
})
|
||||
const d = await r.json()
|
||||
if (!r.ok) { setLoginError(d.message ?? 'Login failed.'); return }
|
||||
if (d.requiresOtp) {
|
||||
setOtpToken(d.otpToken)
|
||||
setScreen('otp')
|
||||
return
|
||||
}
|
||||
setHostName(d.hostName)
|
||||
setAuthenticated(true)
|
||||
setTwoFaEnabled(false)
|
||||
setScreen('portal')
|
||||
const draft = loadDraft()
|
||||
if (draft) { setEpisodeName(draft.ep); setPassage(draft.passage); setDescription(draft.desc) }
|
||||
} finally {
|
||||
setLoggingIn(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVerifyOtp(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setOtpError('')
|
||||
setVerifyingOtp(true)
|
||||
try {
|
||||
const r = await fetch('/api/nuggets-upload/verify-otp', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ otpToken, code: otpCode }),
|
||||
})
|
||||
const d = await r.json()
|
||||
if (!r.ok) { setOtpError(d.message ?? 'Verification failed.'); return }
|
||||
setHostName(d.hostName)
|
||||
setTwoFaEnabled(true)
|
||||
setScreen('portal')
|
||||
const draft = loadDraft()
|
||||
if (draft) { setEpisodeName(draft.ep); setPassage(draft.passage); setDescription(draft.desc) }
|
||||
} finally {
|
||||
setVerifyingOtp(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await fetch('/api/nuggets-upload/logout', { method: 'POST' })
|
||||
setAuthenticated(false)
|
||||
clearDraft()
|
||||
setHostName('')
|
||||
setEmail('')
|
||||
setPassword('')
|
||||
setSubmitted([])
|
||||
resetForm()
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
setEpisodeName('')
|
||||
setPassage('')
|
||||
setDescription('')
|
||||
setFile(null)
|
||||
setUploadError('')
|
||||
setProgress(0)
|
||||
setLastSuccess(null)
|
||||
setHistory([])
|
||||
setScreen('login')
|
||||
}
|
||||
|
||||
function pickFile(picked: File | null) {
|
||||
if (!picked) return
|
||||
setFileWarning('')
|
||||
if (picked.size > 500 * 1024 * 1024) {
|
||||
setFileWarning('File exceeds 500 MB limit. Please compress or trim before uploading.')
|
||||
return
|
||||
}
|
||||
if (picked.size < 500 * 1024) {
|
||||
setFileWarning(`File is only ${formatBytes(picked.size)} — unusually small. Check the recording before submitting.`)
|
||||
}
|
||||
setFile(picked)
|
||||
}
|
||||
|
||||
function handleDrop(e: React.DragEvent) {
|
||||
e.preventDefault()
|
||||
setDragging(false)
|
||||
const dropped = e.dataTransfer.files[0]
|
||||
if (dropped) setFile(dropped)
|
||||
pickFile(e.dataTransfer.files[0] ?? null)
|
||||
}
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const picked = e.target.files?.[0]
|
||||
if (picked) setFile(picked)
|
||||
pickFile(e.target.files?.[0] ?? null)
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!file) { setUploadError('Please select an audio file to upload.'); return }
|
||||
if (!file) { setUploadError('Please select an audio file.'); return }
|
||||
if (uploading) return
|
||||
|
||||
setUploadError('')
|
||||
setLastSuccess(null)
|
||||
setUploading(true)
|
||||
setProgress(0)
|
||||
|
||||
@@ -109,42 +230,82 @@ export function NuggetsHostPortal() {
|
||||
await new Promise<void>(resolve => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('POST', '/api/nuggets-upload/upload')
|
||||
|
||||
xhr.upload.addEventListener('progress', ev => {
|
||||
if (ev.lengthComputable) setProgress(Math.round((ev.loaded / ev.total) * 100))
|
||||
})
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
setUploading(false)
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const d = JSON.parse(xhr.responseText)
|
||||
setSubmitted(prev => [{ episodeName: d.episodeName, filename: d.filename, at: new Date().toLocaleTimeString() }, ...prev])
|
||||
resetForm()
|
||||
setLastSuccess({ episodeName: d.episodeName, filename: d.filename, seafileUrl: d.seafileUrl })
|
||||
clearDraft()
|
||||
setEpisodeName('')
|
||||
setPassage('')
|
||||
setDescription('')
|
||||
setFile(null)
|
||||
setFileWarning('')
|
||||
setProgress(0)
|
||||
} catch {
|
||||
setUploadError('Upload succeeded but response was unexpected.')
|
||||
setUploadError('Upload succeeded but the response was unexpected.')
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
setUploadError(JSON.parse(xhr.responseText).message ?? 'Upload failed.')
|
||||
} catch {
|
||||
setUploadError('Upload failed.')
|
||||
}
|
||||
try { setUploadError(JSON.parse(xhr.responseText).message ?? 'Upload failed.') }
|
||||
catch { setUploadError('Upload failed.') }
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
setUploading(false)
|
||||
setUploadError('Network error during upload.')
|
||||
resolve()
|
||||
})
|
||||
|
||||
xhr.send(formData)
|
||||
})
|
||||
}
|
||||
|
||||
if (checking) {
|
||||
async function handleChangePassword(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setPwError('')
|
||||
setPwSuccess('')
|
||||
if (newPw !== confirmPw) { setPwError('New passwords do not match.'); return }
|
||||
if (newPw.length < 8) { setPwError('Password must be at least 8 characters.'); return }
|
||||
setSavingPw(true)
|
||||
try {
|
||||
const r = await fetch('/api/nuggets-upload/change-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ currentPassword: currentPw, newPassword: newPw }),
|
||||
})
|
||||
const d = await r.json()
|
||||
if (!r.ok) { setPwError(d.message ?? 'Failed to change password.'); return }
|
||||
setPwSuccess('Password changed successfully.')
|
||||
setCurrentPw('')
|
||||
setNewPw('')
|
||||
setConfirmPw('')
|
||||
} finally {
|
||||
setSavingPw(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handle2faToggle() {
|
||||
setToggling2fa(true)
|
||||
setTwoFaMsg('')
|
||||
try {
|
||||
const url = twoFaEnabled ? '/api/nuggets-upload/2fa/disable' : '/api/nuggets-upload/2fa/enable'
|
||||
const r = await fetch(url, { method: 'POST' })
|
||||
const d = await r.json()
|
||||
if (!r.ok) { setTwoFaMsg(d.message ?? 'Failed.'); return }
|
||||
setTwoFaEnabled(!twoFaEnabled)
|
||||
setTwoFaMsg(twoFaEnabled ? '2FA disabled.' : '2FA enabled. A code will be sent to your email each time you sign in.')
|
||||
} finally {
|
||||
setToggling2fa(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Screens ────────────────────────────────────────────────────────────────
|
||||
|
||||
if (screen === 'checking') {
|
||||
return (
|
||||
<div style={s.page}>
|
||||
<div style={s.card}>
|
||||
@@ -154,7 +315,7 @@ export function NuggetsHostPortal() {
|
||||
)
|
||||
}
|
||||
|
||||
if (!authenticated) {
|
||||
if (screen === 'login') {
|
||||
return (
|
||||
<div style={s.page}>
|
||||
<div style={s.card}>
|
||||
@@ -185,6 +346,117 @@ export function NuggetsHostPortal() {
|
||||
)
|
||||
}
|
||||
|
||||
if (screen === 'otp') {
|
||||
return (
|
||||
<div style={s.page}>
|
||||
<div style={s.card}>
|
||||
<div style={s.logoRow}>
|
||||
<span style={s.logoEmoji}>🎙️</span>
|
||||
<span style={s.logoTitle}>Nuggets</span>
|
||||
</div>
|
||||
<h1 style={s.heading}>Check Your Email</h1>
|
||||
<p style={s.subText}>A 6-digit code was sent to your email address. Enter it below to continue.</p>
|
||||
<form onSubmit={handleVerifyOtp} style={s.form}>
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="otp-code">Sign-In Code</label>
|
||||
<input
|
||||
id="otp-code"
|
||||
style={{ ...s.input, textAlign: 'center', letterSpacing: '0.3em', fontSize: '1.3rem', fontWeight: 700 }}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={6}
|
||||
placeholder="000000"
|
||||
value={otpCode}
|
||||
onChange={e => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
disabled={verifyingOtp}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{otpError && <p style={s.errorMsg}>{otpError}</p>}
|
||||
<button style={s.btnPrimary} type="submit" disabled={verifyingOtp || otpCode.length !== 6}>
|
||||
{verifyingOtp ? 'Verifying…' : 'Verify Code'}
|
||||
</button>
|
||||
<button style={s.btnGhost} type="button" onClick={() => { setScreen('login'); setOtpCode(''); setOtpError('') }}>
|
||||
← Back to sign in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (screen === 'settings') {
|
||||
return (
|
||||
<div style={s.page}>
|
||||
<div style={{ ...s.card, maxWidth: 460 }}>
|
||||
{/* Settings header */}
|
||||
<div style={s.header}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<button style={s.btnIcon} onClick={() => { setPwError(''); setPwSuccess(''); setTwoFaMsg(''); setScreen('portal') }} title="Back">
|
||||
←
|
||||
</button>
|
||||
<span style={{ fontWeight: 700, fontSize: '1rem', color: 'var(--brand-warm-white, #f0ead8)' }}>Account Settings</span>
|
||||
</div>
|
||||
<span style={s.welcomeText}>{hostName}</span>
|
||||
</div>
|
||||
|
||||
{/* Change Password */}
|
||||
<div style={s.settingsSection}>
|
||||
<h2 style={s.sectionTitle}>Change Password</h2>
|
||||
<form onSubmit={handleChangePassword} style={s.form}>
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="cur-pw">Current Password</label>
|
||||
<input id="cur-pw" style={s.input} type="password" autoComplete="current-password"
|
||||
value={currentPw} onChange={e => setCurrentPw(e.target.value)} disabled={savingPw} required />
|
||||
</div>
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="new-pw">New Password</label>
|
||||
<input id="new-pw" style={s.input} type="password" autoComplete="new-password"
|
||||
value={newPw} onChange={e => setNewPw(e.target.value)} disabled={savingPw} required />
|
||||
</div>
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="conf-pw">Confirm New Password</label>
|
||||
<input id="conf-pw" style={s.input} type="password" autoComplete="new-password"
|
||||
value={confirmPw} onChange={e => setConfirmPw(e.target.value)} disabled={savingPw} required />
|
||||
</div>
|
||||
{pwError && <p style={s.errorMsg}>{pwError}</p>}
|
||||
{pwSuccess && <p style={s.successMsg}>{pwSuccess}</p>}
|
||||
<button style={s.btnPrimary} type="submit" disabled={savingPw}>
|
||||
{savingPw ? 'Saving…' : 'Update Password'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* 2FA */}
|
||||
<div style={{ ...s.settingsSection, marginTop: 24 }}>
|
||||
<h2 style={s.sectionTitle}>Two-Factor Authentication</h2>
|
||||
<p style={{ ...s.subText, margin: '0 0 12px' }}>
|
||||
{twoFaEnabled
|
||||
? 'Email 2FA is currently enabled. You receive a code by email each time you sign in.'
|
||||
: 'Email 2FA is off. Enable it to receive a one-time code by email each time you sign in.'}
|
||||
</p>
|
||||
{twoFaMsg && <p style={twoFaEnabled ? s.successMsg : s.errorMsg}>{twoFaMsg}</p>}
|
||||
<button
|
||||
style={twoFaEnabled ? s.btnDanger : s.btnPrimary}
|
||||
type="button"
|
||||
onClick={handle2faToggle}
|
||||
disabled={toggling2fa}
|
||||
>
|
||||
{toggling2fa ? '…' : twoFaEnabled ? 'Disable 2FA' : 'Enable 2FA'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sign out */}
|
||||
<div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--brand-border, #2a2518)' }}>
|
||||
<button style={s.btnGhost} type="button" onClick={handleLogout}>Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Portal (main upload screen) ────────────────────────────────────────────
|
||||
return (
|
||||
<div style={s.page}>
|
||||
<div style={{ ...s.card, maxWidth: 560 }}>
|
||||
@@ -196,62 +468,87 @@ export function NuggetsHostPortal() {
|
||||
</div>
|
||||
<div style={s.headerRight}>
|
||||
<span style={s.welcomeText}>{hostName}</span>
|
||||
<button style={s.btnIcon} title="Settings" onClick={() => setScreen('settings')}>⚙</button>
|
||||
<button style={s.btnGhost} onClick={handleLogout}>Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Announcement banner */}
|
||||
{announcement && (
|
||||
<div style={s.announcement}>
|
||||
<span style={{ marginRight: 6 }}>📢</span>{announcement}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!seafileConfigured && (
|
||||
<div style={s.warning}>
|
||||
Seafile is not configured yet — contact the admin before uploading.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success banner */}
|
||||
{lastSuccess && (
|
||||
<div style={s.successBanner}>
|
||||
<p style={{ margin: '0 0 4px', fontWeight: 700, color: 'var(--brand-gold, #c9a84c)' }}>
|
||||
✓ Episode submitted successfully
|
||||
</p>
|
||||
<p style={{ margin: '0 0 6px', fontSize: '0.87rem', color: '#c8c0ac' }}>
|
||||
{lastSuccess.episodeName} · {lastSuccess.filename}
|
||||
</p>
|
||||
{lastSuccess.seafileUrl && (
|
||||
<a href={lastSuccess.seafileUrl} target="_blank" rel="noopener noreferrer" style={s.seafileLink}>
|
||||
View in Seafile →
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recording guidelines (collapsible) */}
|
||||
<div style={s.collapsible}>
|
||||
<button
|
||||
style={s.collapsibleToggle}
|
||||
type="button"
|
||||
onClick={() => setGuidelinesOpen(o => !o)}
|
||||
>
|
||||
<span>📋 Recording Guidelines</span>
|
||||
<span style={{ fontSize: '0.9rem', opacity: 0.7 }}>{guidelinesOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
{guidelinesOpen && (
|
||||
<div style={s.collapsibleBody}>
|
||||
<ul style={{ margin: 0, paddingLeft: '1.2rem', lineHeight: 1.6 }}>
|
||||
<li>Export as <strong>MP3</strong> or <strong>WAV</strong> at 44.1 kHz, 128 kbps minimum.</li>
|
||||
<li>File name: <code style={s.code}>YYYY-MM-DD-EpisodeName.mp3</code> (e.g. <code style={s.code}>2026-09-09-Romans-5.mp3</code>).</li>
|
||||
<li>Recommended length: 8–15 minutes. Keep a 0.5s lead-in and 1s fade-out.</li>
|
||||
<li>Normalize to <strong>-1 dBFS</strong> before exporting.</li>
|
||||
<li>Match episode name here to the file name exactly so search stays clean.</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Upload form */}
|
||||
<form onSubmit={handleSubmit} style={s.form}>
|
||||
{/* Episode Name */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="ep-name">Episode Name <span style={s.req}>*</span></label>
|
||||
<input
|
||||
id="ep-name"
|
||||
style={s.input}
|
||||
type="text"
|
||||
<input id="ep-name" style={s.input} type="text"
|
||||
placeholder="e.g. The Grace of God in Romans 5"
|
||||
value={episodeName}
|
||||
onChange={e => setEpisodeName(e.target.value)}
|
||||
disabled={uploading}
|
||||
required
|
||||
/>
|
||||
value={episodeName} onChange={e => setEpisodeName(e.target.value)} disabled={uploading} required />
|
||||
</div>
|
||||
|
||||
{/* Passage */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="ep-passage">Passage <span style={s.req}>*</span></label>
|
||||
<input
|
||||
id="ep-passage"
|
||||
style={s.input}
|
||||
type="text"
|
||||
<input id="ep-passage" style={s.input} type="text"
|
||||
placeholder="e.g. Romans 5:1-11"
|
||||
value={passage}
|
||||
onChange={e => setPassage(e.target.value)}
|
||||
disabled={uploading}
|
||||
required
|
||||
/>
|
||||
value={passage} onChange={e => setPassage(e.target.value)} disabled={uploading} required />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="ep-desc">Description</label>
|
||||
<textarea
|
||||
id="ep-desc"
|
||||
style={{ ...s.input, resize: 'vertical', minHeight: 80 }}
|
||||
<textarea id="ep-desc" style={{ ...s.input, resize: 'vertical', minHeight: 80 } as React.CSSProperties}
|
||||
placeholder="A short summary of what this episode covers…"
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
disabled={uploading}
|
||||
rows={3}
|
||||
/>
|
||||
value={description} onChange={e => setDescription(e.target.value)} disabled={uploading} rows={3} />
|
||||
</div>
|
||||
|
||||
{/* Audio File */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label}>Audio File <span style={s.req}>*</span></label>
|
||||
<div
|
||||
@@ -266,32 +563,27 @@ export function NuggetsHostPortal() {
|
||||
onDrop={handleDrop}
|
||||
onClick={() => !uploading && fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".mp3,.wav,.m4a,.aac,.flac,.ogg,.mp4,.mov"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<input ref={fileInputRef} type="file" accept=".mp3,.wav,.m4a,.aac,.flac,.ogg,.mp4,.mov"
|
||||
style={{ display: 'none' }} onChange={handleFileChange} />
|
||||
{file ? (
|
||||
<div style={s.fileInfo}>
|
||||
<span style={s.fileIcon}>🎵</span>
|
||||
<div>
|
||||
<p style={s.fileName}>{file.name}</p>
|
||||
<p style={s.fileSize}>{(file.size / (1024 * 1024)).toFixed(1)} MB — click to change</p>
|
||||
<p style={s.fileSize}>{formatBytes(file.size)} — click to change</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span style={s.dropIcon}>{dragging ? '📂' : '⬆️'}</span>
|
||||
<p style={s.dropLabel}>{dragging ? 'Drop to select' : 'Drop audio file here, or click to browse'}</p>
|
||||
<p style={s.dropSub}>MP3, WAV, M4A, FLAC, etc.</p>
|
||||
<p style={s.dropSub}>MP3, WAV, M4A, FLAC · max 500 MB</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{fileWarning && <p style={s.warnMsg}>{fileWarning}</p>}
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
{uploading && (
|
||||
<div style={s.progressWrap}>
|
||||
<div style={s.progressBar}>
|
||||
@@ -308,21 +600,31 @@ export function NuggetsHostPortal() {
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Submitted this session */}
|
||||
{submitted.length > 0 && (
|
||||
<div style={s.submittedList}>
|
||||
<p style={s.submittedTitle}>Submitted this session</p>
|
||||
{submitted.map((ep, i) => (
|
||||
<div key={i} style={s.submittedRow}>
|
||||
<span style={s.checkMark}>✓</span>
|
||||
<div>
|
||||
<p style={s.submittedEp}>{ep.episodeName}</p>
|
||||
<p style={s.submittedMeta}>{ep.filename} · {ep.at}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Episode History (collapsible) */}
|
||||
<div style={{ ...s.collapsible, marginTop: 12 }}>
|
||||
<button style={s.collapsibleToggle} type="button" onClick={() => setHistoryOpen(o => !o)}>
|
||||
<span>🕐 Your Upload History</span>
|
||||
<span style={{ fontSize: '0.9rem', opacity: 0.7 }}>{historyOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
{historyOpen && (
|
||||
<div style={s.collapsibleBody}>
|
||||
{history.length === 0 ? (
|
||||
<p style={{ margin: 0, color: 'var(--brand-muted, #b0a48c)', fontSize: '0.85rem' }}>No uploads yet.</p>
|
||||
) : (
|
||||
history.map((entry, i) => (
|
||||
<div key={i} style={{ padding: '6px 0', borderBottom: i < history.length - 1 ? '1px solid var(--brand-border, #2a2518)' : undefined }}>
|
||||
<p style={{ margin: '0 0 2px', fontWeight: 600, fontSize: '0.87rem', color: 'var(--brand-warm-white, #f0ead8)' }}>
|
||||
{entry.episodeName}
|
||||
</p>
|
||||
<p style={{ margin: 0, fontSize: '0.78rem', color: 'var(--brand-muted, #b0a48c)' }}>
|
||||
{entry.passage} · {entry.filename} · {new Date(entry.uploadedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -360,7 +662,7 @@ const s: Record<string, React.CSSProperties> = {
|
||||
gap: 12,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
headerRight: { display: 'flex', alignItems: 'center', gap: 10, paddingTop: 2 },
|
||||
headerRight: { display: 'flex', alignItems: 'center', gap: 8, paddingTop: 2 },
|
||||
welcomeText: { fontSize: '0.85rem', color: 'var(--brand-muted, #b0a48c)', fontWeight: 500 },
|
||||
btnGhost: {
|
||||
background: 'none',
|
||||
@@ -371,14 +673,68 @@ const s: Record<string, React.CSSProperties> = {
|
||||
cursor: 'pointer',
|
||||
color: 'var(--brand-muted, #b0a48c)',
|
||||
},
|
||||
btnIcon: {
|
||||
background: 'none',
|
||||
border: '1px solid var(--brand-border, #2a2518)',
|
||||
borderRadius: 6,
|
||||
padding: '0.3rem 0.55rem',
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--brand-muted, #b0a48c)',
|
||||
lineHeight: 1,
|
||||
},
|
||||
btnPrimary: {
|
||||
background: 'var(--brand-gold, #c9a84c)',
|
||||
color: '#0a0a08',
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
padding: '0.7rem 1rem',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
},
|
||||
btnDanger: {
|
||||
background: '#8b2020',
|
||||
color: '#f0ead8',
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
padding: '0.7rem 1rem',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
},
|
||||
announcement: {
|
||||
background: 'rgba(201,168,76,0.1)',
|
||||
border: '1px solid var(--brand-gold, #c9a84c)',
|
||||
borderRadius: 8,
|
||||
padding: '0.65rem 0.9rem',
|
||||
fontSize: '0.87rem',
|
||||
marginBottom: 16,
|
||||
color: 'var(--brand-warm-white, #f0ead8)',
|
||||
},
|
||||
warning: {
|
||||
background: 'rgba(200,169,110,0.1)',
|
||||
border: '1px solid var(--brand-gold-dark, #8a6e28)',
|
||||
border: '1px solid #8a6e28',
|
||||
borderRadius: 8,
|
||||
padding: '0.6rem 0.85rem',
|
||||
fontSize: '0.84rem',
|
||||
marginBottom: 16,
|
||||
color: 'var(--brand-gold-light, #e0c070)',
|
||||
color: '#e0c070',
|
||||
},
|
||||
successBanner: {
|
||||
background: 'rgba(50,120,50,0.15)',
|
||||
border: '1px solid #3a6a3a',
|
||||
borderRadius: 10,
|
||||
padding: '0.85rem 1rem',
|
||||
marginBottom: 16,
|
||||
},
|
||||
seafileLink: {
|
||||
color: 'var(--brand-gold, #c9a84c)',
|
||||
fontSize: '0.84rem',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 600,
|
||||
},
|
||||
form: { display: 'flex', flexDirection: 'column', gap: 14 },
|
||||
field: { display: 'flex', flexDirection: 'column', gap: 5 },
|
||||
@@ -393,17 +749,17 @@ const s: Record<string, React.CSSProperties> = {
|
||||
color: 'var(--brand-warm-white, #f0ead8)',
|
||||
outline: 'none',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
boxSizing: 'border-box' as const,
|
||||
fontFamily: 'inherit',
|
||||
},
|
||||
dropZone: {
|
||||
border: '2px dashed var(--brand-border, #2a2518)',
|
||||
borderRadius: 10,
|
||||
padding: '1.4rem 1rem',
|
||||
textAlign: 'center',
|
||||
textAlign: 'center' as const,
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.15s, background 0.15s',
|
||||
userSelect: 'none',
|
||||
userSelect: 'none' as const,
|
||||
color: 'var(--brand-warm-white, #f0ead8)',
|
||||
},
|
||||
dropZoneActive: { borderColor: 'var(--brand-gold, #c9a84c)', background: 'rgba(201,168,76,0.06)' },
|
||||
@@ -412,42 +768,56 @@ const s: Record<string, React.CSSProperties> = {
|
||||
dropIcon: { fontSize: '1.8rem', display: 'block', marginBottom: 6 },
|
||||
dropLabel: { fontWeight: 600, margin: '0 0 3px', fontSize: '0.9rem' },
|
||||
dropSub: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.8rem', margin: 0 },
|
||||
fileInfo: { display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left' },
|
||||
fileInfo: { display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left' as const },
|
||||
fileIcon: { fontSize: '1.8rem', flexShrink: 0 },
|
||||
fileName: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', wordBreak: 'break-all', color: 'var(--brand-warm-white, #f0ead8)' },
|
||||
fileName: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', wordBreak: 'break-all' as const, color: 'var(--brand-warm-white, #f0ead8)' },
|
||||
fileSize: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.78rem', margin: 0 },
|
||||
progressWrap: { display: 'flex', flexDirection: 'column', gap: 5 },
|
||||
progressWrap: { display: 'flex', flexDirection: 'column' as const, gap: 5 },
|
||||
progressBar: { height: 7, background: 'var(--brand-black-3, #1a1a15)', borderRadius: 4, overflow: 'hidden' },
|
||||
progressFill: { height: '100%', background: 'var(--brand-gold, #c9a84c)', borderRadius: 4, transition: 'width 0.2s' },
|
||||
progressLabel: { fontSize: '0.82rem', color: 'var(--brand-muted, #b0a48c)', margin: 0, textAlign: 'center' },
|
||||
progressLabel: { fontSize: '0.82rem', color: 'var(--brand-muted, #b0a48c)', margin: 0, textAlign: 'center' as const },
|
||||
errorMsg: { color: '#e07070', fontSize: '0.84rem', margin: '2px 0' },
|
||||
btnPrimary: {
|
||||
background: 'var(--brand-gold, #c9a84c)',
|
||||
color: '#0a0a08',
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
padding: '0.7rem 1rem',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
},
|
||||
submittedList: {
|
||||
marginTop: 20,
|
||||
warnMsg: { color: '#e0c070', fontSize: '0.82rem', margin: '2px 0' },
|
||||
successMsg: { color: '#6db86d', fontSize: '0.84rem', margin: '2px 0' },
|
||||
collapsible: {
|
||||
border: '1px solid var(--brand-border, #2a2518)',
|
||||
borderRadius: 10,
|
||||
marginBottom: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
collapsibleToggle: {
|
||||
width: '100%',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
padding: '0.75rem 1rem',
|
||||
},
|
||||
submittedTitle: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--brand-warm-white, #f0ead8)',
|
||||
fontSize: '0.87rem',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.78rem',
|
||||
fontFamily: 'inherit',
|
||||
textAlign: 'left' as const,
|
||||
},
|
||||
collapsibleBody: {
|
||||
padding: '0.75rem 1rem',
|
||||
fontSize: '0.84rem',
|
||||
color: 'var(--brand-muted, #b0a48c)',
|
||||
margin: '0 0 8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
borderTop: '1px solid var(--brand-border, #2a2518)',
|
||||
},
|
||||
code: {
|
||||
fontFamily: 'monospace',
|
||||
background: 'rgba(255,255,255,0.06)',
|
||||
padding: '0 3px',
|
||||
borderRadius: 3,
|
||||
fontSize: '0.82rem',
|
||||
},
|
||||
settingsSection: {},
|
||||
sectionTitle: {
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: 700,
|
||||
margin: '0 0 12px',
|
||||
color: 'var(--brand-warm-white, #f0ead8)',
|
||||
},
|
||||
submittedRow: { display: 'flex', alignItems: 'flex-start', gap: 10, padding: '5px 0' },
|
||||
checkMark: { color: 'var(--brand-gold, #c9a84c)', fontWeight: 700, flexShrink: 0 },
|
||||
submittedEp: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', color: 'var(--brand-warm-white, #f0ead8)' },
|
||||
submittedMeta: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.78rem', margin: 0 },
|
||||
}
|
||||
Reference in new issue
Block a user