From 2d3f465d689a81d953aafc1823d8c7c4c200405f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20M=C3=A9sz=C3=A1ros=2C=20Ph=2ED?=
 <goteguru@users.noreply.github.com>
Date: Tue, 7 Sep 2021 22:36:09 +0200
Subject: [PATCH 1/7] Cloud support / Dropbox OAuth reference client (#659)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* bioms shouldn't be masked or the style selection box is useless
* fix: misleading comment
* Fix: calculating absolute flux from precipitation normal-value.
* Fix: River automatic rerender on regeneration.
* Dropbox OAuth implementation and Cloud framework
* add some space
* removing unnecessary logs, defer script load

Created by: Mészáros Gergely <monk@geotronic.hu>
---
 dropbox.html          |  46 ++++++++++++++
 index.html            |  32 +++++-----
 modules/cloud.js      | 141 ++++++++++++++++++++++++++++++++++++++++++
 modules/load.js       |  38 +++++++++---
 modules/save.js       |  41 +++---------
 modules/ui/options.js |  15 ++++-
 6 files changed, 256 insertions(+), 57 deletions(-)
 create mode 100644 dropbox.html
 create mode 100644 modules/cloud.js
diff --git a/dropbox.html b/dropbox.html
new file mode 100644
index 00000000..64d578e7
--- /dev/null
+++ b/dropbox.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="https://unpkg.com/dropbox@10.8.0/dist/Dropbox-sdk.min.js"></script>
+    <title>FMG Dropbox Auth</title>
+  </head>
+  <body>
+    <script>
+      /*
+        open this page in a new window without query parameter to start auth
+        window.opener.setDropBoxToken(token) will be called on the opener
+        window.
+      */
+      const REDIRECT_URI = window.location.origin + window.location.pathname;
+      const dbxAuth = new Dropbox.DropboxAuth({ clientId: 'sp7tzwm27u2w5ns', });
+
+      const spObj = new URLSearchParams(window.location.search);
+      const searchParams = Object.fromEntries(spObj.entries())
+
+      if (searchParams.code) getToken()
+      else doAuth(); // start authentication
+
+      function doAuth() {
+        dbxAuth.getAuthenticationUrl(REDIRECT_URI, undefined, 'code', 'offline', undefined, undefined, true)
+        .then(authUrl => {
+            window.sessionStorage.clear();
+            window.sessionStorage.setItem("codeVerifier", dbxAuth.codeVerifier);
+            window.location.href = authUrl;
+        })
+        .catch((error) => console.error(error));
+      };
+
+      function getToken() {
+        dbxAuth.setCodeVerifier(window.sessionStorage.getItem('codeVerifier'));
+        dbxAuth.getAccessTokenFromCode(REDIRECT_URI, searchParams.code)
+        .then((resp) => {
+            const token = resp.result.access_token;
+            window.opener.Cloud.providers.dropbox.setDropBoxToken(token)
+        }).catch((error) => {
+            console.error(error)
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
index 1773ba6c..43eb39d7 100644
--- a/index.html
+++ b/index.html
@@ -1995,7 +1995,7 @@
 
           <div data-tip="Burg mean annual temperature and real-world city for comparison">
             <div class="label">Temperature:</div>
-            <span id="burgTemperature"></span>, like in 
+            <span id="burgTemperature"></span>, like in
             <span id="burgTemperatureLikeIn"></span>
           </div>
 
@@ -3490,26 +3490,29 @@
         <button onclick="quickSave()" data-tip="Save the project to browser storage (quick save). It can be unreliable. Shortcut: F6">browser</button>
       </div>
       <p style="font-style: italic">Maps are saved in <i>.map</i> format, that can be loaded back via 'Load' in menu. Please keep noted that we do not keep any data on our side. There is no way to restore the progress if .map file is lost. Please keep old .map files on your machine or cloud storage as backups.</p>
-      <p style="font-style: italic">Saving to Dropbox may not be allowed for big files. In this case open <a href="https://www.dropbox.com/home/FMG" target="_blank">Dropbox</a>, download the .map file and upload it manually.</p>
-
-      <div style="margin-top: .3em" data-tip="Select .map file on dropbox and share a sharable link">
-        <strong>Create sharable link</strong>
-        <button onclick="createSharableDropboxLink()">select file</button>
-        <div id="sharableLinkContainer" style="display: none">
-          <a id="sharableLink" target="_blank"></a>
-          <i data-tip="Copy link to the clipboard" onclick="copyLinkToClickboard()" class="icon-clone pointer"></i>
-        </div>
-      </div>
     </div>
 
     <div id="loadMapData" style="display: none" class="dialog">
       <div style="margin-bottom: .3em">Load map from</div>
       <div>
         <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
-        <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Dropbox</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>
+      <div id="loadFromDropbox">
+        <p>From your Dropbox account:</p>
+        <select style="margin-bottom:.3em">
+        </select>
+        <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
+        <button onclick="createSharableDropboxLink()" data-tip="Select .map file on dropbox and share a sharable link">Create link</button>
+
+        <div style="margin-top: .3em">
+          <div id="sharableLinkContainer" style="display: none">
+            <a id="sharableLink" target="_blank"></a>
+            <i data-tip="Copy link to the clipboard" onclick="copyLinkToClickboard()" class="icon-clone pointer"></i>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div id="saveTilesScreen" style="display: none" class="dialog">
@@ -3527,7 +3530,7 @@
       <div data-tip="Image scale relative to image size (e.g. 5x)" style="margin-bottom: .3em">
         <div class="label">Scale:</div>
         <input id="tileScaleInput" data-stored="tileScale" type="range" min=1 max=4 value=1 style="width: 11em">
-        <input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1 
+        <input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1
         >
       </div>
       <div data-tip="Calculated size of image if combined" style="margin-bottom: .3em">
@@ -4250,11 +4253,13 @@
   <script src="modules/ui/layers.js"></script>
   <script src="modules/ui/measurers.js"></script>
 
+  <script defer src="https://unpkg.com/dropbox@10.8.0/dist/Dropbox-sdk.min.js"></script>
   <script defer src="modules/ui/general.js"></script>
   <script defer src="modules/ui/options.js"></script>
   <script defer src="modules/ui/style.js"></script>
   <script defer src="modules/save.js"></script>
   <script defer src="modules/load.js"></script>
+  <script defer src="modules/cloud.js"></script>
   <script defer src="main.js"></script>
   <script defer src="modules/relief-icons.js"></script>
   <script defer src="modules/ui/tools.js"></script>
@@ -4295,6 +4300,5 @@
   <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
   <script defer src="libs/pell.min.js"></script>
   <script defer src="libs/jszip.min.js"></script>
-  <script defer src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="pdr9ae64ip0qno4"></script>
 </body>
 </html>
diff --git a/modules/cloud.js b/modules/cloud.js
new file mode 100644
index 00000000..2a7d8e91
--- /dev/null
+++ b/modules/cloud.js
@@ -0,0 +1,141 @@
+"use strict";
+
+/*
+Cloud provider implementations (Dropbox only as now)
+
+provider Interface:
+
+name: name of the provider
+async auth(): authenticate and get access tokens from provider
+async save(filename): save map file to provider as filename
+async load(filename): load filename from provider
+async list(): list available filenames at provider
+async getLink(filePath): get shareable link for file
+restore(): restore access tokens from storage if possible
+
+*/
+
+window.Cloud = (function () {
+
+  // helpers to use in providers for token handling
+  const lSKey = x => `auth-${x}`
+  const setToken = (prov, key) => localStorage.setItem(lSKey(prov), key)
+  const getToken = prov => localStorage.getItem(lSKey(prov))
+
+  /**********************************************************/
+  /* Dropbox provider                                       */
+  /**********************************************************/
+
+  const DBP = {
+    name: 'dropbox',
+    clientId: 'sp7tzwm27u2w5ns',
+    authWindow: undefined,
+    token: null, // Access token
+    api: null,
+
+    restore() {
+      this.token = getToken(this.name)
+      if (this.token) this.connect(this.token)
+    },
+
+    async call(name, param) {
+      try {
+        return await this.api[name](param)
+      } catch (e) {
+        if (e.name !== "DropboxResponseError") throw(e)
+        // retry with auth
+        await this.auth()
+        return await this.api[name](param)
+      }
+    },
+
+    connect(token) {
+      const clientId = this.clientId
+      const auth = new Dropbox.DropboxAuth({ clientId })
+      auth.setAccessToken(token)
+      this.api = new Dropbox.Dropbox({ auth })
+    },
+
+    async save(fileName, contents) {
+      if (!this.api) await this.auth()
+      const resp = this.call('filesUpload', { path: '/' + fileName, contents })
+      console.log("Dropbox response:", resp)
+      return true
+    },
+
+    async load(path) {
+      if (!this.api) await this.auth()
+      const resp = await this.call('filesDownload', { path })
+      const blob = resp.result.fileBlob
+      if (!blob) throw(new Error('Invalid response from dropbox.'))
+      return blob
+    },
+
+    async list() {
+      if (!this.api) return null
+      const resp = await this.call('filesListFolder', { path: '' })
+      return resp.result.entries.map(e => ({ name: e.name, path: e.path_lower }))
+    },
+
+    auth() {
+        const url = window.location.origin + window.location.pathname + 'dropbox.html'
+        this.authWindow = window.open(url, 'auth', 'width=640,height=480')
+        // child window expected to call
+        // window.opener.Cloud.providers.dropbox.setDropBoxToken (see below)
+        return new Promise((resolve, reject) => {
+          const watchDog = () => {
+            this.authWindow.close()
+            reject(new Error("Timeout. No auth for dropbox."))
+          }
+          setTimeout(watchDog, 120*1000)
+          window.addEventListener('dropboxauth', e => {
+            clearTimeout(watchDog)
+            resolve()
+          })
+        })
+    },
+
+    // Callback function for auth window.
+    setDropBoxToken(token) {
+      console.log('Access token got:', token)
+      setToken(this.name, token)
+      this.connect(token)
+      this.authWindow.close()
+      window.dispatchEvent(new Event('dropboxauth'))
+    },
+
+    async getLink(path) {
+      if (!this.api) await this.auth()
+      let resp
+
+      // already exists?
+      resp = await this.call('sharingListSharedLinks', { path })
+      if (resp.result.links.length)
+        return resp.result.links[0].url
+
+      // create new
+      resp = await this.call('sharingCreateSharedLinkWithSettings', {
+        path,
+        settings: {
+          require_password: false,
+          audience: 'public',
+          access: 'viewer',
+          requested_visibility: 'public',
+          allow_download: true,
+        }
+      })
+      console.log("dropbox link object:", resp.result)
+      return resp.result.url
+    },
+  }
+
+  // register providers here:
+  const providers = {
+    dropbox: DBP,
+  }
+
+  // restore all providers at startup
+  for (const p of Object.values(providers)) p.restore()
+
+  return { providers }
+})()
diff --git a/modules/load.js b/modules/load.js
index 7633b833..bccc8020 100644
--- a/modules/load.js
+++ b/modules/load.js
@@ -12,16 +12,34 @@ function quickLoad() {
   });
 }
 
-function loadFromDropbox() {
-  const options = {
-    success: function (files) {
-      const url = files[0].link;
-      loadMapFromURL(url);
-    },
-    linkType: "direct",
-    extensions: [".map"]
-  };
-  Dropbox.choose(options);
+async function loadFromDropbox(fileName) {
+  const map = document.querySelector("#loadFromDropbox select").value;
+  console.log('loading dropbox map', map);
+  const blob = await Cloud.providers.dropbox.load(map);
+  uploadMap(blob);
+}
+
+async function createSharableDropboxLink() {
+  const mapFile = document.querySelector("#loadFromDropbox select").value;
+  const sharableLink = document.getElementById("sharableLink");
+  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
+  let url
+  try {
+    url = await Cloud.providers.dropbox.getLink(mapFile);
+  } catch {
+    tip("Dropbox API error. Can not create link.", true, "error", 2000);
+    return
+  }
+
+  const fmg = window.location.href.split("?")[0];
+  const reallink= `${fmg}?maplink=${url}`;
+  // voodoo magic required by the yellow god of CORS
+  const link = reallink.replace('www.dropbox.com/s/', 'dl.dropboxusercontent.com/1/view/')
+  const shortLink = link.slice(0, 50) + "...";
+
+  sharableLinkContainer.style.display = "block";
+  sharableLink.innerText = shortLink;
+  sharableLink.setAttribute("href", link);
 }
 
 function loadMapPrompt(blob) {
diff --git a/modules/save.js b/modules/save.js
index 52f13fef..80f7ac76 100644
--- a/modules/save.js
+++ b/modules/save.js
@@ -435,42 +435,19 @@ function dowloadMap() {
   window.URL.revokeObjectURL(URL);
 }
 
-function saveToDropbox() {
+async function saveToDropbox() {
+  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
   if (customization) return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
   closeDialogs("#alert");
-
   const mapData = getMapData();
-  const URL = "data:text/plain; base64," + btoa(encodeURIComponent(mapData));
   const filename = getFileName() + ".map";
-  const options = {
-    success: () => tip("Map is saved to your Dropbox", true, "success", 8000),
-    error: function (errorMessage) {
-      tip("Cannot save .map to your Dropbox", true, "error", 8000);
-      console.error(errorMessage);
-    }
-  };
-  Dropbox.save(URL, filename, options);
-}
-
-function createSharableDropboxLink() {
-  const sharableLink = document.getElementById("sharableLink");
-  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
-
-  const options = {
-    success: function (files) {
-      const url = files[0].link;
-      const fmg = window.location.href.split("?")[0];
-      const link = `${fmg}/?maplink=${url}`;
-      const shortLink = link.slice(0, 50) + "...";
-
-      sharableLinkContainer.style.display = "block";
-      sharableLink.innerText = shortLink;
-      sharableLink.setAttribute("href", link);
-    },
-    linkType: "direct",
-    extensions: [".map"]
-  };
-  Dropbox.choose(options);
+  try {
+    await Cloud.providers.dropbox.save(filename, mapData);
+    tip("Map is saved to your Dropbox", true, "success", 8000);
+  } catch (msg) {
+    console.error(msg);
+    tip("Cannot save .map to your Dropbox", true, "error", 8000);
+  }
 }
 
 function saveGeoJSON_Cells() {
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 5012c63b..85925b85 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -695,7 +695,7 @@ function showExportPane() {
   });
 }
 
-function showLoadPane() {
+async function showLoadPane() {
   $("#loadMapData").dialog({
     title: "Load map",
     resizable: false,
@@ -707,6 +707,19 @@ function showLoadPane() {
       }
     }
   });
+
+  const dpx = document.getElementById("loadFromDropbox");
+  const dpf = dpx.querySelector("select");
+  const files = await Cloud.providers.dropbox.list();
+  dpx.style.display = files? "block" : "none";
+  if (!files) return;
+  while(dpf.firstChild) dpf.removeChild(dpf.firstChild);
+  files.forEach(f => {
+    const opt = document.createElement('option');
+    opt.innerText = f.name;
+    opt.value = f.path;
+    dpf.appendChild(opt);
+  });
 }
 
 function loadURL() {

From 1290c0fea951560a8c6b599723d090941b93b8ad Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 09:51:36 +0300
Subject: [PATCH 2/7] change Fropbox clientId

---
 dropbox.html | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/dropbox.html b/dropbox.html
index 64d578e7..bc7f1945 100644
--- a/dropbox.html
+++ b/dropbox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <script type="text/javascript" src="https://unpkg.com/dropbox@10.8.0/dist/Dropbox-sdk.min.js"></script>
     <title>FMG Dropbox Auth</title>
   </head>
@@ -13,33 +13,36 @@
         window.
       */
       const REDIRECT_URI = window.location.origin + window.location.pathname;
-      const dbxAuth = new Dropbox.DropboxAuth({ clientId: 'sp7tzwm27u2w5ns', });
+      const dbxAuth = new Dropbox.DropboxAuth({clientId: "pdr9ae64ip0qno4"});
 
       const spObj = new URLSearchParams(window.location.search);
-      const searchParams = Object.fromEntries(spObj.entries())
+      const searchParams = Object.fromEntries(spObj.entries());
 
-      if (searchParams.code) getToken()
+      if (searchParams.code) getToken();
       else doAuth(); // start authentication
 
       function doAuth() {
-        dbxAuth.getAuthenticationUrl(REDIRECT_URI, undefined, 'code', 'offline', undefined, undefined, true)
-        .then(authUrl => {
+        dbxAuth
+          .getAuthenticationUrl(REDIRECT_URI, undefined, "code", "offline", undefined, undefined, true)
+          .then(authUrl => {
             window.sessionStorage.clear();
             window.sessionStorage.setItem("codeVerifier", dbxAuth.codeVerifier);
             window.location.href = authUrl;
-        })
-        .catch((error) => console.error(error));
-      };
+          })
+          .catch(error => console.error(error));
+      }
 
       function getToken() {
-        dbxAuth.setCodeVerifier(window.sessionStorage.getItem('codeVerifier'));
-        dbxAuth.getAccessTokenFromCode(REDIRECT_URI, searchParams.code)
-        .then((resp) => {
+        dbxAuth.setCodeVerifier(window.sessionStorage.getItem("codeVerifier"));
+        dbxAuth
+          .getAccessTokenFromCode(REDIRECT_URI, searchParams.code)
+          .then(resp => {
             const token = resp.result.access_token;
-            window.opener.Cloud.providers.dropbox.setDropBoxToken(token)
-        }).catch((error) => {
-            console.error(error)
-        });
+            window.opener.Cloud.providers.dropbox.setDropBoxToken(token);
+          })
+          .catch(error => {
+            console.error(error);
+          });
       }
     </script>
   </body>

From d19899f0fc9e03022a1880c77c15101b5724025c Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 09:55:54 +0300
Subject: [PATCH 3/7] change Fropbox clientId

---
 modules/cloud.js | 134 +++++++++++++++++++++++------------------------
 1 file changed, 66 insertions(+), 68 deletions(-)

diff --git a/modules/cloud.js b/modules/cloud.js
index 2a7d8e91..08771af0 100644
--- a/modules/cloud.js
+++ b/modules/cloud.js
@@ -16,126 +16,124 @@ restore(): restore access tokens from storage if possible
 */
 
 window.Cloud = (function () {
-
   // helpers to use in providers for token handling
-  const lSKey = x => `auth-${x}`
-  const setToken = (prov, key) => localStorage.setItem(lSKey(prov), key)
-  const getToken = prov => localStorage.getItem(lSKey(prov))
+  const lSKey = x => `auth-${x}`;
+  const setToken = (prov, key) => localStorage.setItem(lSKey(prov), key);
+  const getToken = prov => localStorage.getItem(lSKey(prov));
 
   /**********************************************************/
   /* Dropbox provider                                       */
   /**********************************************************/
 
   const DBP = {
-    name: 'dropbox',
-    clientId: 'sp7tzwm27u2w5ns',
+    name: "dropbox",
+    clientId: "pdr9ae64ip0qno4",
     authWindow: undefined,
     token: null, // Access token
     api: null,
 
     restore() {
-      this.token = getToken(this.name)
-      if (this.token) this.connect(this.token)
+      this.token = getToken(this.name);
+      if (this.token) this.connect(this.token);
     },
 
     async call(name, param) {
       try {
-        return await this.api[name](param)
+        return await this.api[name](param);
       } catch (e) {
-        if (e.name !== "DropboxResponseError") throw(e)
+        if (e.name !== "DropboxResponseError") throw e;
         // retry with auth
-        await this.auth()
-        return await this.api[name](param)
+        await this.auth();
+        return await this.api[name](param);
       }
     },
 
     connect(token) {
-      const clientId = this.clientId
-      const auth = new Dropbox.DropboxAuth({ clientId })
-      auth.setAccessToken(token)
-      this.api = new Dropbox.Dropbox({ auth })
+      const clientId = this.clientId;
+      const auth = new Dropbox.DropboxAuth({clientId});
+      auth.setAccessToken(token);
+      this.api = new Dropbox.Dropbox({auth});
     },
 
     async save(fileName, contents) {
-      if (!this.api) await this.auth()
-      const resp = this.call('filesUpload', { path: '/' + fileName, contents })
-      console.log("Dropbox response:", resp)
-      return true
+      if (!this.api) await this.auth();
+      const resp = this.call("filesUpload", {path: "/" + fileName, contents});
+      console.log("Dropbox response:", resp);
+      return true;
     },
 
     async load(path) {
-      if (!this.api) await this.auth()
-      const resp = await this.call('filesDownload', { path })
-      const blob = resp.result.fileBlob
-      if (!blob) throw(new Error('Invalid response from dropbox.'))
-      return blob
+      if (!this.api) await this.auth();
+      const resp = await this.call("filesDownload", {path});
+      const blob = resp.result.fileBlob;
+      if (!blob) throw new Error("Invalid response from dropbox.");
+      return blob;
     },
 
     async list() {
-      if (!this.api) return null
-      const resp = await this.call('filesListFolder', { path: '' })
-      return resp.result.entries.map(e => ({ name: e.name, path: e.path_lower }))
+      if (!this.api) return null;
+      const resp = await this.call("filesListFolder", {path: ""});
+      return resp.result.entries.map(e => ({name: e.name, path: e.path_lower}));
     },
 
     auth() {
-        const url = window.location.origin + window.location.pathname + 'dropbox.html'
-        this.authWindow = window.open(url, 'auth', 'width=640,height=480')
-        // child window expected to call
-        // window.opener.Cloud.providers.dropbox.setDropBoxToken (see below)
-        return new Promise((resolve, reject) => {
-          const watchDog = () => {
-            this.authWindow.close()
-            reject(new Error("Timeout. No auth for dropbox."))
-          }
-          setTimeout(watchDog, 120*1000)
-          window.addEventListener('dropboxauth', e => {
-            clearTimeout(watchDog)
-            resolve()
-          })
-        })
+      const url = window.location.origin + window.location.pathname + "dropbox.html";
+      this.authWindow = window.open(url, "auth", "width=640,height=480");
+      // child window expected to call
+      // window.opener.Cloud.providers.dropbox.setDropBoxToken (see below)
+      return new Promise((resolve, reject) => {
+        const watchDog = () => {
+          this.authWindow.close();
+          reject(new Error("Timeout. No auth for dropbox."));
+        };
+        setTimeout(watchDog, 120 * 1000);
+        window.addEventListener("dropboxauth", e => {
+          clearTimeout(watchDog);
+          resolve();
+        });
+      });
     },
 
     // Callback function for auth window.
     setDropBoxToken(token) {
-      console.log('Access token got:', token)
-      setToken(this.name, token)
-      this.connect(token)
-      this.authWindow.close()
-      window.dispatchEvent(new Event('dropboxauth'))
+      console.log("Access token got:", token);
+      setToken(this.name, token);
+      this.connect(token);
+      this.authWindow.close();
+      window.dispatchEvent(new Event("dropboxauth"));
     },
 
     async getLink(path) {
-      if (!this.api) await this.auth()
-      let resp
+      if (!this.api) await this.auth();
+      let resp;
 
       // already exists?
-      resp = await this.call('sharingListSharedLinks', { path })
-      if (resp.result.links.length)
-        return resp.result.links[0].url
+      resp = await this.call("sharingListSharedLinks", {path});
+      if (resp.result.links.length) return resp.result.links[0].url;
 
       // create new
-      resp = await this.call('sharingCreateSharedLinkWithSettings', {
+      resp = await this.call("sharingCreateSharedLinkWithSettings", {
         path,
         settings: {
           require_password: false,
-          audience: 'public',
-          access: 'viewer',
-          requested_visibility: 'public',
-          allow_download: true,
+          audience: "public",
+          access: "viewer",
+          requested_visibility: "public",
+          allow_download: true
         }
-      })
-      console.log("dropbox link object:", resp.result)
-      return resp.result.url
-    },
-  }
+      });
+      console.log("dropbox link object:", resp.result);
+      return resp.result.url;
+    }
+  };
 
   // register providers here:
   const providers = {
-    dropbox: DBP,
-  }
+    dropbox: DBP
+  };
 
   // restore all providers at startup
-  for (const p of Object.values(providers)) p.restore()
+  for (const p of Object.values(providers)) p.restore();
 
-  return { providers }
-})()
+  return {providers};
+})();

