200 lines
12 KiB
HTML
200 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="Application" ng-controller="MainController">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
|
|
|
|
<!-- this gets changed once we get the config (because angular has not loaded yet, we see template string for a flash) -->
|
|
<title>Cloudron Dashboard</title>
|
|
<meta name="description" content="Cloudron Dashboard">
|
|
|
|
<link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
|
|
<link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
|
|
<link rel="icon" href="/api/v1/cloudron/avatar">
|
|
|
|
<!-- contains all thing already using import statement -->
|
|
<script type="module" src="./src/modules.js"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
|
|
<!-- jQuery-->
|
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
|
|
|
<!-- CSS -->
|
|
<link type="text/css" rel="stylesheet" href="/slick.css"/>
|
|
<link type="text/css" rel="stylesheet" href="/angular-ui-notification.css"/>
|
|
|
|
<!-- async -->
|
|
<script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
|
|
|
|
<!-- Slick carousel -->
|
|
<script type="text/javascript" src="/js/slick.js"></script>
|
|
|
|
<!-- Angularjs scripts -->
|
|
<script type="text/javascript" src="/js/angular.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-loader.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-route.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-cookies.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-animate.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-base64.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-md5.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-sanitize.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-slick.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-ui-notification.js"></script>
|
|
<script type="text/javascript" src="/js/angular-fittext.min.js"></script>
|
|
|
|
<!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
|
|
<script type="text/javascript" src="/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
|
|
|
|
<!-- Angular translate https://angular-translate.github.io/ -->
|
|
<script type="text/javascript" src="/js/angular-translate.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-translate-loader-static-files.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-translate-storage-cookie.min.js"></script>
|
|
<script type="text/javascript" src="/js/angular-translate-storage-local.min.js"></script>
|
|
|
|
<script type="text/javascript" src="/js/clipboard.min.js"></script>
|
|
|
|
<!-- Showdown (markdown converter) -->
|
|
<script type="text/javascript" src="/js/showdown-1.9.1.min.js"></script>
|
|
|
|
<!-- Anugular Multiselect https://github.com/sebastianha/angular-bootstrap-multiselect -->
|
|
<script type="text/javascript" src="/js/angular-bootstrap-multiselect.js"></script>
|
|
|
|
<!-- timezone list -->
|
|
<script type="text/javascript" src="/js/timezones.js?%VITE_CACHE_ID%"></script>
|
|
|
|
<!-- Main Application -->
|
|
<!-- for now we need this in a static non transformed index.js file -->
|
|
<script> window.VITE_CACHE_ID = '%VITE_CACHE_ID%' </script>
|
|
<script type="text/javascript" src="/js/index.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/js/client.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/js/utils.js?%VITE_CACHE_ID%"></script>
|
|
|
|
<script type="text/javascript" src="/views/app.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/apps.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/appstore.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/backups.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/branding.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/domains.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/email.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/emails-eventlog.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/emails.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/emails-queue.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/eventlog.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/network.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/notifications.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/profile.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/services.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/settings.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/support.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/system.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/user-directory.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/users.js?%VITE_CACHE_ID%"></script>
|
|
<script type="text/javascript" src="/views/volumes.js?%VITE_CACHE_ID%"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<script type="module" src="/src/index.js"></script>
|
|
|
|
<!-- needs to be here to override the pankow styles partly -->
|
|
<link type="text/css" rel="stylesheet" href="./src/theme.scss">
|
|
|
|
<script type="text/ng-template" id="notification.html">
|
|
<div class="ui-notification">
|
|
<h3 ng-show="title" ng-bind-html="title"></h3>
|
|
<div class="message">
|
|
<a href="{{action}}" ng-show="action" ng-bind-html="message"></a>
|
|
<span ng-hide="action" ng-bind-html="message"></span>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://docs.cloudron.io/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> {{ 'main.offline' | tr }}</a>
|
|
|
|
<!-- Modal reboot server -->
|
|
<div class="modal fade" id="rebootModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">{{ 'main.rebootDialog.title' | tr }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-bold">{{ 'main.rebootDialog.warning' | tr }}</p>
|
|
<p>{{ 'main.rebootDialog.description' | tr }}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
|
<button type="button" class="btn btn-danger" ng-click="reboot.submit()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> {{ 'main.rebootDialog.rebootAction' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mainContentContainer" class="animateMe ng-hide" ng-show="initialized">
|
|
|
|
<div style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
|
|
|
|
<button type="button" ng-click="onSidebarToggle()" class="btn nav-sidebar-toggle-button"><i class="fa-solid fa-bars"></i></button>
|
|
|
|
<div class="nav-sidebar" ng-class="{'open': sideBarOpen }">
|
|
<a href="#/" class="nav-sidebar-logo" ng-click="closeNavbar()">
|
|
<img ng-src="{{ client.avatar }}" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
|
|
</a>
|
|
<div class="nav-sidebar-list">
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/apps')}" href="#/apps" ng-click="closeNavbar()"><i class="fa fa-grip fa-fw"></i> {{ 'apps.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/appstore')}" ng-show="user.isAtLeastAdmin" href="#/appstore" ng-click="closeNavbar()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ 'appstore.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/users')}" ng-show="user.isAtLeastUserManager" href="#/users" ng-click="closeNavbar()"><i class="fa fa-users fa-fw"></i> {{ 'main.navbar.users' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/backups')}" ng-show="user.isAtLeastAdmin" href="#/backups" ng-click="closeNavbar()"><i class="fa fa-archive fa-fw"></i> {{ 'backups.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/branding')}" ng-show="user.isAtLeastAdmin" href="#/branding" ng-click="closeNavbar()"><i class="fa fa-passport fa-fw"></i> {{ 'branding.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/domains')}" ng-show="user.isAtLeastAdmin" href="#/domains" ng-click="closeNavbar()"><i class="fa fa-globe fa-fw"></i> {{ 'domains.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/email')}" ng-show="user.isAtLeastMailManager" href="#/email" ng-click="closeNavbar()"><i class="fa fa-envelope fa-fw"></i> {{ 'emails.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/eventlog')}" ng-show="user.isAtLeastAdmin" href="#/eventlog" ng-click="closeNavbar()"><i class="fa fa-list-alt fa-fw"></i> {{ 'eventlog.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/network')}" ng-show="user.isAtLeastAdmin" href="#/network" ng-click="closeNavbar()"><i class="fas fa-network-wired fa-fw"></i> {{ 'network.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/services')}" ng-show="user.isAtLeastAdmin" href="#/services" ng-click="closeNavbar()"><i class="fa fa-cogs fa-fw"></i> {{ 'services.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/settings')}" ng-show="user.isAtLeastAdmin" href="#/settings" ng-click="closeNavbar()"><i class="fa fa-wrench fa-fw"></i> {{ 'settings.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/user-directory')}" ng-show="user.isAtLeastAdmin" href="#/user-directory" ng-click="closeNavbar()"><i class="fa fa-users-gear fa-fw"></i> {{ 'users.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/volumes')}" ng-show="user.isAtLeastAdmin" href="#/volumes" ng-click="closeNavbar()"><i class="fa fa-hdd fa-fw"></i> {{ 'volumes.title' | tr }}</a>
|
|
<a class="nav-sidebar-item" ng-class="{ active: isActive('/system')}" ng-show="user.isAtLeastAdmin" href="#/system" ng-click="closeNavbar()"><i class="fa fa-chart-area fa-fw"></i> {{ 'system.title' | tr }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
|
|
<div class="header-toolbar">
|
|
<div style="flex-grow: 1;"></div>
|
|
<div ng-show="user.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
|
|
<span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
|
|
{{ subscription.plan.id === 'free' ? ('settings.appstoreAccount.subscriptionSetupAction' | tr) : ('settings.appstoreAccount.subscriptionReactivateAction' | tr) }}
|
|
</span>
|
|
</div>
|
|
<div ng-show="!user.isAtLeastOwner && subscription.plan.id === 'expired'">
|
|
<span class="badge badge-danger">Subscription Expired</span>
|
|
</div>
|
|
<a ng-show="user.isAtLeastAdmin" href="#/notifications">
|
|
<i class="fas fa-bell" ng-show="notificationCount"></i>
|
|
<i class="far fa-bell" ng-hide="notificationCount"></i>
|
|
<span ng-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
|
|
</a>
|
|
<a ng-show="user.isAtLeastAdmin" href="#/support">
|
|
<i class="fa fa-question fa-fw"></i>
|
|
</a>
|
|
<a href="#/profile">
|
|
<img ng-src="{{user.avatarUrl}}" class="header-toolbar-avatar"/> {{user.username}}
|
|
</a>
|
|
</div>
|
|
|
|
<div style="overflow: auto; flex-grow: 1;">
|
|
<div ng-view id="ng-view" class="layout-content"></div>
|
|
<div id="app"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <footer class="text-center ng-cloak">
|
|
<span class="text-muted" ng-bind-html="config.footer | markdown2html"></span>
|
|
</footer> -->
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|