From a82b851a3d69d647966ba2617fef55e1a8166876 Mon Sep 17 00:00:00 2001
From: Piero Toffanin <pt@masseranolabs.com>
Date: Tue, 26 Oct 2021 17:13:51 -0400
Subject: [PATCH] Fix API key logic, add some error handling

---
 app/app.py               | 22 +++++++--------
 app/static/js/app.js     | 58 ++++++++++++++++++++++++----------------
 app/templates/index.html |  2 +-
 3 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/app/app.py b/app/app.py
index 13c8a2e..14ff377 100644
--- a/app/app.py
+++ b/app/app.py
@@ -33,6 +33,14 @@ def get_upload_dir():
 
     return upload_dir
 
+def get_req_api_key():
+    if request.is_json:
+        json = get_json_dict(request)
+        ak = json.get("api_key")
+    else:
+        ak = request.values.get("api_key")
+
+    return ak
 
 def get_json_dict(request):
     d = request.get_json()
@@ -54,11 +62,7 @@ def get_req_limits(default_limit, api_keys_db, multiplier=1):
     req_limit = default_limit
 
     if api_keys_db:
-        if request.is_json:
-            json = get_json_dict(request)
-            api_key = json.get("api_key")
-        else:
-            api_key = request.values.get("api_key")
+        api_key = get_req_api_key()
 
         if api_key:
             db_req_limit = api_keys_db.lookup(api_key)
@@ -162,11 +166,7 @@ def create_app(args):
                 abort(403, description="Too many request limits violations")
 
             if args.api_keys and args.require_api_key_origin:
-                if request.is_json:
-                    json = get_json_dict(request)
-                    ak = json.get("api_key")
-                else:
-                    ak = request.values.get("api_key")
+                ak = get_req_api_key()
 
                 if (
                         api_keys_db.lookup(ak) is None and request.headers.get("Origin") != args.require_api_key_origin
@@ -608,7 +608,7 @@ def create_app(args):
 
             return jsonify(
                 {
-                    "translatedFileUrl": url_for('download_file', filename=translated_filename, _external=True)
+                    "translatedFileUrl": url_for('download_file', filename=translated_filename, _external=True, api_key=get_req_api_key())
                 }
             )
         except Exception as e:
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 396c0b6..f292fb6 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -97,13 +97,16 @@ document.addEventListener('DOMContentLoaded', function(){
         updated: function(){
             M.FormSelect.init(this.$refs.sourceLangDropdown);
             M.FormSelect.init(this.$refs.targetLangDropdown);
-            if (this.inputText === ""){
-                this.$refs.inputTextarea.style.height = this.inputTextareaHeight + "px";
-                this.$refs.translatedTextarea.style.height = this.inputTextareaHeight + "px";
-            }else{
-                this.$refs.inputTextarea.style.height = this.$refs.translatedTextarea.style.height = "1px";
-                this.$refs.inputTextarea.style.height = Math.max(this.inputTextareaHeight, this.$refs.inputTextarea.scrollHeight + 32) + "px";
-                this.$refs.translatedTextarea.style.height = Math.max(this.inputTextareaHeight, this.$refs.translatedTextarea.scrollHeight + 32) + "px";
+            
+            if (this.$refs.inputTextarea){
+                if (this.inputText === ""){
+                    this.$refs.inputTextarea.style.height = this.inputTextareaHeight + "px";
+                    this.$refs.translatedTextarea.style.height = this.inputTextareaHeight + "px";
+                }else{
+                    this.$refs.inputTextarea.style.height = this.$refs.translatedTextarea.style.height = "1px";
+                    this.$refs.inputTextarea.style.height = Math.max(this.inputTextareaHeight, this.$refs.inputTextarea.scrollHeight + 32) + "px";
+                    this.$refs.translatedTextarea.style.height = Math.max(this.inputTextareaHeight, this.$refs.translatedTextarea.scrollHeight + 32) + "px";
+                }
             }
 
             if (this.charactersLimit !== -1 && this.inputText.length >= this.charactersLimit){
@@ -113,25 +116,29 @@ document.addEventListener('DOMContentLoaded', function(){
             // Update "selected" attribute (to overcome a vue.js limitation)
             // but properly display checkmarks on supported browsers.
             // Also change the <select> width value depending on the <option> length
-            for (var i = 0; i < this.$refs.sourceLangDropdown.children.length; i++){
-                var el = this.$refs.sourceLangDropdown.children[i];
-                if (el.value === this.sourceLang){
-                    el.setAttribute('selected', '');
-                    this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
-                }else{
-                    el.removeAttribute('selected');
-                }
-            }
-            for (var i = 0; i < this.$refs.targetLangDropdown.children.length; i++){
-                var el = this.$refs.targetLangDropdown.children[i];
-                if (el.value === this.targetLang){
-                    el.setAttribute('selected', '');
-                    this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
-                }else{
-                    el.removeAttribute('selected');
+            if (this.$refs.sourceLangDropdown){
+                for (var i = 0; i < this.$refs.sourceLangDropdown.children.length; i++){
+                    var el = this.$refs.sourceLangDropdown.children[i];
+                    if (el.value === this.sourceLang){
+                        el.setAttribute('selected', '');
+                        this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
+                    }else{
+                        el.removeAttribute('selected');
+                    }
                 }
             }
 
+            if (this.$refs.targetLangDropdown){
+                for (var i = 0; i < this.$refs.targetLangDropdown.children.length; i++){
+                    var el = this.$refs.targetLangDropdown.children[i];
+                    if (el.value === this.targetLang){
+                        el.setAttribute('selected', '');
+                        this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
+                    }else{
+                        el.removeAttribute('selected');
+                    }
+                }
+            }
         },
         computed: {
             requestCode: function(){
@@ -361,6 +368,11 @@ document.addEventListener('DOMContentLoaded', function(){
                             self.loadingFileTranslation = false;
                             self.inputFile = false;
                         }
+                    }else{
+                        let res = JSON.parse(this.response);
+                        self.error = res.error || "Unknown error";
+                        self.loadingFileTranslation = false;
+                        self.inputFile = false;
                     }
                 }
 
diff --git a/app/templates/index.html b/app/templates/index.html
index a5d1d5d..6718afe 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -190,7 +190,7 @@
                                 </div>
                                 <div v-if="inputFile !== false" class="dropzone-content">
                                     <div class="card">
-                                        <div class="card-content"  style="padding-right: 6px;">
+                                        <div class="card-content">
                                             <div class="row mb-0">
                                                 <div class="col s12">
                                                     [[ inputFile.name ]]