reset commits
This commit is contained in:
commit
cf5af3cc23
55 changed files with 6825 additions and 0 deletions
|
|
@ -0,0 +1,119 @@
|
|||
@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
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
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'
|
||||
import Input from '../../Input/Input.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>
|
||||
|
||||
<Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input>
|
||||
|
||||
<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} defaultValue={passphrase()}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@use '/src/assets/css/variables.sass' as vars
|
||||
@use '/src/assets/css/viewport.sass' as view
|
||||
@use 'sass:color'
|
||||
|
||||
.section
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: flex-start
|
||||
padding: 2rem
|
||||
border: vars.$componentBorder
|
||||
border-radius: vars.$componentBorderRadius
|
||||
color: #ffffff
|
||||
font-family: 'Inter', sans-serif
|
||||
gap: 2rem
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import './PasswordManagerComponent.sass'
|
||||
import { AiTwotonePlusCircle } from 'solid-icons/ai'
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<section class="section">
|
||||
<div>1</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
@use '/src/assets/css/variables.sass' as vars
|
||||
@use '/src/assets/css/viewport.sass' as view
|
||||
@use 'sass:color'
|
||||
|
||||
$toggleOffColor: rgba(126, 206, 241, 0.286)
|
||||
$toggleOnColor: rgba(53, 155, 80, 0.993)
|
||||
|
||||
.section
|
||||
display: flex
|
||||
flex-direction: row
|
||||
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
|
||||
|
||||
.toggle--group
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
padding: 0 2rem 0 0
|
||||
margin: 0
|
||||
|
||||
.right--side
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.slider--group
|
||||
// grid-area: slider--group
|
||||
padding: 0 0 0 1rem
|
||||
flex-grow: 0
|
||||
|
||||
.display--group
|
||||
padding: 3rem 1rem 1rem 1rem
|
||||
|
||||
.toggle
|
||||
color: white
|
||||
padding: 0.25rem 0
|
||||
display: flex
|
||||
flex-direction: row
|
||||
gap: 0.5rem
|
||||
align-items: center
|
||||
height: auto
|
||||
|
||||
&__text
|
||||
font-size: 1rem
|
||||
|
||||
&__switch
|
||||
visibility: hidden
|
||||
width: 0
|
||||
height: 0
|
||||
|
||||
&:checked + label
|
||||
background-color: $toggleOnColor
|
||||
transition: background-color 0.5s ease-in-out
|
||||
|
||||
&:checked + label:after
|
||||
left: calc(100% - 6px)
|
||||
transform: translateX(-70%)
|
||||
|
||||
.password-display
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
color: #ffffff
|
||||
// margin-top: 20px
|
||||
// border: 1px solid #ffffff
|
||||
// padding: 1rem
|
||||
// border-radius: 5px
|
||||
// width: 30rem
|
||||
|
||||
&__label
|
||||
font-weight: bold
|
||||
margin: 1rem 0 -0.5rem 0
|
||||
|
||||
&__content
|
||||
border: 1px solid color.adjust(vars.$background, $lightness: 20%)
|
||||
background-color: color.adjust(vars.$background, $lightness: 5%)
|
||||
color: color.adjust(vars.$background, $lightness: 80%)
|
||||
width: 23rem
|
||||
height: auto
|
||||
padding: 1rem
|
||||
border-radius: 5px
|
||||
text-align: left
|
||||
word-wrap: break-word
|
||||
letter-spacing: 1px
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
// font-family: 'Inter'
|
||||
|
||||
.button--group
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: flex-start
|
||||
gap: 1rem
|
||||
// margin-top: 20px
|
||||
// border: 1px solid #ffffff
|
||||
// padding: 1rem
|
||||
// border-radius: 5px
|
||||
width: 30rem
|
||||
margin: 1rem 0 0 0
|
||||
|
||||
.slider
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
user-select: none
|
||||
touch-action: none
|
||||
margin: 1rem 0 0 0
|
||||
gap: 0.5rem
|
||||
width: 41rem
|
||||
cursor: pointer
|
||||
|
||||
&__label
|
||||
display: flex
|
||||
flex-direction: row
|
||||
gap: 0.5rem
|
||||
width: 100%
|
||||
|
||||
&__track
|
||||
background-color: hsl(240 6% 90%)
|
||||
position: relative
|
||||
border-radius: 9999px
|
||||
height: 8px
|
||||
width: 100%
|
||||
|
||||
&__range
|
||||
position: absolute
|
||||
background-color: $toggleOnColor
|
||||
border-radius: 9999px
|
||||
height: 100%
|
||||
|
||||
&__thumb
|
||||
display: block
|
||||
width: 16px
|
||||
height: 16px
|
||||
background-color: $toggleOnColor
|
||||
border-radius: 9999px
|
||||
top: -4px
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
|
||||
|
||||
.alert
|
||||
border-radius: 6px
|
||||
padding: 1rem 1.25rem
|
||||
background-color: rgba(12, 31, 39, 0.991)
|
||||
border: 1px solid color.adjust($toggleOffColor, $lightness: 2%)
|
||||
color: rgba(126, 206, 241, 0.748)
|
||||
font-size: 1.25rem
|
||||
|
||||
.alert--container
|
||||
position: fixed
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
z-index: 1000
|
||||
|
||||
.checkbox
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
|
||||
&__control
|
||||
height: 20px
|
||||
width: 20px
|
||||
border-radius: 6px
|
||||
background-color: #e5e8ec
|
||||
cursor: pointer
|
||||
|
||||
&__input:focus-visible + &__control
|
||||
// outline: 2px solid hsl(200 98% 39%)
|
||||
outline-offset: 2px
|
||||
|
||||
&__control[data-checked]
|
||||
border-color: color.adjust($toggleOnColor, $blackness: 20%)
|
||||
background-color: $toggleOnColor
|
||||
color: white
|
||||
|
||||
&__label
|
||||
display: none
|
||||
margin-left: 6px
|
||||
color: hsl(240 6% 10%)
|
||||
font-size: 14px
|
||||
user-select: none
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
import './PasswordGeneratorComponent.sass'
|
||||
import { createSignal, createEffect, Show } from 'solid-js'
|
||||
import Button from '../../Button/Button'
|
||||
import MiniCard from '../../MiniCard/MiniCard'
|
||||
// import ToggleSwtich from '../ToggleSwitch/ToggleSwitch'
|
||||
import { Slider } from '@kobalte/core/slider'
|
||||
import { Switch } from '@kobalte/core/switch'
|
||||
import { Alert } from '@kobalte/core/alert'
|
||||
import { Checkbox } from '@kobalte/core/checkbox'
|
||||
import { FaSolidCheck } from 'solid-icons/fa'
|
||||
|
||||
export default () => {
|
||||
const [uppercase, setUppercase] = createSignal(true)
|
||||
const [lowercase, setLowercase] = createSignal(true)
|
||||
const [numbers, setNumbers] = createSignal(true)
|
||||
const [symbols, setSymbols] = createSignal(true)
|
||||
const [emojis, setEmojis] = createSignal(false)
|
||||
const [length, setLength] = createSignal(8)
|
||||
const [password, setPassword] = createSignal('')
|
||||
const [showAlert, setShowAlert] = createSignal(false)
|
||||
|
||||
const generatePassword = () => {
|
||||
let characters = ''
|
||||
if (uppercase()) characters += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||
if (lowercase()) characters += 'abcdefghijklmnopqrstuvwxyz'
|
||||
if (numbers()) characters += '0123456789'
|
||||
if (symbols()) characters += '!@#$%^&*()_+-=[]{}|;:,.<>?~'
|
||||
if (emojis()) characters += '😊🙂😅🤩😜😝🐯🐱🐵🦊🦁🐷🐮🧭'
|
||||
|
||||
let passwordArray = Array.from({ length: length() }, () => characters[Math.floor(Math.random() * characters.length)])
|
||||
setPassword(passwordArray.join(''))
|
||||
}
|
||||
|
||||
// Effect to update the display when the length changes
|
||||
createEffect(() => {
|
||||
generatePassword()
|
||||
})
|
||||
|
||||
const handleToggleChange = (target: string) => {
|
||||
if (target === 'uppercase') setUppercase(!uppercase())
|
||||
else if (target === 'lowercase') setLowercase(!lowercase())
|
||||
else if (target === 'numbers') setNumbers(!numbers())
|
||||
else if (target === 'symbols') setSymbols(!symbols())
|
||||
else if (target === 'emojis') setEmojis(!emojis())
|
||||
|
||||
generatePassword()
|
||||
}
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
navigator.clipboard.writeText(password())
|
||||
setShowAlert(true)
|
||||
setTimeout(() => setShowAlert(false), 2000)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section class="section">
|
||||
<div class="toggle--group">
|
||||
<h3>Options:</h3>
|
||||
|
||||
<div class="toggle">
|
||||
<Checkbox class="checkbox" checked={uppercase()} onChange={setUppercase}>
|
||||
<Checkbox.Input class="checkbox__input" />
|
||||
<Checkbox.Control class="checkbox__control">
|
||||
<Checkbox.Indicator>
|
||||
<FaSolidCheck size={12} />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Control>
|
||||
<Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
|
||||
</Checkbox>
|
||||
<span class="toggle__text">Uppercase</span>
|
||||
{/* <input class="toggle__switch" type="checkbox" id="uppercase" />
|
||||
<label for="uppercase" onClick={() => handleToggleChange('uppercase')}></label> */}
|
||||
</div>
|
||||
|
||||
<div class="toggle">
|
||||
<Checkbox class="checkbox" checked={lowercase()} onChange={setLowercase}>
|
||||
<Checkbox.Input class="checkbox__input" />
|
||||
<Checkbox.Control class="checkbox__control">
|
||||
<Checkbox.Indicator>
|
||||
<FaSolidCheck size={12} />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Control>
|
||||
<Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
|
||||
</Checkbox>
|
||||
<span class="toggle__text">Lowercase</span>
|
||||
{/* <input class="toggle__switch" type="checkbox" id="lowercase" />
|
||||
<label for="lowercase" onClick={() => handleToggleChange('lowercase')}></label> */}
|
||||
</div>
|
||||
<div class="toggle">
|
||||
<Checkbox class="checkbox" checked={numbers()} onChange={setNumbers}>
|
||||
<Checkbox.Input class="checkbox__input" />
|
||||
<Checkbox.Control class="checkbox__control">
|
||||
<Checkbox.Indicator>
|
||||
<FaSolidCheck size={12} />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Control>
|
||||
<Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
|
||||
</Checkbox>
|
||||
<span class="toggle__text">Numbers</span>
|
||||
{/* <input class="toggle__switch" type="checkbox" id="numbers" />
|
||||
<label for="numbers" onClick={() => handleToggleChange('numbers')}></label> */}
|
||||
</div>
|
||||
<div class="toggle">
|
||||
<Checkbox class="checkbox" checked={symbols()} onChange={setSymbols}>
|
||||
<Checkbox.Input class="checkbox__input" />
|
||||
<Checkbox.Control class="checkbox__control">
|
||||
<Checkbox.Indicator>
|
||||
<FaSolidCheck size={12} />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Control>
|
||||
<Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
|
||||
</Checkbox>
|
||||
<span class="toggle__text">Symbols</span>
|
||||
{/* <input class="toggle__switch" type="checkbox" id="symbols" />
|
||||
<label for="symbols" onClick={() => handleToggleChange('symbols')}></label> */}
|
||||
</div>
|
||||
{/* <div class="toggle">
|
||||
<span class="toggle__text">Emojis:</span>
|
||||
<input class="toggle__switch" type="checkbox" id="emojis" />
|
||||
<label for="emojis" onClick={() => handleToggleChange('emojis')}></label>
|
||||
</div> */}
|
||||
<div class="toggle">
|
||||
<Checkbox class="checkbox" checked={emojis()} onChange={setEmojis}>
|
||||
<Checkbox.Input class="checkbox__input" />
|
||||
<Checkbox.Control class="checkbox__control">
|
||||
<Checkbox.Indicator>
|
||||
<FaSolidCheck size={12} />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Control>
|
||||
<Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
|
||||
</Checkbox>
|
||||
<span class="toggle__text">Emojis</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="right--side">
|
||||
<div class="slider--group">
|
||||
<Slider class="slider" minValue={8} maxValue={60} onChange={setLength}>
|
||||
<div class="slider__label">
|
||||
<span>Length: </span>
|
||||
<Slider.ValueLabel />
|
||||
</div>
|
||||
<Slider.Track class="slider__track">
|
||||
<Slider.Fill class="slider__range" />
|
||||
<Slider.Thumb class="slider__thumb">
|
||||
<Slider.Input />
|
||||
</Slider.Thumb>
|
||||
</Slider.Track>
|
||||
</Slider>
|
||||
</div>
|
||||
|
||||
<div class="display--group">
|
||||
{/* <div class="password-display">
|
||||
<p class="password-display__label">Generated Password:</p>
|
||||
<p class="password-display__content">{password()}</p>
|
||||
</div> */}
|
||||
|
||||
<MiniCard text="Generated Password" content={password()} onClick={copyToClipboard} />
|
||||
{/* <MiniCard text="Generated Password" content={password()} onClick={() => copyToClipboard()} alignLeft={true} /> */}
|
||||
|
||||
<div class="button--group">
|
||||
{/* <Button label="Copy" onClick={() => copyToClipboard()} /> */}
|
||||
<Button label="Generate Again" onClick={() => generatePassword()} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="alert--container">
|
||||
<Show when={showAlert()}>
|
||||
<Alert class="alert alert--float">Copied to clipboard!</Alert>
|
||||
</Show>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@use '/src/assets/css/variables.sass' as vars
|
||||
@use '/src/assets/css/viewport.sass' as view
|
||||
@use 'sass:color'
|
||||
|
||||
.section
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: flex-start
|
||||
padding: 2rem
|
||||
border: vars.$componentBorder
|
||||
border-radius: vars.$componentBorderRadius
|
||||
color: #ffffff
|
||||
font-family: 'Inter', sans-serif
|
||||
gap: 2rem
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import './PasswordManagerComponent.sass'
|
||||
import { AiTwotonePlusCircle } from 'solid-icons/ai'
|
||||
import { createSignal, createEffect } from 'solid-js'
|
||||
import Input from '../../Input/Input'
|
||||
import AddItem from '../../AddItem/AddItem.tsx'
|
||||
|
||||
const [passwords, setPasswords] = createSignal('')
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<section class="section">
|
||||
<div>
|
||||
<Input label="Username" value={passwords()} onChange={setPasswords} />
|
||||
<AddItem />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue