From ea2388379f94505197144fbcc2fbcc4c7a28bedd Mon Sep 17 00:00:00 2001 From: Florian Liebe Date: Fri, 26 Apr 2024 12:55:51 +0200 Subject: [PATCH] Follow up 33992f1 - Feature: Desktop view - Implement personal setting section to change the password. --- .../NavigationMenu/NavigationMenuList.vue | 8 ++----- .../personal-setting-password-a11y.spec.ts | 9 +++++++ .../personal-setting-password.spec.ts | 3 +++ .../composables/useCheckChangePassword.ts | 24 +++++++++++++++++++ .../views/PersonalSetting/plugins/password.ts | 8 +++---- .../views/PersonalSettingPassword.vue | 10 ++++---- 6 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 app/frontend/apps/desktop/pages/personal-setting/composables/useCheckChangePassword.ts diff --git a/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuList.vue b/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuList.vue index 6391d45c0b71..549120a48c73 100644 --- a/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuList.vue +++ b/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuList.vue @@ -13,11 +13,7 @@ defineProps() diff --git a/app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password-a11y.spec.ts b/app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password-a11y.spec.ts index 73176cbb62a8..d5c0c2c76f02 100644 --- a/app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password-a11y.spec.ts +++ b/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, }) diff --git a/app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password.spec.ts b/app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password.spec.ts index 649991aa2655..a06ea52a2345 100644 --- a/app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-password.spec.ts +++ b/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, }) diff --git a/app/frontend/apps/desktop/pages/personal-setting/composables/useCheckChangePassword.ts b/app/frontend/apps/desktop/pages/personal-setting/composables/useCheckChangePassword.ts new file mode 100644 index 000000000000..c497a349243c --- /dev/null +++ b/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, + } +} diff --git a/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting/plugins/password.ts b/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting/plugins/password.ts index 2e93e4915e7d..4111d46a6c92 100644 --- a/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting/plugins/password.ts +++ b/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 { @@ -27,9 +26,8 @@ export default { '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 }, } diff --git a/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSettingPassword.vue b/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSettingPassword.vue index 1dcd0c1956ac..d42f2a6b95cd 100644 --- a/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSettingPassword.vue +++ b/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 }, })