diff --git a/components/form/sign-up.tsx b/components/form/sign-up.tsx index e684008..e8e7cdf 100644 --- a/components/form/sign-up.tsx +++ b/components/form/sign-up.tsx @@ -9,11 +9,9 @@ import { Input } from "../ui/input"; import { Button } from "../ui/button"; import { Label } from "../ui/label"; import { RadioGroup, RadioGroupItem } from "../ui/radio-group"; -import { registerTenant } from "@/service/auth"; // ✅ import services import { requestOTP, createUser } from "@/service/auth"; -import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons"; export default function SignUp() { const router = useRouter(); @@ -23,32 +21,14 @@ export default function SignUp() { const [role, setRole] = useState("umum"); const [email, setEmail] = useState(""); const [otp, setOtp] = useState(["", "", "", "", "", ""]); - const [membership, setMembership] = useState(""); - const [certNumber, setCertNumber] = useState(""); + + // role-specific const [membershipType, setMembershipType] = useState(""); - const [nrp, setNrp] = useState(""); + const [certNumber, setCertNumber] = useState(""); + const [namaTenant, setNamaTenant] = useState(""); + const [namaPerusahaan, setNamaPerusahaan] = useState(""); const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); - const [whatsapp, setWhatsapp] = useState(""); - const [namaTenant, setNamaTenant] = useState(""); - const [tenantPassword, setTenantPassword] = useState(""); - const [confirmTenantPassword, setConfirmTenantPassword] = useState(""); - const [firstNameKontributor, setFirstNameKontributor] = useState(""); - const [lastNameKontributor, setLastNameKontributor] = useState(""); - const [whatsappKontributor, setWhatsappKontributor] = useState(""); - const [namaPerusahaan, setNamaPerusahaan] = useState(""); - const [kategoriPerusahaan, setKategoriPerusahaan] = useState(""); - const [kontributorPassword, setKontributorPassword] = useState(""); - const [confirmKontributorPassword, setConfirmKontributorPassword] = - useState(""); - const [isLoading, setIsLoading] = useState(false); - const [formErrors, setFormErrors] = useState({}); - // di atas, bareng useState lainnya - const [isVisible, setIsVisible] = useState(false); - const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]); - - // fungsi helper - const toggleVisibility = () => setIsVisible(!isVisible); // data user lengkap const [fullname, setFullname] = useState(""); @@ -60,7 +40,7 @@ export default function SignUp() { const [password, setPassword] = useState(""); const [workType, setWorkType] = useState(""); - // 🔹 Handle OTP Request + // 🔹 Kirim OTP const handleSendOtp = async (e: React.FormEvent) => { e.preventDefault(); @@ -69,8 +49,16 @@ export default function SignUp() { return; } + // tentukan name sesuai role + let name = ""; + if (role === "tenant") name = namaTenant || `${firstName} ${lastName}`; + else if (role === "kontributor") + name = namaPerusahaan || `${firstName} ${lastName}`; + else if (role === "jurnalis") name = certNumber || "Jurnalis"; + else name = fullname || email; + try { - const res = await requestOTP({ email, name: fullname || email }); + const res = await requestOTP({ email, name }); if (!res?.error) { MySwal.fire("Sukses", "OTP berhasil dikirim ke email anda", "success"); @@ -82,18 +70,9 @@ export default function SignUp() { console.error("Error send otp:", err); MySwal.fire("Error", "Terjadi kesalahan server", "error"); } - - // If role is tenant, handle tenant registration directly - if (role === "tenant") { - handleTenantRegistration(e); - return; - } - - // For other roles, proceed with OTP flow - setStep("otp"); }; - // 🔹 Handle OTP Verification (dummy → lanjut form) + // 🔹 Verifikasi OTP const handleVerifyOtp = async (e: React.FormEvent) => { e.preventDefault(); const code = otp.join(""); @@ -101,21 +80,20 @@ export default function SignUp() { MySwal.fire("Error", "OTP harus 6 digit", "error"); return; } - // TODO: ganti dengan verifyOTP API MySwal.fire("Sukses", "OTP diverifikasi!", "success"); - setStep("form"); // lanjut ke form lengkap + setStep("form"); }; - // 🔹 Handle Register ke API /users + // 🔹 Register User (API baru) const handleRegister = async (e: React.FormEvent) => { e.preventDefault(); const payload = { address, - clientId: "web-app", // contoh default + clientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead", dateOfBirth, email, - fullName: fullname, // 🔥 fix disini (bukan fullname) + fullName: fullname, genderType, identityGroup: "", identityGroupNumber: "", @@ -134,7 +112,7 @@ export default function SignUp() { const res = await createUser(payload); if (!res?.error) { MySwal.fire("Sukses", "Akun berhasil dibuat!", "success"); - router.push("/login"); + router.push("/auth"); } else { MySwal.fire("Error", res.message || "Gagal membuat akun", "error"); } @@ -153,147 +131,116 @@ 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 (
- {/* Left Side Logo */} -
-
-
- - Logo - -
-

Portal NetIdhub

-

Platform beyond classic

-
-
+ {/* Left Side */} +
+
+ + Logo + +

Portal NetIdhub

- {/* Right Side Form */} + {/* Right Side */}
- {/* Step 1: Kirim OTP */} + {/* Step 1: Pilih Role + Email */} {step === "login" && (
+ setRole(val)} + > +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + {role === "jurnalis" && ( + <> + + setCertNumber(e.target.value)} + /> + + )} + + {role === "tenant" && ( + <> + setNamaTenant(e.target.value)} + /> + setFirstName(e.target.value)} + /> + setLastName(e.target.value)} + /> + + )} + + {role === "kontributor" && ( + <> + setNamaPerusahaan(e.target.value)} + /> + setFirstName(e.target.value)} + /> + setLastName(e.target.value)} + /> + + )} + setEmail(e.target.value)} /> +
)} - {/* Step 2: Verifikasi OTP */} + {/* Step 2: OTP */} {step === "otp" && (

Masukkan OTP

-
+
{otp.map((value, index) => (