From ac34842afb61785d72bb794dba6b6f2298c0893d Mon Sep 17 00:00:00 2001
From: leonidastri <leonidas-tri@hotmail.com>
Date: Wed, 12 Jun 2024 16:03:34 +0200
Subject: [PATCH] YDA-5737: add configuration commands with copy to clipboard
 functionality

---
 user/static/user/js/data_transfer.js   | 19 +++++++
 user/templates/user/data_transfer.html | 70 ++++++++++++++++++++------
 2 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 user/static/user/js/data_transfer.js

diff --git a/user/static/user/js/data_transfer.js b/user/static/user/js/data_transfer.js
new file mode 100644
index 00000000..d25833c4
--- /dev/null
+++ b/user/static/user/js/data_transfer.js
@@ -0,0 +1,19 @@
+$(document).ready(function () {
+    $('.btn-copy-to-clipboard').on('click', function(event) {
+        if (this.id == 'button1')
+            var codeBlockId = "code-block1"
+        else
+            var codeBlockId = "code-block2"
+
+        const codeContent = document.getElementById(codeBlockId).textContent;
+
+        var textArea = document.createElement('textarea');
+        textArea.textContent = codeContent;
+        document.body.append(textArea)
+
+        textArea.select();
+        document.execCommand('copy');
+
+        textArea.remove();
+    })
+})
\ No newline at end of file
diff --git a/user/templates/user/data_transfer.html b/user/templates/user/data_transfer.html
index 18f5b24d..a28e1b51 100644
--- a/user/templates/user/data_transfer.html
+++ b/user/templates/user/data_transfer.html
@@ -2,9 +2,12 @@
 
 {% block title %}{{ super() }} &dash; Data Transfer{% endblock %}
 
+{% block scripts %}
+    <script src="{{ url_for('user_bp.static', filename='js/data_transfer.js') }}"></script>
+{% endblock %}
+
 {% block content %}
 <h1>Data Transfer</h1>
-<div class="container mt-3">
     <div class="card">
         <div class="card-header">
             <!-- Nav tabs -->
@@ -20,20 +23,59 @@ <h1>Data Transfer</h1>
         <div class="card-body">
             <!-- Tab panes -->
             <div class="tab-content">
-            <div id="iCommands" class="container tab-pane active"><br>
-                <p>
-                    Yoda is based on iRODS technology.
-                    The iCommands allows you to interact with the iRODS backend of Yoda directly.
-                    Therefore, it is possible to transfer data to and from Yoda using the iRODS communication protocol.
-                    You need to configure the iCommands to connect to this Yoda environment.
-                    Copy and paste this configuration into your ~/.irods/irods_environment.json configuration file.
-                  </p>
-            </div>
-            <div id="Gocommands" class="container tab-pane fade"><br>
-                <p>Gocommands can read configuration from an YAML file. Create config.yaml file using an editor and type in followings.</p>
-            </div>
+                <div id="iCommands" class="container tab-pane active"><br>
+                    <p>
+                        Yoda is based on iRODS technology.
+                        The iCommands allows you to interact with the iRODS backend of Yoda directly.
+                        Therefore, it is possible to transfer data to and from Yoda using the iRODS communication protocol.
+                        You need to configure the iCommands to connect to this Yoda environment.
+                        Copy and paste this configuration into your ~/.irods/irods_environment.json configuration file.
+                    </p>
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="float-md-end"> 
+                                <button id="button1" type="button" class="btn btn-secondary btn-copy-to-clipboard">
+                                    <i class="fa fa-copy"></i> Copy
+                                </button>
+                                <a href="#" class="btn btn-outline-secondary download-configuration-as-json">Download as JSON</a>
+                            </div>
+                          <p class="card-text"><pre><code id="code-block1">{
+    "irods_host": "{{ config.get('IRODS_ICAT_HOSTNAME') }}",
+    "irods_port": 1247,
+    "irods_home": "/{{ config.get('IRODS_DEFAULT_ZONE') }}/home",
+    "irods_user_name": "{{ g.user }}",
+    "irods_zone_name": "{{ config.get('IRODS_DEFAULT_ZONE') }}",
+    "irods_authentication_scheme": "pam",
+    "irods_encryption_algorithm": "AES-256-CBC",
+    "irods_encryption_key_size": 32,
+    "irods_encryption_num_hash_rounds": 16,
+    "irods_encryption_salt_size": 8,
+    "irods_client_server_negotiation": "request_server_negotiation",
+    "irods_client_server_policy": "CS_NEG_REQUIRE"
+}</code></pre></p>
+                        </div>
+                      </div>
+                </div>
+                <div id="Gocommands" class="container tab-pane fade"><br>
+                    <p>Gocommands can read configuration from an YAML file. Create config.yaml file using an editor and type in followings.</p>
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="float-md-end"> 
+                                <button id="button2" type="button" class="btn btn-secondary btn-copy-to-clipboard">
+                                    <i class="fa fa-copy"></i> Copy
+                                </button>
+                                <a href="#" class="btn btn-outline-secondary download-configuration-as-yaml">Download as YAML</a>
+                            </div>
+                            <p class="card-text"><pre><code id="code-block2">irods_host: "{{ config.get('IRODS_ICAT_HOSTNAME') }}"
+irods_port: 1247
+irods_user_name: "{{ g.user }}"
+irods_zone_name: "iplant"
+irods_user_password: "your password"
+</code></pre></p>
+                        </div>
+                      </div>
+                </div>
             </div>
         </div>
   </div>
-</div>
 {% endblock content %}
\ No newline at end of file