317 lines
11 KiB
JavaScript
317 lines
11 KiB
JavaScript
import { useEffect, 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";
|
|
import { MarketRepository } from "../../repositories/MarketRepository";
|
|
|
|
const mobileNumberRegex = /^(?:\d{10}|\d{3}[-\s]?\d{3}[-\s]?\d{4})$/;
|
|
|
|
const registerSchema = z.object({
|
|
organizatioinName: z
|
|
.string()
|
|
.min(1, { message: "Organization Name is required" }),
|
|
email: z.string().email(),
|
|
about: z
|
|
.string()
|
|
.min(1, { message: "Current Address is required" })
|
|
.max(500, { message: "Address cannot exceed 500 characters" }),
|
|
contactPerson: z.string().min(1, { message: "Person Name is required" }),
|
|
contactNumber: z
|
|
.string()
|
|
.min(1, { message: "Phone Number is required" })
|
|
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
|
oragnizationSize: z
|
|
.string()
|
|
.min(1, { message: "please Select Organization Size " }),
|
|
industryId: z.string(),
|
|
terms: z.boolean().refine((val) => val === true, {
|
|
message: "Please accept the terms and conditions.",
|
|
}),
|
|
});
|
|
|
|
const RegisterPage = () => {
|
|
const [registered, setRegristered] = useState(false);
|
|
const [industries, setIndustries] = useState([]);
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(registerSchema),
|
|
});
|
|
|
|
const onSubmit = async (data) => {
|
|
try {
|
|
const response = await MarketRepository.requestDemo(data);
|
|
showToast("Your Registration SuccessFully !");
|
|
setRegristered(true);
|
|
} catch (error) {
|
|
showToast(error.message, "error");
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
fetchIndustries();
|
|
}, []);
|
|
|
|
useEffect(() => { }, [industries]);
|
|
|
|
const fetchIndustries = async () => {
|
|
try {
|
|
const response = await MarketRepository.getIndustries();
|
|
const industry = response.data;
|
|
setIndustries(industry);
|
|
} catch (error) {
|
|
showToast(error.message, "error");
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
|
|
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
|
|
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
|
|
|
|
<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-2"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
>
|
|
<div className="mb-2 text-start">
|
|
<label htmlFor="organizatioinName" className="form-label">
|
|
Organization Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="organizatioinName"
|
|
{...register("organizatioinName")}
|
|
name="organizatioinName"
|
|
placeholder="Enter your Organization Name"
|
|
autoFocus
|
|
/>
|
|
{errors.organizatioinName && (
|
|
<div
|
|
className="danger-text text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.organizatioinName.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-2 text-start">
|
|
<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-2 form-password-toggle text-start">
|
|
<label className="form-label" htmlFor="contactperson">
|
|
Contact Person
|
|
</label>
|
|
<div className="input-group">
|
|
<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-2 form-password-toggle text-start">
|
|
<label className="form-label" htmlFor="contactnumber">
|
|
Contact Number
|
|
</label>
|
|
<div className="input-group">
|
|
<input
|
|
type="text"
|
|
id="contactnumber"
|
|
{...register("contactNumber")}
|
|
className="form-control"
|
|
name="contactNumber"
|
|
placeholder="Contact Number"
|
|
aria-describedby="contactnumber"
|
|
/>
|
|
</div>
|
|
{errors.contactNumber && (
|
|
<div
|
|
className="danger-text text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.contactNumber.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-2 form-password-toggle text-start">
|
|
<label className="form-label" htmlFor="contactnumber">
|
|
About Organization
|
|
</label>
|
|
<div className="input-group">
|
|
<textarea
|
|
id="about"
|
|
className="form-control"
|
|
placeholder="about"
|
|
aria-label="about"
|
|
aria-describedby="about"
|
|
{...register("about")}
|
|
></textarea>
|
|
</div>
|
|
{errors.about && (
|
|
<div
|
|
className="danger-text text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.about.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-2 form-password-toggle text-start">
|
|
<label className="form-label" htmlFor="oragnizationSize">
|
|
Organization Size
|
|
</label>
|
|
<div className="input-group">
|
|
<select
|
|
className="form-select"
|
|
id="oragnizationSize"
|
|
name="oragnizationSize"
|
|
{...register("oragnizationSize")}
|
|
aria-label="Default select example"
|
|
>
|
|
<option value="">Number of Employees</option>
|
|
<option value="1-10">1-10</option>
|
|
<option value="10-50">10-50</option>
|
|
<option value="50-100">50-100</option>
|
|
<option value="100-200">100-200</option>
|
|
<option value="more than 200">more than 200</option>
|
|
</select>
|
|
</div>
|
|
{errors.oragnizationSize && (
|
|
<div
|
|
className="danger-text text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.oragnizationSize.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-2 form-password-toggle text-start">
|
|
<label className="form-label" htmlFor="industryId">
|
|
Industry
|
|
</label>
|
|
<div className="input-group">
|
|
<select
|
|
className="form-select"
|
|
id="industryId"
|
|
name="industryId"
|
|
{...register("industryId")}
|
|
aria-label="Default select example"
|
|
>
|
|
<option value="">Select Industry</option>
|
|
{industries.length > 0 ? (
|
|
industries.map((item) => (
|
|
<option value={item.id} key={item.id}>
|
|
{item.name}
|
|
</option>
|
|
))
|
|
) : (
|
|
<option disabled>Loading industries...</option>
|
|
)}
|
|
</select>
|
|
</div>
|
|
{errors.industryId && (
|
|
<div
|
|
className="danger-text text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.industryId.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-2 text-start">
|
|
<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{" "}
|
|
<Link
|
|
to="/legal-info"
|
|
aria-label="privacy policy and terms"
|
|
className="text-decoration-underline"
|
|
>
|
|
privacy policy & terms
|
|
</Link>
|
|
</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="text-decoration-underline ms-1"
|
|
>
|
|
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm me-1"></i>
|
|
Back to login
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default RegisterPage; |