Enable preferences for unauth accounts

owncloud · Dec 23, 2023 · 62d5ca0 · 62d5ca0
1 parent 4576868
commit 62d5ca0
Show file tree

Hide file tree

Showing 17 changed files with 338 additions and 162 deletions.
diff --git a/changelog/unreleased/enhancement-enable-user-preferences-in-public-links 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-    }
   }
 }