From cdfc614c8b027e2e87801cb36f9f51efa1308dd3 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Tue, 17 Oct 2023 00:00:45 +1100
Subject: [PATCH] chore (cleanup): cleaning things up

---
 public/components/form.js                     | 29 ++++++++---------
 .../ctrl_backend_component_authentication.js  |  3 +-
 public/pages/adminpage/ctrl_log_form.js       | 32 +++++++++++--------
 public/pages/adminpage/ctrl_settings.js       | 32 +++++++++++--------
 public/pages/adminpage/ctrl_setup.js          | 12 ++++---
 public/tsconfig.json                          |  8 +++--
 6 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/public/components/form.js b/public/components/form.js
index 88205d42..bd996f43 100644
--- a/public/components/form.js
+++ b/public/components/form.js
@@ -76,7 +76,7 @@ export function $renderInput(options = {}) {
                     class="component_input"
                 />
             `);
-            if (value !== null) $input.value = value || "";
+            $input.setAttribute("value", value || "");
             attrs.map((setAttribute) => setAttribute($input));
 
             if (!datalist) return $input;
@@ -91,18 +91,14 @@ export function $renderInput(options = {}) {
             $wrapper.appendChild($input);
             $wrapper.appendChild($datalist);
             (props.multi ? multicomplete(value, datalist) : (datalist || [])).forEach((value) => {
-                const $option = createElement("<option />");
-                $option.value = value;
-                $datalist.appendChild($option);
+                $datalist.appendChild(new Option(value));
             });
             if (!props.multi) return $wrapper;
             $input.refresh = () => {
                 const _datalist = $input.getAttribute("datalist").split(",");
                 $datalist.innerHTML = "";
-                multicomplete($input.value, _datalist).forEach((value) => {
-                    const $option = createElement("<option />");
-                    $option.value = value;
-                    $datalist.appendChild($option);
+                multicomplete($input.getAttribute("value"), _datalist).forEach((value) => {
+                    $datalist.appendChild(new Option(value));
                 });
             };
             $input.oninput = (e) => {
@@ -134,7 +130,7 @@ export function $renderInput(options = {}) {
                     class="component_input"
                 />
             `);
-            $input.value = value;
+            $input.setAttribute("value", value);
             attrs.map((setAttribute) => setAttribute($input));
             return $input;
         }
@@ -170,7 +166,7 @@ export function $renderInput(options = {}) {
                     rows="8"
                 ></textarea>
             `);
-            $textarea.value = value;
+            $textarea.setAttribute("value", value);
             attrs.map((setAttribute) => setAttribute($textarea));
             return $textarea;
         }
@@ -182,7 +178,7 @@ export function $renderInput(options = {}) {
                     readonly
                 />
             `);
-            $input.value = value;
+            $input.setAttribute("value", value);
             attrs.map((setAttribute) => setAttribute($input));
             return $input;
         }
@@ -190,7 +186,7 @@ export function $renderInput(options = {}) {
             const $input = createElement(`
                 <input type="hidden" />
             `);
-            $input.value = value;
+            $input.setAttribute("value", value);
             $input.setAttribute("name", path.join("."));
             return $input;
         }
@@ -212,7 +208,7 @@ export function $renderInput(options = {}) {
             const $select = createElement(`
                 <select class="component_select"></select>
             `);
-            $select.value = value || props.default;
+            $select.setAttribute("value", value || props.default);
             attrs.map((setAttribute) => setAttribute($select));
             (options || []).forEach((name) => {
                 const $option = createElement(`
@@ -234,7 +230,7 @@ export function $renderInput(options = {}) {
                     class="component_input"
                 />
             `);
-            $input.value = value;
+            $input.setAttribute("value", value);
             attrs.map((setAttribute) => setAttribute($input));
             return $input;
         }
@@ -245,7 +241,7 @@ export function $renderInput(options = {}) {
                     class="component_input"
                 />
             `);
-            $input.value = value;
+            $input.setAttribute("value", value);
             attrs.map((setAttribute) => setAttribute($input));
             return $input;
         }
@@ -272,8 +268,9 @@ export function $renderInput(options = {}) {
                     readonly
                 />
             `);
-            $input.value = `unknown element type ${type}`;
+            $input.setAttribute("value", `unknown element type ${type}`);
             $input.setAttribute("name", path.join("."));
+            return $input;
         } }
     };
 }
