Merge pull request #1895 from CVEProject/tat-181-1

Tat 181 1
CVEProject · Apr 27, 2023 · fe63456 · fe63456
2 parents f1cc994 + 82ceace
commit fe63456
Show file tree

Hide file tree

Showing 4 changed files with 310 additions and 3 deletions.
diff --git a/src/components/FooterModule.vue b/src/components/FooterModule.vue
@@ -14,7 +14,7 @@
         <ul>
           <li><router-link to="/Media/News/AllNews">News</router-link></li>
           <li><router-link to="/Media/Events">Events</router-link></li>
-          <li><a href="https://cve.mitre.org/news/newsletter.html" target="_blank">Sign up for e-newsletter</a></li>
+          <li><router-link to="/Media/News/NewsletterSignup">Sign up for e-newsletter</router-link></li>
         </ul>
       </div>
       <div class="column">

diff --git a/src/router/index.js b/src/router/index.js
@@ -37,6 +37,7 @@ import NewsItem from '@/views/Media/News/NewsItem.vue';
 import NewsArchives from '@/views/Media/News/NewsArchives.vue';
 import BlogArchives from '@/views/Media/News/BlogArchives.vue';
 import Events from '@/views/Media/Events.vue';
+import NewsletterSignup from '@/views/Media/News/NewsletterSignup.vue';
 
 Vue.use(VueRouter);
 
@@ -346,6 +347,14 @@ const routes = [
       title: 'Events | CVE',
     },
   },
