merge develop into release branch

.env.development

@@ -1,2 +1,3 @@
 REACT_APP_API_URL=http://localhost:5000
-REACT_APP_SHOW_RQ_TOOLS=true
+REACT_APP_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_SHOW_RQ_TOOLS=true

Dockerfile.local

@@ -20,8 +20,9 @@ RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`u
     chmod +x envsubst && \
     mv envsubst /usr/local/bin
 
-#set environment variable
+#set environment variables
 ENV REACT_APP_API_URL=http://localhost:5000
+ENV REACT_APP_RECAPTCHA_SITEKEY=6Lc0JOAbAAAAAIv3CYhhU6lHzHovl0yfMhI7mDl8
 
 #copy config file over to the template
 COPY ./nginx.config /etc/nginx/nginx.template

Dockerfile.production

@@ -20,8 +20,9 @@ RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`u
     chmod +x envsubst && \
     mv envsubst /usr/local/bin
 
-#set environment variable
+#set environment variables
 ENV REACT_APP_API_URL=https://app-backend-prod-001.azurewebsites.net
+ENV REACT_APP_RECAPTCHA_SITEKEY=6Lfgw9YbAAAAAJT8vn0SNIRhRTmsrQtfV8Z4fEWl
 
 #copy config file over to the template
 COPY ./nginx.config /etc/nginx/nginx.template

Dockerfile.test