diff --git a/public/pages/adminpage/ctrl_backend_component_authentication.js b/public/pages/adminpage/ctrl_backend_component_authentication.js
index abf9268c..e3f57bba 100644
--- a/public/pages/adminpage/ctrl_backend_component_authentication.js
+++ b/public/pages/adminpage/ctrl_backend_component_authentication.js
@@ -69,12 +69,13 @@ export default async function(render) {
     // feature: setup forms - we insert everything in the DOM so we don't lose
     // transient state when clicking around
     const setupIDPForm$ = getMiddlewareAvailable().pipe(
-        rxjs.combineLatestWith(getAdminConfig().pipe(
+        rxjs.mergeMap((availableSpecs) => getAdminConfig().pipe(
             rxjs.first(),
             rxjs.map((cfg) => ({
                 type: cfg?.middleware?.identity_provider?.type?.value,
                 params: JSON.parse(cfg?.middleware?.identity_provider?.params?.value || "{}"),
             })),
+            rxjs.map((idpState) => [availableSpecs, idpState]),
         )),
         rxjs.concatMap(async([availableSpecs, idpState = {}]) => {
             const { type, params } = idpState;
diff --git a/public/pages/adminpage/ctrl_log_form.js b/public/pages/adminpage/ctrl_log_form.js
index 21c7884f..e96d1bbf 100644
--- a/public/pages/adminpage/ctrl_log_form.js
+++ b/public/pages/adminpage/ctrl_log_form.js
@@ -34,20 +34,24 @@ export default function(render) {
     // feature2: form change
     effect(setup$.pipe(
         useForm$(() => qsa($form, "[name]")),
-        rxjs.combineLatestWith(getAdminConfig().pipe(rxjs.first())),
-        rxjs.map(([formState, formSpec]) => {
-            const fstate = Object.fromEntries(Object.entries(formState).map(([key, value]) => ([
-                key.replace(new RegExp("^params\."), "log."),
-                value,
-            ])));
-            return mutateForm(formSpec, fstate);
-        }),
-        formObjToJSON$(),
-        rxjs.combineLatestWith(getConfig().pipe(rxjs.first())),
-        rxjs.map(([adminConfig, publicConfig]) => {
-            adminConfig["connections"] = publicConfig["connections"];
-            return adminConfig;
-        }),
+        rxjs.mergeMap((formState) => getAdminConfig().pipe(
+            rxjs.first(),
+            rxjs.map((formSpec) => {
+                const fstate = Object.fromEntries(Object.entries(formState).map(([key, value]) => ([
+                    key.replace(new RegExp("^params\."), "log."),
+                    value,
+                ])));
+                return mutateForm(formSpec, fstate);
+            }),
+            formObjToJSON$(),
+        )),
+        rxjs.mergeMap((adminConfig) => getConfig().pipe(
+            rxjs.first(),
+            rxjs.map((publicConfig) => {
+                adminConfig["connections"] = publicConfig["connections"];
+                return adminConfig;
+            }),
+        )),
         saveConfig(),
         rxjs.catchError((err) => {
             notification.error((err && err.message) || t("Oops"));
diff --git a/public/pages/adminpage/ctrl_settings.js b/public/pages/adminpage/ctrl_settings.js
index 4c13817c..ea045704 100644
--- a/public/pages/adminpage/ctrl_settings.js
+++ b/public/pages/adminpage/ctrl_settings.js
@@ -54,8 +54,10 @@ export default AdminHOC(async function(render) {
     // feature: handle form change
     effect(init$.pipe(
         useForm$(() => qsa($container, "[data-bind=\"form\"] [name]")),
-        rxjs.combineLatestWith(config$.pipe(rxjs.first())),
-        rxjs.map(([formState, formSpec]) => mutateForm(formSpec, formState)),
+        rxjs.mergeMap((formState) => config$.pipe(
+            rxjs.first(),
+            rxjs.map((formSpec) => mutateForm(formSpec, formState)),
+        )),
         reshapeConfigBeforeSave,
         saveConfig(),
     ));
@@ -74,15 +76,19 @@ const reshapeConfigBeforeDisplay = rxjs.map((cfg) => {
 // - the middleware info
 // - the connections info
 const reshapeConfigBeforeSave = rxjs.pipe(
-    rxjs.combineLatestWith(getAdminConfig().pipe(rxjs.first())),
-    rxjs.map(([configWithMissingKeys, config]) => {
-        configWithMissingKeys["middleware"] = config["middleware"];
-        return configWithMissingKeys;
-    }),
-    formObjToJSON$(),
-    rxjs.combineLatestWith(getConfig().pipe(rxjs.first())),
-    rxjs.map(([adminConfig, publicConfig]) => {
-        adminConfig["connections"] = publicConfig["connections"];
-        return adminConfig;
-    }),
+    rxjs.mergeMap((configWithMissingKeys) => getAdminConfig().pipe(
+        rxjs.first(),
+        rxjs.map((config) => {
+            configWithMissingKeys["middleware"] = config["middleware"];
+            return configWithMissingKeys;
+        }),
+        formObjToJSON$(),
+    )),
+    rxjs.mergeMap((adminConfig) => getConfig().pipe(
+        rxjs.first(),
+        rxjs.map((publicConfig) => {
+            adminConfig["connections"] = publicConfig["connections"];
+            return adminConfig;
+        }),
+    )),
 );
diff --git a/public/pages/adminpage/ctrl_setup.js b/public/pages/adminpage/ctrl_setup.js
index 2b770c6c..1576667e 100644
--- a/public/pages/adminpage/ctrl_setup.js
+++ b/public/pages/adminpage/ctrl_setup.js
@@ -87,11 +87,13 @@ function componentStep1(render) {
 
 const reshapeConfigBeforeSave = rxjs.pipe(
     formObjToJSON$(),
-    rxjs.combineLatestWith(getConfig().pipe(rxjs.first())),
-    rxjs.map(([config, publicConfig]) => {
-        config["connections"] = publicConfig["connections"];
-        return config;
-    }),
+    rxjs.mergeMap((config) => getConfig().pipe(
+        rxjs.first(),
+        rxjs.map((publicConfig) => {
+            config["connections"] = publicConfig["connections"];
+            return config;
+        }),
+    )),
 );
 
 function componentStep2(render) {
diff --git a/public/tsconfig.json b/public/tsconfig.json
index 7a4aa7c3..96c723e4 100644
--- a/public/tsconfig.json
+++ b/public/tsconfig.json
@@ -7,11 +7,15 @@
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
         "noUncheckedIndexedAccess": true,
-        "lib": ["dom", "es2022"],
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "es2022"
+        ],
         "module": "es2022",
         "target": "es2022",
         "types": []
     },
     "input": ["pages/ctrl_boot.d.ts", "pages/*.js"],
-    "exclude": ["**/*.test.js", "worker/sw_cache.js", "coverage", "jest.setup.js"]
+    "exclude": ["**/*.test.js", "lib/vendor/bcrypt.js", "worker/sw_cache.js", "coverage", "jest.setup.js"]
 }