Show/hide password How to fix this?-CodePudding

I am creating a web page, I am just going through the index of it, and at the moment it does not have more code than HTML, CSS and JAVASCRIPT, however, I am presenting a problem with the design and the code that prevents me from adding the eye icon , to see or hide the password in the password entry, without moving the lock icon or placeholder.

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');
togglePassword.addEventListener('click', function(e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
  }

);

.input - field {
  max - width: 380 px;
  width: 100 %;
  height: 55 px;
  background - color: var (--bg - input);
  margin: 10 px 0;
  border - radius: 55 px;
  display: grid;
  grid - template - columns: 15 % 85 %;
  padding: 0 .4 rem;
}

.input - field i {
  text - align: center;
  line - height: 55 px;
  color: var (--input - icon);
  font - size: 1.1 rem;
}

# togglePassword {
  text - align: center;
  color: var (--input - icon);
  padding: 10 px;
}

.passtoggle {
  padding - top: 2 px;
}

.input - field input {
  background: none;
  outline: none;
  border: none;
  line - height: 1;
  font - weight: 600;
  font - size: 1.1 rem;
  color: var (--input);
}

<div >
  <i ></i>
  <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario">
</div>
<div >
  <i ></i>
  <input type="password" name="password" autocomplete="current-password" placeholder="Contraseña" id="id_password">
  <i  id="togglePassword" style="cursor: pointer;"></i>
</div>

Can you help me? I also add a link to be able to view the web page in its entirety and interact with the options (start session, register, switch to dark mode, etc): https://priva.reversecode.repl.co/

CodePudding user response：

let btn = document.getElementById('pass-btn');
let icon = btn.querySelector('ion-icon');
let input = document.getElementById('password');


btn.addEventListener('click', () => {
  input.type == 'password' ? [input.type = 'text', icon.setAttribute('name', 'eye-off')] : [input.type = 'password', icon.setAttribute('name', 'eye')];
  input.focus();
});

* {
  margin:  0;
  padding: 0;
  box-sizing: border-box;
}

.form {
  margin: 20px auto;
}

div {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

input {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 5px;
}

ion-icon {
  font-size: 20px;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 100%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

button:hover > ion-icon {
  opacity: 0.8;
}

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

<div >
  <div>
    <input type="email" placeholder="E-mail" />
  </div>
  <div>
    <input type="password" placeholder="Password" id="password" />
    <button id="pass-btn">
      <ion-icon name="eye"></ion-icon>
    </button>
  </div>
</div>

CodePudding user response：

i pasted your code in jsfiddle and just add font awesome cdn link and it works

<html>
<body>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>

<style>
  .input - field {
  max - width: 380 px;
  width: 100 %;
  height: 55 px;
  background - color: var (--bg - input);
  margin: 10 px 0;
  border - radius: 55 px;
  display: grid;
  grid - template - columns: 15 % 85 %;
  padding: 0 .4 rem;
}

.input - field i {
  text - align: center;
  line - height: 55 px;
  color: var (--input - icon);
  font - size: 1.1 rem;
}

# togglePassword {
  text - align: center;
  color: var (--input - icon);
  padding: 10 px;
}

.passtoggle {
  padding - top: 2 px;
}

.input - field input {
  background: none;
  outline: none;
  border: none;
  line - height: 1;
  font - weight: 600;
  font - size: 1.1 rem;
  color: var (--input);
}
</style>
  <div >
  <i ></i>
  <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario">
</div>
<div >
  <i ></i>
  <input type="password" name="password" autocomplete="current-password" placeholder="Contraseña" id="id_password">
  <i  id="togglePassword" style="cursor: pointer;"></i>
</div>
<script>
    const togglePassword = document.querySelector('#togglePassword');
  const password = document.querySelector('#id_password');
  togglePassword.addEventListener('click', function(e) {
      // toggle the type attribute
      const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
      password.setAttribute('type', type);
      // toggle the eye slash icon
      this.classList.toggle('fa-eye-slash');
    }

  );
</script>

</body>
</html>

here is the jsfiddle link https://jsfiddle.net/6f0e2mc5/

CodePudding user response：

Check out the changes I made to your HTML and Javascript. Of course, feel free to style the inputs and checkboxes as you desire.

Side note: I've never seen CSS written like max - width: Those spaces seem unnecessary and won't parse properly in most browsers.

function myFunction() {
  var x = document.getElementById("hidePassword");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

.input - field {
  max - width: 380 px;
  width: 100 %;
  height: 55 px;
  background - color: var (--bg - input);
  margin: 10 px 0;
  border - radius: 55 px;
  display: grid;
  grid - template - columns: 15 % 85 %;
  padding: 0 .4 rem;
}

.input - field i {
  text - align: center;
  line - height: 55 px;
  color: var (--input - icon);
  font - size: 1.1 rem;
}

# togglePassword {
  text - align: center;
  color: var (--input - icon);
  padding: 10 px;
}

.passtoggle {
  padding - top: 2 px;
}

.input - field input {
  background: none;
  outline: none;
  border: none;
  line - height: 1;
  font - weight: 600;
  font - size: 1.1 rem;
  color: var (--input);
}

<div >
  <i ></i>
  <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario">
</div>
<div >
  <i ></i>
  <input type="password" autocomplete="current-password" placeholder="Contraseña" id="hidePassword">
  <input type="checkbox" onclick="myFunction()">Show Password
  <i  id="togglePassword" style="cursor: pointer;"></i>
</div>