marco.pms.web/src/pages/authentication/RegisterPage.jsx

import { useState } from "react";
import { Link } from "react-router-dom";
import "./page-auth.css";
import { AuthWrapper } from "./AuthWrapper";
import { useForm,Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import showToast from "../../services/toastService";
import AuthRepository from "../../repositories/AuthRepository";

const mobileNumberRegex = /^(?:\d{10}|\d{3}[-\s]?\d{3}[-\s]?\d{4})$/;

const registerSchema = z.object({
  orgName:z.string().min(1,{message:"Organization Name is required"}),
  email:z.string().email(),
  contactPerson:z.string().min(1,{message:"Person Name is required"}),
  contactNo:z.string().min(1,{message: "Phone Number is required"})
        .regex(mobileNumberRegex, {message:"Invalid phone number "}),
  orgSize:z.string().min(1,{message:"please Select Organization Size "}),
  terms: z.boolean().refine((val) => val === true, {
    message: "Please accept the terms and conditions.",
  }),
} )

const RegisterPage = () => {
  
  const {register,handleSubmit,formState: { errors }}  = useForm({
    resolver:zodResolver(registerSchema)
  })
  
 const onSubmit= async(data)=>{
   try
   {
    //  const response = await AuthRepository.register( data );
    
     showToast("Your Registration SuccessFully !")
   } catch ( error )
   {
     console.log(error)
     showToast(error.message,"error")
   }
 }
  return (
    <AuthWrapper>
      <h4 className="mb-2">Adventure starts here 🚀</h4>
      <p className="mb-3">Make your app management easy and fun!</p>

      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
        <div className="mb-3">
          <label htmlFor="orgname" className="form-label">
            Organization Name
          </label>
          <input
            type="text"
            className="form-control"
            id="orgname"
            {...register("orgName")}
            name="orgName"
            placeholder="Enter your Organization Name"
            autoFocus
          />
          {errors.orgName && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.orgName.message}</div>}
        </div>
        <div className="mb-3">
          <label htmlFor="email" className="form-label">
            Email
          </label>
          <input
            type="text"
            className="form-control"
            id="email"
            name="email"
            placeholder="Enter your email"
            {...register("email")}
          />
          {errors.email && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.email.message}</div>}

        </div>
        <div className="mb-3 form-password-toggle">
          <label className="form-label" htmlFor="contactperson">
            Contact Person
          </label>
          <div className="input-group input-group-merge">
            <input
              type="text"
              id="contactperson"
              {...register("contactPerson")}
              className="form-control"
              name="contactPerson"
              placeholder="Contact Person"
              aria-describedby="contactperson"
            />
          </div>
          {errors.contactPerson && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.contactPerson.message}</div>}

        </div>
        <div className="mb-3 form-password-toggle">
          <label className="form-label" htmlFor="contactnumber">
            Contact Number
          </label>
          <div className="input-group input-group-merge">
            <input
              type="text"
              id="contactnumber"
              {...register("contactNo")}
              className="form-control"
              name="contactNo"
              placeholder="Contact Number"
              aria-describedby="contactnumber"
            />
          </div>
          {errors.contactNo && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.contactNo.message}</div>}

        </div>
        <div className="mb-3 form-password-toggle">
          <label className="form-label" htmlFor="orgsize">
            Organization Size
          </label>
          <div className="input-group input-group-merge">
            <select
              className="form-select"
              id="orgsize"
              name="orgSize"
              {...register("orgSize")}
              aria-label="Default select example"
            >
              <option value="">Number of Employees</option>
              <option value="1">1-10 </option>
              <option value="2">10-50</option>
              <option value="3">50-100</option>
              <option value="4">more than 100</option>
            </select>
          </div>
          {errors.orgSize && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.orgSize.message}</div>}
          
        </div>
        <div className="mb-3">
          <div className="form-check">
            <input
              className="form-check-input"
              type="checkbox"
              id="terms-conditions"
              name="terms"
              {...register("terms")}
            />
            <label className="form-check-label" htmlFor="terms-conditions">
              I agree to
              <a aria-label="pricacy policy and terms" href="#">
                {" "}
                privacy policy & terms
              </a>
            </label>
          </div>
          {errors.terms && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.terms.message}</div>}

        </div>
        <button aria-label="Click me" className="btn btn-primary d-grid w-100">
          Request Demo
        </button>
      </form>

      <p className="text-center">
        <span>Already have an account?</span>
        <Link
          aria-label="Go to Login Page"
          to="/auth/login"
          className="d-flex align-items-center justify-content-center"
        >
          <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
          Back to login
        </Link>
      </p>
    </AuthWrapper>
  );
};

export default RegisterPage;