WebClient: add toast notifications

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

go.mod

@@ -3,7 +3,7 @@ module github.com/drakkan/sftpgo/v2
 go 1.21
 
 require (
-	cloud.google.com/go/storage v1.35.1
+	cloud.google.com/go/storage v1.36.0
 	github.com/Azure/azure-sdk-for-go/sdk/azcore v1.9.1
 	github.com/Azure/azure-sdk-for-go/sdk/storage/azblob v1.2.0
 	github.com/GehirnInc/crypt v0.0.0-20230320061759-8cc1b52080c5

go.sum

@@ -9,8 +9,8 @@ cloud.google.com/go/iam v1.1.5 h1:1jTsCu4bcsNsE4iiqNT5SHwrDRCfRmIaaaVFhRveTJI=
 cloud.google.com/go/iam v1.1.5/go.mod h1:rB6P/Ic3mykPbFio+vo7403drjlgvoWfYpJhMXEbzv8=
 cloud.google.com/go/kms v1.15.5 h1:pj1sRfut2eRbD9pFRjNnPNg/CzJPuQAzUujMIM1vVeM=
 cloud.google.com/go/kms v1.15.5/go.mod h1:cU2H5jnp6G2TDpUGZyqTCoy1n16fbubHZjmVXSMtwDI=
-cloud.google.com/go/storage v1.35.1 h1:B59ahL//eDfx2IIKFBeT5Atm9wnNmj3+8xG/W4WB//w=
-cloud.google.com/go/storage v1.35.1/go.mod h1:M6M/3V/D3KpzMTJyPOR/HU6n2Si5QdaXYEsng2xgOs8=
+cloud.google.com/go/storage v1.36.0 h1:P0mOkAcaJxhCTvAkMhxMfrTKiNcub4YmmPBtlhAyTr8=
+cloud.google.com/go/storage v1.36.0/go.mod h1:M6M/3V/D3KpzMTJyPOR/HU6n2Si5QdaXYEsng2xgOs8=
 github.com/Azure/azure-sdk-for-go v68.0.0+incompatible h1:fcYLmCpyNYRnvJbPerq7U0hS+6+I79yEDJBqVNcqUzU=
 github.com/Azure/azure-sdk-for-go/sdk/azcore v1.9.1 h1:lGlwhPtrX6EVml1hO0ivjkUxsSyl4dsiw9qcA1k/3IQ=
 github.com/Azure/azure-sdk-for-go/sdk/azcore v1.9.1/go.mod h1:RKUqNu35KJYcVG/fqTRqmuXJZYNhYkBrnC/hX7yGbTA=

templates/webclient/base.html

@@ -294,6 +294,25 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             </div>
         </div>
 
+        <div class="toast-container position-fixed top-0 end-0 p-3">
+            <div id="toast_container" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+                <div class="toast-body border-0 d-flex align-items-center">
+                    <i class="ki-duotone ki-information fs-3x text-warning me-5">
+                        <span class="path1"></span>
+                        <span class="path2"></span>
+                        <span class="path3"></span>
+                    </i>
+                    <span id="toast_msg" class="fs-5 fw-semibold text-gray-800 me-auto"></span>
+                    <button data-i18n="[aria-label]general.close" type="button" class="btn btn-icon btn-sm btn-close position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 ms-sm-auto" data-bs-dismiss="toast" aria-label="Close">
+                        <i class="ki-duotone ki-cross fs-2x text-primary">
+                            <span class="path1"></span>
+                            <span class="path2"></span>
+                        </i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
         {{- block "modals" .}}{{- end}}
 		<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/plugins/global/plugins.bundle.js"></script>
 		<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/js/scripts.bundle.js"></script>
@@ -393,6 +412,11 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 }
             }();
 
