Dateien nach "frontend/src" hochladen

frontend/src/App.jsx

@@ -242,7 +242,7 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
           </div>
         ))}
 
-        {user?.role==='admin' && <NavBtn item={{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }} />}
+        <NavBtn item={{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }} />
       </nav>
       {updateInfo?.hasUpdate && (
         <button onClick={onUpdateClick} style={{
@@ -309,7 +309,7 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
   const mainNav = [
     { id:'dashboard', Icon:HomeIcon,  label:'Home' },
     { id:'_apps',     Icon:AppsIcon,  label:'Apps'  },
-    ...(user?.role==='admin' ? [{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }] : []),
+    { id:'admin', Icon:AdminIcon, label:'Einst.' },
     { id:'_mehr',     Icon:MoreIcon,  label:'Mehr'  },
   ];
 
@@ -701,6 +701,37 @@ const Sec = ({title, children}) => (
   </div>
 );
 
+// ── Account-Löschung ─────────────────────────────────────────────────────────
+function DeleteAccountSection({ toast, user }) {
+  const [pw,  setPw]  = useState('');
+  const [busy, setBusy] = useState(false);
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const doDelete = async () => {
+    if (!pw) { toast('Passwort eingeben', 'error'); return; }
+    if (!await confirm(`Account "${user.username}" und alle Daten wirklich löschen? Das kann nicht rückgängig gemacht werden.`)) return;
+    setBusy(true);
+    try {
+      await api('/auth/delete-account', { method:'DELETE', body:{ password:pw } });
+      localStorage.removeItem('sk_token');
+      window.location.reload();
+    } catch(e) { toast(e.message, 'error'); } finally { setBusy(false); }
+  };
+
+  return (
+    <div>
+      <ConfirmDialog/>
+      <Field label="PASSWORT ZUR BESTÄTIGUNG" type="password" value={pw} onChange={e=>setPw(e.target.value)}/>
+      <button onClick={doDelete} disabled={busy} style={{
+        ...S.btn('#ff6b9d'), width:'100%', textAlign:'center', padding:'11px 0',
+        opacity: busy ? 0.6 : 1,
+      }}>
+        {busy ? '…' : '✕ Account unwiderruflich löschen'}
+      </button>
+    </div>
+  );
+}
+
 // ── Benutzerverwaltung ────────────────────────────────────────────────────────
 function UserManagement({ toast }) {
   const [users,   setUsers]   = useState([]);
@@ -957,6 +988,12 @@ function AdminPanel({ toast, mobile, user }) {
               {busy.pw ? '…' : '✓ Passwort ändern'}
             </button>
           </Sec>
+          <Sec title="ACCOUNT LÖSCHEN">
+            <p style={{ color:'rgba(255,255,255,0.55)', fontSize:12, fontFamily:'monospace', marginBottom:12, lineHeight:1.6 }}>
+              Löscht deinen Account und alle deine Daten unwiderruflich.
+            </p>
+            <DeleteAccountSection toast={toast} user={user}/>
+          </Sec>
         </div>
       )}
 
@@ -1051,7 +1088,7 @@ export default function App() {
         )}
         <main style={mainStyle}>
           {active==='dashboard' && <Dashboard toast={toast} mobile={mobile}/>}
-          {active==='admin' && user?.role==='admin' && <AdminPanel toast={toast} mobile={mobile} user={user}/>}
+          {active==='admin' && <AdminPanel toast={toast} mobile={mobile} user={user}/>}
           {activeTool && <activeTool.component toast={toast} mobile={mobile}/>}
         </main>
       </div>