feat: update users

components/form/sign-up.tsx

@@ -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">
+                      <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>
                     
+                    <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>
                     
+                    <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>
                     
+                    <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 */}

service/auth.ts

@@ -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);
+}