2

Estoy intentando hacer un login usando el mismo JS para las páginas, una es el login principal y el otro es para registrarse. He puesto una pequeña imagen al lado de los input de password para que se pueda ver la clave, pero al seleccionar no cambia de tipo.

Pongo el código.

Este es el login.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css?version=<?php echo time(); ?>">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500&family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <script src="script.js" defer></script>
    <title>Document</title>
</head>

<body>
    <div id="formulario">
        <h1>Social Network X</h1>
        
            <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <div class = "input">
                <label for="nombre" class="letras">Introduce tu correo</label>
                <input type="text" name="correo" required>
                </div> 
                <div class = "input">
                <label for="clave" class="letras">Introduce tu contraseña</label>
                <input type="password" name="clave" class="pass" required>
                <img src="imagenes/ver.png" alt="mostrar" class="icono-vc">
                </div>
                <input type="submit" value="login">
                
            </form>
      

        <?php
        include ("consulta.php");

        // Se puede hacer el control de nuestras variables en el login y luego mandar a consultas:
        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
            $user = $_POST['correo'];
            $pass = $_POST['clave'];
            entrar($user, $pass);
        }
        ?> 

    <a href="cuestionario.php" target="_blank">Regístrate</a><br>
    <a href="formulario.php" target="_blank">He olvidado mi contraseña</a>

    </div>
  
    
</body>
</html>

Este el de registro:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css?version=<?php echo time(); ?>">
    <script src="script.js" defer></script>
    <title>Document</title>
</head>
<body>
  
  <div id = "formulario">
  <h1>Sign up!</h1>
  <form action="" method="post">
    <label for="nombre">Nombre:</label> 
    <input type="text" name="nombre"><br>
    <label for="apellido"> Apellido:</label>
    <input type="text" name="apellido"><br>
    <label for="correo">Correo:</label>
    <input type="text" name="correo"><br>
    <label for="pass">Contraseña:</label>
    <input type="password" name="pass" class="pass">
    <img src="imagenes/ver.png" alt="mostrar" class="icono-vc"><br>
    <label for="pass">Repetir Contraseña:</label>
    <input type="password" name="clave2" class="pass" required>
    <img src="imagenes/ver.png" alt="mostrar" class="icono-vc"><br>
    <input type="submit" value="Registrarse">



    <?php
    if($_SERVER['REQUEST_METHOD']=='POST'){
     include "consulta.php";
     $user =$_POST['nombre'];
     $pass = $_POST['clave'];
     $pass2 = $_POST['clave2'];
     $apellido = $_POST['apellido'];
     $correo = $_POST['correo'];
    if($pass === $pass2){
      if(registro($user,$apellido,$correo,$pass)){
        echo"<br> Bienvenido/a, ".$user." te has registrado con exito";
      }else{
        echo"<br> No se ha podido completar el registro";
      }
    }else{
      echo "Las contraseñas deben ser iguales";
      return;
    }
    }
     
    ?>
    </form>
    <a href="login.php" >Volver al login</a>
  </div>
   
</body>
</html> 

Y estos son los JS:

/*const iconoVerContrasena = document.querySelector(".icono-vc");
const clave = document.getElementById("clave1");
iconoVerContrasena.addEventListener("mouseover", function() {
 
  clave.type = "text";
});

iconoVerContrasena.addEventListener("mouseout", function() {
 
    clave.type = "password";
  });

Entiendo que el error debe estar en el js, sé que son varios elementos de img y que se debe usar queryselectorall pero no sé, he utilizado jquery y nada tampoco.

2 respuestas 2

2

Ya, he encontrado unos problemas en tu código JS: Primero: Estas llamando a un elemento que tenga id="clave1" que no existe ni en tu formulario de login ni en tu formulario de registro; Si deseas trabajar con getElementById, añade el atributo al html:

    <label for="pass">Contraseña:</label>
    <input type="password" name="pass" class="pass" id="pass">
    <img src="imagenes/ver.png" alt="mostrar" class="icono-vc"><br>
    <label for="pass">Repetir Contraseña:</label>
    <input type="password" name="clave2" class="pass" required id="clave2">
    <img src="imagenes/ver.png" alt="mostrar" class="icono-vc2"><br>

Fíjate que he cambiado la clase de la segunda imagen para que pueda seleccionarse independientemente. Ahora el código JS quedaría asi:

const iconoVerContrasena = document.querySelector(".icono-vc");
const iconoVerContrasena2 = document.querySelector(".icono-vc2");
const clave = document.getElementById("pass");
const clave2 = document.getElementById("clave2");
iconoVerContrasena.addEventListener("mouseover", function () {
    clave.type = "text";
});
iconoVerContrasena.addEventListener("mouseout", function () {
    clave.type = "password";
});
iconoVerContrasena2.addEventListener("mouseover", function () {
    clave2.type = "text";
});
iconoVerContrasena2.addEventListener("mouseout", function () {
    clave2.type = "password";
});

Segundo: tienes un comentario abierto al inicio de tu código JS, quizás sea error de copiado pero, puede que no.

1

Acá esta tu solución, no estas apuntando al elemento correcto.

https://codepen.io/Dacosta/pen/yLGzmYR

document.addEventListener("DOMContentLoaded", function(){
  
  const iconoVerContrasena = document.querySelector(".icono-vc");
  const clave = document.getElementById("pass");
  iconoVerContrasena.addEventListener("mouseover", function() {
    clave.type = "text";
  });

  iconoVerContrasena.addEventListener("mouseout", function() {

      clave.type = "password";
  });
  
});
<form method="post" action="#">
                <div class = "input">
                <label for="nombre" class="letras">Introduce tu correo</label>
                <input type="text" name="correo" required>
                </div> 
                <div class = "input">
                <label for="clave" class="letras">Introduce tu contraseña</label>
                <input type="password" name="clave" id="pass" class="pass" required>
                <img src="imagenes/ver.png" alt="mostrar" class="icono-vc">
                </div>
                <input type="submit" value="login">
                
            </form>

1
  • Tienes toda la razón
    – Dacosta
    Commented el 19 sept. 2023 a las 15:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.