Sanitize float inputs to prevent users from adding commas and letters…

… in float fields
fabmob · Nov 30, 2023 · abbb1f6 · abbb1f6
1 parent 8d089ba
commit abbb1f6
Show file tree

Hide file tree

Showing 22 changed files with 55 additions and 28 deletions.
diff --git a/frontend/src/components/EditEmissionFactors.tsx b/frontend/src/components/EditEmissionFactors.tsx
@@ -4,6 +4,7 @@ import {Table, Button, Badge, Form, Modal} from 'react-bootstrap'
 import ChoiceModal from "./ChoiceModal"
 import ValidSource from "./ValidSource"
 import ItemWithOverlay from "./ItemWithOverlay"
+import { sanitizeFloatInput } from "../utils/sanitizeInputs"
 
 export default function EditEmissionFactors (props: {
     project: ProjectType,
@@ -53,14 +54,14 @@ export default function EditEmissionFactors (props: {
         props.setInputData((prevInputData) => {
             let tmp = {...prevInputData}
             if (!wtwOrTtw) {
-                tmp.emissionFactors.WTW[ftype][param] = value
-                tmp.emissionFactors.TTW[ftype][param] = value
+                tmp.emissionFactors.WTW[ftype][param] = sanitizeFloatInput(value)
+                tmp.emissionFactors.TTW[ftype][param] = sanitizeFloatInput(value)
                 if (param === 'lowerHeatingValue' || param === 'density') {
                     tmp.emissionFactors.WTW[ftype]['pci'] = (parseFloat(tmp.emissionFactors.WTW[ftype].density) * parseFloat(tmp.emissionFactors.WTW[ftype].lowerHeatingValue)).toString()
                     tmp.emissionFactors.TTW[ftype]['pci'] = (parseFloat(tmp.emissionFactors.WTW[ftype].density) * parseFloat(tmp.emissionFactors.WTW[ftype].lowerHeatingValue)).toString()
                 }
             } else {
-                tmp.emissionFactors[wtwOrTtw][ftype][param] = value
+                tmp.emissionFactors[wtwOrTtw][ftype][param] = sanitizeFloatInput(value)
             }
             return tmp
         })

diff --git a/frontend/src/pages/BAU/BAUStep1.tsx b/frontend/src/pages/BAU/BAUStep1.tsx
@@ -12,6 +12,7 @@ import PercentInput from '../../components/PercentInput'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function BAUStep1(){
     const { keycloak, initialized } = useKeycloak();
@@ -67,7 +68,7 @@ export default function BAUStep1(){
     const updateInputPercent = (vtype: string, yearIndex: number, percent: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].vktRate[yearIndex] = percent
+            tmp.vtypes[vtype].vktRate[yearIndex] = sanitizeFloatInput(percent)
             return tmp
         })
     }
@@ -117,10 +118,6 @@ export default function BAUStep1(){
                 setSourceWarning(true)
                 return
             }
-            for (let i = 0; i < vehicle.vktRate.length; i++) {
-                // Remove % char if it was added
-                vehicle.vktRate[i] = vehicle.vktRate[i].replace('%', '')
-            }
         }
         // save data and nav to next step
         const requestOptions = {

diff --git a/frontend/src/pages/BAU/BAUStep2.tsx b/frontend/src/pages/BAU/BAUStep2.tsx
@@ -13,6 +13,7 @@ import TdDiagonalBar from '../../components/TdDiagonalBar'
 import PercentInput from '../../components/PercentInput'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function BAUStep2(){
     const { keycloak, initialized } = useKeycloak();
@@ -86,7 +87,7 @@ export default function BAUStep2(){
     const updateInputPercent = (vtype: string, ftype: FuelType, yearIndex: number, percent: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.percent[yearIndex] = percent
+            tmp.vtypes[vtype].fuels[ftype]!.percent[yearIndex] = sanitizeFloatInput(percent)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/BAU/BAUStep3.tsx b/frontend/src/pages/BAU/BAUStep3.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function BAUStep3(){
     const { keycloak, initialized } = useKeycloak();
@@ -77,7 +78,7 @@ export default function BAUStep3(){
     const updateInputCons = (vtype: string, ftype: FuelType, yearIndex: number, cons: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.cons[yearIndex] = cons
+            tmp.vtypes[vtype].fuels[ftype]!.cons[yearIndex] = sanitizeFloatInput(cons)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/BAU/BAUStep4.tsx b/frontend/src/pages/BAU/BAUStep4.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function BAUStep4(){
     const { keycloak, initialized } = useKeycloak();
@@ -65,7 +66,7 @@ export default function BAUStep4(){
     const updateInput = (energy: "electricity" | "hydrogen", network: "road" | "rail", yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp[energy][network].value[yearIndex] = value
+            tmp[energy][network].value[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
     }

diff --git a/frontend/src/pages/Climate/ClimateWithUpstreamStep1.tsx b/frontend/src/pages/Climate/ClimateWithUpstreamStep1.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithUpstreamStep1(){
     const { keycloak, initialized } = useKeycloak();
@@ -77,7 +78,7 @@ export default function ClimateWithUpstreamStep1(){
     const updateInput = (vtype: string, yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].vkt[yearIndex] = value
+            tmp.vtypes[vtype].vkt[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithUpstreamStep2.tsx b/frontend/src/pages/Climate/ClimateWithUpstreamStep2.tsx
@@ -10,6 +10,7 @@ import DescAndNav from '../../components/DescAndNav'
 import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithUpstreamStep2(){
     const { keycloak, initialized } = useKeycloak();
@@ -65,7 +66,7 @@ export default function ClimateWithUpstreamStep2(){
     const updateInput = (vtype: string, yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].ukm[yearIndex] = value
+            tmp.vtypes[vtype].ukm[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithUpstreamStep3.tsx b/frontend/src/pages/Climate/ClimateWithUpstreamStep3.tsx
@@ -13,6 +13,7 @@ import TdDiagonalBar from '../../components/TdDiagonalBar'
 import PercentInput from '../../components/PercentInput'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithUpstreamStep3(){
     const { keycloak, initialized } = useKeycloak();
@@ -80,7 +81,7 @@ export default function ClimateWithUpstreamStep3(){
     const updateInputPercent = (vtype: string, ftype: FuelType, yearIndex: number, percent: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.percent[yearIndex] = percent
+            tmp.vtypes[vtype].fuels[ftype]!.percent[yearIndex] = sanitizeFloatInput(percent)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithUpstreamStep4.tsx b/frontend/src/pages/Climate/ClimateWithUpstreamStep4.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithUpstreamStep4(){
     const { keycloak, initialized } = useKeycloak();
@@ -77,7 +78,7 @@ export default function ClimateWithUpstreamStep4(){
     const updateInputCons = (vtype: string, ftype: FuelType, yearIndex: number, cons: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.cons[yearIndex] = cons
+            tmp.vtypes[vtype].fuels[ftype]!.cons[yearIndex] = sanitizeFloatInput(cons)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithoutUpstreamStep1.tsx b/frontend/src/pages/Climate/ClimateWithoutUpstreamStep1.tsx
@@ -12,6 +12,7 @@ import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWr
 import { computeVktAfterASI } from '../../utils/asiComputations'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithoutUpstreamStep1(){
     const { keycloak, initialized } = useKeycloak();
@@ -78,7 +79,7 @@ export default function ClimateWithoutUpstreamStep1(){
     const updateInput = (vtype: string, yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].avoidedVkt[yearIndex] = value
+            tmp.vtypes[vtype].avoidedVkt[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithoutUpstreamStep2.tsx b/frontend/src/pages/Climate/ClimateWithoutUpstreamStep2.tsx
@@ -12,6 +12,7 @@ import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWr
 import { computeVktAfterASI } from '../../utils/asiComputations'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithoutUpstreamStep2(){
     const { keycloak, initialized } = useKeycloak();
@@ -76,7 +77,7 @@ export default function ClimateWithoutUpstreamStep2(){
     const updateInput = (vtype: string, yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].addedVkt[yearIndex] = value
+            tmp.vtypes[vtype].addedVkt[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithoutUpstreamStep3.tsx b/frontend/src/pages/Climate/ClimateWithoutUpstreamStep3.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithoutUpstreamStep2(){
     const { keycloak, initialized } = useKeycloak();
@@ -67,7 +68,7 @@ export default function ClimateWithoutUpstreamStep2(){
     const updateInput = (vtype: string, yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].load[yearIndex] = value
+            tmp.vtypes[vtype].load[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithoutUpstreamStep4.tsx b/frontend/src/pages/Climate/ClimateWithoutUpstreamStep4.tsx
@@ -13,6 +13,7 @@ import { computeVktAfterASI } from '../../utils/asiComputations'
 import TdDiagonalBar from '../../components/TdDiagonalBar'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithoutUpstreamStep4(){
     const { keycloak, initialized } = useKeycloak();
@@ -92,7 +93,7 @@ export default function ClimateWithoutUpstreamStep4(){
     const updateInput = (goalvtype: string, originvtype: string, yearIndex: number, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[goalvtype][originvtype].value[yearIndex] = value
+            tmp.vtypes[goalvtype][originvtype].value[yearIndex] = sanitizeFloatInput(value)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithoutUpstreamStep5.tsx b/frontend/src/pages/Climate/ClimateWithoutUpstreamStep5.tsx
@@ -14,6 +14,7 @@ import PercentInput from '../../components/PercentInput'
 import { computeVktAfterASI } from '../../utils/asiComputations'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithoutUpstreamStep5(){
     const { keycloak, initialized } = useKeycloak();
@@ -90,7 +91,7 @@ export default function ClimateWithoutUpstreamStep5(){
     const updateInputPercent = (vtype: string, ftype: FuelType, yearIndex: number, percent: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.percent[yearIndex] = percent
+            tmp.vtypes[vtype].fuels[ftype]!.percent[yearIndex] = sanitizeFloatInput(percent)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Climate/ClimateWithoutUpstreamStep6.tsx b/frontend/src/pages/Climate/ClimateWithoutUpstreamStep6.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function ClimateWithoutUpstreamStep6(){
     const { keycloak, initialized } = useKeycloak();
@@ -77,7 +78,7 @@ export default function ClimateWithoutUpstreamStep6(){
     const updateInputCons = (vtype: string, ftype: FuelType, yearIndex: number, cons: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.cons[yearIndex] = cons
+            tmp.vtypes[vtype].fuels[ftype]!.cons[yearIndex] = sanitizeFloatInput(cons)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Inventory/InventoryStep2.tsx b/frontend/src/pages/Inventory/InventoryStep2.tsx
@@ -13,6 +13,7 @@ import PercentInput from '../../components/PercentInput'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function InventoryStep2(){
     const { keycloak, initialized } = useKeycloak();
@@ -87,14 +88,14 @@ export default function InventoryStep2(){
         setError("")
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.percent = percent
+            tmp.vtypes[vtype].fuels[ftype]!.percent = sanitizeFloatInput(percent)
             return tmp
         })
     }
     const updateInputVkt = (vtype: string, vkt: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].vkt = vkt
+            tmp.vtypes[vtype].vkt = sanitizeFloatInput(vkt)
             return tmp
         })
     }
@@ -103,6 +104,7 @@ export default function InventoryStep2(){
             let tmp = {...prevInputData}
             let vkt = ""
             if (fleetStock) {
+                fleetStock = sanitizeFloatInput(fleetStock)
                 vkt = (parseFloat(tmp.vtypes[vtype].fleetMileage) * parseFloat(fleetStock) / 1000000).toString()
             }
             tmp.vtypes[vtype].vkt = vkt
@@ -115,6 +117,7 @@ export default function InventoryStep2(){
             let tmp = {...prevInputData}
             let vkt = "";
             if (fleetMileage) {
+                fleetMileage = sanitizeFloatInput(fleetMileage)
                 vkt = (parseFloat(fleetMileage) * parseFloat(tmp.vtypes[vtype].fleetStock) / 1000000).toString() 
             }
             tmp.vtypes[vtype].vkt = vkt

diff --git a/frontend/src/pages/Inventory/InventoryStep3.tsx b/frontend/src/pages/Inventory/InventoryStep3.tsx
@@ -10,6 +10,7 @@ import DescAndNav from '../../components/DescAndNav'
 import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function InventoryStep3(){
     const { keycloak, initialized } = useKeycloak();
@@ -73,7 +74,7 @@ export default function InventoryStep3(){
     const updateInputCons = (vtype: string, ftype: FuelType, cons: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].fuels[ftype]!.cons = cons
+            tmp.vtypes[vtype].fuels[ftype]!.cons = sanitizeFloatInput(cons)
             return tmp
         })
         setError("")

diff --git a/frontend/src/pages/Inventory/InventoryStep4.tsx b/frontend/src/pages/Inventory/InventoryStep4.tsx
@@ -10,6 +10,7 @@ import DescAndNav from '../../components/DescAndNav'
 import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function InventoryStep4(){
     const { keycloak, initialized } = useKeycloak();
@@ -50,7 +51,7 @@ export default function InventoryStep4(){
     const updateInput = (energy: "electricity" | "hydrogen", network: "road" | "rail", value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp[energy][network].value = value
+            tmp[energy][network].value = sanitizeFloatInput(value)
             return tmp
         })
     }

diff --git a/frontend/src/pages/Inventory/InventoryStep5.tsx b/frontend/src/pages/Inventory/InventoryStep5.tsx
@@ -11,6 +11,7 @@ import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
 import OutputNumberTd from '../../components/OutputNumberTd'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function InventoryStep5(){
     const { keycloak, initialized } = useKeycloak();
@@ -77,7 +78,7 @@ export default function InventoryStep5(){
     const updateInput = (type: "emissions" | "energy", network: "road" | "rail", ftype: FuelType, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp[type][network].fuels[ftype]!.value = value
+            tmp[type][network].fuels[ftype]!.value = sanitizeFloatInput(value)
             return tmp
         })
     }

diff --git a/frontend/src/pages/Inventory/InventoryStep6.tsx b/frontend/src/pages/Inventory/InventoryStep6.tsx
@@ -10,6 +10,7 @@ import DescAndNav from '../../components/DescAndNav'
 import ValidSource from '../../components/ValidSource'
 import ProjectStepContainerWrapper from '../../components/ProjectStepContainerWrapper'
 import ItemWithOverlay from '../../components/ItemWithOverlay'
+import { sanitizeFloatInput } from '../../utils/sanitizeInputs'
 
 export default function InventoryStep6(){
     const { keycloak, initialized } = useKeycloak();
@@ -61,7 +62,7 @@ export default function InventoryStep6(){
     const updateInput = (vtype: string, value: string) => {
         setInputData((prevInputData) => {
             let tmp = {...prevInputData}
-            tmp.vtypes[vtype].value = value
+            tmp.vtypes[vtype].value = sanitizeFloatInput(value)
             return tmp
         })
     }