Added authentication. Fixes #2

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)

src/views/TelephonyContextView.vue

@@ -23,6 +23,7 @@ const props = defineProps({
     default: "",
     required: true
   },
+  authenticated: { type: String, default: "false" },
 });
 
 const errorMessage = ref(null);
@@ -57,6 +58,7 @@ function fetchData() {
 <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%">
@@ -69,6 +71,14 @@ function fetchData() {
               <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" />
@@ -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>