Removed outdated component
This commit is contained in:
parent
b01928ead3
commit
18349b2c59
2 changed files with 0 additions and 251 deletions
|
|
@ -1,119 +0,0 @@
|
|||
@use '/src/assets/css/variables.sass' as vars
|
||||
@use '/src/assets/css/viewport.sass' as view
|
||||
@use 'sass:color'
|
||||
|
||||
.section
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
padding: 2rem
|
||||
border: 1px solid rgba(255, 255, 255, 0.3)
|
||||
border-radius: 16px
|
||||
color: #ffffff
|
||||
font-family: 'Inter', sans-serif
|
||||
gap: 2rem
|
||||
|
||||
@media screen and (max-width: view.$tablet)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
padding: 2rem
|
||||
border: 1px solid rgba(255, 255, 255, 0.3)
|
||||
border-radius: 16px
|
||||
color: #ffffff
|
||||
font-family: 'Inter', sans-serif
|
||||
|
||||
.input
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
width: 100%
|
||||
gap: 0.5rem
|
||||
|
||||
&__label
|
||||
font-family: 'Inter', sans-serif
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
|
||||
&__textarea
|
||||
font-family: 'Inter', sans-serif
|
||||
font-size: 1rem
|
||||
width: calc(100% - 1rem)
|
||||
height: 5rem
|
||||
background-color: color.adjust(vars.$background, $lightness: 10%)
|
||||
border: 1px solid color.adjust(vars.$background, $lightness: 20%)
|
||||
border-radius: 8px
|
||||
padding: 0.5rem
|
||||
color: color.adjust(vars.$background, $lightness: 60%)
|
||||
outline: none
|
||||
transition: all 0.4s ease-out
|
||||
|
||||
&:hover
|
||||
border-color: color.adjust(vars.$background, $lightness: 30%)
|
||||
|
||||
&:focus
|
||||
border-color: color.adjust(vars.$background, $lightness: 50%)
|
||||
color: color.adjust(vars.$background, $lightness: 80%)
|
||||
|
||||
.output
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
width: 100%
|
||||
gap: 0.5rem
|
||||
|
||||
&__title
|
||||
margin: 2rem 0 0.5rem 0
|
||||
|
||||
&__description
|
||||
margin: 0 0 1rem 0
|
||||
font-size: 0.8rem
|
||||
color: color.adjust(vars.$background, $lightness: 50%)
|
||||
|
||||
.mini-card
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
gap: 0.5rem
|
||||
width: 40rem
|
||||
padding: 0.5rem
|
||||
background-color: color.adjust(vars.$background, $lightness: 5%)
|
||||
border-radius: 8px
|
||||
overflow: hidden
|
||||
|
||||
&__label
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
// align-items: center
|
||||
gap: 0.5rem
|
||||
font-size: 0.9rem
|
||||
width: 100%
|
||||
text-align: left
|
||||
|
||||
&__text
|
||||
font-weight: 600
|
||||
background-color: vars.$background
|
||||
border-radius: 0px 0 8px 0
|
||||
color: color.adjust(vars.$background, $lightness: 80%)
|
||||
margin: -0.5rem 0 0.5rem -0.5rem
|
||||
padding: 0.5rem 2rem 0.5rem 1rem
|
||||
|
||||
&__button
|
||||
// border: 1px solid color.adjust(vars.$background, $lightness: 30%)
|
||||
// border-radius: 8px
|
||||
// margin: -0.5rem -0.5rem
|
||||
// padding: 0.2rem 0.2rem
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&__content
|
||||
font-size: 1rem
|
||||
color: color.adjust(vars.$background, $lightness: 70%)
|
||||
padding: 0 0.5rem 0.5rem 0
|
||||
word-break: break-all
|
||||
white-space: pre-wrap
|
||||
overflow-x: auto
|
||||
text-align: left
|
||||
letter-spacing: 0.5px
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
import './HashGeneratorComponent.sass'
|
||||
import MiniCard from '../MiniCard/MiniCard.tsx'
|
||||
import { TextField } from '@kobalte/core/text-field'
|
||||
import { createSignal, createEffect } from 'solid-js'
|
||||
import { FiCopy } from 'solid-icons/fi'
|
||||
import * as cjs from 'crypto-js'
|
||||
import Alert from '../Alert/Alert.tsx'
|
||||
|
||||
const { MD5, SHA1, SHA224, SHA256, SHA384, SHA512, SHA3, HmacMD5, HmacSHA1, HmacSHA224, HmacSHA256, HmacSHA384, HmacSHA512, HmacSHA3 } = cjs
|
||||
|
||||
export default () => {
|
||||
const [plainText, setPlainText] = createSignal('Change me...')
|
||||
const [passphrase, setPassphrase] = createSignal('This is a sample secret passphrase, change me...')
|
||||
const [md5, setMd5] = createSignal('')
|
||||
const [md6, setMd6] = createSignal('')
|
||||
const [sha1, setSha1] = createSignal('')
|
||||
const [sha224, setSha224] = createSignal('')
|
||||
const [sha256, setSha256] = createSignal('')
|
||||
const [sha384, setSha384] = createSignal('')
|
||||
const [sha512, setSha512] = createSignal('')
|
||||
const [sha3, setSha3] = createSignal('')
|
||||
const [hmacMd5, setHmacmd5] = createSignal('')
|
||||
const [hmacSha1, setHmacsha1] = createSignal('')
|
||||
const [hmacSha224, setHmacsha224] = createSignal('')
|
||||
const [hmacSha256, setHmacsha256] = createSignal('')
|
||||
const [hmacSha384, setHmacsha384] = createSignal('')
|
||||
const [hmacSha512, setHmacsha512] = createSignal('')
|
||||
const [hmacSha3, setHmacsha3] = createSignal('')
|
||||
|
||||
const [pepper, setPepper] = createSignal('')
|
||||
const [argon2, setArgon2] = createSignal('')
|
||||
const [bcrypt, setBcrypt] = createSignal('')
|
||||
const [scrypt, setScrypt] = createSignal('')
|
||||
const [PBKDF2, setPBKDF2] = createSignal('')
|
||||
|
||||
const [copiedText, setCopiedText] = createSignal('')
|
||||
|
||||
const hashingPlainText = () => {
|
||||
setMd5(MD5(plainText()).toString())
|
||||
setSha1(SHA1(plainText()).toString())
|
||||
setSha224(SHA224(plainText()).toString())
|
||||
setSha256(SHA256(plainText()).toString())
|
||||
setSha384(SHA384(plainText()).toString())
|
||||
setSha512(SHA512(plainText()).toString())
|
||||
setSha3(SHA3(plainText()).toString())
|
||||
|
||||
setHmacmd5(HmacMD5(plainText(), passphrase()).toString())
|
||||
setHmacsha1(HmacSHA1(plainText(), passphrase()).toString())
|
||||
setHmacsha224(HmacSHA224(plainText(), passphrase()).toString())
|
||||
setHmacsha256(HmacSHA256(plainText(), passphrase()).toString())
|
||||
setHmacsha384(HmacSHA384(plainText(), passphrase()).toString())
|
||||
setHmacsha512(HmacSHA512(plainText(), passphrase()).toString())
|
||||
setHmacsha3(HmacSHA3(plainText(), passphrase()).toString())
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
hashingPlainText()
|
||||
})
|
||||
|
||||
const copyToClipboard = async (text: string, alertType: string) => {
|
||||
try {
|
||||
navigator.clipboard.writeText(text)
|
||||
setCopiedText(alertType)
|
||||
setTimeout(() => setCopiedText(''), 2000)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<div class="output">
|
||||
{/* <span class="output__title">Results:</span> */}
|
||||
|
||||
<MiniCard text="MD5" content={md5()} onClick={() => copyToClipboard(md5(), 'MD5')} />
|
||||
<Alert for="MD5" trigger={copiedText() === 'MD5'} />
|
||||
|
||||
<MiniCard text="SHA1" content={sha1()} onClick={() => copyToClipboard(sha1(), 'SHA1')} />
|
||||
<Alert for="SHA1" trigger={copiedText() === 'SHA1'} />
|
||||
|
||||
<MiniCard text="SHA224" content={sha224()} onClick={() => copyToClipboard(sha224(), 'SHA224')} />
|
||||
<Alert for="SHA224" trigger={copiedText() === 'SHA224'} />
|
||||
|
||||
<MiniCard text="SHA256" content={sha256()} onClick={() => copyToClipboard(sha256(), 'SHA256')} />
|
||||
<Alert for="SHA256" trigger={copiedText() === 'SHA256'} />
|
||||
|
||||
<MiniCard text="SHA384" content={sha384()} onClick={() => copyToClipboard(sha384(), 'SHA384')} />
|
||||
<Alert for="SHA384" trigger={copiedText() === 'SHA384'} />
|
||||
|
||||
<MiniCard text="SHA512" content={sha512()} onClick={() => copyToClipboard(sha512(), 'SHA512')} />
|
||||
<Alert for="SHA512" trigger={copiedText() === 'SHA512'} />
|
||||
|
||||
<MiniCard text="SHA3" content={sha3()} onClick={() => copyToClipboard(sha3(), 'SHA3')} />
|
||||
<Alert for="SHA3" trigger={copiedText() === 'SHA3'} />
|
||||
|
||||
<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>
|
||||
|
||||
<TextField class="input" value={passphrase()} onChange={setPassphrase}>
|
||||
<TextField.Label class="input__label">Secret Passphrase:</TextField.Label>
|
||||
<TextField.TextArea class="input__textarea" />
|
||||
</TextField>
|
||||
|
||||
<MiniCard text="HMAC MD5" content={hmacMd5()} onClick={() => copyToClipboard(hmacMd5(), 'HMAC MD5')} />
|
||||
<Alert for="HMAC MD5" trigger={copiedText() === 'HMAC MD5'} />
|
||||
|
||||
<MiniCard text="HMAC SHA1" content={hmacSha1()} onClick={() => copyToClipboard(hmacSha1(), 'HMAC SHA1')} />
|
||||
<Alert for="HMAC SHA1" trigger={copiedText() === 'HMAC SHA1'} />
|
||||
|
||||
<MiniCard text="HMAC SHA224" content={hmacSha224()} onClick={() => copyToClipboard(hmacSha224(), 'HMAC SHA224')} />
|
||||
<Alert for="HMAC SHA224" trigger={copiedText() === 'HMAC SHA224'} />
|
||||
|
||||
<MiniCard text="HMAC SHA256" content={hmacSha256()} onClick={() => copyToClipboard(hmacSha256(), 'HMAC SHA256')} />
|
||||
<Alert for="HMAC SHA256" trigger={copiedText() === 'HMAC SHA256'} />
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue