Privacy statement in account menu (authenticated)

changelog/unreleased/enhancement-add-imprint-privacy-url

@@ -0,0 +1,6 @@
+Enhancement: Privacy statement in account menu
+
+We've added the option to add an imprint and privacy statement via the config.
+
+https://github.com/owncloud/web/issues/9174
+https://github.com/owncloud/web/pull/9180

packages/web-runtime/src/components/Topbar/UserMenu.vue

@@ -32,6 +32,7 @@
       mode="click"
       close-on-click
       padding-size="small"
+      class="oc-overflow-hidden"
     >
       <oc-list class="user-menu-list">
         <template v-if="!userId">
@@ -102,6 +103,15 @@
           </li>
         </template>
       </oc-list>
+      <div v-if="imprintUrl || privacyUrl" class="imprint-footer oc-py-s oc-mt-m oc-text-center">
+        <oc-button v-if="imprintUrl" type="a" appearance="raw" :href="imprintUrl" target="_blank"
+          ><span v-text="$gettext('Imprint')"
+        /></oc-button>
+        <span v-if="privacyUrl">·</span>
+        <oc-button v-if="privacyUrl" type="a" appearance="raw" :href="privacyUrl" target="_blank"
+          ><span v-text="$gettext('Privacy')"
+        /></oc-button>
+      </div>
     </oc-drop>
   </nav>
 </template>
@@ -112,7 +122,7 @@ import { mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import isNil from 'lodash-es/isNil'
 import { authService } from '../../services/auth'
-import { useCapabilitySpacesEnabled, useRoute } from 'web-pkg/src/composables'
+import { useCapabilitySpacesEnabled, useRoute, useStore } from 'web-pkg/src/composables'
 import { OcDrop } from 'design-system/src/components'
 
 export default defineComponent({
@@ -131,9 +141,24 @@ export default defineComponent({
         query: { redirectUrl: unref(route).fullPath }
       }
     })
+    const store = useStore()
+    const imprintUrl = computed(() => {
+      return (
+        store.getters.configuration.currentTheme.general?.imprintUrl ||
+        store.getters.configuration.options.imprintUrl
+      )
+    })
+    const privacyUrl = computed(() => {
+      return (
+        store.getters.configuration.currentTheme.general?.privacyUrl ||
+        store.getters.configuration.options.privacyUrl
+      )
+    })
     return {
       hasSpaces: useCapabilitySpacesEnabled(),
-      loginLink
+      loginLink,
+      imprintUrl,
+      privacyUrl
     }
   },
   computed: {
@@ -258,4 +283,15 @@ export default defineComponent({
     }
   }
 }
+
+.imprint-footer {
+  background-color: var(--oc-color-background-hover);
+  margin-left: -8px;
+  width: calc(100% + 16px);
+  margin-bottom: -8px !important;
+  a {
+    font-size: var(--oc-font-size-medium) !important;
+    color: var(--oc-color-text-default);
+  }
+}
 </style>

packages/web-runtime/src/store/config.ts

@@ -18,7 +18,9 @@ const state = {
   currentTheme: {
     general: {
       name: '',
-      slogan: ''
+      slogan: '',
+      privacyUrl: '',
+      imprintUrl: ''
     },
     logo: {
       topbar: '',
@@ -59,7 +61,9 @@ const state = {
     cernFeatures: false,
     sharingRecipientsPerPage: 200,
     contextHelpersReadMore: true,
-    openLinksWithDefaultApp: true
+    openLinksWithDefaultApp: true,
+    privacyUrl: '',
+    imprintUrl: ''
   }
 }
 

packages/web-runtime/tests/unit/components/Topbar/UserMenu.spec.ts

@@ -118,15 +118,97 @@ describe('User Menu component', () => {
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
+  describe('imprint and privacy urls', () => {
+    it('should renders imprint and privacy section if urls are defined', () => {
+      const wrapper = getMountedWrapper(
+        {
+          used: dangerQuota,
+          total: totalQuota,
+          relative: dangerRelativeQuota,
+          definition: 'none'
+        },
+        email,
+        false,
+        'https://imprint.url',
+        'https://privacy.url'
+      )
+      const element = wrapper.find('.imprint-footer')
+      expect(element.exists()).toBeTruthy()
+      const output = element.html()
+      expect(output).toContain('https://imprint.url')
+      expect(output).toContain('https://privacy.url')
+    })
+    it('should use theme url values over config url values', () => {
+      const wrapper = getMountedWrapper(
+        {
+          used: dangerQuota,
+          total: totalQuota,
+          relative: dangerRelativeQuota,
+          definition: 'none'
+        },
+        email,
+        false,
+        'https://imprint.url.theme',
+        'https://privacy.url.theme',
+        'https://imprint.url.config',
+        'https://privacy.url.config'
+      )
+      const element = wrapper.find('.imprint-footer')
+      const output = element.html()
+      expect(output).toContain('https://imprint.url.theme')
+      expect(output).toContain('https://privacy.url.theme')
+    })
+    it('should use config url values as fallback', () => {
+      const wrapper = getMountedWrapper(
+        {
+          used: dangerQuota,
+          total: totalQuota,
+          relative: dangerRelativeQuota,
+          definition: 'none'
+        },
+        email,
+        false,
+        '',
+        '',
+        'https://imprint.url.config',
+        'https://privacy.url.config'
+      )
+      const element = wrapper.find('.imprint-footer')
+      const output = element.html()
+      expect(output).toContain('https://imprint.url.config')
+      expect(output).toContain('https://privacy.url.config')
+    })
+  })
 })
 
-const getMountedWrapper = (quota, userEmail, noUser = false) => {
+const getMountedWrapper = (
+  quota,
+  userEmail,
+  noUser = false,
+  imprintUrlTheme = '',
+  privacyUrlTheme = '',
+  imprintUrlConfig = '',
+  privacyUrlConfig = ''
+) => {
   const mocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ path: '/files', fullPath: '/files' })
     })
   }
   const storeOptions = defaultStoreMockOptions
