92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
import {
|
|
Button,
|
|
FormControlLabel,
|
|
FormLabel,
|
|
Radio,
|
|
RadioGroup,
|
|
TextField,
|
|
} from "@material-ui/core";
|
|
import React, { useRef, useState } from "react";
|
|
|
|
import { CertTypeData, CertTypes } from "../../../utils/certificates";
|
|
import useStyles from "../../useStyles";
|
|
|
|
const getCertTypeLabel = (certtype) => {
|
|
const item = CertTypeData.find((item) => certtype === item.value);
|
|
if (item !== null) return item.inputlabel;
|
|
return "ID";
|
|
};
|
|
|
|
const CreateForm = ({ onCreate, busy }) => {
|
|
const classes = useStyles();
|
|
const commonnameEl = useRef(null);
|
|
const [certType, setCertType] = useState(CertTypes.TBOX);
|
|
|
|
const onSubmit = async (event) => {
|
|
event.preventDefault();
|
|
|
|
if (onCreate)
|
|
onCreate({
|
|
common_name: commonnameEl.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="common_name"
|
|
name="common_name"
|
|
label={`Common Name (${getCertTypeLabel(certType)})`}
|
|
variant="outlined"
|
|
margin="normal"
|
|
inputProps={{
|
|
maxLength: "17",
|
|
}}
|
|
required
|
|
fullWidth
|
|
inputRef={commonnameEl}
|
|
/>
|
|
<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"
|
|
>
|
|
{CertTypeData.map((item, i) => {
|
|
return (
|
|
<FormControlLabel
|
|
key={i}
|
|
value={item.value}
|
|
label={item.label}
|
|
control={<Radio />}
|
|
/>
|
|
);
|
|
})}
|
|
</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;
|