Reto #2 Stranger things (2)

Dustin, Suzie y la constante de Planck - Validar una contraseña con Javascript

by didacticode

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Dustin, Suzie y la constante de Planck - Validar una contraseña con Javascript</title>
    <meta charset="utf-8"/>
    <style>
        body{
            background-image: url(cajafuerte.jpg);
            height:100vh;
            padding: 0;
            color: white;
            font-family: sans-serif;
        }
        div.centrado {
            height: 100%;
            display: flex;
            align-items: center; /* Vertical */
            margin-left: 20rem;
        }    
        input[type="password"] {
          width: 100%;
          padding: 12px 20px;
          margin: 8px 0;
          display: inline-block;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
        }
        input[type="submit"] {
          width: 100%;
          background-color: crimson;
          color: white;
          padding: 14px 20px;
          margin: 8px 0;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
        input[type="password"]:invalid {
          background-color: darksalmon;
        }
        input[type="password"]:valid {
            background-color: darkseagreen;
        }

    </style>
    <script src="Reto02_StrangerThings2.js"></script>
</head>
<body>
    <div class="centrado">
    <form action="salvarmundo.html" method="post">
        Introduzca la contraseña para evitar la destrucción del mundo <br/><br/>
        Pista: la contraseña es 6.62607015 o 6.62607004 <br/>y la puedes escribir con coma o con punto
        <br/>
        <input type="password" id="password" name="password" placeholder="Introduzca la contraseña" title="Es obligatorio meter algún valor de 10 caracteres: empieza con un dígito, le sigue un punto o una coma y luego 8 dígitos" pattern="^[0-9]{1}[.,]{1}[0-9]{8}$" required/>
        <input type="submit" value="Comprobar" id="enviar"/>
        <div id="passwordError"></div>
    </form>

    </div>
</body>

JavaScript

window.addEventListener("load", inicio, false);

// Función que se ejecuta después de cargar el HTML (load)
function inicio(){
    document.getElementById("enviar").addEventListener("click", function (evento){
      // VALIDACIÓN DEL CAMPO HTML
      if (!password.validity.valid){
        mostrarError();
        evento.preventDefault();
      // VALIDACIÓN DEL VALOR
      } else {
        comprobar(evento);
      }
    });
}

// Función que comprueba si el valor que contiene el campo password es correcto 
function comprobar(evento){
    let pass = document.getElementById("password").value;

    if (passwordCorrecta(pass)){
        alert("Acceso correcto");
    } else {
        alert("Acceso erróneo");
        evento.preventDefault();
    }
}

// Función que comprueba si la contraseña es la constante de Planck -versión actual y
// versión de los años 80; además, consideramos que puede introducirse coma o punto.
// Se podría utilizar la función .replace para cambiar las comas por puntos o viceversa
function passwordCorrecta (password){
    const constantes = ['6.62607015', '6.62607004', '6,62607015', '6,62607004'];
    return constantes.includes(password);
}

// Función que comprueba que el campo password cumple con las restricciones de
// obligatoriedad y patrón.
function mostrarError(){
  if (password.validity.valueMissing){
    passwordError.innerHTML = 'Debe introducir una contraseña';
  } else if (password.validity.patternMismatch){
    passwordError.innerHTML = 'No ha introducido un valor que cumpla el patrón.<br/>(1 dígito, 1 punto o coma y 8 dígitos)'
  }
}