From 62d5ca0c7bd2c6314df8ff87960569f96844e835 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 18 Dec 2023 16:39:11 +0100
Subject: [PATCH] Enable preferences for unauth accounts

---
 ...nt-enable-user-preferences-in-public-links |   6 +
 packages/web-app-admin-settings/src/index.ts  |   8 +-
 .../SideBar/Details/FileDetails.vue           |  13 +-
 .../components/SideBar/Details/TagsSelect.vue |   8 +-
 packages/web-app-files/src/index.ts           |   7 +-
 packages/web-app-ocm/src/index.ts             |  10 +-
 packages/web-pkg/src/apps/types.ts            |   2 +-
 .../src/components/Topbar/TopBar.vue          |  40 +++--
 .../src/components/Topbar/UserMenu.vue        |  59 ++++---
 packages/web-runtime/src/pages/account.vue    | 113 ++++++++-----
 packages/web-runtime/src/router/index.ts      |   2 +-
 .../__snapshots__/UserMenu.spec.ts.snap       | 150 +++++++++++-------
 .../pages/__snapshots__/account.spec.ts.snap  |   1 +
 .../features/smoke/languageChange.feature     |  18 +++
 tests/e2e/cucumber/steps/ui/accountMenu.ts    |  13 +-
 tests/e2e/support/objects/account/actions.ts  |  42 +++--
 tests/e2e/support/objects/account/index.ts    |   8 +-
 17 files changed, 338 insertions(+), 162 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-enable-user-preferences-in-public-links

