Jump to content
Sign in to follow this  
whattheserver

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

Recommended Posts

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

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