461 lines
14 KiB
TypeScript
461 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { close, error, loading, registerConfirm } from "@/config/swal";
|
|
import { useRouter } from "@/i18n/routing";
|
|
import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
|
|
import { verifyOTP } from "@/service/landing/landing";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useParams, useSearchParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { useForm, SubmitHandler } from "react-hook-form";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import * as Yup from "yup";
|
|
|
|
|
|
type Inputs = {
|
|
example: string;
|
|
exampleRequired: string;
|
|
};
|
|
|
|
const page = () => {
|
|
const params = useParams();
|
|
const [stepOneActive] = useState(true);
|
|
const [stepTwoActive, setStepTwoActive] = useState(false);
|
|
const [stepThreeActive, setStepThreeActive] = useState(false);
|
|
const [typePass, setTypePass] = useState("password");
|
|
const [typePassConf, setTypePassConf] = useState("password");
|
|
const searchParams = useSearchParams();
|
|
const [formProfile, setFormProfile] = useState(false);
|
|
const [journalistCertificate, setJournalistCertificate] = useState();
|
|
const [personilNRP, setPersonilNRP] = useState();
|
|
const [journalistData, setJournalistData] = useState<any>();
|
|
const [personilData, setPersonilData] = useState<any>();
|
|
const [userIdentity] = useState();
|
|
const [userIdentityValidate, setUserIdentityValidate] = useState("");
|
|
const [email, setEmail] = useState();
|
|
const [emailValidate, setEmailValidate] = useState("");
|
|
const [otpValidate, setOtpValidate] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [passwordConf, setPasswordConf] = useState("");
|
|
const [city, setCity] = useState([]);
|
|
const [isValidPassword, setIsValidPassword] = useState(false);
|
|
const MySwal = withReactContent(Swal);
|
|
const [isCustomActive, setIsCustomActive] = useState(false);
|
|
const [institusi, setInstitusi] = useState();
|
|
const [customInstituteName, setCustomInstituteName] = useState("");
|
|
const [institusiAddress, setInstitusiAddress] = useState<any>();
|
|
const [institution, setInstitution] = useState<any>([]);
|
|
const [province, setProvince] = useState<any>([]);
|
|
const router = useRouter();
|
|
const category = searchParams?.get("category");
|
|
const [districts, setDistricts] = useState([]);
|
|
|
|
const [otp1, setOtp1] = useState();
|
|
const [otp2, setOtp2] = useState();
|
|
const [otp3, setOtp3] = useState();
|
|
const [otp4, setOtp4] = useState();
|
|
const [otp5, setOtp5] = useState();
|
|
const [otp6, setOtp6] = useState();
|
|
|
|
const nMinuteSeconds = 60;
|
|
const nSecondInMiliseconds = 1000;
|
|
const [, setRefreshTimer] = useState(false);
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
|
|
username: Yup.string().required("Username tidak boleh kosong"),
|
|
phoneNumber: Yup.string().required("Nomor Telepon tidak boleh kosong"),
|
|
address: Yup.string().required("Alamat tidak boleh kosong"),
|
|
email: Yup.string().required("Email tidak boleh kosong"),
|
|
provinsi: Yup.string().required("Provinsi tidak boleh kosong"),
|
|
kota: Yup.string().required("Kota tidak boleh kosong"),
|
|
kecamatan: Yup.string().required("Kecamatan tidak boleh kosong"),
|
|
password: Yup.string().required("Kata Sandi tidak boleh kosong"),
|
|
passwordConf: Yup.string().required(
|
|
"Konfirmasi Kata Sandi tidak boleh kosong",
|
|
),
|
|
});
|
|
|
|
const formOptions = {
|
|
resolver: yupResolver(validationSchema),
|
|
};
|
|
|
|
const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);
|
|
|
|
const convertMinutesToMiliseconds = (minute: any) =>
|
|
minute * nMinuteSeconds * nSecondInMiliseconds;
|
|
|
|
const convertMilisecondsToHour = (miliseconds: any) =>
|
|
new Date(miliseconds).toISOString().slice(17, -5);
|
|
|
|
let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
|
|
let interval;
|
|
|
|
const showPass = () => {
|
|
setTypePass("text");
|
|
};
|
|
|
|
const hidePass = () => {
|
|
setTypePass("password");
|
|
};
|
|
|
|
const showPassConf = () => {
|
|
setTypePassConf("text");
|
|
};
|
|
|
|
const hidePassConf = () => {
|
|
setTypePassConf("password");
|
|
};
|
|
|
|
const setValUsername = (e: any) => {
|
|
const uname = e.replaceAll(/[^\w.-]/g, "");
|
|
setValue("username", uname.toLowerCase());
|
|
};
|
|
|
|
const setValPassword = (e: any) => {
|
|
setValue("password", e);
|
|
setPassword(e);
|
|
};
|
|
|
|
const setValPasswordConf = (e: any) => {
|
|
setPasswordConf(e);
|
|
};
|
|
|
|
|
|
|
|
async function save(data: any) {
|
|
// loading();
|
|
let institutionId = 1;
|
|
|
|
if (Number(category) == 6) {
|
|
const dataInstitution =
|
|
isCustomActive == true
|
|
? {
|
|
name: customInstituteName,
|
|
address: institusiAddress,
|
|
categoryRoleId: Number(category),
|
|
}
|
|
: {
|
|
id: institusi,
|
|
address: institusiAddress,
|
|
};
|
|
|
|
console.log(dataInstitution);
|
|
|
|
const resInstitution = await saveInstitutes(dataInstitution);
|
|
|
|
institutionId = resInstitution?.data?.data?.id;
|
|
if (resInstitution?.error) {
|
|
error(resInstitution?.message);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// const sanitizedFirstName = sanitizeHtml(data.firstName);
|
|
|
|
// if (sanitizedFirstName == "") {
|
|
// error("Invalid Name");
|
|
// } else {
|
|
// const datas = {
|
|
// firstName: sanitizedFirstName,
|
|
// lastName: "",
|
|
// username: data.username,
|
|
// phoneNumber: data.phoneNumber,
|
|
// email,
|
|
// address: data.address,
|
|
// memberIdentity: userIdentity,
|
|
// provinceId: Number(data.provinsi),
|
|
// cityId: Number(data.kota),
|
|
// districtId: Number(data.kecamatan),
|
|
// password: data.password,
|
|
// instituteId: Number(institutionId),
|
|
// roleId: Number(category),
|
|
// };
|
|
|
|
// const response = await postRegistration(datas);
|
|
// console.log(response);
|
|
// if (response?.error) {
|
|
// error(response?.message);
|
|
// return false;
|
|
// }
|
|
|
|
// registerConfirm();
|
|
// return false;
|
|
// }
|
|
}
|
|
|
|
const handleJournalistCertificate = async () => {
|
|
const response = await getDataJournalist(journalistCertificate);
|
|
const data = response?.data?.data;
|
|
console.log(data);
|
|
if (data) {
|
|
setJournalistData(data[0]);
|
|
}
|
|
|
|
console.log("Data jurnalis:", data);
|
|
return data;
|
|
};
|
|
|
|
const handleDataNRP = async () => {
|
|
const response = await getDataPersonil(personilNRP);
|
|
const data = response?.data?.data;
|
|
setPersonilData(data);
|
|
console.log("Data personil:", data);
|
|
return data;
|
|
};
|
|
|
|
const handleInstituteOption = (e: any) => {
|
|
if (e.target.value == "0") {
|
|
setIsCustomActive(true);
|
|
} else {
|
|
setIsCustomActive(false);
|
|
setInstitusi(e.target.value);
|
|
}
|
|
};
|
|
|
|
// const {
|
|
// register,
|
|
// handleSubmit,
|
|
// watch,
|
|
// formState: { errors },
|
|
// } = useForm<Inputs>();
|
|
// const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
|
|
// console.log(watch("example"));
|
|
|
|
function setDataToForm() {
|
|
if (Number(category) == 6 && journalistData) {
|
|
setValue("firstName", journalistData.journalistName);
|
|
setValue("memberIdentity", journalistData.certNumber);
|
|
const selectedProvince = province.find(
|
|
(o: any) => o.provName == journalistData.province?.toUpperCase(),
|
|
);
|
|
|
|
if (selectedProvince !== undefined) {
|
|
setValue("provinsi", selectedProvince.id);
|
|
}
|
|
} else if (Number(category) == 7 && personilData) {
|
|
setValue("firstName", personilData.lastName);
|
|
setValue("memberIdentity", personilData.nrp);
|
|
}
|
|
}
|
|
|
|
|
|
async function onSubmit(data: any) {
|
|
|
|
console.log("Submit");
|
|
|
|
if (isValidPassword) {
|
|
MySwal.fire({
|
|
title: "Buat akun",
|
|
text: "",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "Buat",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
save(data);
|
|
}
|
|
});
|
|
} else {
|
|
error("Kata Sandi harus sama");
|
|
}
|
|
}
|
|
|
|
const handleIdentity = async (e: any) => {
|
|
const id = e;
|
|
console.log(id);
|
|
await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
|
|
if (Number(category) == 5) {
|
|
const reqId =
|
|
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
|
|
const response = await getDataByNIK(reqId, id);
|
|
const data = response?.data?.data_return[0];
|
|
|
|
console.log(data);
|
|
if (data !== undefined) {
|
|
setValue("firstName", data.nama_lengkap);
|
|
setValue("address", data.alamat);
|
|
const selectedProvince = province.find(
|
|
(o: any) => o.provName == data.prov?.toUpperCase(),
|
|
);
|
|
|
|
if (selectedProvince !== undefined) {
|
|
setValue("provinsi", selectedProvince.id);
|
|
}
|
|
|
|
const selectedCity: any = city.find(
|
|
(o: any) => o.cityName == data.kab_kota?.toUpperCase(),
|
|
);
|
|
|
|
if (selectedCity !== undefined) {
|
|
setValue("kota", selectedCity?.id);
|
|
}
|
|
|
|
const selectedDistrict: any = districts.find(
|
|
(o: any) => o.disName == data.kec?.toUpperCase(),
|
|
);
|
|
|
|
if (selectedDistrict !== undefined) {
|
|
setValue("kecamatan", selectedDistrict?.id);
|
|
}
|
|
}
|
|
} else if (Number(category) == 7) {
|
|
const reqId =
|
|
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
|
|
const response = await getDataByNRP(reqId, id);
|
|
const data = response?.data?.data_return[0];
|
|
|
|
console.log("Data :", data);
|
|
if (data !== undefined) {
|
|
setValue("firstName", data.nama);
|
|
setValue("address", data.lokasi);
|
|
}
|
|
}
|
|
};
|
|
|
|
const getCity = async (e: any) => {
|
|
const res = await listCity(e);
|
|
setCity(res?.data.data);
|
|
};
|
|
|
|
const getDistricts = async (e: any) => {
|
|
const res = await listDistricts(e);
|
|
setDistricts(res?.data.data);
|
|
};
|
|
|
|
const handleVerifyOTP = async () => {
|
|
const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;
|
|
|
|
if (email != "" && otp.length == 6) {
|
|
console.log("verify otp");
|
|
loading();
|
|
// const response = {
|
|
// message: "success",
|
|
// };
|
|
|
|
const response = await verifyOTP(email, otp);
|
|
if (response?.error) {
|
|
error(response?.message);
|
|
return false;
|
|
}
|
|
close();
|
|
// console.log(response);
|
|
if (response?.message == "success") {
|
|
console.log("success");
|
|
setStepThreeActive(true);
|
|
setFormProfile(true);
|
|
setOtpValidate("");
|
|
setValue("email", email);
|
|
setValue("memberIdentity", userIdentity);
|
|
handleIdentity(userIdentity);
|
|
setDataToForm();
|
|
} else {
|
|
setOtpValidate("Kode OTP Tidak Valid");
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
if (category != undefined) {
|
|
const resInstiution = await listInstitusi(category);
|
|
const res = await listProvince();
|
|
setInstitution(resInstiution?.data.data);
|
|
setProvince(res?.data.data);
|
|
}
|
|
}
|
|
|
|
initState();
|
|
}, [category]);
|
|
|
|
useEffect(() => {
|
|
function initState() {
|
|
for (const element of institution) {
|
|
const { id } = element;
|
|
|
|
if (id == institusi) {
|
|
setInstitusiAddress(element.address);
|
|
}
|
|
}
|
|
}
|
|
|
|
initState();
|
|
}, [institusi]);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
if (category != undefined) {
|
|
const resInstiution = await listInstitusi(category);
|
|
const res = await listProvince();
|
|
setInstitution(resInstiution?.data.data);
|
|
setProvince(res?.data.data);
|
|
}
|
|
}
|
|
|
|
initState();
|
|
}, [category]);
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
style={
|
|
Number(category) < 5
|
|
? {
|
|
display: "none",
|
|
}
|
|
: {}
|
|
}
|
|
>
|
|
<div className="flex gap-12 justify-center">
|
|
<div className="flex flex-row mt-4 mb-5">
|
|
<ul className="absolute border border-[#f32d2d] w-[235px]">
|
|
<li>
|
|
<div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active" : ""}`}>
|
|
<span>
|
|
<b>1</b>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active" : ""}`}>
|
|
<span>
|
|
<b>2</b>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepThreeActive ? "active" : ""}`}>
|
|
<span>
|
|
<b>3</b>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex flex-row">
|
|
<div className="gap-12"
|
|
style={
|
|
stepTwoActive && !formProfile
|
|
? {
|
|
display: "none",
|
|
}
|
|
: {}
|
|
}>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default page;
|