fix: signup section

This commit is contained in:
Sabda Yagra 2025-10-07 11:13:12 +07:00
parent c736d39b27
commit 8ff369e34a
2 changed files with 211 additions and 31 deletions

View File

@ -16,7 +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";
import { createUser, registerTenant } from "@/service/auth";
export default function SignUp() {
const router = useRouter();
@ -39,7 +39,9 @@ export default function SignUp() {
const [isResetPassword, setIsResetPassword] = useState(false);
const [checkUsernameValue, setCheckUsernameValue] = useState("");
const MySwal = withReactContent(Swal);
const [fullname, setFullname] = useState("");
const [userLevelId, setUserLevelId] = useState("");
const [userRoleId, setUserRoleId] = useState("");
const setValUsername = (e: any) => {
const uname = e.replaceAll(/[^\w.-]/g, "");
setUsername(uname.toLowerCase());
@ -81,16 +83,28 @@ export default function SignUp() {
const [isLoading, setIsLoading] = useState(false);
const [formErrors, setFormErrors] = useState<any>({});
const handleSendOtp = (e: React.FormEvent) => {
const handleSendOtp = async (e: React.FormEvent) => {
e.preventDefault();
// If role is tenant, handle tenant registration directly
// Tenant → gunakan API registerTenant
if (role === "tenant") {
handleTenantRegistration(e);
await handleTenantRegistration(e);
return;
}
// For other roles, proceed with OTP flow
// Umum dan Jurnalis → gunakan API createUser
if (role === "umum" || role === "jurnalis") {
await handleCreateUserUmum(e);
return;
}
// Kontributor (sementara ikut umum)
if (role === "kontributor") {
await handleCreateUserUmum(e);
return;
}
// Default (fallback ke OTP flow jika ada tambahan nanti)
setStep("otp");
};
@ -126,6 +140,76 @@ export default function SignUp() {
return password.length >= 8;
};
const handleCreateUserUmum = async (e: React.FormEvent) => {
e.preventDefault();
if (!fullname.trim()) {
MySwal.fire("Peringatan", "Nama lengkap wajib diisi", "warning");
return;
}
if (!validateEmail(email)) {
MySwal.fire("Peringatan", "Email tidak valid", "warning");
return;
}
if (!validatePassword(password)) {
MySwal.fire("Peringatan", "Password minimal 8 karakter", "warning");
return;
}
if (!userLevelId || !userRoleId) {
MySwal.fire("Peringatan", "Level dan Role wajib diisi", "warning");
return;
}
// ✅ Generate username otomatis
const autoUsername =
fullname.trim().replace(/\s+/g, "-").toLowerCase() || email.split("@")[0];
const payload = {
address: "",
clientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead",
dateOfBirth: "",
email,
fullName: fullname,
genderType: "",
identityGroup: "",
identityGroupNumber: "",
identityNumber: "",
identityType: "",
lastEducation: "",
password,
phoneNumber: "",
userLevelId: parseInt(userLevelId),
userRoleId: 3,
username: autoUsername,
workType: "",
};
console.log("📦 createUser payload:", payload);
try {
setIsLoading(true);
const res = await createUser(payload);
if (res?.error) {
MySwal.fire("Gagal", res?.message || "Gagal mendaftar", "error");
} else {
MySwal.fire({
title: "Berhasil!",
text: "Akun berhasil dibuat, Anda akan diarahkan ke halaman login.",
icon: "success",
showConfirmButton: false,
timer: 2000,
});
setTimeout(() => router.push("/auth"), 2000);
}
} catch (err) {
console.error("Error createUser:", err);
MySwal.fire("Error", "Terjadi kesalahan server.", "error");
} finally {
setIsLoading(false);
}
};
const validateTenantForm = () => {
const errors: any = {};
@ -182,17 +266,17 @@ export default function SignUp() {
try {
const registrationData = {
adminUser: {
address: "Jakarta", // Default address as per API requirement
address: "Jakarta",
email: email,
fullname: `${firstName} ${lastName}`,
password: tenantPassword,
phoneNumber: whatsapp,
username: `${firstName}-${lastName}`, // Using firstName + lastName as username
username: `${firstName}-${lastName}`,
},
client: {
clientType: "sub_client", // Hardcoded as per API requirement
clientType: "sub_client",
name: namaTenant,
parentClientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead", // Hardcoded as per API requirement
parentClientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead",
},
};
@ -229,6 +313,17 @@ export default function SignUp() {
}
};
// Generate username otomatis dari nama lengkap
React.useEffect(() => {
if (fullname.trim()) {
const generated = fullname
.toLowerCase()
.replace(/\s+/g, "-")
.replace(/[^a-z0-9_]/g, "-");
setUsername(generated);
}
}, [fullname]);
return (
<div className="min-h-screen flex">
{/* Left Side - Logo Section */}
@ -300,6 +395,86 @@ export default function SignUp() {
<Label htmlFor="tenant">Tenant</Label>
</div>
</RadioGroup>
{role === "umum" && (
<div className="mb-4 space-y-4">
{/* Nama Lengkap */}
<Input
type="text"
required
placeholder="Nama Lengkap"
value={fullname}
onChange={(e) => setFullname(e.target.value)}
/>
{/* Username (auto generated) */}
<Input
type="text"
placeholder="Username (otomatis dari nama)"
value={username}
readOnly
className="bg-gray-100 text-gray-700 cursor-not-allowed"
/>
{/* Email */}
<Input
type="email"
required
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{/* Password */}
<div className="relative">
<Input
type={isVisible ? "text" : "password"}
required
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="pr-10"
/>
<button
type="button"
onClick={toggleVisibility}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
>
{isVisible ? (
<EyeSlashFilledIcon className="h-4 w-4" />
) : (
<EyeFilledIcon className="h-4 w-4" />
)}
</button>
</div>
{/* Level dan Role */}
<select
required
className="w-full border border-gray-300 rounded-md p-2 text-sm"
value={userLevelId}
onChange={(e) => setUserLevelId(e.target.value)}
>
<option value="">Pilih Level Pengguna</option>
<option value="1">Mabes</option>
<option value="2">Polda</option>
<option value="3">Satker</option>
<option value="4">Polres</option>
<option value="5">Polsek</option>
</select>
<select
required
className="w-full border border-gray-300 rounded-md p-2 text-sm"
value={userRoleId}
onChange={(e) => setUserRoleId(e.target.value)}
>
<option value="">Pilih Role</option>
<option value="1">Admin</option>
<option value="2">Editor</option>
<option value="3">User</option>
</select>
</div>
)}
{/* Jurnalis: Select Keanggotaan */}
{role === "jurnalis" && (
@ -644,6 +819,12 @@ export default function SignUp() {
</div>
) : role === "tenant" ? (
"Daftar Tenant"
) : role === "umum" ? (
"Daftar Umum"
) : role === "jurnalis" ? (
"Daftar Jurnalis"
) : role === "kontributor" ? (
"Daftar Kontributor"
) : (
"Kirim OTP"
)}

View File

@ -7,25 +7,25 @@ import {
postAPIWithJson,
} from "./http-config/http-interceptor-service";
export interface CreateUserPayload {
address: string;
clientId: string;
dateOfBirth: string;
email: string;
fullName: string;
genderType: string;
identityGroup: string;
identityGroupNumber: string;
identityNumber: string;
identityType: string;
lastEducation: string;
password: string;
phoneNumber: string;
userLevelId: number;
userRoleId: number;
username: string;
workType: string;
}
// export interface CreateUserPayload {
// address: string;
// clientId: string;
// dateOfBirth: string;
// email: string;
// fullName: string;
// genderType: string;
// identityGroup: string;
// identityGroupNumber: string;
// identityNumber: string;
// identityType: string;
// lastEducation: string;
// password: string;
// phoneNumber: string;
// userLevelId: number;
// userRoleId: number;
// username: string;
// workType: string;
// }
export interface RequestOtpPayload {
email: string;
@ -201,7 +201,7 @@ export async function getDataPersonil(nrp: any) {
return httpGetInterceptor(url);
}
export async function createUser(data: CreateUserPayload) {
export async function createUser(data: any) {
const url = "users";
return httpPost(url, data);
}
@ -214,4 +214,3 @@ export async function registerTenant(data: any) {
const url = "clients/with-user";
return httpPost(url, data);
}