diff --git a/changelog/unreleased/enhancement-enable-user-preferences-in-public-links b/changelog/unreleased/enhancement-enable-user-preferences-in-public-links
new file mode 100644
index 00000000000..5aafd1872c0
--- /dev/null
+++ b/changelog/unreleased/enhancement-enable-user-preferences-in-public-links
@@ -0,0 +1,6 @@
+Enhancement: Enable user preferences in public links
+
+We've enabled user preferences in public links, so any user even without an account can open
+preferences in a public link context and for example change the current language.
+
+https://github.com/owncloud/web/pull/10207
diff --git a/packages/web-app-admin-settings/src/index.ts b/packages/web-app-admin-settings/src/index.ts
index 0a95b623bf7..bfb10925607 100644
--- a/packages/web-app-admin-settings/src/index.ts
+++ b/packages/web-app-admin-settings/src/index.ts
@@ -20,7 +20,13 @@ const appInfo = {
   isFileEditor: false,
   applicationMenu: {
     enabled: (store: Store<unknown>, ability: Ability) => {
-      return !!store.getters?.user?.id && ability.can('read-all', 'Setting')
+      return (
+        !!store.getters?.user?.id &&
+        (ability.can('read-all', 'Setting') ||
+          ability.can('read-all', 'Account') ||
+          ability.can('read-all', 'Group') ||
+          ability.can('read-all', 'Drive'))
+      )
     },
     priority: 40
   }
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 5ecb7dd8025..bede70e4a8a 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -122,11 +122,14 @@
 <script lang="ts">
 import { computed, defineComponent, inject, Ref, ref, unref, watch } from 'vue'
 import { mapGetters } from 'vuex'
-import { ImageDimension, useConfigurationManager } from '@ownclouders/web-pkg'
+import {
+  ImageDimension,
+  useCapabilityFilesTags,
+  useConfigurationManager
+} from '@ownclouders/web-pkg'
 import upperFirst from 'lodash-es/upperFirst'
 import { ShareTypes } from '@ownclouders/web-client/src/helpers/share'
 import {
-  useCapabilityFilesTags,
   useClientService,
   usePublicLinkContext,
   useStore,
@@ -233,7 +236,11 @@ export default defineComponent({
       })
     })
     const showWebDavDetails = computed(() => {
-      return store.getters['Files/areWebDavDetailsShown']
+      /**
+       * webDavPath might not be set when user is navigating on public link,
+       * even if the user is authenticated and the file owner.
+       */
+      return store.getters['Files/areWebDavDetailsShown'] && unref(resource).webDavPath
     })
     const formatDateRelative = (date) => {
       return formatRelativeDateFromJSDate(new Date(date), language.current)
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
index 3290f87780a..22442c268a4 100644
--- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -234,7 +234,13 @@ export default defineComponent({
       if (unref(resource)?.tags) {
         selectedTags.value = unref(currentTags)
       }
-      loadAvailableTagsTask.perform()
+
+      /**
+       * If the user can't edit the tags, for example on a public link, there is no need to load the available tags
+       */
+      if (!unref(readonly)) {
+        loadAvailableTagsTask.perform()
+      }
     })
 
     const keydownMethods = (map, vm) => {
diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index 543e7aafab0..91568e77a3a 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -21,6 +21,7 @@ import {
   isPersonalSpaceResource,
   isShareSpaceResource
 } from '@ownclouders/web-client/src/helpers'
+import { Store } from 'vuex'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -35,7 +36,9 @@ const appInfo = {
   isFileEditor: false,
   extensions: [],
   applicationMenu: {
-    enabled: () => true,
+    enabled: (store: Store<unknown>) => {
+      return !!store.getters?.user?.id
+    },
     priority: 10
   }
 }
@@ -128,7 +131,7 @@ export const navItems = (context): AppNavigationItem[] => {
 export default defineWebApplication({
   setup(args) {
     return {
-      appInfo,
+      appInfo: appInfo as any,
       store,
       routes: buildRoutes({
         App,
diff --git a/packages/web-app-ocm/src/index.ts b/packages/web-app-ocm/src/index.ts
index 3a3b1ac49d0..32bb17c3faa 100644
--- a/packages/web-app-ocm/src/index.ts
+++ b/packages/web-app-ocm/src/index.ts
@@ -1,5 +1,5 @@
 import App from './views/App.vue'
-import { defineWebApplication, useRouter } from '@ownclouders/web-pkg'
+import { defineWebApplication, useRouter, useStore } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import { extensions } from './extensions'
 import { RouteRecordRaw } from 'vue-router'
@@ -27,12 +27,18 @@ export default defineWebApplication({
   setup(args) {
     const { $gettext } = useGettext()
     const router = useRouter()
+    const store = useStore()
 
     const appInfo = {
       name: $gettext('ScienceMesh'),
       id: 'ocm',
       icon: 'contacts-book',
-      isFileEditor: false
+      isFileEditor: false,
+      applicationMenu: {
+        enabled: () => {
+          return !!store.getters?.user?.id
+        }
+      }
     }
 
     router.addRoute({
diff --git a/packages/web-pkg/src/apps/types.ts b/packages/web-pkg/src/apps/types.ts
index 88647712334..795f96832e7 100644
--- a/packages/web-pkg/src/apps/types.ts
+++ b/packages/web-pkg/src/apps/types.ts
@@ -43,7 +43,7 @@ export type AppConfigObject = Record<string, any>
 
 export interface ApplicationMenuItem {
   enabled: () => boolean
-  priority: number
+  priority?: number
   openAsEditor?: boolean
 }
 
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index 8555bb0408c..8c45547d914 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -9,13 +9,13 @@
         v-if="appMenuItems.length && !isEmbedModeEnabled"
         :applications-list="appMenuItems"
       />
-      <router-link
-        ref="navigationSidebarLogo"
-        v-oc-tooltip="$gettext('Back to home')"
-        to="/"
-        class="oc-width-1-1"
-      >
-        <oc-img :src="currentTheme.logo.topbar" :alt="sidebarLogoAlt" class="oc-logo-image" />
+      <router-link ref="navigationSidebarLogo" :to="homeLink" class="oc-width-1-1">
+        <oc-img
+          v-oc-tooltip="$gettext('Back to home')"
+          :src="currentTheme.logo.topbar"
+          :alt="sidebarLogoAlt"
+          class="oc-logo-image"
+        />
       </router-link>
     </div>
     <div v-if="!contentOnLeftPortal" class="oc-topbar-center">
@@ -56,6 +56,7 @@ import {
   useCapabilityNotifications,
   useEmbedMode,
   usePublicLinkContext,
+  usePublicLinkToken,
   useRouter,
   useStore,
   useThemeStore,
@@ -91,12 +92,24 @@ export default {
     const router = useRouter()
     const ability = useAbility()
     const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+    const publicLinkToken = usePublicLinkToken({ store })
 
     const logoWidth = ref('150px')
     const isNotificationBellEnabled = computed(() => {
       return unref(isUserContext) && unref(notificationsSupport).includes('list')
     })
 
+    const homeLink = computed(() => {
+      if (unref(isPublicLinkContext) && !unref(isUserContext)) {
+        return {
+          name: 'resolvePublicLink',
+          params: { token: unref(publicLinkToken) }
+        }
+      }
+
+      return '/'
+    })
+
     const isSideBarToggleVisible = computed(() => {
       return unref(isUserContext) || unref(isPublicLinkContext)
     })
@@ -125,14 +138,10 @@ export default {
       return props.applicationsList
         .filter((app) => {
           if (app.type === 'extension') {
-            // check if the extension has at least one navItem with a matching menuId
             return (
-              store.getters
-                .getNavItemsByExtension(app.id)
-                .filter((navItem) => isNavItemPermitted(permittedMenus, navItem)).length > 0 ||
-              (app.applicationMenu.enabled instanceof Function &&
-                app.applicationMenu.enabled(store, ability) &&
-                !permittedMenus.includes('user'))
+              app.applicationMenu.enabled instanceof Function &&
+              app.applicationMenu.enabled(store, ability) &&
+              !permittedMenus.includes('user')
             )
           }
           return isNavItemPermitted(permittedMenus, app)
@@ -206,7 +215,8 @@ export default {
       logoWidth,
       isEmbedModeEnabled,
       isSideBarToggleVisible,
-      isSideBarToggleDisabled
+      isSideBarToggleDisabled,
+      homeLink
     }
   },
   computed: {
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 16beeb44a7d..e977a266313 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -10,17 +10,17 @@
     >
       <avatar-image
         v-if="userId"
-        class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"
+        class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"
         :width="32"
         :userid="userId"
         :user-name="user.displayname"
       />
       <oc-avatar-item
         v-else
-        class="oc-topbar-unauthenticated-avatar oc-flex-inline oc-flex-center oc-flex-middle"
+        class="oc-topbar-avatar oc-topbar-unauthenticated-avatar oc-flex-inline oc-flex-center oc-flex-middle"
         :name="$gettext('User Menu login')"
         :width="32"
-        icon="user-add"
+        icon="user"
         icon-fill-type="line"
         icon-color="var(--oc-color-swatch-brand-default)"
         background="var(--oc-color-swatch-brand-contrast)"
@@ -37,6 +37,17 @@
     >
       <oc-list class="user-menu-list">
         <template v-if="!userId">
+          <li>
+            <oc-button
+              id="oc-topbar-account-manage"
+              type="router-link"
+              :to="accountPageRoute"
+              appearance="raw"
+            >
+              <oc-icon name="settings-4" fill-type="line" class="oc-p-xs" />
+              <span v-text="$gettext('Preferences')" />
+            </oc-button>
+          </li>
           <li>
             <oc-button
               id="oc-topbar-account-login"
@@ -50,18 +61,22 @@
           </li>
         </template>
         <template v-else>
+          <li class="profile-info-wrapper oc-pl-s">
+            <avatar-image :width="32" :userid="userId" :user-name="user.displayname" />
+            <span class="oc-width-1-1" :class="{ 'oc-py-xs': !user.email }">
+              <span class="oc-display-block" v-text="user.displayname" />
+              <span v-if="user.email" class="oc-text-small" v-text="user.email" />
+            </span>
+          </li>
           <li>
             <oc-button
               id="oc-topbar-account-manage"
               type="router-link"
-              :to="{ path: '/account' }"
+              :to="accountPageRoute"
               appearance="raw"
             >
-              <avatar-image :width="32" :userid="userId" :user-name="user.displayname" />
-              <span class="profile-info-wrapper" :class="{ 'oc-py-xs': !user.email }">
-                <span class="oc-display-block" v-text="user.displayname" />
-                <span v-if="user.email" class="oc-text-small" v-text="user.email" />
-              </span>
+              <oc-icon name="settings-4" fill-type="line" class="oc-p-xs" />
+              <span v-text="$gettext('Preferences')" />
             </oc-button>
           </li>
           <li v-for="(app, index) in applicationsList" :key="`user-menu-${index}`">
@@ -82,7 +97,7 @@
           </li>
           <li v-if="quotaEnabled" class="storage-wrapper oc-pl-s">
             <oc-icon name="cloud" fill-type="line" class="oc-p-xs" />
-            <div class="storage-wrapper-text oc-width-1-1">
+            <div class="oc-width-1-1">
               <p class="oc-my-rm">
                 <span class="oc-display-block" v-text="personalStorageLabel" />
                 <span class="oc-text-small" v-text="personalStorageDetailsLabel" />
@@ -123,7 +138,12 @@ import { mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import isNil from 'lodash-es/isNil'
 import { authService } from '../../services/auth'
-import { useCapabilitySpacesEnabled, useRoute, useThemeStore } from '@ownclouders/web-pkg'
+import {
+  routeToContextQuery,
+  useCapabilitySpacesEnabled,
+  useRoute,
+  useThemeStore
+} from '@ownclouders/web-pkg'
 import { OcDrop } from 'design-system/src/components'
 
 export default defineComponent({
@@ -138,6 +158,11 @@ export default defineComponent({
     const route = useRoute()
     const themeStore = useThemeStore()
 
+    const accountPageRoute = computed(() => ({
+      name: 'account',
+      query: routeToContextQuery(unref(route))
+    }))
+
     const loginLink = computed(() => {
       return {
         name: 'login',
@@ -150,6 +175,7 @@ export default defineComponent({
 
     return {
       hasSpaces: useCapabilitySpacesEnabled(),
+      accountPageRoute,
       loginLink,
       imprintUrl,
       privacyUrl
@@ -262,21 +288,12 @@ export default defineComponent({
       color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
-
-    .profile-info-wrapper {
-      text-align: left;
-      word-break: break-all;
-      line-height: initial;
-    }
   }
 
+  &.profile-info-wrapper,
   &.storage-wrapper {
     gap: var(--oc-space-medium);
     min-height: 3rem;
-
-    .storage-wrapper-text {
-      align-self: flex-end;
-    }
   }
 }
 
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 8021433a368..f296171096b 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -1,18 +1,10 @@
 <template>
   <app-loading-spinner v-if="isLoading" />
   <main v-else id="account" class="oc-height-1-1 oc-m">
-    <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1 oc-border-b oc-py">
-      <h1 id="account-page-title" class="oc-page-title oc-m-rm">{{ pageTitle }}</h1>
-      <div>
-        <oc-button
-          v-if="!isChangePasswordDisabled"
-          variation="primary"
-          data-testid="account-page-edit-password-btn"
-          @click="showEditPasswordModal"
-        >
-          <oc-icon name="lock" />
-          <span v-text="$gettext('Change Password')" />
-        </oc-button>
+    <h1 id="account-page-title" class="oc-page-title oc-m-rm oc-invisible-sr">{{ pageTitle }}</h1>
+    <div v-if="showAccountSection">
+      <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1">
+        <h2 class="oc-text-bold" v-text="$gettext('Account Information')" />
         <oc-button
           v-if="accountEditLink"
           variation="primary"
@@ -25,9 +17,6 @@
           <span v-text="$gettext('Edit')" />
         </oc-button>
       </div>
-    </div>
-    <div>
-      <h2 class="oc-text-bold oc-mb" v-text="$gettext('Account Information')" />
       <dl class="account-page-info oc-flex oc-flex-wrap">
         <div class="account-page-info-username oc-mb oc-width-1-2@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Username')" />
@@ -65,7 +54,7 @@
             />
           </dd>
         </div>
-        <div v-if="logoutUrl" class="account-page-logout-all-devices oc-mb oc-width-1-2@s">
+        <div v-if="showLogout" class="account-page-logout-all-devices oc-mb oc-width-1-2@s">
           <dt
             class="oc-text-normal oc-text-muted"
             v-text="$gettext('Logout from active devices')"
@@ -88,10 +77,25 @@
             <gdpr-export />
           </dd>
         </div>
+        <div v-if="showChangePassword" class="account-page-password oc-mb oc-width-1-2@s">
+          <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Password')" />
+          <dd data-testid="password">
+            <oc-button
+              appearance="raw"
+              variation="primary"
+              data-testid="account-page-edit-password-btn"
+              @click="showEditPasswordModal"
+            >
+              <span v-text="$gettext('Set new password')" />
+            </oc-button>
+          </dd>
+        </div>
       </dl>
     </div>
     <div>
-      <h2 class="oc-text-bold oc-mb" v-text="$gettext('Preferences')" />
+      <div class="oc-flex oc-width-1-1">
+        <h2 class="oc-text-bold" v-text="$gettext('Preferences')" />
+      </div>
       <dl class="account-page-preferences oc-flex oc-flex-wrap">
         <div class="account-page-info-language oc-mb oc-width-1-2@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Language')" />
@@ -106,10 +110,7 @@
             />
           </dd>
         </div>
-        <div
-          v-if="isSettingsServiceSupported"
-          class="account-page-notification oc-mb oc-width-1-2@s"
-        >
+        <div v-if="showNotifications" class="account-page-notification oc-mb oc-width-1-2@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Notifications')" />
           <dd data-testid="notification-mails">
             <oc-checkbox
@@ -121,7 +122,7 @@
             />
           </dd>
         </div>
-        <div class="account-page-view-options oc-mb oc-width-1-2@s">
+        <div v-if="showWebDavDetails" class="account-page-view-options oc-mb oc-width-1-2@s">
           <dt class="oc-text-normal oc-text-muted" v-text="$gettext('View options')" />
           <dd data-testid="view-options">
             <oc-checkbox
@@ -149,7 +150,8 @@ import {
   useClientService,
   useGetMatchingSpace,
   useModals,
-  useStore
+  useStore,
+  useUserContext
 } from '@ownclouders/web-pkg'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
@@ -182,14 +184,18 @@ export default defineComponent({
     const viewOptionWebDavDetailsValue = ref<boolean>(store.getters['Files/areWebDavDetailsShown'])
     const sseEnabled = useCapabilityCoreSSE()
     const { dispatchModal } = useModals()
+    const dataExportEnabled = useCapabilityGraphPersonalDataExport()
+    const changeSelfPasswordDisabled = useCapabilityChangeSelfPasswordDisabled()
+    const isUserContext = useUserContext({ store })
 
     // FIXME: Use settings service capability when we have it
     const isSettingsServiceSupported = computed(
       () => !store.getters.configuration?.options?.runningOnEos
     )
 
-    const isChangePasswordDisabled = useCapabilityChangeSelfPasswordDisabled()
-    const isPersonalDataExportEnabled = useCapabilityGraphPersonalDataExport()
+    const isPersonalDataExportEnabled = computed(
+      () => unref(isUserContext) && unref(dataExportEnabled)
+    )
 
     const user = computed(() => {
       return store.getters.user
@@ -199,9 +205,18 @@ export default defineComponent({
     const showGdprExport = computed(() => {
       return unref(isPersonalDataExportEnabled) && unref(personalSpace)
     })
+    const showChangePassword = computed(() => {
+      return unref(isUserContext) && !unref(changeSelfPasswordDisabled)
+    })
+    const showAccountSection = computed(() => unref(isUserContext))
+    const showWebDavDetails = computed(() => unref(isUserContext))
+    const showNotifications = computed(
+      () => unref(isUserContext) && unref(isSettingsServiceSupported)
+    )
+    const showLogout = computed(() => unref(isUserContext) && configurationManager.logoutUrl)
 
     const loadValuesListTask = useTask(function* () {
-      if (!unref(isSettingsServiceSupported)) {
+      if (!unref(isUserContext) || !unref(isSettingsServiceSupported)) {
         return
       }
 
@@ -223,7 +238,7 @@ export default defineComponent({
     }).restartable()
 
     const loadAccountBundleTask = useTask(function* () {
-      if (!unref(isSettingsServiceSupported)) {
+      if (!unref(isUserContext) || !unref(isSettingsServiceSupported)) {
         return
       }
 
@@ -243,6 +258,10 @@ export default defineComponent({
     }).restartable()
 
     const loadGraphUserTask = useTask(function* () {
+      if (!unref(isUserContext)) {
+        return
+      }
+
       try {
         const { data } = yield clientService.graphAuthenticated.users.getMe()
         graphUser.value = data
@@ -321,27 +340,30 @@ export default defineComponent({
 
     const updateSelectedLanguage = async (option: LanguageOption) => {
       try {
-        await clientService.graphAuthenticated.users.editMe({
-          preferredLanguage: option.value
-        })
         selectedLanguageValue.value = option
         setCurrentLanguage({
           language,
           languageSetting: option.value
         })
-
-        if (unref(sseEnabled)) {
-          ;(clientService.sseAuthenticated as SSEAdapter).updateLanguage(language.current)
-        }
-
         store.commit('SET_LANGUAGE', language.current)
-        if (unref(personalSpace)) {
-          // update personal space name with new translation
-          store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
-            id: unref(personalSpace).id,
-            field: 'name',
-            value: $gettext('Personal')
+
+        if (unref(isUserContext)) {
+          await clientService.graphAuthenticated.users.editMe({
+            preferredLanguage: option.value
           })
+
+          if (unref(sseEnabled)) {
+            ;(clientService.sseAuthenticated as SSEAdapter).updateLanguage(language.current)
+          }
+
+          if (unref(personalSpace)) {
+            // update personal space name with new translation
+            store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
+              id: unref(personalSpace).id,
+              field: 'name',
+              value: $gettext('Personal')
+            })
+          }
         }
 
         store.dispatch('showMessage', {
@@ -398,7 +420,7 @@ export default defineComponent({
 
       selectedLanguageValue.value = unref(languageOptions)?.find(
         (languageOption) =>
-          languageOption.value === (unref(graphUser).preferredLanguage || language.current)
+          languageOption.value === (unref(graphUser)?.preferredLanguage || language.current)
       )
 
       const disableEmailNotificationsConfiguration = unref(valuesList)?.find(
@@ -425,9 +447,12 @@ export default defineComponent({
       updateDisableEmailNotifications,
       updateViewOptionsWebDavDetails,
       accountEditLink: store.getters.configuration?.options?.accountEditLink,
-      isChangePasswordDisabled,
+      showLogout,
       showGdprExport,
-      isSettingsServiceSupported,
+      showNotifications,
+      showAccountSection,
+      showChangePassword,
+      showWebDavDetails,
       groupNames,
       user,
       logoutUrl: configurationManager.logoutUrl,
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index 6625ba7e77f..d3d23503465 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -77,7 +77,7 @@ const routes = [
     path: '/account',
     name: 'account',
     component: Account,
-    meta: { title: $gettext('Account'), authContext: 'user' }
+    meta: { title: $gettext('Account'), authContext: 'hybrid' }
   }
 ]
 export const router = patchRouter(
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index ccaa5da3194..98a7286b173 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -3,17 +3,21 @@
 exports[`User Menu component when no quota and email is set the user menu does not contain a quota 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -38,17 +42,21 @@ exports[`User Menu component when no quota and email is set the user menu does n
 exports[`User Menu component when no quota and no email is set the user menu does not contain a quota 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -73,17 +81,21 @@ exports[`User Menu component when no quota and no email is set the user menu doe
 exports[`User Menu component when quota and no email is set renders a navigation without email 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -94,7 +106,7 @@ exports[`User Menu component when quota and no email is set renders a navigation
       </li>
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub class="oc-p-xs" fill-type="line" name="cloud"></oc-icon-stub>
-        <div class="storage-wrapper-text oc-width-1-1">
+        <div class="oc-width-1-1">
           <p class="oc-my-rm">
             <span class="oc-display-block">Personal storage (30% used)</span>
             <span class="oc-text-small">300 B of 1 kB used</span>
@@ -117,17 +129,21 @@ exports[`User Menu component when quota and no email is set renders a navigation
 exports[`User Menu component when quota is above 80% and below 90% renders a warning quota progress bar 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -138,7 +154,7 @@ exports[`User Menu component when quota is above 80% and below 90% renders a war
       </li>
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub class="oc-p-xs" fill-type="line" name="cloud"></oc-icon-stub>
-        <div class="storage-wrapper-text oc-width-1-1">
+        <div class="oc-width-1-1">
           <p class="oc-my-rm">
             <span class="oc-display-block">Personal storage (81% used)</span>
             <span class="oc-text-small">810 B of 1 kB used</span>
@@ -161,17 +177,21 @@ exports[`User Menu component when quota is above 80% and below 90% renders a war
 exports[`User Menu component when quota is above 90% renders a danger quota progress bar 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -182,7 +202,7 @@ exports[`User Menu component when quota is above 90% renders a danger quota prog
       </li>
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub class="oc-p-xs" fill-type="line" name="cloud"></oc-icon-stub>
-        <div class="storage-wrapper-text oc-width-1-1">
+        <div class="oc-width-1-1">
           <p class="oc-my-rm">
             <span class="oc-display-block">Personal storage (91% used)</span>
             <span class="oc-text-small">910 B of 1 kB used</span>
@@ -205,17 +225,21 @@ exports[`User Menu component when quota is above 90% renders a danger quota prog
 exports[`User Menu component when quota is below 80% renders a primary quota progress bar 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -226,7 +250,7 @@ exports[`User Menu component when quota is below 80% renders a primary quota pro
       </li>
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub class="oc-p-xs" fill-type="line" name="cloud"></oc-icon-stub>
-        <div class="storage-wrapper-text oc-width-1-1">
+        <div class="oc-width-1-1">
           <p class="oc-my-rm">
             <span class="oc-display-block">Personal storage (30% used)</span>
             <span class="oc-text-small">300 B of 1 kB used</span>
@@ -249,17 +273,21 @@ exports[`User Menu component when quota is below 80% renders a primary quota pro
 exports[`User Menu component when quota is not defined renders no percentag of total and no progress bar 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -270,7 +298,7 @@ exports[`User Menu component when quota is not defined renders no percentag of t
       </li>
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub class="oc-p-xs" fill-type="line" name="cloud"></oc-icon-stub>
-        <div class="storage-wrapper-text oc-width-1-1">
+        <div class="oc-width-1-1">
           <p class="oc-my-rm">
             <span class="oc-display-block">Personal storage</span>
             <span class="oc-text-small">910 B used</span>
@@ -293,17 +321,21 @@ exports[`User Menu component when quota is not defined renders no percentag of t
 exports[`User Menu component when quota is unlimited renders no percentag of total and no progress bar 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <avatar-image-stub class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
+    <avatar-image-stub class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" userid="einstein" width="32"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li class="profile-info-wrapper oc-pl-s">
+        <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
+        <span class="oc-width-1-1 oc-py-xs">
+          <span class="oc-display-block"></span>
+          <!--v-if-->
+        </span>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
-          <avatar-image-stub userid="einstein" width="32"></avatar-image-stub>
-          <span class="profile-info-wrapper oc-py-xs">
-            <span class="oc-display-block"></span>
-            <!--v-if-->
-          </span>
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
         </oc-button-stub>
       </li>
       <li>
@@ -314,7 +346,7 @@ exports[`User Menu component when quota is unlimited renders no percentag of tot
       </li>
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub class="oc-p-xs" fill-type="line" name="cloud"></oc-icon-stub>
-        <div class="storage-wrapper-text oc-width-1-1">
+        <div class="oc-width-1-1">
           <p class="oc-my-rm">
             <span class="oc-display-block">Personal storage</span>
             <span class="oc-text-small">300 B used</span>
@@ -337,14 +369,20 @@ exports[`User Menu component when quota is unlimited renders no percentag of tot
 exports[`User Menu component when user is not logged in renders a navigation with login button 1`] = `
 <nav aria-label="Account menu">
   <oc-button-stub appearance="raw" aria-label="My Account" class="oc-topbar-personal" id="_userMenuButton">
-    <div aria-hidden="true" class="oc-topbar-unauthenticated-avatar oc-flex-inline oc-flex-center oc-flex-middle" data-test-item-name="User Menu login" focusable="false">
+    <div aria-hidden="true" class="oc-topbar-avatar oc-topbar-unauthenticated-avatar oc-flex-inline oc-flex-center oc-flex-middle" data-test-item-name="User Menu login" focusable="false">
       <span class="oc-avatar-item" style="--icon-color: var(--oc-color-swatch-brand-default); --width: 32px;">
-        <oc-icon-stub accessiblelabel="" color="" filltype="line" name="user-add" size="small" type="span" variation="passive"></oc-icon-stub>
+        <oc-icon-stub accessiblelabel="" color="" filltype="line" name="user" size="small" type="span" variation="passive"></oc-icon-stub>
       </span>
     </div>
   </oc-button-stub>
   <oc-drop-stub class="oc-overflow-hidden" close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
     <oc-list-stub class="user-menu-list">
+      <li>
+        <oc-button-stub appearance="raw" id="oc-topbar-account-manage" to="[object Object]" type="router-link">
+          <oc-icon-stub class="oc-p-xs" fill-type="line" name="settings-4"></oc-icon-stub>
+          <span>Preferences</span>
+        </oc-button-stub>
+      </li>
       <li>
         <oc-button-stub appearance="raw" id="oc-topbar-account-login" to="[object Object]" type="router-link">
           <oc-icon-stub class="oc-p-xs" fill-type="line" name="login-box"></oc-icon-stub>
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index 93392b416f8..d80158af98a 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -30,6 +30,7 @@ exports[`account page account information displays basic user information 1`] =
     </dd>
   </div>
   <!--v-if-->
+  <!--v-if-->
 </dl>
 `;
 
diff --git a/tests/e2e/cucumber/features/smoke/languageChange.feature b/tests/e2e/cucumber/features/smoke/languageChange.feature
index 0cd13dfaaa1..78d0715b7db 100644
--- a/tests/e2e/cucumber/features/smoke/languageChange.feature
+++ b/tests/e2e/cucumber/features/smoke/languageChange.feature
@@ -22,6 +22,7 @@ Feature: language settings
     And "Alice" logs in
     And "Alice" opens the user menu
     And "Alice" changes the language to "Deutsch - German"
+    Then "Alice" should see the following account menu title "Konto"
     When "Alice" logs out
     And "Alice" logs in
     Then "Alice" should see the following notifications
@@ -29,4 +30,21 @@ Feature: language settings
       | Brian Murphy hat check_message mit Ihnen geteilt |
     And "Alice" logs out
 
+  Scenario: anonymous user language change
+    When "Alice" logs in
+    And "Alice" opens the "files" app
+    And "Alice" creates the following resources
+      | resource     | type   |
+      | folderPublic | folder |
+    And "Alice" uploads the following resources
+      | resource  | to           |
+      | lorem.txt | folderPublic |
+    And "Alice" creates a public link for the resource "folderPublic" with password "%public%" using the sidebar panel
+    And "Alice" renames the most recently created public link of resource "folderPublic" to "myPublicLink"
+    When "Anonymous" opens the public link "myPublicLink"
+    And "Anonymous" unlocks the public link with password "%public%"
+    And "Anonymous" opens the user menu
+    And "Anonymous" changes the language to "Deutsch - German"
+    Then "Anonymous" should see the following account menu title "Konto"
+
 
diff --git a/tests/e2e/cucumber/steps/ui/accountMenu.ts b/tests/e2e/cucumber/steps/ui/accountMenu.ts
index 5c5314623ac..a79b0f8f24b 100644
--- a/tests/e2e/cucumber/steps/ui/accountMenu.ts
+++ b/tests/e2e/cucumber/steps/ui/accountMenu.ts
@@ -54,7 +54,18 @@ When(
   async function (this: World, stepUser: string, language: string): Promise<void> {
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const accountObject = new objects.account.Account({ page })
-    const expectedLanguage = await accountObject.changeLanguage(language)
+    const isAnonymousUser = stepUser === 'Anonymous'
+    const expectedLanguage = await accountObject.changeLanguage(language, isAnonymousUser)
     expect(expectedLanguage).toBe(language)
   }
 )
+
+Then(
+  '{string} should see the following account menu title {string}',
+  async function (this: World, stepUser: string, title: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const accountObject = new objects.account.Account({ page })
+    const pageTitle = await accountObject.getTitle()
+    expect(pageTitle).toEqual(title)
+  }
+)
diff --git a/tests/e2e/support/objects/account/actions.ts b/tests/e2e/support/objects/account/actions.ts
index 379ce0895d5..847375a5f6c 100644
--- a/tests/e2e/support/objects/account/actions.ts
+++ b/tests/e2e/support/objects/account/actions.ts
@@ -1,7 +1,7 @@
 import { Page } from '@playwright/test'
 import util from 'util'
 
-const accountMenuButton = '.oc-topbar-personal-avatar'
+const accountMenuButton = '.oc-topbar-avatar'
 const quotaValue = '.storage-wrapper-text .oc-text-small'
 const accountManageButton = '#oc-topbar-account-manage'
 const infoValue = '.account-page-info-%s dd'
@@ -10,6 +10,7 @@ const downloadExportButton = '[data-testid="download-export-btn"]'
 const languageInput = '[data-testid="language"] .vs__search'
 const languageValueDropDown = `.vs__dropdown-menu :text-is("%s")`
 const languageValue = '[data-testid="language"] .vs__selected'
+const accountPageTitle = '#account-page-title'
 
 export const getQuotaValue = async (args: { page: Page }): Promise<string> => {
   const { page } = args
@@ -79,18 +80,35 @@ export const downloadGdprExport = async (args: { page: Page }): Promise<string>
   return download.suggestedFilename()
 }
 
-export const changeLanguage = async (args: { page: Page; language: string }): Promise<string> => {
-  const { page, language } = args
+export const changeLanguage = async (args: {
+  page: Page
+  language: string
+  isAnonymousUser: boolean
+}): Promise<string> => {
+  const { page, language, isAnonymousUser } = args
   await page.locator(languageInput).waitFor()
+  await page.locator(languageInput).click()
   await page.locator(languageInput).pressSequentially(language)
-  await Promise.all([
-    page.waitForResponse(
-      (res) =>
-        res.url().includes('graph/v1.0/me') &&
-        res.request().method() === 'PATCH' &&
-        res.status() === 200
-    ),
-    page.locator(util.format(languageValueDropDown, language)).press('Enter')
-  ])
+  const promises = []
+
+  if (!isAnonymousUser) {
+    promises.push(
+      page.waitForResponse(
+        (res) =>
+          res.url().includes('graph/v1.0/me') &&
+          res.request().method() === 'PATCH' &&
+          res.status() === 200
+      )
+    )
+  }
+
+  promises.push(page.locator(util.format(languageValueDropDown, language)).press('Enter'))
+  await Promise.all(promises)
+
   return (await page.locator(languageValue).textContent()).trim()
 }
+
+export const getTitle = async (args: { page: Page }): Promise<string> => {
+  const { page } = args
+  return page.locator(accountPageTitle).textContent()
+}
diff --git a/tests/e2e/support/objects/account/index.ts b/tests/e2e/support/objects/account/index.ts
index 4d1a4cfe11e..808d91e6460 100644
--- a/tests/e2e/support/objects/account/index.ts
+++ b/tests/e2e/support/objects/account/index.ts
@@ -28,7 +28,11 @@ export class Account {
     return po.downloadGdprExport({ page: this.#page })
   }
 
-  changeLanguage(language): Promise<string> {
-    return po.changeLanguage({ page: this.#page, language })
+  changeLanguage(language, isAnonymousUser = false): Promise<string> {
+    return po.changeLanguage({ page: this.#page, language, isAnonymousUser })
+  }
+
+  getTitle(): Promise<string> {
+    return po.getTitle({ page: this.#page })
   }
 }