Places: Fix initialization on reload with authentication enabled

Only offline maps were shown when reloading Places in non-public mode.

frontend/package-lock.json

@@ -2040,9 +2040,9 @@
       "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w=="
     },
     "node_modules/@vvo/tzdb": {
-      "version": "6.28.0",
+      "version": "6.29.0",
-      "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.29.0.tgz",
-      "integrity": "sha512-nRApJUfYIjng1dxGdHekGY7wGtOcTSBze4zijnSIc9YYuD2r0jnlFMmyMLbh8BHSEW6j0PGVg+LR/rRjQOivGw=="
+      "integrity": "sha512-9N7FNfJZ7F38mTS4HeBw9VQqyfKBbU1Zl2SRdSyyKY7HmTtEwuwanRfusi6isdFLmGU63TNvV/lSprJyEeB4Og=="
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
@@ -7064,9 +7064,9 @@
       }
     },
     "node_modules/istanbul-lib-coverage": {
-      "version": "3.0.2",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
-      "integrity": "sha512-o5+eTUYzCJ11/+JhW5/FUCdfsdoYVdQ/8I/OveE2XsjehYn5DdeSnNQAbjYaO8gQ6hvGTN6GM6ddQqpTVG5j8g==",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
       "engines": {
         "node": ">=8"
       }
@@ -7187,9 +7187,9 @@
       }
     },
     "node_modules/jest-worker": {
-      "version": "27.2.5",
+      "version": "27.3.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.0.tgz",
-      "integrity": "sha512-HTjEPZtcNKZ4LnhSp02NEH4vE+5OpJ0EsOWYvGQpHgUMLngydESAAMH5Wd/asPf29+XUDQZszxpLg1BkIIA2aw==",
+      "integrity": "sha512-xTTvvJqOjKBqE1AmwDHiQN8qzp9VoT981LtfXA+XiJVxHn4435vpnrzVcJ6v/ESiuB+IXPjZakn/ppT00xBCWA==",
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -13221,9 +13221,9 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "4.9.0",
+      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
-      "integrity": "sha512-n/jZZBMzVEl4PYIBs+auy2WI0WTQ74EnJDiyD98O2JZY6IVIHJNitkYp/uTXOviIOMfgzrNvC9foKv/8o8KSZw==",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.1.0",
@@ -13236,7 +13236,6 @@
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
         "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
         "webpack-merge": "^5.7.3"
       },
       "bin": {
@@ -14994,9 +14993,9 @@
       "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w=="
     },
     "@vvo/tzdb": {
-      "version": "6.28.0",
+      "version": "6.29.0",
-      "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.29.0.tgz",
-      "integrity": "sha512-nRApJUfYIjng1dxGdHekGY7wGtOcTSBze4zijnSIc9YYuD2r0jnlFMmyMLbh8BHSEW6j0PGVg+LR/rRjQOivGw=="
+      "integrity": "sha512-9N7FNfJZ7F38mTS4HeBw9VQqyfKBbU1Zl2SRdSyyKY7HmTtEwuwanRfusi6isdFLmGU63TNvV/lSprJyEeB4Og=="
     },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
