How to show client login details with hidden password field in clientareaproductdetails.tpl

[whattheserver]

In this guide will show how to enable and selectively control the output so you can allow clients to view there hosting or service password easily under the product details page.

If modifying the original six template:

PATHTOWHMCS/templates/six/clientareaproductdetails.tpl

If you have custom theme adjust the path to match your theme name:

PATHTOWHMCS/templates/yourtheme/clientareaproductdetails.tpl

For a while was using the below code which i found somewhere while it worked was a tad tacky and showed the wrong information for some products and always showed the password in plaintext when viewing the page.

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Login Credentials</h3>
      </div>
      <div class="panel-body">
        <div class="vpn-package-details">
          Username: <code>{$username}</code> Password: <code>{$password}</code>
        </div>
      </div>
    </div>
  </div>
</div>

So after some tweaks and modding came up with the below code. This allows me to selectively control and hide the password from being shown by default but allows it to viewed by the client if desired.

<script language="JavaScript" type="text/javascript">
{literal}
function viewPassword()
{
var passwordInput = document.getElementById('password-field');
var passStatus = document.getElementById('pass-status');

if (passwordInput.type == 'password'){
passwordInput.type='text';
passStatus.className='fa fa-eye-slash';

}
else{
passwordInput.type='password';
passStatus.className='fa fa-eye';
}
}
{/literal}
</script>

{if $producttype=="other"}
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"> VPN Login Credentials</h3>
      </div>
      <div class="panel-body">
        <div class="vpn-package-details">
          <div class="row">
            <div class="col-sm-5 text-right">
              <strong>Username:</strong>
            </div>
            <div class="col-sm-7 text-left">
              {$username}
            </div>
          </div>
          <div class="row">
            <div class="col-sm-5 text-right">
              <strong>Password:</strong>
            </div>
            <div class="col-sm-7 text-left">
              <input type="password" id="password-field" value="{$password}">
              <i id="pass-status" class="fa fa-eye" aria-hidden="true" onClick="viewPassword()"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{elseif $producttype=="hostingaccount"}
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Hosting Login Credentials</h3>
      </div>
      <div class="panel-body">
        <div class="hosting-package-details">
          <div class="row">
            <div class="row">
              <div class="col-sm-5 text-right">
                <strong>Username:</strong>
              </div>
              <div class="col-sm-7 text-left">
                {$username}
              </div>
            </div>
            <div class="row">
              <div class="col-sm-5 text-right">
                <strong>Password:</strong>
              </div>
              <div class="col-sm-7 text-left">
                <input type="password" id="password-field" value="{$password}">
                <i id="pass-status" class="fa fa-eye" aria-hidden="true" onClick="viewPassword()"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{elseif $producttype=="server"}
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Server Login Credentials</h3>
      </div>
      <div class="panel-body">
        <div class="hosting-package-details">
          <div class="row">
            <div class="row">
              <div class="col-sm-5 text-right">
                <strong>Username:</strong>
              </div>
              <div class="col-sm-7 text-left">
                root
              </div>
            </div>
            <div class="row">
              <div class="col-sm-5 text-right">
                <strong>Password:</strong>
              </div>
              <div class="col-sm-7 text-left">
                <input type="password" id="password-field" value="{$password}">
                <i id="pass-status" class="fa fa-eye" aria-hidden="true" onClick="viewPassword()"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{/if}

If you do not want to show it for some product groups it can remove the group that should not have it visible by using if statements. This was needed for VPN freeradius module was using and wanted to be able to show the clients there current username and optionally the password as there both randomly generated.

With the eyball clicked it now shows the password.

 

Hope this helps someone else out there. I also really think this should be an option inside WHMCS it's a very simple thing it seems like that could be added to have an optional show client password on the product details page and maybe an option to label or format it if desired.

Special thanks to the people responsible for the below guides which provided inspiration for parts I was stuck on originally.

http://form.guide/html-form/html-input-type-password.html

https://www.smarty.net/docsv2/en/language.function.literal

Edited May 6, 2019 by whattheserver

[Tapeix]

Wow, what a great add-on. Good job!