TT#122202 ProxiedFeature - As SubscriberAdmin, I want to be able to access the "Customer Details" page in v1 from within v2
AC:
Can click on a main menu point to open Subscriber management
Can see a page opening and loading the page from v1 within v2
Note, to test it locally:
1. you need to create the "quasar.conf.dev.js" file with content like
module.exports = {
public: '',
publicPath: '/v2/',
proxyAPI2localhost: true,
proxyAPIFromURL: 'https://dev-web3-trunk.mgm.sipwise.com'
}
2. "src/config.js" should have
baseHttpUrl: '',
3. to login into system you have to use "username@domain" login !!!
Change-Id: I3af7caeb242a52e573d87c50fe05c9462f95bfb3
mr9.5.2
Sergii Leonenko
4 years ago
parent
ccdf8971bb
commit
31f00c6aa0
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
module.exports = {
|
||||||
|
public: '',
|
||||||
|
publicPath: '/v2/',
|
||||||
|
proxyAPI2localhost: true,
|
||||||
|
proxyAPIFromURL: 'https://{{sipwiseVoipPlatformIPorFDQN}}'
|
||||||
|
}
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="proxy-iframe-wrapper flex flex-center"
|
||||||
|
>
|
||||||
|
<iframe
|
||||||
|
v-show="loaded"
|
||||||
|
ref="proxyIframe"
|
||||||
|
class="proxy-iframe"
|
||||||
|
:src="finalSrc"
|
||||||
|
@load="loadedEvent"
|
||||||
|
/>
|
||||||
|
<q-spinner
|
||||||
|
v-if="!loaded"
|
||||||
|
color="primary"
|
||||||
|
size="xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import {
|
||||||
|
mapActions,
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
import { showGlobalError } from 'src/helpers/ui'
|
||||||
|
import { getCurrentLangAsV1Format } from 'src/i18n'
|
||||||
|
export default {
|
||||||
|
name: 'Proxy',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
loaded: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('user', [
|
||||||
|
'currentPathIframe'
|
||||||
|
]),
|
||||||
|
language () {
|
||||||
|
return getCurrentLangAsV1Format()
|
||||||
|
},
|
||||||
|
finalSrc () {
|
||||||
|
let url = null
|
||||||
|
if (_.isString(this.$config.baseHttpUrl) && _.trim(this.$config.baseHttpUrl) !== '') {
|
||||||
|
url = new URL(this.$config.baseHttpUrl)
|
||||||
|
} else {
|
||||||
|
url = new URL(location.origin)
|
||||||
|
}
|
||||||
|
url.searchParams.set('framed', '1')
|
||||||
|
url.searchParams.set('lang', this.language)
|
||||||
|
if (this.$route?.meta?.proxyRewrite) {
|
||||||
|
return this.$route?.meta?.proxyRewrite({
|
||||||
|
route: this.$route,
|
||||||
|
url: url
|
||||||
|
}).toString()
|
||||||
|
} else {
|
||||||
|
url.pathname = this.$route.path
|
||||||
|
return url.toString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentPathIframe (path) {
|
||||||
|
const routeData = this.$router.resolve(path)
|
||||||
|
if (!routeData?.route?.meta?.proxy && !routeData?.route?.meta?.proxyReverseInvisible) {
|
||||||
|
this.$router.push({
|
||||||
|
path: path
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('message', this.trackMessagesFromV1, false)
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('message', this.trackMessagesFromV1, false)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('user', [
|
||||||
|
'logout'
|
||||||
|
]),
|
||||||
|
loadedEvent () {
|
||||||
|
try {
|
||||||
|
const domEl = this.$refs.proxyIframe.contentWindow.document.getElementById('login_page_v1')
|
||||||
|
if (domEl !== null) {
|
||||||
|
this.logout()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.injectDarkUITheme()
|
||||||
|
} catch (err) {
|
||||||
|
console.debug('Session expiration detection is disabled')
|
||||||
|
console.debug(err)
|
||||||
|
} finally {
|
||||||
|
this.loaded = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
injectDarkUITheme () {
|
||||||
|
const framedWindow = this.$refs.proxyIframe.contentWindow
|
||||||
|
const $ = framedWindow.$
|
||||||
|
const darkThemeCSS = `
|
||||||
|
body {
|
||||||
|
background: #3b3440; /* $darkBase */
|
||||||
|
color: white;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 { color: white; }
|
||||||
|
|
||||||
|
.table-hover, .table-highlight { color: black; }
|
||||||
|
.table-hover tbody tr:hover > td,
|
||||||
|
.table-hover tbody tr:hover > th { background: none; }
|
||||||
|
|
||||||
|
.table-highlight.table-bordered tbody tr td,
|
||||||
|
.table-highlight.table-bordered tbody tr th { background-color: #F0F3F7; }
|
||||||
|
|
||||||
|
.table-highlight.table-bordered thead tr,
|
||||||
|
table.ngcp-datatable tfoot tr { background: silver; }
|
||||||
|
|
||||||
|
.table-highlight.table-bordered thead th,
|
||||||
|
table.ngcp-datatable tfoot td {
|
||||||
|
text-shadow: none;
|
||||||
|
color: black;
|
||||||
|
border-left: 1px solid #F1F1F1;
|
||||||
|
border-right: 1px solid #CCC;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngcp-modal,
|
||||||
|
.jquery-msgbox { color: #333; }
|
||||||
|
.modal-header { background: silver; border-color: white; }
|
||||||
|
.modal-header h3 { color: black; text-shadow: none; }
|
||||||
|
|
||||||
|
.accordion-inner { border-top: none; }
|
||||||
|
`
|
||||||
|
$(`<style>${darkThemeCSS}</style>`).appendTo(framedWindow.document.head)
|
||||||
|
},
|
||||||
|
trackMessagesFromV1 (event) {
|
||||||
|
if (event?.data?.origin === 'ngcp-panel') {
|
||||||
|
if (event?.data?.error) {
|
||||||
|
showGlobalError(event.data.error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (event?.data?.origin === 'ngcp-panel-beforeunload') {
|
||||||
|
this.loaded = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" rel="stylesheet/sass">
|
||||||
|
.proxy-iframe-wrapper
|
||||||
|
height: calc(100vh - 100px)
|
||||||
|
width: 100%
|
||||||
|
.proxy-iframe
|
||||||
|
border: none
|
||||||
|
height: calc(100vh - 100px)
|
||||||
|
width: 100%
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue