Unified auth experience for Volunteer signup/login[Staging]

cypress.config.js

@@ -1,10 +1,24 @@
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+const { JwtCreation } = require('@jc21/cypress-jwt-creation')
 const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     specPattern: 'e2e/integration/*.test.js',
-    supportFile: 'e2e/support/index.js'
+    supportFile: 'e2e/support/index.js',
+
+    setupNodeEvents(on, config) {
+      on(
+        'file:preprocessor',
+        webpackPreprocessor(webpackPreprocessor.defaultOptions)
+      )
+      on('task', JwtCreation(config))
+      return config
+    }
+  },
+  env: {
+    jwtPrivateKey: `${process.cwd()}/e2e/privatekey.txt`
   },
   fixturesFolder: 'e2e/fixtures',
   screenshotsFolder: 'e2e/screenshots',

e2e/integration/journey.test.js

@@ -1,4 +1,7 @@
 const mockServerURL = 'http://localhost:3001'
+const email = 'jane.doe@morge.org'
+const firstName = 'Jane'
+const lastName = 'Doe'
 
 beforeEach(() => {
   cy.intercept('GET', `${mockServerURL}/cities?visibleIn=VOLUNTEER_FORM`, {
@@ -10,31 +13,39 @@ beforeEach(() => {
   cy.intercept('GET', `${mockServerURL}/employers`, {
     fixture: 'employers.json'
   })
-  cy.visit('/')
+
+  cy.task('generateToken', {
+    claims: { email, fullName: `${firstName} ${lastName}` },
+    algo: 'HS256'
+  }).then(token => cy.login(token))
 })
 
 it('can submit a minimal form', () => {
+  cy.findByRole('textbox', { name: /email/i }).should('have.value', email)
+  cy.findByRole('textbox', { name: /first name/i }).should(
+    'have.value',
+    firstName
+  )
+  cy.findByRole('textbox', { name: /last name/i }).should(
+    'have.value',
+    lastName
+  )
+
   cy.intercept('POST', `${mockServerURL}/volunteer`, req => {
     req.reply({ volunteer: { _id: 'some-new-id', ...req.body } })
   }).as('createVolunteer')
   const initialData = {
-    firstName: 'Jane',
-    lastName: 'Doe',
-    email: 'jane.doe@morgue.org',
     tel: '01189998819991197253',
     interestedInVolunteer: 'just sounds interesting',
     interestedInCYF: 'trying to do my bit',
     industry: 'Education',
     hearAboutCYF: 'Social media'
   }
-
-  cy.findByRole('textbox', { name: /first name/i }).type(initialData.firstName)
-  cy.findByRole('textbox', { name: /last name/i }).type(initialData.lastName)
+  //email, first & last name pre-populated at login
   cy.findByRole('combobox', { name: /city/i }).select('London')
   cy.findByRole('combobox', {
     name: /select the team you want to volunteer for/i
   }).select('Education')
-  cy.findByRole('textbox', { name: /email/i }).type(initialData.email)
   cy.findByRole('textbox', { name: /phone number/i }).type(initialData.tel)
   cy.findByRole('textbox', { name: /interested in volunteering/i }).type(
     initialData.interestedInVolunteer
@@ -93,9 +104,7 @@ it('can submit a minimal form', () => {
       name: 'ReactJS'
     })
   })
-  cy.findByText(
-    `Welcome ${initialData.firstName} ${initialData.lastName}`
-  ).should('exist')
+  cy.findByText(`Welcome ${firstName} ${lastName}`).should('exist')
   cy.findByText(/thank you for submitting your application/i).should('exist')
 })
 
@@ -104,13 +113,10 @@ it('requires employee selection', () => {
     req.reply({ volunteer: { _id: 'some-new-id', ...req.body } })
   }).as('createVolunteer')
 
-  cy.findByRole('textbox', { name: /first name/i }).type('Laura')
-  cy.findByRole('textbox', { name: /last name/i }).type('Olsen')
   cy.findByRole('combobox', { name: /city/i }).select('London')
   cy.findByRole('combobox', {
     name: /select the team you want to volunteer for/i
   }).select('5e863b833150f6001b34627d')
-  cy.findByRole('textbox', { name: /email/i }).type('laura.olsen@example.com')
   cy.findByRole('textbox', { name: /phone number/i }).type('96838503')
   cy.findByRole('textbox', { name: /interested in volunteering/i }).type('just')
   cy.findByRole('textbox', { name: /interested in code your future/i }).type(

e2e/integration/withCode.test.js

@@ -7,6 +7,13 @@ beforeEach(() => {
   cy.intercept('GET', `${mockServerURL}/teams`, {
     fixture: 'teams.json'
   })
+  cy.intercept('GET', `${mockServerURL}/employers`, {
+    fixture: 'teams.json'
+  })
+  cy.task('generateToken', {
+    claims: { email: 'foo@bar.org' },
+    algo: 'HS256'
+  }).then(token => cy.login(token))
 })
 
 it('shows success message', () => {
@@ -25,9 +32,6 @@ it('includes the user ID when resubmitting', () => {
   cy.findByRole('textbox', { name: /first name/i }).type('Erhard')
   cy.findByRole('textbox', { name: /last name/i }).type('Hennemann')
   cy.findByRole('combobox', { name: /city/i }).select('London')
-  cy.findByRole('textbox', { name: /email/i }).type(
-    'erhard.hennemann@example.com'
-  )
   cy.findByRole('combobox', {
     name: /select the team you want to volunteer for/i
   }).select('Education')
@@ -46,6 +50,7 @@ it('includes the user ID when resubmitting', () => {
 })
 
 it('lets you request a reminder email', () => {
+  // cy.login(token)
   cy.intercept('POST', `${mockServerURL}/volunteer/email/verification`, {
     statusCode: 200
   }).as('verifyEmail')
@@ -60,7 +65,6 @@ it('lets you request a reminder email', () => {
   // TODO why is this a clickable span?!
   cy.findByText('here').click()
   // TODO not accessible by label
-  cy.findByRole('textbox').type(email)
   cy.findByRole('button', { name: /submit/i }).click()
 
   cy.wait('@verifyEmail').then(({ request: { body: payload } }) => {

e2e/privatekey.txt

@@ -0,0 +1 @@
+JWT_SECRET

e2e/support/commands.js

@@ -4,3 +4,23 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************//
 import '@testing-library/cypress/add-commands'
+const mockServerURL = 'http://localhost:3001'
+
+Cypress.Commands.add('login', token => {
+  cy.intercept('POST', `${mockServerURL}/volunteer/login`, req => {
+    req.reply({ token })
+  }).as('login')
+  cy.visit('/')
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(200)
+  cy.findByRole('textbox', { name: /email/i })
+    .should('be.visible')
+    .type('jane@codeyourfuture.io')
+  cy.findByRole('button', { name: /submit/i })
+    .should('be.visible')
+    .click()
+  cy.wait('@login')
+
+  cy.findByText(/Please check your email/i).should('exist')
+  cy.visit(`${Cypress.config('baseUrl')}/log-in/${token}`)
+})

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^1.1.2",
+    "jwt-decode": "^2.2.0",
     "moment": "^2.23.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -64,6 +65,8 @@
     ]
   },
   "devDependencies": {
+    "@cypress/webpack-preprocessor": "^6.0.2",
+    "@jc21/cypress-jwt-creation": "^0.0.6",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/Components/Loading/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default ({ err, msg }) => {
+  if (err) {
+    return <p className="errors">{err}</p>
+  }
+  if (msg) {
+    return <p className="success">{msg}</p>
+  }
+  return (
+    <div className="d-flex justify-content-center mt-5 p-5">
+      <div className="loader" />
+    </div>
+  )
+}

src/Components/auth/EmailLogin.js

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react'
+
+export default props => (
+  <Fragment>
+    <p className="login-p1">Welcome</p>
+    <form className="mt-0" onSubmit={props.handleSubmit}>
+      <div className="form-group-login">
+        <label htmlFor="email" className="lead">
+          Log in with email
+        </label>
+        {props.error && <p className="errors">{props.error}</p>}
+        <div>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            className="form-control2"
+            value={props.email}
+            required
+            onChange={props.onChange}
+          />
+          <button
+            disabled={props.email.trim() === ' '}
+            className="sign-up-btnn"
+            type="submit"
+            name="submit"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </form>
+    <p className="line1">or</p>
+  </Fragment>
+)

src/Components/auth/Login.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+import * as AuthService from '../../layout/AuthService'
+import { useNavigate, useParams } from 'react-router-dom'
+
+const GitHubLogIn = () => {
+  const navigate = useNavigate()
+  const params = useParams()
+  const { token } = params
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const redirectUser = async token => {
+      if (token) {
+        await AuthService.setToken(token)
+        navigate('/')
+      } else {
+        setError('No token provided, please make sure you have the right URL')
+      }
+    }
+    redirectUser(token)
+  }, [navigate, token])
+
+  return (
+    <div className="sign-in">{error && <p className="error">{error}</p>}</div>
+  )
+}
+
+export default GitHubLogIn