From b46475d18bf1abc99030ddb5e75e839ce40fa4e0 Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Fri, 20 Oct 2023 17:03:36 -0500
Subject: [PATCH] Added authentication. Fixes #2

---
 src/main.js                        | 14 ++++-
 src/views/TelephonyContextView.vue | 82 +++++++++++++++++++++---------
 2 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/src/main.js b/src/main.js
index 2c93783..6e5a2d8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,19 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 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)
   .use(router)
diff --git a/src/views/TelephonyContextView.vue b/src/views/TelephonyContextView.vue
index ffecbac..515541d 100644
--- a/src/views/TelephonyContextView.vue
+++ b/src/views/TelephonyContextView.vue
@@ -17,12 +17,13 @@ const props = defineProps({
   username: { type: String, default: "" },
   sessionIdentifier: { type: String, default: "" },
   transferSummary: { type: String, default: "", required: true },
-  integrationCardTitle: { type: String, default: "", required: true  },
+  integrationCardTitle: { type: String, default: "", required: true },
   integrationCardDoc: {
     type: String,
     default: "",
-    required: true 
+    required: true
   },
+  authenticated: { type: String, default: "false" },
 });
 
 const errorMessage = ref(null);
@@ -51,37 +52,46 @@ function fetchData() {
   setValueFromTPS(transferSummaryValue, props.transferSummary, props);
   setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props);
   setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props);
-  
+
 }
 </script>
 <template>
   <div>
-  <h2>Summary</h2>
-  <div class="customerAccount customer-detail-container" width="100%">
-    <div class="customer-profile-fields vertical-layout">
-      <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
-        <div class="row1 column-layout-row">
-          <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
-            <h3>Telephony Data</h3>
-            <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
-            <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
-            <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
-            <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
-            <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
-            <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
-          </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" />
+    <h2>Summary</h2>
+    
+    <div class="customerAccount customer-detail-container" width="100%">
+      <div class="customer-profile-fields vertical-layout">
+        <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
+          <div class="row1 column-layout-row">
+            <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
+              <h3>Telephony Data</h3>
+              <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
+              <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
+              <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
+              <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
+              <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
+              <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
+            <div v-if="authenticated == 'true'" id="authbox">
+              <font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408;"/>
+              Customer Authenticated
+            </div>
+            <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>
+    <ErrorMessage v-if="errorMessage" :message="errorMessage" />
   </div>
-  <ErrorMessage v-if="errorMessage" :message="errorMessage" />
-</div>
 </template>
 <style scoped>
 @import "https://shared-eo.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
@@ -90,4 +100,28 @@ function fetchData() {
 p {
   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>