In Frontend project Banner replaced with Alert

Author: farzadnadiri

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Banner.vue

@@ -5,7 +5,7 @@
   <v-container>
     <v-row v-for="systemMessage in configStore.systemMessages" class="mt-10 mb-10">
       <v-col v-if="systemMessage.portalTags && systemMessage.portalTags.includes('LOOKUP')" cols="12">
-        <Banner type="info" :title="systemMessage.message ? systemMessage.message : ''" />
+        <Alert title="Alert">{{ systemMessage.message ? systemMessage.message : "" }}</Alert>
       </v-col>
     </v-row>
     <v-row>
@@ -120,10 +120,10 @@ import { formatDate } from "@/utils/format";
 import { isNumber } from "@/utils/formInput";
 import { postLookupCertificate } from "@/api/certification";
 import { useConfigStore } from "@/store/config";
-import Banner from "@/components/Banner.vue";
 import * as Rules from "../utils/formRules";
 import EceRecaptcha from "./inputs/EceRecaptcha.vue";
 import type { Components } from "@/types/openapi";
+import Alert from "@/components/Alert.vue";
 
 interface LookupCertificationData {
   recaptchaToken: string;
@@ -134,7 +134,7 @@ type ReadonlyHeaders = VDataTable["$props"]["headers"];
 
 export default defineComponent({
   name: "LookupCertification",
-  components: { EceRecaptcha, EceTextField, Banner },
+  components: { EceRecaptcha, EceTextField, Alert },
   setup() {
     const alertStore = useAlertStore();
     const lookupCertificationStore = useLookupCertificationStore();

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/LookupCertification.vue

@@ -8,7 +8,7 @@
   <PageContainer :margin-top="false">
     <div v-for="systemMessage in configStore.systemMessages">
       <div v-if="systemMessage.portalTags && systemMessage.portalTags.includes('LOGIN')" class="d-flex flex-column ga-3 mb-10">
-        <Banner type="info" :title="systemMessage.message ? systemMessage.message : ''" />
+        <Alert title="Alert">{{ systemMessage.message ? systemMessage.message : "" }}</Alert>
       </div>
     </div>
     <v-row>
@@ -40,11 +40,11 @@ import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
 import { useConfigStore } from "@/store/config";
 import { useDisplay } from "vuetify";
-import Banner from "../Banner.vue";
+import Alert from "../Alert.vue";
 
 export default defineComponent({
   name: "Login",
-  components: { LoginCard, PageContainer, Banner },
+  components: { LoginCard, PageContainer, Alert },
   setup() {
     const userStore = useUserStore();
     const oidcStore = useOidcStore();

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <Banner type="error" title="404 Error - Page not found" />
+  <Alert type="error" title="404 Error - Page not found" />
   <v-container>
     <div class="d-flex flex-column ga-10 mt-10">
       <h3>The page you’re looking for might have been removed, moved, or is temporarily unavailable.</h3>
@@ -21,11 +21,11 @@
 </template>
 
 <script lang="ts">
-import Banner from "@/components/Banner.vue";
 import { useRouter } from "vue-router";
+import Alert from "../Alert.vue";
 export default {
   name: "PageNotFound",
-  components: { Banner },
+  components: { Alert },
   setup() {
     const router = useRouter();
     return { router };

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/PageNotFound.vue

@@ -1,14 +1,15 @@
 <template>
   <Banner type="error" title="Sorry, this link is no longer valid" />
+  
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import Banner from "@/components/Banner.vue";
+import Alert from "../Alert.vue";
 
 export default defineComponent({
   name: "Invalid",
-  components: { Banner },
+  components: { Alert },
 });
 </script>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/reference/Invalid.vue

@@ -1,11 +1,9 @@
 <template>
   <v-row>
     <v-col cols="12" v-for="systemMessage in configStore.systemMessages">
-      <Banner
-        v-if="systemMessage.portalTags && systemMessage.portalTags.includes('REFERENCES')"
-        type="info"
-        :title="systemMessage.message ? systemMessage.message : ''"
-      />
+      <Alert v-if="systemMessage.portalTags && systemMessage.portalTags.includes('REFERENCES')" title="Alert">
+        {{ systemMessage.message ? systemMessage.message : "" }}
+      </Alert>
     </v-col>
     <v-col cols="12" md="12" lg="12" xl="12">
       <v-row no-gutters>
@@ -74,11 +72,11 @@ import { useConfigStore } from "@/store/config";
 import { useWizardStore } from "@/store/wizard";
 import { CertificationType } from "@/utils/constant";
 import * as Rules from "@/utils/formRules";
-import Banner from "../../Banner.vue";
 import { cleanPreferredName } from "@/utils/functions";
+import Alert from "@/components/Alert.vue";
 export default defineComponent({
   name: "EceReferenceIntroduction",
-  components: { Banner },
+  components: { Alert },
   emits: {
     "update:model-value": (_reference: boolean) => true,
   },

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/reference/inputs/EceCharacterReferenceDeclaration.vue

@@ -1,11 +1,9 @@
 <template>
   <v-row>
     <v-col cols="12" v-for="systemMessage in configStore.systemMessages">
-      <Banner
-        v-if="systemMessage.portalTags && systemMessage.portalTags.includes('REFERENCES')"
-        type="info"
-        :title="systemMessage.message ? systemMessage.message : ''"
-      />
+      <Alert v-if="systemMessage.portalTags && systemMessage.portalTags.includes('REFERENCES')" title="Alert">
+        {{ systemMessage.message ? systemMessage.message : "" }}
+      </Alert>
     </v-col>
     <v-col cols="12" md="12" lg="12" xl="12">
       <v-row no-gutters>
@@ -88,11 +86,11 @@ import { useConfigStore } from "@/store/config";
 import { useWizardStore } from "@/store/wizard";
 import { CertificationType, WorkExperienceType } from "@/utils/constant";
 import * as Rules from "@/utils/formRules";
-import Banner from "../../Banner.vue";
+import Alert from "@/components/Alert.vue";
 import { cleanPreferredName } from "@/utils/functions";
 export default defineComponent({
   name: "EceReferenceIntroduction",
-  components: { Banner },
+  components: { Alert },
   emits: {
     "update:model-value": (_reference: boolean) => true,
   },