Add admin dashboard and tool icons

Dockerfile

@@ -14,6 +14,7 @@ COPY backend/app.py ./backend/app.py
 COPY backend/util ./backend/util
 COPY backend/auth ./backend/auth
 COPY backend/tools ./backend/tools
+COPY backend/admin.py ./backend/admin.py
 COPY backend/templates ./backend/templates
 # Store DB config in a docker-friendly location (/config), override via DB_CONFIG_PATH env if needed
 COPY backend/config /config

backend/admin.py

@@ -0,0 +1,135 @@
+from flask import Blueprint, request, jsonify
+from mysql.connector import connect
+from werkzeug.security import generate_password_hash
+from auth.token import verify_token
+from util.db_config import load_config
+from util.logger import logger
+
+admin_bp = Blueprint("admin", __name__)
+
+
+def _require_admin():
+    user = verify_token()
+    if not user:
+        return None, (jsonify({"message": "Nicht autorisiert"}), 401)
+    if user.get("role") != "admin":
+        logger.warning("🚫 Adminbereich verweigert (kein Admin)")
+        return None, (jsonify({"message": "Adminrechte erforderlich"}), 403)
+    return user, None
+
+
+@admin_bp.route("/api/admin/users", methods=["GET"])
+def list_users():
+    _, err = _require_admin()
+    if err:
+        return err
+    try:
+        cfg = load_config()
+        conn = connect(**cfg)
+        cur = conn.cursor(dictionary=True)
+        cur.execute("SELECT id, username, role FROM users ORDER BY username ASC")
+        users = cur.fetchall()
+        cur.close()
+        conn.close()
+        return jsonify(users)
+    except Exception as e:
+        logger.error(f"[Admin list_users] {e}")
+        return jsonify({"message": "Serverfehler"}), 500
+
+
+@admin_bp.route("/api/admin/users", methods=["POST"])
+def create_user():
+    admin, err = _require_admin()
+    if err:
+        return err
+    data = request.get_json() or {}
+    username = data.get("username", "").strip()
+    password = data.get("password", "")
+    role = data.get("role", "user")
+    if not username or not password:
+        return jsonify({"message": "Username und Passwort erforderlich"}), 400
+    try:
+        cfg = load_config()
+        conn = connect(**cfg)
+        cur = conn.cursor(dictionary=True)
+        cur.execute("SELECT id FROM users WHERE username=%s", (username,))
+        if cur.fetchone():
+            cur.close()
+            conn.close()
+            return jsonify({"message": "Nutzer existiert bereits"}), 409
+        cur.execute(
+            "INSERT INTO users (username, password, role) VALUES (%s, %s, %s)",
+            (username, generate_password_hash(password), role)
+        )
+        conn.commit()
+        new_id = cur.lastrowid
+        cur.close()
+        conn.close()
+        logger.info(f"✅ User erstellt: {username} durch {admin['username']}")
+        return jsonify({"id": new_id, "username": username, "role": role}), 201
+    except Exception as e:
+        logger.error(f"[Admin create_user] {e}")
+        return jsonify({"message": "Serverfehler"}), 500
+
+
+@admin_bp.route("/api/admin/users/<int:user_id>", methods=["PUT"])
+def update_user(user_id):
+    admin, err = _require_admin()
+    if err:
+        return err
+    data = request.get_json() or {}
+    role = data.get("role")
+    password = data.get("password")
+    if role is None and password is None:
+        return jsonify({"message": "Nichts zu aktualisieren"}), 400
+    try:
+        cfg = load_config()
+        conn = connect(**cfg)
+        cur = conn.cursor()
+        if role:
+            cur.execute("UPDATE users SET role=%s WHERE id=%s", (role, user_id))
+        if password:
+            cur.execute(
+                "UPDATE users SET password=%s WHERE id=%s",
+                (generate_password_hash(password), user_id)
+            )
+        conn.commit()
+        cur.close()
+        conn.close()
+        logger.info(f"✏️ User aktualisiert (id={user_id}) durch {admin['username']}")
+        return jsonify({"message": "Aktualisiert"}), 200
+    except Exception as e:
+        logger.error(f"[Admin update_user] {e}")
+        return jsonify({"message": "Serverfehler"}), 500
+
+
+@admin_bp.route("/api/admin/users/<int:user_id>", methods=["DELETE"])
+def delete_user(user_id):
+    admin, err = _require_admin()
+    if err:
+        return err
+    try:
+        cfg = load_config()
+        conn = connect(**cfg)
+        cur = conn.cursor()
+        # Schutz: Admin darf sich nicht selbst löschen
+        cur.execute("SELECT username FROM users WHERE id=%s", (user_id,))
+        row = cur.fetchone()
+        if not row:
+            cur.close()
+            conn.close()
+            return jsonify({"message": "Nicht gefunden"}), 404
+        username = row[0]
+        if username == admin["username"]:
+            cur.close()
+            conn.close()
+            return jsonify({"message": "Du kannst dich nicht selbst löschen"}), 400
+        cur.execute("DELETE FROM users WHERE id=%s", (user_id,))
+        conn.commit()
+        cur.close()
+        conn.close()
+        logger.info(f"🗑️ User gelöscht (id={user_id}) durch {admin['username']}")
+        return jsonify({"message": "Gelöscht"}), 200
+    except Exception as e:
+        logger.error(f"[Admin delete_user] {e}")
+        return jsonify({"message": "Serverfehler"}), 500

