Add admin dashboard and tool icons

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;
+}