Avatar of Wanda Marston
Wanda Marston
Flag for Canada

asked on 

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.

// 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">

    <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
<?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>    
<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 />

Open in new window


Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon