Skip to content

Commit fe63456

Browse files
athu-tranathu-tran
authored
Merge pull request #1895 from CVEProject/tat-181-1
Tat 181 1
2 parents f1cc994 + 82ceace commit fe63456

File tree

4 files changed

+310
-3
lines changed

4 files changed

+310
-3
lines changed

‎src/components/FooterModule.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<ul>
1515
<li><router-link to="/Media/News/AllNews">News</router-link></li>
1616
<li><router-link to="/Media/Events">Events</router-link></li>
17-
<li><a href="https://cve.mitre.org/news/newsletter.html" target="_blank">Sign up for e-newsletter</a></li>
17+
<li><router-link to="/Media/News/NewsletterSignup">Sign up for e-newsletter</router-link></li>
1818
</ul>
1919
</div>
2020
<div class="column">

‎src/router/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import NewsItem from '@/views/Media/News/NewsItem.vue';
3737
import NewsArchives from '@/views/Media/News/NewsArchives.vue';
3838
import BlogArchives from '@/views/Media/News/BlogArchives.vue';
3939
import Events from '@/views/Media/Events.vue';
40+
import NewsletterSignup from '@/views/Media/News/NewsletterSignup.vue';
4041

4142
Vue.use(VueRouter);
4243

@@ -346,6 +347,14 @@ const routes = [
346347
title: 'Events | CVE',
347348
},
348349
},
350+
{
351+
path: '/Media/News/NewsletterSignup',
352+
name: 'Newsletter Signup',
353+
component: NewsletterSignup,
354+
meta: {
355+
title: 'Newsletter Signup | CVE',
356+
},
357+
},
349358
{
350359
path: '*',
351360
name: 'NotFound',

‎src/views/Media/News/NewsletterSignup.vue‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
<template>
2+
<div id="cve-secondary-page-main-container">
3+
<div class="columns is-centered">
4+
<div class="column is-12-desktop is-12-tablet cve-main-column-content-width">
5+
<main id="cve-main-page-content" role="main">
6+
<div class="content">
7+
<h1 class="title">Email Newsletter</h1>
8+
<h2 class="title">Subscribe to the CVE<sup>®</sup> Program Newsletter</h2>
9+
<p class="content">
10+
<span class="has-text-weight-bold">CVE-Announce</span> provides general news about CVE such as new CNAs, new
11+
website features, CVE in the news, etc. Messages are sent infrequently, once a
12+
month or less.
13+
</p>
14+
<div v-if="!submitted" class="cve-white-bg-gray-border-container">
15+
<form id="emailSignup" class="cve-top-margin" @submit.prevent="checkForm" novalidate="true">
16+
<input type="hidden" name="X" value="9">
17+
<input type="hidden" name="Y" value="4">
18+
<div v-if="errors.length" class="notification is-danger">
19+
<p id="dangerIcon" class="is-hidden">danger</p>
20+
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="exclamation-circle" role="danger"
21+
aria-labelledby="dangerIcon" aria-hidden="false" />
22+
<span class="has-text-weight-bold"> Please correct the following error(s):</span>
23+
<ul>
24+
<li v-for="error in errors" :key=error>{{ error }}</li>
25+
</ul>
26+
</div>
27+
<div class="field is-horizontal">
28+
<label class="field-label cve-field-label">Email Address <span class="has-text-weight-normal">(Required)</span></label>
29+
<div class="field-body control">
30+
<input v-model.trim="userInfo.emailAddress" class="input" type="email" placeholder="Enter email address">
31+
</div>
32+
</div> <!-- end of field -->
33+
<div class="field is-horizontal">
34+
<label class="field-label cve-field-label">What is 9 + 4? <span class="has-text-weight-normal">(Required)</span></label>
35+
<div class="field-body control">
36+
<input v-model="userInfo.mathAnswer" class="input" type="number" placeholder="Enter sum of 9 + 4">
37+
</div>
38+
</div> <!-- end of field -->
39+
<div class="field is-horizontal">
40+
<label class="field-label cve-field-label">Job Function</label>
41+
<div class="field-body control">
42+
<select v-model="userInfo.jobFunction">
43+
<option>-- Select an option --</option>
44+
<option>Corporate/IS Management</option>
45+
<option>Information/Data/Computer Security Staff</option>
46+
<option>Network/Communications Security Staff</option>
47+
<option>IS Software Development</option>
48+
<option>Web Applications Development</option>
49+
<option>Web Content/Design Development</option>
50+
<option>Webmaster</option>
51+
<option>System or Network Administrator</option>
52+
<option>Disaster Recovery/Business Continuity</option>
53+
<option>Consultant (corporate or independent)</option>
54+
<option>Corporate/General Business Management</option>
55+
<option>Administrative Staff or Management</option>
56+
<option>Audit</option>
57+
<option>Financial</option>
58+
<option>Legal</option>
59+
<option>Marketing</option>
60+
<option>Sales</option>
61+
<option>Engineer/Scientist</option>
62+
<option>Student</option>
63+
<option>Other</option>
64+
</select>
65+
</div>
66+
</div> <!-- end of field -->
67+
<div class="field is-horizontal">
68+
<label class="field-label cve-field-label">Type of Organization</label>
69+
<div class="field-body control">
70+
<select v-model="userInfo.orgType">
71+
<option>-- Select an option --</option>
72+
<option>Commercial vendor of security products or services</option>
73+
<option>Freeware vendor of security products or services</option>
74+
<option>Other commercial software vendor</option>
75+
<option>Other freeware software vendor</option>
76+
<option>Communication Carriers (ISP, Telecomm, Data Comm, TV/Cable)</option>
77+
<option>Computer/Internet Related Services</option>
78+
<option>Computer and Networking Manufacturing</option>
79+
<option>VAR/OEM/Reseller</option>
80+
<option>Retailer/Wholesaler/Distributor</option>
81+
<option>Manufacturing (non-computer industry)</option>
82+
<option>Finance/Banking/Accounting/Insurance/Securities</option>
83+
<option>Insurance/Legal/Real Estate</option>
84+
<option>Government - includes federal, state and municipal</option>
85+
<option>Military</option>
86+
<option>Education - includes colleges, universities and other</option>
87+
<option>Health/Medical/Dental</option>
88+
<option>Aerospace/Transportation</option>
89+
<option>Mining/Oil/Gas/Chemicals</option>
90+
<option>Agriculture/Forestry/Fisheries</option>
91+
<option>Utilities - includes electric, gas and water</option>
92+
<option>Architecture/Construction/Engineering</option>
93+
<option>Travel/Hospitality/Recreation</option>
94+
<option>Nonprofit/Religious</option>
95+
<option>Non-Profit/Trade Associations</option>
96+
<option>Consulting/Research/Development Lab</option>
97+
<option>Media/Marketing/Advertising/Entertainment</option>
98+
<option>Student</option>
99+
<option>Self-employed</option>
100+
<option>Other</option>
101+
</select>
102+
</div>
103+
</div> <!-- end of field -->
104+
<div class="field is-horizontal">
105+
<label class="field-label cve-field-label">Organization</label>
106+
<div class="field-body control">
107+
<input v-model.trim="userInfo.organization" class="input" type="text" placeholder="Organization name">
108+
</div>
109+
</div> <!-- end of field -->
110+
<div class="field is-horizontal">
111+
<label class="field-label cve-field-label">First Name</label>
112+
<div class="field-body control">
113+
<input v-model.trim="userInfo.firstName" class="input" type="text" placeholder="First name">
114+
</div>
115+
</div> <!-- end of field -->
116+
<div class="field is-horizontal">
117+
<label class="field-label cve-field-label">Last Name</label>
118+
<div class="field-body control">
119+
<input v-model.trim="userInfo.lastName" class="input" type="text" placeholder="Last name">
120+
</div>
121+
</div> <!-- end of field -->
122+
<div class="field is-horizontal">
123+
<label class="field-label cve-field-label">City/Town</label>
124+
<div class="field-body control">
125+
<input v-model.trim="userInfo.cityTown" class="input" type="text" placeholder="City/Town">
126+
</div>
127+
</div> <!-- end of field -->
128+
<div class="field is-horizontal">
129+
<label class="field-label cve-field-label">State/Province</label>
130+
<div class="field-body control">
131+
<input v-model.trim="userInfo.stateProvince" class="input" type="text" placeholder="State/Province">
132+
</div>
133+
</div> <!-- end of field -->
134+
<div class="field is-horizontal">
135+
<label class="field-label cve-field-label">Country</label>
136+
<div class="field-body control">
137+
<input v-model.trim="userInfo.country" class="input" type="text" placeholder="Country">
138+
</div>
139+
</div> <!-- end of field -->
140+
<div class="field is-horizontal">
141+
<label class="field-label cve-field-label"></label>
142+
<div class="field-body control">
143+
<input type="submit" value="Subscribe" class="button cve-button cve-base-color">
144+
</div>
145+
</div> <!-- end of field -->
146+
</form>
147+
</div> <!-- end of container -->
148+
<div v-if="submitted && subscribed" class="notification is-success">
149+
<h2 class="cve-top-margin">
150+
<p id="successIcon" class="is-hidden">success</p>
151+
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="check-circle" role="success"
152+
aria-labelledby="successIcon" aria-hidden="false" />
153+
Success! You've been subscribed.
154+
</h2>
155+
</div>
156+
<div v-if="submitted && !subscribed" class="notification is-danger">
157+
<h2 class="cve-top-margin">
158+
<p id="successIcon" class="is-hidden">success</p>
159+
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="check-circle" role="danger"
160+
aria-labelledby="successIcon" aria-hidden="false" />
161+
Service is currently unavailable.
162+
</h2>
163+
<p>Please
164+
<span class="icon-text">
165+
<a href="https://cveform.mitre.org/" target="_blank">report the issue
166+
<span class="icon is-size-7 cve-icon-xxs">
167+
<p id="extenalLink1" class="is-hidden">external site</p>
168+
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalLink1" aria-hidden="false" focusable="false"/>
169+
</span>
170+
</a>
171+
</span>
172+
and try again later. Sorry for the inconvenience.
173+
</p>
174+
</div>
175+
<div class="mt-2">View our <router-link to=/Legal/PrivacyPolicy>Privacy Policy</router-link></div>
176+
</div>
177+
<h2 class="title">How to Unsubscribe</h2>
178+
<p>
179+
<a href="mailto:lms@mitre.org?Subject=signoff%20cve-announce-list">Click here</a> to send email to lms.mitre.org with
180+
the subject: "signoff cve-announce-list". Alternatively, instructions on how to unsubscribe appear at the bottom of
181+
each newsletter.
182+
</p>
183+
</main>
184+
</div>
185+
</div>
186+
</div>
187+
</template>
188+
189+
<script>
190+
import axios from 'axios';
191+
import Vue from 'vue';
192+
193+
export default {
194+
name: 'NewsletterSignup',
195+
components: {
196+
},
197+
data() {
198+
return {
199+
errors: [],
200+
submitted: false,
201+
subscribed: false,
202+
userInfo: {
203+
emailAddress: null,
204+
mathAnswer: null,
205+
firstName: '',
206+
lastName: '',
207+
jobFunction: '',
208+
orgType: '',
209+
organization: '',
210+
cityTown: '',
211+
stateProvince: '',
212+
country: '',
213+
},
214+
};
215+
},
216+
methods: {
217+
checkForm() {
218+
this.errors = [];
219+
if (!this.userInfo.emailAddress) {
220+
this.errors.push('Email required.');
221+
} else if (!this.validEmail(this.userInfo.emailAddress)) {
222+
this.errors.push('Valid email required.');
223+
}
224+
225+
if (!this.userInfo.mathAnswer) {
226+
this.errors.push('Response to 9 + 4 required');
227+
}
228+
229+
if (!this.errors.length) {
230+
this.subscribe();
231+
}
232+
},
233+
validEmail(email) {
234+
const re = new RegExp(`${
235+
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))/.source
236+
}${/@((\[[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}`);
237+
return re.test(email);
238+
},
239+
sanitizeUserInput() {
240+
const htmlEntityencodingMap = {
241+
'&': '&amp;',
242+
'<': '&lt',
243+
'>': '&gt;',
244+
'"': '&quot;',
245+
"'": '&#x27;',
246+
};
247+
248+
Object.entries(this.userInfo).forEach((data) => {
249+
const [field, value] = data;
250+
251+
if (value.length > 0) {
252+
let sanitizedvalue = value;
253+
Object.entries(htmlEntityencodingMap).forEach((entry) => {
254+
const [readableChar, codedChar] = entry;
255+
sanitizedvalue = sanitizedvalue.replaceAll(readableChar, codedChar);
256+
});
257+
Vue.set(this.userInfo, field, sanitizedvalue);
258+
}
259+
});
260+
},
261+
subscribe() {
262+
this.submitted = true;
263+
this.subscribed = false;
264+
265+
this.sanitizeUserInput();
266+
267+
const instance = axios.create({
268+
baseURL: this.$store.state.API_BASE,
269+
});
270+
271+
instance.post('restapi/newsletter', this.userInfo)
272+
.then((res) => {
273+
if (res.status === 200) {
274+
this.submitted = true;
275+
this.subscribed = true;
276+
} else {
277+
this.submitted = true;
278+
this.subscribed = false;
279+
}
280+
})
281+
.catch(() => {
282+
this.submitted = true;
283+
this.subscribed = false;
284+
});
285+
},
286+
},
287+
};
288+
289+
</script>
290+
<style scoped lang="scss">
291+
@import '@/assets/style/globals.scss';
292+
293+
.cve-field-label {
294+
font-weight: bold;
295+
}
296+
297+
.cve-top-margin {
298+
margin-top: 20px;
299+
}
300+
</style>

‎src/views/ResourcesSupport/ReportRequest.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,7 @@ export default {
236236
@import "@/assets/style/globals.scss";
237237
@import "bulma";
238238
@import "bulma-timeline";
239-
</style>
240239
241-
<style >
242240
.dropdown-menu {
243241
display: block !important;
244242
}

0 commit comments

Comments
 (0)