[feat] preferences: button to copy input to restore preferences hash

5 files changed, 59 insertions, 20 deletions

diff --git a/searx/static/themes/simple/src/js/main/preferences.js b/searx/static/themes/simple/src/js/main/preferences.js
index 1e3ae5981..e9dc7c85c 100644
--- a/searx/static/themes/simple/src/js/main/preferences.js
+++ b/searx/static/themes/simple/src/js/main/preferences.js
@@ -26,5 +26,12 @@
     for (const el of d.querySelectorAll('[data-engine-name]')) {
       searxng.on(el, 'mouseenter', load_engine_descriptions);
     }
+
+    const copyHashButton = d.querySelector("#copy-hash");
+    searxng.on(copyHashButton, 'click', (e) => {
+      e.preventDefault();
+      navigator.clipboard.writeText(copyHashButton.dataset.hash);
+      copyHashButton.innerText = copyHashButton.dataset.copiedText;
+    });
   });
 })(window, document, window.searxng);
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index c22e4af38..88543e03b 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -33,6 +33,21 @@ table {
     width: 300px;
   }
 
+  input[type="text"] {
+    width: 13.25rem;
+    color: var(--color-toolkit-input-text-font);
+    border: none;
+    background: none repeat scroll 0 0 var(--color-toolkit-select-background);
+    padding: 0.2rem 0.4rem;
+    height: 2rem;
+    .rounded-corners-tiny;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-toolkit-select-background-hover);
+    }
+  }
+
   .value {
     margin: 0;
     padding: 0;
@@ -52,21 +67,6 @@ table {
       width: 14rem;
     }
 
-    input[type="text"] {
-      width: 13.25rem;
-      color: var(--color-toolkit-input-text-font);
-      border: none;
-      background: none repeat scroll 0 0 var(--color-toolkit-select-background);
-      padding: 0.2rem 0.4rem;
-      height: 2rem;
-      .rounded-corners-tiny;
-
-      &:hover,
-      &:focus {
-        background-color: var(--color-toolkit-select-background-hover);
-      }
-    }
-
     select:focus,
     input:focus {
       outline: none;
@@ -190,6 +190,23 @@ table {
       width: 100%;
     }
   }
+
+  #copy-hash-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    div.selectable_url {
+      pre {
+        width: auto;
+        flex-grow: 1;
+      }
+    }
+  }
+
+  #pref-hash-input {
+    width: 100%;
+  }
 }
 
 @media screen and (max-width: @tablet) {
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 29e0d99f9..90d91291b 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -111,7 +111,8 @@ footer {
 }
 
 input[type="submit"],
-#results button[type="submit"] {
+#results button[type="submit"],
+.button {
   padding: 0.7rem;
   display: inline-block;
   background: var(--color-btn-background);
diff --git a/searx/templates/simple/preferences/cookies.html b/searx/templates/simple/preferences/cookies.html
index f84251ef6..b13dc6845 100644
--- a/searx/templates/simple/preferences/cookies.html
+++ b/searx/templates/simple/preferences/cookies.html
@@ -36,10 +36,24 @@
 </h4>{{- '' -}}
 <div class="selectable_url">{{- '' -}}
   <pre>
-    {{- url_for('preferences', _external=True) -}}?preferences={{- preferences_url_params|e -}}
-    &amp;save=1{{- '' -}}
+    {{- url_for('preferences', _external=True) -}}?preferences={{- preferences_url_params|e -}}{{- '' -}}
   </pre>{{- '' -}}
 </div>{{- '' -}}
 <p class="small_font">
   {{- _('Specifying custom settings in the preferences URL can be used to sync preferences across devices.') -}}
 </p>
+<h4>
+  {{- _('Copy preferences hash') -}}:{{- '' -}}
+</h4>{{- '' -}}
+<div id="copy-hash-container">{{- '' -}}
+  <div class="selectable_url">{{- '' -}}
+    <pre>
+      {{- preferences_url_params|e }}
+    </pre>{{- '' -}}
+  </div>
+  <button id="copy-hash" class="button" data-hash="{{- preferences_url_params|e -}}" data-copied-text="{{- _('Copied') -}}">{{- _('Copy') -}}</button>
+</div>
+<h4>
+  {{- _('Insert copied preferences hash (without URL) to restore') -}}:{{- '' -}}
+</h4>{{- '' -}}
+<input type="text" id="pref-hash-input" name="preferences" placeholder="{{- _('Preferences hash') -}}">{{- '' -}}
diff --git a/searx/webapp.py b/searx/webapp.py
index 53ca96785..c64ef0fc0 100755
--- a/searx/webapp.py
+++ b/searx/webapp.py
@@ -875,8 +875,8 @@ def preferences():
     # pylint: disable=too-many-locals, too-many-return-statements, too-many-branches
     # pylint: disable=too-many-statements
 
-    # save preferences using the link the /preferences?preferences=...&save=1
-    if request.args.get('save') == '1':
+    # save preferences using the link the /preferences?preferences=...
+    if request.args.get('preferences') or request.form.get('preferences'):
         resp = make_response(redirect(url_for('index', _external=True)))
         return request.preferences.save(resp)