fix: signUp
This commit is contained in:
parent
1b476ca121
commit
38c17cc28e
|
|
@ -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<any>({});
|
||||
// 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 (
|
||||
<div className="min-h-screen flex">
|
||||
{/* Left Side Logo */}
|
||||
<div className="hidden lg:flex lg:w-1/2 bg-white relative overflow-hidden">
|
||||
<div className="relative z-10 flex items-center justify-center w-full p-12">
|
||||
<div className="text-center">
|
||||
<Link href={"/"}>
|
||||
<img src="/Group.png" alt="Logo" className="max-w-2xl h-auto" />
|
||||
</Link>
|
||||
<div className="mt-8 text-black">
|
||||
<h2 className="text-2xl font-bold mb-2">Portal NetIdhub</h2>
|
||||
<p className="text-sm opacity-80">Platform beyond classic</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Left Side */}
|
||||
<div className="hidden lg:flex lg:w-1/2 bg-white items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Link href={"/"}>
|
||||
<img src="/Group.png" alt="Logo" className="max-w-2xl h-auto" />
|
||||
</Link>
|
||||
<h2 className="text-2xl font-bold mt-4">Portal NetIdhub</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side Form */}
|
||||
{/* Right Side */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center p-8">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Step 1: Kirim OTP */}
|
||||
{/* Step 1: Pilih Role + Email */}
|
||||
{step === "login" && (
|
||||
<form onSubmit={handleSendOtp} className="space-y-4">
|
||||
<RadioGroup
|
||||
defaultValue="umum"
|
||||
className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-6"
|
||||
onValueChange={(val) => setRole(val)}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="umum" id="umum" />
|
||||
<Label htmlFor="umum">Umum</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="jurnalis" id="jurnalis" />
|
||||
<Label htmlFor="jurnalis">Jurnalis</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="kontributor" id="kontributor" />
|
||||
<Label htmlFor="kontributor">Kontributor</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="tenant" id="tenant" />
|
||||
<Label htmlFor="tenant">Tenant</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
||||
{role === "jurnalis" && (
|
||||
<>
|
||||
<select
|
||||
className="w-full border rounded-md p-2"
|
||||
value={membershipType}
|
||||
onChange={(e) => setMembershipType(e.target.value)}
|
||||
>
|
||||
<option value="">Pilih jenis keanggotaan</option>
|
||||
<option value="pwi">PWI</option>
|
||||
<option value="ijti">IJTI</option>
|
||||
<option value="pfi">PFI</option>
|
||||
<option value="aji">AJI</option>
|
||||
<option value="lainnya">Lainnya</option>
|
||||
</select>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nomor Sertifikasi Wartawan"
|
||||
value={certNumber}
|
||||
onChange={(e) => setCertNumber(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{role === "tenant" && (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nama Tenant"
|
||||
value={namaTenant}
|
||||
onChange={(e) => setNamaTenant(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{role === "kontributor" && (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nama Perusahaan"
|
||||
value={namaPerusahaan}
|
||||
onChange={(e) => setNamaPerusahaan(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nama Lengkap"
|
||||
|
|
@ -307,17 +254,18 @@ export default function SignUp() {
|
|||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full bg-[#B89445] text-white">
|
||||
Kirim OTP
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Step 2: Verifikasi OTP */}
|
||||
{/* Step 2: OTP */}
|
||||
{step === "otp" && (
|
||||
<form onSubmit={handleVerifyOtp} className="space-y-4 text-center">
|
||||
<h3 className="text-base font-semibold">Masukkan OTP</h3>
|
||||
<div className="flex justify-between mb-4">
|
||||
<div className="flex justify-between">
|
||||
{otp.map((value, index) => (
|
||||
<input
|
||||
key={index}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export async function postEmailValidation(data: any) {
|
|||
}
|
||||
|
||||
export async function postSetupEmail(data: any) {
|
||||
const url = "public/users/setup-email";
|
||||
const url = "users/setup-email";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,14 +76,12 @@ export async function deleteCategories(id: number) {
|
|||
}
|
||||
|
||||
export async function createCategories(data: CreateCategoryPayload) {
|
||||
const url = "/article-categories";
|
||||
|
||||
const url = "article-categories";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
||||
// services/article-categories.ts
|
||||
|
||||
export async function getArticleCategoryDetail(id: number) {
|
||||
const url = `/article-categories/${id}`;
|
||||
const url = `article-categories/${id}`;
|
||||
return await httpGetInterceptor(url);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue