Theme redirect page

changelog/unreleased/theme-redirect

@@ -0,0 +1,6 @@
+Enhancement: Theme redirect and access denied pages
+
+We've adjusted the theme on OIDC redirect and access denied pages to use correct logo and background.
+We've also added those two values into the theming capabilities.
+
+https://github.com/owncloud/phoenix/pull/4373

changelog/unreleased/update-ods

@@ -0,0 +1,6 @@
+Enhancement: Update ODS to 2.0.0
+
+We've updated the ownCloud design system to version 2.0.0.
+
+https://github.com/owncloud/owncloud-design-system/releases/tag/v2.0.0
+https://github.com/owncloud/phoenix/pull/4373

package.json

@@ -98,7 +98,7 @@
  "node-fs-extra": "^0.8.2",
  "npm-run-all": "^4.1.5",
  "oidc-client": "^1.9.1",
- "owncloud-design-system": "^1.15.0",
+ "owncloud-design-system": "^2.0.0",
  "owncloud-sdk": "^1.0.0-740",
  "p-limit": "^2.2.1",
  "p-queue": "^6.1.1",

src/pages/accessDenied.vue

@@ -1,9 +1,11 @@
 <template>
- <div class="oc-login" uk-height-viewport>
+ <div
+ class="oc-login"
+ uk-height-viewport
+ :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
+ >
  <div class="oc-login-card uk-position-center">
- <h1 v-translate class="oc-login-logo">
- ownCloud
- </h1>
+ <img class="oc-login-logo" :src="logoImg" :alt="configuration.theme.general.name" />
  <div class="oc-login-card-body uk-width-large">
  <h3 class="oc-login-card-title">
  <span v-translate>Login Error</span>
@@ -62,6 +64,14 @@ export default {
  return this.configuration.theme.general.helpDeskLinkText
  }
  return ''
+ },
+
+ logoImg() {
+ return this.configuration.theme.logo.login
+ },
+
+ backgroundImg() {
+ return this.configuration.theme.loginPage.backgroundImg
  }
  },
  methods: {

src/pages/oidcCallback.vue

@@ -1,9 +1,11 @@
 <template>
- <div class="oc-login" uk-height-viewport>
+ <div
+ class="oc-login"
+ :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
+ uk-height-viewport
+ >
  <div class="oc-login-card uk-position-center">
- <h1 v-translate class="oc-login-logo">
- ownCloud
- </h1>
+ <img class="oc-login-logo" :src="logoImg" :alt="configuration.theme.general.name" />
  <div v-show="error" class="oc-login-card-body">
  <h3 class="oc-login-card-title">
  <translate>Authentication failed</translate>
@@ -38,9 +40,19 @@ export default {
  error: false
  }
  },
+
  computed: {
- ...mapGetters(['configuration'])
+ ...mapGetters(['configuration']),
+
+ backgroundImg() {
+ return this.configuration.theme.loginPage.backgroundImg
+ },
+
+ logoImg() {
+ return this.configuration.theme.logo.login
+ }
  },
+
  mounted() {
  this.$nextTick(() => {
  if (this.$route.query.error) {

src/store/config.js

@@ -24,13 +24,15 @@ const state = {
  },
  logo: {
  sidebar: '',
- favicon: ''
+ favicon: '',
+ login: ''
  },
  filesList: {
  hideDefaultStatusIndicators: false
  },
  loginPage: {
- autoRedirect: true
+ autoRedirect: true,
+ backgroundImg: ''
  }
  },
  options: {

themes/owncloud.json

@@ -5,12 +5,14 @@
  },
  "logo": {
  "sidebar": "themes/owncloud/assets/logo.svg",
- "favicon": "themes/owncloud/favicon.jpg"
+ "favicon": "themes/owncloud/favicon.jpg",
+ "login": "themes/owncloud/assets/logo.svg"
  },
  "filesList": {
  "hideDefaultStatusIndicators": false
  },
  "loginPage": {
- "autoRedirect": true
+ "autoRedirect": true,
+ "backgroundImg": "themes/owncloud/assets/loginBackground.jpg"
  }
 }

yarn.lock

@@ -6907,10 +6907,10 @@ os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-owncloud-design-system@^1.15.0:
- version "1.15.0"
- resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.15.0.tgz#202687b4c246db616d467b3eb1af09cd65775a51"
- integrity sha512-vdSgA2UKHf9T1aoIr+t8x2Apz1RKeql5TKuozX/kMgaviNVlLyKspRTi+PD/tF830uTk+qIjRmDLuq5qdQXrng==
+owncloud-design-system@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-2.0.0.tgz#dcb31743e900dffefdf02f1872717b122752baa0"
+ integrity sha512-yVP2y9G4aQ6H1LRNqDZByfZkuGuQKcwFzDMIDeRbAXXBNfnipZ5TI3Jprix4uixiny0bH87kX4i7/aH1VDR1BQ==
  dependencies:
  luxon "^1.22.0"
  mini-css-extract-plugin "^0.9.0"