fix: fixed registration landing

This commit is contained in:
sabdayagra 2025-01-14 21:58:15 +07:00
parent 43a1c59f71
commit 0d3f3bc2e7
3 changed files with 129 additions and 99 deletions

View File

@ -371,7 +371,7 @@ const FilterPage = () => {
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-96 h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter

View File

@ -96,10 +96,6 @@ const FilterPage = () => {
}
}, [categorie]);
// useEffect(() => {
// fetchData();
// }, [page, sortBy, sortByOpt, title]);
useEffect(() => {
async function initState() {
if (isRegional) {
@ -108,9 +104,8 @@ const FilterPage = () => {
getDataAll();
}
}
console.log(monthYearFilter, "monthFilter");
initState();
}, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
}, [locale, change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
async function getCategories() {
const category = await listCategory("2");
@ -290,7 +285,7 @@ const FilterPage = () => {
size: 6,
sortBy: "createdAt",
contentTypeId: "2",
isInt: locale == "en" ? true : false,
isInt: locale == "in" ? true : false,
});
console.log(response);
setVideoData(response?.data?.data?.content);

View File

@ -1,11 +1,11 @@
"use client";
import React from "react";
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 Image from "next/image";
import { close, error, loading, registerConfirm } from "@/config/swal";
import { Link, useRouter } from "@/i18n/routing";
import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
@ -52,7 +52,6 @@ const page = () => {
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);
@ -80,6 +79,14 @@ const page = () => {
const nSecondInMiliseconds = 1000;
const [, setRefreshTimer] = useState(false);
const [passwordType, setPasswordType] = React.useState("password");
const [passwordConf, setPasswordConf] = React.useState("password");
const togglePasswordType = () => {
setPasswordType((prevType) => (prevType === "password" ? "text" : "password"));
setPasswordConf((prevType) => (prevType === "same password" ? "text" : "same password"));
};
const validationSchema = Yup.object().shape({
firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
username: Yup.string().required("Username tidak boleh kosong"),
@ -106,22 +113,6 @@ const page = () => {
let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
let interval: any;
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());
@ -513,19 +504,6 @@ const page = () => {
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 (
<div className="overflow-y-auto flex flex-wrap w-full h-dvh">
<div className="lg:block hidden flex-1 overflow-hidden bg-black text-[40px] leading-[48px] text-default-600 relative z-[1]">
@ -618,10 +596,10 @@ const page = () => {
}
}
>
<label htmlFor="association" className="mb-3">
<label htmlFor="association" className="mb-2">
<b>Jenis Keanggotaan</b> <span className="text-red-500">*</span>
</label>
<select className={`py-3 rounded-md border border-black ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
<select className={`py-3 px-2 rounded-md border border-black ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
<option disabled selected>
Pilih Asosiasi
</option>
@ -645,7 +623,7 @@ const page = () => {
</div>
{Number(category) == 7 ? (
<div className="px-8">
<div className="px-[34px]">
<label htmlFor="userIdentity" className="mb-3">
<b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span>
</label>
@ -657,7 +635,7 @@ const page = () => {
)}
{Number(category) == 6 ? (
<div
className="px-8 mb-3"
className="px-[34px]"
style={
Number(category) == 6
? {}
@ -666,9 +644,9 @@ const page = () => {
}
}
>
<label htmlFor="journalistCertificate">
<b>Nomor Sertifikasi Wartawan</b> <span className="text-red-500">*</span>
</label>
<Label htmlFor="journalistCertificate">
Nomor Sertifikasi Wartawan <span className="text-red-500">*</span>
</Label>
<Input className="rounded-md py-3" autoComplete="off" placeholder="Masukan Nomor Sertifikasi" type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
</div>
) : (
@ -715,17 +693,18 @@ const page = () => {
</div>
</div>
<div className={`flex flex-col gap-3 my-4 px-12 ${formProfile == false ? "hidden" : ""}`}>
<div className={`flex flex-col px-12 ${formProfile == false ? "hidden" : ""}`}>
<div>
{Number(category) == 6 || Number(category) == 7 ? (
<div className="">
<label className="">
<b>{`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}</b> <span className="text-red-500">*</span>
<div className="px-[34px]">
<label className="mb-2">
{`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}
<span className="text-red-500">*</span>
</label>
<Input
type="text"
autoComplete="off"
className={` ${errors.memberIdentity ? "block" : ""}`}
className={`mb-3 ${errors.memberIdentity ? "block" : ""}`}
{...register("memberIdentity")}
placeholder="Masukan Nomor Identitas"
onChange={(e) => handleIdentity(e.target.value)}
@ -736,21 +715,21 @@ const page = () => {
) : (
""
)}
<div className="mb-4">
<div className="mb-4 px-[34px]">
<label className="mb-2">
<b>Nama Lengkap</b> <span className="text-red-500">*</span>
Nama Lengkap <span className="text-red-500">*</span>
</label>
<Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" />
<div className="text-red-500">{errors.firstName?.message}</div>
</div>
<div className="mb-4">
<div className="mb-4 px-[34px]">
<label className="mb-2">
<b>Username</b> <span className="text-red-500">*</span>
Username <span className="text-red-500">*</span>
</label>
<Input
type="text"
autoComplete="off"
className={`form-control ${errors.username ? "block" : ""}`}
className={`${errors.username ? "block" : ""}`}
{...register("username")}
placeholder="Masukan Username"
onChange={(e) => {
@ -765,35 +744,35 @@ const page = () => {
/>
<div className="text-red-500">{errors.username?.message}</div>
</div>
<div className="mb-4">
<div className="mb-4 px-[34px]">
<label className="mb-2">
<b>Email</b> <span className="text-red-500">*</span>
Email <span className="text-red-500">*</span>
</label>
<Input type="email" autoComplete="off" className={` ${errors.email ? "block" : ""}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
<Input type="email" autoComplete="off" className={`${errors.email ? "block" : ""}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
<div className="text-red-500">{errors.email?.message}</div>
</div>
</div>
<div className="flex flex-col">
<div className="flex flex-col px-[34px]">
<label className="mb-2">
<b>No. HP</b> <span className="text-red-500">*</span>
No. HP<span className="text-red-500">*</span>
</label>
<Input type="number" autoComplete="off" className={` ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
<Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
<div className="text-red-500">{errors.phoneNumber?.message}</div>
</div>
<div className="mb-4">
<div className="mb-4 px-[34px]">
<label htmlFor="address" className="mb-2">
<b>Alamat</b> <span className="text-red-500">*</span>
Alamat <span className="text-red-500">*</span>
</label>
<Textarea className={`form-control ${errors.address ? "block" : ""}`} {...register("address")} placeholder="Masukan Alamat Lengkap Anda" rows={3} />
<div className="text-red-500">{errors.address?.message}</div>
</div>
{Number(category) == 6 ? (
<div className="flex flex-col gap-3">
<div className="">
<div className="flex flex-col gap-3 px-[34px]">
<div className="flex flex-col mb-2">
<label htmlFor="provinsi">
<b>Pilih Institusi</b> <span className="text-red-500">*</span>
Institusi <span className="text-red-500">*</span>
</label>
<select className="" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
<select className="mb-3 py-2" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
<option disabled selected>
Pilih Institusi
</option>
@ -808,7 +787,7 @@ const page = () => {
</select>
</div>
<div
className=""
className="px-[34px]"
style={
isCustomActive == false
? {
@ -818,25 +797,25 @@ const page = () => {
}
>
<label htmlFor="alamat" className="mb-2">
<b>Nama Institusi</b> <span className="text-red-500">*</span>
Nama Institusi <span className="text-red-500">*</span>
</label>
<Input className="" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
<Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
</div>
<div className="">
<label htmlFor="alamat" className="">
<b>Alamat Institusi</b> <span className="text-red-500">*</span>
<label htmlFor="alamat" className="mb-2">
Alamat Institusi <span className="text-red-500">*</span>
</label>
<Textarea className="" placeholder="Masukan Alamat Lengkap Institusi Anda" rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
<Textarea className="mb-3" placeholder="Masukan Alamat Lengkap Institusi Anda" rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
</div>
</div>
) : (
""
)}
<div className="flex flex-col">
<div className="flex flex-col px-[34px]">
<label htmlFor="provinsi" className="mb-2">
<b>Provinsi</b> <span className="text-red-500">*</span>
Provinsi <span className="text-red-500">*</span>
</label>
<select className={` ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}>
<select className={`mb-3 py-2 ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}>
<option disabled selected>
Pilih Provinsi
</option>
@ -848,11 +827,11 @@ const page = () => {
</select>
<div className="text-red-500">{errors.provinsi?.message}</div>
</div>
<div className="flex flex-col">
<div className="flex flex-col px-[34px]">
<label htmlFor="kota" className="mb-2">
<b>Kota/Kabupaten</b> <span className="text-red-500">*</span>
Kota/Kabupaten <span className="text-red-500">*</span>
</label>
<select className={` ${errors.kota ? "block" : ""}`} {...register("kota")} id="kota" onChange={(event) => getDistricts(event.target.value)}>
<select className={`mb-3 py-2 ${errors.kota ? "block" : ""}`} {...register("kota")} id="kota" onChange={(event) => getDistricts(event.target.value)}>
<option disabled selected>
Pilih Kota/Kabupaten
</option>
@ -864,11 +843,11 @@ const page = () => {
</select>
<div className="text-red-500">{errors.kota?.message}</div>
</div>
<div className="flex flex-col">
<div className="flex flex-col px-[34px]">
<label htmlFor="kecamatan" className="mb-2">
<b>Kecamatan</b> <span className="text-red-500">*</span>
Kecamatan <span className="text-red-500">*</span>
</label>
<select className={` ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
<select className={`py-2 ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
<option disabled selected>
Pilih Kecamatan
</option>
@ -880,7 +859,7 @@ const page = () => {
</select>
<div className="text-red-500">{errors.kecamatan?.message}</div>
</div>
<div className="flex flex-col">
{/* <div className="flex flex-col">
<label htmlFor="password" className="mb-2">
<b>Kata Sandi</b> <span className="text-red-500">*</span>
</label>
@ -900,16 +879,45 @@ const page = () => {
setValPassword(e.target.value.trim());
}}
required
/>
<div className="text-red-500">{errors.password?.message}</div>
<a className={`text-black ${typePass == "text" ? "hidden" : ""}`} onClick={showPass}>
/>{" "}
<a className={`text-black place-items-end -top-44 ${typePass == "text" ? "hidden" : ""}`} onClick={showPass}>
<Icon icon="fa:eye" />
</a>
<a className={`text-black ${typePass == "password" ? "hidden" : ""}`} onClick={hidePass}>
<Icon icon="fa:eye-slash" />
</a>
<div className="text-red-500">{errors.password?.message}</div>
</div> */}
<div className="mt-3.5 space-y-2 px-[34px]">
<Label htmlFor="password" className="mb-2 font-medium text-default-600">
Kata Sandi <span className="text-red-500">*</span>
</Label>
<div className="relative">
<Input
size="lg"
type={passwordType}
autoComplete="off"
className={` ${errors.password ? "block" : ""}`}
{...register("password")}
placeholder="Masukan Kata Sandi"
onChange={(e) => {
setValPassword(e.target.value.trim());
}}
onPaste={(e: any) => {
setValPassword(e.target.value.trim());
}}
onCopy={(e: any) => {
setValPassword(e.target.value.trim());
}}
required
/>
<div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
{passwordType === "password" ? <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" /> : <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />}{" "}
</div>
</div>
{errors.password?.message && <div className="text-destructive mt-2 text-sm">{errors.password.message}</div>}
</div>
<div className="flex flex-col">
{/* <div className="flex flex-col">
<label htmlFor="password" className="mb-2">
<b>Konfirmasi Kata Sandi</b> <span className="text-red-500">*</span>
</label>
@ -937,8 +945,37 @@ const page = () => {
<a className={`text-dark show-pass ${typePassConf == "password" ? "hidden" : ""}`} onClick={hidePassConf}>
<Icon icon="fa:eye-slash" />
</a>
</div> */}
<div className="mt-3.5 space-y-2 px-[34px]">
<Label htmlFor="password" className="mb-2 font-medium text-default-600">
Konfirmasi Kata Sandi <span className="text-red-500">*</span>
</Label>
<div className="relative">
<Input
size="lg"
type={passwordConf}
autoComplete="off"
className={` ${errors.passwordConf ? "block" : ""}`}
{...register("passwordConf")}
placeholder="Masukan Kata Sandi yang Sama"
onChange={(e) => {
setValPasswordConf(e.target.value.trim());
}}
onPaste={(e: any) => {
setValPasswordConf(e.target.value.trim());
}}
onCopy={(e: any) => {
setValPasswordConf(e.target.value.trim());
}}
required
/>
<div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
{passwordConf === "same password" ? <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" /> : <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />}{" "}
</div>
</div>
<div className="text-red-500">{warningPassConf}</div>
</div>
<div className="form-group">
<div className="form-group px-[34px]">
<PasswordChecklist
rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8}
@ -959,7 +996,7 @@ const page = () => {
</div>
<div
className="flex flex-col mt-8 mb-2 px-12"
className="flex flex-col mt-8 mb-2"
style={
(stepOneActive && !stepTwoActive) || stepThreeActive
? {}
@ -968,7 +1005,7 @@ const page = () => {
}
}
>
<div className="text-center mb-2">
<div className="text-center mb-2 px-[34px]">
<p>
Dengan mendaftar, saya telah menyetujui <br />{" "}
<a href="/privacy" target="_blank" className="text-red-500">
@ -980,10 +1017,10 @@ const page = () => {
</a>
</p>
</div>
<div className={`mb-5 mt-7 w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
<div className={`mb-5 mt-7 px-[34px] w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
{/* <a className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-full" onClick={() => handleSendOTP()}> */}
<a
className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-[400px]"
className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-[550px]"
onClick={() => {
setStepOneActive(false);
setStepTwoActive(true);
@ -994,7 +1031,7 @@ const page = () => {
</div>
</div>
<div
className="flex flex-row mt-2 mb-4"
className="flex justify-center items-center mt-2 mb-4 px-[34px]"
style={
formProfile == false
? {
@ -1003,11 +1040,9 @@ const page = () => {
: {}
}
>
<div className="text-center">
<button type="submit" className="border border-red-500 text-red-500">
Daftar
</button>
</div>
<Button type="submit" className="border w-[550px] text-center bg-red-700 text-white hover:bg-white hover:text-red-700 ">
Daftar
</Button>
</div>
</div>
</form>