Skip to content

Add custom logo feature #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dheskettmgb wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add custom logo feature #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
51cce60
Add feature for custom logo and text branding for users views of sign…
dheskettmgb Apr 18, 2024
e734463
Add feature for custom logo and text branding for users views of sign…
dheskettmgb Apr 18, 2024
33b5852
Add feature for custom logo and text branding for users views of sign…
dheskettmgb Apr 18, 2024
e0cefaa
Add feature for custom logo and text branding for users views of sign…
dheskettmgb Apr 18, 2024
9b73c5a
Add feature for custom logo and text branding for users views of sign…
dheskettmgb Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 66 additions & 8 deletions REDCapPRO.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,9 @@ class REDCapPRO extends AbstractExternalModule
public $LOGO_URL = "https://i.imgur.com/5Xq2Vqt.png";
public $LOGO_ALTERNATE_URL = "https://i.imgur.com/fu0t8V1.png";

public $customLogoImage = null; // custom logo image on create password page
public $customLogoText = ''; // custom logo text for branding

//////////////\\\\\\\\\\\\\\
///// REDCAP HOOKS \\\\\
//////////////\\\\\\\\\\\\\\
Expand Down Expand Up @@ -476,6 +479,29 @@ public function redcap_module_link_check_display($project_id, $link)
return null;
}

public function redcap_module_system_change_version($version, $old_version)
{
$this->logEvent("Module Version Changed", [
"version" => $version,
"old_version" => $old_version,
"redcap_user" => $this->safeGetUsername()
]);

$new_version_number = explode('v', $version)[1];
$old_version_number = explode('v', $old_version)[1];

// If upgrading from a previous version to version 0.4.5,
// assume all existing logs are genuine, create module token,
// and add the token to all existing logs.
$critical_version = "0.4.6";
if (
version_compare($new_version_number, $critical_version, ">=") &&
version_compare($old_version_number, $critical_version, "<")
) {
$this->updateLogsWithToken();
}
}