@@ -20,8 +20,9 @@ RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`u
     chmod +x envsubst && \
     mv envsubst /usr/local/bin
 
-#set environment variable
+#set environment variables
 ENV REACT_APP_API_URL=https://app-backend-test-001.azurewebsites.net
+ENV REACT_APP_RECAPTCHA_SITEKEY=6Lc0JOAbAAAAAIv3CYhhU6lHzHovl0yfMhI7mDl8
 
 #copy config file over to the template
 COPY ./nginx.config /etc/nginx/nginx.template

cypress.json

@@ -9,5 +9,6 @@
   "retries": {
     "runMode": 2,
     "openMode": 0
-  }
+  },
+  "chromeWebSecurity": false
 }

cypress/fixtures/register.json

@@ -1,10 +1,11 @@
 {
-  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcmVzaCI6dHJ1ZSwiaWF0IjoxNjIxMDc2NDA1LCJqdGkiOiJiMDMzNzFlNC1jODgzLTQ2MTAtOTA1Zi05NTA1YTBiOTVjYjAiLCJuYmYiOjE2MjEwNzY0MDUsInR5cGUiOiJhY2Nlc3MiLCJzdWIiOiI4RjEyMTIwMS0wNEZGLTRENTUtOERCNy1CQkNBQjE1QzRDQzIiLCJleHAiOjE2MjExNjI4MDV9.co-anCPDpuGK-A0_iu5nzAY52L6MxL7zTESOfW-UbyA",
+  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcmVzaCI6dHJ1ZSwiaWF0IjoxNjI3MjIwNjU1LCJqdGkiOiJhYzdlOGFmNi00YjQ1LTQ2ZTYtOTAyYi1lYzcxMGZjNmFjNWQiLCJuYmYiOjE2MjcyMjA2NTUsInR5cGUiOiJhY2Nlc3MiLCJzdWIiOiI5Q0RDNkRCRi1BRUY3LTQ2NzktQTk1RC1EMzMwMjcxNzEwNzYiLCJleHAiOjE2MjcyMjE1NTV9.4DoqxC616-EucHs8XzWYGD8HjGaDQrpkPBoVJ0XfoaQ",
   "message": "Successfully created user",
   "user": {
-    "email": "test233e3@example.com",
-    "full_name": "Test User",
-    "session_id": "58627AD1-4252-4EAB-9892-7529291C7AC7",
-    "user_uuid": "8F121201-04FF-4D55-8DB7-BBCAB15C4CC2"
+    "email": "testds1c1@example.com",
+    "first_name": "test",
+    "last_name": "bunny",
+    "quiz_id": "9E833B3C-1CD5-41AC-B120-ED1005E79F92",
+    "user_uuid": "9CDC6DBF-AEF7-4679-A95D-D33027171076"
   }
 }

cypress/integration/actionsfeed.spec.ts

@@ -7,7 +7,6 @@ describe('Actions feed loads and looks correct', () => {
     // Set session id and accept cookies as if a returning user
     cy.acceptCookies();
     cy.mockServer();
-
     cy.login();
     cy.wait(1).contains('Actions').click();
   });

cypress/integration/login.spec.ts

@@ -42,9 +42,9 @@ describe('Login', () => {
 
   it('allows a user to login with valid account details', () => {
     cy.visit('/login');
-
     cy.get('input#email').type(testUser.email);
     cy.get('input#password').type(testUser.password);
+    cy.switchToIframe('iframe[title="reCAPTCHA"]').click();
     cy.contains(/log in/i).click();
     cy.get('.MuiAlert-root').contains('Welcome, Test');
     cy.url().should('include', '/climate-feed');
@@ -100,6 +100,7 @@ describe('Login', () => {
     cy.visit('/login');
     cy.get('input#email').type(testUser.email);
     cy.get('input#password').type(testUser.password);
+    cy.switchToIframe('iframe[title="reCAPTCHA"]').click();
     cy.contains(/log in/i).click();
     cy.url().should('include', '/login');
     cy.get('.MuiAlert-root').contains(/Wrong email or password\. Try again\./i);

cypress/integration/menubar.spec.ts

@@ -3,12 +3,33 @@
 import { terminalLog } from '../support/helpers.ts';
 
 describe('Menu bar opens and looks correct', () => {
-  it('can open menubar', () => {
+  beforeEach(() => {
     cy.acceptCookies();
+    cy.mockServer();
+  });
+
+  it('can open menubar', () => {
     cy.visit('/start');
     cy.get('[aria-label="menu"]').should('be.visible').click();
     cy.contains('About ClimateMind').should('be.visible');
     cy.checkAccessibility(terminalLog);
     cy.percySnapshot('MenuBar');
   });
+
+  it('should have the right menu items', () => {
+    cy.login();
+    cy.get('[aria-label="menu"]').should('be.visible').click();
+    cy.contains(/About ClimateMind/i);
+    cy.contains(/Scientists Speak Up/i);
+    cy.contains(/Privacy Policy/i);
+    cy.contains(/LOG OUT/i);
+    cy.contains(/EMAIL US/i);
+  });
+
+  it('personal values and retake quiz should not be in the menu until user has take the quiz', () => {
+    cy.visit('/');
+    cy.get('[aria-label="menu"]').should('be.visible').click();
+    cy.contains(/Personal Values/i).should('not.exist');
+    cy.contains(/Re-take the Quiz/i).should('not.exist');
+  });
 });

cypress/integration/register.spec.ts

@@ -24,20 +24,23 @@ describe('User can register', () => {
     cy.get('input#email').type('test.user@example.com');
     cy.get('input#password').type('Password123!');
     cy.get('input#confirmPassword').type('Password123!');
-    cy.contains(/create account and go to feed/i).should('be.enabled');
+    cy.contains(/create account and go to feed/i)
+      .should('be.enabled')
+      .click();
     // TODO: Imporve this test
-    // cy.url().should('include', 'climate-feed');
-    // cy.contains('Your Personal Climate Feed');
+    cy.url().should('include', 'climate-feed');
+    cy.contains('Your Personal Climate Feed');
   });
 
   it('User can skip registration', () => {
     cy.visit('/sign-up');
     cy.contains(/Create a Climate Mind account/i).should('be.visible');
-    cy.contains(/skip making an account and see feed/i).should('be.enabled');
+    cy.contains(/skip making an account and see feed/i)
+      .should('be.enabled')
+      .click();
     // TODO: Improve this test
-    // .click();
-    // cy.url().should('include', 'climate-feed');
-    // cy.contains('Your Personal Climate Feed');
+    cy.url().should('include', 'climate-feed');
+    cy.contains('Your Personal Climate Feed');
   });
 
   it('Passwords must match to register', () => {
@@ -85,10 +88,10 @@ describe('User can register', () => {
 
   it('Password must be valid', () => {
     cy.visit('/sign-up');
-    cy.get('input#password').type('Password123');
+    cy.get('input#password').type('Password');
     cy.get('input#firstname').click();
     cy.contains(
-      /Password must be between 8-20 characters and containt at least one uppercase letter, one lowercase letter, one number and one special character/i
+      /Invalid Password\. Password must be at least 8 characters and containt one number or one special character/i
     );
     cy.contains(/create account and go to feed/i).should('be.disabled');
   });

cypress/support/commands.ts

@@ -90,6 +90,7 @@ Cypress.Commands.add('login', () => {
   cy.visit('/login');
   cy.get('input#email').type('test.user@example.com');
   cy.get('input#password').type('Password123!');
+  cy.switchToIframe('iframe[title="reCAPTCHA"]').click();
   cy.contains(/log in/i).click();
   cy.get('.MuiAlert-root').contains('Welcome, Test');
 });
@@ -170,3 +171,13 @@ Cypress.Commands.add('mockServer', (quizId = '1234') => {
     response: 'fixture:solutions.json',
   });
 });
+
+//Switch to iFrame
+Cypress.Commands.add('switchToIframe', (iframe) => {
+  return cy
+    .get(iframe, { force: true })
+    .its('0.contentDocument.body')
+    .should('be.visible')
+    .then(cy.wrap);
+});
+

cypress/support/index.d.ts

@@ -35,5 +35,21 @@ declare namespace Cypress {
      * A command to go mock the api responses
      */
     mockServer(sessionId?: string): void;
+
+    /**
+     * A command to switch to click recaptcha iframe
+     */
+    switchToIframe(iframeName: any): any;
+
+
+    /**
+     * A command to login with the recaptcha clicked
+    */
+    loginWithRecaptcha(email: string, password: string): void;
+
+    /**
+     * A command to click the login button
+     */
+    clickLoginButton(): void;
   }
 }

nginx.config

@@ -9,7 +9,7 @@ server {
         try_files $$uri /index.html;
     }
 
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self' http://www.googletagmanager.com/ https://www.google-analytics.com/ 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://*.typekit.net https://fonts.googleapis.com; img-src * www.googletagmanager.com 'self' data:; font-src 'self' *.typekit.net fonts.googleapis.com fonts.gstatic.com; connect-src 'self' https://*.okta.com https://app-backend-test-001.azurewebsites.net https://app-backend-prod-001.azurewebsites.net https://www.google-analytics.com ;";
+    add_header Content-Security-Policy "default-src 'self'; frame-src https://www.google.com/; script-src 'self' http://www.googletagmanager.com/ https://www.google-analytics.com/ https://www.google.com/ https://www.gstatic.com/ 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://*.typekit.net https://fonts.googleapis.com; img-src * www.googletagmanager.com 'self' data:; font-src 'self' *.typekit.net fonts.googleapis.com fonts.gstatic.com; connect-src 'self' https://*.okta.com https://app-backend-test-001.azurewebsites.net https://app-backend-prod-001.azurewebsites.net https://www.google-analytics.com ;";
     add_header Referrer-Policy "no-referrer, strict-origin-when-cross-origin";
     add_header Strict-Transport-Security "max-age=63072000; includeSubDomains";
     add_header X-Content-Type-Options nosniff;

package.json

@@ -23,6 +23,7 @@
     "react-chartjs-3": "^2.7.7",
     "react-div-100vh": "^0.5.6",
     "react-dom": "^16.13.1",
+    "react-google-recaptcha": "^2.1.0",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-markdown": "^5.0.3",
@@ -93,6 +94,7 @@
     "@types/node": "^12.12.50",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
+    "@types/react-google-recaptcha": "^2.1.2",
     "@types/react-helmet": "^6.1.1",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^3.6.1",

src/__tests__/src/__utilities__/password.ts

@@ -0,0 +1,40 @@
+import { passwordRegex } from '../../../helpers/validationSchemas';
+
+describe('Password requirements', () => {
+  const isPasswordValid = (password: string) => passwordRegex.test(password);
+
+  it('Must be min length', () => {
+    expect(isPasswordValid('Passwor')).toBe(false);
+  });
+  it('Must not exceed max length', () => {
+    const longPassword: any = 'p' * 129;
+    expect(isPasswordValid(longPassword)).toBe(false);
+  });
+  it('Must Need a number or special char', () => {
+    expect(isPasswordValid('Password')).toBe(false);
+    expect(isPasswordValid('password')).toBe(false);
+  });
+  it('Accepts valid passwords', () => {
+    const testPasses = [
+      'Password123',
+      'Password!',
+      'password!',
+      'Passworddddddddd!',
+      'dddddddddddddddddds!',
+      '1234567890123456789D',
+    ];
+    testPasses.forEach((pass) => expect(isPasswordValid(pass)).toBe(true));
+  });
+
+  it('All special chars make a valid password', () => {
+    // Make a password for every valid special character
+    const chars: string = '!"#$£%&\'()*+,-.:;<=>?@[]^_`{|}~';
+    const testPasses = [];
+    for (let char of chars) {
+      testPasses.push('Password' + char);
+    }
+
+    // All special chars passwords
+    testPasses.forEach((pass) => expect(isPasswordValid(pass)).toBe(true));
+  });
+});

