560 lines
18 KiB
TypeScript
560 lines
18 KiB
TypeScript
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";
|
|
import { getSession, commitSession } from "~/sessions.server";
|
|
import { validateOtp } from "~/utils/auth-utils";
|
|
import pengelolaAuthService from "~/services/auth/pengelola.service";
|
|
import type { AuthTokenData } from "~/types/auth.types";
|
|
|
|
// 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;
|
|
deviceId: 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 session = await getSession(request);
|
|
const phone = session.get("tempLoginPhone");
|
|
const deviceId = session.get("tempLoginDeviceId");
|
|
const otpSentAt = session.get("tempLoginOtpSentAt");
|
|
|
|
if (!phone || !deviceId) {
|
|
return redirect("/authpengelola/requestotpforlogin");
|
|
}
|
|
|
|
return json<LoaderData>({
|
|
phone,
|
|
deviceId,
|
|
otpSentAt: 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 actionType = formData.get("_action") as string;
|
|
|
|
const session = await getSession(request);
|
|
const phone = session.get("tempLoginPhone");
|
|
const deviceId = session.get("tempLoginDeviceId");
|
|
|
|
if (!phone || !deviceId) {
|
|
return redirect("/authpengelola/requestotpforlogin");
|
|
}
|
|
|
|
if (actionType === "resend") {
|
|
try {
|
|
// Resend OTP
|
|
await pengelolaAuthService.requestOtpLogin({
|
|
phone,
|
|
role_name: "pengelola"
|
|
});
|
|
|
|
// Update OTP sent time
|
|
session.set("tempLoginOtpSentAt", new Date().toISOString());
|
|
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
success: true,
|
|
message: "Kode OTP baru telah dikirim ke WhatsApp Anda",
|
|
otpSentAt: new Date().toISOString()
|
|
},
|
|
{
|
|
headers: {
|
|
"Set-Cookie": await commitSession(session)
|
|
}
|
|
}
|
|
);
|
|
} catch (error: any) {
|
|
console.error("Resend OTP error:", error);
|
|
|
|
const errorMessage =
|
|
error.response?.data?.meta?.message ||
|
|
"Gagal mengirim ulang OTP. Silakan coba lagi.";
|
|
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
errors: { general: errorMessage }
|
|
},
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
if (actionType === "verify") {
|
|
// Validation
|
|
const errors: { otp?: string; general?: string } = {};
|
|
|
|
if (!otp) {
|
|
errors.otp = "Kode OTP wajib diisi";
|
|
} else if (!validateOtp(otp)) {
|
|
errors.otp = "Kode OTP harus 4 digit angka";
|
|
}
|
|
|
|
if (Object.keys(errors).length > 0) {
|
|
return json<VerifyOTPLoginActionData>({ errors }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
// Verify OTP untuk login
|
|
const response = await pengelolaAuthService.verifyOtpLogin({
|
|
phone,
|
|
otp,
|
|
device_id: deviceId,
|
|
role_name: "pengelola"
|
|
});
|
|
|
|
const tokenData = response.data;
|
|
|
|
// Check if tokenData exists
|
|
if (!tokenData) {
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
errors: { general: "Response data tidak valid dari server" }
|
|
},
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
|
|
// Simpan data token ke session
|
|
session.set("tempLoginTokenData", tokenData);
|
|
session.set("tempLoginPhone", phone);
|
|
session.set("tempLoginDeviceId", deviceId);
|
|
|
|
// Check next step dari response
|
|
if (tokenData.next_step === "verif_pin") {
|
|
// Lanjut ke verifikasi PIN
|
|
return redirect("/authpengelola/verifyexistingpin", {
|
|
headers: {
|
|
"Set-Cookie": await commitSession(session)
|
|
}
|
|
});
|
|
} else {
|
|
// Jika sudah complete, langsung ke dashboard
|
|
// (tidak seharusnya terjadi untuk login flow, tapi handle just in case)
|
|
return redirect("/pengelola/dashboard", {
|
|
headers: {
|
|
"Set-Cookie": await commitSession(session)
|
|
}
|
|
});
|
|
}
|
|
} catch (error: any) {
|
|
console.error("Verify OTP login error:", error);
|
|
|
|
// Handle specific API errors
|
|
if (error.response?.status === 401) {
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
errors: { otp: "Kode OTP tidak valid atau sudah kedaluwarsa" }
|
|
},
|
|
{ status: 401 }
|
|
);
|
|
}
|
|
|
|
if (error.response?.status === 429) {
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
errors: {
|
|
otp: "Terlalu banyak percobaan. Silakan tunggu beberapa menit."
|
|
}
|
|
},
|
|
{ status: 429 }
|
|
);
|
|
}
|
|
|
|
// General error
|
|
const errorMessage =
|
|
error.response?.data?.meta?.message ||
|
|
"Gagal memverifikasi OTP. Silakan coba lagi.";
|
|
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
errors: { general: errorMessage }
|
|
},
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
return json<VerifyOTPLoginActionData>(
|
|
{
|
|
errors: { general: "Aksi tidak valid" }
|
|
},
|
|
{ status: 400 }
|
|
);
|
|
};
|
|
|
|
export default function VerifyOTPToLogin() {
|
|
const { phone, deviceId, 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 || actionData?.errors?.general) && (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>
|
|
{actionData.errors.otp || actionData.errors.general}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* OTP Input Form */}
|
|
<Form method="post">
|
|
<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="_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>
|
|
|
|
{/* 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">Butuh bantuan?</p>
|
|
<a
|
|
href={`https://wa.me/6281234567890?text=Halo%20saya%20butuh%20bantuan%20login%20dengan%20nomor%20${phone}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-primary hover:text-primary/80 font-medium"
|
|
>
|
|
Hubungi Customer Support
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|