//////////////////\\\\\\\\\\\\\\\\\\\
///// EMAIL-RELATED METHODS \\\\\
Expand Down Expand Up @@ -542,7 +568,7 @@ public function sendEmailUpdateEmail(string $username, string $new_email, string
$old_email_clean = \REDCap::escapeHtml($old_email);
$new_email_clean = \REDCap::escapeHtml($new_email);
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>" . $this->tt("email_update_greeting") . "</p>
<p>" . $this->tt("email_update_message1") . "<strong> ${username}</strong><br>
<ul>
Expand Down Expand Up @@ -594,7 +620,7 @@ public function sendNewParticipantEmail(string $username, string $email, string
$subject = $this->tt("email_new_participant_subject");
$from = $settings->getEmailFromAddress();
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>" . $this->tt("email_new_participant_greeting", [ $fname, $lname ]) . "
<br>" . $this->tt("email_new_participant_message1") . "
<br>" . $this->tt("email_new_participant_message2") . " <strong>${username}</strong>
Expand Down Expand Up @@ -645,7 +671,7 @@ public function sendPasswordResetEmail($rcpro_participant_id, $selfInitiated = f
$subject = $this->tt("email_password_reset_subject");
$from = $settings->getEmailFromAddress();
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>" . $this->tt("email_password_reset_greeting") . "
<br>" . $this->tt("email_password_reset_message1") . "<br>
<br>" . $this->tt("email_password_reset_message2") . "
Expand Down Expand Up @@ -710,7 +736,7 @@ public function sendUsernameEmail(string $email, string $username)
$subject = $this->tt("email_username_subject");
$from = $settings->getEmailFromAddress();
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>" . $this->tt("email_username_greeting") . "</p>
<p>" . $this->tt("email_username_message1") . "<strong> ${username}</strong><br>
" . $this->tt("email_username_message2") . "</p>
Expand Down Expand Up @@ -749,7 +775,7 @@ public function sendMfaTokenEmail(string $email, int $token)
$subject = $this->tt("mfa_email1");
$from = $settings->getEmailFromAddress();
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>" . $this->tt('mfa_email2') . "</p>
<p>" . $this->tt('mfa_email3') . " <strong> ${token}</strong><br></p>
<p><em>" . $this->tt('mfa_email4') . "</em></p><br><br>";
Expand Down Expand Up @@ -792,7 +818,7 @@ public function sendAuthenticatorAppInfoEmail($rcpro_participant_id)
$subject = $this->tt("email_authenticator_app_mfa_info_subject");
$from = $settings->getEmailFromAddress();
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>" . $this->tt("email_authenticator_app_mfa_info_greeting") . "
<br>" . $this->tt("email_authenticator_app_mfa_info_message1") . "<br>
<br>" . $this->tt("email_authenticator_app_mfa_info_message2") . "
Expand Down Expand Up @@ -821,7 +847,7 @@ public function sendAutoEnrollNotificationEmail(string $email, $project_id)
$subject = "REDCapPRO Auto-Enrollment";
$from = $settings->getEmailFromAddress();
$body = "<html><body><div>
<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>
" . $this->baseLogoImage() . "
<p>This is a notification that a participant has been automatically enrolled in your project.</p>
<p><strong>Project ID</strong>: " . $project_id . "</p>
<p><strong>Project Title</strong>: " . $this->framework->getProject($project_id)->getTitle() . "</p>
Expand Down Expand Up @@ -1197,4 +1223,36 @@ public function getProjectlessUrl(string $path, bool $noAuth, bool $useApiEndpoi
$_GET['pid'] = $pid;
return $result;
}
}

/**
* baseLogoImage - allow custom logo switch to work for email. either use regular image or for custom remove the standard image.
*/
public function baseLogoImage(): string
{
$image = "<img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>";
// <img src='" . $this->LOGO_ALTERNATE_URL . "' alt='img' width='500px'><br>

if ($this->getProjectSetting('custom-logoflag')) { // check box in Settings)
// if we are using custom logo branding, the emails, we want to either
// have a custom image
// NOTE: we cannot embed a base64 encoded image using REDCap email. and using the HTML link method also seems to not work well
// (probably could work, if you put the image out somewhere fully accessible, but then you have that complication).
// OR
// remove the standard image
// which is the case here, remove the image out of the emails.
//
// add custom text here instead of image for branding.

$this->customLogoText = $this->getProjectSetting('custom-logotext');

if ($this->customLogoText) {
$image = '<h1>' . $this->customLogoText . '</h1><br>';
} else {
$image = '<br>';
}
}

return $image;
}

}
Binary file added images/customlogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 58 additions & 2 deletions src/classes/UI.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,16 @@ function __construct($module)

public function ShowParticipantHeader(string $title)
{
echo '<!DOCTYPE html>
$customLogoFlag = null;

try {
$customLogoFlag = $this->module->getProjectSetting('custom-logoflag'); // check box in Settings
} catch (\Exception $e){
;
}


/* echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Expand Down Expand Up @@ -41,6 +50,53 @@ public function ShowParticipantHeader(string $title)
<img id="rcpro-logo" src="' . $this->module->getUrl("images/RCPro_Logo_Alternate.svg") . '" width="500px">
<hr>
<div style="text-align: center;"><h2 class="title">' . $title . '</h2></div>';
*/

echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>REDCapPRO ' . $title . '</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="' . $this->module->getUrl("images/favicon.ico") . '"/>
<link rel="icon" type="image/png" sizes="32x32" href="' . $this->module->getUrl("images/favicon-32x32.png") . '">
<link rel="icon" type="image/png" sizes="16x16" href="' . $this->module->getUrl("images/favicon-16x16.png") . '">
<link rel="stylesheet" href="' . $this->module->getUrl("lib/bootstrap/css/bootstrap.min.css") . '">
<script src="' . $this->module->getUrl("lib/bootstrap/js/bootstrap.bundle.min.js") . '"></script>
<script src="https://kit.fontawesome.com/cf0d92172e.js" crossorigin="anonymous"></script>
<style>
body { font-family: "Atkinson Hyperlegible", sans-serif; }
.wrapper { width: 360px; padding: 20px; }
.form-group { margin-top: 20px; }
.center { display: flex; justify-content: center; align-items: center; }
img#rcpro-logo { position: relative; left: -125px; }
</style>
</head>
<body>
<div class="center">
<div class="wrapper">';

// here we may change the RC Pro logo image to our custom image for the password change page.
//
if ($customLogoFlag) {
// TODO: pull the name from config setting?
$this->module->customLogoImage = 'customlogo.png'; // change to custom image

// Custom brand logo image
echo '<div class="logocentercustom"><img id="rcpro-logo" src="' . $this->module->getUrl("images/" . $this->module->customLogoImage ) . '" width="600px"></div>';
echo '<hr>';

} else {
// RC Pro logo image
echo '<img id="rcpro-logo" src="' . $this->module->getUrl("images/RCPro_Logo_Alternate.svg") . '" width="500px">';
echo '<hr>';
}
//
//
echo '<div style="text-align: center;"><h2>' . $title . '</h2></div>';

}

public function EndParticipantPage()
Expand Down Expand Up @@ -187,4 +243,4 @@ public function ShowControlCenterHeader(string $page)
</div><hr style='margin-top:0px;'>";
echo $header;
}
}
}
12 changes: 12 additions & 0 deletions src/css/rcpro.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,3 +303,15 @@
.text-muted-more {
color: #aaa;
}

