Backup controller refactor (#946)

* Update IDs

* Change how default fieldTemplates is assigned

* Ensure no missing fields

* Fix error display during import

3 files changed, 33 insertions, 28 deletions

diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 42a1f3d4..9e89e9bd 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -129,6 +129,10 @@ class OptionsUtil {
         return this._schemaValidator.getValidValueOrDefault(this._optionsSchema);
     }
 
+    getValidValueOrDefault(options) {
+        return this._schemaValidator.getValidValueOrDefault(this._optionsSchema, options);
+    }
+
     createValidatingProxy(options) {
         return this._schemaValidator.createProxy(options, this._optionsSchema);
     }
diff --git a/ext/bg/js/settings/backup-controller.js b/ext/bg/js/settings/backup-controller.js
index 50390d5c..454ede85 100644
--- a/ext/bg/js/settings/backup-controller.js
+++ b/ext/bg/js/settings/backup-controller.js
@@ -37,15 +37,15 @@ class BackupController {
     async prepare() {
         await this._optionsUtil.prepare();
 
-        this._settingsResetModal = this._modalController.getModal('settings-reset-modal');
-        this._settingsImportErrorModal = this._modalController.getModal('settings-import-error-modal');
-        this._settingsImportWarningModal = this._modalController.getModal('settings-import-warning-modal');
+        this._settingsResetModal = this._modalController.getModal('settings-reset');
+        this._settingsImportErrorModal = this._modalController.getModal('settings-import-error');
+        this._settingsImportWarningModal = this._modalController.getModal('settings-import-warning');
 
-        document.querySelector('#settings-export').addEventListener('click', this._onSettingsExportClick.bind(this), false);
-        document.querySelector('#settings-import').addEventListener('click', this._onSettingsImportClick.bind(this), false);
+        document.querySelector('#settings-export-button').addEventListener('click', this._onSettingsExportClick.bind(this), false);
+        document.querySelector('#settings-import-button').addEventListener('click', this._onSettingsImportClick.bind(this), false);
         document.querySelector('#settings-import-file').addEventListener('change', this._onSettingsImportFileChange.bind(this), false);
-        document.querySelector('#settings-reset').addEventListener('click', this._onSettingsResetClick.bind(this), false);
-        document.querySelector('#settings-reset-modal-confirm').addEventListener('click', this._onSettingsResetConfirmClick.bind(this), false);
+        document.querySelector('#settings-reset-button').addEventListener('click', this._onSettingsResetClick.bind(this), false);
+        document.querySelector('#settings-reset-confirm-button').addEventListener('click', this._onSettingsResetConfirmClick.bind(this), false);
     }
 
     // Private
@@ -75,7 +75,7 @@ class BackupController {
         // Format options
         for (const {options} of optionsFull.profiles) {
             if (options.anki.fieldTemplates === fieldTemplatesDefault || !options.anki.fieldTemplates) {
-                delete options.anki.fieldTemplates; // Default
+                options.anki.fieldTemplates = null;
             }
         }
 
@@ -152,23 +152,19 @@ class BackupController {
     // Importing
 
     async _settingsImportSetOptionsFull(optionsFull) {
-        try {
-            await this._settingsController.setAllSettings(optionsFull);
-        } catch (e) {
-            yomichan.logError(e);
-        }
+        await this._settingsController.setAllSettings(optionsFull);
     }
 
     _showSettingsImportError(error) {
         yomichan.logError(error);
-        document.querySelector('#settings-import-error-modal-message').textContent = `${error}`;
+        document.querySelector('#settings-import-error-message').textContent = `${error}`;
         this._settingsImportErrorModal.setVisible(true);
     }
 
     async _showSettingsImportWarnings(warnings) {
         const modal = this._settingsImportWarningModal;
-        const buttons = document.querySelectorAll('.settings-import-warning-modal-import-button');
-        const messageContainer = document.querySelector('#settings-import-warning-modal-message');
+        const buttons = document.querySelectorAll('.settings-import-warning-import-button');
+        const messageContainer = document.querySelector('#settings-import-warning-message');
         if (buttons.length === 0 || messageContainer === null) {
             return {result: false};
         }
@@ -340,6 +336,7 @@ class BackupController {
 
         // Upgrade options
         optionsFull = await this._optionsUtil.update(optionsFull);
+        optionsFull = this._optionsUtil.getValidValueOrDefault(optionsFull);
 
         // Check for warnings
         const sanitizationWarnings = this._settingsImportSanitizeOptions(optionsFull, true);
@@ -388,6 +385,10 @@ class BackupController {
         const optionsFull = this._optionsUtil.getDefault();
 
         // Assign options
-        await this._settingsImportSetOptionsFull(optionsFull);
+        try {
+            await this._settingsImportSetOptionsFull(optionsFull);
+        } catch (e) {
+            yomichan.logError(e);
+        }
     }
 }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 804574cb..df90281c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -1111,14 +1111,14 @@
                 </p>
 
                 <div>
-                    <button class="btn btn-default" id="settings-export">Export Settings</button>
-                    <button class="btn btn-default" id="settings-import">Import Settings</button>
-                    <button class="btn btn-danger" id="settings-reset">Reset Default Settings</button>
+                    <button class="btn btn-default" id="settings-export-button">Export Settings</button>
+                    <button class="btn btn-default" id="settings-import-button">Import Settings</button>
+                    <button class="btn btn-danger" id="settings-reset-button">Reset Default Settings</button>
                 </div>
 
                 <div hidden><input type="file" id="settings-import-file" accept=".json,application/json"></div>
 
-                <div class="modal fade" tabindex="-1" role="dialog" id="settings-import-error-modal">
+                <div class="modal fade" tabindex="-1" role="dialog" id="settings-import-error">
                     <div class="modal-dialog modal-dialog-centered">
                         <div class="modal-content">
                             <div class="modal-header">
@@ -1129,7 +1129,7 @@
                                 <p>
                                     An error occurred while trying to import the settings file:
                                 </p>
-                                <p class="text-danger" id="settings-import-error-modal-message"></p>
+                                <p class="text-danger" id="settings-import-error-message"></p>
                                 <p>
                                     Additional info can be found in the developer console.
                                 </p>
@@ -1141,7 +1141,7 @@
                     </div>
                 </div>
 
-                <div class="modal fade" tabindex="-1" role="dialog" id="settings-import-warning-modal">
+                <div class="modal fade" tabindex="-1" role="dialog" id="settings-import-warning">
                     <div class="modal-dialog modal-dialog-centered">
                         <div class="modal-content">
                             <div class="modal-header">
@@ -1153,18 +1153,18 @@
                                     Settings file contains settings which may pose a security risk.
                                     Only import settings from sources you trust.
                                 </p>
-                                <ul class="text-danger" id="settings-import-warning-modal-message"></ul>
+                                <ul class="text-danger" id="settings-import-warning-message"></ul>
                             </div>
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                                <button type="button" class="btn btn-danger settings-import-warning-modal-import-button">Import</button>
-                                <button type="button" class="btn btn-primary settings-import-warning-modal-import-button" data-import-sanitize="true">Sanitize and Import</button>
+                                <button type="button" class="btn btn-danger settings-import-warning-import-button">Import</button>
+                                <button type="button" class="btn btn-primary settings-import-warning-import-button" data-import-sanitize="true">Sanitize and Import</button>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div class="modal fade" tabindex="-1" role="dialog" id="settings-reset-modal">
+                <div class="modal fade" tabindex="-1" role="dialog" id="settings-reset">
                     <div class="modal-dialog modal-dialog-centered">
                         <div class="modal-content">
                             <div class="modal-header">
@@ -1188,7 +1188,7 @@
                             </div>
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                                <button type="button" class="btn btn-danger" id="settings-reset-modal-confirm">Reset All Settings</button>
+                                <button type="button" class="btn btn-danger" id="settings-reset-confirm-button">Reset All Settings</button>
                             </div>
                         </div>
                     </div>