Building a Registration Form with React, react-hook-form,spring-boot, and axios

signup form using react-hook-form is using Axios as HTTP client and in the backend it is using spring boot API :

import React,{ useState }  from 'react';
// import { useState } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

const RegistrationForm = () => {
  const { register, handleSubmit, formState: { errors } ,getValues, reset } = useForm();
  const [submitting, setSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [successMessage, setSuccessMessage] = useState("");

  const onSubmit = (data) => {
    setSubmitting(true);
    axios.post("http://localhost:8080/register", data)
      .then((response) => {
        // console.log(response.data);
        setSubmitting(false);
        setSuccessMessage("Signup successfully!");
        setErrorMessage("")
        reset(); // clear the form inputs after successful submission,
      })
      .catch((error) => {
        // console.log(error);
        setErrorMessage("An error occurred while signup.");
        setSuccessMessage("")
        setSubmitting(false);
      });
  };

  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-lg-6 col-md-8">
          <h2 className="mb-3">Sign up</h2>

          {errorMessage && <div className="alert alert-danger m-3">{errorMessage}</div>}
          {successMessage && <div className="alert alert-success m-3">{successMessage}</div>}

          <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off" >

          

            <div className="form-group">
              <label htmlFor="email">Email address</label>
              <input
                type="email"
                className={`form-control ${errors.email ? "is-invalid" : ""}`}
                id="email"
                {...register("email", {
                  required: "Email is required",
                  pattern: {
                    value: /^\S+@\S+$/i,
                    message: "Please enter a valid email address",
                  },
                })}
              />
              {errors.email && <div className="invalid-feedback">{errors.email.message}</div>}
            </div>

            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input
                type="password"
                className={`form-control ${errors.password ? "is-invalid" : ""}`}
                id="password"
                {...register("password", {
                  required: "Password is required",
                  minLength: {
                    value: 8,
                    message: "Password must be at least 8 characters long",
                  },
                })}
              />
              {errors.password && <div className="invalid-feedback">{errors.password.message}</div>}
            </div>

            <div className="form-group">
              <label htmlFor="confirmPassword">Confirm Password</label>
              <input
                type="password"
                className={`form-control ${errors.confirmPassword ? "is-invalid" : ""}`}
                id="confirmPassword"
                {...register("confirmPassword", {
                  validate: (value) =>
                    value === getValues("password") || "Passwords do not match",
                })}
              />
              {errors.confirmPassword && <div className="invalid-feedback">{errors.confirmPassword.message}</div>}
            </div>

           
            <button type="submit" className="btn btn-primary mt-5" disabled={submitting}>
              {submitting ? "Signing up..." : "Sign up"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default RegistrationForm;

the server-side spring boot controller looks like this:

package com.gurucodetalks.Backend.controller;

import com.gurucodetalks.Backend.dto.UserRegistrationRequest;
import com.gurucodetalks.Backend.entity.User;
import com.gurucodetalks.Backend.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/register")
public class UserController {
    private final UserRepository userRepository;

    @Autowired
    public UserController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    @PostMapping
    public ResponseEntity<?> register(@RequestBody UserRegistrationRequest request) {
        if (userRepository.existsByEmail(request.getEmail())) {
            return ResponseEntity.badRequest().body("Email already exists");
        }

        User user = new User(request.getEmail(), request.getPassword());
        userRepository.save(user);

        return ResponseEntity.ok("User registered successfully");
    }
}

full code available here: https://github.com/sudeepcv/registration-form-react-hook-form

Basics In Java

Search This Blog

Building a Registration Form with React, react-hook-form,spring-boot, and axios

Comments

Post a Comment