From 708a60ad63459f289173f1ad08edf82f9b088821 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 20 Sep 2023 09:12:26 +0200
Subject: [PATCH 1/3] load login url from config

---
 .../enhancement-make-login-url-configurable   |  7 ++++
 docs/getting-started.md                       |  4 +++
 packages/web-pkg/src/configuration/manager.ts |  1 +
 packages/web-pkg/src/configuration/types.ts   |  1 +
 .../web-runtime/src/pages/accessDenied.vue    | 35 ++++++++++++++-----
 5 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-make-login-url-configurable

diff --git a/changelog/unreleased/enhancement-make-login-url-configurable b/changelog/unreleased/enhancement-make-login-url-configurable
new file mode 100644
index 00000000000..8c4cc14a6fa
--- /dev/null
+++ b/changelog/unreleased/enhancement-make-login-url-configurable
@@ -0,0 +1,7 @@
+Enhancement: Make login url configurable
+
+We've added a new configuration option loginUrl to web, this is helpful if you use an external IdP and the login
+is out of web/OCIS context.
+
+https://github.com/owncloud/ocis/pull/7317
+https://github.com/owncloud/web/issues/9707
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 9bd27eb20e3..31c1c0d17f8 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -76,6 +76,10 @@ Depending on the backend you are using, there are sample config files provided i
 - `options.contextHelpersReadMore` Specifies whether the "Read more" link should be displayed or not.
 - `options.openLinksWithDefaultApp` Specifies whether single file link shares should be opened with default app or not.
 - `options.tokenStorageLocal` Specifies whether the access token will be stored in the local storage when set to `true` or in the session storage when set to `false`. If stored in the local storage, login state will be persisted across multiple browser tabs, means no additional logins are required. Defaults to `true`.
+- `options.loginUrl` Specifies the target URL to the login page. This is helpful when an external IdP is used. This option is disabled by default. Example URL like: 'https://www.myidp.com/login'.
+- `options.logoutUrl` Adds a link to the user's profile page to point him to an external page, where he can manage his session and devices. This is helpful when an external IdP is used. This option is disabled by default.
+- `options.imprintUrl` Specifies the target URL for the imprint link valid for the ocis instance in the account menu.
+- `options.privacyUrl` Specifies the target URL for the privacy link valid for the ocis instance in the account menu.
 
 #### Scripts and Styles
 
diff --git a/packages/web-pkg/src/configuration/manager.ts b/packages/web-pkg/src/configuration/manager.ts
index 1b8ddfb7fbb..29873f68c4e 100644
--- a/packages/web-pkg/src/configuration/manager.ts
+++ b/packages/web-pkg/src/configuration/manager.ts
@@ -98,6 +98,7 @@ export class ConfigurationManager {
     )
     set(this.optionsConfiguration, 'upload.companionUrl', get(options, 'upload.companionUrl', ''))
     set(this.optionsConfiguration, 'tokenStorageLocal', get(options, 'tokenStorageLocal', true))
