rebecca/pandus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Add customizable OIDC login screen branding (#1583)

Browse Source 
* feat(ui): Add customizable OIDC login screen branding

As per https://github.com/TwiN/gatus/discussions/1579, this PR
allows for some customizations in the OIDC login screen:

- If a logo is set it will be displayed alongside the Gatus one
- New ui config `ui.login-subtitle`: customises the message in
  the screen
- If set, use `ui.header` will be used to customise the title

I haven't commited the web static assets. I believe that's
triggered with a comment? let me know if I should be doing it.

Also please clarify if I've forgotten about something here,
this is my first pr.

* chore(ui): Regenerate static assets

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: TwiN <twin@linux.com>
This commit is contained in:
Héctor Luaces
2026-04-01 20:56:47 -04:00
committed by GitHub
co-authored by github-actions[bot] TwiN
parent f925cb4924
commit 12be9facda
8 changed files with 38 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/public/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<script type="text/javascript">
window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardHeading: "{{ .UI.DashboardHeading }}", dashboardSubheading: "{{ .UI.DashboardSubheading }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardHeading: "{{ .UI.DashboardHeading }}", dashboardSubheading: "{{ .UI.DashboardSubheading }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}", loginSubtitle: "{{ .UI.LoginSubtitle }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
// Initialize theme immediately to prevent flash
(function() {
const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];
web/app/src/App.vue
+12 -7
View File
@@ -112,13 +112,14 @@
<div v-else id="login-container" class="flex items-center justify-center min-h-screen p-4">
<Card class="w-full max-w-md">
<CardHeader class="text-center">
<img
src="./assets/logo.svg"
alt="Gatus"
class="w-20 h-20 mx-auto mb-4"
/>
<CardTitle class="text-3xl">Gatus</CardTitle>
<p class="text-muted-foreground mt-2">System Monitoring Dashboard</p>
<div v-if="logo" class="flex items-center justify-center gap-4 mb-4">
<img :src="logo" alt="" class="w-20 h-20 object-contain" />
<div class="w-px h-12 bg-border"></div>
<img src="./assets/logo.svg" alt="Gatus" class="w-20 h-20" />
</div>
<img v-else src="./assets/logo.svg" alt="Gatus" class="w-20 h-20 mx-auto mb-4" />
<CardTitle class="text-3xl">{{ header }}</CardTitle>
<p class="text-muted-foreground mt-2">{{ loginSubtitle }}</p>
</CardHeader>
<CardContent>
<div v-if="route && route.query.error" class="mb-6">
@@ -191,6 +192,10 @@ const buttons = computed(() => {
return window.config && window.config.buttons ? window.config.buttons : []
})
const loginSubtitle = computed(() => {
return window.config && window.config.loginSubtitle && window.config.loginSubtitle !== '{{ .UI.LoginSubtitle }}' ? window.config.loginSubtitle : "System Monitoring Dashboard"
})
// Methods
const fetchConfig = async () => {
try {