From 3d432b84f53bd32b14f669bba3a450a9599a1174 Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Wed, 4 Dec 2024 14:00:03 +0100
Subject: [PATCH] Remove `defaultCoverPhoto` from bootstrap

---
 .../templates/headIncludeJavaScript.tpl        |  1 -
 com.woltlab.wcf/templates/user.tpl             |  2 +-
 ts/WoltLabSuite/Core/Bootstrap.ts              |  3 +--
 ts/WoltLabSuite/Core/BootstrapFrontend.ts      |  2 --
 .../Core/Component/User/CoverPhoto.ts          | 17 ++++++++++-------
 .../files/js/WoltLabSuite/Core/Bootstrap.js    |  2 +-
 .../js/WoltLabSuite/Core/BootstrapFrontend.js  |  1 -
 .../Core/Component/User/CoverPhoto.js          | 18 ++++++++++--------
 8 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index 3c2bb79d09..4c72ec8b21 100644
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -88,7 +88,6 @@ window.addEventListener('pageshow', function(event) {
 			dynamicColorScheme: {if $__wcf->getStyleHandler()->getColorScheme() === 'system'}true{else}false{/if},
 			endpointUserPopover: {if $__wcf->getSession()->getPermission('user.profile.canViewUserProfile')}'{link controller='UserPopover'}{/link}'{else}''{/if},
 			executeCronjobs: {if $executeCronjobs}'{link controller="CronjobPerform"}{/link}'{else}undefined{/if},
-			defaultCoverPhoto: '{unsafe:$__wcf->styleHandler->getStyle()->getCoverPhotoUrl()|encodeJS}',
 			{if ENABLE_SHARE_BUTTONS}
 				{assign var='__shareProviders' value="\n"|explode:SHARE_BUTTONS_PROVIDERS}
 				shareButtonProviders: [
diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl
index b4a34e5d38..88d36daefc 100644
--- a/com.woltlab.wcf/templates/user.tpl
+++ b/com.woltlab.wcf/templates/user.tpl
@@ -115,7 +115,7 @@
 			{if $user->canEditCoverPhoto()}
 				<ul class="userProfileManageCoverPhoto buttonGroup buttonList smallButtons">
 					<li>
-						<button type="button" data-edit-cover-photo="{link controller="UserCoverPhoto" id=$user->userID}{/link}" class="button small">
+						<button type="button" data-edit-cover-photo="{link controller="UserCoverPhoto" id=$user->userID}{/link}" data-default-cover-photo="{$__wcf->styleHandler->getStyle()->getCoverPhotoUrl()}" class="button small">
 							{icon name='pencil'} {lang}wcf.user.coverPhoto.management{/lang}
 						</button>
 					</li>
diff --git a/ts/WoltLabSuite/Core/Bootstrap.ts b/ts/WoltLabSuite/Core/Bootstrap.ts
index f23ebbc78d..cb00326971 100644
--- a/ts/WoltLabSuite/Core/Bootstrap.ts
+++ b/ts/WoltLabSuite/Core/Bootstrap.ts
@@ -52,7 +52,6 @@ window.__wcf_bc_eventHandler = EventHandler;
 export interface BoostrapOptions {
   dynamicColorScheme: boolean;
   enableMobileMenu: boolean;
-  defaultCoverPhoto?: string;
   pageMenuMainProvider: PageMenuMainProvider;
 }
 
@@ -190,7 +189,7 @@ export function setup(options: BoostrapOptions): void {
     void import("./Component/Image/Viewer").then(({ setupLegacy }) => setupLegacy());
   });
   whenFirstSeen("[data-edit-cover-photo]", () => {
-    void import("./Component/User/CoverPhoto").then(({ setup }) => setup(options.defaultCoverPhoto));
+    void import("./Component/User/CoverPhoto").then(({ setup }) => setup());
   });
 
   // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
index 66117be6e1..bf3f2b9c14 100644
--- a/ts/WoltLabSuite/Core/BootstrapFrontend.ts
+++ b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
@@ -31,7 +31,6 @@ interface BootstrapOptions {
     registerUrl: string;
     notificationLastReadTime: number;
   };
-  defaultCoverPhoto?: string;
   dynamicColorScheme: boolean;
   endpointUserPopover: string;
   executeCronjobs: string | undefined;
@@ -71,7 +70,6 @@ export function setup(options: BootstrapOptions): void {
     dynamicColorScheme: options.dynamicColorScheme,
     enableMobileMenu: true,
     pageMenuMainProvider: new UiPageMenuMainFrontend(),
-    defaultCoverPhoto: options.defaultCoverPhoto,
   });
   UiPageHeaderMenu.init();
 
diff --git a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
index b76b176ea9..b591014115 100644
--- a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
+++ b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
@@ -18,6 +18,7 @@ import WoltlabCoreFile from "WoltLabSuite/Core/Component/File/woltlab-core-file"
 import { fire as fireEvent } from "WoltLabSuite/Core/Event/Handler";
 import { getPhrase } from "WoltLabSuite/Core/Language";
 import DomUtil from "WoltLabSuite/Core/Dom/Util";
+import { unescapeHTML } from "WoltLabSuite/Core/StringUtil";
 
 type ResponseGetForm = {
   dialog: string;
@@ -25,7 +26,8 @@ type ResponseGetForm = {
   title: string;
 };
 
-async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string): Promise<void> {
+async function editCoverPhoto(button: HTMLElement): Promise<void> {
+  const defaultCoverPhoto = button.dataset.defaultCoverPhoto;
   const json = (await prepareRequest(button.dataset.editCoverPhoto!).get().fetchAsJson()) as ResponseGetForm;
   const dialog = dialogFactory().fromHtml(json.dialog).withoutControls();
   const coverPhotoElement = getCoverPhotoElement();
@@ -34,25 +36,26 @@ async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string):
 
   dialog.addEventListener("afterClose", () => {
     const file = dialog.querySelector<WoltlabCoreFile>("woltlab-core-file");
-    const coverPhotoUrl = file?.link ?? defaultCoverPhoto;
+    const coverPhotoUrl = unescapeHTML(file?.link ?? defaultCoverPhoto ?? "");
+    const coverPhotoStyle = `url("${coverPhotoUrl}")`;
 
     if (FormBuilderManager.hasForm(json.formId)) {
       FormBuilderManager.unregisterForm(json.formId);
     }
 
-    if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === `url("${coverPhotoUrl}")`) {
+    if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === coverPhotoStyle) {
       // nothing changed
       return;
     }
 
     if (coverPhotoElement && coverPhotoUrl) {
-      coverPhotoElement.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+      coverPhotoElement.style.setProperty("background-image", coverPhotoStyle, "");
     } else {
       // ACP cover photo management
       if (!coverPhotoElement && coverPhotoUrl) {
         coverPhotoNotice!.parentElement!.appendChild(
           DomUtil.createFragmentFromHtml(
-            `<div id="coverPhotoPreview" style="background-image: url(${coverPhotoUrl});"></div>`,
+            `<div id="coverPhotoPreview" style="background-image: ${coverPhotoStyle};"></div>`,
           ),
         );
         coverPhotoNotice!.remove();
@@ -79,11 +82,11 @@ function getCoverPhotoElement(): HTMLElement | null {
   return document.querySelector<HTMLElement>(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
 }
 
-export function setup(defaultCoverPhoto?: string): void {
+export function setup(): void {
   wheneverFirstSeen("[data-edit-cover-photo]", (button) => {
     button.addEventListener(
       "click",
-      promiseMutex(() => editCoverPhoto(button, defaultCoverPhoto)),
+      promiseMutex(() => editCoverPhoto(button)),
     );
   });
 }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index 0183e78ff6..bcf44c189c 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
@@ -154,7 +154,7 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools",
             void new Promise((resolve_12, reject_12) => { require(["./Component/Image/Viewer"], resolve_12, reject_12); }).then(tslib_1.__importStar).then(({ setupLegacy }) => setupLegacy());
         });
         (0, LazyLoader_1.whenFirstSeen)("[data-edit-cover-photo]", () => {
-            void new Promise((resolve_13, reject_13) => { require(["./Component/User/CoverPhoto"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup(options.defaultCoverPhoto));
+            void new Promise((resolve_13, reject_13) => { require(["./Component/User/CoverPhoto"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup());
         });
         // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
         // when widget form elements are placed in a dialog.
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
index fdab623b6b..4ef44badd6 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
@@ -45,7 +45,6 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui
             dynamicColorScheme: options.dynamicColorScheme,
             enableMobileMenu: true,
             pageMenuMainProvider: new Frontend_1.default(),
-            defaultCoverPhoto: options.defaultCoverPhoto,
         });
         UiPageHeaderMenu.init();
         if (options.styleChanger) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
index ec5e70a8e6..87ae89e16f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
@@ -7,13 +7,14 @@
  * @since     6.2
  * @woltlabExcludeBundle all
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ajax/Backend", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Manager", "WoltLabSuite/Core/Event/Handler", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Backend_1, Notification_1, FormBuilderManager, Handler_1, Language_1, Util_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ajax/Backend", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Manager", "WoltLabSuite/Core/Event/Handler", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util", "WoltLabSuite/Core/StringUtil"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Backend_1, Notification_1, FormBuilderManager, Handler_1, Language_1, Util_1, StringUtil_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
     FormBuilderManager = tslib_1.__importStar(FormBuilderManager);
     Util_1 = tslib_1.__importDefault(Util_1);
-    async function editCoverPhoto(button, defaultCoverPhoto) {
+    async function editCoverPhoto(button) {
+        const defaultCoverPhoto = button.dataset.defaultCoverPhoto;
         const json = (await (0, Backend_1.prepareRequest)(button.dataset.editCoverPhoto).get().fetchAsJson());
         const dialog = (0, Dialog_1.dialogFactory)().fromHtml(json.dialog).withoutControls();
         const coverPhotoElement = getCoverPhotoElement();
@@ -21,21 +22,22 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
         const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
         dialog.addEventListener("afterClose", () => {
             const file = dialog.querySelector("woltlab-core-file");
-            const coverPhotoUrl = file?.link ?? defaultCoverPhoto;
+            const coverPhotoUrl = (0, StringUtil_1.unescapeHTML)(file?.link ?? defaultCoverPhoto ?? "");
+            const coverPhotoStyle = `url("${coverPhotoUrl}")`;
             if (FormBuilderManager.hasForm(json.formId)) {
                 FormBuilderManager.unregisterForm(json.formId);
             }
-            if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === `url("${coverPhotoUrl}")`) {
+            if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === coverPhotoStyle) {
                 // nothing changed
                 return;
             }
             if (coverPhotoElement && coverPhotoUrl) {
-                coverPhotoElement.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+                coverPhotoElement.style.setProperty("background-image", coverPhotoStyle, "");
             }
             else {
                 // ACP cover photo management
                 if (!coverPhotoElement && coverPhotoUrl) {
-                    coverPhotoNotice.parentElement.appendChild(Util_1.default.createFragmentFromHtml(`<div id="coverPhotoPreview" style="background-image: url(${coverPhotoUrl});"></div>`));
+                    coverPhotoNotice.parentElement.appendChild(Util_1.default.createFragmentFromHtml(`<div id="coverPhotoPreview" style="background-image: ${coverPhotoStyle};"></div>`));
                     coverPhotoNotice.remove();
                 }
                 else if (coverPhotoElement && !coverPhotoUrl) {
@@ -53,9 +55,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
     function getCoverPhotoElement() {
         return document.querySelector(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
     }
-    function setup(defaultCoverPhoto) {
+    function setup() {
         (0, Selector_1.wheneverFirstSeen)("[data-edit-cover-photo]", (button) => {
-            button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editCoverPhoto(button, defaultCoverPhoto)));
+            button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editCoverPhoto(button)));
         });
     }
 });
-- 
2.20.1