Nirodan
7f9c5c874a
- 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>
69 lines
2.0 KiB
React
69 lines
2.0 KiB
React
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;
|