How do I create a Login page that allows the viewer to "show the password"?

The following is my code. This page is set up as an include file.

<?php

// This script displays the login form for the TBRMobile site.

// Create an empty error array if it doesn't already exist:
if (!isset($login_errors)) $login_errors = array();

// Need the form functions script, which defines create_form_input():
require_once ('./includes/form_functions.inc.php');

?>

<form action="Login.php" method="post" accept-charset="utf-8">

<h2>LOGIN</h2>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    
 <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>
    
<?php if (array_key_exists('login', $login_errors)) {
echo '<span class="error">' . $login_errors['login'] . '</span>'; }?></p>

<p><label for="email" class="SmallHeading"><strong>Email Address</strong></label>
<p><?php create_form_input('email', 'text', $login_errors); ?></p>

<p><label for="pass2" class="SmallHeading">
  <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>    
<strong>Password</strong></label></p>
<p><a href="ForgotPassword.php"><h2>Forgot Your Password?</h2></a></p>

<p><?php create_form_input('pass', 'password', $login_errors); ?></p>
      
<button class="button" style="vertical-align:left"><span>Login &rarr;</span></button><br />
<br />
</form>

Select allOpen in new window