backend/app.py

@@ -10,6 +10,7 @@ from util.db_config import is_configured, load_config, test_connection
 from util.setup_routes import setup_blueprint
 from auth import auth_bp
 from tools import md5_blueprint
+from admin import admin_bp
 
 app = Flask(__name__, template_folder="templates")
 
@@ -18,6 +19,7 @@ app = Flask(__name__, template_folder="templates")
 app.register_blueprint(setup_blueprint)
 app.register_blueprint(auth_bp)
 app.register_blueprint(md5_blueprint)
+app.register_blueprint(admin_bp)
 
 # 🌐 React-Frontend ausliefern
 @app.route('/', defaults={'path': ''})

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import LoginForm from './components/LoginForm';
 import Md5Tool from './components/Md5Tool';
 import NavBar from './components/NavBar';
 import ToolOverview from './components/ToolOverview';
+import AdminDashboard from './components/AdminDashboard';
 
 
 import './css/base.css';
@@ -12,6 +13,7 @@ import './css/buttons.css';
 import './css/dark.css';
 import './css/light.css';
 import './css/menu.css';
+import './css/admin.css';
 
 
 function App() {
@@ -26,7 +28,14 @@ function App() {
           <Route path="/login" element={<LoginForm />} />
           {/*<Route path="/register" element={<RegisterForm />} />*/}
           <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
-          {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
+          <Route
+            path="/admin"
+            element={
+              isLoggedIn && role === 'admin'
+                ? <AdminDashboard />
+                : <Navigate to="/" />
+            }
+          />
         </Routes>
     </BrowserRouter>
   );

frontend/src/components/AdminDashboard.jsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react';
+import axios from '../services/api';
+
+function AdminDashboard() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState({ username: '', password: '', role: 'user' });
+  const [error, setError] = useState(null);
+
+  const fetchUsers = async () => {
+    try {
+      setLoading(true);
+      const res = await axios.get('/api/admin/users');
+      setUsers(res.data);
+      setError(null);
+    } catch (e) {
+      setError('Konnte Nutzerliste nicht laden');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const createUser = async () => {
+    if (!form.username || !form.password) {
+      setError('Username und Passwort erforderlich');
+      return;
+    }
+    try {
+      setCreating(true);
+      await axios.post('/api/admin/users', form);
+      setForm({ username: '', password: '', role: 'user' });
+      await fetchUsers();
+    } catch (e) {
+      setError(e.response?.data?.message || 'Erstellen fehlgeschlagen');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const updateRole = async (id, role) => {
+    try {
+      await axios.put(`/api/admin/users/${id}`, { role });
+      await fetchUsers();
+    } catch (e) {
+      setError('Rolle konnte nicht aktualisiert werden');
+    }
+  };
+
+  const resetPassword = async (id) => {
+    const pw = prompt('Neues Passwort setzen:');
+    if (!pw) return;
+    try {
+      await axios.put(`/api/admin/users/${id}`, { password: pw });
+      alert('Passwort aktualisiert.');
+    } catch (e) {
+      setError('Passwort konnte nicht gesetzt werden');
+    }
+  };
+
+  const deleteUser = async (id) => {
+    if (!window.confirm('Diesen Nutzer löschen?')) return;
+    try {
+      await axios.delete(`/api/admin/users/${id}`);
+      await fetchUsers();
+    } catch (e) {
+      setError(e.response?.data?.message || 'Löschen fehlgeschlagen');
+    }
+  };
+
+  return (
+    <div className="main-content admin">
+      <div className="admin-header">
+        <div>
+          <p className="eyebrow">Adminbereich</p>
+          <h2>Benutzerverwaltung</h2>
+          <p className="muted">Nutzer anlegen, Rollen setzen, Passwörter zurücksetzen.</p>
+        </div>
+      </div>
+
+      <div className="admin-grid">
+        <div className="admin-card">
+          <h3>Neuen Nutzer anlegen</h3>
+          <div className="form-grid">
+            <label>
+              Benutzername
+              <input
+                value={form.username}
+                onChange={(e) => setForm({ ...form, username: e.target.value })}
+                placeholder="z.B. maria"
+              />
+            </label>
+            <label>
+              Passwort
+              <input
+                type="password"
+                value={form.password}
+                onChange={(e) => setForm({ ...form, password: e.target.value })}
+                placeholder="Sicheres Passwort"
+              />
+            </label>
+            <label>
+              Rolle
+              <select
+                value={form.role}
+                onChange={(e) => setForm({ ...form, role: e.target.value })}
+              >
+                <option value="user">User</option>
+                <option value="admin">Admin</option>
+              </select>
+            </label>
+          </div>
+          <button onClick={createUser} disabled={creating}>
+            ➕ Nutzer anlegen
+          </button>
+          {error && <p className="error">{error}</p>}
+        </div>
+
+        <div className="admin-card">
+          <div className="table-head">
+            <h3>Nutzer</h3>
+            <button className="ghost" onClick={fetchUsers} disabled={loading}>↻ Aktualisieren</button>
+          </div>
+          {loading ? (
+            <p className="muted">Lade Nutzer...</p>
+          ) : (
+            <div className="table">
+              <div className="table-row table-headings">
+                <span>👤 Nutzer</span>
+                <span>Rolle</span>
+                <span className="actions">Aktionen</span>
+              </div>
+              {users.map((u) => (
+                <div className="table-row" key={u.id}>
+                  <span className="user">{u.username}</span>
+                  <span>
+                    <select
+                      value={u.role}
+                      onChange={(e) => updateRole(u.id, e.target.value)}
+                    >
+                      <option value="user">User</option>
+                      <option value="admin">Admin</option>
+                    </select>
+                  </span>
+                  <span className="actions">
+                    <button className="ghost" onClick={() => resetPassword(u.id)}>🔑 Passwort</button>
+                    <button className="ghost danger" onClick={() => deleteUser(u.id)}>🗑️ Löschen</button>
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminDashboard;

frontend/src/components/NavBar.jsx

@@ -5,11 +5,15 @@ import LogoutButton from './LogoutButton';
 
 function NavBar() {
   const isLoggedIn = localStorage.getItem('token') !== null;
+  const role = localStorage.getItem('role');
 
   return (
     <nav className="navbar">
       <div className="nav-left">
         <Link to="/" className="nav-button">🏠 Home</Link>
+        {isLoggedIn && role === 'admin' && (
+          <Link to="/admin" className="nav-button">🛠️ Admin</Link>
+        )}
       </div>
 
       {isLoggedIn && (

frontend/src/components/ToolOverview.jsx

@@ -9,9 +9,9 @@ function ToolOverview() {
       <h2>Tool-Übersicht</h2>
       <p>Wähle ein Tool aus:</p>
 
-      <button onClick={() => navigate('/tools/md5')}>MD5 Tool</button><br /><br />
+      <button onClick={() => navigate('/tools/md5')}>🔒 MD5 Tool</button><br /><br />
       {role === 'admin' && (
-        <button onClick={() => navigate('/admin')}>Admin-Bereich</button>
+        <button onClick={() => navigate('/admin')}>🛠️ Admin-Bereich</button>
       )}
     </div>
   );

frontend/src/css/admin.css

@@ -0,0 +1,131 @@
+.admin {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.admin-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 12px;
+  color: var(--muted);
+  margin: 0 0 6px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.admin-grid {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.admin-card {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--shadow);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  margin: 12px 0 16px;
+}
+
+.form-grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+select {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text);
+  border-radius: 12px;
+  padding: 10px 12px;
+}
+
+.table {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 1.2fr 0.6fr 1fr;
+  gap: 8px;
+  padding: 12px 14px;
+  align-items: center;
+  background: var(--surface);
+}
+
+.table-row:nth-child(even) {
+  background: var(--surface-2);
+}
+
+.table-headings {
+  background: rgba(34, 211, 238, 0.08);
+  font-weight: 700;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+}
+
+.table .user {
+  font-weight: 700;
+}
+
+.table .actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.ghost {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  box-shadow: none;
+  padding: 9px 12px;
+}
+
+.ghost:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: rgba(34, 211, 238, 0.08);
+}
+
+.ghost.danger {
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #f87171;
+}
+
+.ghost.danger:hover {
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.table-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.error {
+  color: #f87171;
+  margin-top: 10px;
+}