CVERecord & cveRecordSearchModule: consolidate error message handling

Author: rlxdev

src/components/ProductStatus.vue

@@ -121,7 +121,7 @@ export default {
         const isDefaultStausNa = this.productStatusList[0].defaultStatus.length === 0;
         let isVersionNa = false;
 
-        if (this.productStatusList[0].versionsColumns.twoDTable.affected.length === 1) {
+        if (this.productStatusList[0].versionsColumns.twoDTable.affected?.length === 1) {
           isVersionNa = /n\/a/.test(this.productStatusList[0].versionsColumns.twoDTable.affected[0].parentVersionRange.toString().toLowerCase());
         }
 

src/components/cveRecordSearchModule.vue

@@ -41,13 +41,13 @@
         </button>
       </p>
     </div>
-    <div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
+    <div class="notification is-warning is-light" role="alert" v-if="errorMessageStore.showErrorMessage">
       <div class="is-flex is-align-content-flex-start">
         <p id="alertIcon" class="is-hidden">alert</p>
         <font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
           aria-labelledby="alertIcon" aria-hidden="false" />
         <p class="cve-help-text">
-          {{ errorMessage }}
+          {{ errorMessageStore.errorMessage }}
         </p>
       </div>
     </div>
@@ -59,7 +59,7 @@ import { useCveListSearchStore } from '@/stores/cveListSearch';
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 // Legacy Search Import
-import { usecveRecordStore } from '@/stores/cveRecord';
+import { usecveRecordStore, useErrorMessageStore } from '@/stores/cveRecord';
 import { useGenericGlobalsStore } from '@/stores/genericGlobals';
 
 const cveIdRegex = /^CVE\p{Pd}(?<year>\d{4})\p{Pd}(?<id>\d{4,})$/iu;
@@ -74,6 +74,8 @@ const isProductionWebsite = import.meta.env.VITE_WEBSITE_ENVIRONMENT === 'prd';
 const maxCveIdSuffix = 7;
 
 let cveListSearchStore = useCveListSearchStore();
+const errorMessageStore = useErrorMessageStore();
+
 const route = useRoute();
 const router = useRouter();
 
@@ -127,22 +129,11 @@ function resetStates() {
   cveListSearchStore.searchType = cveGenericGlobalsStore.useSearch = searchTypeBoolean.value;
   cveId = '';
   queryString.value = cveListSearchStore.query = '';
-  showHelpMessage('');
+  errorMessageStore.$reset();
   cveListSearchStore.isSearchButtonDisabled = true;
   resetSearch();
 }
 
-function showHelpMessage(helpText) {
-
-  if (helpText.length) {
-    errorMessage.value = helpText;
-    cveListSearchStore.showHelpText = true;
-  } else {
-    errorMessage.value = '';
-    cveListSearchStore.showHelpText = false;
-  }
-}
-
 function startSearch() {
   // We only want to flip the search item _When we actually do a search_
   // otherwise we should default back to what we were on a page refresh
@@ -182,7 +173,7 @@ function validateQueryString() {
 
   prevSearchValue.value = searchValue;
   cveListSearchStore.isSearchButtonDisabled = true;
-  showHelpMessage('');
+  errorMessageStore.$reset();
 
   if (!searchValue)
     return !cveListSearchStore.isSearchButtonDisabled;
@@ -205,7 +196,7 @@ function validateQueryString() {
       else
         cveId = normalizedCveId;
     } else {
-      showHelpMessage(`Invalid CVE ID "${normalizedCveId}" - identifier out of range`);
+      errorMessageStore.setErrorMessage(`Invalid CVE ID "${normalizedCveId}" - identifier out of range`);
     }
   }
 
@@ -215,7 +206,7 @@ function validateQueryString() {
     // of "typical" words (alphanumeric phrases), then it's an error.
 
     if (!cveIdMatch && !wordRegex.test(searchValue)) {
-      showHelpMessage(contentMessage);
+      errorMessageStore.setErrorMessage(contentMessage);
     } else if (!errorMessage.value) {
 
       // The provided search string is good.
@@ -229,7 +220,7 @@ function validateQueryString() {
   } else if (!errorMessage.value) {
 
     // Legacy Find by CVE ID but the query string is not a CVE ID.
-    showHelpMessage('Required CVE ID format: CVE-YYYY-NNNN');
+    errorMessageStore.cveIdFormatMessage();
   }
 
   return !cveListSearchStore.isSearchButtonDisabled;
@@ -252,7 +243,7 @@ function onInputChange() {
     // input field.
 
     resetSearch();
-    showHelpMessage('');
+    errorMessageStore.$reset();
     cveListSearchStore.isSearchButtonDisabled = true;
 
   } else if (cveListSearchStore.isSearchButtonDisabled

src/stores/cveRecord.ts

@@ -6,6 +6,7 @@ export const usecveRecordStore = defineStore('cveRecord', {
   state: () => { 
     return {
       cveId: '',
+      cveIdRegex: /^CVE-\d{4}-\d{4,7}$/i,
       idData: {},
       isArecord: false,
       isIdOrRecordFound: false,
@@ -62,5 +63,38 @@ export const usecveRecordStore = defineStore('cveRecord', {
 
       return false;
     },
+    isValidCveId(cveId: string) {
+      return this.cveIdRegex.test(cveId);
+    },
+  }
+});
+
+
+// The "error message" store handles the error message displayed to the user
+// just below the search input field.  A store is used because error messages
+// triggered by the user's CVE ID input occur in both the CVERecord module and
+// the cveRecordSearch module.
+
+export const useErrorMessageStore = defineStore('errorMessage', {
+  state: () => {
+    return {
+      errorMessage: '',
+      showErrorMessage: false
+    }
+  },
+  actions: {
+    cveIdFormatMessage() {
+      const formatMessage = 'Required CVE ID format: CVE-YYYY-NNNN';
+      this.setErrorMessage(formatMessage);
+    },
+    setErrorMessage(message: string) {
+      if (message.length) {
+        this.errorMessage = message;
+        this.showErrorMessage = true;
+      } else {
+        this.errorMessage = '';
+        this.showErrorMessage = false;
+      }
+    }
   }
 });

src/views/CVERecord/CVERecord.vue

@@ -79,7 +79,7 @@
 import PublishedRecord from './PublishedRecord.vue';
 import RejectedRecordOrId from './RejectedRecordOrId.vue';
 import ReservedId from './ReservedId.vue';
-import { usecveRecordStore } from '@/stores/cveRecord.ts';
+import { usecveRecordStore, useErrorMessageStore } from '@/stores/cveRecord.ts';
 import { useGenericGlobalsStore } from '@/stores/genericGlobals';
 import ServiceUnavailable from '@/components/ServiceUnavailable.vue';
 import axios from 'axios';
@@ -99,8 +99,8 @@ export default {
       resultUrl: this.GenericGlobalsStore.useSearch ? `https://${import.meta.env.VITE_CVE_SERVICES_BASE_URL}` : this.GenericGlobalsStore.cveServiceTestBaseUrl,
       usecveRecordStore: usecveRecordStore(),
       cveId: usecveRecordStore().cveId,
+      errorMessageStore: useErrorMessageStore(),
       showHelpText: false,
-      errorMessage: [],
       disabled: true,
       getIdStatusCode: undefined,
       legacyCveWebsiteLink: this.GenericGlobalsStore.legacyCveWebsiteLink
@@ -150,46 +150,15 @@ export default {
     },
   },
   methods: {
-    removeHelpText() {
-      if (this.cveId.length === 0) {
-        this.errorMessage = [];
-      }
-    },
     cveIdToUpperCase(cveId) {
       return cveId.toUpperCase();
     },
     validateCveId() {
-      this.errorMessage = [];
-
-      const [cve, year, digits] = this.cveId.split('-');
-      const firstElContainsCve = new RegExp(/^(cve)/, 'i').test(cve);
-      const idStartsWithCve = new RegExp(/^(cve-)/, 'i').test(this.cveId);
-      const isElFilledIn = cve && year && digits;
-
-      if (!firstElContainsCve) {
-        this.errorMessage.push('Required CVE ID format: <b>CVE-YYYY-NNNN</b>');
-        this.errorMessage.push('<b>YYYY</b> must be a year starting from 1999');
-        this.errorMessage.push('<b>NNNN</b> must be 4 digits or greater');
-      } else if (!idStartsWithCve && !new RegExp(/^(cve-)\d{4}(-)/, 'i').test(this.cveId)) {
-        if (!idStartsWithCve) this.errorMessage.push('CVE ID must start with <b>CVE-</b>');
-      }
-
-      if (year && year.length > 0 && (parseInt(year, 10) < 1999 || !new RegExp(/^\d{4}$/, 'i').test(year))) {
-        this.errorMessage.push('CVE-<b>YYYY</b>-NNNN must be a year starting from 1999');
-      } else if (year && year.length > 0 && (!new RegExp(/^(cve-)\d{4}(-)/, 'i').test(this.cveId) && isElFilledIn === undefined)) {
-        this.errorMessage.push('Hyphen (-) must follow the year <b>(YYYY)</b>');
-        this.errorMessage.push('Required CVE ID format: <b>CVE-YYYY-NNNN</b>');
-      }
-
-      if (digits && digits.length > 0 && !new RegExp(/^\d{4,}$/).test(digits)) {
-        this.errorMessage.push('CVE-YYYY-<b>NNNN</b> must be 4 digits or greater');
-      }
-
-      if (this.errorMessage.length === 0 && new RegExp(/^(cve)-\d{4}-\d{4,}$/, 'i').test(this.cveId)) {
-        this.disabled = false;
-      } else {
+      if (!this.usecveRecordStore.isValidCveId(this.cveId)) {
         this.disabled = true;
-      }
+        this.errorMessageStore.cveIdFormatMessage();
+      } else
+        this.disabled = false;
     },
     resetStates() {
       usecveRecordStore().$reset();
@@ -318,11 +287,6 @@ export default {
       usecveRecordStore().isSearching = newState;
       this.disabled = false;
     },
-    onKeyUpEnter() {
-      this.validateCveId();
-
-      if (!this.disabled) this.startLookup();
-    },
     isJson(value) {
       if (typeof value === 'object') {
         return true;