Follow up 33992f1 - Feature: Desktop view - Implement personal settin…

…g section to change the password.

app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuList.vue

@@ -13,11 +13,7 @@ defineProps<Props>()
 
 <template>
   <nav class="flex p-0">
-    <TransitionGroup
-      tag="ul"
-      name="fade-move"
-      class="m-0 flex basis-full flex-col gap-1 p-0"
-    >
+    <ul class="m-0 flex basis-full flex-col gap-1 p-0">
       <li v-for="entry in items" :key="entry.label">
         <CommonLink
           class="flex gap-2 rounded-md px-2 py-3 text-sm text-gray-100 hover:bg-blue-600 hover:text-black hover:no-underline dark:text-neutral-400 dark:hover:bg-blue-900 dark:hover:text-white"
@@ -32,6 +28,6 @@ defineProps<Props>()
           </slot>
         </CommonLink>
       </li>
-    </TransitionGroup>
+    </ul>
   </nav>
 </template>

app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password-a11y.spec.ts

@@ -3,10 +3,19 @@
 import { axe } from 'vitest-axe'
 
 import { visitView } from '#tests/support/components/visitView.ts'
+import { mockAccount } from '#tests/support/mock-account.ts'
 import { mockApplicationConfig } from '#tests/support/mock-applicationConfig.ts'
+import { mockPermissions } from '#tests/support/mock-permissions.ts'
 
 describe('testing locale a11y view', async () => {
   beforeEach(() => {
+    mockAccount({
+      firstname: 'John',
+      lastname: 'Doe',
+    })
+
+    mockPermissions(['user_preferences.password'])
+
     mockApplicationConfig({
       user_show_password_login: true,
     })

app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password.spec.ts

@@ -4,6 +4,7 @@ import type { ExtendedRenderResult } from '#tests/support/components/renderCompo
 import { visitView } from '#tests/support/components/visitView.ts'
 import { mockAccount } from '#tests/support/mock-account.ts'
 import { mockApplicationConfig } from '#tests/support/mock-applicationConfig.ts'
+import { mockPermissions } from '#tests/support/mock-permissions.ts'
 
 import { mockAccountChangePasswordMutation } from '../graphql/mutations/accountChangePassword.mocks.ts'
 
@@ -35,6 +36,8 @@ describe('password personal settings', () => {
       lastname: 'Doe',
     })
 
+    mockPermissions(['user_preferences.password'])
+
     mockApplicationConfig({
       user_show_password_login: true,
     })

app/frontend/apps/desktop/pages/personal-setting/composables/useCheckChangePassword.ts

@@ -0,0 +1,24 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import { computed } from 'vue'
+
+import { useApplicationStore } from '#shared/stores/application.ts'
+import { useSessionStore } from '#shared/stores/session.ts'
+
+export const useCheckChangePassword = () => {
+  const { config } = useApplicationStore()
+  const { hasPermission } = useSessionStore()
+
+  const canChangePassword = computed(() => {
+    const canChangePassword =
+      config.user_show_password_login || hasPermission('admin.*')
+
+    if (!canChangePassword) return false
+
+    return hasPermission('user_preferences.password')
+  })
+
+  return {
+    canChangePassword,
+  }
+}

app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting/plugins/password.ts

@@ -1,7 +1,6 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
-import { useApplicationStore } from '#shared/stores/application.ts'
-
+import { useCheckChangePassword } from '../../../composables/useCheckChangePassword.ts'
 import type { PersonalSettingPlugin } from './types.ts'
 
 export default <PersonalSettingPlugin>{
@@ -27,9 +26,8 @@ export default <PersonalSettingPlugin>{
     'current,new,confirm,change,current password,new password,confirm password,change password',
   ),
   show: () => {
-    const { config } = useApplicationStore()
+    const { canChangePassword } = useCheckChangePassword()
 
-    if (!config.user_show_password_login) return false
-    return true
+    return canChangePassword.value
   },
 }

app/frontend/apps/desktop/pages/personal-setting/views/PersonalSettingPassword.vue

@@ -13,22 +13,24 @@ import {
 
 import { MutationHandler } from '#shared/server/apollo/handler/index.ts'
 
-import { useApplicationStore } from '#shared/stores/application.ts'
-
 import LayoutContent from '#desktop/components/layout/LayoutContent.vue'
 import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
 
 import { useBreadcrumb } from '../composables/useBreadcrumb.ts'
+import { useCheckChangePassword } from '../composables/useCheckChangePassword.ts'
+
 import type { ChangePasswordFormData } from '../types/change-password.ts'
 import { useAccountChangePasswordMutation } from '../graphql/mutations/accountChangePassword.api.ts'
 
 defineOptions({
   beforeRouteEnter() {
-    const application = useApplicationStore()
-    if (!application.config.user_show_password_login) {
+    const { canChangePassword } = useCheckChangePassword()
+
+    if (!canChangePassword.value) {
       // TODO: Redirect to error page using redirectToError or something similar.
       return '/error'
     }
+
     return true
   },
 })