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.