WebClient: replace some inline onclick with event listeners

Signed-off-by: Nicola Murino <nicola.murino@gmail.com>

go.mod

@@ -34,7 +34,7 @@ require (
 	github.com/google/shlex v0.0.0-20191202100458-e7afc7fbc510
 	github.com/google/uuid v1.4.0
 	github.com/hashicorp/go-hclog v1.5.0
-	github.com/hashicorp/go-plugin v1.5.2
+	github.com/hashicorp/go-plugin v1.6.0
 	github.com/hashicorp/go-retryablehttp v0.7.5
 	github.com/jackc/pgx/v5 v5.5.0
 	github.com/jlaffaye/ftp v0.0.0-20201112195030-9aae4d151126
@@ -157,7 +157,7 @@ require (
 	github.com/yusufpapurcu/wmi v1.2.3 // indirect
 	go.opencensus.io v0.24.0 // indirect
 	go.uber.org/multierr v1.11.0 // indirect
-	golang.org/x/exp v0.0.0-20231108232855-2478ac86f678 // indirect
+	golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa // indirect
 	golang.org/x/mod v0.14.0 // indirect
 	golang.org/x/sync v0.5.0 // indirect
 	golang.org/x/text v0.14.0 // indirect

go.sum

@@ -296,8 +296,8 @@ github.com/hashicorp/go-cleanhttp v0.5.2/go.mod h1:kO/YDlP8L1346E6Sodw+PrpBSV4/S
 github.com/hashicorp/go-hclog v0.9.2/go.mod h1:5CU+agLiy3J7N7QjHK5d05KxGsuXiQLrjA0H7acj2lQ=
 github.com/hashicorp/go-hclog v1.5.0 h1:bI2ocEMgcVlz55Oj1xZNBsVi900c7II+fWDyV9o+13c=
 github.com/hashicorp/go-hclog v1.5.0/go.mod h1:W4Qnvbt70Wk/zYJryRzDRU/4r0kIg0PVHBcfoyhpF5M=
-github.com/hashicorp/go-plugin v1.5.2 h1:aWv8eimFqWlsEiMrYZdPYl+FdHaBJSN4AWwGWfT1G2Y=
+github.com/hashicorp/go-plugin v1.6.0 h1:wgd4KxHJTVGGqWBq4QPB1i5BZNEx9BR8+OFmHDmTk8A=
-github.com/hashicorp/go-plugin v1.5.2/go.mod h1:w1sAEES3g3PuV/RzUrgow20W2uErMly84hhD3um1WL4=
+github.com/hashicorp/go-plugin v1.6.0/go.mod h1:lBS5MtSSBZk0SHc66KACcjjlU6WzEVP/8pwz68aMkCI=
 github.com/hashicorp/go-retryablehttp v0.7.5 h1:bJj+Pj19UZMIweq/iie+1u5YCdGrnxCT9yvm0e+Nd5M=
 github.com/hashicorp/go-retryablehttp v0.7.5/go.mod h1:Jy/gPYAdjqffZ/yFGCFV2doI5wjtH1ewM9u8iYVjtX8=
 github.com/hashicorp/golang-lru v0.5.0/go.mod h1:/m3WP610KZHVQ1SGc6re/UDhFvYD7pJ4Ao+sR/qLZy8=
@@ -525,8 +525,8 @@ golang.org/x/exp v0.0.0-20191227195350-da58074b4299/go.mod h1:2RIsYlXP63K8oxa1u0
 golang.org/x/exp v0.0.0-20200119233911-0405dc783f0a/go.mod h1:2RIsYlXP63K8oxa1u096TMicItID8zy7Y6sNkU49FU4=
 golang.org/x/exp v0.0.0-20200207192155-f17229e696bd/go.mod h1:J/WKrq2StrnmMY6+EHIKF9dgMWnmCNThgcyBT1FY9mM=
 golang.org/x/exp v0.0.0-20200224162631-6cc2880d07d6/go.mod h1:3jZMyOhIsHpP37uCMkUooju7aAi5cS1Q23tOzKc+0MU=
-golang.org/x/exp v0.0.0-20231108232855-2478ac86f678 h1:mchzmB1XO2pMaKFRqk/+MV3mgGG96aqaPXaMifQU47w=
+golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa h1:FRnLl4eNAQl8hwxVVC17teOw8kdjVDVAiFMtgUdTSRQ=
-golang.org/x/exp v0.0.0-20231108232855-2478ac86f678/go.mod h1:zk2irFbV9DP96SEBUUAy67IdHUaZuSnrz1n472HUCLE=
+golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa/go.mod h1:zk2irFbV9DP96SEBUUAy67IdHUaZuSnrz1n472HUCLE=
 golang.org/x/image v0.0.0-20190227222117-0694c2d4d067/go.mod h1:kZ7UVZpmo3dzQBMxlp+ypCbDeSB+sBbTgSJuh5dn5js=
 golang.org/x/image v0.0.0-20190802002840-cff245a6509b/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=

templates/common/base.html

@@ -23,18 +23,13 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
     <div class="text-gray-800 fw-bold fs-5 d-flex flex-column pe-0 pe-sm-10">
 		<span id="errorTxt">{{.}}</span>
 	</div>
-    <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon btn-sm btn-active-light-primary ms-sm-auto" onclick="dismissErrorMsg();">
+    <button id="id_dismiss_error_msg" type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon btn-sm btn-active-light-primary ms-sm-auto">
         <i class="ki-duotone ki-cross fs-2x text-primary">
             <span class="path1"></span>
             <span class="path2"></span>
         </i>
     </button>
 </div>
-<script type="text/javascript">
-    function dismissErrorMsg(){
-        $('#errorMsg').addClass("d-none");
-    }
-</script>
 {{- end}}
 
 {{- define "theme-setup"}}
@@ -125,6 +120,23 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         return (b=Math,c=b.log,d=1024,e=c(a)/c(d)|0,a/b.pow(d,e)).toFixed(1)
             +' '+(e?'KMGTPEZY'[--e]+'iB':'Bytes')
     }
+
+    KTUtil.onDOMContentLoaded(function () {
+        var dismissErrorBtn = $('#id_dismiss_error_msg');
+        if (dismissErrorBtn){
+            dismissErrorBtn.on("click", function(){
+                $('#errorMsg').addClass("d-none");
+            });
+        }
+
+        var logoutBtn = $('#id_logout_link');
+        if (logoutBtn){
+            logoutBtn.on("click", function(){
+                doLogout();
+            });
+        }
+
+	});
 </script>
 {{- end}}
 

templates/webclient/base.html

@@ -163,7 +163,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
 										</div>
                                         {{- end}}
                                         <div class="menu-item px-3 my-0">
-											<a href="#" class="menu-link px-3 py-2" onclick="doLogout();">
+											<a id="id_logout_link" href="#" class="menu-link px-3 py-2">
                                                 <span class="menu-title">Sign out</span>
                                             </a>
 										</div>

templates/webclient/baselogin.html

@@ -46,6 +46,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
 		</div>
 		<script src="{{.StaticURL}}/assets/plugins/global/plugins.bundle.js"></script>
 		<script src="{{.StaticURL}}/assets/js/scripts.bundle.js"></script>
+		{{- template "basejs" }}
 		<script type="text/javascript">
 			KTUtil.onDOMContentLoaded(function () {
 				$('#sign_in_form').submit(function (event) {

templates/webclient/files.html

@@ -32,7 +32,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         <div class="card-toolbar">
             <div class="d-flex justify-content-end" data-kt-filemanager-table-toolbar="base">
                 {{- if .CanCreateDirs}}
-                <button type="button" class="btn btn-flex btn-light-primary me-3" onclick="showCreateNewFolder(0);">
+                <button id="id_create_dir_button" type="button" class="btn btn-flex btn-light-primary me-3">
                     <i class="ki-duotone ki-add-folder fs-2">
                         <span class="path1"></span>
                         <span class="path2"></span>
@@ -128,7 +128,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 </i>
             </span>
             <input id="file_manager_new_folder_input" type="text" name="new_folder_name" placeholder="Enter the new folder name" class="form-control mw-250px me-3" />
-            <button class="btn btn-icon btn-light-primary me-3" id="file_manager_add_folder" onclick="createNewFolder();">
+            <button class="btn btn-icon btn-light-primary me-3" id="file_manager_add_folder">
                 <span class="indicator-label">
                     <i class="ki-duotone ki-check fs-1"></i>
                 </span>
@@ -136,7 +136,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                     <span class="spinner-border spinner-border-sm align-middle"></span>
                 </span>
             </button>
-            <button class="btn btn-icon btn-light-danger" id="file_manager_cancel_folder" onclick="hideCreateNewFolder(0);">
+            <button class="btn btn-icon btn-light-danger" id="file_manager_cancel_folder">
                 <i class="ki-duotone ki-cross fs-1">
                     <span class="path1"></span>
                     <span class="path2"></span>
@@ -1533,6 +1533,71 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             newNameEl.select();
         });
         //{{- end}}
+
+        // onclick handlers
+        var createDirBtn = $('#id_create_dir_button');
+        if (createDirBtn){
+            createDirBtn.on("click", function (){
+                showCreateNewFolder(0);
+            });
+        }
+
+        var dirBrowserCreateDir = $('#id_dir_browser_create_dir');
+        if (dirBrowserCreateDir){
+            dirBrowserCreateDir.on("click", function(){
+                showCreateNewFolder(1);
+            });
+        }
+
+        var fileManagerAddFolder = $('#file_manager_add_folder');
+        if (fileManagerAddFolder){
+            fileManagerAddFolder.on("click", function() {
+                createNewFolder();
+            });
+        }
+
+        var fileManagerCancelCreateFolder = $('#file_manager_cancel_folder');
+        if (fileManagerCancelCreateFolder){
+            fileManagerCancelCreateFolder.on("click", function(){
+                hideCreateNewFolder(0);
+            })
+        }
+
+        var dirBrowserCancelCreateFolder = $('#dirsbrowser_cancel_folder');
+        if (dirBrowserCancelCreateFolder){
+            dirBrowserCancelCreateFolder.on("click", function(){
+                hideCreateNewFolder(1);
+            });
+        }
+
+        var doRenameBtn = $('#id_do_rename_button');
+        if (doRenameBtn){
+            doRenameBtn.on("click", function() {
+                doRename();
+            });
+        }
+
+        var doCopyBtn = $('#id_copy_button');
+        if (doCopyBtn){
+            doCopyBtn.on("click", function(){
+                doCopy();
+            });
+        }
+
+        var doMoveBtn = $('#id_move_button');
+        if (doMoveBtn){
+            doMoveBtn.on("click", function(){
+                doMove();
+            });
+        }
+
+        var dismissErrorModalBtn = $('#id_dismiss_error_modal_msg');
+        if (dismissErrorModalBtn){
+            dismissErrorModalBtn.on("click",function(){
+                $('#errorModalMsg').addClass("d-none");
+            });
+        }
+
     });
 </script>
 {{- end}}
@@ -1636,7 +1701,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                                 <i class="ki-duotone ki-file-up fs-3x text-primary"><span class="path1"></span><span class="path2"></span></i>
                                 <div class="ms-4">
                                     <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
-                                    <!-- <span class="fs-7 fw-semibold text-gray-400">Upload up to 30 files</span> -->
+                                    <!-- <span class="fs-7 fw-semibold text-gray-500">Upload up to 30 files</span> -->
                                 </div>
                             </div>
                         </div>
@@ -1695,7 +1760,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
 
             <div class="modal-footer border-0">
                 <button type="button" class="btn btn-secondary me-5" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="doRename();">Submit</button>
+                <button id="id_do_rename_button" type="button" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
             </div>
         </div>
     </div>
@@ -1719,15 +1784,10 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                     <div class="text-gray-700 fw-bold fs-5 d-flex flex-column pe-0 pe-sm-10">
                         <span id="errorModalTxt"></span>
                     </div>
-                    <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon btn-sm btn-active-light-primary ms-sm-auto" onclick="dismissErrorModalMsg();">
+                    <button id="id_dismiss_error_modal_msg" type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon btn-sm btn-active-light-primary ms-sm-auto">
                         <i class="ki-duotone ki-cross fs-2x text-primary"><span class="path1"></span><span class="path2"></span></i>
                     </button>
                 </div>
-                <script type="text/javascript">
-                    function dismissErrorModalMsg(){
-                        $('#errorModalMsg').addClass("d-none");
-                    }
-                </script>
                 <div class="row">
                     <div class="col-md-9 align-items-center d-flex flex-stack">
                         <div class="badge badge-lg badge-light-primary">
@@ -1736,7 +1796,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                         </div>
                     </div>
                     <div class="col-md-3 align-items-center d-flex justify-content-end">
-                        <button type="button" class="btn btn-flex btn-primary" onclick="showCreateNewFolder(1);">
+                        <button id="id_dir_browser_create_dir" type="button" class="btn btn-flex btn-primary">
                             <i class="ki-duotone ki-add-folder fs-2">
                                 <span class="path1"></span>
                                 <span class="path2"></span>
@@ -1761,7 +1821,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                             <span class="spinner-border spinner-border-sm align-middle"></span>
                         </span>
                     </button>
-                    <button class="btn btn-icon btn-light-danger" id="dirsbrowser_cancel_folder" onclick="hideCreateNewFolder(1);">
+                    <button class="btn btn-icon btn-light-danger" id="dirsbrowser_cancel_folder">
                         <i class="ki-duotone ki-cross fs-1">
                             <span class="path1"></span>
                             <span class="path2"></span>
@@ -1798,10 +1858,10 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             </div>
             <div class="modal-footer border-0">
                 {{- if .CanAddFiles }}
-                <button type="button" class="btn btn-light-primary me-5" data-bs-dismiss="modal" onclick="doCopy();">Copy</button>
+                <button id="id_copy_button" type="button" class="btn btn-light-primary me-5" data-bs-dismiss="modal">Copy</button>
                 {{- end}}
                 {{- if .CanRename }}
-                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="doMove();">Move</button>
+                <button id="id_move_button" type="button" class="btn btn-primary" data-bs-dismiss="modal">Move</button>
                 {{- end}}
             </div>
         </div>