TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 23:57:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add attribute to only enable specific themes (#6798)

Browse Source 
* feat: enable only specific themes in label policy

* feat: enable only specific themes in label policy

* feat: enable only specific themes in label policy

* feat: enable only specific themes in label policy

* add management in console

* pass enabledTheme

* render login ui based on enabled theme

* add in branding / settings service and name consistently

* update console to latest proto state

* fix console linting

* fix linting

* cleanup

* add translations

---------

Co-authored-by: Livio Spring <livio.a@gmail.com>
Co-authored-by: Tim Möhlmann <tim+github@zitadel.com>
This commit is contained in:
Stefan Benz
2023-10-26 07:54:09 +02:00
committed by GitHub
parent 7b0506c19c
commit cb7b50b513
43 changed files with 527 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
internal/api/ui/login/renderer.go
View File

@@ -381,8 +381,6 @@ func (l *Login) getBaseData(r *http.Request, authReq *domain.AuthRequest, titleI
Title: title,
Description: description,
Theme: l.getTheme(r),
ThemeMode: l.getThemeMode(r),
DarkMode: l.isDarkMode(r),
PrivateLabelingOrgID: l.getPrivateLabelingID(r, authReq),
OrgID: l.getOrgID(r, authReq),
OrgName: l.getOrgName(authReq),
@@ -412,6 +410,9 @@ func (l *Login) getBaseData(r *http.Request, authReq *domain.AuthRequest, titleI
}
privacyPolicy = policy.ToDomain()
}
baseData.ThemeMode = l.getThemeMode(baseData.LabelPolicy)
baseData.ThemeClass = l.getThemeClass(r, baseData.LabelPolicy)
baseData.DarkMode = l.isDarkMode(r, baseData.LabelPolicy)
baseData = l.setLinksOnBaseData(baseData, privacyPolicy)
return baseData
}
@@ -480,14 +481,22 @@ func (l *Login) getTheme(r *http.Request) string {
return "zitadel"
}
func (l *Login) getThemeMode(r *http.Request) string {
if l.isDarkMode(r) {
// getThemeClass returns the css class for the login html.
// Possible values are `lgn-light-theme` and `lgn-dark-theme` and are based on the policy first
// and if it's set to auto the cookie is checked.
func (l *Login) getThemeClass(r *http.Request, policy *domain.LabelPolicy) string {
if l.isDarkMode(r, policy) {
return "lgn-dark-theme"
}
return "lgn-light-theme"
}
func (l *Login) isDarkMode(r *http.Request) bool {
// isDarkMode checks policy first and if not set to specifically use dark or light only,
// it will also check the cookie.
func (l *Login) isDarkMode(r *http.Request, policy *domain.LabelPolicy) bool {
if mode := l.getThemeMode(policy); mode != domain.LabelPolicyThemeAuto {
return mode == domain.LabelPolicyThemeDark
}
cookie, err := r.Cookie("mode")
if err != nil {
return false
@@ -495,6 +504,13 @@ func (l *Login) isDarkMode(r *http.Request) bool {
return strings.HasSuffix(cookie.Value, "dark")
}
func (l *Login) getThemeMode(policy *domain.LabelPolicy) domain.LabelPolicyThemeMode {
if policy != nil {
return policy.ThemeMode
}
return domain.LabelPolicyThemeAuto
}
func (l *Login) getOrgID(r *http.Request, authReq *domain.AuthRequest) string {
if authReq == nil {
return r.FormValue(queryOrgID)
@@ -607,7 +623,8 @@ type baseData struct {
Title string
Description string
Theme string
ThemeMode string
ThemeMode domain.LabelPolicyThemeMode
ThemeClass string
DarkMode bool
PrivateLabelingOrgID string
OrgID string

20
internal/api/ui/login/static/resources/scripts/theme.js
View File

@@ -1,10 +1,16 @@
const usesDarkTheme = hasDarkModeOverwriteCookie() || (!hasLightModeOverwriteCookie() && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (usesDarkTheme) {
document.documentElement.classList.replace('lgn-light-theme', 'lgn-dark-theme');
writeModeCookie('dark');
} else {
document.documentElement.classList.replace('lgn-dark-theme', 'lgn-light-theme');
writeModeCookie('light');
if (isAutoMode()) {
const usesDarkTheme = hasDarkModeOverwriteCookie() || (!hasLightModeOverwriteCookie() && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (usesDarkTheme) {
document.documentElement.classList.replace('lgn-light-theme', 'lgn-dark-theme');
writeModeCookie('dark');
} else {
document.documentElement.classList.replace('lgn-dark-theme', 'lgn-light-theme');
writeModeCookie('light');
}
}
function isAutoMode() {
return document.documentElement.dataset["themeMode"] === "0"
}
function hasDarkModeOverwriteCookie() {

2
internal/api/ui/login/static/templates/main.html
View File

@@ -1,6 +1,6 @@
{{define "main-top"}}
<!DOCTYPE html>
<html lang="{{ .Lang }}" class="{{.ThemeMode}}">
<html lang="{{ .Lang }}" class="{{.ThemeClass}}" data-theme-mode="{{.ThemeMode}}">
<head>
<meta charset="UTF-8">