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