CEC-3912 VIN input (#293)

* CEC-3912 VIN input

* Revert

src/components/Cars/Add/index.jsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
 import {
   Button,
   Checkbox,
@@ -10,15 +8,18 @@ import {
   RadioGroup,
   TextField
 } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router";
 
-import useStyles from "../../useStyles";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
+import { logger } from "../../../services/monitoring";
+import { getVINOnChangeHandler } from "../../../utils/vinValidation";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { logger } from "../../../services/monitoring";
+import {
+  useVehicleContext,
+  VehicleProvider
+} from "../../Contexts/VehicleContext";
+import useStyles from "../../useStyles";
 
 const MainForm = () => {
   const { addVehicle, busy } = useVehicleContext();
@@ -31,7 +32,7 @@ const MainForm = () => {
   const classes = useStyles();
   const [redirect, setRedirect] = useState(null);
 
-  const vinEl = useRef(null);
+  const [vin, setVIN] = useState("");
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -77,7 +78,7 @@ const MainForm = () => {
       event.preventDefault();
 
       const formData = {
-        vin: vinEl.current.value,
+        vin,
         log_level: selectedLogLevel,
         canbus: {
           enabled: canbusEnabled,
@@ -115,7 +116,8 @@ const MainForm = () => {
           }}
           required
           fullWidth
-          inputRef={vinEl}
+          value={vin}
+          onChange={getVINOnChangeHandler(setVIN)}
         />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup