Primer commit: Generar contraseña

src/components/ArmandoHdzBta/PasswordGenerator.jsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import './style.css'
+
+const PasswordGenerator = () => {
+	const [rango, setRango] = useState(6)
+	const [copyState, setCopyState] = useState('Debe de generar una contraseña primero')
+	const [clickcopyState, setClickCopyState] = useState(null)
+	const [password, setPassword] = useState(null)
+	const [reset, setReset] = useState(true)
+
+	const setRangoValor = ({ target: { value } }) => {
+		if (value < 6 || value > 20) return
+		setRango(value)
+	}
+
+	const generatePassword = () => {
+		const leterUpercase = 'ABCDEFGHIJKLMNOPQRSTVWXYZ'
+		const leterSlowercase = 'abcdefghijklmnopqrstvwxyz'
+		const numbers = '0123456789'
+		const specialCharacter = '!%&$=/*+'
+		const stringCaracteres = leterUpercase + leterSlowercase + numbers + specialCharacter
+		let passwordGenerated = ''
+
+		for (let i = 0; i < rango; i++) {
+			passwordGenerated += stringCaracteres[getNumRandom(0, stringCaracteres.length)]
+		}
+
+		setPassword(passwordGenerated)
+		setClickCopyState(null)
+		setReset(false)
+	}
+
+	const getNumRandom = (min, max) => {
+		min = Math.ceil(min)
+		max = Math.floor(max)
+		return Math.floor(Math.random() * (max - min + 1) + min)
+	}
+
+	const copyToClipboard = () => {
+		if (!password) {
+			setClickCopyState(false)
+			return false
+		}
+
+		setClickCopyState(true)
+		navigator.clipboard.writeText(password)
+		setCopyState('La contraseña se a copiado al clipboard')
+	}
+
+	const onReset = () => {
+		setRango(6)
+		setClickCopyState(null)
+		setPassword(null)
+		setReset(true)
+	}
+
+	return (
+		<div className='d-flex justify-content-center'>
+			<div className='card mt-5'>
+				<div className='card-header'>
+					<h2 className='text-bold text-center'>Generador de contraseña</h2>
+				</div>
+				<div className='card-body'>
+					{clickcopyState != null
+						? (
+							<div
+								className={
+									clickcopyState === false ? 'row mt-1 alert no-copy' : 'row mt-1 alert copy'
+								}
+							>
+								{clickcopyState != null ? copyState : ''}
+							</div>
+						)
+						: (
+							''
+						)}
+
+					<div className='row d-flex justify-content-between'>
+						<input
+							type='text'
+							name='password'
+							id='password'
+							readOnly
+							className='only-read password'
+							placeholder='Contraseña'
+							value={password || ''}
+						/>
+						<button
+							type='button'
+							className='btn btn-copy text-center'
+							title='Copiar'
+							onClick={copyToClipboard}
+						></button>
+					</div>
+
+					<div className='row d-flex justify-content-between'>
+						<label className='label' htmlFor='rango'>
+							Tamaño
+							<input
+								type='range'
+								id='rango'
+								name='rango'
+								min='6'
+								max='20'
+								step='1'
+								className=''
+								value={rango}
+								onChange={setRangoValor}
+							/>
+						</label>
+						<input
+							type='text'
+							id='showRango'
+							name='showRango'
+							readOnly
+							className='only-read rango text-center'
+							value={rango}
+						/>
+					</div>
+					<div className='row'>
+						<button type='button' className='btn btn-generar' onClick={generatePassword}>
+							Generar contraseña
+						</button>
+						<button type='button' className='btn btn-reset' disabled={reset} onClick={onReset}>
+							Reset
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default PasswordGenerator

src/components/ArmandoHdzBta/style.css

@@ -0,0 +1,167 @@
+.bg-white {
+	background: #fff;
+}
+
+.invisible {
+	visibility: hidden;
+}
+
+.visible {
+	visibility: visible;
+}
+
+.text-bold {
+	font-weight: bold;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.row {
+	width: 100%;
+	margin: 1vh;
+}
+
+.mt-5 {
+	margin-top: 5vh;
+}
+
+.mt-1 {
+	margin-top: 1vh;
+}
+
+.d-flex {
+	display: flex;
+}
+
+.justify-content-center {
+	justify-content: center;
+}
+
+.justify-content-between {
+	justify-content: space-between;
+}
+
+.card {
+	width: 50%;
+	padding: 1vh;
+	border-radius: 1vh;
+	background: #fff;
+}
+
+.card-header {
+	padding: 1vh;
+	border-bottom: 1.5px solid rgb(128 128 128 / 20%);
+}
+
+.card-body {
+	padding: 1vh;
+}
+
+.card-footer {
+	padding: 1vh;
+	border-top: 1.5px solid rgb(128 128 128 / 20%);
+}
+
+.password {
+	width: 92%;
+	font-weight: 500;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	text-align: center;
+}
+
+.only-read {
+	border: none;
+	border: 1px solid #afafaf;
+	border-radius: 1vh;
+	padding: 1vh;
+	background: #afafaf6c;
+}
+
+.rango {
+	max-width: 5%;
+	min-width: 5%;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	outline: none;
+	background: none;
+	border: none;
+}
+
+.btn {
+	outline: none;
+	width: auto;
+	height: auto;
+	border-radius: 1vh;
+	padding: 1vh;
+}
+
+.btn-copy::before {
+	content: '📋';
+}
+
+.btn-copy {
+	background: #0093ad;
+	color: #fff;
+}
+
+.btn-generar {
+	background: #00ad6b;
+	color: #fff;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.alert {
+	width: 100%;
+	font-size: 12px;
+	padding: 1vh;
+	font-weight: 500;
+}
+
+.no-copy {
+	color: #721c24;
+	background: #f8d7da;
+	border-left: 2px solid #721c24;
+}
+
+.copy {
+	color: #155724;
+	background: #d4edda;
+	border-left: 2px solid #155724;
+}
+
+input:focus {
+	outline: none;
+}
+
+input[type='range'] {
+	width: 100%;
+}
+
+.label {
+	width: 92%;
+	padding: 1vh;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.btn-reset {
+	background: #0093ad;
+	margin-left: 2vh;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	color: #fff;
+}
+
+button:disabled,
+button[disabled] {
+	border: 1px solid #999;
+	background-color: #ccc;
+	color: #666;
+}
+
+.link:hover {
+	color: #0093ad;
+}

src/pages/entry/ArmandoHdzBta/index.astro

@@ -0,0 +1,8 @@
+---
+import PasswordGenerator from '@components/ArmandoHdzBta/PasswordGenerator'
+import Layout from '@layout'
+---
+
+<Layout title='Armando Hdz.'>
+	<PasswordGenerator client:load />
+</Layout>