Add custom logo feature

README.md

@@ -14,6 +14,7 @@
   - [EM Settings](#em-settings)
     - [System Settings](#system-settings)
     - [Project Settings](#project-settings)
+    - [Custom Header Logo](#custom-header-logo)
     - [Translation](#translation)
   - [REDCapPRO Project Menu](#redcappro-project-menu)
     - [Home Tab](#home-tab)
@@ -128,13 +129,35 @@ These are settings/configuration options accessible in the normal External Modul
 | **Allow Auto-Enroll Upon Self-Registration**                                       | Checkbox | Allow participants to enroll themselves in a project when they register. If checked, the participant will be automatically enrolled in the REDCapPRO project when they self-register                                                                   |       Unchecked       |
 | **reCaptcha Site Key**                                                             |   Text   | The site key for the reCaptcha v3 service. This is used to prevent bots from registering. *Note: You **cannot** use the same site key as the one utilized by REDCap on surveys, because that site key is a v2 key.*                                    |        (blank)        |
 | **reCaptcha Secret Key**                                                           |   Text   | The secret key for the reCaptcha v3 service. This is used to prevent bots from registering. *Note: You **cannot** use the same secret key as the one utilized by REDCap on surveys, because that secret key is a v2 key.*                              |        (blank)        |
+| **System Header Logo Image**                                                       |   File   | Upload an image file to use as the default logo on all participant-facing pages. Accepted formats: JPG, PNG, GIF, SVG, WebP. Maximum size: 2 MB.                                                                                                       |        (blank)        |
+| **Use System Logo**                                                                | Checkbox | Display the uploaded system logo on participant-facing pages. Uncheck to revert to the original default REDCapPRO logo without removing the uploaded file. Only shown when a system logo file has been uploaded.                                       |       Unchecked       |
+| **Allow Custom Project Logos**                                                     | Checkbox | Allow project administrators to upload a custom logo that appears in participant-facing page headers. If disabled, all projects display the system logo (or the original default if no system logo is set). See [Custom Header Logo](#custom-header-logo). |       Unchecked       |
 | **Enable the API**                                                                 | Checkbox | Enable the API for this system. This allows you to register and enroll participants using the [API](#api).                                                                                                                                             |       Unchecked       |
 | **Restrict API project settings to REDCap administrators**                         | Checkbox | If checked, only REDCap administrators will be able to access the API settings in the project. If unchecked, any REDCapPRO manager will be able to access the API settings.                                                                            |       Unchecked       |
 
 ### Project Settings
 
 Project configuration is done within the project's **REDCapPRO** menu. 
 
+### Custom Header Logo
+
+**REDCapPRO** supports custom branding by allowing a logo image to be displayed in the header of all participant-facing pages (login, password reset, etc.). The logo is resolved in the following priority order:
+
+1. **Project logo** — if the system permits custom project logos and the project has uploaded one, it is shown.
+2. **System logo** — if a system-level logo has been uploaded and enabled, it is used as the default across all projects.
+3. **Default** — the original REDCapPRO logo (`RCPro_Logo_Alternate.svg`) is shown.
+
+Custom logos are only shown on **participant-facing pages**. Project staff pages always display the standard REDCapPRO logo.
+
+**System-level configuration** (Control Center → External Modules → REDCapPRO):
+- Upload a logo file with **System Header Logo Image**.
+- Toggle it on/off with **Use System Logo** without deleting the file.
+- Grant projects the ability to override it with **Allow Custom Project Logos**.
+
+**Project-level configuration** (REDCapPRO Project Menu → Settings):
+- Upload a per-project logo with **Header Logo** (only visible when **Allow Custom Project Logos** is enabled at the system level).
+- Remove the custom logo by checking the *Remove custom logo and restore the default* checkbox and saving.
+
 ### Translation
 
 This external module makes use of the built-in text translation functions in REDCap's External Module framework. These functions use `.ini` files (located in the [lang](lang) directory of this module's source code) to replace placeholder text with the equivalent translated text. 

config.json

@@ -119,6 +119,35 @@
             "name": "<div class='p-2' style='background-image: linear-gradient(rgb(255, 197,248), rgb(255, 197,248)); border: 1px solid rgba(168, 37, 133, 0.4); border-radius: 0.375rem;'><strong>reCAPTCHA Secret Key:</strong></div><br>Secret key for reCAPTCHA v3 (default is empty)<br><em>You cannot use the same secret key that you use for REDCap surveys, since that is a v2 key. This must be a v3 key</em>",
             "type": "password"
         },
+        {
+            "key": "system-header-logo-descriptive",
+            "name": "system_header_logo_descriptive",
+            "tt_name": true,
+            "type": "descriptive"
+        },
+        {
+            "key": "system-header-logo-file",
+            "name": "system_header_logo_file",
+            "tt_name": true,
+            "type": "file"
+        },
+        {
+            "key": "system-header-logo-enabled",
+            "name": "system_header_logo_enabled",
+            "tt_name": true,
+            "type": "checkbox",
+            "branchingLogic": {
+                "field": "system-header-logo-file",
+                "op": "<>",
+                "value": ""
+            }
+        },
+        {
+            "key": "allow-custom-logo-system",
+            "name": "allow_custom_logo_system",
+            "tt_name": true,
+            "type": "checkbox"
+        },
         {
             "key": "api-descriptive",
             "name": "<div class='p-2' style='background-image: linear-gradient(rgb(255, 248, 197), rgb(255, 248, 197)); border: 1px solid rgba(168, 133, 37, 0.4); border-radius: 0.375rem;'><strong>API Settings</strong><p>These settings control the use of the API. Please take care to understand how the API may be used before enabling it in the system.</p>    </div>",

lang/Chinese.ini

@@ -228,3 +228,17 @@ mfa_messaging5 = "请稍等..."
 
 
 
+
+project_settings_header_logo = "页眉标志"
+project_settings_header_logo_desc = "上传自定义标志以显示在参与者页面页眉中。留空以使用默认 REDCapPRO 标志。"
+project_settings_header_logo_upload_label = "上传标志图片"
+project_settings_header_logo_upload_hint = "接受格式：JPG、PNG、GIF、SVG、WebP。最大大小：2 MB。"
+project_settings_header_logo_current = "当前标志"
+project_settings_header_logo_clear = "删除自定义标志并恢复默认值"
+project_settings_header_logo_preview = "预览"
+project_settings_header_logo_type_err = "无效的文件类型。请上传 JPG、PNG、GIF、SVG 或 WebP 图片。"
+project_settings_header_logo_size_err = "图片文件太大。最大允许大小为 2 MB。"
+system_header_logo_descriptive = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>系统页眉标志设置</strong><p>这些设置控制参与者页面页眉中显示的标志。可以在此处上传系统级标志作为默认标志。如果启用了自定义项目标志选项，各个项目可以提供自己的标志。</p></div>"
+system_header_logo_file = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>系统页眉标志图片</strong>:</div><br>上传图片文件以用作所有参与者页面的默认标志。接受格式：JPG、PNG、GIF、SVG、WebP。最大大小：2 MB。"
+system_header_logo_enabled = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>使用系统标志</strong>:</div><br>在参与者页面上显示上传的系统标志。取消选中以在不删除上传文件的情况下恢复为原始默认 REDCapPRO 标志。"
+allow_custom_logo_system = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>允许自定义项目标志</strong>:</div><br>是否允许项目管理员上传出现在参与者页面页眉中的自定义标志？如果禁用，所有项目将显示系统标志（如果未设置系统标志，则显示原始默认标志）。（默认为否）"

lang/Deutsch.ini

@@ -216,4 +216,17 @@ mfa_messaging1 = "Fehler beim Senden der E-Mail"
 mfa_messaging2 = "Fehler beim Anzeigen der MFA-Informationen"
 mfa_messaging3 = "Fehler beim Senden der Authenticator-Informationen"
 mfa_messaging4 = "E-Mail mit Authentifikatorinformationen gesendet"
-mfa_messaging5 = "Bitte warten…"
+mfa_messaging5 = "Bitte warten…"
+project_settings_header_logo = "Kopfzeilen-Logo"
+project_settings_header_logo_desc = "Laden Sie ein benutzerdefiniertes Logo hoch, das in der Kopfzeile der Teilnehmerseiten angezeigt wird. Leer lassen, um das Standard-REDCapPRO-Logo zu verwenden."
+project_settings_header_logo_upload_label = "Logo-Bild hochladen"
+project_settings_header_logo_upload_hint = "Akzeptierte Formate: JPG, PNG, GIF, SVG, WebP. Maximale Größe: 2 MB."
+project_settings_header_logo_current = "Aktuelles Logo"
+project_settings_header_logo_clear = "Benutzerdefiniertes Logo entfernen und Standard wiederherstellen"
+project_settings_header_logo_preview = "Vorschau"
+project_settings_header_logo_type_err = "Ungültiger Dateityp. Bitte laden Sie ein JPG-, PNG-, GIF-, SVG- oder WebP-Bild hoch."
+project_settings_header_logo_size_err = "Die Bilddatei ist zu groß. Die maximal zulässige Größe beträgt 2 MB."
+system_header_logo_descriptive = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Systemkopfzeilen-Logo Einstellungen</strong><p>Diese Einstellungen steuern das in den Seitenköpfen der Teilnehmerseiten angezeigte Logo. Hier kann ein systemweites Logo hochgeladen und als Standard verwendet werden. Einzelne Projekte können ihr eigenes Logo bereitstellen, wenn die benutzerdefinierte Projektlogo-Option aktiviert ist.</p></div>"
+system_header_logo_file = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Systemkopfzeilen-Logo Bild</strong>:</div><br>Laden Sie eine Bilddatei hoch, die als Standard-Logo auf allen Teilnehmerseiten verwendet wird. Akzeptierte Formate: JPG, PNG, GIF, SVG, WebP. Maximale Größe: 2 MB."
+system_header_logo_enabled = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Systemlogo verwenden</strong>:</div><br>Das hochgeladene Systemlogo auf Teilnehmerseiten anzeigen. Deaktivieren, um ohne Löschen der hochgeladenen Datei zum ursprünglichen Standard-REDCapPRO-Logo zurückzukehren."
+allow_custom_logo_system = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Benutzerdefinierte Projektlogos erlauben</strong>:</div><br>Sollen Projektadministratoren ein benutzerdefiniertes Logo hochladen dürfen, das in der Teilnehmerseitenkopfzeile erscheint? Wenn deaktiviert, zeigen alle Projekte das Systemlogo an (oder den ursprünglichen Standard, wenn kein Systemlogo gesetzt ist). (Standard: Nein)"

lang/English.ini

@@ -231,3 +231,17 @@ enrollment_failed_message1 = "Sorry, but we were not able to enroll you in this
 
 
 
+
+system_header_logo_descriptive = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>System Header Logo Settings</strong><p>These settings control the logo displayed in participant-facing page headers. A system-wide logo can be uploaded here and used as the default. Individual projects may supply their own logo if the custom project logo option is enabled.</p></div>"
+system_header_logo_file = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>System Header Logo Image</strong>:</div><br>Upload an image file to use as the default logo on all participant-facing pages. Accepted formats: JPG, PNG, GIF, SVG, WebP. Maximum size: 2 MB."
+system_header_logo_enabled = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Use System Logo</strong>:</div><br>Display the uploaded system logo on participant-facing pages. Uncheck to revert to the original default REDCapPRO logo without removing the uploaded file."
+allow_custom_logo_system = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Allow Custom Project Logos</strong>:</div><br>Should project administrators be allowed to upload a custom logo that appears in the participant-facing header? If disabled, all projects will display the system logo (or the original default if no system logo is set). (default is No)"
+project_settings_header_logo = "Header Logo"
+project_settings_header_logo_desc = "Upload a custom logo to display in the participant-facing header. Leave empty to use the default REDCapPRO logo."
+project_settings_header_logo_upload_label = "Upload Logo Image"
+project_settings_header_logo_upload_hint = "Accepted formats: JPG, PNG, GIF, SVG, WebP. Maximum size: 2 MB."
+project_settings_header_logo_current = "Current Logo"
+project_settings_header_logo_clear = "Remove custom logo and restore the default"
+project_settings_header_logo_preview = "Preview"
+project_settings_header_logo_type_err = "Invalid file type. Please upload a JPG, PNG, GIF, SVG, or WebP image."
+project_settings_header_logo_size_err = "Image file is too large. Maximum allowed size is 2 MB."

lang/Español.ini

@@ -216,4 +216,17 @@ mfa_messaging1 = "Error al enviar el correo electrónico"
 mfa_messaging2 = "Error al mostrar la información de MFA"
 mfa_messaging3 = "Error al enviar información del autenticador"
 mfa_messaging4 = "Correo electrónico enviado con información del autenticador"
-mfa_messaging5 = "Por favor espere..."
+mfa_messaging5 = "Por favor espere..."
+project_settings_header_logo = "Logo del encabezado"
+project_settings_header_logo_desc = "Suba un logo personalizado para mostrar en el encabezado de las páginas de participantes. Déjelo vacío para usar el logo predeterminado de REDCapPRO."
+project_settings_header_logo_upload_label = "Subir imagen del logo"
+project_settings_header_logo_upload_hint = "Formatos aceptados: JPG, PNG, GIF, SVG, WebP. Tamaño máximo: 2 MB."
+project_settings_header_logo_current = "Logo actual"
+project_settings_header_logo_clear = "Eliminar logo personalizado y restaurar el predeterminado"
+project_settings_header_logo_preview = "Vista previa"
+project_settings_header_logo_type_err = "Tipo de archivo no válido. Por favor, suba una imagen JPG, PNG, GIF, SVG o WebP."
+project_settings_header_logo_size_err = "El archivo de imagen es demasiado grande. El tamaño máximo permitido es 2 MB."
+system_header_logo_descriptive = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Configuración del logo del encabezado del sistema</strong><p>Estos ajustes controlan el logo que se muestra en los encabezados de las páginas de participantes. Se puede subir un logo a nivel de sistema aquí para usarlo como predeterminado. Los proyectos individuales pueden proporcionar su propio logo si la opción de logo de proyecto personalizado está habilitada.</p></div>"
+system_header_logo_file = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Imagen del logo del encabezado del sistema</strong>:</div><br>Suba un archivo de imagen para usarlo como logo predeterminado en todas las páginas de participantes. Formatos aceptados: JPG, PNG, GIF, SVG, WebP. Tamaño máximo: 2 MB."
+system_header_logo_enabled = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Usar logo del sistema</strong>:</div><br>Mostrar el logo del sistema subido en las páginas de participantes. Desmarque para volver al logo predeterminado original de REDCapPRO sin eliminar el archivo subido."
+allow_custom_logo_system = "<div class='p-2' style='background-image: linear-gradient(rgb(255, 220, 197), rgb(255, 220, 197)); border: 1px solid rgba(168, 80, 37, 0.4); border-radius: 0.375rem;'><strong>Permitir logos de proyecto personalizados</strong>:</div><br>¿Deben los administradores de proyecto poder subir un logo personalizado que aparezca en el encabezado de las páginas de participantes? Si está desactivado, todos los proyectos mostrarán el logo del sistema (o el logo predeterminado original si no hay logo del sistema configurado). (el valor predeterminado es No)"