Add 6 new tools: Hasher, Base64, JWT Decoder, Password Gen, Timestamp, Text Diff

- backend/tools/hasher.py: POST /api/hash/sha256 and /api/hash/bcrypt (bcrypt added to requirements) - backend/tools/base64tool.py: POST /api/base64/encode and /api/base64/decode - backend/tools/jwtdecoder.py: POST /api/jwt/decode (signature verification disabled) - backend/tools/passwordgen.py: POST /api/password/generate with charset and length options - backend/tools/timestamp.py: POST /api/timestamp/convert (unix<->date, ISO 8601 + German format) - backend/tools/textdiff.py: POST /api/text/diff returning structured added/removed/unchanged lines - All blueprints registered in app.py and tools/__init__.py - React components with copy button, dark/light mode support via CSS variables - ToolOverview rebuilt as card grid; App.jsx routes added for all tools Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-24 14:28:18 +02:00
parent 80ec5eca7b
commit 7f9c5c874a
17 changed files with 788 additions and 6 deletions
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import axios from '../services/api';
+
+const resultBox = {
+  marginTop: '12px',
+  padding: '12px 14px',
+  background: 'var(--surface-2)',
+  border: '1px solid var(--border)',
+  borderRadius: '12px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  justifyContent: 'space-between',
+};
+
+function HasherTool() {
+  const [input, setInput] = useState('');
+  const [algo, setAlgo] = useState('sha256');
+  const [result, setResult] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const handleHash = async () => {
+    try {
+      const res = await axios.post(`/api/hash/${algo}`, { text: input });
+      setResult(res.data[algo]);
+    } catch {
+      alert('Fehler beim Hashen');
+    }
+  };
+
+  const copy = () => {
+    navigator.clipboard.writeText(result);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="main-content">
+      <h2>SHA256 / bcrypt Hasher</h2>
+      <p style={{ color: 'var(--accent)', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
+        <strong>Hinweis:</strong> bcrypt ist sicher für Passwörter – SHA256 für Datenintegrität.
+      </p>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => { setInput(e.target.value); setResult(''); }}
+        placeholder="Text eingeben"
+      />
+      <select value={algo} onChange={(e) => { setAlgo(e.target.value); setResult(''); }} style={{ marginTop: '8px' }}>
+        <option value="sha256">SHA256</option>
+        <option value="bcrypt">bcrypt</option>
+      </select>
+      <button onClick={handleHash}>Hash berechnen</button>
+      {result && (
+        <div style={resultBox}>
+          <span style={{ wordBreak: 'break-all', color: 'var(--text)', fontFamily: 'monospace', fontSize: '0.9rem' }}>
+            {result}
+          </span>
+          <button className="ghost" onClick={copy} style={{ flexShrink: 0, margin: 0 }}>
+            {copied ? 'Kopiert!' : 'Kopieren'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default HasherTool;