HasanMahmud90

Main code <?php use WHMCS\View\Menu\Item as MenuItem; use Illuminate\Database\Capsule\Manager as Capsule; /* Add credentials to the end of all secondary sidebars. */ add_hook('ClientAreaSecondarySidebar', 1, function (MenuItem $secondarySidebar) { /* Get the credentials. */ $service = Menu::context('service'); $username = $service->username; $serverid = $service->server; $domain = $service->domain; $password = decrypt($service->password); $serverDetails = Capsule::table('tblservers')->where('id', $serverid)->first(['hostname', 'ipaddress', 'nameserver1', 'nameserver2']); /* If the username isn't empty let's show them! */ if (!empty($username)) { /* Add a panel to the end of the secondary sidebar for credentials. */ $secondarySidebar->addChild('credentials', [ 'label' => 'Hosting Information', 'uri' => '#', 'icon' => 'fa-desktop', ]); /* Retrieve the panel we just created. */ $credentialPanel = $secondarySidebar->getChild('credentials'); $credentialPanel->moveToBack(); /* Show the username with a copy icon. */ $credentialPanel->addChild('username', [ 'label' => '<span id="username-display">' . $username . '</span> <button class="btn btn-sm btn-outline-secondary copy-username" data-copy-text="' . $username . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>', 'order' => 1, 'icon' => 'fas fa-user-check', ]); /* Show the password with toggle icon and copy button. */ $credentialPanel->addChild('password', [ 'label' => '<span id="password-display" style="margin-right: 10px;">' . str_repeat('*', strlen($password)) . '</span> <i class="fas fa-shield-alt fa-lg toggle-password" data-password="' . addslashes($password) . '"></i> <button class="btn btn-sm btn-outline-secondary copy-password" data-copy-text="' . addslashes($password) . '" style="display:none; padding: 2px 8px; margin-left: 5px;">Copy</button>', 'order' => 2, 'icon' => 'fa-key', ]); /* Show the domain. */ $credentialPanel->addChild('domain', [ 'label' => $domain, 'order' => 3, 'icon' => 'fas fa-globe-americas', ]); /* Show the server IP with a copy icon. */ $credentialPanel->addChild('ip', [ 'label' => '<span id="ip-display">' . $serverDetails->ipaddress . '</span> <button class="btn btn-sm btn-outline-secondary copy-ip" data-copy-text="' . $serverDetails->ipaddress . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>', 'order' => 4, 'icon' => 'fas fa-map-marker-alt', ]); /* Show the server name. */ $credentialPanel->addChild('server', [ 'label' => $serverDetails->hostname, 'order' => 5, 'icon' => 'fa-server', ]); /* Show nameserver 1 with a copy icon. */ $credentialPanel->addChild('nameserver1', [ 'label' => '<span id="nameserver1-display">' . $serverDetails->nameserver1 . '</span> <button class="btn btn-sm btn-outline-secondary copy-nameserver1" data-copy-text="' . $serverDetails->nameserver1 . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>', 'order' => 6, 'icon' => 'fas fa-link', ]); /* Show nameserver 2 with a copy icon. */ $credentialPanel->addChild('nameserver2', [ 'label' => '<span id="nameserver2-display">' . $serverDetails->nameserver2 . '</span> <button class="btn btn-sm btn-outline-secondary copy-nameserver2" data-copy-text="' . $serverDetails->nameserver2 . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>', 'order' => 7, 'icon' => 'fas fa-link', ]); } }); /* JavaScript to handle toggle password visibility and copy functionality. */ add_hook('ClientAreaHeadOutput', 1, function($vars) { return ' <script> document.addEventListener("DOMContentLoaded", function() { document.body.addEventListener("click", function(event) { if (event.target.classList.contains("toggle-password")) { var passwordDisplay = document.getElementById("password-display"); var actualPassword = event.target.getAttribute("data-password"); var copyButton = document.querySelector(".copy-password"); if (passwordDisplay.textContent === actualPassword) { passwordDisplay.textContent = "*".repeat(actualPassword.length); event.target.classList.remove("fa-eye-slash"); event.target.classList.add("fa-eye"); copyButton.style.display = "none"; } else { passwordDisplay.textContent = actualPassword; event.target.classList.remove("fa-eye"); event.target.classList.add("fa-eye-slash"); copyButton.style.display = "inline-block"; } } /* Handle copy button clicks */ if (event.target.classList.contains("copy-username") || event.target.classList.contains("copy-ip") || event.target.classList.contains("copy-nameserver1") || event.target.classList.contains("copy-nameserver2") || event.target.classList.contains("copy-password")) { var copyText = event.target.getAttribute("data-copy-text"); /* Create a temporary textarea to copy the text. */ var tempInput = document.createElement("textarea"); tempInput.style.position = "absolute"; tempInput.style.left = "-9999px"; tempInput.style.top = "0"; tempInput.value = copyText; document.body.appendChild(tempInput); tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); /* Optionally provide visual feedback */ event.target.textContent = "Copied!"; setTimeout(function() { event.target.textContent = "Copy"; }, 2000); } }); }); </script>'; }); ?>

Hello WHMCS team and users,Take by greetings.Actuslly I want to show the Hosting account information for clients products,the design in very cool.I wll provide the screenshot.I want to make the code i provided design to the picture i provided.Please help me to make this design /* JavaScript to handle toggle password visibility and copy functionality. */ add_hook('ClientAreaHeadOutput', 1, function($vars) { return ' <script> document.addEventListener("DOMContentLoaded", function() { document.body.addEventListener("click", function(event) { if (event.target.classList.contains("toggle-password")) { var passwordDisplay = document.getElementById("password-display"); var actualPassword = event.target.getAttribute("data-password"); var copyButton = document.querySelector(".copy-password"); if (passwordDisplay.textContent === actualPassword) { passwordDisplay.textContent = "*".repeat(actualPassword.length); event.target.classList.remove("fa-eye-slash"); event.target.classList.add("fa-eye"); copyButton.style.display = "none"; } else { passwordDisplay.textContent = actualPassword; event.target.classList.remove("fa-eye"); event.target.classList.add("fa-eye-slash"); copyButton.style.display = "inline-block"; copyButton.setAttribute("data-copy-text", actualPassword); // Set the password to be copied } } /* Handle copy button clicks */ if (event.target.classList.contains("copy-username") || event.target.classList.contains("copy-ip") || event.target.classList.contains("copy-nameserver1") || Make it like the picture.In header there will show domain name and cpanel logo,and if anyone click on header,redirect it to cpanel login page