Lars
bbc59457ac
- Removed Admin Panel from SettingsPage and adjusted related logic. - Added EmailSettings component for SMTP configuration and testing. - Created admin navigation structure in adminNav.js for better organization. - Implemented AdminShell layout for consistent admin UI. - Added RequireAdmin component to protect admin routes. - Developed AdminHomePage for admin dashboard with navigation links. - Created AdminSystemPage for SMTP settings and placeholder metadata export. - Implemented AdminUsersPage for user management, including profile creation and editing.
79 lines
3.4 KiB
JavaScript
79 lines
3.4 KiB
JavaScript
import { useState, useEffect } from 'react'
|
||
|
||
export default function EmailSettings() {
|
||
const [status, setStatus] = useState(null)
|
||
const [testTo, setTestTo] = useState('')
|
||
const [testing, setTesting] = useState(false)
|
||
const [testMsg, setTestMsg] = useState(null)
|
||
|
||
useEffect(()=>{
|
||
const token = localStorage.getItem('bodytrack_token')||''
|
||
fetch('/api/admin/email/status',{headers:{'X-Auth-Token':token}})
|
||
.then(r=>r.json()).then(setStatus)
|
||
},[])
|
||
|
||
const sendTest = async () => {
|
||
if (!testTo) return
|
||
setTesting(true); setTestMsg(null)
|
||
try {
|
||
const token = localStorage.getItem('bodytrack_token')||''
|
||
const r = await fetch('/api/admin/email/test',{
|
||
method:'POST',headers:{'Content-Type':'application/json','X-Auth-Token':token},
|
||
body:JSON.stringify({to:testTo})
|
||
})
|
||
if(!r.ok) throw new Error((await r.json()).detail)
|
||
setTestMsg('✓ Test-E-Mail gesendet!')
|
||
} catch(e){ setTestMsg('✗ Fehler: '+e.message) }
|
||
finally{ setTesting(false) }
|
||
}
|
||
|
||
return (
|
||
<div className="card section-gap" style={{marginTop:0}}>
|
||
<div style={{fontWeight:700,fontSize:14,marginBottom:10,display:'flex',alignItems:'center',gap:6}}>
|
||
📧 E-Mail Konfiguration (SMTP)
|
||
</div>
|
||
{!status ? <div className="spinner" style={{width:16,height:16}}/> : (
|
||
<>
|
||
<div style={{padding:'8px 12px',borderRadius:8,marginBottom:12,
|
||
background:status.configured?'var(--accent-light)':'var(--warn-bg)',
|
||
fontSize:12,color:status.configured?'var(--accent-dark)':'var(--warn-text)'}}>
|
||
{status.configured
|
||
? <>✓ Konfiguriert: <strong>{status.smtp_user}</strong> via {status.smtp_host}</>
|
||
: <>⚠️ Nicht konfiguriert. SMTP-Einstellungen in der <code>.env</code> Datei setzen.</>}
|
||
</div>
|
||
{status.configured && (
|
||
<>
|
||
<div style={{fontSize:11,color:'var(--text3)',marginBottom:10,lineHeight:1.5}}>
|
||
<strong>App-URL:</strong> {status.app_url}<br/>
|
||
<span style={{fontSize:10}}>Für korrekte Links in E-Mails (z.B. Recovery-Links). In .env als APP_URL setzen.</span>
|
||
</div>
|
||
<div style={{display:'flex',gap:8}}>
|
||
<input type="email" className="form-input" placeholder="test@beispiel.de"
|
||
value={testTo} onChange={e=>setTestTo(e.target.value)} style={{flex:1}}/>
|
||
<button className="btn btn-secondary" onClick={sendTest} disabled={testing}>
|
||
{testing?'…':'Test'}
|
||
</button>
|
||
</div>
|
||
{testMsg && <div style={{fontSize:12,marginTop:6,
|
||
color:testMsg.startsWith('✓')?'var(--accent)':'#D85A30'}}>{testMsg}</div>}
|
||
</>
|
||
)}
|
||
{!status.configured && (
|
||
<div style={{fontSize:11,color:'var(--text3)',lineHeight:1.6}}>
|
||
Füge folgende Zeilen zur <code>.env</code> Datei hinzu:<br/>
|
||
<code style={{background:'var(--surface2)',padding:'6px 8px',borderRadius:4,
|
||
display:'block',marginTop:6,fontSize:11}}>
|
||
SMTP_HOST=smtp.gmail.com<br/>
|
||
SMTP_PORT=587<br/>
|
||
SMTP_USER=deine@gmail.com<br/>
|
||
SMTP_PASS=dein_app_passwort<br/>
|
||
APP_URL=http://192.168.2.49:3002
|
||
</code>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|