diff --git a/frontend/cypress/integration/components/mailingForm.spec.js b/frontend/cypress/integration/components/mailingForm.spec.js
index 8c3e90c6..df22c1e2 100644
--- a/frontend/cypress/integration/components/mailingForm.spec.js
+++ b/frontend/cypress/integration/components/mailingForm.spec.js
@@ -6,11 +6,11 @@ describe('Mailing forms', () => {
cy.get('[data-cy=mailing-form]');
// By referencing general-tab items we are ensuring that it is selected by default
// Check if name label exists and is required
- cy.get('[data-cy=general-name-label]').contains('Name *');
+ cy.get('[data-cy=general-name-label]').contains('Name').should('have.class', 'required');
// Check if email label exists and is required
- cy.get('[data-cy=general-email-label]').contains('Email *');
+ cy.get('[data-cy=general-email-label]').contains('Email').should('have.class', 'required');
// Check if message label exists and is required
- cy.get('[data-cy=general-message-label]').contains('Message *');
+ cy.get('[data-cy=general-message-label]').contains('Message').should('have.class', 'required');
// Ensure send button is disabled
cy.get('[data-cy=general-send-button]').should('be.disabled');
// Fill in valid name
@@ -34,18 +34,18 @@ describe('Mailing forms', () => {
// Ensure the mailing form exists in the Sponsors page
cy.get('[data-cy=mailing-form]');
// Check if name label changed to the sponsorship form version
- cy.get('[data-cy=sponsorship-name-label]').contains('Company Name *');
+ cy.get('[data-cy=sponsorship-name-label]').contains('Company Name').should('have.class', 'required');
});
it('checks labels and validation of a feedback form', () => {
// Visit engage page
cy.visit('/#/engage');
// Select feedback form tab
- cy.get('[data-cy=feedback-form-tab]').click();
+ cy.get('[data-cy=feedback-form-selector]').click();
// Check if name label is not required (marked with *)
- cy.get('[data-cy=feedback-name-label]').should('not.contain', '*');
+ cy.get('[data-cy=feedback-name-label]').should('not.have.class', 'required');
/// Check if email label is not required (marked with *)
- cy.get('[data-cy=feedback-email-label]').should('not.contain', '*');
+ cy.get('[data-cy=feedback-email-label]').should('not.have.class', 'required');
// Ensure send button is disabled
cy.get('[data-cy=feedback-send-button]').should('be.disabled');
// Fill in valid message
diff --git a/frontend/src/components/MailingForm.vue b/frontend/src/components/MailingForm.vue
index 20041237..46cda266 100644
--- a/frontend/src/components/MailingForm.vue
+++ b/frontend/src/components/MailingForm.vue
@@ -12,26 +12,23 @@
-
@@ -60,6 +57,11 @@ export default {
isType(name) {
return this.type === name;
},
+ getLabelClass(isRequired) {
+ const lc = 'text-body-1 input-label';
+ if (isRequired) return lc.concat(' required');
+ return lc;
+ },
send() {
APIClient.mailingAPI(MAILING_URL[this.type], this.name, this.email, this.body)
.then((res) => {
@@ -97,8 +99,8 @@ export default {
float:left;
}
-.required
-{
+.required:after {
+ content:" *";
color: red;
-}
+ }
diff --git a/frontend/src/views/Engage.vue b/frontend/src/views/Engage.vue
index eb50433a..4db5c423 100644
--- a/frontend/src/views/Engage.vue
+++ b/frontend/src/views/Engage.vue
@@ -72,30 +72,24 @@
-
-
+
+ Still have some questions?
+
-
- Enquiry
-
-
-
-
-
+
+
+ Enquiry
+
+
+ Feedback
+
+
-
- Feedback
-
-
-
-
-
+
+
+
-
+
@@ -109,6 +103,7 @@ import APIClient from '../utils/APIClient';
export default {
name: 'Engage',
data: () => ({
+ activeForm: 'general',
socialLinks: [],
faqLinks: []
}),