+            function showToast(msg, options) {
+                const toast = bootstrap.Toast.getOrCreateInstance(document.getElementById('toast_container'));
+                setI18NData($('#toast_msg'), msg, options)
+                toast.show();
+            }
 
             function doLogout() {
                 ModalAlert.fire({

templates/webclient/files.html

@@ -31,21 +31,21 @@ 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 id="id_create_dir_button" data-i18n="fs.new_folder" type="button" class="btn btn-flex btn-light-primary me-3">
+                <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>
                     </i>
-                    New Folder
+                    <span data-i18n="fs.new_folder">New Folder</span>
                 </button>
                 {{- end}}
                 {{- if .CanAddFiles}}
-                <button type="button" data-i18n="fs.upload.text" class="btn btn-flex btn-primary" data-bs-toggle="modal" data-bs-target="#modal_upload">
+                <button type="button" class="btn btn-flex btn-primary" data-bs-toggle="modal" data-bs-target="#modal_upload">
                     <i class="ki-duotone ki-folder-up fs-2">
                         <span class="path1"></span>
                         <span class="path2"></span>
                     </i>
-                    Upload Files
+                    <span data-i18n="fs.upload.text">Upload Files</span>
                 </button>
                 {{- end}}
             </div>
@@ -61,8 +61,8 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 </div>
                 {{- if or .CanDownload .CanDelete}}
                 <div>
-                    <button data-i18n="fs.actions" type="button" class="btn btn-light-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom">
-                        Actions
+                    <button type="button" class="btn btn-light-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom">
+                        <span data-i18n="fs.actions">Actions</span>
                         <i class="ki-duotone ki-down fs-3 rotate-180 ms-3 me-0"></i>
                     </button>
                     <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-auto min-w-200 mw-300px py-4" data-kt-menu="true">
@@ -1163,17 +1163,14 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
     }
 
     function doCopy() {
+        $('#errorMsg').addClass("d-none");
         let items = getMoveOrCopyItems();
         if (items.length == 0){
             return;
         }
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
-        errDivEl.addClass("d-none");
         items = checkMoveCopyItems(items)
         if (items.length == 0){
-            setI18NData(errTxtEl, "fs.invalid_name");
-            errDivEl.removeClass("d-none");
+            showToast("fs.invalid_name");
             return;
         }
         keepAlive();
@@ -1245,8 +1242,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 if (!errorMessage){
                     errorMessage = "fs.copy.err_generic";
                 }
-                setI18NData(errTxtEl, errorMessage);
-                errDivEl.removeClass("d-none");
+                showToast(errorMessage);
                 copyItem();
             });
         }
@@ -1255,17 +1251,14 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
     }
 
     function doMove() {
+        $('#errorMsg').addClass("d-none");
         let items = getMoveOrCopyItems();
         if (items.length == 0){
             return;
         }
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
-        errDivEl.addClass("d-none");
         items = checkMoveCopyItems(items)
         if (items.length == 0){
-            setI18NData(errTxtEl, "fs.invalid_name");
-            errDivEl.removeClass("d-none");
+            showToast("fs.invalid_name");
             return;
         }
         keepAlive();
@@ -1337,8 +1330,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 if (!errorMessage){
                     errorMessage = "fs.move.err_generic";
                 }
-                setI18NData(errTxtEl, errorMessage);
-                errDivEl.removeClass("d-none");
+                showToast(errorMessage);
                 moveItem();
             });
         }
@@ -1363,9 +1355,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
     }
 
     function deleteItem(meta) {
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
-        errDivEl.addClass("d-none");
+        $('#errorMsg').addClass("d-none");
         let itemName = getNameFromMeta(meta);
 
         ModalAlert.fire({
@@ -1409,8 +1399,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                     if (!errorMessage){
                         errorMessage = "fs.delete.err_generic";
                     }
-                    setI18NData(errTxtEl, errorMessage, {name: itemName});
-                    errDivEl.removeClass("d-none");
+                    showToast(errorMessage, {name: itemName});
                 });
             }
         });
@@ -1439,21 +1428,16 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         let meta = $('#rename_old_name').val();
         let oldName = getNameFromMeta(meta);
         let newName = $('#rename_new_name').val();
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
         if (!newName){
-            setI18NData(errTxtEl, "general.name_required");
-            errDivEl.removeClass("d-none");
+            showToast("general.name_required");
             return;
         }
         if (newName == oldName){
-            setI18NData(errTxtEl, "general.name_different");
-            errDivEl.removeClass("d-none");
+            showToast("general.name_different");
             return;
         }
         if (newName.includes("/")){
-            setI18NData(errTxtEl, "fs.invalid_name");
-            errDivEl.removeClass("d-none");
+            showToast("fs.invalid_name");
             return;
         }
         let path = '{{.FileActionsURL}}/move';
@@ -1483,8 +1467,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             if (!errorMessage){
                 errorMessage = "fs.rename.err_generic";
             }
-            setI18NData(errTxtEl, errorMessage, {name: oldName});
-            errDivEl.removeClass("d-none");
+            showToast(errorMessage, {name: oldName});
         });
     }
 
@@ -2052,10 +2035,14 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             </div>
             <div class="modal-footer border-0">
                 {{- if .CanAddFiles }}
-                <button data-i18n="fs.copy.msg" id="id_copy_button" type="button" class="btn btn-light-primary me-5" data-bs-dismiss="modal">Copy</button>
+                <button id="id_copy_button" type="button" class="btn btn-light-primary me-5" data-bs-dismiss="modal">
+                    <span data-i18n="fs.copy.msg">Copy</span>
+                </button>
                 {{- end}}
                 {{- if .CanRename }}
