feat: completely layouting and implement auth page for pengelola s-yet
This commit is contained in:
pahmiudahgede
parent
7a13a2c0a9
commit
d6edf470b2
|
|
@ -0,0 +1,97 @@
|
|||
import { Link } from "@remix-run/react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { UserPlus, LogIn, Building, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function AuthPengelolaIndex() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Welcome Card */}
|
||||
<Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">
|
||||
Selamat Datang di WasteFlow
|
||||
</CardTitle>
|
||||
<CardDescription className="text-base">
|
||||
Platform Pengelolaan Sampah untuk Bisnis Anda
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Benefits */}
|
||||
<div className="grid gap-3">
|
||||
<div className="flex items-center space-x-3 text-sm">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span>Kelola operasional sampah secara digital</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 text-sm">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span>Monitoring real-time armada dan pegawai</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 text-sm">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span>Laporan analytics dan insights</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 text-sm">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span>Koordinasi tim yang efisien</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="space-y-4">
|
||||
{/* Register Button */}
|
||||
<Link to="/authpengelola/requestotpforregister">
|
||||
<Button className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg">
|
||||
<UserPlus className="mr-2 h-5 w-5" />
|
||||
Daftar Sebagai Pengelola Baru
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* Login Button */}
|
||||
<Link to="/authpengelola/requestotpforlogin">
|
||||
<Button variant="outline" className="w-full h-12 border-2 hover:bg-gray-50">
|
||||
<LogIn className="mr-2 h-5 w-5" />
|
||||
Sudah Punya Akun? Masuk
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Building className="h-5 w-5 text-blue-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800">
|
||||
Khusus Pengelola Sampah
|
||||
</p>
|
||||
<p className="text-xs text-blue-700 mt-1">
|
||||
Platform ini diperuntukkan bagi perusahaan atau koperasi
|
||||
pengelolaan sampah yang membutuhkan sistem manajemen digital.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Contact */}
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-gray-500">
|
||||
Butuh bantuan? Hubungi Administrator
|
||||
</p>
|
||||
<a
|
||||
href="tel:+6281234567890"
|
||||
className="text-sm text-green-600 hover:text-green-800 font-medium"
|
||||
>
|
||||
+62 812-3456-7890
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,548 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import {
|
||||
Form,
|
||||
useActionData,
|
||||
useLoaderData,
|
||||
useNavigation,
|
||||
Link
|
||||
} from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "~/components/ui/select";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
Building,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
MapPin,
|
||||
User,
|
||||
FileText,
|
||||
Phone
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component
|
||||
const ProgressIndicator = ({ currentStep = 3, totalSteps = 5 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg"
|
||||
: isCompleted
|
||||
? "bg-green-100 text-green-600 border-2 border-green-200"
|
||||
: "bg-gray-100 text-gray-400 border-2 border-gray-200"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 ${
|
||||
stepNumber < currentStep ? "bg-green-400" : "bg-gray-200"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interfaces
|
||||
interface LoaderData {
|
||||
phone: string;
|
||||
}
|
||||
|
||||
interface CompanyProfileActionData {
|
||||
errors?: {
|
||||
companyName?: string;
|
||||
ownerName?: string;
|
||||
companyType?: string;
|
||||
address?: string;
|
||||
city?: string;
|
||||
postalCode?: string;
|
||||
businessType?: string;
|
||||
employeeCount?: string;
|
||||
serviceArea?: string;
|
||||
general?: string;
|
||||
};
|
||||
success?: boolean;
|
||||
}
|
||||
|
||||
export const loader = async ({
|
||||
request
|
||||
}: LoaderFunctionArgs): Promise<Response> => {
|
||||
const url = new URL(request.url);
|
||||
const phone = url.searchParams.get("phone");
|
||||
|
||||
if (!phone) {
|
||||
return redirect("/authpengelola/requestotpforregister");
|
||||
}
|
||||
|
||||
return json<LoaderData>({ phone });
|
||||
};
|
||||
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const phone = formData.get("phone") as string;
|
||||
|
||||
// Extract form data
|
||||
const companyData = {
|
||||
companyName: formData.get("companyName") as string,
|
||||
ownerName: formData.get("ownerName") as string,
|
||||
companyType: formData.get("companyType") as string,
|
||||
address: formData.get("address") as string,
|
||||
city: formData.get("city") as string,
|
||||
postalCode: formData.get("postalCode") as string,
|
||||
businessType: formData.get("businessType") as string,
|
||||
employeeCount: formData.get("employeeCount") as string,
|
||||
serviceArea: formData.get("serviceArea") as string,
|
||||
description: formData.get("description") as string
|
||||
};
|
||||
|
||||
// Validation
|
||||
const errors: { [key: string]: string } = {};
|
||||
|
||||
if (!companyData.companyName?.trim()) {
|
||||
errors.companyName = "Nama perusahaan wajib diisi";
|
||||
}
|
||||
|
||||
if (!companyData.ownerName?.trim()) {
|
||||
errors.ownerName = "Nama pemilik/direktur wajib diisi";
|
||||
}
|
||||
|
||||
if (!companyData.companyType) {
|
||||
errors.companyType = "Jenis badan usaha wajib dipilih";
|
||||
}
|
||||
|
||||
if (!companyData.address?.trim()) {
|
||||
errors.address = "Alamat lengkap wajib diisi";
|
||||
}
|
||||
|
||||
if (!companyData.city?.trim()) {
|
||||
errors.city = "Kota wajib diisi";
|
||||
}
|
||||
|
||||
if (!companyData.postalCode?.trim()) {
|
||||
errors.postalCode = "Kode pos wajib diisi";
|
||||
} else if (!/^\d{5}$/.test(companyData.postalCode)) {
|
||||
errors.postalCode = "Kode pos harus 5 digit angka";
|
||||
}
|
||||
|
||||
if (!companyData.businessType) {
|
||||
errors.businessType = "Jenis usaha wajib dipilih";
|
||||
}
|
||||
|
||||
if (!companyData.employeeCount) {
|
||||
errors.employeeCount = "Jumlah karyawan wajib dipilih";
|
||||
}
|
||||
|
||||
if (!companyData.serviceArea?.trim()) {
|
||||
errors.serviceArea = "Area layanan wajib diisi";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<CompanyProfileActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi menyimpan data - dalam implementasi nyata, simpan ke database
|
||||
try {
|
||||
console.log("Saving company profile:", { phone, ...companyData });
|
||||
|
||||
// Simulasi delay API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// Redirect ke step berikutnya
|
||||
return redirect(
|
||||
`/authpengelola/waitingapprovalfromadministrator?phone=${encodeURIComponent(
|
||||
phone
|
||||
)}`
|
||||
);
|
||||
} catch (error) {
|
||||
return json<CompanyProfileActionData>(
|
||||
{
|
||||
errors: { general: "Gagal menyimpan data. Silakan coba lagi." }
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function CompletingCompanyProfile() {
|
||||
const { phone } = useLoaderData<LoaderData>();
|
||||
const actionData = useActionData<CompanyProfileActionData>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<ProgressIndicator currentStep={3} totalSteps={5} />
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 rounded-full w-fit">
|
||||
<Building className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Profil Perusahaan
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Lengkapi informasi perusahaan untuk verifikasi admin
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.general && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{actionData.errors.general}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<Form method="post" className="space-y-6">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
|
||||
{/* Company Information Section */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Building className="h-5 w-5 text-gray-600" />
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Informasi Perusahaan
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Company Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="companyName">Nama Perusahaan *</Label>
|
||||
<Input
|
||||
id="companyName"
|
||||
name="companyName"
|
||||
type="text"
|
||||
placeholder="PT/CV/Koperasi Nama Perusahaan"
|
||||
className={
|
||||
actionData?.errors?.companyName ? "border-red-500" : ""
|
||||
}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.companyName && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.companyName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Owner Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ownerName">Nama Pemilik/Direktur *</Label>
|
||||
<Input
|
||||
id="ownerName"
|
||||
name="ownerName"
|
||||
type="text"
|
||||
placeholder="Nama lengkap pemilik atau direktur"
|
||||
className={
|
||||
actionData?.errors?.ownerName ? "border-red-500" : ""
|
||||
}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.ownerName && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.ownerName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Company Type */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="companyType">Jenis Badan Usaha *</Label>
|
||||
<Select name="companyType" required>
|
||||
<SelectTrigger
|
||||
className={
|
||||
actionData?.errors?.companyType ? "border-red-500" : ""
|
||||
}
|
||||
>
|
||||
<SelectValue placeholder="Pilih jenis badan usaha" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="pt">PT (Perseroan Terbatas)</SelectItem>
|
||||
<SelectItem value="cv">
|
||||
CV (Commanditaire Vennootschap)
|
||||
</SelectItem>
|
||||
<SelectItem value="koperasi">Koperasi</SelectItem>
|
||||
<SelectItem value="ud">UD (Usaha Dagang)</SelectItem>
|
||||
<SelectItem value="firma">Firma</SelectItem>
|
||||
<SelectItem value="yayasan">Yayasan</SelectItem>
|
||||
<SelectItem value="other">Lainnya</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{actionData?.errors?.companyType && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.companyType}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Section */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<MapPin className="h-5 w-5 text-gray-600" />
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Alamat Perusahaan
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="address">Alamat Lengkap *</Label>
|
||||
<Textarea
|
||||
id="address"
|
||||
name="address"
|
||||
placeholder="Jalan, nomor, RT/RW, Kelurahan, Kecamatan"
|
||||
className={
|
||||
actionData?.errors?.address ? "border-red-500" : ""
|
||||
}
|
||||
rows={3}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.address && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.address}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* City and Postal Code */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="city">Kota *</Label>
|
||||
<Input
|
||||
id="city"
|
||||
name="city"
|
||||
type="text"
|
||||
placeholder="Jakarta/Bandung/Surabaya/dll"
|
||||
className={actionData?.errors?.city ? "border-red-500" : ""}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.city && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.city}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="postalCode">Kode Pos *</Label>
|
||||
<Input
|
||||
id="postalCode"
|
||||
name="postalCode"
|
||||
type="text"
|
||||
placeholder="12345"
|
||||
maxLength={5}
|
||||
className={
|
||||
actionData?.errors?.postalCode ? "border-red-500" : ""
|
||||
}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.postalCode && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.postalCode}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Business Information Section */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<FileText className="h-5 w-5 text-gray-600" />
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Informasi Usaha
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Business Type */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="businessType">
|
||||
Jenis Usaha Pengelolaan Sampah *
|
||||
</Label>
|
||||
<Select name="businessType" required>
|
||||
<SelectTrigger
|
||||
className={
|
||||
actionData?.errors?.businessType ? "border-red-500" : ""
|
||||
}
|
||||
>
|
||||
<SelectValue placeholder="Pilih jenis usaha" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="collection">
|
||||
Pengumpulan & Pengangkutan
|
||||
</SelectItem>
|
||||
<SelectItem value="processing">
|
||||
Pengolahan & Daur Ulang
|
||||
</SelectItem>
|
||||
<SelectItem value="disposal">Pembuangan Akhir</SelectItem>
|
||||
<SelectItem value="integrated">
|
||||
Terintegrasi (Semua Layanan)
|
||||
</SelectItem>
|
||||
<SelectItem value="consulting">
|
||||
Konsultan Pengelolaan Sampah
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{actionData?.errors?.businessType && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.businessType}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Employee Count */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="employeeCount">Jumlah Karyawan *</Label>
|
||||
<Select name="employeeCount" required>
|
||||
<SelectTrigger
|
||||
className={
|
||||
actionData?.errors?.employeeCount ? "border-red-500" : ""
|
||||
}
|
||||
>
|
||||
<SelectValue placeholder="Pilih jumlah karyawan" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1-5">1-5 orang</SelectItem>
|
||||
<SelectItem value="6-10">6-10 orang</SelectItem>
|
||||
<SelectItem value="11-25">11-25 orang</SelectItem>
|
||||
<SelectItem value="26-50">26-50 orang</SelectItem>
|
||||
<SelectItem value="51-100">51-100 orang</SelectItem>
|
||||
<SelectItem value="100+">Lebih dari 100 orang</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{actionData?.errors?.employeeCount && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.employeeCount}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Service Area */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="serviceArea">Area Layanan *</Label>
|
||||
<Input
|
||||
id="serviceArea"
|
||||
name="serviceArea"
|
||||
type="text"
|
||||
placeholder="Jakarta Utara, Bekasi, Tangerang, dll"
|
||||
className={
|
||||
actionData?.errors?.serviceArea ? "border-red-500" : ""
|
||||
}
|
||||
required
|
||||
/>
|
||||
{actionData?.errors?.serviceArea && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.serviceArea}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Deskripsi Usaha (Opsional)</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
placeholder="Ceritakan lebih detail tentang usaha pengelolaan sampah Anda..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-yellow-800">
|
||||
Informasi Penting
|
||||
</p>
|
||||
<p className="text-xs text-yellow-700 mt-1">
|
||||
Data yang Anda masukkan akan diverifikasi oleh
|
||||
administrator. Pastikan semua informasi akurat dan sesuai
|
||||
dengan dokumen perusahaan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Menyimpan Profil...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Lanjutkan ke Verifikasi
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to={`/authpengelola/verifyotptoregister?phone=${encodeURIComponent(
|
||||
phone
|
||||
)}`}
|
||||
className="inline-flex items-center text-sm text-gray-600 hover:text-green-600 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-4 w-4" />
|
||||
Kembali ke verifikasi OTP
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,505 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import {
|
||||
Form,
|
||||
useActionData,
|
||||
useLoaderData,
|
||||
useNavigation
|
||||
} from "@remix-run/react";
|
||||
import { useState, useRef } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
Shield,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Sparkles
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component
|
||||
const ProgressIndicator = ({ currentStep = 5, totalSteps = 5 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg"
|
||||
: isCompleted
|
||||
? "bg-green-100 text-green-600 border-2 border-green-200"
|
||||
: "bg-gray-100 text-gray-400 border-2 border-gray-200"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 ${
|
||||
stepNumber < currentStep ? "bg-green-400" : "bg-gray-200"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interfaces
|
||||
interface LoaderData {
|
||||
phone: string;
|
||||
approvedAt: string;
|
||||
}
|
||||
|
||||
interface CreatePINActionData {
|
||||
errors?: {
|
||||
pin?: string;
|
||||
confirmPin?: string;
|
||||
general?: string;
|
||||
};
|
||||
success?: boolean;
|
||||
}
|
||||
|
||||
export const loader = async ({
|
||||
request
|
||||
}: LoaderFunctionArgs): Promise<Response> => {
|
||||
const url = new URL(request.url);
|
||||
const phone = url.searchParams.get("phone");
|
||||
|
||||
if (!phone) {
|
||||
return redirect("/authpengelola/requestotpforregister");
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
phone,
|
||||
approvedAt: new Date().toISOString()
|
||||
});
|
||||
};
|
||||
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const phone = formData.get("phone") as string;
|
||||
const pin = formData.get("pin") as string;
|
||||
const confirmPin = formData.get("confirmPin") as string;
|
||||
|
||||
// Validation
|
||||
const errors: { pin?: string; confirmPin?: string; general?: string } = {};
|
||||
|
||||
if (!pin || pin.length !== 6) {
|
||||
errors.pin = "PIN harus 6 digit";
|
||||
} else if (!/^\d{6}$/.test(pin)) {
|
||||
errors.pin = "PIN hanya boleh berisi angka";
|
||||
} else if (/^(.)\1{5}$/.test(pin)) {
|
||||
errors.pin = "PIN tidak boleh angka yang sama semua (111111)";
|
||||
} else if (pin === "123456" || pin === "654321" || pin === "000000") {
|
||||
errors.pin = "PIN terlalu mudah ditebak, gunakan kombinasi yang lebih aman";
|
||||
}
|
||||
|
||||
if (!confirmPin) {
|
||||
errors.confirmPin = "Konfirmasi PIN wajib diisi";
|
||||
} else if (pin !== confirmPin) {
|
||||
errors.confirmPin = "PIN dan konfirmasi PIN tidak sama";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<CreatePINActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi menyimpan PIN - dalam implementasi nyata, hash dan simpan ke database
|
||||
try {
|
||||
console.log("Creating PIN for phone:", phone);
|
||||
|
||||
// Simulasi delay API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// Redirect ke dashboard pengelola setelah berhasil
|
||||
return redirect("/pengelola/dashboard");
|
||||
} catch (error) {
|
||||
return json<CreatePINActionData>(
|
||||
{
|
||||
errors: { general: "Gagal membuat PIN. Silakan coba lagi." }
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function CreateANewPIN() {
|
||||
const { phone, approvedAt } = useLoaderData<LoaderData>();
|
||||
const actionData = useActionData<CreatePINActionData>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const [pin, setPin] = useState(["", "", "", "", "", ""]);
|
||||
const [confirmPin, setConfirmPin] = useState(["", "", "", "", "", ""]);
|
||||
const [showPin, setShowPin] = useState(false);
|
||||
const [pinStrength, setPinStrength] = useState(0);
|
||||
|
||||
const pinRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
const confirmPinRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
// Handle PIN input change
|
||||
const handlePinChange = (
|
||||
index: number,
|
||||
value: string,
|
||||
isConfirm: boolean = false
|
||||
) => {
|
||||
if (!/^\d*$/.test(value)) return; // Only allow digits
|
||||
|
||||
const newPin = isConfirm ? [...confirmPin] : [...pin];
|
||||
newPin[index] = value;
|
||||
|
||||
if (isConfirm) {
|
||||
setConfirmPin(newPin);
|
||||
} else {
|
||||
setPin(newPin);
|
||||
calculatePinStrength(newPin.join(""));
|
||||
}
|
||||
|
||||
// Auto-focus next input
|
||||
if (value && index < 5) {
|
||||
const refs = isConfirm ? confirmPinRefs : pinRefs;
|
||||
refs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle key down (backspace)
|
||||
const handleKeyDown = (
|
||||
index: number,
|
||||
e: React.KeyboardEvent,
|
||||
isConfirm: boolean = false
|
||||
) => {
|
||||
if (e.key === "Backspace") {
|
||||
const currentPin = isConfirm ? confirmPin : pin;
|
||||
const refs = isConfirm ? confirmPinRefs : pinRefs;
|
||||
|
||||
if (!currentPin[index] && index > 0) {
|
||||
refs.current[index - 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate PIN strength
|
||||
const calculatePinStrength = (pinValue: string) => {
|
||||
if (pinValue.length < 6) {
|
||||
setPinStrength(0);
|
||||
return;
|
||||
}
|
||||
|
||||
let strength = 0;
|
||||
|
||||
// Check for sequential numbers
|
||||
const isSequential =
|
||||
/012345|123456|234567|345678|456789|987654|876543|765432|654321|543210/.test(
|
||||
pinValue
|
||||
);
|
||||
if (!isSequential) strength += 25;
|
||||
|
||||
// Check for repeated numbers
|
||||
const hasRepeated = /(.)\1{2,}/.test(pinValue);
|
||||
if (!hasRepeated) strength += 25;
|
||||
|
||||
// Check for common patterns
|
||||
const isCommon = [
|
||||
"123456",
|
||||
"654321",
|
||||
"111111",
|
||||
"000000",
|
||||
"222222",
|
||||
"333333",
|
||||
"444444",
|
||||
"555555",
|
||||
"666666",
|
||||
"777777",
|
||||
"888888",
|
||||
"999999"
|
||||
].includes(pinValue);
|
||||
if (!isCommon) strength += 25;
|
||||
|
||||
// Check for variety
|
||||
const uniqueDigits = new Set(pinValue.split("")).size;
|
||||
if (uniqueDigits >= 4) strength += 25;
|
||||
|
||||
setPinStrength(strength);
|
||||
};
|
||||
|
||||
// Get strength color and text
|
||||
const getStrengthInfo = () => {
|
||||
if (pinStrength === 0)
|
||||
return {
|
||||
color: "bg-gray-200",
|
||||
text: "Masukkan PIN",
|
||||
textColor: "text-gray-500"
|
||||
};
|
||||
if (pinStrength <= 25)
|
||||
return { color: "bg-red-500", text: "Lemah", textColor: "text-red-600" };
|
||||
if (pinStrength <= 50)
|
||||
return {
|
||||
color: "bg-yellow-500",
|
||||
text: "Sedang",
|
||||
textColor: "text-yellow-600"
|
||||
};
|
||||
if (pinStrength <= 75)
|
||||
return {
|
||||
color: "bg-blue-500",
|
||||
text: "Bagus",
|
||||
textColor: "text-blue-600"
|
||||
};
|
||||
return {
|
||||
color: "bg-green-500",
|
||||
text: "Sangat Kuat",
|
||||
textColor: "text-green-600"
|
||||
};
|
||||
};
|
||||
|
||||
const strengthInfo = getStrengthInfo();
|
||||
const fullPin = pin.join("");
|
||||
const fullConfirmPin = confirmPin.join("");
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<ProgressIndicator currentStep={5} totalSteps={5} />
|
||||
|
||||
{/* Success Alert */}
|
||||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<CheckCircle className="h-6 w-6 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800">
|
||||
Selamat! Akun Anda Telah Disetujui
|
||||
</p>
|
||||
<p className="text-sm text-green-700">
|
||||
Administrator telah memverifikasi dan menyetujui aplikasi Anda
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 rounded-full w-fit">
|
||||
<Shield className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Buat PIN Keamanan
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Langkah terakhir untuk mengamankan akun Anda
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.general && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{actionData.errors.general}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<Form method="post" className="space-y-6">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
<input type="hidden" name="pin" value={fullPin} />
|
||||
<input type="hidden" name="confirmPin" value={fullConfirmPin} />
|
||||
|
||||
{/* PIN Input */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base font-medium">PIN 6 Digit</Label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showPin ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-3">
|
||||
{pin.map((digit, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
ref={(el) => (pinRefs.current[index] = el)}
|
||||
type={showPin ? "text" : "password"}
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) => handlePinChange(index, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
className={`w-12 h-12 text-center text-lg font-bold ${
|
||||
actionData?.errors?.pin ? "border-red-500" : ""
|
||||
}`}
|
||||
autoFocus={index === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{actionData?.errors?.pin && (
|
||||
<p className="text-sm text-red-600 text-center">
|
||||
{actionData.errors.pin}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* PIN Strength Indicator */}
|
||||
{fullPin.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Kekuatan PIN</span>
|
||||
<span
|
||||
className={`text-sm font-medium ${strengthInfo.textColor}`}
|
||||
>
|
||||
{strengthInfo.text}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all duration-300 ${strengthInfo.color}`}
|
||||
style={{ width: `${pinStrength}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm PIN Input */}
|
||||
<div className="space-y-4">
|
||||
<Label className="text-base font-medium">Konfirmasi PIN</Label>
|
||||
|
||||
<div className="flex justify-center space-x-3">
|
||||
{confirmPin.map((digit, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
ref={(el) => (confirmPinRefs.current[index] = el)}
|
||||
type={showPin ? "text" : "password"}
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) =>
|
||||
handlePinChange(index, e.target.value, true)
|
||||
}
|
||||
onKeyDown={(e) => handleKeyDown(index, e, true)}
|
||||
className={`w-12 h-12 text-center text-lg font-bold ${
|
||||
actionData?.errors?.confirmPin ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{actionData?.errors?.confirmPin && (
|
||||
<p className="text-sm text-red-600 text-center">
|
||||
{actionData.errors.confirmPin}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* PIN Match Indicator */}
|
||||
{fullPin.length === 6 && fullConfirmPin.length === 6 && (
|
||||
<div className="text-center">
|
||||
{fullPin === fullConfirmPin ? (
|
||||
<div className="flex items-center justify-center space-x-2 text-green-600">
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">PIN cocok</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2 text-red-600">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">
|
||||
PIN tidak cocok
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* PIN Guidelines */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Lock className="h-5 w-5 text-blue-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800 mb-2">
|
||||
Tips PIN yang Aman:
|
||||
</p>
|
||||
<ul className="text-xs text-blue-700 space-y-1">
|
||||
<li>• Hindari angka berurutan (123456, 654321)</li>
|
||||
<li>• Jangan gunakan angka yang sama semua (111111)</li>
|
||||
<li>• Hindari kombinasi mudah ditebak (000000, 123456)</li>
|
||||
<li>• Gunakan kombinasi angka yang hanya Anda ketahui</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={
|
||||
isSubmitting ||
|
||||
fullPin.length !== 6 ||
|
||||
fullConfirmPin.length !== 6 ||
|
||||
fullPin !== fullConfirmPin ||
|
||||
pinStrength < 50
|
||||
}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Membuat Akun...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="mr-2 h-5 w-5" />
|
||||
Selesaikan Registrasi
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
{/* Final Note */}
|
||||
<div className="p-4 bg-gradient-to-r from-green-50 to-blue-50 border border-green-200 rounded-lg">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-gray-800 mb-1">
|
||||
🎉 Hampir selesai!
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
Setelah membuat PIN, Anda akan langsung dapat mengakses
|
||||
dashboard pengelola
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
import { json, redirect, type ActionFunctionArgs } from "@remix-run/node";
|
||||
import { Form, useActionData, useNavigation, Link } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
Phone,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
CheckCircle,
|
||||
LogIn,
|
||||
Shield
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component untuk Login (3 steps)
|
||||
const LoginProgressIndicator = ({ currentStep = 1, totalSteps = 3 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg scale-105"
|
||||
: isCompleted
|
||||
? "bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 border-2 border-green-200 dark:border-green-700"
|
||||
: "bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border-2 border-gray-200 dark:border-gray-700"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 transition-all duration-300 ${
|
||||
stepNumber < currentStep
|
||||
? "bg-green-400 dark:bg-green-500"
|
||||
: "bg-gray-200 dark:bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interface untuk action response
|
||||
interface RequestOTPLoginActionData {
|
||||
errors?: {
|
||||
phone?: string;
|
||||
general?: string;
|
||||
};
|
||||
success?: boolean;
|
||||
}
|
||||
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const phone = formData.get("phone") as string;
|
||||
|
||||
// Validation
|
||||
const errors: { phone?: string; general?: string } = {};
|
||||
|
||||
if (!phone) {
|
||||
errors.phone = "Nomor WhatsApp wajib diisi";
|
||||
} else {
|
||||
// Validasi format nomor HP Indonesia
|
||||
const phoneRegex = /^62[0-9]{9,14}$/;
|
||||
if (!phoneRegex.test(phone)) {
|
||||
errors.phone = "Format: 628xxxxxxxxx (9-14 digit setelah 62)";
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<RequestOTPLoginActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi cek apakah nomor terdaftar
|
||||
const registeredPhones = ["6281234567890", "6281234567891", "6281234567892"];
|
||||
if (!registeredPhones.includes(phone)) {
|
||||
return json<RequestOTPLoginActionData>(
|
||||
{
|
||||
errors: {
|
||||
phone: "Nomor tidak terdaftar. Silakan daftar terlebih dahulu."
|
||||
}
|
||||
},
|
||||
{ status: 404 }
|
||||
);
|
||||
}
|
||||
|
||||
// Simulasi kirim OTP - dalam implementasi nyata, integrate dengan WhatsApp Business API
|
||||
try {
|
||||
console.log("Sending login OTP to WhatsApp:", phone);
|
||||
|
||||
// Simulasi delay API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// Redirect ke step berikutnya dengan nomor HP
|
||||
return redirect(
|
||||
`/authpengelola/verifyotptologin?phone=${encodeURIComponent(phone)}`
|
||||
);
|
||||
} catch (error) {
|
||||
return json<RequestOTPLoginActionData>(
|
||||
{
|
||||
errors: { general: "Gagal mengirim OTP. Silakan coba lagi." }
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function RequestOTPForLogin() {
|
||||
const actionData = useActionData<RequestOTPLoginActionData>();
|
||||
const navigation = useNavigation();
|
||||
const [phone, setPhone] = useState("");
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
// Format input nomor HP
|
||||
const handlePhoneChange = (value: string) => {
|
||||
// Remove non-numeric characters
|
||||
let cleaned = value.replace(/\D/g, "");
|
||||
|
||||
// Ensure starts with 62
|
||||
if (cleaned.length > 0 && !cleaned.startsWith("62")) {
|
||||
if (cleaned.startsWith("0")) {
|
||||
cleaned = "62" + cleaned.substring(1);
|
||||
} else if (cleaned.startsWith("8")) {
|
||||
cleaned = "62" + cleaned;
|
||||
} else {
|
||||
cleaned = "62" + cleaned;
|
||||
}
|
||||
}
|
||||
|
||||
// Limit length
|
||||
if (cleaned.length > 16) {
|
||||
cleaned = cleaned.substring(0, 16);
|
||||
}
|
||||
|
||||
setPhone(cleaned);
|
||||
};
|
||||
|
||||
// Format display nomor HP
|
||||
const formatPhoneDisplay = (value: string) => {
|
||||
if (value.length <= 2) return value;
|
||||
if (value.length <= 5)
|
||||
return `${value.substring(0, 2)} ${value.substring(2)}`;
|
||||
if (value.length <= 9)
|
||||
return `${value.substring(0, 2)} ${value.substring(
|
||||
2,
|
||||
5
|
||||
)} ${value.substring(5)}`;
|
||||
return `${value.substring(0, 2)} ${value.substring(2, 5)} ${value.substring(
|
||||
5,
|
||||
9
|
||||
)} ${value.substring(9)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<LoginProgressIndicator currentStep={1} totalSteps={3} />
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-background/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900/30 dark:to-blue-900/30 rounded-full w-fit">
|
||||
<LogIn className="h-8 w-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
Masuk ke Akun Anda
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Masukkan nomor WhatsApp yang terdaftar
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.general && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{actionData.errors.general}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<Form method="post" className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="phone" className="text-base font-medium">
|
||||
Nomor WhatsApp Terdaftar
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="text"
|
||||
placeholder="628xxxxxxxxx"
|
||||
value={phone}
|
||||
onChange={(e) => handlePhoneChange(e.target.value)}
|
||||
className={`pl-12 h-12 text-lg ${
|
||||
actionData?.errors?.phone
|
||||
? "border-red-500 dark:border-red-400"
|
||||
: ""
|
||||
}`}
|
||||
maxLength={16}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Display formatted phone */}
|
||||
{phone.length > 2 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Format: {formatPhoneDisplay(phone)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{actionData?.errors?.phone && (
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
{actionData.errors.phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Shield className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
Login Aman dengan OTP
|
||||
</p>
|
||||
<p className="text-xs text-blue-700 dark:text-blue-400 mt-1">
|
||||
Kode OTP akan dikirim ke nomor WhatsApp yang sudah terdaftar
|
||||
untuk memastikan keamanan akun Anda.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Demo Info */}
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
||||
<p className="text-xs font-medium text-yellow-800 dark:text-yellow-300 mb-2">
|
||||
Demo - Nomor Terdaftar:
|
||||
</p>
|
||||
<div className="space-y-1 text-xs text-yellow-700 dark:text-yellow-400">
|
||||
<p>• 6281234567890</p>
|
||||
<p>• 6281234567891</p>
|
||||
<p>• 6281234567892</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={isSubmitting || phone.length < 11}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Mengirim OTP...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Kirim Kode OTP
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
{/* Register Link */}
|
||||
<div className="text-center space-y-3">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t border-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
Belum punya akun?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to="/authpengelola/requestotpforregister">
|
||||
<Button variant="outline" className="w-full">
|
||||
Daftar Sebagai Pengelola Baru
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to="/authpengelola"
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-4 w-4" />
|
||||
Kembali ke halaman utama
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Help Card */}
|
||||
<Card className="border border-border bg-background/60 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Lupa nomor yang terdaftar?
|
||||
</p>
|
||||
<a
|
||||
href="https://wa.me/6281234567890?text=Halo%20saya%20lupa%20nomor%20WhatsApp%20yang%20terdaftar"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:text-primary/80 font-medium"
|
||||
>
|
||||
Hubungi Customer Support
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,291 @@
|
|||
import { json, redirect, type ActionFunctionArgs } from "@remix-run/node";
|
||||
import { Form, useActionData, useNavigation, Link } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import { Progress } from "~/components/ui/progress";
|
||||
import {
|
||||
Phone,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
CheckCircle
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component
|
||||
const ProgressIndicator = ({ currentStep = 1, totalSteps = 5 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium
|
||||
${isActive
|
||||
? 'bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg'
|
||||
: isCompleted
|
||||
? 'bg-green-100 text-green-600 border-2 border-green-200'
|
||||
: 'bg-gray-100 text-gray-400 border-2 border-gray-200'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
) : (
|
||||
stepNumber
|
||||
)}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 ${
|
||||
stepNumber < currentStep ? 'bg-green-400' : 'bg-gray-200'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interface untuk action response
|
||||
interface RequestOTPActionData {
|
||||
errors?: {
|
||||
phone?: string;
|
||||
general?: string;
|
||||
};
|
||||
success?: boolean;
|
||||
}
|
||||
|
||||
export const action = async ({ request }: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const phone = formData.get("phone") as string;
|
||||
|
||||
// Validation
|
||||
const errors: { phone?: string; general?: string } = {};
|
||||
|
||||
if (!phone) {
|
||||
errors.phone = "Nomor WhatsApp wajib diisi";
|
||||
} else {
|
||||
// Validasi format nomor HP Indonesia
|
||||
const phoneRegex = /^62[0-9]{9,14}$/;
|
||||
if (!phoneRegex.test(phone)) {
|
||||
errors.phone = "Format: 628xxxxxxxxx (9-14 digit setelah 62)";
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<RequestOTPActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi kirim OTP - dalam implementasi nyata, integrate dengan WhatsApp Business API
|
||||
try {
|
||||
console.log("Sending OTP to WhatsApp:", phone);
|
||||
|
||||
// Simulasi delay API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Redirect ke step berikutnya dengan nomor HP
|
||||
return redirect(`/authpengelola/verifyotptoregister?phone=${encodeURIComponent(phone)}`);
|
||||
} catch (error) {
|
||||
return json<RequestOTPActionData>({
|
||||
errors: { general: "Gagal mengirim OTP. Silakan coba lagi." }
|
||||
}, { status: 500 });
|
||||
}
|
||||
};
|
||||
|
||||
export default function RequestOTPForRegister() {
|
||||
const actionData = useActionData<RequestOTPActionData>();
|
||||
const navigation = useNavigation();
|
||||
const [phone, setPhone] = useState("");
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
// Format input nomor HP
|
||||
const handlePhoneChange = (value: string) => {
|
||||
// Remove non-numeric characters
|
||||
let cleaned = value.replace(/\D/g, '');
|
||||
|
||||
// Ensure starts with 62
|
||||
if (cleaned.length > 0 && !cleaned.startsWith('62')) {
|
||||
if (cleaned.startsWith('0')) {
|
||||
cleaned = '62' + cleaned.substring(1);
|
||||
} else if (cleaned.startsWith('8')) {
|
||||
cleaned = '62' + cleaned;
|
||||
} else {
|
||||
cleaned = '62' + cleaned;
|
||||
}
|
||||
}
|
||||
|
||||
// Limit length
|
||||
if (cleaned.length > 16) {
|
||||
cleaned = cleaned.substring(0, 16);
|
||||
}
|
||||
|
||||
setPhone(cleaned);
|
||||
};
|
||||
|
||||
// Format display nomor HP
|
||||
const formatPhoneDisplay = (value: string) => {
|
||||
if (value.length <= 2) return value;
|
||||
if (value.length <= 5) return `${value.substring(0, 2)} ${value.substring(2)}`;
|
||||
if (value.length <= 9) return `${value.substring(0, 2)} ${value.substring(2, 5)} ${value.substring(5)}`;
|
||||
return `${value.substring(0, 2)} ${value.substring(2, 5)} ${value.substring(5, 9)} ${value.substring(9)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<ProgressIndicator currentStep={1} totalSteps={5} />
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 rounded-full w-fit">
|
||||
<MessageSquare className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Selamat Datang! Mari mulai...
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Masukkan nomor WhatsApp untuk verifikasi akun
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.general && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{actionData.errors.general}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<Form method="post" className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="phone" className="text-base font-medium">
|
||||
Nomor WhatsApp
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="text"
|
||||
placeholder="628xxxxxxxxx"
|
||||
value={phone}
|
||||
onChange={(e) => handlePhoneChange(e.target.value)}
|
||||
className={`pl-12 h-12 text-lg ${
|
||||
actionData?.errors?.phone ? 'border-red-500' : ''
|
||||
}`}
|
||||
maxLength={16}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Display formatted phone */}
|
||||
{phone.length > 2 && (
|
||||
<p className="text-sm text-gray-600">
|
||||
Format: {formatPhoneDisplay(phone)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{actionData?.errors?.phone && (
|
||||
<p className="text-sm text-red-600">{actionData.errors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<MessageSquare className="h-5 w-5 text-blue-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800">
|
||||
Verifikasi WhatsApp
|
||||
</p>
|
||||
<p className="text-xs text-blue-700 mt-1">
|
||||
Kode OTP akan dikirim ke nomor WhatsApp Anda.
|
||||
Pastikan nomor yang dimasukkan aktif dan dapat menerima pesan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Format Guide */}
|
||||
<div className="p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-xs font-medium text-gray-700 mb-2">Format Nomor Yang Benar:</p>
|
||||
<div className="space-y-1 text-xs text-gray-600">
|
||||
<p>• Dimulai dengan 62 (kode negara Indonesia)</p>
|
||||
<p>• Contoh: 628123456789 (untuk 0812-3456-789)</p>
|
||||
<p>• Panjang: 11-16 digit total</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={isSubmitting || phone.length < 11}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Mengirim OTP...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Kirim Kode OTP
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to="/authpengelola"
|
||||
className="inline-flex items-center text-sm text-gray-600 hover:text-green-600 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-4 w-4" />
|
||||
Kembali ke halaman utama
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Help Card */}
|
||||
<Card className="border border-gray-200 bg-white/60 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
Mengalami kesulitan?
|
||||
</p>
|
||||
<a
|
||||
href="https://wa.me/6281234567890?text=Halo%20saya%20butuh%20bantuan%20registrasi%20pengelola"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-green-600 hover:text-green-800 font-medium"
|
||||
>
|
||||
Hubungi Customer Support
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { Outlet } from "@remix-run/react";
|
||||
import { Recycle, Leaf } from "lucide-react";
|
||||
|
||||
export default function AuthPengelolaLayout() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-purple-50">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSIyIi8+PC9nPjwvZz48L3N2Zz4=')] opacity-40"></div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="relative z-10 p-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-gradient-to-br from-green-600 to-blue-600 rounded-xl shadow-lg">
|
||||
<Recycle className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
|
||||
WasteFlow
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600">Pengelola Portal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="relative z-10 flex items-center justify-center px-4 pb-8">
|
||||
<div className="w-full max-w-md">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 text-center p-6 text-xs text-gray-500">
|
||||
<div className="flex items-center justify-center space-x-4 mb-2">
|
||||
<a href="/privacy" className="hover:text-green-600 transition-colors">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<span>•</span>
|
||||
<a href="/terms" className="hover:text-green-600 transition-colors">
|
||||
Terms of Service
|
||||
</a>
|
||||
<span>•</span>
|
||||
<a href="/support" className="hover:text-green-600 transition-colors">
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
<p>© 2025 WasteFlow. Sistem Pengelolaan Sampah Terpadu.</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,490 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import {
|
||||
Form,
|
||||
useActionData,
|
||||
useLoaderData,
|
||||
useNavigation,
|
||||
Link
|
||||
} from "@remix-run/react";
|
||||
import { useState, useRef } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
Shield,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
ArrowLeft,
|
||||
LogIn,
|
||||
KeyRound,
|
||||
Fingerprint
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component untuk Login (3 steps)
|
||||
const LoginProgressIndicator = ({ currentStep = 3, totalSteps = 3 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg scale-105"
|
||||
: isCompleted
|
||||
? "bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 border-2 border-green-200 dark:border-green-700"
|
||||
: "bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border-2 border-gray-200 dark:border-gray-700"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 transition-all duration-300 ${
|
||||
stepNumber < currentStep
|
||||
? "bg-green-400 dark:bg-green-500"
|
||||
: "bg-gray-200 dark:bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interfaces
|
||||
interface LoaderData {
|
||||
phone: string;
|
||||
lastLoginAt?: string;
|
||||
}
|
||||
|
||||
interface VerifyPINActionData {
|
||||
errors?: {
|
||||
pin?: string;
|
||||
general?: string;
|
||||
};
|
||||
success?: boolean;
|
||||
}
|
||||
|
||||
export const loader = async ({
|
||||
request
|
||||
}: LoaderFunctionArgs): Promise<Response> => {
|
||||
const url = new URL(request.url);
|
||||
const phone = url.searchParams.get("phone");
|
||||
|
||||
if (!phone) {
|
||||
return redirect("/authpengelola/requestotpforlogin");
|
||||
}
|
||||
|
||||
// Simulasi data user - dalam implementasi nyata, ambil dari database
|
||||
return json<LoaderData>({
|
||||
phone,
|
||||
lastLoginAt: "2025-07-05T10:30:00Z" // contoh last login
|
||||
});
|
||||
};
|
||||
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const phone = formData.get("phone") as string;
|
||||
const pin = formData.get("pin") as string;
|
||||
|
||||
// Validation
|
||||
const errors: { pin?: string; general?: string } = {};
|
||||
|
||||
if (!pin || pin.length !== 6) {
|
||||
errors.pin = "PIN harus 6 digit";
|
||||
} else if (!/^\d{6}$/.test(pin)) {
|
||||
errors.pin = "PIN hanya boleh berisi angka";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<VerifyPINActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi verifikasi PIN - dalam implementasi nyata, hash dan compare dengan database
|
||||
const validPIN = "123456"; // Demo PIN
|
||||
|
||||
if (pin !== validPIN) {
|
||||
return json<VerifyPINActionData>(
|
||||
{
|
||||
errors: { pin: "PIN yang Anda masukkan salah. Silakan coba lagi." }
|
||||
},
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
// PIN valid, buat session dan redirect ke dashboard
|
||||
try {
|
||||
console.log("PIN verified for phone:", phone);
|
||||
|
||||
// Simulasi delay dan create session
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// Dalam implementasi nyata:
|
||||
// const session = await getSession(request.headers.get("Cookie"));
|
||||
// session.set("pengelolaId", userId);
|
||||
// session.set("pengelolaPhone", phone);
|
||||
// session.set("loginTime", new Date().toISOString());
|
||||
|
||||
// Redirect ke dashboard pengelola
|
||||
return redirect("/pengelola/dashboard");
|
||||
} catch (error) {
|
||||
return json<VerifyPINActionData>(
|
||||
{
|
||||
errors: { general: "Gagal login. Silakan coba lagi." }
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function VerifyExistingPIN() {
|
||||
const { phone, lastLoginAt } = useLoaderData<LoaderData>();
|
||||
const actionData = useActionData<VerifyPINActionData>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const [pin, setPin] = useState(["", "", "", "", "", ""]);
|
||||
const [showPin, setShowPin] = useState(false);
|
||||
const [attemptCount, setAttemptCount] = useState(0);
|
||||
|
||||
const pinRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
// Handle PIN input change
|
||||
const handlePinChange = (index: number, value: string) => {
|
||||
if (!/^\d*$/.test(value)) return; // Only allow digits
|
||||
|
||||
const newPin = [...pin];
|
||||
newPin[index] = value;
|
||||
setPin(newPin);
|
||||
|
||||
// Auto-focus next input
|
||||
if (value && index < 5) {
|
||||
pinRefs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle key down (backspace)
|
||||
const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
|
||||
if (e.key === "Backspace" && !pin[index] && index > 0) {
|
||||
pinRefs.current[index - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle paste
|
||||
const handlePaste = (e: React.ClipboardEvent) => {
|
||||
e.preventDefault();
|
||||
const pastedText = e.clipboardData.getData("text");
|
||||
const digits = pastedText.replace(/\D/g, "").slice(0, 6);
|
||||
|
||||
if (digits.length === 6) {
|
||||
const newPin = digits.split("");
|
||||
setPin(newPin);
|
||||
pinRefs.current[5]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Format phone display
|
||||
const formatPhone = (phoneNumber: string) => {
|
||||
if (phoneNumber.length <= 2) return phoneNumber;
|
||||
if (phoneNumber.length <= 5)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(2)}`;
|
||||
if (phoneNumber.length <= 9)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5)}`;
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5, 9)} ${phoneNumber.substring(9)}`;
|
||||
};
|
||||
|
||||
// Format last login
|
||||
const formatLastLogin = (dateString?: string) => {
|
||||
if (!dateString) return "Belum pernah login";
|
||||
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffInHours = Math.floor(
|
||||
(now.getTime() - date.getTime()) / (1000 * 60 * 60)
|
||||
);
|
||||
|
||||
if (diffInHours < 1) return "Kurang dari 1 jam yang lalu";
|
||||
if (diffInHours < 24) return `${diffInHours} jam yang lalu`;
|
||||
|
||||
const diffInDays = Math.floor(diffInHours / 24);
|
||||
if (diffInDays === 1) return "Kemarin";
|
||||
if (diffInDays < 7) return `${diffInDays} hari yang lalu`;
|
||||
|
||||
return date.toLocaleDateString("id-ID", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric"
|
||||
});
|
||||
};
|
||||
|
||||
const fullPin = pin.join("");
|
||||
|
||||
// Track failed attempts
|
||||
if (actionData?.errors?.pin && attemptCount < 3) {
|
||||
// In real implementation, this would be tracked server-side
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<LoginProgressIndicator currentStep={3} totalSteps={3} />
|
||||
|
||||
{/* Welcome Back Card */}
|
||||
<div className="p-4 bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-950/30 dark:to-blue-950/30 border border-green-200 dark:border-green-800 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<CheckCircle className="h-6 w-6 text-green-600 dark:text-green-400" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800 dark:text-green-300">
|
||||
Selamat Datang Kembali!
|
||||
</p>
|
||||
<p className="text-sm text-green-700 dark:text-green-400">
|
||||
Login terakhir: {formatLastLogin(lastLoginAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-background/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900/30 dark:to-blue-900/30 rounded-full w-fit">
|
||||
<KeyRound className="h-8 w-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
Masukkan PIN Anda
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Akun: {formatPhone(phone)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.general && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{actionData.errors.general}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<Form method="post" className="space-y-6">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
<input type="hidden" name="pin" value={fullPin} />
|
||||
|
||||
{/* PIN Input */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base font-medium">PIN Keamanan</Label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{showPin ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-3">
|
||||
{pin.map((digit, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
ref={(el) => (pinRefs.current[index] = el)}
|
||||
type={showPin ? "text" : "password"}
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) => handlePinChange(index, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
onPaste={handlePaste}
|
||||
className={`w-12 h-12 text-center text-lg font-bold transition-all duration-200 ${
|
||||
actionData?.errors?.pin
|
||||
? "border-red-500 dark:border-red-400"
|
||||
: ""
|
||||
} focus:scale-105`}
|
||||
autoFocus={index === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{actionData?.errors?.pin && (
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
{actionData.errors.pin}
|
||||
</p>
|
||||
{attemptCount >= 2 && (
|
||||
<p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
|
||||
Akun akan dikunci sementara setelah 3 kali percobaan gagal
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
Tempel PIN atau ketik manual
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Security Info */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Fingerprint className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
Keamanan Terjamin
|
||||
</p>
|
||||
<p className="text-xs text-blue-700 dark:text-blue-400 mt-1">
|
||||
PIN Anda dienkripsi dengan standar keamanan tinggi. Jangan
|
||||
bagikan PIN kepada siapapun.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={isSubmitting || fullPin.length !== 6}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Memverifikasi PIN...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="mr-2 h-5 w-5" />
|
||||
Masuk ke Dashboard
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
{/* Forgot PIN */}
|
||||
<div className="text-center space-y-3">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t border-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
Lupa PIN?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hubungi Customer Support untuk reset PIN
|
||||
</p>
|
||||
<div className="flex items-center justify-center space-x-4">
|
||||
<a
|
||||
href="tel:+6281234567890"
|
||||
className="text-sm text-primary hover:text-primary/80 font-medium"
|
||||
>
|
||||
📞 Call Support
|
||||
</a>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<a
|
||||
href={`https://wa.me/6281234567890?text=Halo%20saya%20lupa%20PIN%20untuk%20nomor%20${phone}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:text-primary/80 font-medium"
|
||||
>
|
||||
💬 WhatsApp
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to={`/authpengelola/verifyotptologin?phone=${encodeURIComponent(
|
||||
phone
|
||||
)}`}
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-4 w-4" />
|
||||
Kembali ke verifikasi OTP
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Demo Info */}
|
||||
<Card className="border border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-950/20 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-green-800 dark:text-green-300 mb-2">
|
||||
Demo PIN:
|
||||
</p>
|
||||
<div className="text-xs text-green-700 dark:text-green-400 space-y-1">
|
||||
<p>
|
||||
Gunakan PIN:{" "}
|
||||
<span className="font-mono font-bold text-lg">123456</span>
|
||||
</p>
|
||||
<p>Untuk testing login flow pengelola</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Security Notice */}
|
||||
<Card className="border border-amber-200 dark:border-amber-800 bg-amber-50/50 dark:bg-amber-950/20 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Shield className="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-800 dark:text-amber-300">
|
||||
Tips Keamanan
|
||||
</p>
|
||||
<ul className="text-xs text-amber-700 dark:text-amber-400 mt-1 space-y-1">
|
||||
<li>• Jangan bagikan PIN kepada siapapun</li>
|
||||
<li>• Logout dari perangkat yang bukan milik Anda</li>
|
||||
<li>• Ganti PIN secara berkala untuk keamanan</li>
|
||||
<li>• Laporkan aktivitas mencurigakan ke admin</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,451 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import {
|
||||
Form,
|
||||
useActionData,
|
||||
useLoaderData,
|
||||
useNavigation,
|
||||
Link
|
||||
} from "@remix-run/react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
MessageSquare,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
Clock,
|
||||
RefreshCw,
|
||||
CheckCircle,
|
||||
Smartphone,
|
||||
Shield
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component untuk Login (3 steps)
|
||||
const LoginProgressIndicator = ({ currentStep = 2, totalSteps = 3 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg scale-105"
|
||||
: isCompleted
|
||||
? "bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 border-2 border-green-200 dark:border-green-700"
|
||||
: "bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border-2 border-gray-200 dark:border-gray-700"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 transition-all duration-300 ${
|
||||
stepNumber < currentStep
|
||||
? "bg-green-400 dark:bg-green-500"
|
||||
: "bg-gray-200 dark:bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interfaces
|
||||
interface LoaderData {
|
||||
phone: string;
|
||||
otpSentAt: string;
|
||||
expiryMinutes: number;
|
||||
}
|
||||
|
||||
interface VerifyOTPLoginActionData {
|
||||
success?: boolean;
|
||||
message?: string;
|
||||
otpSentAt?: string;
|
||||
errors?: {
|
||||
otp?: string;
|
||||
general?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const loader = async ({
|
||||
request
|
||||
}: LoaderFunctionArgs): Promise<Response> => {
|
||||
const url = new URL(request.url);
|
||||
const phone = url.searchParams.get("phone");
|
||||
|
||||
if (!phone) {
|
||||
return redirect("/authpengelola/requestotpforlogin");
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
phone,
|
||||
otpSentAt: new Date().toISOString(),
|
||||
expiryMinutes: 5
|
||||
});
|
||||
};
|
||||
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const otp = formData.get("otp") as string;
|
||||
const phone = formData.get("phone") as string;
|
||||
const actionType = formData.get("_action") as string;
|
||||
|
||||
if (actionType === "resend") {
|
||||
// Simulasi resend OTP
|
||||
console.log("Resending login OTP to WhatsApp:", phone);
|
||||
|
||||
return json<VerifyOTPLoginActionData>({
|
||||
success: true,
|
||||
message: "Kode OTP baru telah dikirim ke WhatsApp Anda",
|
||||
otpSentAt: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
|
||||
if (actionType === "verify") {
|
||||
// Validation
|
||||
const errors: { otp?: string; general?: string } = {};
|
||||
|
||||
if (!otp || otp.length !== 4) {
|
||||
errors.otp = "Kode OTP harus 4 digit";
|
||||
} else if (!/^\d{4}$/.test(otp)) {
|
||||
errors.otp = "Kode OTP hanya boleh berisi angka";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<VerifyOTPLoginActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi verifikasi OTP - dalam implementasi nyata, cek ke database/cache
|
||||
if (otp === "1234") {
|
||||
// OTP valid, lanjut ke verifikasi PIN
|
||||
return redirect(
|
||||
`/authpengelola/verifyexistingpin?phone=${encodeURIComponent(phone)}`
|
||||
);
|
||||
}
|
||||
|
||||
return json<VerifyOTPLoginActionData>(
|
||||
{
|
||||
errors: { otp: "Kode OTP tidak valid atau sudah kedaluwarsa" }
|
||||
},
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
return json<VerifyOTPLoginActionData>(
|
||||
{
|
||||
errors: { general: "Aksi tidak valid" }
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
};
|
||||
|
||||
export default function VerifyOTPToLogin() {
|
||||
const { phone, otpSentAt, expiryMinutes } = useLoaderData<LoaderData>();
|
||||
const actionData = useActionData<VerifyOTPLoginActionData>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const [otp, setOtp] = useState(["", "", "", ""]);
|
||||
const [timeLeft, setTimeLeft] = useState(expiryMinutes * 60); // 5 minutes in seconds
|
||||
const [canResend, setCanResend] = useState(false);
|
||||
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
const isResending = navigation.formData?.get("_action") === "resend";
|
||||
const isVerifying = navigation.formData?.get("_action") === "verify";
|
||||
|
||||
// Timer countdown
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
setCanResend(true);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
// Reset timer when OTP is resent
|
||||
useEffect(() => {
|
||||
if (actionData?.success && actionData?.otpSentAt) {
|
||||
setTimeLeft(expiryMinutes * 60);
|
||||
setCanResend(false);
|
||||
}
|
||||
}, [actionData, expiryMinutes]);
|
||||
|
||||
// Handle OTP input change
|
||||
const handleOtpChange = (index: number, value: string) => {
|
||||
if (!/^\d*$/.test(value)) return; // Only allow digits
|
||||
|
||||
const newOtp = [...otp];
|
||||
newOtp[index] = value;
|
||||
setOtp(newOtp);
|
||||
|
||||
// Auto-focus next input
|
||||
if (value && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle key down (backspace)
|
||||
const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
|
||||
if (e.key === "Backspace" && !otp[index] && index > 0) {
|
||||
inputRefs.current[index - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle paste
|
||||
const handlePaste = (e: React.ClipboardEvent) => {
|
||||
e.preventDefault();
|
||||
const pastedText = e.clipboardData.getData("text");
|
||||
const digits = pastedText.replace(/\D/g, "").slice(0, 4);
|
||||
|
||||
if (digits.length === 4) {
|
||||
const newOtp = digits.split("");
|
||||
setOtp(newOtp);
|
||||
inputRefs.current[3]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Format time
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// Format phone display
|
||||
const formatPhone = (phoneNumber: string) => {
|
||||
if (phoneNumber.length <= 2) return phoneNumber;
|
||||
if (phoneNumber.length <= 5)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(2)}`;
|
||||
if (phoneNumber.length <= 9)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5)}`;
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5, 9)} ${phoneNumber.substring(9)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<LoginProgressIndicator currentStep={2} totalSteps={3} />
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-background/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900/30 dark:to-blue-900/30 rounded-full w-fit">
|
||||
<Smartphone className="h-8 w-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
Verifikasi Login
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Masukkan kode OTP 4 digit yang dikirim ke
|
||||
</p>
|
||||
<p className="font-medium text-primary text-lg">
|
||||
{formatPhone(phone)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Success Alert */}
|
||||
{actionData?.success && actionData?.message && (
|
||||
<Alert className="border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-950/30">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
|
||||
<AlertDescription className="text-green-800 dark:text-green-300">
|
||||
{actionData.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.otp && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{actionData.errors.otp}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* OTP Input Form */}
|
||||
<Form method="post">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
<input type="hidden" name="_action" value="verify" />
|
||||
<input type="hidden" name="otp" value={otp.join("")} />
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* OTP Input Fields */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-center space-x-3">
|
||||
{otp.map((digit, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
ref={(el) => (inputRefs.current[index] = el)}
|
||||
type="text"
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) => handleOtpChange(index, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
onPaste={handlePaste}
|
||||
className={`w-14 h-14 text-center text-xl font-bold transition-all duration-200 ${
|
||||
actionData?.errors?.otp
|
||||
? "border-red-500 dark:border-red-400"
|
||||
: ""
|
||||
} focus:scale-105`}
|
||||
autoFocus={index === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
Tempel kode OTP atau ketik manual
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timer */}
|
||||
<div className="text-center">
|
||||
{timeLeft > 0 ? (
|
||||
<div className="flex items-center justify-center space-x-2 text-sm text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>Kode kedaluwarsa dalam {formatTime(timeLeft)}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-red-600 dark:text-red-400 font-medium">
|
||||
Kode OTP telah kedaluwarsa
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Verify Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={
|
||||
otp.join("").length !== 4 || isSubmitting || timeLeft === 0
|
||||
}
|
||||
>
|
||||
{isVerifying ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Memverifikasi...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Shield className="mr-2 h-5 w-5" />
|
||||
Verifikasi & Lanjutkan
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
{/* Resend OTP */}
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Tidak menerima kode?
|
||||
</p>
|
||||
<Form method="post" className="inline">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
<input type="hidden" name="_action" value="resend" />
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canResend || isSubmitting}
|
||||
className="text-primary border-primary hover:bg-primary/5 dark:hover:bg-primary/10"
|
||||
>
|
||||
{isResending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Mengirim...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Kirim Ulang OTP
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Shield className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
Keamanan Login
|
||||
</p>
|
||||
<p className="text-xs text-blue-700 dark:text-blue-400 mt-1">
|
||||
Setelah verifikasi OTP, Anda akan diminta memasukkan PIN 6
|
||||
digit untuk mengakses dashboard pengelola.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to="/authpengelola/requestotpforlogin"
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-4 w-4" />
|
||||
Ganti nomor WhatsApp
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Demo Info */}
|
||||
<Card className="border border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-950/20 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-green-800 dark:text-green-300 mb-2">
|
||||
Demo OTP:
|
||||
</p>
|
||||
<div className="text-xs text-green-700 dark:text-green-400 space-y-1">
|
||||
<p>
|
||||
Gunakan kode:{" "}
|
||||
<span className="font-mono font-bold text-lg">1234</span>
|
||||
</p>
|
||||
<p>Atau tunggu countdown habis untuk test resend</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,427 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import {
|
||||
Form,
|
||||
useActionData,
|
||||
useLoaderData,
|
||||
useNavigation,
|
||||
Link
|
||||
} from "@remix-run/react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
MessageSquare,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
Clock,
|
||||
RefreshCw,
|
||||
CheckCircle,
|
||||
Smartphone
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component (reuse dari step sebelumnya)
|
||||
const ProgressIndicator = ({ currentStep = 2, totalSteps = 5 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg"
|
||||
: isCompleted
|
||||
? "bg-green-100 text-green-600 border-2 border-green-200"
|
||||
: "bg-gray-100 text-gray-400 border-2 border-gray-200"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 ${
|
||||
stepNumber < currentStep ? "bg-green-400" : "bg-gray-200"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interfaces
|
||||
interface LoaderData {
|
||||
phone: string;
|
||||
otpSentAt: string;
|
||||
expiryMinutes: number;
|
||||
}
|
||||
|
||||
interface VerifyOTPActionData {
|
||||
success?: boolean;
|
||||
message?: string;
|
||||
otpSentAt?: string;
|
||||
errors?: {
|
||||
otp?: string;
|
||||
general?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const loader = async ({
|
||||
request
|
||||
}: LoaderFunctionArgs): Promise<Response> => {
|
||||
const url = new URL(request.url);
|
||||
const phone = url.searchParams.get("phone");
|
||||
|
||||
if (!phone) {
|
||||
return redirect("/authpengelola/requestotpforregister");
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
phone,
|
||||
otpSentAt: new Date().toISOString(),
|
||||
expiryMinutes: 5
|
||||
});
|
||||
};
|
||||
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const otp = formData.get("otp") as string;
|
||||
const phone = formData.get("phone") as string;
|
||||
const actionType = formData.get("_action") as string;
|
||||
|
||||
if (actionType === "resend") {
|
||||
// Simulasi resend OTP
|
||||
console.log("Resending OTP to WhatsApp:", phone);
|
||||
|
||||
return json<VerifyOTPActionData>({
|
||||
success: true,
|
||||
message: "Kode OTP baru telah dikirim ke WhatsApp Anda",
|
||||
otpSentAt: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
|
||||
if (actionType === "verify") {
|
||||
// Validation
|
||||
const errors: { otp?: string; general?: string } = {};
|
||||
|
||||
if (!otp || otp.length !== 4) {
|
||||
errors.otp = "Kode OTP harus 4 digit";
|
||||
} else if (!/^\d{4}$/.test(otp)) {
|
||||
errors.otp = "Kode OTP hanya boleh berisi angka";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<VerifyOTPActionData>({ errors }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi verifikasi OTP - dalam implementasi nyata, cek ke database/cache
|
||||
if (otp === "1234") {
|
||||
// OTP valid, lanjut ke step berikutnya
|
||||
return redirect(
|
||||
`/authpengelola/completingcompanyprofile?phone=${encodeURIComponent(
|
||||
phone
|
||||
)}`
|
||||
);
|
||||
}
|
||||
|
||||
return json<VerifyOTPActionData>(
|
||||
{
|
||||
errors: { otp: "Kode OTP tidak valid atau sudah kedaluwarsa" }
|
||||
},
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
return json<VerifyOTPActionData>(
|
||||
{
|
||||
errors: { general: "Aksi tidak valid" }
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
};
|
||||
|
||||
export default function VerifyOTPToRegister() {
|
||||
const { phone, otpSentAt, expiryMinutes } = useLoaderData<LoaderData>();
|
||||
const actionData = useActionData<VerifyOTPActionData>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const [otp, setOtp] = useState(["", "", "", ""]);
|
||||
const [timeLeft, setTimeLeft] = useState(expiryMinutes * 60); // 5 minutes in seconds
|
||||
const [canResend, setCanResend] = useState(false);
|
||||
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
const isResending = navigation.formData?.get("_action") === "resend";
|
||||
const isVerifying = navigation.formData?.get("_action") === "verify";
|
||||
|
||||
// Timer countdown
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
setCanResend(true);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
// Reset timer when OTP is resent
|
||||
useEffect(() => {
|
||||
if (actionData?.success && actionData?.otpSentAt) {
|
||||
setTimeLeft(expiryMinutes * 60);
|
||||
setCanResend(false);
|
||||
}
|
||||
}, [actionData, expiryMinutes]);
|
||||
|
||||
// Handle OTP input change
|
||||
const handleOtpChange = (index: number, value: string) => {
|
||||
if (!/^\d*$/.test(value)) return; // Only allow digits
|
||||
|
||||
const newOtp = [...otp];
|
||||
newOtp[index] = value;
|
||||
setOtp(newOtp);
|
||||
|
||||
// Auto-focus next input
|
||||
if (value && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle key down (backspace)
|
||||
const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
|
||||
if (e.key === "Backspace" && !otp[index] && index > 0) {
|
||||
inputRefs.current[index - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Handle paste
|
||||
const handlePaste = (e: React.ClipboardEvent) => {
|
||||
e.preventDefault();
|
||||
const pastedText = e.clipboardData.getData("text");
|
||||
const digits = pastedText.replace(/\D/g, "").slice(0, 4);
|
||||
|
||||
if (digits.length === 4) {
|
||||
const newOtp = digits.split("");
|
||||
setOtp(newOtp);
|
||||
inputRefs.current[3]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// Format time
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// Format phone display
|
||||
const formatPhone = (phoneNumber: string) => {
|
||||
if (phoneNumber.length <= 2) return phoneNumber;
|
||||
if (phoneNumber.length <= 5)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(2)}`;
|
||||
if (phoneNumber.length <= 9)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5)}`;
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5, 9)} ${phoneNumber.substring(9)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<ProgressIndicator currentStep={2} totalSteps={5} />
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-green-100 to-blue-100 rounded-full w-fit">
|
||||
<Smartphone className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Verifikasi WhatsApp
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Masukkan kode OTP 4 digit yang dikirim ke
|
||||
</p>
|
||||
<p className="font-medium text-green-600 text-lg">
|
||||
{formatPhone(phone)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Success Alert */}
|
||||
{actionData?.success && actionData?.message && (
|
||||
<Alert className="border-green-200 bg-green-50">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<AlertDescription className="text-green-800">
|
||||
{actionData.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.otp && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{actionData.errors.otp}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* OTP Input Form */}
|
||||
<Form method="post">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
<input type="hidden" name="_action" value="verify" />
|
||||
<input type="hidden" name="otp" value={otp.join("")} />
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* OTP Input Fields */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-center space-x-3">
|
||||
{otp.map((digit, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
ref={(el) => (inputRefs.current[index] = el)}
|
||||
type="text"
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) => handleOtpChange(index, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
onPaste={handlePaste}
|
||||
className={`w-14 h-14 text-center text-xl font-bold ${
|
||||
actionData?.errors?.otp ? "border-red-500" : ""
|
||||
}`}
|
||||
autoFocus={index === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-gray-500">
|
||||
Tempel kode OTP atau ketik manual
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timer */}
|
||||
<div className="text-center">
|
||||
{timeLeft > 0 ? (
|
||||
<div className="flex items-center justify-center space-x-2 text-sm text-gray-600">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>Kode kedaluwarsa dalam {formatTime(timeLeft)}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-red-600 font-medium">
|
||||
Kode OTP telah kedaluwarsa
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Verify Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
disabled={
|
||||
otp.join("").length !== 4 || isSubmitting || timeLeft === 0
|
||||
}
|
||||
>
|
||||
{isVerifying ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Memverifikasi...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Verifikasi Kode
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
{/* Resend OTP */}
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-sm text-gray-600">Tidak menerima kode?</p>
|
||||
<Form method="post" className="inline">
|
||||
<input type="hidden" name="phone" value={phone} />
|
||||
<input type="hidden" name="_action" value="resend" />
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canResend || isSubmitting}
|
||||
className="text-green-600 border-green-600 hover:bg-green-50"
|
||||
>
|
||||
{isResending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Mengirim...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Kirim Ulang OTP
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to="/authpengelola/requestotpforregister"
|
||||
className="inline-flex items-center text-sm text-gray-600 hover:text-green-600 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-4 w-4" />
|
||||
Ganti nomor WhatsApp
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Demo Info */}
|
||||
<Card className="border border-blue-200 bg-blue-50/50 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-blue-800 mb-2">Demo OTP:</p>
|
||||
<div className="text-xs text-blue-700 space-y-1">
|
||||
<p>
|
||||
Gunakan kode:{" "}
|
||||
<span className="font-mono font-bold text-lg">1234</span>
|
||||
</p>
|
||||
<p>Atau tunggu countdown habis untuk test resend</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,365 @@
|
|||
import { json, redirect, type LoaderFunctionArgs } from "@remix-run/node";
|
||||
import { useLoaderData, Link } from "@remix-run/react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Progress } from "~/components/ui/progress";
|
||||
import {
|
||||
Clock,
|
||||
CheckCircle,
|
||||
Phone,
|
||||
Mail,
|
||||
MessageSquare,
|
||||
RefreshCw,
|
||||
FileText,
|
||||
Shield,
|
||||
AlertCircle,
|
||||
Users
|
||||
} from "lucide-react";
|
||||
|
||||
// Progress Indicator Component
|
||||
const ProgressIndicator = ({ currentStep = 4, totalSteps = 5 }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
{Array.from({ length: totalSteps }, (_, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<div key={stepNumber} className="flex items-center">
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium
|
||||
${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-green-600 to-blue-600 text-white shadow-lg"
|
||||
: isCompleted
|
||||
? "bg-green-100 text-green-600 border-2 border-green-200"
|
||||
: "bg-gray-100 text-gray-400 border-2 border-gray-200"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted ? <CheckCircle className="h-5 w-5" /> : stepNumber}
|
||||
</div>
|
||||
{stepNumber < totalSteps && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-2 ${
|
||||
stepNumber < currentStep ? "bg-green-400" : "bg-gray-200"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Interface
|
||||
interface LoaderData {
|
||||
phone: string;
|
||||
submittedAt: string;
|
||||
estimatedApprovalTime: string; // "1-3 hari kerja"
|
||||
applicationId: string;
|
||||
}
|
||||
|
||||
export const loader = async ({
|
||||
request
|
||||
}: LoaderFunctionArgs): Promise<Response> => {
|
||||
const url = new URL(request.url);
|
||||
const phone = url.searchParams.get("phone");
|
||||
|
||||
if (!phone) {
|
||||
return redirect("/authpengelola/requestotpforregister");
|
||||
}
|
||||
|
||||
// Simulasi data - dalam implementasi nyata, ambil dari database
|
||||
return json<LoaderData>({
|
||||
phone,
|
||||
submittedAt: new Date().toISOString(),
|
||||
estimatedApprovalTime: "1-3 hari kerja",
|
||||
applicationId: "WF" + Date.now().toString().slice(-6)
|
||||
});
|
||||
};
|
||||
|
||||
export default function WaitingApprovalFromAdministrator() {
|
||||
const { phone, submittedAt, estimatedApprovalTime, applicationId } =
|
||||
useLoaderData<LoaderData>();
|
||||
const [timeElapsed, setTimeElapsed] = useState(0);
|
||||
|
||||
// Timer untuk menunjukkan berapa lama sudah menunggu
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const now = new Date().getTime();
|
||||
const submitted = new Date(submittedAt).getTime();
|
||||
const elapsed = Math.floor((now - submitted) / 1000 / 60); // minutes
|
||||
setTimeElapsed(elapsed);
|
||||
}, 60000); // Update setiap menit
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [submittedAt]);
|
||||
|
||||
// Format phone display
|
||||
const formatPhone = (phoneNumber: string) => {
|
||||
if (phoneNumber.length <= 2) return phoneNumber;
|
||||
if (phoneNumber.length <= 5)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(2)}`;
|
||||
if (phoneNumber.length <= 9)
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5)}`;
|
||||
return `${phoneNumber.substring(0, 2)} ${phoneNumber.substring(
|
||||
2,
|
||||
5
|
||||
)} ${phoneNumber.substring(5, 9)} ${phoneNumber.substring(9)}`;
|
||||
};
|
||||
|
||||
// Format elapsed time
|
||||
const formatElapsedTime = (minutes: number) => {
|
||||
if (minutes < 60) return `${minutes} menit yang lalu`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours} jam yang lalu`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days} hari yang lalu`;
|
||||
};
|
||||
|
||||
// Simulasi status checker - dalam implementasi nyata, polling ke server
|
||||
const checkStatus = () => {
|
||||
// Untuk demo, redirect ke step berikutnya setelah beberapa detik
|
||||
setTimeout(() => {
|
||||
window.location.href = `/authpengelola/createanewpin?phone=${encodeURIComponent(
|
||||
phone
|
||||
)}`;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Progress Indicator */}
|
||||
<ProgressIndicator currentStep={4} totalSteps={5} />
|
||||
|
||||
{/* Main Card */}
|
||||
<Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-gradient-to-br from-yellow-100 to-orange-100 rounded-full w-fit">
|
||||
<Clock className="h-8 w-8 text-yellow-600 animate-pulse" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Menunggu Persetujuan Administrator
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Aplikasi Anda sedang dalam proses verifikasi
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Status Info */}
|
||||
<div className="text-center space-y-2">
|
||||
<div className="inline-flex items-center space-x-2 px-4 py-2 bg-yellow-50 border border-yellow-200 rounded-full">
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-sm font-medium text-yellow-800">
|
||||
Status: Dalam Review
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
ID Aplikasi:{" "}
|
||||
<span className="font-mono font-medium">{applicationId}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Progress Verifikasi
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
<p className="text-xs text-gray-500">
|
||||
Estimasi waktu: {estimatedApprovalTime}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Submitted Info */}
|
||||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<span className="font-medium text-green-800">
|
||||
Aplikasi Berhasil Dikirim
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<p className="text-green-700">
|
||||
<strong>Nomor WhatsApp:</strong> {formatPhone(phone)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-green-700">
|
||||
<strong>Waktu Kirim:</strong> {formatElapsedTime(timeElapsed)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next Steps */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-medium text-gray-900 flex items-center">
|
||||
<FileText className="h-5 w-5 mr-2" />
|
||||
Proses Selanjutnya
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-600 mt-0.5">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
Verifikasi Data Perusahaan
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
Administrator akan memverifikasi informasi yang Anda berikan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-600 mt-0.5">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
Pengecekan Dokumen
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
Validasi legalitas dan kredibilitas perusahaan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center text-xs font-medium text-green-600 mt-0.5">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
Persetujuan & Aktivasi
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
Akun akan diaktivasi dan Anda bisa membuat PIN
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Users className="h-5 w-5 text-blue-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800 mb-2">
|
||||
Butuh Bantuan atau Informasi?
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Phone className="h-4 w-4 text-blue-600" />
|
||||
<a
|
||||
href="tel:+6281234567890"
|
||||
className="text-sm text-blue-700 hover:text-blue-900 font-medium"
|
||||
>
|
||||
+62 812-3456-7890
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mail className="h-4 w-4 text-blue-600" />
|
||||
<a
|
||||
href="mailto:admin@wasteflow.com"
|
||||
className="text-sm text-blue-700 hover:text-blue-900 font-medium"
|
||||
>
|
||||
admin@wasteflow.com
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<MessageSquare className="h-4 w-4 text-blue-600" />
|
||||
<a
|
||||
href={`https://wa.me/6281234567890?text=Halo%20saya%20ingin%20bertanya%20tentang%20aplikasi%20${applicationId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-700 hover:text-blue-900 font-medium"
|
||||
>
|
||||
WhatsApp Admin
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={checkStatus}
|
||||
className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white shadow-lg"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Cek Status Persetujuan
|
||||
</Button>
|
||||
|
||||
<Link to="/authpengelola">
|
||||
<Button variant="outline" className="w-full h-12">
|
||||
Kembali ke Halaman Utama
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Important Note */}
|
||||
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<AlertCircle className="h-5 w-5 text-amber-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-800">
|
||||
Penting untuk Diingat
|
||||
</p>
|
||||
<ul className="text-xs text-amber-700 mt-1 space-y-1">
|
||||
<li>
|
||||
• Jangan tutup aplikasi ini, bookmark halaman untuk akses
|
||||
mudah
|
||||
</li>
|
||||
<li>
|
||||
• Anda akan mendapat notifikasi WhatsApp saat disetujui
|
||||
</li>
|
||||
<li>
|
||||
• Proses verifikasi dilakukan pada hari kerja (Senin-Jumat)
|
||||
</li>
|
||||
<li>
|
||||
• Pastikan nomor WhatsApp aktif untuk menerima notifikasi
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Demo Card */}
|
||||
<Card className="border border-green-200 bg-green-50/50 backdrop-blur-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-green-800 mb-2">
|
||||
Demo Mode:
|
||||
</p>
|
||||
<p className="text-xs text-green-700">
|
||||
Klik "Cek Status Persetujuan" untuk simulasi approval dan lanjut
|
||||
ke step terakhir
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue