[#56] Add import function

src/_locales/de/messages.json

@@ -319,6 +319,10 @@
     "message": "Gespeichert",
     "description": "Text für `saved` notification."
   },
+  "optionsImportWarning": {
+    "message": "**Achtung**: Importieren Sie nur selbst-exportierte Einstellungen. Einstellungen können sensitive Werte beinhalten.\n\nManuell bearbeitete Dateien können unvorhergesehene Konsequenzen ziehen; importieren Sie nur *reine* Dateien.",
+    "description": "Notiz zu 'import' button."
+  },
   "buttonSave": {
     "message": "Speichern",
     "description": "'save' button."

src/_locales/en/messages.json

@@ -319,6 +319,10 @@
     "message": "Saved",
     "description": "Text for `saved` notification."
   },
+  "optionsImportWarning": {
+    "message": "**Warning**: Import only self-exported settings. Settings can contain sensitive values.\n\nImporting manually edited files can have unforseen consequences; only import *clean* files.",
+    "description": "Note for 'import' button."
+  },
   "buttonSave": {
     "message": "Save",
     "description": "Common 'save' button."

src/scripts/options.ts

@@ -1,12 +1,15 @@
+import { marked } from 'marked';
 import { purgeCache } from './background/ext';
+import { buildModal } from './helpers/modal';
 import { BrowserMessage, getBrowserInstance, getFromStorage, notification, setToStorage } from './helpers/sharedExt';
-import { load } from './options/form';
+import { load, saveDirect } from './options/form';
 import { showLogs } from './options/logs';
 import { showManageCreators } from './options/managecreators';
 import { showConfigurePlayers } from './options/player';
 import { Settings, toData } from './options/settings';
 import { standalone } from './options/standalone';
 
+const msg = getBrowserInstance().i18n.getMessage;
 const cl = decodeURIComponent(window.location.hash.slice(1)).split(' ').filter(c => !!c);
 if (cl.length)
   document.body.classList.add(...cl);
@@ -98,6 +101,41 @@ document.querySelector('[href="#save"]').addEventListener('click', async e => {
     URL.revokeObjectURL(url);
   }
 });
+document.querySelector('[href="#load"]').addEventListener('click', async e => {
+  e.preventDefault();
+  const m = msg('optionsImportWarning').split('\n');
+  const pars = m.map(l => {
+    const p = document.createElement('div');
+    p.innerHTML = marked(l);
+    return p;
+  });
+  const load = document.createElement('input');
+  load.type = 'file';
+  load.accept = 'application/json,.json';
+  buildModal(msg('buttonImport'), null, 'import-modal', ...pars, load);
+  load.addEventListener('change', async ev => {
+    ev.preventDefault();
+    if (load.files.length === 0) return;
+    try {
+      const file = load.files[0];
+      const reader = new FileReader();
+      const opt = JSON.parse(await new Promise<string>((resolve, reject) => {
+        reader.addEventListener('load', loadEv => resolve(loadEv.target.result as string), false);
+        reader.addEventListener('error', reject);
+        reader.readAsText(file);
+      }));
+      console.log('Restoring options');
+      console.dev.debug(opt);
+      els.youtube.checked = !!opt.youtube;
+      await setToStorage(opt);
+      window.removeEventListener('beforeunload', saveDirect);
+      window.location.reload();
+    } catch (err) {
+      console.error(err);
+      alert((err as Error)?.message || err);
+    }
+  });
+});
 
 // changelog
 (async () => {

src/scripts/options/form.ts

@@ -22,6 +22,7 @@ export const load = async (doSave = false) => {
   if (doSave)
     save(false);
 };
+export const saveDirect = () => save();
 
 const debouncedSave = debounce(save, 400);
 const delayedSave = () => toData().then(() => debouncedSave());
@@ -31,7 +32,7 @@ form.addEventListener('submit', e => {
   e.preventDefault();
   save(true);
 });
-window.addEventListener('beforeunload', () => save());
+window.addEventListener('beforeunload', saveDirect);
 
 // autosave
 Array.from(form.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('input, textarea')).forEach(e => {