feedback component done

* update float feedback btn position
* add missing i18n
* add alert widget

vuejs/client/input.css

@@ -1141,15 +1141,15 @@ body {
 /* FEEDBACK */
 
 .feedback-float-btn-container {
-  @apply transition-all hover:brightness-75 dark:hover:brightness-105 fixed right-20 sm:right-24 xl:right-24 z-990;
+  @apply transition-all hover:brightness-75 dark:hover:brightness-105 fixed right-4 sm:right-[9.75rem] xl:right-24 z-990;
 }
 
 .no-banner.feedback-float-btn-container {
-  @apply top-2;
+  @apply top-[4rem] sm:top-2;
 }
 
 .banner.feedback-float-btn-container {
-  @apply top-[4.5rem];
+  @apply top-[8rem] sm:top-[4.5rem];
 }
 
 .feedback-float-btn {
@@ -1209,11 +1209,11 @@ body {
 
 
 .feedback-alert-container {
-  @apply flex justify-center w-full sm:max-w-[300px] z-[1000];
+  @apply flex justify-center w-full;
 }
 
 .feedback-alert-container.is-fixed {
-  @apply  fixed right-0 bottom-0;
+  @apply  fixed right-0 bottom-0  sm:max-w-[300px] z-[1000];
 }
 
 .feedback-alert-wrap {

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

@@ -11,6 +11,9 @@ import { onBeforeMount } from "vue";
   This will display an ephemeral on the bottom right of the page and a sidebar with all the feedbacks.
 */
 
+const feedback = reactive({
+  data: [],
+});
 
 // Handle feedback history panel
 const dropdown = reactive({
@@ -31,11 +34,11 @@ onBeforeMount(() => {
 <template>
 
   <Alert
-    v-if="feedback.data.length > 0"
-    :title="feedback.data[feedback.data.length - 1].title"
-    :message="feedback.data[feedback.data.length - 1].message"
+    v-for="(item, id) in feedback.data"
+    :title="feedback.data[id].title"
+    :message="feedback.data[id].message"
     :delayToClose="5000"
-    :type="feedback.data[feedback.data.length - 1].type"
+    :type="feedback.data[id].type"
     :tabId="feedbackIndex"
     :isFixed="true"
   />
@@ -113,10 +116,10 @@ onBeforeMount(() => {
     <div class="feedback-header">
       <div class="float-left">
         <h5 class="feedback-header-title">
-          {{ $t("dashboard_actions_title") }}
+          {{ $t("dashboard_feedback_title") }}
         </h5>
         <p class="feedback-header-subtitle">
-          {{ $t("dashboard_actions_subtitle") }}
+          {{ $t("dashboard_feedback_subtitle") }}
         </p>
       </div>
     </div>
@@ -128,7 +131,7 @@ onBeforeMount(() => {
         :id="item.id"
         :title="item.title"
         :message="item.message"
-        :tabId=" dropdown.isOpen? feedbackIndex : '-1'        "
+        :tabId="dropdown.isOpen ? feedbackIndex : '-1'"
       />
   </aside>
   <!-- end right sidebar -->

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

@@ -7,6 +7,7 @@ import Menu from "@components/dashboard/Menu.vue";
 import News from "@components/dashboard/News.vue";
 import Header from "@components/dashboard/Header.vue";
 import Banner from "@components/dashboard/Banner.vue";
+import Feedback from "@components/dashboard/Feedback.vue";
 
 /** 
   @name Dashboard/Layout.vue
@@ -24,6 +25,7 @@ import Banner from "@components/dashboard/Banner.vue";
   <LangSwitch />
   <Banner />
   <Menu />
+  <Feedback />
   <News />
   <Header />
   <!-- info -->

vuejs/client/src/components/Widget/Alert.vue

@@ -15,18 +15,16 @@ import { defineProps, defineEmits, reactive } from "vue";
     message: "Your action has been successfully completed",
     delayToClose: 5000,
   }
-  @param {string} [id=`feedback-alert-${message.substring(0, 10)}`]
-  @param {string} [isFixed=false] - Determine if the alert is fixed (visible bottom right of page) or relative (inside a container)
-  @param {string} type - The type of the alert, can be success, error, warning or info
   @param {string} title - The title of the alert
   @param {string} message - The message of the alert
+  @param {boolean} [canClose=true] - Determine if the alert can be closed by user (add a close button), by default it is closable
+  @param {string} [id=`feedback-alert-${message.substring(0, 10)}`]
+  @param {string} [isFixed=false] - Determine if the alert is fixed (visible bottom right of page) or relative (inside a container)
+  @param {string} [type="info"] - The type of the alert, can be success, error, warning or info
   @param {number} [delayToClose=0] - The delay to auto close alert in ms, by default always visible
+  @param {string} [tabId="-1"] - The tabindex of the alert
 */
 
-const alert = reactive({
-  visible: true,
-})
-
 const props = defineProps({
   id: {
     type: [Number, String],
@@ -40,7 +38,8 @@ const props = defineProps({
   },
   type: {
     type: String,
-    required: true,
+    required: false,
+    default : "info"
   },
   title: {
     type: [Number, String],
@@ -55,6 +54,11 @@ const props = defineProps({
     required: false,
     default: 0,
   },
+  canClose: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   tabId: {
     type: [String, Number],
     required: false,
@@ -62,6 +66,10 @@ const props = defineProps({
   },
 });
 
+const alert = reactive({
+  visible: true,
+})
+
 onMounted(() => {
   if (props.delayToClose > 0) {
     setTimeout(() => {
@@ -80,9 +88,7 @@ onMounted(() => {
   >
   <div 
     :class="[
-      props.type !== 'success' && props.type !== 'error'
-        ? 'default'
-        : props.type,
+      props.type,
         'feedback-alert-wrap',
     ]"
   >

vuejs/client/src/lang/en.json

@@ -26,6 +26,10 @@
   "dashboard_reports": "reports",
   "dashboard_cache": "cache",
   "dashboard_logs": "logs",
+  "dashboard_feedback_toggle_sidebar" : "Toggle feedback sidebar.",
+  "dashboard_feedback_close_sidebar" : "Close feedback sidebar.",
+  "dashboard_feedback_title": "feedback",
+  "dashboard_feedback_subtitle": "BunkerWeb actions",
   "dashboard_menu_toggle_sidebar": "Toggle menu sidebar.",
   "dashboard_menu_close_sidebar": "Close menu sidebar.",
   "dashboard_menu_twitter_label": "Redirect to BunkerWeb Twitter",

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

@@ -10,7 +10,7 @@
   </head>
   <body>
     <div class="hidden" data-server-global='{"username" : "admin"}'></div>
-    <div class="hidden" data-server-flash='[{"category" : "success", "message" : "Success feedback"}, {"category" : "error", "message" : "Error feedback"}]'></div>
+    <div class="hidden" 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 id="app"></div>
     <script type="module" src="dashboard.js"></script>
   </body>