-                <button data-i18n="fs.move.msg" id="id_move_button" type="button" class="btn btn-primary" data-bs-dismiss="modal">Move</button>
+                <button id="id_move_button" type="button" class="btn btn-primary" data-bs-dismiss="modal">
+                    <span data-i18n="fs.move.msg">Move</span>
+                </button>
                 {{- end}}
             </div>
         </div>

templates/webclient/mfa.html

@@ -56,8 +56,6 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             </div>
         </div>
 
-        {{- template "errmsg" ""}}
-
         <div class="form-group row mt-10">
             <label for="id_config" data-i18n="general.configuration" class="col-md-3 col-form-label">Configuration</label>
             <div class="col-md-9">
@@ -470,18 +468,13 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             return;
         }
 
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
         if ($('#id_protocols').find('option:selected').length == 0){
-            setI18NData(errTxtEl, '2fa.no_protocol');
-            errDivEl.removeClass("d-none");
+            showToast('2fa.no_protocol');
             return;
         }
 
         let errorMessage =  '2fa.auth_secret_gen_err';
-
         $('#id_secret').text("");
-        errDivEl.addClass("d-none");
         el.setAttribute('data-kt-indicator', 'on');
 		el.disabled = true;
 
@@ -499,8 +492,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 el.removeAttribute('data-kt-indicator');
                 el.disabled = false;
                 if (!response.data.secret) {
-                    setI18NData(errTxtEl, errorMessage);
-                    errDivEl.removeClass("d-none");
+                    showToast(errorMessage);
                     return;
                 }
                 $('#id_secret').text(response.data.secret);
@@ -517,8 +509,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             }).catch(function (error){
                 el.removeAttribute('data-kt-indicator');
                 el.disabled = false;
-                setI18NData(errTxtEl, errorMessage);
-                errDivEl.removeClass("d-none");
+                showToast(errorMessage);
             });
     }
 
@@ -529,22 +520,18 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         if (!configName) {
             configName = $('#id_config option:selected').val();
         }
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
         let errorMessage = '2fa.save_err';
         let protocolsArray = [];
         $('#id_protocols').find('option:selected').each(function(){
             protocolsArray.push($(this).val());
         });
         if (protocolsArray.length == 0){
-            setI18NData(errTxtEl, '2fa.no_protocol');
-            errDivEl.removeClass("d-none");
+            showToast('2fa.no_protocol');
             return;
         }
         for (let i = 0; i < requiredProtocols.length > 0; i++){
             if (!protocolsArray.includes(requiredProtocols[i])){
-                setI18NData(errTxtEl, '2fa.required_protocols', {val: requiredProtocols.join(', ')});
-                errDivEl.removeClass("d-none");
+                showToast('2fa.required_protocols', {val: requiredProtocols.join(', ')});
                 return;
             }
         }
@@ -563,7 +550,6 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         } else {
             postData.enabled = true;
         }
-        errDivEl.addClass("d-none");
         el.setAttribute('data-kt-indicator', 'on');
 		el.disabled = true;
 
@@ -579,8 +565,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                 el.removeAttribute('data-kt-indicator');
                 el.disabled = false;
                 if (!response.data.message) {
-                    setI18NData(errTxtEl, errorMessage);
-                    errDivEl.removeClass("d-none");
+                    showToast(errorMessage);
                     return;
                 }
                 ModalAlert.fire({
@@ -598,8 +583,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
             }).catch(function (error) {
                 el.removeAttribute('data-kt-indicator');
                 el.disabled = false;
-                setI18NData(errTxtEl, errorMessage);
-                errDivEl.removeClass("d-none");
+                showToast(errorMessage);
             });
 
     }

templates/webclient/shares.html

@@ -27,7 +27,6 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         <h3 data-i18n="share.view_manage" class="card-title text-primary">View and manage shares</h3>
     </div>
     <div id="card_body" class="card-body">
-        {{- template "errmsg" ""}}
         <div id="loader" class="align-items-center text-center my-10">
             <span class="spinner-border w-15px h-15px text-muted align-middle me-2"></span>
             <span data-i18n="general.loading" class="text-gray-600">Loading...</span>
@@ -107,10 +106,6 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
 <script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
 
     function deleteAction(shareID) {
-        let errDivEl = $('#errorMsg');
-        let errTxtEl = $('#errorTxt');
-        errDivEl.addClass("d-none");
-
         ModalAlert.fire({
             text: $.t('general.delete_confirm_generic'),
             icon: "warning",
@@ -152,8 +147,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                     if (!errorMessage){
                         errorMessage = "general.delete_error_generic";
                     }
-                    setI18NData(errTxtEl, errorMessage);
-                    errDivEl.removeClass("d-none");
+                    showToast(errorMessage);
                 });
             }
         });