<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected].1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Generar Pass</title>
</head>
<body>
<section class="container mt-3">
<h1 class="text-center">
Genera tu password
<h5 class="text-center">
Incluimos Mayusculas, Minusculas, Numeros y Caracteres especiales
</h5>
</h1>
<hr />
<div class="row justify-content-around mt-3">
<div class="col-4">
<h4 class="text-center my-2 mb-4">Escoje cual contraseña</h4>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="sel"
id="i1"
value="1"
role="button"
/>
<label class="form-check-label" for="i1" role="button">Debil</label>
</div>
<div class="vr"></div>
<div class="form-check form-check-inline ms-2">
<input
class="form-check-input"
type="radio"
name="sel"
id="i2"
value="2"
role="button"
/>
<label class="form-check-label" for="i2" role="button"
>Fuerte</label
>
</div>
<div class="vr"></div>
<div class="form-check form-check-inline ms-2">
<input
class="form-check-input"
type="radio"
name="sel"
id="i3"
value="3"
role="button"
/>
<label class="form-check-label" for="i3" role="button"
>Muy Fuerte</label
>
</div>
<div class="row justify-content-center mt-4">
<button class="btn btn-primary">Generar</button>
</div>
</div>
<div class="vr bg-light border-end border-secondary"></div>
<div id="div_res" class="col-4 d-none">
<h2 id="dev" class="text-center border rounded p-3 shadow"></h2>
<div class="row mt-3">
<div class="col-4">
<span id="cop" class="btn btn-outline-dark">copy</span>
</div>
<div class="col-4">
<a
href="https://ciberprotector.com/comprobador-de-contrase%C3%B1as/"
target="_blank"
>Ciberprotector</a
>
</div>
<div class="col-4">
<a
href="https://delinea.com/resources/password-strength-checker"
target="_blank"
>Delinea</a
>
</div>
</div>
</div>
</div>
</section>
<script>
document
.querySelector(".btn-primary") .addEventListener("click", function () { let a;
div_res.classList.add("d-none"); dev.classList.remove(
"bg-danger",
"bg-secondary",
"bg-warning",
"text-light",
"text-warning",
"text-success"
);
document.querySelectorAll('[name="sel"]').forEach(function (e) { if (e.checked) a = e.value;
});
if (a != undefined) { 1 == a
? dev.classList.add("bg-danger", "text-light") : 2 == a
? dev.classList.add("bg-secondary", "text-warning") : dev.classList.add("bg-warning", "text-success"); div_res.classList.remove("d-none"); dev.innerText = generar_pass(a);
}
});
const copyContent = async () => { let text = document.getElementById("dev").innerText; try { await navigator.clipboard.writeText(text);
console.log("Content copied to clipboard"); } catch (err) { console.error("Failed to copy: ", err); }
};
cop.addEventListener("click", copyContent);
/* CODIGO GENERAR PASS */
const generar_pass = (t) => { let e;
if (1 == t)
for (let a = 0; (e = aleatorio(8)), check_pass(e) != t; a++);
else if (2 == t)
for (let a = 0; (e = aleatorio(12)), check_pass(e) != t; a++);
else for (let a = 0; (e = aleatorio(14)), check_pass(e) != t; a++);
return e;
},
aleatorio = (t) => { let e,
a =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.*+-#@<>~"; const r = () => (
(e = (() => { let e = "";
for (var r = 0, l = a.length; r < t; ++r)
e += a.charAt(Math.floor(Math.random() * l));
return e;
})()),
!!(
e.match(/\W|_/g) &&
e.match(/(\d+)/g) &&
e.match(/[a-z]/g) &&
e.match(/[A-Z]/g)
) && e
);
for (let t = 0; !r(); t++);
return e;
},
check_pass = (t) => { let e,
a = [
t.match(/\W|_/g).length,
t.match(/(\d+)/g).length,
t.match(/[a-z]/g).length,
t.match(/[A-Z]/g).length,
];
for (let t = 0; t < a.length; t++) { let r = a[t];
if (((e = ""), 1 == r)) { e = 1;
break;
}
if (2 == r) { e = 2;
break;
}
e = 3;
}
return e;
};
</script>
</body>
</html>
