Update about window implementation.

• Implement *licenses* section in about window.
• Improve about window cleanup on exit (remove listeners etc.)
• Some bug fixes according to the listeners.
• Minior changes in `l10n` class implementation.

sources/assets/translations/pl/web.jsonc

@@ -4,8 +4,21 @@
         "description": "Proszę sprawdzić połączenie z internetem."
     },
     "aboutWindow": {
-        "about": "O aplikacji",
-        "contributors": "Współtwórcy",
-        "licenses": "Licencje"	
+        "about": {
+            "nav": "O aplikacji"
+        },
+        "contributors": {
+            "nav": "Współtwórcy"
+        },
+        "licenses": {
+            "nav": "Licencje",
+            "appLicenseTitle": "Licencja aplikacji",
+            "appLicenseBody": "%s jest wolnym oprogramowaniem: możesz swobodnie modyfikować i rozpowszechniać to oprogramowanie zgodnie z warunkami licencji MIT, która powinna być dostarczona wraz z tym oprogramowaniem.",
+            "showLicense": "Pokaż licencję",
+            "thirdPartyLicensesTitle": "Licencje firm trzecich",
+            "thirdPartyLicensesBody": "%s jest zależny od następującego oprogramowania firm trzecich:",
+            "licensedUnder": "na licencji %s",
+            "packageAuthors": "autorzy %s"
+        }
     }
 }

sources/assets/web/html/about.html

@@ -36,11 +36,14 @@ <h2 id="appVersion"></h2>
             <h1 id="contributorsTitle"><i>Work in progress...</i></h1>
         </article>
         <article id="licenses">
-            Copyright (C) 2020-2021 SpacingBat3 MIT License<br>
-            <i>Work in progress...</i>
+            <h2 id="appLicenseTitle"></h2>
+            <p id="appLicenseBody"></p>
+            <hr>
+            <h2 id="thirdPartyLicensesTitle"></h2>
+            <p id="thirdPartyLicensesBody"></p>
         </article>
     </main>
