From 8012cc36e2778cc63de2c6ac4d43091ebe2fe93a Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 16 Aug 2022 16:10:06 +0200
Subject: [PATCH] Make solid an opt-in flag, disallow writing to `name` and
 `solid`

Force the usage of `setIcon()` to set the desired icon.
---
 global.d.ts                                   |  7 ++--
 ts/WoltLabSuite/WebComponent/fa-icon.ts       | 36 +++++++------------
 .../js/WoltLabSuite/WebComponent/fa-icon.js   | 34 +++++++-----------
 3 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/global.d.ts b/global.d.ts
index 251c2d10e3..f6975377a8 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -54,16 +54,15 @@ declare global {
   type ArbitraryObject = Record<string, unknown>;
 
   interface FaBrand extends HTMLElement {
-    name: string;
     size: IconSize;
   }
 
   interface FaIcon extends HTMLElement {
-    name: string;
-    solid: boolean;
+    readonly name: string;
+    readonly solid: boolean;
     size: IconSize;
 
-    setIcon: (name: string, isSolid: boolean) => void;
+    setIcon: (name: string, forceSolid?: boolean) => void;
   }
 
   interface HTMLElementTagNameMap {
diff --git a/ts/WoltLabSuite/WebComponent/fa-icon.ts b/ts/WoltLabSuite/WebComponent/fa-icon.ts
index fb52d65ccf..6d85d78d48 100644
--- a/ts/WoltLabSuite/WebComponent/fa-icon.ts
+++ b/ts/WoltLabSuite/WebComponent/fa-icon.ts
@@ -49,17 +49,22 @@
       }
     }
 
-    setIcon(name: string, isSolid: boolean): void {
+    setIcon(name: string, forceSolid = false): void {
       if (!this.isValidIconName(name)) {
         throw new TypeError(`The icon '${name}' is unknown or unsupported.`);
       }
 
-      if (!this.isValidIconStyle(name, isSolid)) {
-        throw new Error(`The icon '${name}' only supports the 'solid' style.`);
+      if (!forceSolid && !this.hasNonSolidStyle(name)) {
+        forceSolid = true;
       }
 
-      this.solid = isSolid;
-      this.name = name;
+      if (forceSolid) {
+        this.setAttribute("solid", "");
+      } else {
+        this.removeAttribute("solid");
+      }
+
+      this.setAttribute("name", name);
 
       this.updateIcon();
     }
@@ -68,8 +73,8 @@
       return name !== null && window.getFontAwesome6IconMetadata(name) !== undefined;
     }
 
-    private isValidIconStyle(name: string, isSolid: boolean): boolean {
-      if (!isSolid && isFontAwesome6Free()) {
+    private hasNonSolidStyle(name: string): boolean {
+      if (isFontAwesome6Free()) {
         const [, hasRegularVariant] = window.getFontAwesome6IconMetadata(name)!;
         if (!hasRegularVariant) {
           // Font Awesome 6 Free only includes solid icons with the
@@ -162,27 +167,10 @@
       return this.hasAttribute("solid");
     }
 
-    set solid(solid: boolean) {
-      if (solid) {
-        this.setAttribute("solid", "");
-      } else {
-        this.removeAttribute("solid");
-      }
-    }
-
     get name(): string {
       return this.getAttribute("name") || "";
     }
 
-    set name(name: string) {
-      if (!this.isValidIconName(name)) {
-        throw new Error(`Refused to set the unknown icon name '${name}'.`);
-      }
-
-      this.setAttribute("name", name);
-      this.updateIcon();
-    }
-
     get size(): IconSize {
       const size = this.getAttribute("size");
       if (size === null) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
index 2514e10fd8..bcab3946bb 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
@@ -41,22 +41,27 @@
                 throw new TypeError(`The icon '${this.name}' is unknown or unsupported.`);
             }
         }
-        setIcon(name, isSolid) {
+        setIcon(name, forceSolid = false) {
             if (!this.isValidIconName(name)) {
                 throw new TypeError(`The icon '${name}' is unknown or unsupported.`);
             }
-            if (!this.isValidIconStyle(name, isSolid)) {
-                throw new Error(`The icon '${name}' only supports the 'solid' style.`);
+            if (!forceSolid && !this.hasNonSolidStyle(name)) {
+                forceSolid = true;
             }
-            this.solid = isSolid;
-            this.name = name;
+            if (forceSolid) {
+                this.setAttribute("solid", "");
+            }
+            else {
+                this.removeAttribute("solid");
+            }
+            this.setAttribute("name", name);
             this.updateIcon();
         }
         isValidIconName(name) {
             return name !== null && window.getFontAwesome6IconMetadata(name) !== undefined;
         }
-        isValidIconStyle(name, isSolid) {
-            if (!isSolid && isFontAwesome6Free()) {
+        hasNonSolidStyle(name) {
+            if (isFontAwesome6Free()) {
                 const [, hasRegularVariant] = window.getFontAwesome6IconMetadata(name);
                 if (!hasRegularVariant) {
                     // Font Awesome 6 Free only includes solid icons with the
@@ -140,24 +145,9 @@
         get solid() {
             return this.hasAttribute("solid");
         }
-        set solid(solid) {
-            if (solid) {
-                this.setAttribute("solid", "");
-            }
-            else {
-                this.removeAttribute("solid");
-            }
-        }
         get name() {
             return this.getAttribute("name") || "";
         }
-        set name(name) {
-            if (!this.isValidIconName(name)) {
-                throw new Error(`Refused to set the unknown icon name '${name}'.`);
-            }
-            this.setAttribute("name", name);
-            this.updateIcon();
-        }
         get size() {
             const size = this.getAttribute("size");
             if (size === null) {
-- 
2.20.1