Nirodan
97 lines
2.8 KiB
React
97 lines
2.8 KiB
React
import { useState } from 'react';
|
|
import axios from '../services/api';
|
|
|
|
function HashVerifierTool() {
|
|
const [text, setText] = useState('');
|
|
const [hash, setHash] = useState('');
|
|
const [algo, setAlgo] = useState('sha256');
|
|
const [result, setResult] = useState(null);
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const verify = async () => {
|
|
setError('');
|
|
setResult(null);
|
|
if (!text || !hash) {
|
|
setError('Bitte Text und Hash eingeben.');
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.post('/api/hash/verify', { text, hash, algorithm: algo });
|
|
setResult(res.data.match);
|
|
} catch (err) {
|
|
setError(err.response?.data?.message || 'Fehler bei der Verifikation');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="main-content">
|
|
<h2>Hash Verifier</h2>
|
|
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
|
Prüft, ob ein Text mit einem gegebenen Hash übereinstimmt.
|
|
</p>
|
|
|
|
<input
|
|
type="text"
|
|
value={text}
|
|
onChange={(e) => { setText(e.target.value); setResult(null); setError(''); }}
|
|
placeholder="Originaltext"
|
|
/>
|
|
|
|
<input
|
|
type="text"
|
|
value={hash}
|
|
onChange={(e) => { setHash(e.target.value); setResult(null); setError(''); }}
|
|
placeholder="Hash-Wert"
|
|
style={{ marginTop: '8px', fontFamily: 'monospace' }}
|
|
/>
|
|
|
|
<select
|
|
value={algo}
|
|
onChange={(e) => { setAlgo(e.target.value); setResult(null); }}
|
|
style={{ marginTop: '8px' }}
|
|
>
|
|
<option value="md5">MD5</option>
|
|
<option value="sha256">SHA256</option>
|
|
<option value="bcrypt">bcrypt</option>
|
|
</select>
|
|
|
|
<button onClick={verify} disabled={loading} style={{ marginTop: '8px' }}>
|
|
{loading ? 'Prüfen...' : 'Prüfen'}
|
|
</button>
|
|
|
|
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
|
|
|
{result !== null && (
|
|
<div style={{
|
|
marginTop: '24px',
|
|
padding: '32px',
|
|
background: 'var(--surface-2)',
|
|
border: `2px solid ${result ? '#22c55e' : '#ef4444'}`,
|
|
borderRadius: '16px',
|
|
textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: '3rem', marginBottom: '8px' }}>
|
|
{result ? '✓' : '✗'}
|
|
</div>
|
|
<div style={{
|
|
fontSize: '1.4rem',
|
|
fontWeight: 700,
|
|
color: result ? '#22c55e' : '#ef4444',
|
|
}}>
|
|
{result ? 'Übereinstimmung' : 'Kein Match'}
|
|
</div>
|
|
<div style={{ color: 'var(--muted)', marginTop: '6px', fontSize: '0.9rem' }}>
|
|
Algorithmus: {algo.toUpperCase()}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HashVerifierTool;
|