.logocenter {
margin: auto;
width: 25%;
border: 3px solid green;
padding: 250px;
}

.logocentercustom {
display: flex;
justify-content: center;
}
44 changes: 43 additions & 1 deletion src/settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@
if ( $new_settings["reserved-language-project"] === "English" ) {
$new_settings["reserved-language-project"] = null;
}

// Custom logo flag
$new_settings['custom-logoflag'] = $post_settings['custom-logoflag'] === 'true';
$new_settings['custom-logotext'] = $post_settings['custom-logotext'];

// Validate Prevent Email Login
$new_settings["prevent-email-login"] = $post_settings["prevent-email-login"] === "true";
Expand Down Expand Up @@ -465,6 +469,44 @@ class="form-control <?php echo (!empty($phone_err)) ? 'is-invalid' : ''; ?>"
</div>
</div>
<br>

<?php
$checked_custom_logo_flag = $settings['custom-logoflag'] ? 'checked' : '';

$customLogoText = \REDCap::escapeHtml($settings['custom-logotext']);
?>

<div class="card">
<div class="card-header">
<span class="fa-stack">
<i class="fas fa-image fa-2x"></i>
</span>
<nbsp></nbsp>
<strong>Custom Settings</strong>
</div>
<div class="card-body">
<div class="card-title">
Custom branding options.
</div>
<div class="form-group">
<label>Use Custom Image for Create Password Page</label>
<div class="form-check">
<hr>
Custom Branding Text for Emails: <input type="text" name="custom-logotext" id="custom-logotext" size="60" value="<?= $customLogoText ?>">
<hr>
<input class="form-check-input <?php echo (!empty($customlogopage_err)) ? 'is-invalid' : ''; ?>" type="checkbox" id="custom-logoflag-check" <?= $checked_custom_logo_flag ?> onclick="(function(){
$('#custom-logoflag').val($('#custom-logoflag-check')[0].checked);
})()">
<label class="form-check-label" style="vertical-align:middle;" for="custom-logoflag-check">Checking this will use the custom logo image for User Pages and Text for Emails.</label>
<input type="text" name="custom-logoflag" id="custom-logoflag" value="<?= $checked_custom_logo_flag === 'checked' ? 'true' : 'false' ?>" hidden>
<br><p><?= $module->getUrl('images/customlogo.png') ?></p>
<br><img width="640" src="<?= $module->getUrl('images/customlogo.png') ?>">
</div>
</div>
</div>
</div>
<br>

<div class="form-group">
<button type="button" class="btn btn-secondary" value="Cancel" onclick="(function() {
window.location.href = '<?= $module->getUrl('src/settings.php') ?>';
Expand Down Expand Up @@ -505,4 +547,4 @@ class="form-control <?php echo (!empty($phone_err)) ? 'is-invalid' : ''; ?>"
</script>

<?php
include_once APP_PATH_DOCROOT . 'ProjectGeneral/footer.php';
include_once APP_PATH_DOCROOT . 'ProjectGeneral/footer.php';