[master] Chore/1102 form data security fix

.circleci/config.yml

@@ -70,23 +70,23 @@ jobs:
           environment:
             BUILD_PATH: 'qa'
             GENERATE_SOURCEMAP: 'false'
-            REACT_APP_NODE_ENV: 'QA'
+            VITE_NODE_ENV: 'QA'
       - run:
           name: build staging
           command: yarn build
           environment:
             BUILD_PATH: 'staging'
             GENERATE_SOURCEMAP: 'false'
-            REACT_APP_NODE_ENV: 'STAGING'
+            VITE_NODE_ENV: 'STAGING'
       - run:
           name: build production
           command: yarn build
           environment:
             BUILD_PATH: 'production'
             GENERATE_SOURCEMAP: 'false'
-            REACT_APP_NODE_ENV: 'PRODUCTION'
+            VITE_NODE_ENV: 'PRODUCTION'
       - persist_to_workspace:
-          root: .
+          root: build
           paths:
             - qa
             - staging

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 yarn lint-staged

README.md

@@ -24,7 +24,7 @@ In the project directory, you can run:
 ### `yarn start`
 
 Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:3002](http://localhost:3002) to view it in the browser.
 
 The page will reload if you make edits.<br>
 You will also see any lint errors in the console.
@@ -46,8 +46,8 @@ Your app is ready to be deployed!
 
 Runs the [Cypress] end-to-end tests, which means:
 
-- Starting a mock for the backend server on port 3100
-- Starting the forms app in LOCAL mode on port 3000
+- Starting a mock for the backend server on port 3001
+- Starting the forms app in LOCAL mode on port 3002
 - Waiting for the app to start then running the tests
 
 [cypress]: https://www.cypress.io/

cypress.config.js

@@ -2,7 +2,7 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://localhost:3002',
     specPattern: 'e2e/integration/*.test.js',
     supportFile: 'e2e/support/index.js'
   },

eslint.config.mjs

@@ -0,0 +1,16 @@
+import prettier from 'eslint-plugin-prettier'
+
+export default [
+  {
+    plugins: { prettier: prettier },
+    rules: {
+      'import/no-anonymous-default-export': 'off',
+      'prettier/prettier': [
+        'error',
+        {
+          arrowParens: 'avoid'
+        }
+      ]
+    }
+  }
+]

public/index.html → index.html

@@ -7,8 +7,8 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <title>CYF - Volunteer form</title>
     <link
       rel="stylesheet"
@@ -61,5 +61,7 @@
       crossorigin="anonymous"
     ></script>
     <script src="https://kit.fontawesome.com/5571a1d5bc.js"></script>
+
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

package.json

@@ -3,59 +3,41 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^1.8.2",
-    "moment": "^2.23.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@reduxjs/toolkit": "^2.9.0",
+    "axios": "^1.12.2",
+    "moment": "^2.30.1",
+    "react": "^18",
+    "react-dom": "^18",
     "react-ga": "^3.3.1",
