Removed duplicated components
This commit is contained in:
parent
b75b7d0334
commit
02d93ca83f
4 changed files with 0 additions and 416 deletions
|
|
@ -1,14 +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: row
|
|
||||||
align-items: flex-start
|
|
||||||
padding: 2rem
|
|
||||||
border: vars.$componentBorder
|
|
||||||
border-radius: vars.$componentBorderRadius
|
|
||||||
color: #ffffff
|
|
||||||
font-family: 'Inter', sans-serif
|
|
||||||
gap: 2rem
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import './PasswordManagerComponent.sass'
|
|
||||||
import { AiTwotonePlusCircle } from 'solid-icons/ai'
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<section class="section">
|
|
||||||
<div>1</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,218 +0,0 @@
|
||||||
@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)
|
|
||||||
|
|
||||||
// $toggleOffColor: color.adjust(vars.$background, $lightness: 10%)
|
|
||||||
// $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
|
|
||||||
padding: 0 0 0 1rem
|
|
||||||
flex-grow: 0
|
|
||||||
|
|
||||||
@media screen and (max-width: view.$tablet)
|
|
||||||
padding: 0 2rem 0 2rem
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
.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: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily
|
|
||||||
|
|
||||||
.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%)
|
|
||||||
|
|
||||||
@media screen and (max-width: view.$tablet)
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
text-align: center
|
|
||||||
width: 100vw
|
|
||||||
|
|
||||||
.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
|
|
||||||
|
|
@ -1,174 +0,0 @@
|
||||||
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">
|
|
||||||
<MiniCard text="Generated Password" content={password()} onClick={copyToClipboard} />
|
|
||||||
|
|
||||||
<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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue