feat: update users
This commit is contained in:
parent
3c4f831703
commit
2527870af1
|
|
@ -16,6 +16,7 @@ import Swal from "sweetalert2";
|
|||
import { error } from "console";
|
||||
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
||||
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
||||
import { registerTenant } from "@/service/auth";
|
||||
|
||||
export default function SignUp() {
|
||||
const router = useRouter();
|
||||
|
|
@ -76,10 +77,19 @@ export default function SignUp() {
|
|||
const [kategoriPerusahaan, setKategoriPerusahaan] = useState("");
|
||||
const [kontributorPassword, setKontributorPassword] = useState("");
|
||||
const [confirmKontributorPassword, setConfirmKontributorPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [formErrors, setFormErrors] = useState<any>({});
|
||||
|
||||
const handleSendOtp = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Kirim OTP ke email
|
||||
|
||||
// If role is tenant, handle tenant registration directly
|
||||
if (role === "tenant") {
|
||||
handleTenantRegistration(e);
|
||||
return;
|
||||
}
|
||||
|
||||
// For other roles, proceed with OTP flow
|
||||
setStep("otp");
|
||||
};
|
||||
|
||||
|
|
@ -100,6 +110,124 @@ export default function SignUp() {
|
|||
if (value && nextInput) nextInput.focus();
|
||||
};
|
||||
|
||||
// Form validation functions
|
||||
const validateEmail = (email: string) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const validatePhone = (phone: string) => {
|
||||
const phoneRegex = /^[0-9+\-\s()]+$/;
|
||||
return phoneRegex.test(phone) && phone.length >= 10;
|
||||
};
|
||||
|
||||
const validatePassword = (password: string) => {
|
||||
return password.length >= 8;
|
||||
};
|
||||
|
||||
const validateTenantForm = () => {
|
||||
const errors: any = {};
|
||||
|
||||
if (!firstName.trim()) {
|
||||
errors.firstName = "First name is required";
|
||||
}
|
||||
|
||||
if (!lastName.trim()) {
|
||||
errors.lastName = "Last name is required";
|
||||
}
|
||||
|
||||
if (!email.trim()) {
|
||||
errors.email = "Email is required";
|
||||
} else if (!validateEmail(email)) {
|
||||
errors.email = "Please enter a valid email address";
|
||||
}
|
||||
|
||||
if (!whatsapp.trim()) {
|
||||
errors.whatsapp = "WhatsApp number is required";
|
||||
} else if (!validatePhone(whatsapp)) {
|
||||
errors.whatsapp = "Please enter a valid phone number";
|
||||
}
|
||||
|
||||
if (!namaTenant.trim()) {
|
||||
errors.namaTenant = "Tenant name is required";
|
||||
}
|
||||
|
||||
if (!tenantPassword) {
|
||||
errors.tenantPassword = "Password is required";
|
||||
} else if (!validatePassword(tenantPassword)) {
|
||||
errors.tenantPassword = "Password must be at least 8 characters";
|
||||
}
|
||||
|
||||
if (!confirmTenantPassword) {
|
||||
errors.confirmTenantPassword = "Please confirm your password";
|
||||
} else if (tenantPassword !== confirmTenantPassword) {
|
||||
errors.confirmTenantPassword = "Passwords do not match";
|
||||
}
|
||||
|
||||
setFormErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
|
||||
const handleTenantRegistration = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateTenantForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setFormErrors({});
|
||||
|
||||
try {
|
||||
const registrationData = {
|
||||
adminUser: {
|
||||
address: "Jakarta", // Default address as per API requirement
|
||||
email: email,
|
||||
fullname: `${firstName} ${lastName}`,
|
||||
password: tenantPassword,
|
||||
phoneNumber: whatsapp,
|
||||
username: `${firstName}-${lastName}` // Using firstName + lastName as username
|
||||
},
|
||||
client: {
|
||||
clientType: "sub_client", // Hardcoded as per API requirement
|
||||
name: namaTenant,
|
||||
parentClientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead" // Hardcoded as per API requirement
|
||||
}
|
||||
};
|
||||
|
||||
const response = await registerTenant(registrationData);
|
||||
|
||||
if (response.error) {
|
||||
MySwal.fire({
|
||||
title: "Registration Failed",
|
||||
text: response.message || "An error occurred during registration",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK"
|
||||
});
|
||||
} else {
|
||||
MySwal.fire({
|
||||
title: "Registration Successful",
|
||||
text: "Your tenant account has been created successfully!",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK"
|
||||
}).then(() => {
|
||||
// Redirect to login page or dashboard
|
||||
router.push("/auth");
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Registration error:", error);
|
||||
MySwal.fire({
|
||||
title: "Registration Failed",
|
||||
text: "An unexpected error occurred. Please try again.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK"
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex">
|
||||
{/* Left Side - Logo Section */}
|
||||
|
|
@ -318,45 +446,75 @@ export default function SignUp() {
|
|||
{role === "tenant" && (
|
||||
<div className="mb-4 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
placeholder="First Name"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Last Name"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
placeholder="First Name"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
className={formErrors.firstName ? "border-red-500" : ""}
|
||||
/>
|
||||
{formErrors.firstName && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Last Name"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className={formErrors.lastName ? "border-red-500" : ""}
|
||||
/>
|
||||
{formErrors.lastName && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
required
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<div>
|
||||
<Input
|
||||
type="email"
|
||||
required
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className={formErrors.email ? "border-red-500" : ""}
|
||||
/>
|
||||
{formErrors.email && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
type="tel"
|
||||
required
|
||||
placeholder="WhatsApp"
|
||||
value={whatsapp}
|
||||
onChange={(e) => setWhatsapp(e.target.value)}
|
||||
/>
|
||||
<div>
|
||||
<Input
|
||||
type="tel"
|
||||
required
|
||||
placeholder="WhatsApp"
|
||||
value={whatsapp}
|
||||
onChange={(e) => setWhatsapp(e.target.value)}
|
||||
className={formErrors.whatsapp ? "border-red-500" : ""}
|
||||
/>
|
||||
{formErrors.whatsapp && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.whatsapp}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Nama Tenant"
|
||||
value={namaTenant}
|
||||
onChange={(e) => setNamaTenant(e.target.value)}
|
||||
/>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Nama Tenant"
|
||||
value={namaTenant}
|
||||
onChange={(e) => setNamaTenant(e.target.value)}
|
||||
className={formErrors.namaTenant ? "border-red-500" : ""}
|
||||
/>
|
||||
{formErrors.namaTenant && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.namaTenant}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
|
|
@ -365,7 +523,7 @@ export default function SignUp() {
|
|||
placeholder="Password"
|
||||
value={tenantPassword}
|
||||
onChange={(e) => setTenantPassword(e.target.value)}
|
||||
className="pr-10"
|
||||
className={`pr-10 ${formErrors.tenantPassword ? "border-red-500" : ""}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -378,6 +536,9 @@ export default function SignUp() {
|
|||
<EyeFilledIcon className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{formErrors.tenantPassword && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.tenantPassword}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
|
|
@ -387,7 +548,7 @@ export default function SignUp() {
|
|||
placeholder="Konfirmasi Password"
|
||||
value={confirmTenantPassword}
|
||||
onChange={(e) => setConfirmTenantPassword(e.target.value)}
|
||||
className="pr-10"
|
||||
className={`pr-10 ${formErrors.confirmTenantPassword ? "border-red-500" : ""}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -404,6 +565,9 @@ export default function SignUp() {
|
|||
<EyeFilledIcon className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{formErrors.confirmTenantPassword && (
|
||||
<p className="text-red-500 text-xs mt-1">{formErrors.confirmTenantPassword}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -436,8 +600,16 @@ export default function SignUp() {
|
|||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Kirim OTP
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
{role === "tenant" ? "Mendaftar..." : "Mengirim..."}
|
||||
</div>
|
||||
) : (
|
||||
role === "tenant" ? "Daftar Tenant" : "Kirim OTP"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Link Login */}
|
||||
|
|
|
|||
|
|
@ -173,3 +173,8 @@ export async function getDataPersonil(nrp: any) {
|
|||
const url = `public/users/search-personil?nrp=${nrp}`;
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function registerTenant(data: any) {
|
||||
const url = "clients/with-user";
|
||||
return httpPost(url, data);
|
||||
}
|
||||
Loading…
Reference in New Issue