WIP

4 files changed, 49 insertions, 35 deletions

diff --git a/ext/bg/img/spinner.gif b/ext/bg/img/spinner.gif
new file mode 100644
index 00000000..8ed30cb6
--- /dev/null
+++ b/ext/bg/img/spinner.gif
diff --git a/ext/bg/js/ankiweb.js b/ext/bg/js/ankiweb.js
index ce909fcf..11142637 100644
--- a/ext/bg/js/ankiweb.js
+++ b/ext/bg/js/ankiweb.js
@@ -61,6 +61,10 @@ class AnkiWeb {
     }
 
     authenticate() {
+        if (this.username.length === 0 || this.password.length === 0) {
+            return Promise.reject('missing login credentials');
+        }
+
         if (this.logged) {
             return Promise.resolve(true);
         }
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index fb8ef77b..ceee9e3f 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -110,15 +110,15 @@ function getAnkiOptions() {
 function updateVisibility(opts) {
     switch (opts.ankiMethod) {
         case 'ankiweb':
-            $('.options-anki-general').show();
-            $('.options-anki-login').show();
+            $('#options-anki-general').show();
+            $('#options-anki-login').show();
             break;
         case 'ankiconnect':
-            $('.options-anki-general').show();
-            $('.options-anki-login').hide();
+            $('#options-anki-general').show();
+            $('#options-anki-login').hide();
             break;
         default:
-            $('.options-anki-general').hide();
+            $('#options-anki-general').hide();
             break;
     }
 
@@ -130,9 +130,14 @@ function updateVisibility(opts) {
 }
 
 function populateAnkiDeckAndModel(opts) {
-    $('.options-anki-format').hide();
     $('.status-dlg').hide();
 
+    const ankiSpinner = $('#ankiSpinner');
+    ankiSpinner.show();
+
+    const ankiFormat = $('#options-anki-format');
+    ankiFormat.hide();
+
     const ankiDeck = $('.anki-deck');
     ankiDeck.find('option').remove();
 
@@ -147,17 +152,18 @@ function populateAnkiDeckAndModel(opts) {
         return anki().getModelNames();
     }).then(names => {
         names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name})));
-        populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);
+        return populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);
     }).then(() => {
-        populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);
+        return populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);
     }).then(() => {
-        $('.options-anki-format').show();
+        ankiFormat.show();
         if (opts.ankiMethod !== 'none') {
             $('#success-dlg').show();
         }
     }).catch(error => {
-        $('#error-dlg').show();
-        $('#error-dlg span').text(error);
+        $('#error-dlg').show().find('span').text(error);
+    }).then(() => {
+        ankiSpinner.hide();
     });
 }
 
@@ -260,9 +266,9 @@ $(document).ready(() => {
         $('#anki-card-tags').val(opts.ankiCardTags.join(' '));
         $('#sentence-extent').val(opts.sentenceExtent);
 
-        $('.options-basic').change(onOptionsBasicChanged);
+        $('#options-general, #options-scanning').change(onOptionsBasicChanged);
+        $('#options-anki').not('.anki-model').change(onOptionsAnkiChanged);
         $('.anki-model').change(onAnkiModelChanged);
-        $('.options-anki').not('.anki-model').change(onOptionsAnkiChanged);
 
         populateAnkiDeckAndModel(opts);
         updateVisibility(opts);
diff --git a/ext/bg/options.html b/ext/bg/options.html
index a42af97e..b5c08eaf 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -6,7 +6,7 @@
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
         <style>
-            .options-anki-general, .options-anki-login, .options-advanced {
+            #anki-spinner, #options-anki-general, #options-anki-login, #options-advanced {
                 display: none;
             }
 
@@ -24,7 +24,7 @@
     </head>
     <body>
         <div class="container">
-            <div class="options-basic">
+            <div id="options-general">
                 <h3>General Options</h3>
 
                 <form class="form-horizontal">
@@ -54,7 +54,7 @@
                 </form>
             </div>
 
-            <div class="options-basic">
+            <div id="options-scanning">
                 <h3>Scanning Options</h3>
 
                 <form class="form-horizontal">
@@ -86,9 +86,20 @@
                 </form>
             </div>
 
-            <div class="options-anki">
+            <div id="options-anki">
+                <img src="img/spinner.gif" class="pull-right" id="anki-spinner" alt>
+
                 <h3>Anki Options</h3>
 
+                <div class="form-group">
+                    <label class="control-label" for="anki-method">Connection method</label>
+                    <select class="form-control" id="anki-method">
+                        <option value="none">None</option>
+                        <option value="ankiweb">AnkiWeb</option>
+                        <option value="ankiconnect">AnkiConnect</option>
+                    </select>
+                </div>
+
                 <div class="alert alert-danger status-dlg" id="error-dlg">
                     <strong>Error</strong>
                     <span>Unable to connect</span>
@@ -99,24 +110,17 @@
                     <span>Connection established</span>
                 </div>
 
-                <div class="form-group">
-                    <label class="control-label" for="anki-method">Connection method</label>
-                    <select class="form-control" id="anki-method">
-                        <option value="none">None</option>
-                        <option value="ankiweb">AnkiWeb</option>
-                        <option value="ankiconnect">AnkiConnect</option>
-                    </select>
-                </div>
-
-                <form class="form-horizontal options-anki-general">
-                    <div class="form-group options-anki-login">
-                        <label for="anki-username" class="control-label col-sm-2">Username</label>
-                        <div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div>
-                    </div>
+                <form class="form-horizontal" id="options-anki-general">
+                    <div id="options-anki-login">
+                        <div class="form-group">
+                            <label for="anki-username" class="control-label col-sm-2">Username</label>
+                            <div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div>
+                        </div>
 
-                    <div class="form-group options-anki-login">
-                        <label for="anki-password" class="control-label col-sm-2">Password</label>
-                        <div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div>
+                        <div class="form-group">
+                            <label for="anki-password" class="control-label col-sm-2">Password</label>
+                            <div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div>
+                        </div>
                     </div>
 
                     <div class="form-group">
@@ -129,7 +133,7 @@
                         <div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div>
                     </div>
 
-                    <div class="options-anki-format">
+                    <div id="options-anki-format">
                         <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">
                             <li class="active"><a href="#term" data-toggle="tab">Terms</a></li>
                             <li><a href="#kanji" data-toggle="tab">Kanji</a></li>