CEC-749 Generate cert UI (#141)

* Add Create Certificate page

* Tests

* Update permission check

* Use Azure

src/components/Certificates/Add/CreateForm.jsx

@@ -0,0 +1,90 @@
+import React, { useRef, useState } from "react";
+import {
+  Button,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+} from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { CertTypes } from "../../Contexts/CertificateContext";
+
+const CreateForm = ({ onCreate, busy }) => {
+  const classes = useStyles();
+  const vinEl = useRef(null);
+  const [certType, setCertType] = useState(CertTypes.TREX);
+
+  const onSubmit = async (event) => {
+    event.preventDefault();
+
+    if (onCreate)
+      onCreate({
+        vin: vinEl.current.value,
+        type: certType,
+      });
+  };
+
+  const onCertTypeChange = (event) => {
+    setCertType(event.target.value);
+  };
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="vin"
+          name="vin"
+          label="VIN"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "17",
+          }}
+          required
+          fullWidth
+          inputRef={vinEl}
+        />
+        <FormLabel id="cert-type-group-label">Type</FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="cert-type-group-label"
+          name="cert-type"
+          value={certType}
+          onChange={onCertTypeChange}
+          margin="normal"
+        >
+          <FormControlLabel
+            value={CertTypes.TREX}
+            control={<Radio />}
+            label="TREX"
+          />
+          <FormControlLabel
+            value={CertTypes.HMI}
+            control={<Radio />}
+            label="HMI"
+          />
+          <FormControlLabel
+            value={CertTypes.Charging}
+            control={<Radio />}
+            label="Charging"
+          />
+        </RadioGroup>
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default CreateForm;