feat: added password change notification

src/components/NotificationHandler.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useNotificationEngine } from '@/stores/useNotificationEngine'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheckCircle, faX } from '@fortawesome/free-solid-svg-icons'
+
+const notificationEngine = useNotificationEngine()
+
+notificationEngine.$onAction(({ name, after }) => {
+  if (name == 'add') {
+    after((id) => {
+      setTimeout(() => {
+        notificationEngine.remove(id)
+      }, 5000)
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-end space-y-4 p-4">
+    <div v-for="[id, notification] in notificationEngine.notifications" :key="id">
+      <div class="flex items-start gap-x-4 rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
+        <div
+          class="h-10 w-10 shrink-0 rounded-full bg-green-100 py-2.5 text-green-700 dark:bg-green-800 dark:text-green-100"
+        >
+          <FontAwesomeIcon :icon="faCheckCircle" class="h-full w-full" />
+        </div>
+        <div class="space-y-1">
+          <h3 class="text-sm">{{ $t(notification.title) }}</h3>
+          <small class="text-gray-500 dark:text-gray-400">{{ $t(notification.description) }}</small>
+        </div>
+        <button class="h-3.5 w-3.5 shrink-0" @click="notificationEngine.remove(id)">
+          <FontAwesomeIcon :icon="faX" class="h-full w-full" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/i18n/en-US.json

@@ -31,6 +31,8 @@
     "password_complexity": "Password is too simple",
     "password_length": "Password too short",
     "password_history": "Password already used",
-    "generic_error": "Can't change password right now, please try again later"
+    "generic_error": "Can't change password right now, please try again later",
+    "password_changed": "Password changed",
+    "password_changed_description": "The password has been changed successfully"
   }
 }

src/stores/useNotificationEngine.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+type NotificationType = 'success'
+
+interface Notification {
+  type: NotificationType
+  title: string
+  description: string
+}
+
+export const useNotificationEngine = defineStore('notifications', () => {
+  const notifications = ref(new Map<number, Notification>())
+  const id = ref(0)
+
+  /**
+   * Add a new notification, returns the id of the notification
+   * @param type
+   * @param title
+   * @param description
+   */
+  function add(type: NotificationType, title: string, description: string): number {
+    id.value++
+    notifications.value.set(id.value, { type, title, description })
+    return id.value
+  }
+
+  function remove(id: number) {
+    notifications.value.delete(id)
+  }
+
+  return { notifications, add, remove }
+})

src/views/BaseTemplate.vue

@@ -9,6 +9,7 @@ import { useRouter } from 'vue-router'
 import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { NeButton } from '@nethserver/vue-tailwind-lib'
+import NotificationHandler from '@/components/NotificationHandler.vue'
 
 const { logout, uid } = useAuth()
 
@@ -65,7 +66,7 @@ function handleLogout() {
               <FontAwesomeIcon :icon="faAngleDown" />
             </MenuButton>
             <MenuItems
-              class="absolute right-0 top-10 w-32 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700"
+              class="absolute right-0 top-10 z-10 w-32 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700"
             >
               <MenuItem>
                 <button
@@ -79,7 +80,11 @@ function handleLogout() {
           </Menu>
         </div>
       </div>
-      <main class="grow bg-gray-50 p-6 dark:bg-gray-900">
+      <main class="relative grow bg-gray-50 p-6 dark:bg-gray-900">
+        <!-- Notification handler -->
+        <div class="absolute right-0 top-0 z-20 max-w-lg">
+          <NotificationHandler />
+        </div>
         <RouterView />
       </main>
     </div>
@@ -88,15 +93,15 @@ function handleLogout() {
 
 <style scoped>
 .side-bar {
-  @apply hidden w-full flex-col gap-y-8 border-r border-gray-300 bg-white px-2 py-8 dark:border-gray-800 dark:bg-gray-950 sm:w-80 md:flex;
+  @apply hidden w-full shrink-0 flex-col gap-y-8 border-r border-gray-300 bg-white px-2 py-8 dark:border-gray-800 dark:bg-gray-950 sm:w-80 md:flex;
 }
 
 .side-bar.active {
   @apply absolute bottom-0 left-0 top-0 z-20 flex md:relative md:z-auto;
 }
 
 .side-bar-overlay {
-  @apply absolute bottom-0 left-0 right-0 top-0 z-10 hidden bg-gray-800 opacity-70;
+  @apply absolute bottom-0 left-0 right-0 top-0 z-30 hidden bg-gray-800 opacity-70;
 }
 
 .side-bar.active + .side-bar-overlay {

src/views/UserAccount.vue

@@ -7,6 +7,7 @@ import axios from 'axios'
 import { MessageBag } from '@/lib/validation'
 import { useI18n } from 'vue-i18n'
 import { useAuth } from '@/composables/useAuth'
+import { useNotificationEngine } from '@/stores/useNotificationEngine'
 
 interface ChangePasswordResponse {
   status: 'success' | 'failure'
@@ -21,6 +22,8 @@ const loading = ref(false)
 const errorMessage = ref<string>()
 const validationMessages = ref(new MessageBag())
 
+const notificationEngine = useNotificationEngine()
+
 const { t } = useI18n()
 
 const { uid } = useAuth()
@@ -46,6 +49,11 @@ async function changePassword() {
         oldPassword.value = ''
         newPassword.value = ''
         confirmPassword.value = ''
+        notificationEngine.add(
+          'success',
+          'account_settings.password_changed',
+          'account_settings.password_changed_description'
+        )
       } else {
         switch (response.data.message) {
           case 'error_invalid_credentials':