diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100755 new mode 100644 diff --git a/src/components/leouui/App.jsx b/src/components/leouui/App.jsx new file mode 100644 index 000000000..f1532a7ad --- /dev/null +++ b/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
+ + () => setPassword(password)}/> +
+} + +export default App \ No newline at end of file diff --git a/src/components/leouui/PasswordConfig.jsx b/src/components/leouui/PasswordConfig.jsx new file mode 100644 index 000000000..b8955f9e4 --- /dev/null +++ b/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 <> +
+
+
+ Longitud: + {config.length} +
+ + setConfig(c => ({ ...c, length: Number(value) })) + } + /> +
+
+
Dificultad:
+
+ {DIFF_BUTTONS.map(({ label, color, value }) => + + )} +
+
+
+ + +} +export default PasswordConfig \ No newline at end of file diff --git a/src/components/leouui/PasswordInput.jsx b/src/components/leouui/PasswordInput.jsx new file mode 100644 index 000000000..6c891e426 --- /dev/null +++ b/src/components/leouui/PasswordInput.jsx @@ -0,0 +1,18 @@ +import { copyText } from './helpers/copyText' + +const PasswordInput = ({ password }) => { + return
+ + +
+} + +export default PasswordInput \ No newline at end of file diff --git a/src/components/leouui/helpers/copyText.js b/src/components/leouui/helpers/copyText.js new file mode 100644 index 000000000..75ee3f9b4 --- /dev/null +++ b/src/components/leouui/helpers/copyText.js @@ -0,0 +1,4 @@ +export const copyText = (value) => { + navigator.clipboard.writeText(value) + alert('Contrasena generada: ' + value) +} \ No newline at end of file diff --git a/src/components/leouui/helpers/generatePassword.js b/src/components/leouui/helpers/generatePassword.js new file mode 100644 index 000000000..228c72090 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/components/leouui/styles.css b/src/components/leouui/styles.css new file mode 100644 index 000000000..247f100e2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/entry/leouui/index.astro b/src/pages/entry/leouui/index.astro new file mode 100644 index 000000000..6de3f3e60 --- /dev/null +++ b/src/pages/entry/leouui/index.astro @@ -0,0 +1,33 @@ +--- +import Layout from '@layout' +import App from './../../../components/leouui/App' +--- + + + + + + + +
+ +
+ \ No newline at end of file