src/api/postLogin.ts

@@ -4,6 +4,7 @@ import { climateApi } from '../api/apiHelper';
 export type loginPayload = {
   email: string;
   password: string;
+  recaptchaToken:string;
 };
 
 export type loginResponse = {
@@ -15,13 +16,15 @@ export type loginResponse = {
 export const postLogin = async ({
   email,
   password,
+  recaptchaToken,
 }: loginPayload): Promise<loginResponse> => {
-  const url = '/login';
+  const url = "/login";
   try {
     // Make request for token
     const request = await climateApi.post(
       url,
       {
+        recaptchaToken,
         email,
         password,
       },

src/components/AppBar/MenuDrawer.tsx

@@ -60,7 +60,7 @@ const menuLinks = [
 const MenuDrawer: React.FC<MenuDrawerProps> = ({ isShowing, setIsShowing }) => {
   const classes = useStyles();
   const { push } = useHistory();
-  const { sessionId, clearSession } = useSession();
+  const { quizId, clearSession } = useSession();
   const { setCurrentSet } = useQuestions();
   const { dispatch } = useResponses();
   const { clearPersonality } = useClimatePersonality();
@@ -113,7 +113,7 @@ const MenuDrawer: React.FC<MenuDrawerProps> = ({ isShowing, setIsShowing }) => {
           <Grid item>
             <List>
               {/* Personal Values option should only show if there is a session id */}
-              {sessionId && (
+              {quizId && (
                 <>
                   <ListItem
                     component="li"

src/components/AppBar/MenuPaper.tsx

@@ -48,7 +48,7 @@ const menuLinks = [
 const TopMenu: React.FC<MenuPaperProps> = ({ isShowing, setIsShowing }) => {
   const classes = useStyles();
   const { push } = useHistory();
-  const { sessionId, clearSession } = useSession();
+  const { quizId, clearSession } = useSession();
   const { dispatch } = useResponses();
   const { clearPersonality } = useClimatePersonality();
   const { setCurrentSet } = useQuestions();
@@ -111,7 +111,7 @@ const TopMenu: React.FC<MenuPaperProps> = ({ isShowing, setIsShowing }) => {
             <Grid item>
               <List>
                 {/* Personal Values option should only show if there is a session id */}
-                {sessionId && (
+                {quizId && (
                   <>
                     <ListItem
                       component="li"

src/components/CardHeader.tsx

@@ -91,7 +91,6 @@ const CardHeader: React.FC<CardHeaderProps> = ({
           {cardIcon && (
             <Grid
               item
-              xs={2}
               data-testid="CardIcon"
             >
               <CardIcon actionType={cardIcon} />