feat: added users page

frontend/src/pages/Signup/index.js

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 
+import * as Yup from "yup";
 import { useHistory } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { toast } from "react-toastify";
+import { Formik, Form, Field } from "formik";
 
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
@@ -53,20 +55,26 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
+const UserSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+	password: Yup.string().min(5, "Too Short!").max(50, "Too Long!"),
+	email: Yup.string().email("Invalid email").required("Required"),
+});
+
 const SignUp = () => {
 	const classes = useStyles();
 	const history = useHistory();
 
-	const [user, setUser] = useState({ name: "", email: "", password: "" });
+	const initialState = { name: "", email: "", password: "" };
 
-	const handleChangeInput = e => {
-		setUser({ ...user, [e.target.name]: e.target.value });
-	};
+	const [user] = useState(initialState);
 
-	const handleSignUp = async e => {
-		e.preventDefault();
+	const handleSignUp = async values => {
 		try {
-			await api.post("/users", user);
+			await api.post("/auth/signup", values);
 			toast.success(i18n.t("signup.toasts.success"));
 			history.push("/login");
 		} catch (err) {
@@ -84,68 +92,88 @@ const SignUp = () => {
 				<Typography component="h1" variant="h5">
 					{i18n.t("signup.title")}
 				</Typography>
-				<form className={classes.form} noValidate onSubmit={handleSignUp}>
-					<Grid container spacing={2}>
-						<Grid item xs={12}>
-							<TextField
-								autoComplete="name"
-								name="name"
-								variant="outlined"
-								required
-								fullWidth
-								id="name"
-								label={i18n.t("signup.form.name")}
-								value={user.name}
-								onChange={handleChangeInput}
-								autoFocus
-							/>
-						</Grid>
+				{/* <form className={classes.form} noValidate onSubmit={handleSignUp}> */}
+				<Formik
+					initialValues={user}
+					enableReinitialize={true}
+					validationSchema={UserSchema}
+					onSubmit={(values, actions) => {
+						setTimeout(() => {
+							handleSignUp(values);
+							actions.setSubmitting(false);
+						}, 400);
+					}}
+				>
+					{({ touched, errors, isSubmitting }) => (
+						<Form className={classes.form}>
+							<Grid container spacing={2}>
+								<Grid item xs={12}>
+									<Field
+										as={TextField}
+										autoComplete="name"
+										name="name"
+										error={touched.name && Boolean(errors.name)}
+										helperText={touched.name && errors.name}
+										variant="outlined"
+										fullWidth
+										id="name"
+										label={i18n.t("signup.form.name")}
+										autoFocus
+									/>
+								</Grid>
 
-						<Grid item xs={12}>
-							<TextField
-								variant="outlined"
-								required
+								<Grid item xs={12}>
+									<Field
+										as={TextField}
+										variant="outlined"
+										fullWidth
+										id="email"
+										label={i18n.t("signup.form.email")}
+										name="email"
+										error={touched.email && Boolean(errors.email)}
+										helperText={touched.email && errors.email}
+										autoComplete="email"
+									/>
+								</Grid>
+								<Grid item xs={12}>
+									<Field
+										as={TextField}
+										variant="outlined"
+										fullWidth
+										name="password"
+										error={touched.password && Boolean(errors.password)}
+										helperText={touched.password && errors.password}
+										label={i18n.t("signup.form.password")}
+										type="password"
+										id="password"
+										autoComplete="current-password"
+									/>
+								</Grid>
+							</Grid>
+							<Button
+								type="submit"
 								fullWidth
-								id="email"
-								label={i18n.t("signup.form.email")}
-								name="email"
-								autoComplete="email"
-								value={user.email}
-								onChange={handleChangeInput}
-							/>
-						</Grid>
-						<Grid item xs={12}>
-							<TextField
-								variant="outlined"
-								required
-								fullWidth
-								name="password"
-								label={i18n.t("signup.form.password")}
-								type="password"
-								id="password"
-								autoComplete="current-password"
-								value={user.password}
-								onChange={handleChangeInput}
-							/>
-						</Grid>
-					</Grid>
-					<Button
-						type="submit"
-						fullWidth
-						variant="contained"
-						color="primary"
-						className={classes.submit}
-					>
-						{i18n.t("signup.buttons.submit")}
-					</Button>
-					<Grid container justify="flex-end">
-						<Grid item>
-							<Link href="#" variant="body2" component={RouterLink} to="/login">
-								{i18n.t("signup.buttons.login")}
-							</Link>
-						</Grid>
-					</Grid>
-				</form>
+								variant="contained"
+								color="primary"
+								className={classes.submit}
+							>
+								{i18n.t("signup.buttons.submit")}
+							</Button>
+							<Grid container justify="flex-end">
+								<Grid item>
+									<Link
+										href="#"
+										variant="body2"
+										component={RouterLink}
+										to="/login"
+									>
+										{i18n.t("signup.buttons.login")}
+									</Link>
+								</Grid>
+							</Grid>
+						</Form>
+					)}
+				</Formik>
 			</div>
 			<Box mt={5}>
 				<Copyright />