372 lines
12 KiB
TypeScript
372 lines
12 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import Cookies from "js-cookie";
|
|
import { useRouter } from "next/navigation";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import Swal from "sweetalert2";
|
|
import { Input } from "../ui/input";
|
|
import { Button } from "../ui/button";
|
|
import { Label } from "../ui/label";
|
|
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
|
import { requestOTP, createUser } from "@/service/auth";
|
|
|
|
export default function SignUp() {
|
|
const router = useRouter();
|
|
const MySwal = withReactContent(Swal);
|
|
const [step, setStep] = useState<"login" | "otp" | "form">("login");
|
|
const [role, setRole] = useState("umum");
|
|
const [email, setEmail] = useState("");
|
|
const [otp, setOtp] = useState(["", "", "", "", "", ""]);
|
|
const [membershipType, setMembershipType] = useState("");
|
|
const [certNumber, setCertNumber] = useState("");
|
|
const [namaTenant, setNamaTenant] = useState("");
|
|
const [namaPerusahaan, setNamaPerusahaan] = useState("");
|
|
const [firstName, setFirstName] = useState("");
|
|
const [lastName, setLastName] = useState("");
|
|
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("");
|
|
|
|
const handleSendOtp = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!email) {
|
|
if (!email) {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Error",
|
|
text: "Email wajib diisi",
|
|
});
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
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 });
|
|
|
|
if (!res?.error) {
|
|
MySwal.fire({
|
|
icon: "success",
|
|
title: "Sukses",
|
|
text: "OTP berhasil dikirim ke email anda",
|
|
});
|
|
setStep("otp");
|
|
} else {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Gagal",
|
|
text: res.message || "Gagal mengirim OTP",
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error("Error send otp:", err);
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Terjadi kesalahan server",
|
|
text: "Gagal mengirim OTP",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleVerifyOtp = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const code = otp.join("");
|
|
if (code.length !== 6) {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "OTP harus 6 digit",
|
|
text: "error",
|
|
});
|
|
return;
|
|
}
|
|
MySwal.fire({
|
|
icon: "success",
|
|
title: "Sukses",
|
|
text: "OTP diverifikasi!",
|
|
});
|
|
setStep("form");
|
|
};
|
|
|
|
const handleRegister = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const payload = {
|
|
address,
|
|
clientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead",
|
|
dateOfBirth,
|
|
email,
|
|
fullName: 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({
|
|
icon: "success",
|
|
title: "Sukses",
|
|
text: "Akun berhasil dibuat!",
|
|
});
|
|
router.push("/auth");
|
|
} else {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Gagal",
|
|
text: res.message || "Gagal membuat akun",
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error("Register error:", err);
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Gagal",
|
|
text: "Terjadi kesalahan server",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleOtpChange = (index: number, value: string) => {
|
|
if (!/^[0-9]?$/.test(value)) return;
|
|
const newOtp = [...otp];
|
|
newOtp[index] = value;
|
|
setOtp(newOtp);
|
|
const nextInput = document.getElementById(`otp-${index + 1}`);
|
|
if (value && nextInput) nextInput.focus();
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex">
|
|
{/* 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 */}
|
|
<div className="w-full lg:w-1/2 flex items-center justify-center p-8">
|
|
<div className="w-full max-w-md">
|
|
{/* 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"
|
|
value={fullname}
|
|
onChange={(e) => setFullname(e.target.value)}
|
|
/>
|
|
<Input
|
|
type="email"
|
|
required
|
|
placeholder="Email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
|
|
<Button type="submit" className="w-full bg-[#B89445] text-white">
|
|
Kirim OTP
|
|
</Button>
|
|
</form>
|
|
)}
|
|
|
|
{/* 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">
|
|
{otp.map((value, index) => (
|
|
<input
|
|
key={index}
|
|
id={`otp-${index}`}
|
|
type="text"
|
|
maxLength={1}
|
|
value={value}
|
|
onChange={(e) => handleOtpChange(index, e.target.value)}
|
|
className="w-10 h-12 text-center border rounded-md"
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button type="submit" className="w-full bg-[#B89445] text-white">
|
|
Lanjut
|
|
</Button>
|
|
</form>
|
|
)}
|
|
|
|
{/* Step 3: Form Lengkap */}
|
|
{step === "form" && (
|
|
<form onSubmit={handleRegister} className="space-y-4">
|
|
<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
|
|
value={genderType}
|
|
onChange={(e) => setGenderType(e.target.value)}
|
|
className="w-full border rounded-md p-2"
|
|
>
|
|
<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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|