Jump to content
whattheserver

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

Recommended Posts

Posted (edited)

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.

whmcs-login-credentials1.thumb.png.01daea234a04d6ad18333d1bc01aff57.png

With the eyball clicked it now shows the password.

whmcs-login-credentials2.png.ed917ada06dc58ecfaa3fb1818eccb64.png

 

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 by whattheserver

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated