ابتدا یک فرم لاگین با ساختار html با class های بوتسترپ  ایجاد کردیم

<form id="login"> 
   <div class="form-row"> 
      <h۴ class="title text-center pb-۳">Login Form</h۴> 
      <div class="col-۱۲"> 
        <div class="input-group mb-۳"> 
          <div class="input-group-prepend"> 
             <span class="input-group-text btn-toggle" id="basic-addon۱"> 
                <i class="fas fa-user"></i> 
             </span> 
          </div> 
         <input name="username" type="text" class="input form-control" id="username" placeholder="username" /> 
        </div> 
      </div> 
      <div class="col-۱۲"> 
         <div class="input-group mb-۳"> 
             <div class="input-group-prepend"> 
                 <span class="input-group-text btn-toggle" id="basic-addon۱"> 
                   <i class="fas fa-lock"></i> 
                 </span> 
             </div> 
             <input name="password" type="password" class="input form-control" id="password" placeholder="password" required="true"/> 
             <div class="input-group-append"> 
                <span class="input-group-text btn-toggle" onclick="password_show_hide();"> 
                   <i class="fas fa-eye" id="show_eye"></i> 
                   <i class="fas fa-eye-slash d-none" id="hide_eye"></i> 
                </span> 
             </div> 
          </div> 
      </div> 
      <div class="col-۱۲ text-start"> 
          <button class="btn btn-primary" type="submit" name="signin">login</button> 
      </div> 
   </div> 
</form>

برای تگ input یک id در نظر گرفتیم که برابر با password هست

<input name="password" type="password" class="input form-control" id="password" placeholder="password" required="true"/>

یک تگ span گذاشتیم و برای این تگ یک رویداد onclick  تعریف شد و یک تابع یا function به اسم password_show_hide() ایجاد کردیم

<span class="input-group-text btn-toggle" onclick="password_show_hide();">

درون تگ span از دو آیکون استفاده کردیم با class های fas fa-eye و fas fa-eye-slash

<i class="fas fa-eye" id="show_eye"></i> 
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>

در مرحله اول میخوایم فقط ایکون fa-eye نمایش بده پس برای ایکون fa-eye-slash باید display برابر با none قرار بدیم .

برای نمایش آیکون ها از کتابخونه fontawesome  استفاده کردیم .

تو مرحله ی بعد برای هرکدوم از آیکون ها یک id درنظر گرفته شد.

id="show_eye"
id="hide_eye"

بریم سراغ کدهای جاوااسکریپت

function password_show_hide() {

    var password = document.getElementById("password");
    var show_eye = document.getElementById("show_eye");
    var hide_eye = document.getElementById("hide_eye");

    hide_eye.classList.remove("d-none");

    if (password.type === "password") {
      password.type = "text";
      show_eye.style.display = "none";
      hide_eye.style.display = "block";
    } 
    else 
    {
      password.type = "password";
      show_eye.style.display = "block";
      hide_eye.style.display = "none";
    }
    
  }

در ابتدا تابع یا function که در رویداد onclick به اسم password_show_hide() ایجاد کردیم را مینویسیم  تا بتوانیم به id  هایی که در فرم html تعریف کردیم از طریق متد getElementById در جاوااسکریپت دسترسی داشته باشیم.

var password = document.getElementById("password"); 
var show_eye = document.getElementById("show_eye"); 
var hide_eye = document.getElementById("hide_eye");

همونطور که گفتیم مرحله اول میخواستیم id  آیکون  fa-eye-slash  نمایش نده، پس باید به این شکل تعریف کنیم

hide_eye.classList.remove("d-none"); 
hide_eye.classList.remove("d-none");

به  hide_eye  ویژگی classList دادیم و از طریق متد remove باید display  رو برابر none  قرار دهیم.

حالا میخوایم زمانیکه  پسووردی وارد کردیم و روی ایکون کلیک شد ، هم پسوورد نمایش بده و هم ایکون تغییر کنه ،  پس اینجا یک شرطی گذاشتیم.

    if (password.type === "password") {
      password.type = "text";
      show_eye.style.display = "none";
      hide_eye.style.display = "block";
    } 
    else 
    {
      password.type = "password";
      show_eye.style.display = "block";
      hide_eye.style.display = "none";
    }

گفتیم اگه password.type برابر بود با مقدار password شما password.type  رو برابر با text قرار بده یعنی type رو عوض کن و ایکون  show_eye باید display  برابر با none قرار بدیم تا نمایش نده  و حالا  ایکون hide_eye  باید display  برابر با block قرار داده شود تا نمایش بده و درغیر اینصورت password.type رو برابر با password قرار بده  و show_eye باید display برابر با block و hide_eye باید display برابر با none شود.

یعنی اگر یکبار روش کلیک شد type برابر با  text  شود و دوباره کلیک شد type برابر با password شود.