+    set(this.optionsConfiguration, 'loginUrl', get(options, 'loginUrl', ''))
   }
 
   get options(): OptionsConfiguration {
diff --git a/packages/web-pkg/src/configuration/types.ts b/packages/web-pkg/src/configuration/types.ts
index 3f3f6e4eda4..bb352c3fa92 100644
--- a/packages/web-pkg/src/configuration/types.ts
+++ b/packages/web-pkg/src/configuration/types.ts
@@ -18,6 +18,7 @@ export interface OptionsConfiguration {
   routing?: RoutingOptionsConfiguration
   upload?: UploadOptionsConfiguration
   logoutUrl?: string
+  loginUrl?: string
   contextHelpersReadMore?: boolean
   contextHelpers?: boolean
   openAppsInTab?: boolean
diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index c5af8ea63f0..67d77cf5114 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -22,12 +22,11 @@
     </div>
     <oc-button
       id="exitAnchor"
-      type="router-link"
       class="oc-mt-m oc-width-medium"
-      :to="logoutLink"
       size="large"
       appearance="filled"
       variation="primary"
+      v-bind="logoutButtonsAttrs"
       v-text="navigateToLoginText"
     />
   </div>
@@ -35,14 +34,16 @@
 
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
-import { useRoute, useStore } from 'web-pkg'
+import { queryItemAsString, useConfigurationManager, useRouteQuery, useStore } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'AccessDeniedPage',
   setup() {
     const store = useStore()
-    const route = useRoute()
+    const configurationManager = useConfigurationManager()
+    const redirectUrlQuery = useRouteQuery('redirectUrl')
+
     const { $gettext } = useGettext()
 
     const logoImg = computed(() => {
@@ -69,12 +70,28 @@ export default defineComponent({
     const navigateToLoginText = computed(() => {
       return $gettext('Log in again')
     })
-    const logoutLink = computed(() => {
-      const redirectUrl = unref(route).query?.redirectUrl
+    const logoutButtonsAttrs = computed(() => {
+      const redirectUrl = queryItemAsString(unref(redirectUrlQuery))
+
+      if (configurationManager.options.loginUrl) {
+        const configLoginURL = new URL(encodeURI(configurationManager.options.loginUrl))
+        if (redirectUrl) {
+          configLoginURL.searchParams.append('redirectUrl', redirectUrl)
+        }
+        return {
+          type: 'a',
+          href: configLoginURL.toString()
+        }
+      }
+
       return {
         name: 'login',
-        query: {
-          ...(redirectUrl && { redirectUrl })
+        type: 'router-link',
+        to: {
+          name: 'login',
+          query: {
+            ...(redirectUrl && { redirectUrl })
+          }
         }
       }
     })
@@ -86,7 +103,7 @@ export default defineComponent({
       footerSlogan,
       navigateToLoginText,
       accessDeniedHelpUrl,
-      logoutLink
+      logoutButtonsAttrs
     }
   }
 })

From f6c3050d76d7fc7399d211041f420f133383f158 Mon Sep 17 00:00:00 2001
From: Jan <jan.alexander.ackermann@outlook.com>
Date: Tue, 26 Sep 2023 20:22:56 +0200
Subject: [PATCH 2/3] Add unit tests

---
 .../web-runtime/src/pages/accessDenied.vue    | 10 ++-
 packages/web-runtime/src/store/config.ts      |  1 +
 .../__snapshots__/accessDenied.spec.ts.snap   | 18 +++++
 .../tests/unit/pages/accessDenied.spec.ts     | 67 +++++++++++++++++++
 4 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
 create mode 100644 packages/web-runtime/tests/unit/pages/accessDenied.spec.ts

diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 67d77cf5114..4672e054a4e 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -47,13 +47,13 @@ export default defineComponent({
     const { $gettext } = useGettext()
 
     const logoImg = computed(() => {
-      return store.getters.configuration.currentTheme.logo.login
+      return store.getters.configuration?.currentTheme?.logo?.login
     })
 
     const accessDeniedHelpUrl = computed(() => {
       return (
-        store.getters.configuration.commonTheme.accessDeniedHelpUrl ||
-        store.getters.configuration.options.accessDeniedHelpUrl
+        store.getters.configuration?.commonTheme?.accessDeniedHelpUrl ||
+        store.getters.configuration?.options?.accessDeniedHelpUrl
       )
     })
     const cardTitle = computed(() => {
@@ -65,14 +65,13 @@ export default defineComponent({
       )
     })
     const footerSlogan = computed(() => {
-      return store.getters.configuration.currentTheme.general.slogan
+      return store.getters.configuration?.currentTheme?.general?.slogan
     })
     const navigateToLoginText = computed(() => {
       return $gettext('Log in again')
     })
     const logoutButtonsAttrs = computed(() => {
       const redirectUrl = queryItemAsString(unref(redirectUrlQuery))
-
       if (configurationManager.options.loginUrl) {
         const configLoginURL = new URL(encodeURI(configurationManager.options.loginUrl))
         if (redirectUrl) {
@@ -83,7 +82,6 @@ export default defineComponent({
           href: configLoginURL.toString()
         }
       }
-
       return {
         name: 'login',
         type: 'router-link',
diff --git a/packages/web-runtime/src/store/config.ts b/packages/web-runtime/src/store/config.ts
index c58a80c522e..6ffd198a866 100644
--- a/packages/web-runtime/src/store/config.ts
+++ b/packages/web-runtime/src/store/config.ts
@@ -69,6 +69,7 @@ const state = {
     contextHelpersReadMore: true,
     openLinksWithDefaultApp: true,
     tokenStorageLocal: true,
+    loginUrl: '',
     privacyUrl: '',
     imprintUrl: '',
     accessDeniedHelpUrl: ''
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
new file mode 100644
index 00000000000..c5329f583f6
--- /dev/null
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`access denied page renders component 1`] = `
+<div class="oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
+  <div class="oc-login-card">
+    <img alt="" aria-hidden="true" class="oc-login-logo">
+    <div class="oc-login-card-body oc-width-medium">
+      <h2 class="oc-login-card-title">Not logged in</h2>
+      <p>This could be because of a routine safety log out, or because your account is either inactive or not yet authorized for use. Please try logging in after a while or seek help from your Administrator.</p>
+      <!--v-if-->
+    </div>
+    <div class="oc-login-card-footer oc-pt-rm">
+      <p></p>
+    </div>
+  </div>
+  <a attrs="[object Object]" class="oc-button oc-rounded oc-button-l oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled oc-mt-m oc-width-medium" id="exitAnchor" name="login">Log in again</a>
+</div>
+`;
diff --git a/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts b/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
new file mode 100644
index 00000000000..34f8e33c95c
--- /dev/null
+++ b/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
@@ -0,0 +1,67 @@
+import accessDenied from '../../../src/pages/accessDenied.vue'
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  mount,
+  defaultStoreMockOptions,
+  RouteLocation
+} from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+
+const selectors = {
+  logInAgainButton: '#exitAnchor'
+}
+
+import { ConfigurationManager, useConfigurationManager, useRequest } from 'web-pkg/src'
+
+jest.mock('web-pkg/src/composables/configuration/useConfigurationManager')
+
+describe('access denied page', () => {
+  it('renders component', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  describe('"Log in again" button', () => {
+    it('navigates to "loginUrl" if set in config', () => {
+      const loginUrl = 'https://myidp.int/login'
+      const { wrapper } = getWrapper({ loginUrl })
+
+      const logInAgainButton = wrapper.find(selectors.logInAgainButton)
+      const loginAgainUrl = new URL(logInAgainButton.attributes().href)
+      loginAgainUrl.search = ''
+
+      expect(logInAgainButton.exists()).toBeTruthy()
+      expect(loginAgainUrl.toString()).toEqual(loginUrl)
+    })
+  })
+})
+
+function getWrapper({ loginUrl = '' } = {}) {
+  const mocks = {
+    ...defaultComponentMocks()
+  }
+  const storeOptions = { ...defaultStoreMockOptions }
+
+  jest.mocked(useConfigurationManager).mockImplementation(() =>
+    mock<ConfigurationManager>({
+      options: {
+        loginUrl
+      }
+    } as any)
+  )
+
+  const store = createStore(storeOptions)
+
+  return {
+    storeOptions,
+    mocks,
+    wrapper: mount(accessDenied, {
+      global: {
+        plugins: [...defaultPlugins(), store],
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}

From 6cd6f8dba162a42d6790890fff73e4ca3016bd1b Mon Sep 17 00:00:00 2001
From: Jan <jan.alexander.ackermann@outlook.com>
Date: Tue, 26 Sep 2023 20:25:25 +0200
Subject: [PATCH 3/3] Lint

---
 packages/web-runtime/tests/unit/pages/accessDenied.spec.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts b/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
index 34f8e33c95c..013ce802205 100644
--- a/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
@@ -4,8 +4,7 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   mount,
-  defaultStoreMockOptions,
-  RouteLocation
+  defaultStoreMockOptions
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 
@@ -13,7 +12,7 @@ const selectors = {
   logInAgainButton: '#exitAnchor'
 }
 
-import { ConfigurationManager, useConfigurationManager, useRequest } from 'web-pkg/src'
+import { ConfigurationManager, useConfigurationManager } from 'web-pkg/src'
 
 jest.mock('web-pkg/src/composables/configuration/useConfigurationManager')