add home i18n + enhance key svg + update loader

vuejs/client/src/components/Content/Stat.vue

@@ -15,7 +15,7 @@
 
 const props = defineProps({
   stat: {
-    type: String,
+    type: [String, Number],
     required: true,
   },
   statClass: {

vuejs/client/src/components/Dashboard/Loader.vue

@@ -1,59 +1,57 @@
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import logoMenu2 from "@public/images/logo-menu-2.png";
 
-/** 
+/**
   @name Dashboard/Loader.vue
   @description This component is a loader used to transition between pages.
 */
 
+const loader = reactive({
+  isActive: true,
+});
+
+const logo = ref();
+const logoContainer = ref();
+
+function loading() {
+  // delay before stopping the loading
+  setTimeout(() => {
+    logoContainer.value.classList.add("opacity-0");
+  }, 750);
+
+  setTimeout(() => {
+    loader.isActive = false;
+    logoContainer.value.classList.add("hidden");
+  }, 1050);
+  // loading logic
+
+  if (!loader.isActive) return;
+  setTimeout(() => {
+    logo.value.classList.toggle("scale-105");
+    loading();
+  }, 300);
+}
+
 onMounted(() => {
-  class Loader {
-    constructor() {
-      this.logoContainer = document.querySelector("[data-loader]");
-      this.logoEl = document.querySelector("[data-loader-img]");
-      this.isLoading = true;
-      this.init();
-    }
-
-    init() {
-      this.loading();
-      setTimeout(() => {
-        this.logoContainer.classList.add("opacity-0");
-      }, 1350);
-
-      setTimeout(() => {
-        this.isLoading = false;
-        this.logoContainer.classList.add("hidden");
-      }, 1650);
-    }
-
-    loading() {
-      if ((this.isLoading = true)) {
-        setTimeout(() => {
-          this.logoEl.classList.toggle("scale-105");
-          this.loading();
-        }, 300);
-      }
-    }
-  }
-
-  const setLoader = new Loader();
+  loading();
 });
 </script>
 
 <template>
   <div
+    ref="logoContainer"
     role="progressbar"
     aria-labelledby="loader-text"
     data-loader
     class="loader-container"
+    :aria-hidden="loader.isActive ? 'false' : 'true'"
   >
     <p id="loader-text" class="sr-only">{{ $t("dashboard_loading") }}</p>
     <img
+      ref="logo"
       role="img"
       aria-hidden="true"
-      data-loader-img
       :src="logoMenu2"
       class="loader-container-img"
       :alt="$t('dashboard_logo_alt')"

vuejs/client/src/components/Icons/Key.vue

@@ -11,26 +11,31 @@
 */
 
 const props = defineProps({
-    iconClass : {
-        type: String,
-        required: false,
-        default : "default-svg"
-    },
-    iconColor : {
-        type: String,
-        required: false,
-        default: "info",
-    }
-})
+  iconClass: {
+    type: String,
+    required: false,
+    default: "default-svg",
+  },
+  iconColor: {
+    type: String,
+    required: false,
+    default: "info",
+  },
+});
 </script>
 <template>
-                     <svg role="img"
-    aria-hidden="true" :class="[props.iconClass, props.iconColor]"
-                             xmlns="http://www.w3.org/2000/svg"
-                             fill="none"
-                             viewBox="0 0 24 24"
-                             stroke-width="1.5"
-                             stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
-                        </svg>
+  <svg
+    role="img"
+    aria-hidden="true"
+    :class="[props.iconClass, props.iconColor]"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+    />
+  </svg>
 </template>

vuejs/client/src/lang/en.json

@@ -5,9 +5,13 @@
   "dashboard_docs": "docs",
   "dashboard_blog": "blog",
   "dashboard_privacy": "privacy",
+  "dashboard_pro": "PRO",
   "dashboard_license": "license",
   "dashboard_sitemap": "sitemap",
   "dashboard_default": "default",
+  "dashboard_success": "success",
+  "dashboard_error": "error",
+  "dashboard_warning": "warning",
   "dashboard_info": "info",
   "dashboard_filter": "filters",
   "dashboard_advanced": "advanced",
@@ -96,12 +100,19 @@
   "action_delete_all": "delete all {name}",
   "home_version": "version",
   "home_all_features_available": "all features are available",
-  "home_upgrade_pro": "upgrade to pro",
+  "home_awaiting_compliance": "awaiting compliance",
+  "home_renew_license": "renew license",
+  "home_talk_to_team": "talk to team",
+  "home_upgrade_to_pro": "upgrade to pro",
   "home_pro": "pro",
+  "home_pro_locked": "pro locked",
+  "home_expired": "expired",
+  "home_suspended": "suspended",
   "home_free": "free",
   "home_version_number": "version number",
   "home_latest_version": "latest version",
-  "home_upgrade_available": "upgrade available",
+  "home_update_available": "update available",
+  "home_couldnt_find_remote": "couldn't find remote",
   "home_instances": "instances",
   "home_total_number": "total number",
   "home_services": "services",

vuejs/client/src/pages/home/index.html

@@ -14,7 +14,7 @@
          data-server-flash='[{"type" : "success", "title" : "success", "message" : "Success feedback"}, {"type" : "error", "title" : "error", "message" : "Error feedback"}, {"type" : "warning", "title" : "warning", "message" : "Warning feedback"}, {"type" : "info", "title" : "info", "message" : "Info feedback"}]'>
     </div>
     <div class="hidden"
-         data-server-builder='[{"type":"card", "link" : "/services", "containerClass":"","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat", "link": "https://github.com/bunkerity/bunkerweb","data":{"title":"home_version","subtitle":"home_all_features_available","subtitleColor":"success","stat":"home_pro","iconName":"crown","iconColor":"amber"}}]},{"type":"card","containerClass":"","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version_number","subtitle":"home_latest_version","subtitleColor":"success","stat":"1.5.7","iconName":"wire","iconColor":"teal"}}]},{"type":"card","containerClass":"","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_instances","subtitle":"home_total_number","subtitleColor":"info", "stat":"1","iconName":"box","iconColor":"dark"}}]}, {"type":"card","containerClass":"","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_services","subtitle":"home_all_methods_included","subtitleColor":"info","stat":"2","iconName":"disk","iconColor":"orange"}}]}, {"type":"card","containerClass":"","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_plugins","subtitle":"home_no_error","subtitleColor":"success","stat":"42","iconName":"puzzle","iconColor":"yellow"}}]}]'>
+         data-server-builder='[{"type":"card","link":"https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version","subtitle":"home_upgrade_to_pro","subtitleColor":"warning","stat":"home_free","iconName":"key","iconColor":"green"}}]},{"type":"card","link":"https://github.com/bunkerity/bunkerweb","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version_number","subtitle":"home_update_available","subtitleColor":"warning","stat":"1.5.8","iconName":"wire","iconColor":"teal"}}]},{"type":"card","link":"/instances","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_instances","subtitle":"home_total_number","subtitleColor":"info","stat":1,"iconName":"box","iconColor":"dark"}}]},{"type":"card","link":"/services","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_services","subtitle":"home_all_methods_included","subtitleColor":"info","stat":2,"iconName":"disk","iconColor":"orange"}}]},{"type":"card","link":"/plugins","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_plugins","subtitle":"home_no_error","subtitleColor":"success","stat":"42","iconName":"puzzle","iconColor":"yellow"}}]}]'>
     </div>
     <div id="app"></div>
     <script type="module" src="home.js"></script>

vuejs/client/src/pages/instances/index.html

@@ -14,7 +14,7 @@
          data-server-flash='[{"type" : "success", "title" : "title", "message" : "Success feedback"}, {"type" : "error", "title" : "title", "message" : "Error feedback"}, {"type" : "warning", "title" : "title", "message" : "Warning feedback"}, {"type" : "info", "title" : "title", "message" : "Info feedback"}]'>
     </div>
     <div class="hidden"
-         data-server-builder='[{"type":"card","link":"/services","containerClass":"","containerColumns":{"pc":6,"tablet":6,"mobile":12},"widgets":[{"type":"Instance","data":{"details":[{"key":"instances_hostname","value":"www.example.com"},{"key":"instances_method","value":"dashboard_ui"},{"key":"instances_port","value":"1084"},{"key":"instances_status","value":"instances_active"}],"status":"success","title":"www.example.com","buttons":[{"attrs" : {"data-form-INSTANCE_ID" : "instance-1", "data-form-operation" : "edit", "data-submit-form" : "true"}, "text":"action_edit","color":"edit","size":"normal"}]}}]},{"type":"card","link":"/services","containerClass":"","containerColumns":{"pc":6,"tablet":6,"mobile":12},"widgets":[{"type":"Instance","data":{"details":[{"key":"instances_hostname","value":"www.example.com"},{"key":"instances_method","value":"dashboard_ui"},{"key":"instances_port","value":"1084"},{"key":"instances_status","value":"instances_active"}],"status":"error","title":"www.example.com","buttons":[{ "text":"action_start","color":"valid","size":"normal"}]}}]}]'>
+         data-server-builder='[{"type":"card","containerClass":"","containerColumns":{"pc":6,"tablet":6,"mobile":12},"widgets":[{"type":"Instance","data":{"details":[{"key":"instances_hostname","value":"www.example.com"},{"key":"instances_method","value":"dashboard_ui"},{"key":"instances_port","value":"1084"},{"key":"instances_status","value":"instances_active"}],"status":"success","title":"www.example.com","buttons":[{"attrs" : {"data-form-INSTANCE_ID" : "instance-1", "data-form-operation" : "edit", "data-submit-form" : "true"}, "text":"action_edit","color":"edit","size":"normal"}]}}]},{"type":"card","containerClass":"","containerColumns":{"pc":6,"tablet":6,"mobile":12},"widgets":[{"type":"Instance","data":{"details":[{"key":"instances_hostname","value":"www.example.com"},{"key":"instances_method","value":"dashboard_ui"},{"key":"instances_port","value":"1084"},{"key":"instances_status","value":"instances_active"}],"status":"error","title":"www.example.com","buttons":[{ "text":"action_start","color":"valid","size":"normal"}]}}]}]'>
     </div>
     <div id="app"></div>
     <script type="module" src="instances.js"></script>