fix: signup section
This commit is contained in:
parent
c736d39b27
commit
8ff369e34a
|
|
@ -16,7 +16,7 @@ import Swal from "sweetalert2";
|
||||||
import { error } from "console";
|
import { error } from "console";
|
||||||
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
||||||
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
||||||
import { registerTenant } from "@/service/auth";
|
import { createUser, registerTenant } from "@/service/auth";
|
||||||
|
|
||||||
export default function SignUp() {
|
export default function SignUp() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
@ -39,7 +39,9 @@ export default function SignUp() {
|
||||||
const [isResetPassword, setIsResetPassword] = useState(false);
|
const [isResetPassword, setIsResetPassword] = useState(false);
|
||||||
const [checkUsernameValue, setCheckUsernameValue] = useState("");
|
const [checkUsernameValue, setCheckUsernameValue] = useState("");
|
||||||
const MySwal = withReactContent(Swal);
|
const MySwal = withReactContent(Swal);
|
||||||
|
const [fullname, setFullname] = useState("");
|
||||||
|
const [userLevelId, setUserLevelId] = useState("");
|
||||||
|
const [userRoleId, setUserRoleId] = useState("");
|
||||||
const setValUsername = (e: any) => {
|
const setValUsername = (e: any) => {
|
||||||
const uname = e.replaceAll(/[^\w.-]/g, "");
|
const uname = e.replaceAll(/[^\w.-]/g, "");
|
||||||
setUsername(uname.toLowerCase());
|
setUsername(uname.toLowerCase());
|
||||||
|
|
@ -81,16 +83,28 @@ export default function SignUp() {
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [formErrors, setFormErrors] = useState<any>({});
|
const [formErrors, setFormErrors] = useState<any>({});
|
||||||
|
|
||||||
const handleSendOtp = (e: React.FormEvent) => {
|
const handleSendOtp = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// If role is tenant, handle tenant registration directly
|
// Tenant → gunakan API registerTenant
|
||||||
if (role === "tenant") {
|
if (role === "tenant") {
|
||||||
handleTenantRegistration(e);
|
await handleTenantRegistration(e);
|
||||||
return;
|
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");
|
setStep("otp");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -126,6 +140,76 @@ export default function SignUp() {
|
||||||
return password.length >= 8;
|
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 validateTenantForm = () => {
|
||||||
const errors: any = {};
|
const errors: any = {};
|
||||||
|
|
||||||
|
|
@ -182,17 +266,17 @@ export default function SignUp() {
|
||||||
try {
|
try {
|
||||||
const registrationData = {
|
const registrationData = {
|
||||||
adminUser: {
|
adminUser: {
|
||||||
address: "Jakarta", // Default address as per API requirement
|
address: "Jakarta",
|
||||||
email: email,
|
email: email,
|
||||||
fullname: `${firstName} ${lastName}`,
|
fullname: `${firstName} ${lastName}`,
|
||||||
password: tenantPassword,
|
password: tenantPassword,
|
||||||
phoneNumber: whatsapp,
|
phoneNumber: whatsapp,
|
||||||
username: `${firstName}-${lastName}`, // Using firstName + lastName as username
|
username: `${firstName}-${lastName}`,
|
||||||
},
|
},
|
||||||
client: {
|
client: {
|
||||||
clientType: "sub_client", // Hardcoded as per API requirement
|
clientType: "sub_client",
|
||||||
name: namaTenant,
|
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 (
|
return (
|
||||||
<div className="min-h-screen flex">
|
<div className="min-h-screen flex">
|
||||||
{/* Left Side - Logo Section */}
|
{/* Left Side - Logo Section */}
|
||||||
|
|
@ -300,6 +395,86 @@ export default function SignUp() {
|
||||||
<Label htmlFor="tenant">Tenant</Label>
|
<Label htmlFor="tenant">Tenant</Label>
|
||||||
</div>
|
</div>
|
||||||
</RadioGroup>
|
</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 */}
|
{/* Jurnalis: Select Keanggotaan */}
|
||||||
{role === "jurnalis" && (
|
{role === "jurnalis" && (
|
||||||
|
|
@ -644,6 +819,12 @@ export default function SignUp() {
|
||||||
</div>
|
</div>
|
||||||
) : role === "tenant" ? (
|
) : role === "tenant" ? (
|
||||||
"Daftar Tenant"
|
"Daftar Tenant"
|
||||||
|
) : role === "umum" ? (
|
||||||
|
"Daftar Umum"
|
||||||
|
) : role === "jurnalis" ? (
|
||||||
|
"Daftar Jurnalis"
|
||||||
|
) : role === "kontributor" ? (
|
||||||
|
"Daftar Kontributor"
|
||||||
) : (
|
) : (
|
||||||
"Kirim OTP"
|
"Kirim OTP"
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -7,25 +7,25 @@ import {
|
||||||
postAPIWithJson,
|
postAPIWithJson,
|
||||||
} from "./http-config/http-interceptor-service";
|
} from "./http-config/http-interceptor-service";
|
||||||
|
|
||||||
export interface CreateUserPayload {
|
// export interface CreateUserPayload {
|
||||||
address: string;
|
// address: string;
|
||||||
clientId: string;
|
// clientId: string;
|
||||||
dateOfBirth: string;
|
// dateOfBirth: string;
|
||||||
email: string;
|
// email: string;
|
||||||
fullName: string;
|
// fullName: string;
|
||||||
genderType: string;
|
// genderType: string;
|
||||||
identityGroup: string;
|
// identityGroup: string;
|
||||||
identityGroupNumber: string;
|
// identityGroupNumber: string;
|
||||||
identityNumber: string;
|
// identityNumber: string;
|
||||||
identityType: string;
|
// identityType: string;
|
||||||
lastEducation: string;
|
// lastEducation: string;
|
||||||
password: string;
|
// password: string;
|
||||||
phoneNumber: string;
|
// phoneNumber: string;
|
||||||
userLevelId: number;
|
// userLevelId: number;
|
||||||
userRoleId: number;
|
// userRoleId: number;
|
||||||
username: string;
|
// username: string;
|
||||||
workType: string;
|
// workType: string;
|
||||||
}
|
// }
|
||||||
|
|
||||||
export interface RequestOtpPayload {
|
export interface RequestOtpPayload {
|
||||||
email: string;
|
email: string;
|
||||||
|
|
@ -201,7 +201,7 @@ export async function getDataPersonil(nrp: any) {
|
||||||
return httpGetInterceptor(url);
|
return httpGetInterceptor(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function createUser(data: CreateUserPayload) {
|
export async function createUser(data: any) {
|
||||||
const url = "users";
|
const url = "users";
|
||||||
return httpPost(url, data);
|
return httpPost(url, data);
|
||||||
}
|
}
|
||||||
|
|
@ -214,4 +214,3 @@ export async function registerTenant(data: any) {
|
||||||
const url = "clients/with-user";
|
const url = "clients/with-user";
|
||||||
return httpPost(url, data);
|
return httpPost(url, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue