PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor HashGeneratorComponent to use new Input component and reorder elements

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-04 15:50:39 +08:00
parent 8324596b77
commit f830f5b5e8
1 changed files with 41 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx
View file

@ -69,67 +69,62 @@ export default () => {
}
return (
<section class="section">
<TextField class="input" value={plainText()} onChange={setPlainText}>
<TextField.Label class="input__label">Plain Text:</TextField.Label>
<TextField.TextArea class="input__textarea" />
</TextField>
<>
<section class="section">
<Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input>
<Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input>
<div class="output">
<MiniCard text="MD5" content={md5()} onClick={() => copyToClipboard(md5(), 'MD5')} />
<Alert for="MD5" trigger={copiedText() === 'MD5'} />
<div class="output">
{/* <span class="output__title">Results:</span> */}
<MiniCard text="SHA1" content={sha1()} onClick={() => copyToClipboard(sha1(), 'SHA1')} />
<Alert for="SHA1" trigger={copiedText() === 'SHA1'} />
<MiniCard text="MD5" content={md5()} onClick={() => copyToClipboard(md5(), 'MD5')} />
<Alert for="MD5" trigger={copiedText() === 'MD5'} />
<MiniCard text="SHA224" content={sha224()} onClick={() => copyToClipboard(sha224(), 'SHA224')} />
<Alert for="SHA224" trigger={copiedText() === 'SHA224'} />
<MiniCard text="SHA1" content={sha1()} onClick={() => copyToClipboard(sha1(), 'SHA1')} />
<Alert for="SHA1" trigger={copiedText() === 'SHA1'} />
<MiniCard text="SHA256" content={sha256()} onClick={() => copyToClipboard(sha256(), 'SHA256')} />
<Alert for="SHA256" trigger={copiedText() === 'SHA256'} />
<MiniCard text="SHA224" content={sha224()} onClick={() => copyToClipboard(sha224(), 'SHA224')} />
<Alert for="SHA224" trigger={copiedText() === 'SHA224'} />
<MiniCard text="SHA384" content={sha384()} onClick={() => copyToClipboard(sha384(), 'SHA384')} />
<Alert for="SHA384" trigger={copiedText() === 'SHA384'} />
<MiniCard text="SHA256" content={sha256()} onClick={() => copyToClipboard(sha256(), 'SHA256')} />
<Alert for="SHA256" trigger={copiedText() === 'SHA256'} />
<MiniCard text="SHA512" content={sha512()} onClick={() => copyToClipboard(sha512(), 'SHA512')} />
<Alert for="SHA512" trigger={copiedText() === 'SHA512'} />
<MiniCard text="SHA384" content={sha384()} onClick={() => copyToClipboard(sha384(), 'SHA384')} />
<Alert for="SHA384" trigger={copiedText() === 'SHA384'} />
<MiniCard text="SHA3" content={sha3()} onClick={() => copyToClipboard(sha3(), 'SHA3')} />
<Alert for="SHA3" trigger={copiedText() === 'SHA3'} />
<MiniCard text="SHA512" content={sha512()} onClick={() => copyToClipboard(sha512(), 'SHA512')} />
<Alert for="SHA512" trigger={copiedText() === 'SHA512'} />
<span class="output__title">with HMAC:</span>
<span class="output__description">Hash-based Message Authentication Code (HMAC) needs a secret passphrase to generate a hash.</span>
<MiniCard text="SHA3" content={sha3()} onClick={() => copyToClipboard(sha3(), 'SHA3')} />
<Alert for="SHA3" trigger={copiedText() === 'SHA3'} />
<TextField class="input" value={passphrase()} onChange={setPassphrase} defaultValue={passphrase()}>
<TextField.Label class="input__label">Secret Passphrase:</TextField.Label>
<TextField.TextArea class="input__textarea" />
</TextField>
<span class="output__title">with HMAC:</span>
<span class="output__description">Hash-based Message Authentication Code (HMAC) needs a secret passphrase to generate a hash.</span>
<MiniCard text="HMAC MD5" content={hmacMd5()} onClick={() => copyToClipboard(hmacMd5(), 'HMAC MD5')} />
<Alert for="HMAC MD5" trigger={copiedText() === 'HMAC MD5'} />
<TextField class="input" value={passphrase()} onChange={setPassphrase} defaultValue={passphrase()}>
<TextField.Label class="input__label">Secret Passphrase:</TextField.Label>
<TextField.TextArea class="input__textarea" />
</TextField>
<MiniCard text="HMAC SHA1" content={hmacSha1()} onClick={() => copyToClipboard(hmacSha1(), 'HMAC SHA1')} />
<Alert for="HMAC SHA1" trigger={copiedText() === 'HMAC SHA1'} />
<MiniCard text="HMAC MD5" content={hmacMd5()} onClick={() => copyToClipboard(hmacMd5(), 'HMAC MD5')} />
<Alert for="HMAC MD5" trigger={copiedText() === 'HMAC MD5'} />
<MiniCard text="HMAC SHA224" content={hmacSha224()} onClick={() => copyToClipboard(hmacSha224(), 'HMAC SHA224')} />
<Alert for="HMAC SHA224" trigger={copiedText() === 'HMAC SHA224'} />
<MiniCard text="HMAC SHA1" content={hmacSha1()} onClick={() => copyToClipboard(hmacSha1(), 'HMAC SHA1')} />
<Alert for="HMAC SHA1" trigger={copiedText() === 'HMAC SHA1'} />
<MiniCard text="HMAC SHA256" content={hmacSha256()} onClick={() => copyToClipboard(hmacSha256(), 'HMAC SHA256')} />
<Alert for="HMAC SHA256" trigger={copiedText() === 'HMAC SHA256'} />
<MiniCard text="HMAC SHA224" content={hmacSha224()} onClick={() => copyToClipboard(hmacSha224(), 'HMAC SHA224')} />
<Alert for="HMAC SHA224" trigger={copiedText() === 'HMAC SHA224'} />
<MiniCard text="HMAC SHA384" content={hmacSha384()} onClick={() => copyToClipboard(hmacSha384(), 'HMAC SHA384')} />
<Alert for="HMAC SHA384" trigger={copiedText() === 'HMAC SHA384'} />
<MiniCard text="HMAC SHA256" content={hmacSha256()} onClick={() => copyToClipboard(hmacSha256(), 'HMAC SHA256')} />
<Alert for="HMAC SHA256" trigger={copiedText() === 'HMAC SHA256'} />
<MiniCard text="HMAC SHA512" content={hmacSha512()} onClick={() => copyToClipboard(hmacSha512(), 'HMAC SHA512')} />
<Alert for="HMAC SHA512" trigger={copiedText() === 'HMAC SHA512'} />
<MiniCard text="HMAC SHA384" content={hmacSha384()} onClick={() => copyToClipboard(hmacSha384(), 'HMAC SHA384')} />
<Alert for="HMAC SHA384" trigger={copiedText() === 'HMAC SHA384'} />
<MiniCard text="HMAC SHA512" content={hmacSha512()} onClick={() => copyToClipboard(hmacSha512(), 'HMAC SHA512')} />
<Alert for="HMAC SHA512" trigger={copiedText() === 'HMAC SHA512'} />
<MiniCard text="HMAC SHA3" content={hmacSha3()} onClick={() => copyToClipboard(hmacSha3(), 'HMAC SHA3')} />
<Alert for="HMAC SHA3" trigger={copiedText() === 'HMAC SHA3'} />
</div>
</section>
<MiniCard text="HMAC SHA3" content={hmacSha3()} onClick={() => copyToClipboard(hmacSha3(), 'HMAC SHA3')} />
<Alert for="HMAC SHA3" trigger={copiedText() === 'HMAC SHA3'} />
</div>
</section>
</>
)
}