mirror of
https://github.com/drakkan/sftpgo.git
synced 2025-12-06 14:20:55 +03:00
WIP: new WebClient UI
Signed-off-by: Nicola Murino <nicola.murino@gmail.com>
This commit is contained in:
Nicola Murino
@@ -1,274 +1,393 @@
|
||||
<!--
|
||||
Copyright (C) 2019-2023 Nicola Murino
|
||||
Copyright (C) 2023 Nicola Murino
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3.
|
||||
This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
https://keenthemes.com/products/templates-mega-bundle
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
KeenThemes HTML/CSS/JS components are allowed for use only within the
|
||||
SFTPGo product and restricted to be used in a resealable HTML template
|
||||
that can compete with KeenThemes products anyhow.
|
||||
|
||||
This WebUI is allowed for use only within the SFTPGo product and
|
||||
therefore cannot be used in derivative works/products without an
|
||||
explicit grant from the SFTPGo Team (support@sftpgo.com).
|
||||
-->
|
||||
{{define "base"}}
|
||||
{{- define "base"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{.Branding.Name}} - {{template "title" .}}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="shortcut icon" href="{{.StaticURL}}{{.Branding.FaviconPath}}" />
|
||||
{{- template "fonts" .StaticURL }}
|
||||
<link href="{{.StaticURL}}/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<link href="{{.StaticURL}}/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||
{{- template "globalstyle" }}
|
||||
{{- block "extra_css" .}}{{- end}}
|
||||
{{- range .Branding.ExtraCSS}}
|
||||
<link href="{{$.StaticURL}}{{.}}" rel="stylesheet" type="text/css">
|
||||
{{- end}}
|
||||
{{- template "commonjs" }}
|
||||
</head>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>{{.Branding.Name}} - {{template "title" .}}</title>
|
||||
|
||||
<link rel="shortcut icon" href="{{.StaticURL}}{{.Branding.FaviconPath}}" />
|
||||
|
||||
<!-- Custom fonts for this template-->
|
||||
<link href="{{.StaticURL}}/vendor/fontawesome-free/css/fontawesome.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="{{.StaticURL}}/vendor/fontawesome-free/css/solid.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="{{.StaticURL}}/vendor/fontawesome-free/css/regular.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="{{.StaticURL}}{{.Branding.DefaultCSS}}" rel="stylesheet">
|
||||
<style>
|
||||
{{template "commoncss" .}}
|
||||
</style>
|
||||
{{block "extra_css" .}}{{end}}
|
||||
|
||||
{{range .Branding.ExtraCSS}}
|
||||
<link href="{{$.StaticURL}}{{.}}" rel="stylesheet" type="text/css">
|
||||
{{end}}
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
<!-- Page Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
{{if .LoggedUser.Username}}
|
||||
<!-- Sidebar -->
|
||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
|
||||
<!-- Sidebar - Brand -->
|
||||
<div class="sidebar-brand d-flex align-items-center justify-content-center">
|
||||
<div class="sidebar-brand-icon">
|
||||
<img src="{{.StaticURL}}{{.Branding.LogoPath}}" alt="logo" style="width: 2rem; height: auto;">
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3" style="text-transform: none;">{{.Branding.ShortName}}</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider my-0">
|
||||
|
||||
<li class="nav-item {{if eq .CurrentURL .FilesURL}}active{{end}}">
|
||||
<a class="nav-link" href="{{.FilesURL}}">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<span>{{.FilesTitle}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{if .LoggedUser.CanManageShares}}
|
||||
<li class="nav-item {{if eq .CurrentURL .SharesURL}}active{{end}}">
|
||||
<a class="nav-link" href="{{.SharesURL}}">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
<span>{{.SharesTitle}}</span></a>
|
||||
</li>
|
||||
{{end}}
|
||||
<li class="nav-item {{if eq .CurrentURL .ProfileURL}}active{{end}}">
|
||||
<a class="nav-link" href="{{.ProfileURL}}">
|
||||
<i class="fas fa-user"></i>
|
||||
<span>{{.ProfileTitle}}</span></a>
|
||||
</li>
|
||||
{{if .LoggedUser.CanManageMFA}}
|
||||
<li class="nav-item {{if eq .CurrentURL .MFAURL}}active{{end}}">
|
||||
<a class="nav-link" href="{{.MFAURL}}">
|
||||
<i class="fas fa-user-lock"></i>
|
||||
<span>{{.MFATitle}}</span></a>
|
||||
</li>
|
||||
{{end}}
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider d-none d-md-block">
|
||||
|
||||
<!-- Sidebar Toggler (Sidebar) -->
|
||||
<div class="text-center d-none d-md-inline">
|
||||
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<!-- End of Sidebar -->
|
||||
{{end}}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
{{if .LoggedUser.Username}}
|
||||
<!-- Topbar -->
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||
|
||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Topbar Navbar -->
|
||||
<ul class="navbar-nav ml-auto">
|
||||
{{block "additionalnavitems" .}}{{end}}
|
||||
|
||||
<!-- Nav Item - User Information -->
|
||||
<li class="nav-item dropdown no-arrow">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="mr-2 d-none d-lg-inline text-gray-600 small">{{.LoggedUser.Username}}</span>
|
||||
<i class="fas fa-user fa-fw"></i>
|
||||
</a>
|
||||
<!-- Dropdown - User Information -->
|
||||
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||
{{if .LoggedUser.CanChangePassword}}
|
||||
<a class="dropdown-item" href="{{.ChangePwdURL}}">
|
||||
<i class="fas fa-key fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Change password
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
{{end}}
|
||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Logout
|
||||
</a>
|
||||
<body data-kt-app-header-fixed="true" data-kt-app-header-fixed-mobile="true" data-kt-app-toolbar-enabled="true" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true" class="app-default">
|
||||
{{- template "theme-setup"}}
|
||||
<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
|
||||
<div class="app-page flex-column flex-column-fluid " id="kt_app_page">
|
||||
{{- if .LoggedUser.Username}}
|
||||
<div id="kt_app_header" class="app-header" data-kt-sticky="true" data-kt-sticky-activate="{default: true, lg: true}" data-kt-sticky-name="app-header-minimize" data-kt-sticky-offset="{default: '200px', lg: '300px'}" data-kt-sticky-animation="false">
|
||||
<div class="app-container container-fluid d-flex align-items-stretch flex-stack " id="kt_app_header_container">
|
||||
<div class="d-flex align-items-center d-block d-lg-none ms-n3" title="Show sidebar menu">
|
||||
<div class="btn btn-icon btn-color-gray-800 btn-active-color-primary w-35px h-35px me-1" id="kt_app_sidebar_mobile_toggle">
|
||||
<i class="ki-duotone ki-abstract-14 fs-2">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
<!-- End of Topbar -->
|
||||
{{end}}
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid">
|
||||
|
||||
{{template "page_body" .}}
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
{{if .LoggedUser.Username}}
|
||||
<!-- Footer -->
|
||||
<footer class="sticky-footer bg-white">
|
||||
<div class="container my-auto">
|
||||
<div class="copyright text-center my-auto">
|
||||
<span>SFTPGo {{.Version}}</span>
|
||||
<span>
|
||||
<img alt="Logo" src="{{.StaticURL}}{{.Branding.LogoPath}}" class="h-30px" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="app-navbar flex-lg-grow-1" id="kt_app_header_navbar">
|
||||
<div class="app-navbar-item d-flex align-items-center flex-lg-grow-1 me-2 me-lg-0">
|
||||
</div>
|
||||
<!-- <div class="d-flex align-self-center flex-center flex-shrink-0">
|
||||
</div> -->
|
||||
<div class="d-flex align-self-center flex-center flex-shrink-0">
|
||||
{{- block "additionalnavitems" .}}{{- end}}
|
||||
{{- if ne .CurrentURL .EditURL }}
|
||||
<div class="d-flex align-items-center ms-2 ms-lg-3">
|
||||
<a href="#" class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
|
||||
<i class="ki-duotone ki-night-day theme-light-show fs-2">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
<span class="path4"></span>
|
||||
<span class="path5"></span>
|
||||
<span class="path6"></span>
|
||||
<span class="path7"></span>
|
||||
<span class="path8"></span>
|
||||
<span class="path9"></span>
|
||||
<span class="path10"></span>
|
||||
</i>
|
||||
<i class="ki-duotone ki-moon theme-dark-show fs-2">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</a>
|
||||
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px" data-kt-menu="true" data-kt-element="theme-mode-menu">
|
||||
<div class="menu-item px-3 my-0">
|
||||
<a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
|
||||
<span class="menu-icon" data-kt-element="icon">
|
||||
<i class="ki-duotone ki-night-day fs-2">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
<span class="path4"></span>
|
||||
<span class="path5"></span>
|
||||
<span class="path6"></span>
|
||||
<span class="path7"></span>
|
||||
<span class="path8"></span>
|
||||
<span class="path9"></span>
|
||||
<span class="path10"></span>
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-title">Light</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menu-item px-3 my-0">
|
||||
<a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
|
||||
<span class="menu-icon" data-kt-element="icon">
|
||||
<i class="ki-duotone ki-moon fs-2">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-title">Dark</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menu-item px-3 my-0">
|
||||
<a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
|
||||
<span class="menu-icon" data-kt-element="icon">
|
||||
<i class="ki-duotone ki-screen fs-2">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
<span class="path4"></span>
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-title">System</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end}}
|
||||
<div class="d-flex align-items-center ms-2 ms-lg-3">
|
||||
<div class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
|
||||
<i class="ki-duotone ki-user fs-2">
|
||||
<i class="path1"></i>
|
||||
<i class="path2"></i>
|
||||
</i>
|
||||
</div>
|
||||
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 w-250px" data-kt-menu="true">
|
||||
<div class="menu-item px-3 my-0">
|
||||
<div class="menu-content d-flex align-items-center px-3 py-2">
|
||||
<span class="text-gray-700">User: {{.LoggedUser.Username}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator my-2"></div>
|
||||
<div class="menu-item px-3 my-0">
|
||||
<a href="{{.ProfileURL}}" class="menu-link px-3 py-2">
|
||||
<span class="menu-title">Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
{{- if .LoggedUser.CanChangePassword}}
|
||||
<div class="menu-item px-3 my-0">
|
||||
<a href="{{.ChangePwdURL}}" class="menu-link px-3 py-2">
|
||||
<span class="menu-title">Change password</span>
|
||||
</a>
|
||||
</div>
|
||||
{{- end}}
|
||||
<div class="menu-item px-3 my-0">
|
||||
<a href="#" class="menu-link px-3 py-2" onclick="doLogout();">
|
||||
<span class="menu-title">Sign out</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- End of Footer -->
|
||||
{{end}}
|
||||
{{- end}}
|
||||
<div class="{{- if .LoggedUser.Username}}app-wrapper{{- end}} flex-column flex-row-fluid " id="kt_app_wrapper">
|
||||
{{- if .LoggedUser.Username}}
|
||||
<!-- <div id="kt_app_toolbar" class="app-toolbar">
|
||||
<div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-lg-column py-3 py-lg-6 ">
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- End of Page Wrapper -->
|
||||
|
||||
<!-- Scroll to Top Button-->
|
||||
<a class="scroll-to-top rounded" href="#page-top">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
</a>
|
||||
|
||||
{{if .LoggedUser.Username}}
|
||||
<!-- Logout Modal-->
|
||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalLabel">Ready to Leave?</h5>
|
||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||
<a class="btn btn-primary" href="{{.LogoutURL}}">Logout</a>
|
||||
</div>
|
||||
</div> -->
|
||||
<div id="kt_app_sidebar" class="app-sidebar flex-column" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="300px" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
|
||||
<div class="app-sidebar-header flex-column mx-10 pt-8" id="kt_app_sidebar_header">
|
||||
<div class="d-flex flex-stack d-none d-lg-flex mb-13">
|
||||
<div class="app-sidebar-logo">
|
||||
<img alt="Logo" src="{{.StaticURL}}{{.Branding.LogoPath}}" class="h-40px app-sidebar-logo-default" />
|
||||
<span class="text-sidebar fs-4 fw-semibold ps-5">{{.Branding.ShortName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-sidebar-navs flex-column-fluid pb-6" id="kt_app_sidebar_navs">
|
||||
<div id="kt_app_sidebar_navs_wrappers" class="hover-scroll-y my-2 mx-4" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_sidebar_header" data-kt-scroll-wrappers="#kt_app_sidebar_navs" data-kt-scroll-offset="5px">
|
||||
<div id="#kt_app_sidebar_menu" data-kt-menu="true" data-kt-menu-expand="false" class="menu menu-column menu-rounded menu-sub-indention menu-active-bg mb-7">
|
||||
<div class="menu-item">
|
||||
<a class="menu-link {{- if eq .CurrentURL .FilesURL}} active{{- end}}" href="{{.FilesURL}}">
|
||||
<span class="menu-icon">
|
||||
<i class="ki-duotone ki-folder fs-1">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-title">{{.FilesTitle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{- if .LoggedUser.CanManageShares}}
|
||||
<div class="menu-item">
|
||||
<a class="menu-link {{- if eq .CurrentURL .SharesURL}} active{{- end}}" href="{{.SharesURL}}">
|
||||
<span class="menu-icon">
|
||||
<i class="ki-duotone ki-share fs-1">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
<span class="path4"></span>
|
||||
<span class="path5"></span>
|
||||
<span class="path6"></span>
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-title">{{.SharesTitle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{- end}}
|
||||
{{- if .LoggedUser.CanManageMFA}}
|
||||
<div class="menu-item">
|
||||
<a class="menu-link {{- if eq .CurrentURL .MFAURL}} active{{- end}}" href="{{.MFAURL}}">
|
||||
<span class="menu-icon">
|
||||
<i class="ki-duotone ki-shield fs-1">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-title">{{.MFATitle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end}}
|
||||
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
|
||||
<div class="d-flex flex-column flex-column-fluid">
|
||||
<div id="kt_app_content" class="app-content flex-column-fluid">
|
||||
<div id="kt_app_content_container" class="app-container container-fluid">
|
||||
{{template "page_body" .}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- if .LoggedUser.Username}}
|
||||
<div id="kt_app_footer" class="app-footer">
|
||||
<div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3 align-items-center justify-content-center">
|
||||
<div class="text-dark order-2 order-md-1">
|
||||
<span class="text-gray-700 fw-semibold me-1">SFTPGo {{.Version}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
|
||||
<i class="ki-duotone ki-arrow-up">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</div>
|
||||
<div class="page-loader flex-column">
|
||||
<span class="spinner-border text-primary" role="status"></span>
|
||||
<span id="loading_message" class="text-muted fs-4 fw-semibold mt-5"></span>
|
||||
</div>
|
||||
|
||||
{{block "dialog" .}}{{end}}
|
||||
<div class="modal fade" tabindex="-1" id="modal_alert">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="d-flex flex-center flex-column">
|
||||
<span id="modal_alert_icon">
|
||||
</span>
|
||||
<div class="mt-10 text-center">
|
||||
<span id="modal_alert_text" class="fs-6 text-dark fw-semibold"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 justify-content-center">
|
||||
<button id="modal_alert_cancel" type="button" class="btn btn-secondary m-2"></button>
|
||||
<button id="modal_alert_ok" type="button" class="btn btn-primary m-2"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="{{.StaticURL}}/vendor/jquery/jquery.min.js"></script>
|
||||
<script src="{{.StaticURL}}/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
{{- block "modals" .}}{{- end}}
|
||||
<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">
|
||||
var ModalAlert = function () {
|
||||
var modal;
|
||||
var promiseResolve;
|
||||
var isResolved;
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="{{.StaticURL}}/vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||
function resolvePromise(result) {
|
||||
if (!isResolved) {
|
||||
isResolved = true;
|
||||
promiseResolve({
|
||||
isConfirmed: result
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="{{.StaticURL}}/js/sb-admin-2.min.js"></script>
|
||||
return {
|
||||
fire: function (params) {
|
||||
if (!modal){
|
||||
modal = new bootstrap.Modal('#modal_alert');
|
||||
|
||||
<script type="text/javascript">
|
||||
function escapeHTML(str) {
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(str));
|
||||
return div.innerHTML;
|
||||
}
|
||||
modal._element.addEventListener('hide.bs.modal',function() {
|
||||
resolvePromise(false);
|
||||
});
|
||||
|
||||
function unescapeHTML(escapedStr) {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = escapedStr;
|
||||
var child = div.childNodes[0];
|
||||
return child ? child.nodeValue : '';
|
||||
}
|
||||
$('#modal_alert_cancel').on("click", function(){
|
||||
resolvePromise(false);
|
||||
modal.hide();
|
||||
});
|
||||
|
||||
function escapeHTMLForceSafe(str) {
|
||||
return str
|
||||
.replace(/&/g, '_')
|
||||
.replace(/</g, '_')
|
||||
.replace(/>/g, '_')
|
||||
.replace(/\"/g, '_')
|
||||
.replace(/\'/g, '_');
|
||||
}
|
||||
$('#modal_alert_ok').on("click", function(){
|
||||
resolvePromise(true);
|
||||
modal.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function fixedEncodeURIComponent(str) {
|
||||
return encodeURIComponent(unescapeHTML(str)).replace(/[!'()*]/g, function (c) {
|
||||
return '%' + c.charCodeAt(0).toString(16);
|
||||
});
|
||||
}
|
||||
let okBtn = $("#modal_alert_ok");
|
||||
let cancelBtn = $("#modal_alert_cancel");
|
||||
|
||||
function replaceSlash(str){
|
||||
return str.replace(/\//g,'\u2215');
|
||||
}
|
||||
okBtn.removeClass();
|
||||
okBtn.addClass(params.customClass.confirmButton);
|
||||
okBtn.addClass("m-2");
|
||||
okBtn.text(params.confirmButtonText);
|
||||
if (params.cancelButtonText){
|
||||
cancelBtn.text(params.cancelButtonText);
|
||||
cancelBtn.removeClass();
|
||||
cancelBtn.addClass(params.customClass.cancelButton);
|
||||
cancelBtn.addClass("m-2");
|
||||
} else {
|
||||
cancelBtn.addClass("d-none");
|
||||
}
|
||||
|
||||
function b64EncodeUnicode(str) {
|
||||
return btoa(encodeURIComponent(str));
|
||||
}
|
||||
$("#modal_alert_text").text(params.text);
|
||||
|
||||
function UnicodeDecodeB64(str) {
|
||||
return decodeURIComponent(atob(str));
|
||||
}
|
||||
switch (params.icon){
|
||||
case "warning":
|
||||
$("#modal_alert_icon").html(`<i class="ki-duotone ki-information fs-5x text-danger">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
</i>`);
|
||||
break;
|
||||
case "success":
|
||||
$("#modal_alert_icon").html(`<i class="ki-duotone ki-information-2 fs-5x text-success">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
</i>`);
|
||||
break;
|
||||
default:
|
||||
$("#modal_alert_icon").html(`<i class="ki-duotone ki-question-2 fs-5x text-primary">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
<span class="path3"></span>
|
||||
</i>`);
|
||||
}
|
||||
|
||||
function fileSizeIEC(a,b,c,d,e){
|
||||
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')
|
||||
}
|
||||
</script>
|
||||
return new Promise(function(resolve, reject) {
|
||||
promiseResolve = resolve;
|
||||
isResolved = false;
|
||||
modal.show();
|
||||
});
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
<!-- Page level plugins -->
|
||||
{{block "extra_js" .}}{{end}}
|
||||
|
||||
</body>
|
||||
|
||||
function doLogout() {
|
||||
ModalAlert.fire({
|
||||
text: `Are you sure you want to sign out?`,
|
||||
icon: "question",
|
||||
confirmButtonText: "Sign out",
|
||||
cancelButtonText: 'Cancel',
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: 'btn btn-secondary'
|
||||
}
|
||||
}).then((result) =>{
|
||||
if (result.isConfirmed){
|
||||
window.location.replace('{{.LogoutURL}}');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{- block "extra_js" .}}{{- end}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
{{- end}}
|
||||
Reference in New Issue
Block a user