Support custom header and footer. New config property: 'customHeaderAndFooter'...

Support custom header and footer. New config property: 'customHeaderAndFooter' [REDMINE_ISSUE-17882]

.nvmrc

+14

public/config.js

@@ -10,6 +10,7 @@ export default {
     email: "contact@neogeo.fr",
     warning: false
   },
+  customHeaderAndFooter: false,
   forms: {
     signin: {
       title: {

src/App.vue

 <template>
-  <div id="app">
+  <div
+    id="app"
+    :class="{
+      'custom-header-footer': $config.customHeaderAndFooter
+    }"
+  >
+    <ogs-header
+      v-if="$config.customHeaderAndFooter"
+    />
     <LocaleChanger />
-    <router-view id="page"/>
+    <router-view id="page" />
+    <ogs-footer
+      v-if="$config.customHeaderAndFooter"
+    />
   </div>
 </template>
 
@@ -9,10 +20,8 @@
 import LocaleChanger from '@/components/LocaleChanger.vue';
 
 export default {
-
   components: {
-    LocaleChanger
-  }
-
+    LocaleChanger,
+  },
 };
 </script>

src/app.scss

@@ -2,3 +2,31 @@ $primary: #187CC6;
 
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import 'node_modules/bootstrap-vue/src/index.scss';
+
+// WC ogs-header ogs-footer / override
+// Hide default header logo & footer
+.custom-header-footer {
+    .app-header > img {
+        visibility: hidden !important;
+    }
+    .terms-header > img {
+        visibility: hidden !important;
+    }
+    .footer {
+        display: none !important;
+    }
+
+    // Try to remove scrollbar and show footer
+    #page {
+        height: auto !important;
+    }
+    // forgottenpwd add some space...
+    .container {
+        height: 500px !important;
+        margin-top: 150px !important;
+    }
+    // signout add some space
+    .center {
+        height: 400px !important;
+    }
+}

src/main.js

@@ -18,6 +18,10 @@ import router from '@/router';
 import store from '@/store';
 
 Vue.config.productionTip = false;
+Vue.config.ignoredElements = [
+  'ogs-header',
+  'ogs-footer'
+];
 
 import config from '../public/config.js';
 
@@ -33,6 +37,20 @@ Vue.mixin({
 });
 
 Vue.prototype.$config = config;
+
+// Use WC header and footer if configured
+if (config.customHeaderAndFooter) {
+  const headElement = document.getElementsByTagName('head')[0];
+  let s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.src = '/portal/wc/ogs-header.js';
+  headElement.append(s);
+  s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.src = '/portal/wc/ogs-footer.js';
+  headElement.append(s);
+}
+
 new Vue({
   i18n,
   router,