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

Tat 181 1

Author: athu-tran

src/views/Media/News/NewsletterSignup.vue

@@ -145,32 +145,44 @@
                 </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 v-else>
+              <div class="cve-loading-message has-text-centered" v-if="isLoading">
+              <span class="icon-text">
+                <span class="icon">
+                  <span class="loader is-loading"/>
+                </span>
+                <span>Please wait while we process your request...</span>
+              </span>
             </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"/>
+              <div v-else>
+                <div v-if="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="!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>
-                  </a>
-                </span>
-                and try again later. Sorry for the inconvenience.
-              </p>
+                    and try again later. Sorry for the inconvenience.
+                  </p>
+                </div>
+              </div>
             </div>
             <div class="mt-2">View our <router-link to=/Legal/PrivacyPolicy>Privacy Policy</router-link></div>
           </div>
@@ -197,6 +209,7 @@ export default {
   data() {
     return {
       errors: [],
+      isLoading: false,
       submitted: false,
       subscribed: false,
       userInfo: {
@@ -236,51 +249,23 @@ export default {
       }${/@((\[[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.isLoading = true;
       this.subscribed = false;
 
-      this.sanitizeUserInput();
-
       const instance = axios.create({
         baseURL: this.$store.state.API_BASE,
       });
 
-      instance.post('restapi/newsletter', this.userInfo)
+        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;
+        .finally(() => {
+          this.isLoading = false;
         });
     },
   },