From 9adfe708502b02f41036c8b406b60da094580ed8 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 17:30:32 +0300
Subject: [PATCH 4/7] fix fonts load error and reword save dialog text

---
 index.html            | 25 +++++++++++--------------
 modules/fonts.js      |  2 +-
 modules/load.js       | 15 ++++++++-------
 modules/ui/options.js |  8 ++++----
 4 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 43eb39d7..f51f32e3 100644
--- a/index.html
+++ b/index.html
@@ -3442,7 +3442,7 @@
       <div id="options3dBottom" style="margin-top: .2em">
         <button id="options3dUpdate" data-tip="Update the scene" class="icon-cw"></button>
         <button data-tip="Configure world and map size and climate settings" onclick="editWorld()" class="icon-globe"></button>
-		<button id="options3dSave" data-tip="Save screenshot of the 3d scene" class="icon-button-screenshot"></button>
+        <button id="options3dSave" data-tip="Save screenshot of the 3d scene" class="icon-button-screenshot"></button>
         <button id="options3dOBJSave" data-tip="Save OBJ file of the 3d scene" class="icon-download"></button>
       </div>
     </div>
@@ -3475,11 +3475,9 @@
         <button onclick="saveGeoJSON_Rivers()" data-tip="Download rivers data in GeoJSON format">rivers</button>
         <button onclick="saveGeoJSON_Markers()" data-tip="Download markers data in GeoJSON format">markers</button>
       </div>
