password generator by leouui

src/components/leouui/App.jsx

@@ -0,0 +1,14 @@
+import { useState } from 'react'
+import PasswordConfig from './PasswordConfig'
+import PasswordInput from './PasswordInput'
+import './styles.css'
+
+const App = () => {
+	const [password, setPassword] = useState('')
+	return <div className='password-box'>
+		<PasswordInput password={password}/>
+		<PasswordConfig onSubmit={(password) => () => setPassword(password)}/>
+	</div>
+}
+
+export default App

src/components/leouui/PasswordConfig.jsx

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import { generatePassword } from './helpers/generatePassword'
+
+const DIFF_CONFIG = {
+	easy: { abc: true },
+	medium: { abc: true, num: true },
+	hard: { num: true, symbols: true, abc: true, mayus: true }
+}
+
+const MIN_LENGTH = 10
+const MAX_LENGTH = 20
+
+const DIFF_BUTTONS = [
+	{ label: 'Facil', color: '#6dc26d', value: 'easy' },
+	{ label: 'Mediana', color: '#c2c16d', value: 'medium' },
+	{ label: 'Dificil', color: '#c26d6d', value: 'hard' }
+]
+
+const { initlabel, initconfig } = { initlabel: 'easy', initconfig: { ...DIFF_CONFIG.easy, length: MIN_LENGTH } }
+
+const PasswordConfig = ({ onSubmit }) => {
+	const [config, setConfig] = useState(initconfig)
+	const [selectedDiff, setSelectedDiff] = useState(initlabel)
+
+	const handleSelectDiff = (value, config) => () => {
+		setSelectedDiff(value)
+		setConfig(({ length }) => ({ length, ...config }))
+	}
+
+	return <>
+		<div className='password-config'>
+			<div className='password-config__item'>
+				<div className='password-config__item-label flex flex-x-between'>
+					Longitud:
+					<span>{config.length}</span>
+				</div>
+				<input
+					type='range'
+					className='wid-100'
+					defaultValue={MIN_LENGTH}
+					min={MIN_LENGTH}
+					max={MAX_LENGTH}
+					step={1}
+					onChange={({ target: { value } }) =>
+						setConfig(c => ({ ...c, length: Number(value) }))
+					}
+				/>
+			</div>
+			<div className='password-config__item'>
+				<div className='password-config__item-label'>Dificultad:</div>
+				<div className='password-config__diff'>
+					{DIFF_BUTTONS.map(({ label, color, value }) =>
+						<button
+							key={value}
+							className='btn diff-btn'
+							style={
+								value === selectedDiff
+									? { backgroundColor: color, color: '#000' }
+									: { border: `2px solid ${color}`, color }
+							}
+							onClick={handleSelectDiff(value, DIFF_CONFIG[value])}
+						>
+							{label}
+						</button>
+					)}
+				</div>
+			</div>
+		</div>
+		<button
+			className='btn generate-password-btn'
+			onClick={onSubmit(generatePassword(config))}
+		>
+			GENERAR CONTRASEÑA
+		</button>
+	</>
+}
+export default PasswordConfig

src/components/leouui/PasswordInput.jsx

@@ -0,0 +1,18 @@
+import { copyText } from './helpers/copyText'
+
+const PasswordInput = ({ password }) => {
+	return <div className='password-input flex'>
+		<input
+			type='text'
+			defaultValue={password}
+			readOnly
+			placeholder='#G7goC9<x='
+			className='wid-100'
+		/>
+		<button className='btn btn-primary' onClick={() => copyText(password)}>
+			<i className='fa-regular fa-copy'></i>
+		</button>
+	</div>
+}
+
+export default PasswordInput

src/components/leouui/helpers/copyText.js

@@ -0,0 +1,4 @@
+export const copyText = (value) => {
+	navigator.clipboard.writeText(value)
+	alert('Contrasena generada: ' + value)
+}

src/components/leouui/helpers/generatePassword.js

@@ -0,0 +1,22 @@
+const ABC = 'abcdefghijklmnopqrstuvwxyz'
+const defaultConfig = { abc: ABC, mayus: ABC.toUpperCase(), num: '1234567890', symbols: '~!@#$%^&*()_+-{}[].,:;<>=' }
+
+export const generatePassword = (config) => {
+	let password = ''
+	let orderIndex = 0
+	let order = Object.entries(config)
+		.reduce((pv, [key, value]) => value && key !== 'length' ? [...pv, key] : pv, [])
+		.sort(() => Math.random() - 0.5)
+
+	for (let i = 0; i < config.length; i++) {
+		if (orderIndex > order.length - 1) {
+			orderIndex = 0
+			order = order.sort(() => Math.random() - 0.5)
+		}
+		const configTurn = defaultConfig[order[orderIndex]]
+		password += configTurn[Math.floor(Math.random() * configTurn.length)]
+		orderIndex++
+	}
+
+	return password
+}

src/components/leouui/styles.css

@@ -0,0 +1,55 @@
+#leouui .wid-100 {
+	width: 100%;
+}
+#leouui .flex-x-between{
+	justify-content: space-between;
+}
+#leouui .btn {
+	padding: 10px 13px;
+}
+#leouui .diff-btn {
+	font-size: 13px;
+	flex-grow: 1;
+	flex-shrink: 0;
+	border-radius: 5px;
+	border: 2px solid transparent;
+	transition:.3s;
+	font-weight: 600;
+}
+#leouui .generate-password-btn {
+	font-size: 14px;
+	border-radius: 5px;
+	background-color: #1f1f1f;
+	padding: 13px;
+	transition: .3s;
+}
+#leouui .generate-password-btn:hover {
+	background-color: #2c2c2c;
+}
+
+#leouui .password-box {
+	width: 400px;
+	max-width: 100%;
+	padding: 20px;
+}
+#leouui .password-input input {
+	color: #000;
+	padding: 10px 20px;
+	border-radius: 5px;
+	height:50px;
+}
+
+#leouui .password-config,.password-box{
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+#leouui .password-config__diff{
+	display: flex;
+	gap: 20px;
+	justify-content: space-between;
+}
+#leouui .password-config__item-label {
+	font-size: 14px;
+	margin-bottom: 5px;
+}

src/pages/entry/leouui/index.astro

@@ -0,0 +1,33 @@
+---
+import Layout from '@layout'
+import App from './../../../components/leouui/App'
+---
+
+<link href='https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;500;700&display=swap' rel='stylesheet'>
+<script src='https://kit.fontawesome.com/72662fb630.js' crossorigin='anonymous'></script>
+
+<style>
+	* {
+		box-sizing:border-box;
+		list-style: none;
+		padding: 0;
+		outline: none;
+	}
+	.main-container {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		color: #fff;
+		background-color: #000;
+		align-items: center;
+		font-family: 'JetBrains Mono', monospace;
+	}
+</style>
+
+<Layout title='Password Generator'>
+	<main class='main-container' id='leouui'>
+		<App client:visible/>
+	</main>
+</Layout>