[fix] simple theme: /preferences: add tokens field

include changes to display input text field in the preferences

4 files changed, 42 insertions, 6 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 157cfeed1..d3e048c12 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -91,6 +91,9 @@
   --color-toolkit-tabs-section-border: #ddd;
   --color-toolkit-select-border: #ddd;
   --color-toolkit-select-border-hover: #bbb;
+  --color-toolkit-input-text-font: #222;
+  --color-toolkit-input-text-border: #ddd;
+  --color-toolkit-input-text-border-hover: #bbb;
   --color-toolkit-checkbox-onoff-background: #ddd;
   --color-toolkit-checkbox-onoff-label-background: #3050ff;
   --color-toolkit-checkbox-onoff-checked-background: #aaa;
@@ -191,6 +194,9 @@
     --color-toolkit-tabs-section-border: #555;
     --color-toolkit-select-border: #555;
     --color-toolkit-select-border-hover: #777;
+    --color-toolkit-input-text-font: #fff;
+    --color-toolkit-input-text-border: #555;
+    --color-toolkit-input-text-border-hover: #777;
     --color-toolkit-checkbox-onoff-background: #3c3b31;
     --color-toolkit-checkbox-onoff-label-background: #58f;
     --color-toolkit-checkbox-onoff-checked-background: #ddd;
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index e0e3dec4b..29ba5bf9e 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -27,6 +27,34 @@
     padding: 0;
     float: left;
     width: 15em;
+
+    select,
+    input[type="text"] {
+      font-size: inherit !important;
+      margin: 0 1rem 0 0;
+    }
+
+    select {
+      width: 14rem;
+    }
+
+    input[type="text"] {
+      width: 13.25rem;
+      color: var(--color-toolkit-input-text-font);
+      border: 1px solid var(--color-toolkit-input-text-border);
+      background: none repeat scroll 0 0 var(--color-base-background);
+      padding: 0.4rem;
+
+      &:hover {
+        border: 1px solid var(--color-toolkit-input-text-border-hover);
+      }
+    }
+
+    select:focus,
+    input:focus {
+      outline: none;
+      box-shadow: 0 0 1px 1px var(--color-btn-background);
+    }
   }
 
   .description {
@@ -38,11 +66,6 @@
     font-size: 90%;
   }
 
-  select {
-    width: 200px;
-    font-size: inherit !important;
-  }
-
   table {
     border-collapse: collapse;
   }
diff --git a/searx/templates/oscar/preferences.html b/searx/templates/oscar/preferences.html
index 944a390ef..5c187140f 100644
--- a/searx/templates/oscar/preferences.html
+++ b/searx/templates/oscar/preferences.html
@@ -183,7 +183,7 @@
                     {% set label = _('Engine tokens') %}
                     {% set info = _('Access tokens for private engines') %}
                     {{ preferences_item_header(info, label, rtl, 'tokens') }}
-                        <input class="form-control" id="tokens" name="tokens" value='{{ preferences.tokens.get_value() }}'/>
+                        <input class="form-control" id="tokens" name="tokens" value='{{ preferences.tokens.get_value() }}' autocomplete="off" spellcheck="false" autocorrect="off" />
                     {{ preferences_item_footer(info, label, rtl) }}
                 </div>
                 </fieldset>
diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html
index 267dd6e14..ec3bd8ed2 100644
--- a/searx/templates/simple/preferences.html
+++ b/searx/templates/simple/preferences.html
@@ -169,6 +169,13 @@
       <div class="description"><!-- {{ _('Redirect to open-access versions of publications when available (plugin required)') }} --></div>
     </fieldset>
     {% endif %}
+    <fieldset>
+      <legend>{{ _('Engine tokens') }}</legend>
+      <p class="value">
+        <input name="tokens" type="text" autocomplete="off" spellcheck="false" autocorrect="off" value='{{ preferences.tokens.get_value() }}'/>
+      </p>
+      <p class="description">{{ _('Access tokens for private engines') }}</p>
+    </fieldset>
   {{ tab_footer() }}
 
   {{ tab_header('maintab', 'ui', _('User interface')) }}