Merge pull request #998 from CVEProject/tat-233

#233 enable Newsletter Signup page, update styling and label

Author: slubar

src/assets/style/globals.scss

@@ -395,7 +395,7 @@ h6 {
 .cve-white-bg-gray-border-container {
   background-color: white;
   border: 1px solid $theme-color-base-lighter;
-  padding: 0 1rem 2rem 1rem;
+  padding: 0 1rem 1rem 1rem;
   margin-top: 1rem;
 }
 

src/components/FooterModule.vue

@@ -13,17 +13,7 @@
         <ul>
           <li><router-link to="/Media/News/AllNews">News</router-link></li>
           <li><router-link to="/Media/Events">Events</router-link></li>
-          <li>
-            <span class="icon-text">
-            <a href="https://cve.mitre.org/news/newsletter.html" target="_blank">Sign up for e-newsletter
-            <span class="icon cve-icon-xxs">
-              <p id="enewsletter" class="is-hidden">external site</p>
-              <font-awesome-icon icon="external-link-alt" aria-labelledby="enewsletter">
-              </font-awesome-icon>
-            </span>
-            </a>
-          </span>
-          </li>
+          <li><router-link to="/Media/NewsletterSignup">Sign up for e-newsletter</router-link></li>
         </ul>
       </div>
       <div class="column">

src/router/index.js

@@ -32,6 +32,7 @@ import Podcasts from '@/views/Media/News/Podcasts.vue';
 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 NewsletterSignup from '@/views/Media/News/NewsletterSignup.vue';
 import Events from '@/views/Media/Events.vue';
 
 Vue.use(VueRouter);
@@ -302,6 +303,14 @@ const routes = [
       title: 'Blog Archives | CVE',
     },
   },
+  {
+    path: '/Media/NewsletterSignup',
+    name: 'NewsletterSignup',
+    component: NewsletterSignup,
+    meta: {
+      title: 'NewsletterSignup | CVE',
+    },
+  },
   {
     path: '/Media/Events',
     name: 'Events',

src/views/Media/News/NewsletterSignup.vue

@@ -25,13 +25,13 @@
                   </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>
+                  <label class="field-label cve-field-label">Email Address <span class="is-size-7 has-text-weight-normal is-italic">Required</span></label>
                   <div class="field-body control">
-                    <input v-model.trim="emailAddress" class="input" type="email" placeholder="Enter email address">
+                    <input v-model.trim="emailAddress" class="input" type="email" placeholder="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>
+                  <label class="field-label cve-field-label">What is 9 + 4? <span class="is-size-7 has-text-weight-normal is-italic">Required</span></label>
                   <div class="field-body control">
                     <input v-model="mathAnswer" class="input" type="number" placeholder="Enter sum of 9 + 4">
                   </div>
@@ -140,18 +140,18 @@
                 <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">
+                    <button class="button cve-button cve-base-color">Subscribe</button>
                   </div>
                 </div> <!-- end of field -->
               </form>
             </div> <!-- end of container -->
             <div v-if="submitted" class="notification is-success">
-              <h2 class="cve-top-margin">
+              <div>
                 <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" />
+                <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="check-circle" role="success" aria-labelledby="successIcon" 
+                  aria-hidden="false" />
                 Success! Your subscription request has been submitted.
-              </h2>
+              </div>
             </div>
             <div class="mt-2">View our <router-link to=/Legal/PrivacyPolicy>Privacy Policy</router-link></div>
           </div>
@@ -193,13 +193,13 @@ export default {
     checkForm() {
       this.errors = [];
       if (!this.emailAddress) {
-        this.errors.push('Email required.');
+        this.errors.push('Email address required');
       } else if (!this.validEmail(this.emailAddress)) {
-        this.errors.push('Valid email required.');
+        this.errors.push('Valid email adress required');
       }
 
       if (!this.mathAnswer) {
-        this.errors.push('Response to 9 + 4 required');
+        this.errors.push('Response to "What is 9 + 4?" required');
       }
 
       if (!this.errors.length) {
@@ -217,7 +217,7 @@ export default {
 
 </script>
 <style scoped lang="scss">
-@import '../../assets/style/globals.scss';
+@import '@/assets/style/globals.scss';
 
 .cve-field-label {
   font-weight: bold;
@@ -226,4 +226,8 @@ export default {
 .cve-top-margin {
   margin-top: 20px;
 }
+
+.field {
+  margin-bottom: 8px !important;
+}
 </style>