From 16cdb1f13e96d78f712c862db8aae6d9b4d54112 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Sun, 16 Oct 2016 17:56:00 -0700
Subject: [PATCH] WIP

---
 ext/bg/img/spinner.gif    | Bin 0 -> 7358 bytes
 ext/bg/js/ankiweb.js      |   4 ++++
 ext/bg/js/options-form.js |  32 ++++++++++++++-----------
 ext/bg/options.html       |  48 +++++++++++++++++++++-----------------
 4 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 ext/bg/img/spinner.gif

diff --git a/ext/bg/img/spinner.gif b/ext/bg/img/spinner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8ed30cb6362966f7f8210cf5317a178707578ff1
GIT binary patch
literal 7358
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
Pbju^cui5_rK{oeaxY@}K

literal 0
HcmV?d00001

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" 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>
 
-                <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>
-
-                    <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>