Skip to content

#233 enable Newsletter Signup page, update styling and label #998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 18, 2022
Merged

#233 enable Newsletter Signup page, update styling and label #998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/assets/style/globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
12 changes: 1 addition & 11 deletions src/components/FooterModule.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
9 changes: 9 additions & 0 deletions src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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',
Expand Down
28 changes: 16 additions & 12 deletions src/views/Media/News/NewsletterSignup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -226,4 +226,8 @@ export default {
.cve-top-margin {
margin-top: 20px;
}

.field {
margin-bottom: 8px !important;
}
</style>