fix: register
This commit is contained in:
parent
5a9ab0b127
commit
f3e2ee208e
|
|
@ -174,7 +174,7 @@ export default function FormImageDetail() {
|
||||||
console.log("LALALALA", userLevelName);
|
console.log("LALALALA", userLevelName);
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
const { id } = useParams() as { id: string };
|
const { id } = useParams() as { id: string };
|
||||||
console.log(id);
|
console.log("IDIDIDIDI", id);
|
||||||
const editor = useRef(null);
|
const editor = useRef(null);
|
||||||
type ImageSchema = z.infer<typeof imageSchema>;
|
type ImageSchema = z.infer<typeof imageSchema>;
|
||||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||||
|
|
@ -676,7 +676,7 @@ export default function FormImageDetail() {
|
||||||
<SwiperSlide key={index}>
|
<SwiperSlide key={index}>
|
||||||
<img
|
<img
|
||||||
className="h-[480px] max-w-[600px] rounded-md object-cover mx-auto border-2"
|
className="h-[480px] max-w-[600px] rounded-md object-cover mx-auto border-2"
|
||||||
src={data}
|
src={data?.thumbnailUrl}
|
||||||
alt={`Image ${index + 1}`}
|
alt={`Image ${index + 1}`}
|
||||||
/>
|
/>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
|
|
|
||||||
|
|
@ -2,92 +2,110 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
// import { close, error, loading } from "@/config/swal";
|
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
import withReactContent from "sweetalert2-react-content";
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
import { Input } from "../ui/input";
|
import { Input } from "../ui/input";
|
||||||
import { Button } from "../ui/button";
|
import { Button } from "../ui/button";
|
||||||
import { Label } from "../ui/label";
|
import { Label } from "../ui/label";
|
||||||
|
|
||||||
// import { saveActivity } from "@/service/activity-log";
|
|
||||||
|
|
||||||
import Swal from "sweetalert2";
|
|
||||||
import { error } from "console";
|
|
||||||
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
|
||||||
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
||||||
|
|
||||||
|
// ✅ import services
|
||||||
|
import { requestOTP, createUser } from "@/service/auth";
|
||||||
|
|
||||||
export default function SignUp() {
|
export default function SignUp() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
|
||||||
const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
|
|
||||||
const [oldEmail, setOldEmail] = useState("");
|
|
||||||
const [newEmail, setNewEmail] = useState("");
|
|
||||||
const [passwordSetup, setPasswordSetup] = useState("");
|
|
||||||
const [confPasswordSetup, setConfPasswordSetup] = useState("");
|
|
||||||
|
|
||||||
const toggleVisibility = () => setIsVisible(!isVisible);
|
|
||||||
const [needOtp, setNeedOtp] = useState(false);
|
|
||||||
const [isFirstLogin, setFirstLogin] = useState(false);
|
|
||||||
const [otpValue, setOtpValue] = useState("");
|
|
||||||
const [username, setUsername] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [accessData, setAccessData] = useState<any>();
|
|
||||||
const [profile, setProfile] = useState<any>();
|
|
||||||
const [isValidEmail, setIsValidEmail] = useState(false);
|
|
||||||
const [isResetPassword, setIsResetPassword] = useState(false);
|
|
||||||
const [checkUsernameValue, setCheckUsernameValue] = useState("");
|
|
||||||
const MySwal = withReactContent(Swal);
|
const MySwal = withReactContent(Swal);
|
||||||
|
|
||||||
const setValUsername = (e: any) => {
|
const [step, setStep] = useState<"login" | "otp" | "form">("login");
|
||||||
const uname = e.replaceAll(/[^\w.-]/g, "");
|
|
||||||
setUsername(uname.toLowerCase());
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = () => {
|
|
||||||
// Simpan userId dummy ke cookie
|
|
||||||
Cookies.set("userId", "3");
|
|
||||||
|
|
||||||
// (Opsional) Simpan juga data lainnya jika dibutuhkan
|
|
||||||
// Cookies.set("username", username);
|
|
||||||
|
|
||||||
// Redirect ke halaman dashboard atau homepage
|
|
||||||
router.push("/"); // Ganti dengan path sesuai kebutuhan
|
|
||||||
};
|
|
||||||
|
|
||||||
const [step, setStep] = useState<"login" | "otp">("login");
|
|
||||||
const [email, setEmail] = useState("");
|
|
||||||
const [role, setRole] = useState("umum");
|
const [role, setRole] = useState("umum");
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
const [otp, setOtp] = useState(["", "", "", "", "", ""]);
|
const [otp, setOtp] = useState(["", "", "", "", "", ""]);
|
||||||
const [membership, setMembership] = useState("");
|
|
||||||
const [certNumber, setCertNumber] = useState("");
|
|
||||||
const [membershipType, setMembershipType] = useState("");
|
|
||||||
const [nrp, setNrp] = 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 handleSendOtp = (e: React.FormEvent) => {
|
// data user lengkap
|
||||||
|
const [fullname, setFullname] = useState("");
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [phoneNumber, setPhoneNumber] = useState("");
|
||||||
|
const [address, setAddress] = useState("");
|
||||||
|
const [dateOfBirth, setDateOfBirth] = useState("");
|
||||||
|
const [genderType, setGenderType] = useState("male");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [workType, setWorkType] = useState("");
|
||||||
|
|
||||||
|
// 🔹 Handle OTP Request
|
||||||
|
const handleSendOtp = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Kirim OTP ke email
|
|
||||||
|
if (!email) {
|
||||||
|
MySwal.fire("Error", "Email wajib diisi", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await requestOTP({ email, name: fullname || email });
|
||||||
|
|
||||||
|
if (!res?.error) {
|
||||||
|
MySwal.fire("Sukses", "OTP berhasil dikirim ke email anda", "success");
|
||||||
setStep("otp");
|
setStep("otp");
|
||||||
|
} else {
|
||||||
|
MySwal.fire("Gagal", res.message || "Gagal mengirim OTP", "error");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error send otp:", err);
|
||||||
|
MySwal.fire("Error", "Terjadi kesalahan server", "error");
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleVerifyOtp = (e: React.FormEvent) => {
|
// 🔹 Handle OTP Verification (dummy → lanjut form)
|
||||||
|
const handleVerifyOtp = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const code = otp.join("");
|
const code = otp.join("");
|
||||||
// Verifikasi kode OTP
|
if (code.length !== 6) {
|
||||||
console.log("Kode OTP:", code);
|
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
|
||||||
|
};
|
||||||
|
|
||||||
|
// 🔹 Handle Register ke API /users
|
||||||
|
const handleRegister = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
address,
|
||||||
|
clientId: "web-app", // contoh default
|
||||||
|
dateOfBirth,
|
||||||
|
email,
|
||||||
|
fullName: fullname, // 🔥 fix disini (bukan fullname)
|
||||||
|
genderType,
|
||||||
|
identityGroup: "",
|
||||||
|
identityGroupNumber: "",
|
||||||
|
identityNumber: "",
|
||||||
|
identityType: "",
|
||||||
|
lastEducation: "",
|
||||||
|
password,
|
||||||
|
phoneNumber,
|
||||||
|
userLevelId: 1,
|
||||||
|
userRoleId: 1,
|
||||||
|
username,
|
||||||
|
workType,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await createUser(payload);
|
||||||
|
if (!res?.error) {
|
||||||
|
MySwal.fire("Sukses", "Akun berhasil dibuat!", "success");
|
||||||
|
router.push("/login");
|
||||||
|
} else {
|
||||||
|
MySwal.fire("Error", res.message || "Gagal membuat akun", "error");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Register error:", err);
|
||||||
|
MySwal.fire("Error", "Terjadi kesalahan server", "error");
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOtpChange = (index: number, value: string) => {
|
const handleOtpChange = (index: number, value: string) => {
|
||||||
|
|
@ -95,137 +113,39 @@ export default function SignUp() {
|
||||||
const newOtp = [...otp];
|
const newOtp = [...otp];
|
||||||
newOtp[index] = value;
|
newOtp[index] = value;
|
||||||
setOtp(newOtp);
|
setOtp(newOtp);
|
||||||
// Fokus otomatis ke input selanjutnya
|
|
||||||
const nextInput = document.getElementById(`otp-${index + 1}`);
|
const nextInput = document.getElementById(`otp-${index + 1}`);
|
||||||
if (value && nextInput) nextInput.focus();
|
if (value && nextInput) nextInput.focus();
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex">
|
<div className="min-h-screen flex">
|
||||||
{/* Left Side - Logo Section */}
|
{/* Left Side Logo */}
|
||||||
<div className="hidden lg:flex lg:w-1/2 bg-white relative overflow-hidden">
|
<div className="hidden lg:flex lg:w-1/2 bg-white relative overflow-hidden">
|
||||||
<div className="absolute inset-0 bg-white"></div>
|
|
||||||
<div className="relative z-10 flex items-center justify-center w-full p-12">
|
<div className="relative z-10 flex items-center justify-center w-full p-12">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<Link href={"/"}>
|
<Link href={"/"}>
|
||||||
<div>
|
<img src="/Group.png" alt="Logo" className="max-w-2xl h-auto" />
|
||||||
<img
|
|
||||||
src="/Group.png"
|
|
||||||
alt="Mikul News Logo"
|
|
||||||
className="max-w-2xl h-auto drop-shadow-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Link>
|
</Link>
|
||||||
<div className="mt-8 text-white/90">
|
<div className="mt-8 text-black">
|
||||||
<h2 className="text-2xl font-bold mb-2">Portal NetIdhub</h2>
|
<h2 className="text-2xl font-bold mb-2">Portal NetIdhub</h2>
|
||||||
<p className="text-sm opacity-80">Platform beyond classic</p>
|
<p className="text-sm opacity-80">Platform beyond classic</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Decorative elements */}
|
|
||||||
<div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
|
|
||||||
<div className="absolute bottom-20 right-20 w-32 h-32 bg-white/5 rounded-full blur-2xl"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Side - Login Form */}
|
{/* Right Side Form */}
|
||||||
<div className="w-full lg:w-1/2 flex items-center justify-center p-8">
|
<div className="w-full lg:w-1/2 flex items-center justify-center p-8">
|
||||||
<div className="w-full max-w-md">
|
<div className="w-full max-w-md">
|
||||||
<div className=" ">
|
{/* Step 1: Kirim OTP */}
|
||||||
<div className="text-center mb-8">
|
{step === "login" && (
|
||||||
<div className=" w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-8">
|
<form onSubmit={handleSendOtp} className="space-y-4">
|
||||||
<img
|
|
||||||
src="/logo-netidhub.png"
|
|
||||||
alt="netidhub Logo"
|
|
||||||
className="max-w-[150px] h-auto drop-shadow-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-lg font-bold text-gray-900 mb-2 mt-5">
|
|
||||||
MENYATUKAN INDONESIA
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
{step === "login" ? (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSendOtp}
|
|
||||||
className="w-full max-w-lg p-6 ml-0 md:ml-5"
|
|
||||||
>
|
|
||||||
{/* Radio Buttons */}
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Jurnalis: Select Keanggotaan */}
|
|
||||||
{role === "jurnalis" && (
|
|
||||||
<div className="mb-4 space-y-4">
|
|
||||||
<select
|
|
||||||
required
|
|
||||||
className="w-full border border-gray-300 rounded-md p-2 text-sm"
|
|
||||||
value={membershipType}
|
|
||||||
onChange={(e) => setMembershipType(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Pilih jenis keanggotaan</option>
|
|
||||||
<option value="pwi">
|
|
||||||
PWI (Persatuan Wartawan Indonesia)
|
|
||||||
</option>
|
|
||||||
<option value="ijti">
|
|
||||||
IJTI (Ikatan Jurnalis Televisi Indonesia)
|
|
||||||
</option>
|
|
||||||
<option value="pfi">PFI (Pewarta Foto Indonesia)</option>
|
|
||||||
<option value="aji">
|
|
||||||
AJI (Asosiasi Jurnalis Indonesia)
|
|
||||||
</option>
|
|
||||||
<option value="lainnya">Identitas Lainnya</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
{/* Nomor Sertifikasi */}
|
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
required
|
placeholder="Nama Lengkap"
|
||||||
placeholder="Nomor Sertifikasi Wartawan"
|
value={fullname}
|
||||||
value={certNumber}
|
onChange={(e) => setFullname(e.target.value)}
|
||||||
onChange={(e) => setCertNumber(e.target.value)}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Kontributor: Form Fields */}
|
|
||||||
{role === "kontributor" && (
|
|
||||||
<div className="mb-4 space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="First Name"
|
|
||||||
value={firstNameKontributor}
|
|
||||||
onChange={(e) => setFirstNameKontributor(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="Last Name"
|
|
||||||
value={lastNameKontributor}
|
|
||||||
onChange={(e) => setLastNameKontributor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
required
|
required
|
||||||
|
|
@ -233,263 +153,95 @@ export default function SignUp() {
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
<Button type="submit" className="w-full bg-[#B89445] text-white">
|
||||||
<Input
|
|
||||||
type="tel"
|
|
||||||
required
|
|
||||||
placeholder="WhatsApp"
|
|
||||||
value={whatsappKontributor}
|
|
||||||
onChange={(e) => setWhatsappKontributor(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="Nama Perusahaan"
|
|
||||||
value={namaPerusahaan}
|
|
||||||
onChange={(e) => setNamaPerusahaan(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<select
|
|
||||||
required
|
|
||||||
className="w-full border border-gray-300 rounded-md p-2 text-sm"
|
|
||||||
value={kategoriPerusahaan}
|
|
||||||
onChange={(e) => setKategoriPerusahaan(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Pilih Kategori Perusahaan</option>
|
|
||||||
<option value="kementerian">Kementerian</option>
|
|
||||||
<option value="lembaga">Lembaga</option>
|
|
||||||
<option value="pemerintah-daerah">Pemerintah Daerah</option>
|
|
||||||
<option value="bumn">BUMN</option>
|
|
||||||
<option value="lainnya">Lainnya</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={isVisible ? "text" : "password"}
|
|
||||||
required
|
|
||||||
placeholder="Password"
|
|
||||||
value={kontributorPassword}
|
|
||||||
onChange={(e) => setKontributorPassword(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>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={isVisibleSetup[1] ? "text" : "password"}
|
|
||||||
required
|
|
||||||
placeholder="Konfirmasi Password"
|
|
||||||
value={confirmKontributorPassword}
|
|
||||||
onChange={(e) => setConfirmKontributorPassword(e.target.value)}
|
|
||||||
className="pr-10"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
const newVisibility = [...isVisibleSetup];
|
|
||||||
newVisibility[1] = !newVisibility[1];
|
|
||||||
setIsVisibleSetup(newVisibility);
|
|
||||||
}}
|
|
||||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
{isVisibleSetup[1] ? (
|
|
||||||
<EyeSlashFilledIcon className="h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<EyeFilledIcon className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Tenant: Form Fields */}
|
|
||||||
{role === "tenant" && (
|
|
||||||
<div className="mb-4 space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="First Name"
|
|
||||||
value={firstName}
|
|
||||||
onChange={(e) => setFirstName(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="Last Name"
|
|
||||||
value={lastName}
|
|
||||||
onChange={(e) => setLastName(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
type="email"
|
|
||||||
required
|
|
||||||
placeholder="Email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
type="tel"
|
|
||||||
required
|
|
||||||
placeholder="WhatsApp"
|
|
||||||
value={whatsapp}
|
|
||||||
onChange={(e) => setWhatsapp(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="Nama Tenant"
|
|
||||||
value={namaTenant}
|
|
||||||
onChange={(e) => setNamaTenant(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={isVisible ? "text" : "password"}
|
|
||||||
required
|
|
||||||
placeholder="Password"
|
|
||||||
value={tenantPassword}
|
|
||||||
onChange={(e) => setTenantPassword(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>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={isVisibleSetup[1] ? "text" : "password"}
|
|
||||||
required
|
|
||||||
placeholder="Konfirmasi Password"
|
|
||||||
value={confirmTenantPassword}
|
|
||||||
onChange={(e) => setConfirmTenantPassword(e.target.value)}
|
|
||||||
className="pr-10"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
const newVisibility = [...isVisibleSetup];
|
|
||||||
newVisibility[1] = !newVisibility[1];
|
|
||||||
setIsVisibleSetup(newVisibility);
|
|
||||||
}}
|
|
||||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
{isVisibleSetup[1] ? (
|
|
||||||
<EyeSlashFilledIcon className="h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<EyeFilledIcon className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Email Field (Selalu Ada, tapi posisi bergantung role) */}
|
|
||||||
{role !== "tenant" && role !== "kontributor" && (
|
|
||||||
<Input
|
|
||||||
type="email"
|
|
||||||
required
|
|
||||||
placeholder="Email"
|
|
||||||
className="mb-4"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Note */}
|
|
||||||
<p className="text-xs text-gray-500 mb-4">
|
|
||||||
Dengan mendaftar, saya telah menyetujui{" "}
|
|
||||||
<a href="#" className="text-blue-600 underline">
|
|
||||||
Syarat dan Ketentuan
|
|
||||||
</a>{" "}
|
|
||||||
serta{" "}
|
|
||||||
<a href="#" className="text-blue-600 underline">
|
|
||||||
Kebijakan Privasi
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Submit */}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
|
|
||||||
>
|
|
||||||
Kirim OTP
|
Kirim OTP
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* Link Login */}
|
|
||||||
<p className="text-center text-sm mt-4">
|
|
||||||
Sudah punya akun?{" "}
|
|
||||||
<a href="/login" className="text-[#007AFF] hover:underline">
|
|
||||||
Login
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</form>
|
</form>
|
||||||
) : (
|
)}
|
||||||
<form
|
|
||||||
onSubmit={handleVerifyOtp}
|
|
||||||
className="w-full max-w-sm p-6 text-center ml-5 space-y-4"
|
|
||||||
>
|
|
||||||
<h3 className="text-base font-semibold text-gray-800">
|
|
||||||
Masukkan Kode OTP
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
Silahkan cek inbox atau kotak spam pada email Anda.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
{/* Step 2: Verifikasi 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 mb-4">
|
||||||
{otp.map((value, index) => (
|
{otp.map((value, index) => (
|
||||||
<input
|
<input
|
||||||
key={index}
|
key={index}
|
||||||
id={`otp-${index}`}
|
id={`otp-${index}`}
|
||||||
type="text"
|
type="text"
|
||||||
inputMode="numeric"
|
|
||||||
maxLength={1}
|
maxLength={1}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => handleOtpChange(index, e.target.value)}
|
onChange={(e) => handleOtpChange(index, e.target.value)}
|
||||||
className="w-10 h-12 text-center border border-gray-300 rounded-md text-lg focus:outline-none focus:ring-2 focus:ring-[#B89445]"
|
className="w-10 h-12 text-center border rounded-md"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<Button type="submit" className="w-full bg-[#B89445] text-white">
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
|
|
||||||
>
|
|
||||||
Lanjut
|
Lanjut
|
||||||
</Button>
|
</Button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
<p className="text-sm text-black mt-4 cursor-pointer hover:underline">
|
{/* Step 3: Form Lengkap */}
|
||||||
Kirim Ulang OTP
|
{step === "form" && (
|
||||||
</p>
|
<form onSubmit={handleRegister} className="space-y-4">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Nama Lengkap"
|
||||||
|
value={fullname}
|
||||||
|
onChange={(e) => setFullname(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Username"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Nomor HP"
|
||||||
|
value={phoneNumber}
|
||||||
|
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Alamat"
|
||||||
|
value={address}
|
||||||
|
onChange={(e) => setAddress(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
placeholder="Tanggal Lahir"
|
||||||
|
value={dateOfBirth}
|
||||||
|
onChange={(e) => setDateOfBirth(e.target.value)}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
className="w-full border rounded-md p-2"
|
||||||
|
value={genderType}
|
||||||
|
onChange={(e) => setGenderType(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="male">Laki-laki</option>
|
||||||
|
<option value="female">Perempuan</option>
|
||||||
|
</select>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Jenis Pekerjaan"
|
||||||
|
value={workType}
|
||||||
|
onChange={(e) => setWorkType(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Button type="submit" className="w-full bg-green-600 text-white">
|
||||||
|
Daftar
|
||||||
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -98,6 +98,7 @@ const nextConfig = {
|
||||||
{ protocol: "https", hostname: "i.pravatar.cc" },
|
{ protocol: "https", hostname: "i.pravatar.cc" },
|
||||||
{ protocol: "https", hostname: "dev.mikulnews.com" },
|
{ protocol: "https", hostname: "dev.mikulnews.com" },
|
||||||
{ protocol: "https", hostname: "netidhub.com" },
|
{ protocol: "https", hostname: "netidhub.com" },
|
||||||
|
{ protocol: "https", hostname: "kontenhumas.com" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,31 @@ import {
|
||||||
postAPIWithJson,
|
postAPIWithJson,
|
||||||
} from "./http-config/http-interceptor-service";
|
} 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 RequestOtpPayload {
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
export async function login(data: any) {
|
export async function login(data: any) {
|
||||||
const pathUrl = "signin";
|
const pathUrl = "signin";
|
||||||
return httpPost(pathUrl, data);
|
return httpPost(pathUrl, data);
|
||||||
|
|
@ -119,10 +144,10 @@ export async function postRegistration(data: any) {
|
||||||
return httpPost(url, data);
|
return httpPost(url, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function requestOTP(data: any) {
|
// export async function requestOTP(data: any) {
|
||||||
const url = "public/users/otp-request";
|
// const url = "public/users/otp-request";
|
||||||
return httpPostInterceptor(url, data);
|
// return httpPostInterceptor(url, data);
|
||||||
}
|
// }
|
||||||
|
|
||||||
export async function verifyOTP(email: any, otp: any) {
|
export async function verifyOTP(email: any, otp: any) {
|
||||||
const url = `public/users/verify-otp?email=${email}&otp=${otp}`;
|
const url = `public/users/verify-otp?email=${email}&otp=${otp}`;
|
||||||
|
|
@ -173,3 +198,13 @@ export async function getDataPersonil(nrp: any) {
|
||||||
const url = `public/users/search-personil?nrp=${nrp}`;
|
const url = `public/users/search-personil?nrp=${nrp}`;
|
||||||
return httpGetInterceptor(url);
|
return httpGetInterceptor(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function createUser(data: CreateUserPayload) {
|
||||||
|
const url = "users";
|
||||||
|
return httpPost(url, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function requestOTP(data: { email: string; name: string }) {
|
||||||
|
const url = "users/otp-request";
|
||||||
|
return httpPostInterceptor(url, data);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -286,7 +286,7 @@ export async function convertSPIT(data: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function submitApproval(data: any) {
|
export async function submitApproval(data: any) {
|
||||||
const url = "media/approval";
|
const url = "article-approval-flows/1/multi-branch-approve";
|
||||||
return httpPostInterceptor(url, data);
|
return httpPostInterceptor(url, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue