Add admin dashboard and tool icons

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>
   );