-      <p style="font-style: italic">GeoJSON format is used in GIS tools such as QGIS. Check out <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/GIS-data-export" target="_blank">wiki-page</a> for guidance</p>
-
-      <p style="font-style: italic">Generator uses pop-up window to download files. Please ensure your browser does not block popups.</p>
-
-      <p style="font-style: italic">It's also possible to export map to Foundry VTT, see <a href="https://github.com/Ethck/azgaar-foundry" target="_blank">the module.</a></p>
+      <p>GeoJSON format is used in GIS tools such as QGIS. Check out <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/GIS-data-export" target="_blank">wiki-page</a> for guidance.</p>
+      <p>Generator uses pop-up window to download files. Please ensure your browser does not block popups.</p>
+      <p>It's also possible to export map to <i>Foundry VTT</i>, see <a href="https://github.com/Ethck/azgaar-foundry" target="_blank">the module.</a></p>
     </div>
 
     <div id="saveMapData" style="display: none" class="dialog">
@@ -3487,9 +3485,9 @@
         <strong>Save map to</strong>
         <button onclick="dowloadMap()" data-tip="Download .map file to your local disk. Shortcut: Ctrl + S">machine</button>
         <button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox">dropbox</button>
-        <button onclick="quickSave()" data-tip="Save the project to browser storage (quick save). It can be unreliable. Shortcut: F6">browser</button>
+        <button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable. Shortcut: F6">browser</button>
       </div>
