133 lines
3.3 KiB
React
133 lines
3.3 KiB
React
import { useEffect, useRef } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { useTheme } from "@emotion/react";
|
|
import { Box, Button, Stack, Typography } from "@mui/material";
|
|
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
|
|
import Field from "../../../../Components/Inputs/Field";
|
|
|
|
StepOne.propTypes = {
|
|
form: PropTypes.object,
|
|
errors: PropTypes.object,
|
|
onSubmit: PropTypes.func,
|
|
onChange: PropTypes.func,
|
|
onBack: PropTypes.func,
|
|
};
|
|
|
|
/**
|
|
* Renders the first step of the sign up process.
|
|
*
|
|
* @param {Object} props
|
|
* @param {Object} props.form - Form state object.
|
|
* @param {Object} props.errors - Object containing form validation errors.
|
|
* @param {Function} props.onSubmit - Callback function to handle form submission.
|
|
* @param {Function} props.onChange - Callback function to handle form input changes.
|
|
* @param {Function} props.onBack - Callback function to handle "Back" button click.
|
|
* @returns {JSX.Element}
|
|
*/
|
|
|
|
function StepOne({ form, errors, onSubmit, onChange, onBack }) {
|
|
const theme = useTheme();
|
|
const inputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{/* TODO this stack should be a component */}
|
|
<Stack
|
|
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
|
|
textAlign="center"
|
|
>
|
|
<Box>
|
|
<Typography component="h1">Sign Up</Typography>
|
|
<Typography>Enter your personal details</Typography>
|
|
</Box>
|
|
|
|
<Box
|
|
textAlign="left"
|
|
component="form"
|
|
noValidate
|
|
spellCheck={false}
|
|
onSubmit={onSubmit}
|
|
display="grid"
|
|
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
|
|
>
|
|
<Box
|
|
display="grid"
|
|
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
|
>
|
|
<Field
|
|
id="register-firstname-input"
|
|
label="Name"
|
|
isRequired={true}
|
|
placeholder="Jordan"
|
|
autoComplete="given-name"
|
|
value={form.firstName}
|
|
onChange={onChange}
|
|
error={errors.firstName}
|
|
ref={inputRef}
|
|
/>
|
|
<Field
|
|
id="register-lastname-input"
|
|
label="Surname"
|
|
isRequired={true}
|
|
placeholder="Ellis"
|
|
autoComplete="family-name"
|
|
value={form.lastName}
|
|
onChange={onChange}
|
|
error={errors.lastName}
|
|
/>
|
|
</Box>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
>
|
|
{/* TODO buttons should be a component should be a component */}
|
|
<Button
|
|
variant="outlined"
|
|
color="info"
|
|
onClick={onBack}
|
|
sx={{
|
|
px: theme.spacing(5),
|
|
"& svg.MuiSvgIcon-root": {
|
|
mr: theme.spacing(3),
|
|
},
|
|
|
|
"&:focus-visible": {
|
|
outline: `2px solid ${theme.palette.primary.main}`,
|
|
outlineOffset: `2px`,
|
|
},
|
|
}}
|
|
>
|
|
<ArrowBackRoundedIcon />
|
|
Back
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
type="submit"
|
|
disabled={(errors.firstName || errors.lastName) && true}
|
|
sx={{
|
|
width: "30%",
|
|
"&.Mui-focusVisible": {
|
|
outline: `2px solid ${theme.palette.primary.main}`,
|
|
outlineOffset: `2px`,
|
|
boxShadow: `none`,
|
|
},
|
|
}}
|
|
>
|
|
Continue
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { StepOne };
|