-    <script>        
+    <script>
         /** @param {string} id */
         function select(id) {
             console.log(id);

sources/code/global/modules/l10n.ts

@@ -38,11 +38,11 @@ langDialog.once('show-error', (localizedStrings: string) => {
 
 class l10n {
 	/** An object containing the localized phrases used by the client (main process). */
-	private loadFile<T extends keyof l10n>(type: T): l10n[T] {
+	private loadFile<T extends keyof typeof this>(type: T): typeof this[T] {
 		/**
 		 * Computed strings (mixed localized and fallback object)
 		 */
-		let finalStrings: l10n[T] | unknown = this[type];
+		let finalStrings: typeof this[T] | unknown = this[type];
 		/**
 		 * Translated strings in the user TranslatedStringsuage.
 		 * 
@@ -76,10 +76,6 @@ class l10n {
 			return this[type];
 		}
 	}
-	constructor() {
-		this.client = this.loadFile('client');
-		this.web = this.loadFile('web');
-	}
 	public client = {
 		/** Tray menu. */
 		tray: {
@@ -268,11 +264,28 @@ class l10n {
 			description: "Please make sure you're connected to the internet."
 		},
 		aboutWindow: {
-			about: "About",
-			contributors: "Contributors",
-			licenses: "Licenses"	
+			about: {
+				nav: "About"
+			},
+			contributors: {
+				nav: "Contributors"
+			},
+			licenses: {
+				nav: "Licenses",
+				appLicenseTitle: "Application license",
+				appLicenseBody: "%s is a free software: you can use, modify and redistribute it under terms of MIT license, which should be distributed with this software.",
+				showLicense: "Show license",
+				thirdPartyLicensesTitle: "Third party licenses",
+				thirdPartyLicensesBody: "%s depends on following third party software:",
+				licensedUnder: "under %s license",
+				packageAuthors: "%s authors"
+			},
 		}
 	};
+	constructor() {
+		this.client = this.loadFile('client');
+		this.web = this.loadFile('web');
+	}
 }
 
 export default l10n;

sources/code/main/windows/about.ts

@@ -2,7 +2,7 @@
 import { app, BrowserWindow, ipcMain as ipc, screen } from 'electron';
 import { getBuildInfo } from '../modules/client';
 import { initWindow } from '../modules/parent';
-//import l10n from '../../modules/l10n';
+//import l10n from '../../global/modules/l10n';
 
 // "About" Panel:
 
@@ -24,14 +24,21 @@ export default function showAboutPanel(parent:BrowserWindow): BrowserWindow|unde
         if(!aboutPanel.isDestroyed()) aboutPanel.close();
     });
     ipc.once("about.readyToShow", () => {
-        if(!aboutPanel.isDestroyed()) aboutPanel.show()
+        if(!aboutPanel.isDestroyed())
+            aboutPanel.show();
     });
     ipc.on("about.getDetails", (event) => {
-        event.reply("about.getDetails", {
-            appName: app.getName(),
-            appVersion: app.getVersion(),
-            buildInfo: getBuildInfo()
-        });
+        if(!aboutPanel.isDestroyed())
+            event.reply("about.getDetails", {
+                appName: app.getName(),
+                appVersion: app.getVersion(),
+                buildInfo: getBuildInfo()
+            });
+    });
+    aboutPanel.once("close", () => {
+        ipc.removeAllListeners("about.getDetails");
+        ipc.removeAllListeners("about.readyToShow");
+        ipc.removeAllListeners("about.close");
     });
     return aboutPanel;
 }

sources/code/renderer/preload/about.ts

@@ -1,16 +1,42 @@
 import { ipcRenderer as ipc } from "electron";
 import { buildInfo, getAppIcon } from "../../global/global";
+import { getAppPath } from "../../global/modules/electron";
+import { resolve } from "path";
 import L10N from "../../global/modules/l10n";
+import { PackageJSON, Person } from "../../global/modules/package";
 /*import { createHash } from "crypto";
 
-export function getGithubAvatarUrl(user:string) {
+function getGithubAvatarUrl(user:string) {
     return "https://github.com/"+user+".png"
 }
 
-export function getGravatarUrl(email:string) {
+function getGravatarUrl(email:string) {
     return "https://gravatar.com/"+createHash("md5").update(email).digest('hex')
 }*/
 
+function generateLicenseContent(l10n:L10N["web"]["aboutWindow"], name:string) {
+    const packageJson = new PackageJSON(["dependencies", "devDependencies"]);
+    for (const id of ["appLicenseTitle","appLicenseBody","thirdPartyLicensesTitle", "thirdPartyLicensesBody"]) {
+        const element = document.getElementById(id)
+        if(element) 
+            element.innerText = l10n.licenses[id as keyof typeof l10n.licenses]
+                .replace("%s",name);
+    }
+    for (const packName in packageJson.data.dependencies) {
+        const {data} = new PackageJSON(
+            ["author", "license"],
+            resolve(getAppPath(), "node_modules/"+packName+"/package.json")
+        )
+        const title = document.createElement("h3");
+        const copy = document.createElement("p");
+        title.innerText = packName;
+        copy.innerText = "© " +
+            new Person(data.author ?? '"'+l10n.licenses.packageAuthors.replace("%s", packName)+'"').name + " " + l10n.licenses.licensedUnder.replace("%s",data.license)
+        document.getElementById("licenses")?.appendChild(title);
+        document.getElementById("licenses")?.appendChild(copy);
+    }
+}
+
 // Continue only on the local sites.
 if(window.location.protocol !== "file:") {
     console.error("If you're seeing this, you probably have just messed something within the application. Congratulations!")
@@ -31,9 +57,10 @@ window.addEventListener("load", () => {
 
 ipc.on("about.getDetails", (_event, details:{appName: string, appVersion: string, buildInfo: buildInfo, responseId: number}) => {
     const l10n = new L10N().web.aboutWindow;
+    // Header sections names
     for(const div of document.querySelectorAll<HTMLDivElement>("nav > div")) {
         const content = div.querySelector<HTMLDivElement>("div.content");
-        if(content) content.innerText = l10n[(div.id.replace("-nav","") as keyof typeof l10n)]
+        if(content) content.innerText = l10n[(div.id.replace("-nav","") as keyof typeof l10n)].nav
     }
     const nameElement = document.getElementById("appName");
     const versionElement = document.getElementById("appVersion");