feat: update sign-up
This commit is contained in:
parent
6be42d03e4
commit
be22cfbee1
|
|
@ -63,6 +63,12 @@ export default function SignUp() {
|
||||||
const [certNumber, setCertNumber] = useState("");
|
const [certNumber, setCertNumber] = useState("");
|
||||||
const [membershipType, setMembershipType] = useState("");
|
const [membershipType, setMembershipType] = useState("");
|
||||||
const [nrp, setNrp] = 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 handleSendOtp = (e: React.FormEvent) => {
|
const handleSendOtp = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -154,8 +160,8 @@ export default function SignUp() {
|
||||||
<Label htmlFor="polri">POLRI</Label>
|
<Label htmlFor="polri">POLRI</Label>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<RadioGroupItem value="kpu" id="kpu" />
|
<RadioGroupItem value="tenant" id="tenant" />
|
||||||
<Label htmlFor="kpu">KPU</Label>
|
<Label htmlFor="tenant">Tenant</Label>
|
||||||
</div>
|
</div>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
|
|
||||||
|
|
@ -206,7 +212,102 @@ export default function SignUp() {
|
||||||
</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) */}
|
{/* Email Field (Selalu Ada, tapi posisi bergantung role) */}
|
||||||
|
{role !== "tenant" && (
|
||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
required
|
required
|
||||||
|
|
@ -215,6 +316,7 @@ export default function SignUp() {
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Note */}
|
{/* Note */}
|
||||||
<p className="text-xs text-gray-500 mb-4">
|
<p className="text-xs text-gray-500 mb-4">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue