Adding cPGuard Lite UI to your control panel
cPGuard Lite UI is already integrated with many control panels, making it easy to setup and manage cPGuard Lite. However, if your control panel is not supported, you can still easily add cPGuard Lite UI to your control panel interface (as a plugin or app) with few simple steps.
After installing and configuring cPGuard lite on your server, you can follow these steps.
Step 1 – Static assets
Identify a location on your control panel/server to place cPGuard lite UI static assets (images, js, css, etc.) and create a symlink to the directory /opt/cpguard/ui/static
For example let us consider that the static public files of your control panel are present in the directory /usr/local/controlpanel/www/assets, then create a symlink as follows.
ln -s /opt/cpguard/ui/static /usr/local/controlpanel/www/assets/cpguardYou may also copy these files to the location, but it is not recomemded as these files may be modfied during a software update. If you cannot use a symlink, consider adding a cron job to sync these files once or twice day.
You should not edit any existing static files for customising the UI as these files will be overwritten during the software update.
Step 2 – Backend
Create a file in your control panels web root that can execute a shell command (sample code below) and return the result to the browser.
<?php
$data = [
'route_url' => '?route=',
'ajax_url' => '?route=',
'assets_url' => 'assets/cpguard/',
'route' => isset($_GET['route']) ? filter_var($_GET['route']) : 'dashboard',
'_GET' => $_GET,
'_POST' => $_POST,
'hmtl' => true
];
echo shell_exec('/opt/cpguard/cpg-php-fpm/bin/php /opt/cpguard/ui/pipe.php ' . escapeshellarg(json_encode($data)));
exit();Update the value of assets_url with the correct path to the assets directory created in Step 1. You may use any language of your choice for the above logic. You can prepare and pass a JSON array in the specified format as an argument to the command /opt/cpguard/cpg-php-fpm/bin/php /opt/cpguard/ui/pipe.php and echo its result.
Step 3 – Frontend
Add an iframe to a new blank page of choice in your control panel. You can use the sample code below.
<iframe border="0" src="path_to_backend.php" id="cPGuardApp" width="100%" height="100%" frameborder="0"
marginheight="0" marginwidth="0" scrolling="no" onload="javascript:resize_iframe();"></iframe>
<script language="javascript">
function resize_iframe() {
var iframe = document.getElementById("cPGuardApp");
iframe.style.height = "0px";
iframe.style.height = parseInt(iframe.contentWindow.document.body.scrollHeight) + "px";
Document.readyState = 'loading';
}
// reset on window resize
window.onresize = resize_iframe;
</script>Make sure to replace the path_to_backend.php in the src argument of the iframe with the correct path to the endpoint created in Step 2
Our UI does not have authentication/access restriction inbuilt. When you are adapting the UI for your control panel, implement neccessary access control logic in the above files to restrict access to required users
Step 4 – Permissions
To set proper permissions for cPGuard UI files, first identify the user your control panel uses when executing the script/file created in Step 2. If it is not root, you have to change the ownership of files in the directories /opt/cpguard and /etc/cpguard to this user
chown -R controluser:controluser /opt/cpguard
chown -R controluser:controluser /etc/cpguardThats it. Open the front end page created in Step 3 on your control panel, and you should be able to view the cPGuard lite UI in your browser.
Warning: Security of cPGuard files and the UI is critically dependent on user used above. Do not use shared users like apache, nobody etc
Rebranding and Customising interface
If you’re considering white-labelling cPGuard, here are some instructions for the process and some key steps involved:
Branding Customization
The first step in white labelling involves replacing the original branding elements with your own. You can customize elements like the app name, logo, support URLs and more by creating a new config file at /opt/cpguard/ui/app/branding.ini with the following parameters.
COMPANY_URL = "https://securitycompany.com"
COMPANY_NAME = "Security Solutions"
APP_NAME = "Security +"
APP_LOGO_URL = "logo.svg"
CUSTOM_CSS_URL = "custom.css"
;Support URLs
SUPPORT_TICKET_URL =
DOCUMENTATION_URL =
LICENSE_REISSUE_DOC =
PURCHASE_URL =
SUPPORT_EMAIL =
APP_TERMS_URL =
APP_POLICY_URL =
All parameter/values in the branding.ini file are optional and therefore you can override only required parameters. Default values will be used for parameters that are skipped. Additionally, note that skipping a parameter and providing an empty value can have two behaviours. For example, skipping the APP_LOGO_URL will cause the default logo (cPGuard lite) to be shown, but providing an empty value will result in showing a heading at the place with the APP_NAME as text. Similarly providing an empty value for support URLs will cause the whole text to be hidden but skipping the entire parameter will cause the default to be shown.
The APP_LOGO_URL and CUSTOM_CSS_URL can accept relative paths to the assets directory mentioned in Step 1 above. You can either create a file in the assets directory and provide the appropriate path here or provide a remote URL/CDN link.
Changing colors and styles
You can customize the colour scheme and styles to adapt cPGuard lite to your control panel’s theme by providing a custom CSS in the above configuration. You can update the CSS variables declared in the :root element and override the default CSS styles of many of the elements in this file.
:root {
--cpg-color-primary: #08193e;
--cpg-color-secondary: #6c757d;
--cpg-color-success: #28a745;
--cpg-color-danger: #dc3545;
--cpg-color-warning: #ffc107;
--cpg-color-info: #17a2b8;
--cpg-color-light: #f8f9fa;
--cpg-color-dark: #343a40;
--cpg-color-200: #1E65FF;
--cpg-color-300: #1A58DF;
--cpg-color-400: #174CBF;
--cpg-color-500: #133F9F;
--cpg-color-600: #0F327E;
--cpg-color-700: #0C265E;
--cpg-color-800: #08193E;
--cpg-color-light: hsl(0deg 0% 100%);
--cpg-background: hsl(0, 0%, 100%);
--cpg-grey-200: #e6e6e6;
--cpg-grey-400: hsl(0, 0%, 41%);
--cpg-grey-600: hsl(0, 2%, 16%);
--cpg-grey-800: rgb(28, 27, 27);
--cpg-shadow: 0 3px 10px rgba(10, 37, 64, 0.05);
}Customising emails
For customising the email template, header and footer you can create a copy of the default template /opt/cpguard/app/resources/email_templates/template.html as template_custom.html in the same directory and modify the html content inside. There are multiple placeholders in the file like {{hostname}} {{content}} etc which will be replaced dynamically
Conclusion
As with any software product, ongoing maintenance is crucial for white-labeled solutions. Stay up-to-date with the latest version of the underlying software and apply any necessary patches or updates to maintain compatibility and security.