-    "react-phone-number-input": "^3.2.11",
-    "react-redux": "^8.0.4",
-    "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
-    "react-select": "^5.7.0",
-    "reactstrap": "^8.0.1",
-    "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0"
+    "react-phone-number-input": "^3.4.12",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.9.3",
+    "react-select": "^5.10.2",
+    "reactstrap": "^9.2.3",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0"
   },
   "scripts": {
-    "build": "react-scripts build",
+    "build": "vite build --outDir build/$BUILD_PATH",
     "e2e": "concurrently -k -s first -n \"app,e2e\" \"BROWSER=none yarn start\" \"yarn e2e:run\"",
     "e2e:dev": "concurrently -k -n \"app,e2e\" \"yarn start\" \"cypress open --e2e\"",
     "e2e:prod": "concurrently -k -s first -n \"app,e2e\" \"yarn serve\" \"yarn e2e:run\"",
-    "e2e:run": "wait-on -l http-get://localhost:3000 && cypress run",
-    "eject": "react-scripts eject",
+    "e2e:run": "wait-on -l http-get://localhost:3002 && cypress run",
     "lint": "yarn lint:eslint && yarn lint:prettier --check",
     "lint:eslint": "eslint e2e src --max-warnings 0",
     "lint:prettier": "prettier --config .prettierrc 'e2e/**/*.js' 'src/**/*.js'",
     "lint:fix": "yarn lint:eslint --fix",
-    "prepare": "husky install",
+    "prepare": "husky",
     "prettier": "yarn lint:prettier --write",
-    "preserve": "REACT_APP_NODE_ENV=LOCAL yarn build",
-    "serve": "serve --cors --debug -p 3000 --single build",
-    "start": "REACT_APP_NODE_ENV=LOCAL react-scripts start",
-    "test": "react-scripts test --env=jsdom"
+    "preserve": "VITE_NODE_ENV=LOCAL yarn build",
+    "serve": "serve --cors --debug -p 3002 --single build",
+    "start": "VITE_NODE_ENV=LOCAL vite --port 3002",
+    "test": "vitest",
+    "ci": "rm -rf node_modules && yarn install --frozen-lockfile"
   },
   "engines": {
     "node": "^22.13"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "prettier"
-    ],
-    "plugins": [
-      "prettier"
-    ],
-    "rules": {
-      "import/no-anonymous-default-export": "off",
-      "prettier/prettier": [
-        "error",
-        {
-          "arrowParens": "avoid"
-        }
-      ]
-    }
-  },
   "lint-staged": {
     "*.js": [
       "pretty-quick --staged",
@@ -64,28 +46,27 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/cypress": "^8.0.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "concurrently": "^7.4.0",
-    "cypress": "^10.9.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "husky": "^8.0.0",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "pretty-quick": "^3.1.3",
+    "@testing-library/cypress": "^10.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^5.0.4",
+    "concurrently": "^9.2.1",
+    "cypress": "^14.3.3",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-cypress": "^5.2.0",
+    "eslint-plugin-prettier": "^5.4.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.2.3",
+    "prettier": "^3.5.3",
+    "pretty-quick": "^4.1.1",
     "react-select-event": "^5.5.1",
-    "serve": "^14.0.1",
-    "wait-on": "^6.0.1"
-  },
-  "resolutions": {
-    "**/psl": "^1.10",
-    "**/tr46": "^4.0.0",
-    "**/whatwg-url": "^9.0.0",
-    "uri-js": "npm:uri-js-replace"
+    "serve": "^14.2.5",
+    "vite": "^7.1.8",
+    "vitest": "^3.1.3",
+    "wait-on": "^8.0.3"
   },
   "browserslist": [
     ">0.2%",

src/App.js → src/App.jsx

@@ -1,19 +1,16 @@
 import React from 'react'
 import { Provider } from 'react-redux'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { applyMiddleware, compose, createStore } from 'redux'
-import ReduxThunk from 'redux-thunk'
+import { configureStore } from '@reduxjs/toolkit'
 import './App.css'
 import Footer from './Components/Footer'
 import Navbar from './Components/Navbar'
 import reducers from './Redux/Reducer'
 import Routes from './Routes'
 
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const store = createStore(
-  reducers,
-  composeEnhancers(applyMiddleware(ReduxThunk))
-)
+const store = configureStore({
+  reducer: reducers
+})
 
 const App = () => (
   <Provider store={store}>

src/Components/forms/Acknowledgement.js → src/Components/forms/Acknowledgement.jsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react'
 import { FormGroup, Label, Input } from 'reactstrap'
+import RequiredFlag from './RequiredFlag'
 
 export default ({ onChange, agreeToTOU, agreeToReceiveCommunication }) => {
   return (
@@ -36,8 +37,7 @@ export default ({ onChange, agreeToTOU, agreeToReceiveCommunication }) => {
             rel="noopener noreferrer"
           >
             privacy policy
-          </a>{' '}
-          <strong className="text-danger">*</strong>
+          </a>{' '}<RequiredFlag />
         </Label>
       </FormGroup>
       <FormGroup check>
@@ -50,12 +50,11 @@ export default ({ onChange, agreeToTOU, agreeToReceiveCommunication }) => {
             onChange={onChange}
             checked={agreeToReceiveCommunication}
           />
-          Yes, contact me about volunteering activities and related events{' '}
-          <strong className="text-danger">*</strong>
+          Yes, contact me about volunteering activities and related events{' '}<RequiredFlag />
         </Label>
       </FormGroup>
       <p className="pt-2">
-        <strong className="text-danger">*</strong> fields are mandatory
+        <RequiredFlag /> fields are mandatory
       </p>
     </Fragment>
   )

src/Components/forms/RequiredFlag.jsx

@@ -0,0 +1,5 @@
+const RequiredFlag = () => {
+  return <strong className="text-danger">*</strong>
+}
+
+export default RequiredFlag

src/Components/forms/helper.js

@@ -19,7 +19,6 @@ export const initialState = {
   submitted: false,
   err: null,
   msg: null,
-  valuationError: false,
   acknowledgement: false,
   formInComplete: false,
   userId: '',
@@ -75,6 +74,6 @@ export const arrayOnChange = (e, array) => {
   return newArray
 }
 
-export const filterEmptyValue = values => {
-  return values.filter(value => value.name !== '')
+export const filterForCheckedItems = items => {
+  return items.filter(item => item.name !== '')
 }