+  storeOptions.getters.configuration.mockImplementation(() => ({
+    currentTheme: {
+      general: {
+        imprintUrl: imprintUrlTheme,
+        privacyUrl: privacyUrlTheme
+      }
+    },
+    options: {
+      imprintUrl: imprintUrlConfig,
+      privacyUrl: privacyUrlConfig
+    }
+  }))
+
   storeOptions.getters.quota.mockImplementation(() => quota)
   storeOptions.getters.user.mockImplementation(() => {
     return noUser

packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`User Menu component when no quota and email is set the user menu does n
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -30,6 +30,7 @@ exports[`User Menu component when no quota and email is set the user menu does n
       </li>
       <!--v-if-->
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -39,7 +40,7 @@ exports[`User Menu component when no quota and no email is set the user menu doe
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -64,6 +65,7 @@ exports[`User Menu component when no quota and no email is set the user menu doe
       </li>
       <!--v-if-->
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -73,7 +75,7 @@ exports[`User Menu component when quota and no email is set renders a navigation
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -107,6 +109,7 @@ exports[`User Menu component when quota and no email is set renders a navigation
         </div>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -116,7 +119,7 @@ exports[`User Menu component when quota is above 80% and below 90% renders a war
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -150,6 +153,7 @@ exports[`User Menu component when quota is above 80% and below 90% renders a war
         </div>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -159,7 +163,7 @@ exports[`User Menu component when quota is above 90% renders a danger quota prog
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -193,6 +197,7 @@ exports[`User Menu component when quota is above 90% renders a danger quota prog
         </div>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -202,7 +207,7 @@ exports[`User Menu component when quota is below 80% renders a primary quota pro
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -236,6 +241,7 @@ exports[`User Menu component when quota is below 80% renders a primary quota pro
         </div>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -245,7 +251,7 @@ exports[`User Menu component when quota is not defined renders no percentag of t
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -279,6 +285,7 @@ exports[`User Menu component when quota is not defined renders no percentag of t
         </div>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -288,7 +295,7 @@ exports[`User Menu component when quota is unlimited renders no percentag of tot
   <oc-button-stub appearance="raw" aria-label="User Menu" 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>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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">
@@ -322,6 +329,7 @@ exports[`User Menu component when quota is unlimited renders no percentag of tot
         </div>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;
@@ -335,7 +343,7 @@ exports[`User Menu component when user is not logged in renders a navigation wit
       </span>
     </div>
   </oc-button-stub>
-  <oc-drop-stub close-on-click="" drop-id="account-info-container" mode="click" padding-size="small" toggle="#_userMenuButton">
+  <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-login" to="[object Object]" type="router-link">
@@ -344,6 +352,7 @@ exports[`User Menu component when user is not logged in renders a navigation wit
         </oc-button-stub>
       </li>
     </oc-list-stub>
+    <!--v-if-->
   </oc-drop-stub>
 </nav>
 `;

packages/web-runtime/themes/owncloud/theme.json

@@ -1,15 +1,17 @@
 {
   "common": {
-      "name": "ownCloud",
-      "slogan": "ownCloud – A safe home for all your data",
-      "logo": "themes/owncloud/assets/logo.svg"
+    "name": "ownCloud",
+    "slogan": "ownCloud – A safe home for all your data",
+    "logo": "themes/owncloud/assets/logo.svg"
   },
   "ios": {},
   "web": {
     "default": {
       "general": {
         "name": "ownCloud",
-        "slogan": "ownCloud – A safe home for all your data"
+        "slogan": "ownCloud – A safe home for all your data",
+        "privacyUrl": "",
+        "imprintUrl": ""
       },
       "logo": {
         "topbar": "themes/owncloud/assets/logo.svg",
@@ -78,7 +80,9 @@
     "default-dark": {
       "general": {
         "name": "ownCloud",
-        "slogan": "ownCloud – A safe home for all your data"
+        "slogan": "ownCloud – A safe home for all your data",
+        "privacyUrl": "",
+        "imprintUrl": ""
       },
       "logo": {
         "topbar": "themes/owncloud/assets/logo.svg",