+  {
+    path: '/Media/News/NewsletterSignup',
+    name: 'Newsletter Signup',
+    component: NewsletterSignup,
+    meta: {
+      title: 'Newsletter Signup | CVE',
+    },
+  },
   {
     path: '*',
     name: 'NotFound',

diff --git a/src/views/Media/News/NewsletterSignup.vue b/src/views/Media/News/NewsletterSignup.vue
@@ -0,0 +1,300 @@
+<template>
+  <div id="cve-secondary-page-main-container">
+    <div class="columns is-centered">
+      <div class="column is-12-desktop is-12-tablet cve-main-column-content-width">
+        <main id="cve-main-page-content" role="main">
+          <div class="content">
+            <h1 class="title">Email Newsletter</h1>
+            <h2 class="title">Subscribe to the CVE<sup>®</sup> Program Newsletter</h2>
+            <p class="content">
+              <span class="has-text-weight-bold">CVE-Announce</span> provides general news about CVE such as new CNAs, new
+              website features, CVE in the news, etc. Messages are sent infrequently, once a
+              month or less.
+            </p>
+            <div v-if="!submitted" class="cve-white-bg-gray-border-container">
+              <form id="emailSignup" class="cve-top-margin" @submit.prevent="checkForm" novalidate="true">
+                <input type="hidden" name="X" value="9">
+                <input type="hidden" name="Y" value="4">
+                <div v-if="errors.length" class="notification is-danger">
+                  <p id="dangerIcon" class="is-hidden">danger</p>
+                  <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="exclamation-circle" role="danger"
+                   aria-labelledby="dangerIcon" aria-hidden="false" />
+                  <span class="has-text-weight-bold"> Please correct the following error(s):</span>
+                  <ul>
+                    <li v-for="error in errors" :key=error>{{ error }}</li>
+                  </ul>
+                </div>
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">Email Address <span class="has-text-weight-normal">(Required)</span></label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.emailAddress" class="input" type="email" placeholder="Enter email address">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">What is 9 + 4? <span class="has-text-weight-normal">(Required)</span></label>
+                  <div class="field-body control">
+                    <input v-model="userInfo.mathAnswer" class="input" type="number" placeholder="Enter sum of 9 + 4">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">Job Function</label>
+                  <div class="field-body control">
+                    <select v-model="userInfo.jobFunction">
+                      <option>-- Select an option --</option>
+                      <option>Corporate/IS Management</option>
+                      <option>Information/Data/Computer Security Staff</option>
+                      <option>Network/Communications Security Staff</option>
+                      <option>IS Software Development</option>
+                      <option>Web Applications Development</option>
+                      <option>Web Content/Design Development</option>
+                      <option>Webmaster</option>
+                      <option>System or Network Administrator</option>
+                      <option>Disaster Recovery/Business Continuity</option>
+                      <option>Consultant (corporate or independent)</option>
+                      <option>Corporate/General Business Management</option>
+                      <option>Administrative Staff or Management</option>
+                      <option>Audit</option>
+                      <option>Financial</option>
+                      <option>Legal</option>
+                      <option>Marketing</option>
+                      <option>Sales</option>
+                      <option>Engineer/Scientist</option>
+                      <option>Student</option>
+                      <option>Other</option>
+                    </select>
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">Type of Organization</label>
+                  <div class="field-body control">
+                    <select v-model="userInfo.orgType">
+                      <option>-- Select an option --</option>
+                      <option>Commercial vendor of security products or services</option>
+                      <option>Freeware vendor of security products or services</option>
+                      <option>Other commercial software vendor</option>
+                      <option>Other freeware software vendor</option>
+                      <option>Communication Carriers (ISP, Telecomm, Data Comm, TV/Cable)</option>
+                      <option>Computer/Internet Related Services</option>
+                      <option>Computer and Networking Manufacturing</option>
+                      <option>VAR/OEM/Reseller</option>
+                      <option>Retailer/Wholesaler/Distributor</option>
+                      <option>Manufacturing (non-computer industry)</option>
+                      <option>Finance/Banking/Accounting/Insurance/Securities</option>
+                      <option>Insurance/Legal/Real Estate</option>
+                      <option>Government - includes federal, state and municipal</option>
+                      <option>Military</option>
+                      <option>Education - includes colleges, universities and other</option>
+                      <option>Health/Medical/Dental</option>
+                      <option>Aerospace/Transportation</option>
+                      <option>Mining/Oil/Gas/Chemicals</option>
+                      <option>Agriculture/Forestry/Fisheries</option>
+                      <option>Utilities - includes electric, gas and water</option>
+                      <option>Architecture/Construction/Engineering</option>
+                      <option>Travel/Hospitality/Recreation</option>
+                      <option>Nonprofit/Religious</option>
+                      <option>Non-Profit/Trade Associations</option>
+                      <option>Consulting/Research/Development Lab</option>
+                      <option>Media/Marketing/Advertising/Entertainment</option>
+                      <option>Student</option>
+                      <option>Self-employed</option>
+                      <option>Other</option>
+                    </select>
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">Organization</label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.organization" class="input" type="text" placeholder="Organization name">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">First Name</label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.firstName" class="input" type="text" placeholder="First name">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">Last Name</label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.lastName" class="input" type="text" placeholder="Last name">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">City/Town</label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.cityTown" class="input" type="text" placeholder="City/Town">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">State/Province</label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.stateProvince" class="input" type="text" placeholder="State/Province">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label">Country</label>
+                  <div class="field-body control">
+                    <input v-model.trim="userInfo.country" class="input" type="text" placeholder="Country">
+                  </div>
+                </div> <!-- end of field -->
+                <div class="field is-horizontal">
+                  <label class="field-label cve-field-label"></label>
+                  <div class="field-body control">
+                    <input type="submit" value="Subscribe" class="button cve-button cve-base-color">
+                  </div>
+                </div> <!-- end of field -->
+              </form>
+            </div> <!-- end of container -->
+            <div v-if="submitted && subscribed" class="notification is-success">
+              <h2 class="cve-top-margin">
+                <p id="successIcon" class="is-hidden">success</p>
+                <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="check-circle" role="success"
+                 aria-labelledby="successIcon" aria-hidden="false" />
+                Success! You've been subscribed.
+              </h2>
+            </div>
+            <div v-if="submitted && !subscribed" class="notification is-danger">
+              <h2 class="cve-top-margin">
+                <p id="successIcon" class="is-hidden">success</p>
+                <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="check-circle" role="danger"
+                  aria-labelledby="successIcon" aria-hidden="false" />
+                Service is currently unavailable.
+              </h2>
+              <p>Please
+                <span class="icon-text">
+                  <a href="https://cveform.mitre.org/" target="_blank">report the issue
+                    <span class="icon is-size-7 cve-icon-xxs">
+                      <p id="extenalLink1" class="is-hidden">external site</p>
+                      <font-awesome-icon icon="external-link-alt" aria-labelledby="extenalLink1" aria-hidden="false" focusable="false"/>
+                    </span>
+                  </a>
+                </span>
+                and try again later. Sorry for the inconvenience.
+              </p>
+            </div>
+            <div class="mt-2">View our <router-link to=/Legal/PrivacyPolicy>Privacy Policy</router-link></div>
+          </div>
+          <h2 class="title">How to Unsubscribe</h2>
+          <p>
+            <a href="mailto:lms@mitre.org?Subject=signoff%20cve-announce-list">Click here</a> to send email to lms.mitre.org with
+              the subject: "signoff cve-announce-list". Alternatively, instructions on how to unsubscribe appear at the bottom of
+              each newsletter.
+          </p>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import Vue from 'vue';
+
+export default {
+  name: 'NewsletterSignup',
+  components: {
+  },
+  data() {
+    return {
+      errors: [],
+      submitted: false,
+      subscribed: false,
+      userInfo: {
+        emailAddress: null,
+        mathAnswer: null,
+        firstName: '',
+        lastName: '',
+        jobFunction: '',
+        orgType: '',
+        organization: '',
+        cityTown: '',
+        stateProvince: '',
+        country: '',
+      },
+    };
+  },
+  methods: {
+    checkForm() {
+      this.errors = [];
+      if (!this.userInfo.emailAddress) {
+        this.errors.push('Email required.');
+      } else if (!this.validEmail(this.userInfo.emailAddress)) {
+        this.errors.push('Valid email required.');
+      }
+
+      if (!this.userInfo.mathAnswer) {
+        this.errors.push('Response to 9 + 4 required');
+      }
+
+      if (!this.errors.length) {
+        this.subscribe();
+      }
+    },
+    validEmail(email) {
+      const re = new RegExp(`${
+        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))/.source
+      }${/@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.source}`);
+      return re.test(email);
+    },
+    sanitizeUserInput() {
+      const htmlEntityencodingMap = {
+        '&': '&amp;',
+        '<': '&lt',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#x27;',
+      };
+
+      Object.entries(this.userInfo).forEach((data) => {
+        const [field, value] = data;
+
+        if (value.length > 0) {
+          let sanitizedvalue = value;
+          Object.entries(htmlEntityencodingMap).forEach((entry) => {
+            const [readableChar, codedChar] = entry;
+            sanitizedvalue = sanitizedvalue.replaceAll(readableChar, codedChar);
+          });
+          Vue.set(this.userInfo, field, sanitizedvalue);
+        }
+      });
+    },
+    subscribe() {
+      this.submitted = true;
+      this.subscribed = false;
+
+      this.sanitizeUserInput();
+
+      const instance = axios.create({
+        baseURL: this.$store.state.API_BASE,
+      });
+
+      instance.post('restapi/newsletter', this.userInfo)
+        .then((res) => {
+          if (res.status === 200) {
+            this.submitted = true;
+            this.subscribed = true;
+          } else {
+            this.submitted = true;
+            this.subscribed = false;
+          }
+        })
+        .catch(() => {
+          this.submitted = true;
+          this.subscribed = false;
+        });
+    },
+  },
+};
+
+</script>
+<style scoped lang="scss">
+@import '@/assets/style/globals.scss';
+
+.cve-field-label {
+  font-weight: bold;
+}
+
+.cve-top-margin {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/ResourcesSupport/ReportRequest.vue b/src/views/ResourcesSupport/ReportRequest.vue
@@ -236,9 +236,7 @@ export default {
 @import "@/assets/style/globals.scss";
 @import "bulma";
 @import "bulma-timeline";
-</style>
 
-<style >
 .dropdown-menu {
     display: block !important;
 }