-      <p style="font-style: italic">Maps are saved in <i>.map</i> format, that can be loaded back via 'Load' in menu. Please keep noted that we do not keep any data on our side. There is no way to restore the progress if .map file is lost. Please keep old .map files on your machine or cloud storage as backups.</p>
+      <p>Maps are saved in <i>.map</i> format, that can be loaded back via the <i>Load</i> in menu. There is no way to restore the progress if file is lost. Please keep old <i>.map</i> files on your machine or cloud storage as backups.</p>
     </div>
 
     <div id="loadMapData" style="display: none" class="dialog">
@@ -3499,12 +3497,11 @@
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>
-      <div id="loadFromDropbox">
-        <p>From your Dropbox account:</p>
-        <select style="margin-bottom:.3em">
-        </select>
+      <div id="loadFromDropbox" style="margin-bottom:.3em">
+        <span>From your Dropbox account</span>
+        <select id="loadFromDropboxSelect" style="margin-bottom:.3em"></select>
         <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
-        <button onclick="createSharableDropboxLink()" data-tip="Select .map file on dropbox and share a sharable link">Create link</button>
+        <button onclick="createSharableDropboxLink()" data-tip="Select file and create a link to share with your friends">Create link</button>
 
         <div style="margin-top: .3em">
           <div id="sharableLinkContainer" style="display: none">
