register
user_1530765
tsx
5 months ago
3.5 kB
10
Indexable
import { FunctionComponent } from "react"; import NavBar from "./NavBar"; import { Link, useNavigate } from "react-router-dom"; import * as yup from "yup"; import { FormikValues, useFormik } from "formik"; import { User } from "../interfaces/User"; import { addUser, checkUser } from "../services/userService"; interface RegisterProps { } const Register: FunctionComponent<RegisterProps> = () => { const navigate = useNavigate(); const formik: FormikValues = useFormik<User>({ initialValues: { name: "", email: "", password: "" }, validationSchema: yup.object({ name: yup.string().required().min(2), email: yup.string().required().email(), password: yup.string().required().min(8) }), onSubmit: (values) => { addUser(values as User).then((res) => { navigate("/"); alert("Complete successfully !") }).catch((err) => console.log(err)) }, }); return (<> <div className="container mt-3 w-50"> <h2 className="display-3">Register</h2> <form onSubmit={formik.handleSubmit}> <div className="form-floating mb-3"> <input type="text" className="form-control" id="floatingInput" placeholder="Jhon" value={formik.values.name} name="name" onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="floatingInput">Name</label> {formik.touched.name && formik.errors.name && ( <p className="text-danger">{formik.errors.name}</p> ) } </div> <div className="form-floating mb-3"> <input type="email" className="form-control" id="floatingInput2" placeholder="name@example.com" value={formik.values.email} name="email" onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="floatingInput2">Email address</label> {formik.touched.email && formik.errors.email && ( <p className="text-danger">{formik.errors.email}</p> ) } </div> <div className="form-floating"> <input type="password" className="form-control" id="floatingPassword" placeholder="Password" value={formik.values.password} name="password" onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="floatingPassword">Password</label> {formik.touched.password && formik.errors.password && ( <p className="text-danger">{formik.errors.password}</p> ) } </div> <button className="btn btn-primary mt-3 w-100" type="submit" disabled={!formik.dirty || !formik.isValid}>Submit</button> </form> <p className="mt-3"> <Link to="/register">Already have an account Log in!</Link> </p> </div> </> ); } export default Register;
Editor is loading...
Leave a Comment