From 6bd55916d432b836a35d6f837bd7c7f1c7d2b516 Mon Sep 17 00:00:00 2001 From: Armando Hernandez Date: Wed, 12 Oct 2022 11:46:18 -0500 Subject: [PATCH] =?UTF-8?q?Primer=20commit:=20Generar=20contrase=C3=B1a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ArmandoHdzBta/PasswordGenerator.jsx | 134 ++++++++++++++ src/components/ArmandoHdzBta/style.css | 167 ++++++++++++++++++ src/pages/entry/ArmandoHdzBta/index.astro | 8 + 3 files changed, 309 insertions(+) create mode 100644 src/components/ArmandoHdzBta/PasswordGenerator.jsx create mode 100644 src/components/ArmandoHdzBta/style.css create mode 100644 src/pages/entry/ArmandoHdzBta/index.astro diff --git a/src/components/ArmandoHdzBta/PasswordGenerator.jsx b/src/components/ArmandoHdzBta/PasswordGenerator.jsx new file mode 100644 index 000000000..2d411f8fc --- /dev/null +++ b/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 ( +
+
+
+

Generador de contraseña

+
+
+ {clickcopyState != null + ? ( +
+ {clickcopyState != null ? copyState : ''} +
+ ) + : ( + '' + )} + +
+ + +
+ +
+ + +
+
+ + +
+
+
+
+ ) +} + +export default PasswordGenerator diff --git a/src/components/ArmandoHdzBta/style.css b/src/components/ArmandoHdzBta/style.css new file mode 100644 index 000000000..5fa0fba8d --- /dev/null +++ b/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; +} diff --git a/src/pages/entry/ArmandoHdzBta/index.astro b/src/pages/entry/ArmandoHdzBta/index.astro new file mode 100644 index 000000000..14e3585ec --- /dev/null +++ b/src/pages/entry/ArmandoHdzBta/index.astro @@ -0,0 +1,8 @@ +--- +import PasswordGenerator from '@components/ArmandoHdzBta/PasswordGenerator' +import Layout from '@layout' +--- + + + +