verint.com/eo-services-client
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added authentication. Fixes #2

Browse Source
This commit is contained in:
Peter Morton 2023-10-20 17:03:36 -05:00
parent e7dd75bc2b
commit b46475d18b
2 changed files with 70 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/main.js
View File

@ -2,9 +2,19 @@ import { createApp } from "vue";
import "./style.css"; import "./style.css";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faUserShield, faUserLock } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faUserShield)
library.add(faUserLock)
import "./fontawesome";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
createApp(App) createApp(App)
.use(router) .use(router)

82
src/views/TelephonyContextView.vue
View File

@ -17,12 +17,13 @@ const props = defineProps({
username: { type: String, default: "" }, username: { type: String, default: "" },
sessionIdentifier: { type: String, default: "" }, sessionIdentifier: { type: String, default: "" },
transferSummary: { type: String, default: "", required: true }, transferSummary: { type: String, default: "", required: true },
integrationCardTitle: { type: String, default: "", required: true }, integrationCardTitle: { type: String, default: "", required: true },
integrationCardDoc: { integrationCardDoc: {
type: String, type: String,
default: "", default: "",
required: true required: true
}, },
authenticated: { type: String, default: "false" },
}); });
const errorMessage = ref(null); const errorMessage = ref(null);
@ -51,37 +52,46 @@ function fetchData() {
setValueFromTPS(transferSummaryValue, props.transferSummary, props); setValueFromTPS(transferSummaryValue, props.transferSummary, props);
setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props); setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props);
setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props); setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props);
} }
</script> </script>
<template> <template>
<div> <div>
<h2>Summary</h2> <h2>Summary</h2>
<div class="customerAccount customer-detail-container" width="100%">
<div class="customer-profile-fields vertical-layout"> <div class="customerAccount customer-detail-container" width="100%">
<div class="column-layout" style="width: 100%; max-width: 100%; height: 100%"> <div class="customer-profile-fields vertical-layout">
<div class="row1 column-layout-row"> <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
<div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%"> <div class="row1 column-layout-row">
<h3>Telephony Data</h3> <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
<VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue> <h3>Telephony Data</h3>
<VerticalLabelValue label="Type" :value="type"></VerticalLabelValue> <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
<VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue> <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
<VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue> <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
<VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue> <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
<VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue> <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
</div> <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
<div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%"> <div v-if="authenticated == 'true'" id="authbox">
<TransferSummary :summary="transferSummaryValue" /> <font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408;"/>
</div> Customer Authenticated
<div class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%"> </div>
<IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" /> <div v-else id="noauthbox">
<font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2xl"/>
Customer Not Authenticated
</div>
</div>
<div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
<TransferSummary :summary="transferSummaryValue" />
</div>
<div class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%">
<IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ErrorMessage v-if="errorMessage" :message="errorMessage" />
</div> </div>
<ErrorMessage v-if="errorMessage" :message="errorMessage" />
</div>
</template> </template>
<style scoped> <style scoped>
@import "https://shared-eo.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css"; @import "https://shared-eo.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
@ -90,4 +100,28 @@ function fetchData() {
p { p {
size: 24pt; size: 24pt;
} }
#authbox {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 30px;
border: 2px solid #45b408;
}
#noauthbox {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 30px;
border: 2px solid #e03800;
}
#auth {
color: #45b408;
}
#noauth {
color: #e03800;
}
</style> </style>