aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/img/spinner.gifbin0 -> 7358 bytes
-rw-r--r--ext/bg/js/ankiweb.js4
-rw-r--r--ext/bg/js/options-form.js32
-rw-r--r--ext/bg/options.html48
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
Binary files differ
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>