Update bface UI and security work

This commit is contained in:
Amer Agovic
2026-05-31 12:30:02 -05:00
parent 6fe23fae86
commit c6f7240912
45 changed files with 4531 additions and 553 deletions
+25 -3
View File
@@ -81,8 +81,10 @@ export const CONFIG_KEYS = {
APP_NAME: 'APP_NAME',
APP_DISPLAY_NAME: 'APP_DISPLAY_NAME',
APP_DESCRIPTION: 'APP_DESCRIPTION',
FAVICON: 'FAVICON',
BRAND_LOGO: 'BRAND_LOGO',
THEME_COLOR: 'THEME_COLOR',
BACKGROUND_COLOR: 'BACKGROUND_COLOR',
UI_SHELL: 'UI_SHELL',
INITIAL_ROUTE: 'INITIAL_ROUTE',
STORAGE_BACKEND: 'STORAGE_BACKEND',
@@ -150,8 +152,10 @@ export function initEnv(appConfig) {
APP_NAME: appConfig.id || appConfig.name,
APP_DISPLAY_NAME: appConfig.displayName || appConfig.short_name || appConfig.name,
APP_DESCRIPTION: appConfig.description || '',
FAVICON: appConfig.favicon || appConfig.brand_logo || appConfig.brandLogo || appConfig.icons?.[0]?.src || '/favicon.svg',
BRAND_LOGO: appConfig.brand_logo || appConfig.brandLogo || appConfig.icons?.[0]?.src || '/favicon.svg',
THEME_COLOR: appConfig.theme_color || appConfig.themeColor || '#000000',
BACKGROUND_COLOR: appConfig.background_color || appConfig.backgroundColor || '#ffffff',
UI_SHELL: appConfig.ui_shell || appConfig.uiShell || 'EmptyShell',
INITIAL_ROUTE: appConfig.initial_route || appConfig.initialRoute || appConfig.ui?.initial_route || appConfig.ui?.initialRoute || '/home',
STORAGE_BACKEND: appConfig.storage?.backend || 'localStorage',
@@ -318,6 +322,18 @@ function setMetaTag(name, content) {
element.setAttribute('content', content);
}
export function setDocumentBackground(color) {
if (typeof document === 'undefined' || !color) {
return;
}
document.documentElement.style.backgroundColor = color;
if (document.body) {
document.body.style.backgroundColor = color;
}
}
function setFavicon(href) {
if (typeof document === 'undefined' || !href) {
return;
@@ -344,25 +360,31 @@ export async function syncDocumentHeadFromConfig(options = {}) {
const {
titleFallback = 'PWA Template',
descriptionFallback = '',
themeColorFallback = '#000000'
themeColorFallback = '#000000',
backgroundColorFallback = '#ffffff'
} = options;
const [title, description, themeColor, brandLogo] = await Promise.all([
const [favicon, title, description, themeColor, backgroundColor, brandLogo] = await Promise.all([
getConfig(CONFIG_KEYS.FAVICON, '/favicon.svg'),
getConfig(CONFIG_KEYS.APP_DISPLAY_NAME, titleFallback),
getConfig(CONFIG_KEYS.APP_DESCRIPTION, descriptionFallback),
getConfig(CONFIG_KEYS.THEME_COLOR, themeColorFallback),
getConfig(CONFIG_KEYS.BACKGROUND_COLOR, backgroundColorFallback),
getConfig(CONFIG_KEYS.BRAND_LOGO, '/favicon.svg')
]);
document.title = title || titleFallback;
setMetaTag('description', description || descriptionFallback);
setMetaTag('theme-color', themeColor || themeColorFallback);
setFavicon(brandLogo || '/favicon.svg');
setDocumentBackground(backgroundColor || backgroundColorFallback);
setFavicon(favicon || '/favicon.svg');
return {
title: title || titleFallback,
description: description || descriptionFallback,
themeColor: themeColor || themeColorFallback,
backgroundColor: backgroundColor || backgroundColorFallback,
favicon: favicon || '/favicon.svg',
brandLogo: brandLogo || '/favicon.svg'
};
}