If you’re looking to display a client’s username and password (obfuscated, with the ability to reveal the password) in the WHMCS Client Area, specifically in the Product Details page.

The code you’ve shared appears to accomplish this by adding a “view password” feature in the clientareaproductdetails.tpl template file. If you have copied this code verbatim, you need to make sure the JavaScript function viewPassword() is implemented properly and is able to toggle the input field type from password to text and vice versa, along with changing the icon from an open eye to a closed eye to indicate the current state of password visibility.

Here are the steps you can take:

1. Locate the Template File:
   • Open your WHMCS installation directory.
   • If you are using the default “six” template, the file you need to modify is located at templates/six/clientareaproductdetails.tpl. If you are using a custom theme, adjust the path to match your theme name: templates/yourtheme/clientareaproductdetails.tpl.
2. Backup the Original File:
   • Before modifying the file, it’s always a good idea to create a backup copy. This allows you to revert back to the original file if anything goes wrong.
   • You can simply copy the file and paste it in the same directory with a different name, for example, clientareaproductdetails_backup.tpl.
3. Add the Code:
   • Open the clientareaproductdetails.tpl file in a text editor. This could be Notepad++ or any other code editor you prefer.Paste the code you provided at the desired location within the file. Make sure it’s in the HTML body.
   The script provided has already defined the function viewPassword(). This function toggles the password field between hidden and visible when the eye icon is clicked.Here is a simpler version of the code which you can use. This code will always display the username and password fields (with the password field having the view/hide option):

				
					
        <h3>Login Credentials</h3>
              <strong>Username:</strong>
              {$username}
              <strong>Password:</strong>
              <input type="password" id="password-field" value="{$password}">

				
			

Remember to replace {$username} and {$password} with the appropriate Smarty variables that WHMCS uses to represent the client’s username and password.

4. Save Your Changes:

Once you have finished editing the file, save the changes and close the text editor.

5. Verify Your Changes:

• • • Open your web browser and navigate to your WHMCS Client Area. Log in with a client account, then navigate to the Product Details page.
    • If implemented correctly, you should see the username displayed plainly