Source: componenets/auth/RegisterPage.js

/**
 * @file RegisterPage.js
 * @desc Component responsible for user registration functionality.
 * @module RegisterPage
 */
'use client'  // use for client side rendering
import React, { useState } from 'react';
import Link from 'next/link';
import { sendRequest } from '../../api/api'; 


/**
 * Component for user registration.
 * @returns {JSX.Element} The JSX element representing the RegisterPage component.
 */
const RegisterPage = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  
   /**
   * Handles the registration process.
   * calls sendRequest Api from Frontend api.js
   * @param {Event} e - The event object.
   * @returns {void}
   */
  const handleRegister = async (e) => {
    e.preventDefault();

    // Send a POST request to register the new user
    const { success, data } = await sendRequest('POST', '/register', { username, email, password });

    if (success) {
      // Registration successful
      setMessage('Registration successful');
      window.location.href = '/login';
    } else {
      // Registration failed, display error message
      setMessage(data.message || 'An error occurred while trying to register');
    }
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h2 className="text-3xl mb-4">Register</h2>
      <form onSubmit={handleRegister} className="bg-gray-100 shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div className="mb-4">
          <label htmlFor="username" className="block text-gray-700 text-sm font-bold mb-2">Username:</label>
          <input type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
        </div>
        <div className="mb-4">
          <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">Email:</label>
          <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
        </div>
        <div className="mb-4">
          <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">Password:</label>
          <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
        </div>
        <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
      </form>
      <p className="text-gray-700 text-sm">{message}</p>
      <p className="text-gray-700 text-sm">Already registered? <Link href="/login" className="text-blue-500">Login here</Link>.</p>
    </div>
  );
}

export default RegisterPage;