feat(ui): Add customizable OIDC login screen branding (#1583)
* 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:
co-authored by
github-actions[bot]
TwiN
parent
f925cb4924
commit
12be9facda
+12
-7
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user