Integrasi Konten Strapi ke dalam Frontend React – Bag. 3

// RegistrationForm.jsx

import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';

const RegistrationForm = () => {
   // State untuk menyimpan data formulir
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
  });

  const [isSuccess, setIsSuccess] = useState(false);
  const [isError, setIsError] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  // Menggunakan useNavigate dari react-router-dom untuk navigasi halaman
  const navigate = useNavigate();

  // Mengatur perubahan input dalam formulir
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData, // Menyalin nilai sebelumnya dari state formData
      [name]: value, // Memperbarui nilai yang sesuai dengan input yang diubah
    }));
  };

  // Menghandle pengiriman formulir
  const handleSubmit = async (event) => {

    // Mencegah perilaku default browser yang biasanya akan memuat ulang halaman atau berpindah ke halaman lain saat tombol "Register" ditekan
    // Kita akan mengambil alih pengiriman data formulir dan mengontrolnya dengan menggunakan fungsi handleSubmit.
    event.preventDefault();

    // Mengirim data formulir ke server menggunakan metode POST
    const response = await fetch('http://163.53.195.233:1337/api/auth/local/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    const responseData = await response.json();

    // Jika permintaan berhasil (ditandai dengan terbuatnya JWT token), setIsSucess menjadi true.
    if (responseData.jwt) {
      setIsSuccess(true);
      setIsError(false);
    } else {
      // Menangani kesalahan jika terjadi masalah selama proses pengiriman
      setIsSuccess(false);
      setIsError(true);
      setErrorMessage(responseData.error.message);
    }
  };
  // navigasikan ke halaman utama ketika klik tombol close.
  const handleModalClose = () => {
    setIsSuccess(false);
    setIsError(false);
    if (isSuccess) {
      navigate('/');
    }
  };

  return (
    <div className="flex justify-center items-center h-screen bg-gray-100">
      <div className="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
        <h2 className="text-2xl font-semibold mb-4 text-center">Registration</h2>
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label htmlFor="username" className="block text-sm font-medium">
              Username
            </label>
            <input
              type="text"
              id="username"
              name="username"
              value={formData.username}
              onChange={handleInputChange}
              className="mt-1 p-2 w-full border rounded focus:outline-none focus:border-blue-400"
              required
            />
          </div>
          <div className="mb-4">
            <label htmlFor="email" className="block text-sm font-medium">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              className="mt-1 p-2 w-full border rounded focus:outline-none focus:border-blue-400"
              required
            />
          </div>
          <div className="mb-4">
            <label htmlFor="password" className="block text-sm font-medium">
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleInputChange}
              className="mt-1 p-2 w-full border rounded focus:outline-none focus:border-blue-400"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full py-2 px-4 bg-[#202E60] rounded-md hover:bg-[#30448c] hover:text-white"
          >
            Register
          </button>
        </form>
        <div className='py-5 border-t border-gray-300 mt-5'>
          <p class="text-sm text-center text-gray-400">Already have an account? <Link to={`/login`} class="text-indigo-400 focus:outline-none focus:underline focus:text-indigo-500 dark:focus:border-indigo-800">Login</Link>.</p>
        </div>
      </div>
      {isSuccess && (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white p-6 rounded shadow-md text-center">
            <p className="text-green-500 font-semibold mb-2">Registration successful</p>
            <button
              onClick={handleModalClose}
              className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none"
            >
              Close
            </button>
          </div>
        </div>
      )}
      {isError && (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white p-6 rounded shadow-md text-center">
            <p className="text-red-500 font-semibold mb-2">{errorMessage}</p>
            <button
              onClick={handleModalClose}
              className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none"
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default RegistrationForm;