@@ -18700,9 +18699,9 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
     "istanbul-lib-coverage": {
-      "version": "3.0.2",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
-      "integrity": "sha512-o5+eTUYzCJ11/+JhW5/FUCdfsdoYVdQ/8I/OveE2XsjehYn5DdeSnNQAbjYaO8gQ6hvGTN6GM6ddQqpTVG5j8g=="
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw=="
     },
     "istanbul-lib-instrument": {
       "version": "5.0.4",
@@ -18791,9 +18790,9 @@
       }
     },
     "jest-worker": {
-      "version": "27.2.5",
+      "version": "27.3.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.0.tgz",
-      "integrity": "sha512-HTjEPZtcNKZ4LnhSp02NEH4vE+5OpJ0EsOWYvGQpHgUMLngydESAAMH5Wd/asPf29+XUDQZszxpLg1BkIIA2aw==",
+      "integrity": "sha512-xTTvvJqOjKBqE1AmwDHiQN8qzp9VoT981LtfXA+XiJVxHn4435vpnrzVcJ6v/ESiuB+IXPjZakn/ppT00xBCWA==",
       "requires": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -23316,9 +23315,9 @@
       }
     },
     "webpack-cli": {
-      "version": "4.9.0",
+      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
-      "integrity": "sha512-n/jZZBMzVEl4PYIBs+auy2WI0WTQ74EnJDiyD98O2JZY6IVIHJNitkYp/uTXOviIOMfgzrNvC9foKv/8o8KSZw==",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.1.0",
@@ -23331,7 +23330,6 @@
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
         "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
         "webpack-merge": "^5.7.3"
       },
       "dependencies": {

frontend/src/locales/translations.pot

@@ -330,7 +330,7 @@ msgstr ""
 msgid "Aspect Ratio"
 msgstr ""
 
-#: src/pages/settings/account.vue:82
+#: src/pages/settings/account.vue:81
 msgid "At least 6 characters."
 msgstr ""
 
@@ -584,7 +584,7 @@ msgstr ""
 msgid "Cubic: Moderate Quality, Good Performance"
 msgstr ""
 
-#: src/pages/settings/account.vue:56
+#: src/pages/settings/account.vue:55
 msgid "Current Password"
 msgstr ""
 
@@ -1503,7 +1503,7 @@ msgstr ""
 msgid "New"
 msgstr ""
 
-#: src/pages/settings/account.vue:78
+#: src/pages/settings/account.vue:77
 msgid "New Password"
 msgstr ""
 
@@ -1814,7 +1814,7 @@ msgstr ""
 msgid "Play"
 msgstr ""
 
-#: src/pages/settings/account.vue:105
+#: src/pages/settings/account.vue:104
 msgid "Please confirm your new password."
 msgstr ""
 
@@ -2023,7 +2023,7 @@ msgstr ""
 msgid "Restore"
 msgstr ""
 
-#: src/pages/settings/account.vue:101
+#: src/pages/settings/account.vue:100
 msgid "Retype Password"
 msgstr ""
 

frontend/src/pages/places.vue

@@ -32,145 +32,22 @@ import Thumb from "model/thumb";
 export default {
   name: 'PPagePlaces',
   data() {
-    const s = this.$config.values.settings.maps;
-    const filter = {
-      q: this.query(),
-    };
-
-    let mapKey = "";
-
-    if (this.$config.has("mapKey")) {
-      mapKey = this.$config.get("mapKey");
-    }
-
-    const settings = this.$config.settings();
-
-    if (settings && settings.features.private) {
-      filter.public = true;
-    }
-
-    if (settings && settings.features.review && (!this.staticFilter || !("quality" in this.staticFilter))) {
-      filter.quality = 3;
-    }
-
-    let mapFont = ['Roboto', 'sans-serif'];
-    let mapOptions = {
-      container: "map",
-      style: "https://api.maptiler.com/maps/" + s.style + "/style.json?key=" + mapKey,
-      attributionControl: true,
-      customAttribution: this.attribution,
-      zoom: 0,
-    };
-
-    if (!mapKey || s.style === "offline") {
-      mapFont = ["Open Sans Semibold"];
-      mapOptions = {
-        container: "map",
-        style: {
-          "version": 8,
-          "sources": {
-            "world": {
-              "type": "geojson",
-              "data": `${this.$config.staticUri}/geo/world.json`,
-              "maxzoom": 6
-            }
-          },
-          "glyphs": `${this.$config.staticUri}/font/{fontstack}/{range}.pbf`,
-          "layers": [
-            {
-              "id": "background",
-              "type": "background",
-              "paint": {
-                "background-color": "#aadafe"
-              }
-            },
-            {
-              id: "land",
-              type: "fill",
-              source: "world",
-              // "source-layer": "land",
-              paint: {
-                "fill-color": "#cbe5ca",
-              },
-            },
-            {
-              "id": "country-abbrev",
-              "type": "symbol",
-              "source": "world",
-              "maxzoom": 3,
-              "layout": {
-                "text-field": "{abbrev}",
-                "text-font": ["Open Sans Semibold"],
-                "text-transform": "uppercase",
-                "text-max-width": 20,
-                "text-size": {
-                  "stops": [[3, 10], [4, 11], [5, 12], [6, 16]]
-                },
-                "text-letter-spacing": {
-                  "stops": [[4, 0], [5, 1], [6, 2]]
-                },
-                "text-line-height": {
-                  "stops": [[5, 1.2], [6, 2]]
-                }
-              },
-              "paint": {
-                "text-halo-color": "#fff",
-                "text-halo-width": 1
-              },
-            },
-            {
-              "id": "country-border",
-              "type": "line",
-              "source": "world",
-              "paint": {
-                "line-color": "#226688",
-                "line-opacity": 0.25,
-                "line-dasharray": [6, 2, 2, 2],
-                "line-width": 1.2
-              }
-            },
-            {
-              "id": "country-name",
-              "type": "symbol",
-              "minzoom": 3,
-              "source": "world",
-              "layout": {
-                "text-field": "{name}",
-                "text-font": ["Open Sans Semibold"],
-                "text-max-width": 20,
-                "text-size": {
-                  "stops": [[3, 10], [4, 11], [5, 12], [6, 16]]
-                }
-              },
-              "paint": {
-                "text-halo-color": "#fff",
-                "text-halo-width": 1
-              },
-            },
-          ],
-        },
-        attributionControl: true,
-        customAttribution: this.attribution,
-        zoom: 0,
-      };
-    }
-
     return {
       initialized: false,
       map: null,
       markers: {},
       markersOnScreen: {},
       loading: false,
-      url: 'https://api.maptiler.com/maps/' + s.style + '/{z}/{x}/{y}.png?key=' + mapKey,
+      url: "",
       attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
-      options: mapOptions,
+      options: {},
-      mapFont: mapFont,
+      mapFont: [],
       photos: [],
       result: {},
-      filter: filter,
+      filter: {q: this.query()},
       lastFilter: {},
       config: this.$config.values,
-      settings: s,
+      settings: this.$config.values.settings.maps,
     };
   },
   watch: {
@@ -182,12 +59,144 @@ export default {
   },
   mounted() {
     this.$scrollbar.hide();
-    this.renderMap();
+    this.configureMap().then(() => this.renderMap());
   },
   destroyed() {
     this.$scrollbar.show();
   },
   methods: {
+    configureMap() {
+      return this.$config.load().finally(() => {
+        const s = this.$config.values.settings.maps;
+        const filter = {
+          q: this.query(),
+        };
+
+        let mapKey = "";
+
+        if (this.$config.has("mapKey")) {
+          mapKey = this.$config.get("mapKey");
+        }
+
+        const settings = this.$config.settings();
+
+        if (settings && settings.features.private) {
+          filter.public = true;
+        }
+
+        if (settings && settings.features.review && (!this.staticFilter || !("quality" in this.staticFilter))) {
+          filter.quality = 3;
+        }
+
+        let mapFont = ['Roboto', 'sans-serif'];
+
+        let mapOptions = {
+          container: "map",
+          style: "https://api.maptiler.com/maps/" + s.style + "/style.json?key=" + mapKey,
+          attributionControl: true,
+          customAttribution: this.attribution,
+          zoom: 0,
+        };
+
+        if (!mapKey || s.style === "offline") {
+          mapFont = ["Open Sans Semibold"];
+          mapOptions = {
+            container: "map",
+            style: {
+              "version": 8,
+              "sources": {
+                "world": {
+                  "type": "geojson",
+                  "data": `${this.$config.staticUri}/geo/world.json`,
+                  "maxzoom": 6
+                }
+              },
+              "glyphs": `${this.$config.staticUri}/font/{fontstack}/{range}.pbf`,
+              "layers": [
+                {
+                  "id": "background",
+                  "type": "background",
+                  "paint": {
+                    "background-color": "#aadafe"
+                  }
+                },
+                {
+                  id: "land",
+                  type: "fill",
+                  source: "world",
+                  // "source-layer": "land",
+                  paint: {
+                    "fill-color": "#cbe5ca",
+                  },
+                },
+                {
+                  "id": "country-abbrev",
+                  "type": "symbol",
+                  "source": "world",
+                  "maxzoom": 3,
+                  "layout": {
+                    "text-field": "{abbrev}",
+                    "text-font": ["Open Sans Semibold"],
+                    "text-transform": "uppercase",
+                    "text-max-width": 20,
+                    "text-size": {
+                      "stops": [[3, 10], [4, 11], [5, 12], [6, 16]]
+                    },
+                    "text-letter-spacing": {
+                      "stops": [[4, 0], [5, 1], [6, 2]]
+                    },
+                    "text-line-height": {
+                      "stops": [[5, 1.2], [6, 2]]
+                    }
+                  },
+                  "paint": {
+                    "text-halo-color": "#fff",
+                    "text-halo-width": 1
+                  },
+                },
+                {
+                  "id": "country-border",
+                  "type": "line",
+                  "source": "world",
+                  "paint": {
+                    "line-color": "#226688",
+                    "line-opacity": 0.25,
+                    "line-dasharray": [6, 2, 2, 2],
+                    "line-width": 1.2
+                  }
+                },
+                {
+                  "id": "country-name",
+                  "type": "symbol",
+                  "minzoom": 3,
+                  "source": "world",
+                  "layout": {
+                    "text-field": "{name}",
+                    "text-font": ["Open Sans Semibold"],
+                    "text-max-width": 20,
+                    "text-size": {
+                      "stops": [[3, 10], [4, 11], [5, 12], [6, 16]]
+                    }
+                  },
+                  "paint": {
+                    "text-halo-color": "#fff",
+                    "text-halo-width": 1
+                  },
+                },
+              ],
+            },
+            attributionControl: true,
+            customAttribution: this.attribution,
+            zoom: 0,
+          };
+        }
+
+        this.filter = filter;
+        this.url = 'https://api.maptiler.com/maps/' + s.style + '/{z}/{x}/{y}.png?key=' + mapKey;
+        this.options = mapOptions;
+        this.mapFont = mapFont;
+      });
+    },
     query: function () {
       return this.$route.params.q ? this.$route.params.q : "";
     },