@@ -3516,7 +3513,7 @@
     </div>
 
     <div id="saveTilesScreen" style="display: none" class="dialog">
-      <p style="font-style: italic">Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p>
+      <p>Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p>
       <div data-tip="Number of columns" style="margin-bottom: .3em">
         <div class="label">Columns:</div>
         <input id="tileColsInput" data-stored="tileCols" type="range" min=2 max=20 value=8 style="width: 11em">
diff --git a/modules/fonts.js b/modules/fonts.js
index f8d73351..ba22d200 100644
--- a/modules/fonts.js
+++ b/modules/fonts.js
@@ -61,7 +61,7 @@ function convertFontToDataURI(url) {
       style.innerHTML = text;
       document.head.appendChild(style);
 
-      const styleSheet = document.styleSheets.find(sheet => sheet.ownerNode === style);
+      const styleSheet = Array.from(document.styleSheets).find(sheet => sheet.ownerNode === style);
 
       const FontRule = rule => {
         const src = rule.style.getPropertyValue("src");
diff --git a/modules/load.js b/modules/load.js
index bccc8020..c59eb37f 100644
--- a/modules/load.js
+++ b/modules/load.js
@@ -12,9 +12,10 @@ function quickLoad() {
   });
 }
 
-async function loadFromDropbox(fileName) {
-  const map = document.querySelector("#loadFromDropbox select").value;
-  console.log('loading dropbox map', map);
+async function loadFromDropbox() {
+  const mapPath = document.getElementById("#loadFromDropboxSelect")?.value;
+
+  DEBUG && console.log("Loading map from Dropbox:", mapPath);
   const blob = await Cloud.providers.dropbox.load(map);
   uploadMap(blob);
 }
@@ -23,18 +24,18 @@ async function createSharableDropboxLink() {
   const mapFile = document.querySelector("#loadFromDropbox select").value;
   const sharableLink = document.getElementById("sharableLink");
   const sharableLinkContainer = document.getElementById("sharableLinkContainer");
-  let url
+  let url;
   try {
     url = await Cloud.providers.dropbox.getLink(mapFile);
   } catch {
     tip("Dropbox API error. Can not create link.", true, "error", 2000);
-    return
+    return;
   }
 
   const fmg = window.location.href.split("?")[0];
-  const reallink= `${fmg}?maplink=${url}`;
+  const reallink = `${fmg}?maplink=${url}`;
   // voodoo magic required by the yellow god of CORS
-  const link = reallink.replace('www.dropbox.com/s/', 'dl.dropboxusercontent.com/1/view/')
+  const link = reallink.replace("www.dropbox.com/s/", "dl.dropboxusercontent.com/1/view/");
   const shortLink = link.slice(0, 50) + "...";
 
   sharableLinkContainer.style.display = "block";
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 85925b85..d18ef451 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -663,7 +663,7 @@ function showSavePane() {
   $("#saveMapData").dialog({
     title: "Save map",
     resizable: false,
-    width: "27em",
+    width: "25em",
     position: {my: "center", at: "center", of: "svg"},
     buttons: {
       Close: function () {
@@ -711,11 +711,11 @@ async function showLoadPane() {
   const dpx = document.getElementById("loadFromDropbox");
   const dpf = dpx.querySelector("select");
   const files = await Cloud.providers.dropbox.list();
-  dpx.style.display = files? "block" : "none";
+  dpx.style.display = files ? "block" : "none";
   if (!files) return;
-  while(dpf.firstChild) dpf.removeChild(dpf.firstChild);
+  while (dpf.firstChild) dpf.removeChild(dpf.firstChild);
   files.forEach(f => {
-    const opt = document.createElement('option');
+    const opt = document.createElement("option");
     opt.innerText = f.name;
     opt.value = f.path;
     dpf.appendChild(opt);

From 21d9eb7d21bd48a0fa1794d2b92acb6be2e197ce Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 17:48:48 +0300
Subject: [PATCH 5/7] reword dropbox file load select

---
 index.html            | 15 +++++++++------
 modules/ui/options.js | 26 ++++++++++++++++----------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index f51f32e3..982ecca3 100644
--- a/index.html
+++ b/index.html
@@ -3491,17 +3491,20 @@
     </div>
 
     <div id="loadMapData" style="display: none" class="dialog">
-      <div style="margin-bottom: .3em">Load map from</div>
       <div>
+        <strong>Load map from</strong>
         <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>
-      <div id="loadFromDropbox" style="margin-bottom:.3em">
-        <span>From your Dropbox account</span>
-        <select id="loadFromDropboxSelect" style="margin-bottom:.3em"></select>
-        <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
-        <button onclick="createSharableDropboxLink()" data-tip="Select file and create a link to share with your friends">Create link</button>
+      <div id="loadFromDropbox">
+        <p style="margin-bottom: .3em">From your Dropbox account</p>
+        <select id="loadFromDropboxSelect" style="width: 22em"></select>
+
+        <div id="loadFromDropboxButtons" style="margin-bottom: .3em">
+          <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
+          <button onclick="createSharableDropboxLink()" data-tip="Select file and create a link to share with your friends">Create link</button>
+        </div>
 
         <div style="margin-top: .3em">
           <div id="sharableLinkContainer" style="display: none">
diff --git a/modules/ui/options.js b/modules/ui/options.js
index d18ef451..9b4f3411 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -699,7 +699,7 @@ async function showLoadPane() {
   $("#loadMapData").dialog({
     title: "Load map",
     resizable: false,
-    width: "22em",
+    width: "24em",
     position: {my: "center", at: "center", of: "svg"},
     buttons: {
       Close: function () {
@@ -708,17 +708,23 @@ async function showLoadPane() {
     }
   });
 
-  const dpx = document.getElementById("loadFromDropbox");
-  const dpf = dpx.querySelector("select");
+  const loadFromDropboxButtons = document.getElementById("loadFromDropboxButtons");
+  const fileSelect = document.getElementById("loadFromDropboxSelect");
   const files = await Cloud.providers.dropbox.list();
-  dpx.style.display = files ? "block" : "none";
-  if (!files) return;
-  while (dpf.firstChild) dpf.removeChild(dpf.firstChild);
-  files.forEach(f => {
+
+  if (!files) {
+    loadFromDropboxButtons.style.display = "none";
+    fileSelect.innerHTML = `<option value="" disabled selected>Save files to Dropbox first</option>`;
+    return;
+  }
+
+  loadFromDropboxButtons.style.display = "block";
+  fileSelect.innerHTML = "";
+  files.forEach(file => {
     const opt = document.createElement("option");
-    opt.innerText = f.name;
-    opt.value = f.path;
-    dpf.appendChild(opt);
+    opt.innerText = file.name;
+    opt.value = file.path;
+    fileSelect.appendChild(opt);
   });
 }
 

From e65ab24e06d61e54543e69f6b179daa8222cfe5c Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 18:09:22 +0300
Subject: [PATCH 6/7] dropbox - fix load

---
 modules/load.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/load.js b/modules/load.js
index c59eb37f..428d3a01 100644
--- a/modules/load.js
+++ b/modules/load.js
@@ -16,7 +16,7 @@ async function loadFromDropbox() {
   const mapPath = document.getElementById("#loadFromDropboxSelect")?.value;
 
   DEBUG && console.log("Loading map from Dropbox:", mapPath);
-  const blob = await Cloud.providers.dropbox.load(map);
+  const blob = await Cloud.providers.dropbox.load(mapPath);
   uploadMap(blob);
 }
 

From 50dc5e346541ce2f10063c07a502b4786d75f850 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 18:20:04 +0300
Subject: [PATCH 7/7] dropbox - fix load

---
 modules/load.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/load.js b/modules/load.js
index 428d3a01..5a48fa0e 100644
--- a/modules/load.js
+++ b/modules/load.js
@@ -13,7 +13,7 @@ function quickLoad() {
 }
 
 async function loadFromDropbox() {
-  const mapPath = document.getElementById("#loadFromDropboxSelect")?.value;
+  const mapPath = document.getElementById("loadFromDropboxSelect")?.value;
 
   DEBUG && console.log("Loading map from Dropbox:", mapPath);
   const blob = await Cloud.providers.dropbox.load(mapPath);
