cveRecordSearchModule.vue

<template>
  <div class="mt-1">
    <div v-if="websiteEnv !== 'prd'" role="alert" class="notification is-warning is-light">
      <div class="is-flex is-align-items-flex-start mt-1" style="max-width: 820px; column-gap: 1rem;">
        <div class="pl-3">
          <p id="alertIconVariousFormts" class="is-hidden">alert</p>
          <font-awesome-icon size="1x"  icon="exclamation-triangle" role="alert"
            aria-labelledby="alertIconVariousFormts" aria-hidden="false" />
        </div>
        <div class="is-flex-grow-5">
          <p class="is-size-7">
            <span class="has-text-weight-bold">CNAs</span> – to view your <span class="has-text-weight-bold">test data</span>
            (your draft records) select “<span class="has-text-weight-bold">Find a Test CVE Record/ID (Legacy)</span>” in the drop-down menu and
            provide a CVE ID to find a specific CVE Record.
          </p>
        </div>
      </div>
    </div>
    <div class="field has-addons mt-1">
      <p class="control">
        <span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
          <select v-model="searchType">
            <option>Search CVE List</option>
            <option>Find a Test CVE Record/ID (Legacy)</option>
          </select>
        </span>
      </p>
      <p class="control is-expanded">
        <input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup="onKeyUp"
          @keyup.enter="validate" type="text" class="input cve-id-input is-expanded"
          placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
        <input v-else v-model.trim="cveId" @keyup="onKeyUp" @keyup.enter="validate"
          type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
      </p>
      <p class="control">
        <button @click="validate" class="button cve-button cve-button-accent-warm"
          :class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSearchButtonDisabled }"
          :aria-disabled="cveListSearchStore.isSearchButtonDisabled"
          :disabled="cveListSearchStore.isSearchButtonDisabled">
          {{ searchTypeBoolean ? 'Search' : 'Find'}} 
        </button>
      </p>
    </div>
    <div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
      <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 }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
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 { useGenericGlobalsStore } from '@/stores/genericGlobals';

const cveIdRegex = /^CVE\p{Pd}(?<year>\d{4})\p{Pd}(?<id>\d{4,})$/iu;
const wordRegex = /^[a-z0-9 ]+$/i;

const cveStartYear = 1999;

let cveListSearchStore = useCveListSearchStore();
const route = useRoute();
const router = useRouter();

let prevSearchValue = ref('');
let queryString = ref('');
let errorMessage = ref('');

let cveGenericGlobalsStore = useGenericGlobalsStore();
let cveRecordStore = usecveRecordStore();
let searchType = ref('Search CVE List');
let cveId = cveRecordStore.cveId;

// this seems redundant, but it fixes an edge case.
// if a user searches for a particular field, then on the results page flips the toggle, THEN refreshes without searching, this will keep the correct helper text showing.
let searchTypeBoolean = computed(() => {
  return searchType.value == 'Search CVE List' ? true : false;
});

watch(searchType, () => {
  resetStates();
});

watch(
  () => route.query,
  () => {
    if (searchTypeBoolean.value && route.query?.query) {
        queryString.value = route.query.query.trim();
        validate();
    }
  }
)

function resetStates() {
  cveListSearchStore.searchType = cveGenericGlobalsStore.useSearch = searchTypeBoolean.value;
  cveId = '';
  queryString.value = cveListSearchStore.query = '';
  showHelpMessage('');
  cveListSearchStore.isSearchButtonDisabled = true;
}

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
  if (searchTypeBoolean.value) {
    cveGenericGlobalsStore.setUseSearch(true);
    cveGenericGlobalsStore.setCurrentServicesUrl(`https://${import.meta.env.VITE_CVE_SERVICES_BASE_URL}`)
  }
  else {
    cveGenericGlobalsStore.setUseSearch(false);
    cveGenericGlobalsStore.setCurrentServicesUrl(cveGenericGlobalsStore.cveServiceTestBaseUrl)
  }
  if (cveGenericGlobalsStore.useSearch) {
      cveListSearchStore.$reset();
      cveListSearchStore.query = queryString.value;
      if (route.name != 'SearchResults' || !route.query?.query
          || (route.query.query != cveListSearchStore.query)) {

        router.push({name: 'SearchResults',
                     query: {query: cveListSearchStore.query}});
      } else
        cveListSearchStore.search();
  } else {
    const lookupPath = `/CVERecord?id=${cveId}`;

    router.push({path: lookupPath, query: {id: cveId}})
  }
}

function validateQueryString() {

  const contentMessage = 'Enter words of alphanumeric characters OR a single CVD ID (CVE-YYYY-NNNN).';
  const isSearch = searchTypeBoolean.value;
  const searchValue = isSearch ? queryString.value : cveId;

  prevSearchValue.value = searchValue;
  cveListSearchStore.isSearchButtonDisabled = true;
  showHelpMessage('');

  if (!searchValue)
    return !cveListSearchStore.isSearchButtonDisabled;

  const cveIdMatch = cveIdRegex.exec(searchValue)

  if (cveIdMatch) {
    const year = parseInt(cveIdMatch.groups.year);
    const id = cveIdMatch.groups.id;
    const currentYear = new Date().getFullYear();

    if (cveStartYear <= year && year <= currentYear) {
      const normalizedCveId = `CVE-${year}-${id}`;
      if (isSearch)
        queryString.value = normalizedCveId;
      else
        cveId = normalizedCveId;
    } else {
      showHelpMessage(`CVE ID year must be within ${cveStartYear}-${currentYear}`);
    }
  }

  if (isSearch) {

    // Search: if the query string isn't a CVE ID and it doesn't just consist
    // of "typical" words (alphanumeric phrases), then it's an error.

    if (!cveIdMatch && !wordRegex.test(searchValue)) {
      showHelpMessage(contentMessage);
    } else if (!errorMessage.value) {

      // The provided search string is good.
      cveListSearchStore.isSearchButtonDisabled = false;
    }
  } else if (cveIdMatch) {

    // Legacy Find by CVE ID and it's in the correct format.
    cveListSearchStore.isSearchButtonDisabled = false;

  } 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');
  }

  return !cveListSearchStore.isSearchButtonDisabled;
}

function onKeyUp() {
  if (cveListSearchStore.isSearchButtonDisabled) {
    const isSearch = searchTypeBoolean.value;
    const searchValue = isSearch ? queryString.value : cveId;

    if (prevSearchValue.value !== searchValue)
      cveListSearchStore.isSearchButtonDisabled = false;
  }
}

function validate() {

  if (validateQueryString()) {
    try {
      cveListSearchStore.isSearchButtonDisabled = true;
      startSearch();
    } finally {
      cveListSearchStore.isSearchButtonDisabled = false;
    }
  } else if (route.name != 'home' || route?.query) {
    router.push({name: 'home', query: {}});
  }
}

const websiteEnv = computed(() => {
  return import.meta.env.VITE_WEBSITE_ENVIRONMENT;
});
</script>

<style scoped lang="scss">
.disabled {
  opacity: 0.7 !important;
  background-color: #3d4551 !important;
  color: white !important;
  border-color: #dbdbdb;
  box-shadow: none;
}

.notification {
  margin: 0 0 2px 0 !important;
  padding: 2px 10px 2px 10px !important;
}

@media screen and (min-width: $desktop) {
  .cve-id-input {
    width: 470px;
  }
}

.cve-btn-container {
  background: unset !important;
  color: $black !important;
}


.cve-btn-container:hover, .cve-inner-btn:hover {
  cursor: pointer;
  text-decoration: none !important;
}
</style>