feat: add auth page for administrator
This commit is contained in:
pahmiudahgede
parent
15f418d803
commit
b7fe0844a4
|
|
@ -0,0 +1,76 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
|
||||
const rows = new Array(150).fill(1);
|
||||
const cols = new Array(100).fill(1);
|
||||
let colors = [
|
||||
"#93c5fd",
|
||||
"#f9a8d4",
|
||||
"#86efac",
|
||||
"#fde047",
|
||||
"#fca5a5",
|
||||
"#d8b4fe",
|
||||
"#93c5fd",
|
||||
"#a5b4fc",
|
||||
"#c4b5fd"
|
||||
];
|
||||
const getRandomColor = () => {
|
||||
return colors[Math.floor(Math.random() * colors.length)];
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`
|
||||
}}
|
||||
className={cn(
|
||||
"absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{rows.map((_, i) => (
|
||||
<motion.div
|
||||
key={`row` + i}
|
||||
className="relative h-8 w-16 border-l border-slate-700"
|
||||
>
|
||||
{cols.map((_, j) => (
|
||||
<motion.div
|
||||
whileHover={{
|
||||
backgroundColor: `${getRandomColor()}`,
|
||||
transition: { duration: 0 }
|
||||
}}
|
||||
animate={{
|
||||
transition: { duration: 2 }
|
||||
}}
|
||||
key={`col` + j}
|
||||
className="relative h-8 w-16 border-t border-r border-slate-700"
|
||||
>
|
||||
{j % 2 === 0 && i % 2 === 0 ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="1.5"
|
||||
stroke="currentColor"
|
||||
className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 6v12m6-6H6"
|
||||
/>
|
||||
</svg>
|
||||
) : null}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Boxes = React.memo(BoxesCore);
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
import { cn } from "~/lib/utils";
|
||||
import { Menu } from "lucide-react";
|
||||
import {
|
||||
AnimatePresence,
|
||||
MotionValue,
|
||||
motion,
|
||||
useMotionValue,
|
||||
useSpring,
|
||||
useTransform
|
||||
} from "motion/react";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
export const FloatingDock = ({
|
||||
items,
|
||||
desktopClassName,
|
||||
mobileClassName
|
||||
}: {
|
||||
items: {
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
href: string;
|
||||
isActive?: boolean;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
desktopClassName?: string;
|
||||
mobileClassName?: string;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<FloatingDockDesktop items={items} className={desktopClassName} />
|
||||
<FloatingDockMobile items={items} className={mobileClassName} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const FloatingDockMobile = ({
|
||||
items,
|
||||
className
|
||||
}: {
|
||||
items: {
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
href: string;
|
||||
isActive?: boolean;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
className?: string;
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div className={cn("relative block md:hidden", className)}>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
layoutId="nav"
|
||||
className="absolute inset-x-0 bottom-full mb-2 flex flex-col gap-2"
|
||||
>
|
||||
{items.map((item, idx) => (
|
||||
<motion.div
|
||||
key={item.title}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: 0
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: 10,
|
||||
transition: {
|
||||
delay: idx * 0.05
|
||||
}
|
||||
}}
|
||||
transition={{ delay: (items.length - 1 - idx) * 0.05 }}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
item.onClick?.();
|
||||
setOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"flex h-10 w-10 items-center justify-center rounded-full transition-all border-2",
|
||||
item.isActive
|
||||
? "bg-blue-100 dark:bg-blue-900/50 border-blue-300 dark:border-blue-700 shadow-lg"
|
||||
: "bg-gray-50 dark:bg-neutral-900 border-transparent hover:border-gray-300 dark:hover:border-neutral-700"
|
||||
)}
|
||||
>
|
||||
<div className="h-4 w-4">{item.icon}</div>
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 dark:bg-neutral-800 hover:bg-gray-100 dark:hover:bg-neutral-700 transition-colors"
|
||||
>
|
||||
<Menu className="h-5 w-5 text-neutral-500 dark:text-neutral-400" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FloatingDockDesktop = ({
|
||||
items,
|
||||
className
|
||||
}: {
|
||||
items: {
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
href: string;
|
||||
isActive?: boolean;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
className?: string;
|
||||
}) => {
|
||||
let mouseX = useMotionValue(Infinity);
|
||||
return (
|
||||
<motion.div
|
||||
onMouseMove={(e) => mouseX.set(e.pageX)}
|
||||
onMouseLeave={() => mouseX.set(Infinity)}
|
||||
className={cn(
|
||||
"mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-gray-50/80 backdrop-blur-sm px-4 pb-3 md:flex dark:bg-neutral-900/80 border border-gray-200/50 dark:border-neutral-800/50 shadow-lg",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<IconContainer mouseX={mouseX} key={item.title} {...item} />
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
function IconContainer({
|
||||
mouseX,
|
||||
title,
|
||||
icon,
|
||||
href,
|
||||
isActive,
|
||||
onClick
|
||||
}: {
|
||||
mouseX: MotionValue;
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
href: string;
|
||||
isActive?: boolean;
|
||||
onClick?: () => void;
|
||||
}) {
|
||||
let ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
let distance = useTransform(mouseX, (val) => {
|
||||
let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
|
||||
return val - bounds.x - bounds.width / 2;
|
||||
});
|
||||
|
||||
let widthTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
|
||||
let heightTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
|
||||
|
||||
let widthTransformIcon = useTransform(distance, [-150, 0, 150], [20, 40, 20]);
|
||||
let heightTransformIcon = useTransform(
|
||||
distance,
|
||||
[-150, 0, 150],
|
||||
[20, 40, 20]
|
||||
);
|
||||
|
||||
let width = useSpring(widthTransform, {
|
||||
mass: 0.1,
|
||||
stiffness: 150,
|
||||
damping: 12
|
||||
});
|
||||
let height = useSpring(heightTransform, {
|
||||
mass: 0.1,
|
||||
stiffness: 150,
|
||||
damping: 12
|
||||
});
|
||||
|
||||
let widthIcon = useSpring(widthTransformIcon, {
|
||||
mass: 0.1,
|
||||
stiffness: 150,
|
||||
damping: 12
|
||||
});
|
||||
let heightIcon = useSpring(heightTransformIcon, {
|
||||
mass: 0.1,
|
||||
stiffness: 150,
|
||||
damping: 12
|
||||
});
|
||||
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<button onClick={onClick} className="relative">
|
||||
<motion.div
|
||||
ref={ref}
|
||||
style={{ width, height }}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
className={cn(
|
||||
"relative flex aspect-square items-center justify-center rounded-full border-2",
|
||||
isActive
|
||||
? "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/50 dark:to-blue-800/50 border-blue-300 dark:border-blue-700 shadow-lg"
|
||||
: "bg-gray-100 dark:bg-neutral-800 border-transparent hover:border-gray-300 dark:hover:border-neutral-700 hover:shadow-md"
|
||||
)}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{hovered && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10, x: "-50%" }}
|
||||
animate={{ opacity: 1, y: 0, x: "-50%" }}
|
||||
exit={{ opacity: 0, y: 2, x: "-50%" }}
|
||||
className="absolute -top-8 left-1/2 w-fit rounded-md border border-gray-200 bg-white/90 backdrop-blur-sm px-2 py-0.5 text-xs whitespace-pre text-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/90 dark:text-white shadow-lg"
|
||||
>
|
||||
{title}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<motion.div
|
||||
style={{ width: widthIcon, height: heightIcon }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
{icon}
|
||||
</motion.div>
|
||||
|
||||
{/* Active indicator */}
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId="activeIndicator"
|
||||
className="absolute -bottom-1 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { Theme, useTheme } from "remix-themes";
|
||||
import { FloatingDock } from "./floatingdocks";
|
||||
import { Sun, Moon } from "lucide-react";
|
||||
|
||||
interface ThemeFloatingDockProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ThemeFloatingDock({ className }: ThemeFloatingDockProps) {
|
||||
const [theme, setTheme] = useTheme();
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Light Mode",
|
||||
icon: (
|
||||
<Sun
|
||||
className={`h-full w-full ${
|
||||
theme === Theme.LIGHT
|
||||
? "text-yellow-500 scale-110"
|
||||
: "text-neutral-500 dark:text-neutral-400 scale-90"
|
||||
}`}
|
||||
/>
|
||||
),
|
||||
href: "#",
|
||||
isActive: theme === Theme.LIGHT,
|
||||
onClick: () => setTheme(Theme.LIGHT)
|
||||
},
|
||||
{
|
||||
title: "Dark Mode",
|
||||
icon: (
|
||||
<Moon
|
||||
className={`h-full w-full ${
|
||||
theme === Theme.DARK
|
||||
? "text-blue-400 scale-110"
|
||||
: "text-neutral-500 dark:text-neutral-400 scale-90"
|
||||
}`}
|
||||
/>
|
||||
),
|
||||
href: "#",
|
||||
isActive: theme === Theme.DARK,
|
||||
onClick: () => setTheme(Theme.DARK)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<FloatingDock
|
||||
items={items}
|
||||
desktopClassName={className}
|
||||
mobileClassName={className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,353 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import {
|
||||
Form,
|
||||
useActionData,
|
||||
useLoaderData,
|
||||
useNavigation,
|
||||
useSearchParams
|
||||
} from "@remix-run/react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
Shield,
|
||||
Mail,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
RefreshCw,
|
||||
Loader2
|
||||
} from "lucide-react";
|
||||
|
||||
interface LoaderData {
|
||||
email: string;
|
||||
otpSentAt: string;
|
||||
expiryMinutes: number;
|
||||
}
|
||||
|
||||
interface OTPActionData {
|
||||
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 email = url.searchParams.get("email");
|
||||
if (!email) {
|
||||
return redirect("/sys-rijig-administrator/sign-infirst");
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
email,
|
||||
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 email = formData.get("email") as string;
|
||||
const action = formData.get("_action") as string;
|
||||
|
||||
if (action === "resend") {
|
||||
console.log("Resending OTP to:", email);
|
||||
|
||||
return json<OTPActionData>({
|
||||
success: true,
|
||||
message: "Kode OTP baru telah dikirim ke email Anda",
|
||||
otpSentAt: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
|
||||
if (action === "verify") {
|
||||
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<OTPActionData>({ errors, success: false }, { status: 400 });
|
||||
}
|
||||
|
||||
if (otp === "1234") {
|
||||
return redirect("/sys-rijig-adminpanel/dashboard");
|
||||
}
|
||||
|
||||
return json<OTPActionData>(
|
||||
{
|
||||
errors: { otp: "Kode OTP tidak valid atau sudah kedaluwarsa" },
|
||||
success: false
|
||||
},
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
return json<OTPActionData>(
|
||||
{
|
||||
errors: { general: "Aksi tidak valid" },
|
||||
success: false
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
};
|
||||
|
||||
export default function AdminVerifyOTP() {
|
||||
const { email, otpSentAt, expiryMinutes } = useLoaderData<LoaderData>();
|
||||
const actionData = useActionData<OTPActionData>();
|
||||
const navigation = useNavigation();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [otp, setOtp] = useState(["", "", "", ""]);
|
||||
const [timeLeft, setTimeLeft] = useState(expiryMinutes * 60);
|
||||
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";
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
setCanResend(true);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (actionData?.success && actionData?.otpSentAt) {
|
||||
setTimeLeft(expiryMinutes * 60);
|
||||
setCanResend(false);
|
||||
}
|
||||
}, [actionData, expiryMinutes]);
|
||||
|
||||
const handleOtpChange = (index: number, value: string) => {
|
||||
if (!/^\d*$/.test(value)) return;
|
||||
|
||||
const newOtp = [...otp];
|
||||
newOtp[index] = value;
|
||||
setOtp(newOtp);
|
||||
|
||||
if (value && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
|
||||
if (e.key === "Backspace" && !otp[index] && index > 0) {
|
||||
inputRefs.current[index - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const maskedEmail = email.replace(/(.{2})(.*)(@.*)/, "$1***$3");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<Card className="border-0 shadow-2xl">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<div className="mx-auto mb-4 p-3 bg-green-100 rounded-full w-fit">
|
||||
<Mail className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">
|
||||
Verifikasi Email
|
||||
</CardTitle>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Masukkan kode OTP 4 digit yang telah dikirim ke
|
||||
</p>
|
||||
<p className="font-medium text-green-600">{maskedEmail}</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="email" value={email} />
|
||||
<input type="hidden" name="_action" value="verify" />
|
||||
<input type="hidden" name="otp" value={otp.join("")} />
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* OTP Input Fields */}
|
||||
<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={cn(
|
||||
"w-12 h-12 text-center text-lg font-bold",
|
||||
actionData?.errors?.otp && "border-red-500"
|
||||
)}
|
||||
autoFocus={index === 0}
|
||||
/>
|
||||
))}
|
||||
</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 bg-green-600 hover:bg-green-700"
|
||||
disabled={
|
||||
otp.join("").length !== 4 || isSubmitting || timeLeft === 0
|
||||
}
|
||||
>
|
||||
{isVerifying ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Memverifikasi...
|
||||
</>
|
||||
) : (
|
||||
"Verifikasi Kode"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
{/* Resend OTP */}
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600 mb-2">Tidak menerima kode?</p>
|
||||
<Form method="post" className="inline">
|
||||
<input type="hidden" name="email" value={email} />
|
||||
<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-3 w-3 animate-spin" />
|
||||
Mengirim...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-3 w-3" />
|
||||
Kirim Ulang OTP
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* Back to Login */}
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="/sys-rijig-administrator/sign-infirst"
|
||||
className="inline-flex items-center text-sm text-gray-600 hover:text-green-600"
|
||||
>
|
||||
<ArrowLeft className="mr-1 h-3 w-3" />
|
||||
Kembali ke Login
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Demo Info */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<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">1234</span>
|
||||
</p>
|
||||
<p>Atau tunggu countdown habis untuk test resend</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="text-center mt-6">
|
||||
<p className="text-xs text-gray-500">
|
||||
Sistem Pengelolaan Sampah Terpadu
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
import {
|
||||
json,
|
||||
redirect,
|
||||
type ActionFunctionArgs,
|
||||
type LoaderFunctionArgs
|
||||
} from "@remix-run/node";
|
||||
import { Form, useActionData, useNavigation } from "@remix-run/react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Alert, AlertDescription } from "~/components/ui/alert";
|
||||
import {
|
||||
Recycle,
|
||||
Mail,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Shield,
|
||||
AlertCircle,
|
||||
Loader2
|
||||
} from "lucide-react";
|
||||
import { Boxes } from "~/components/ui/background-boxes";
|
||||
import { ThemeFloatingDock } from "~/components/ui/floatingthemeswitch";
|
||||
|
||||
// Interface untuk action response
|
||||
interface LoginActionData {
|
||||
errors?: {
|
||||
email?: string;
|
||||
password?: string;
|
||||
general?: string;
|
||||
};
|
||||
success: boolean;
|
||||
}
|
||||
|
||||
// Loader - cek apakah user sudah login
|
||||
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
||||
// Dalam implementasi nyata, cek session/cookie
|
||||
// const session = await getSession(request.headers.get("Cookie"));
|
||||
// if (session.has("adminId")) {
|
||||
// return redirect("/admin/dashboard");
|
||||
// }
|
||||
|
||||
return json({});
|
||||
};
|
||||
|
||||
// Action untuk handle login
|
||||
export const action = async ({
|
||||
request
|
||||
}: ActionFunctionArgs): Promise<Response> => {
|
||||
const formData = await request.formData();
|
||||
const email = formData.get("email") as string;
|
||||
const password = formData.get("password") as string;
|
||||
const remember = formData.get("remember") === "on";
|
||||
|
||||
// Validation
|
||||
const errors: { email?: string; password?: string; general?: string } = {};
|
||||
|
||||
if (!email) {
|
||||
errors.email = "Email wajib diisi";
|
||||
} else if (!/\S+@\S+\.\S+/.test(email)) {
|
||||
errors.email = "Format email tidak valid";
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
errors.password = "Password wajib diisi";
|
||||
} else if (password.length < 6) {
|
||||
errors.password = "Password minimal 6 karakter";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json<LoginActionData>({ errors, success: false }, { status: 400 });
|
||||
}
|
||||
|
||||
// Simulasi autentikasi - dalam implementasi nyata, cek ke database
|
||||
if (email === "admin@wastemanagement.com" && password === "admin123") {
|
||||
// Set session dan redirect
|
||||
// const session = await getSession(request.headers.get("Cookie"));
|
||||
// session.set("adminId", "admin-001");
|
||||
// session.set("adminName", "Administrator");
|
||||
// session.set("adminEmail", email);
|
||||
|
||||
// Redirect ke OTP verification
|
||||
return redirect(
|
||||
`/sys-rijig-administator/emailotpverifyrequired?email=${encodeURIComponent(
|
||||
email
|
||||
)}`
|
||||
);
|
||||
}
|
||||
|
||||
return json<LoginActionData>(
|
||||
{
|
||||
errors: { general: "Email atau password salah" },
|
||||
success: false
|
||||
},
|
||||
{ status: 401 }
|
||||
);
|
||||
};
|
||||
|
||||
export default function AdminLogin() {
|
||||
const actionData = useActionData<LoginActionData>();
|
||||
const navigation = useNavigation();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
return (
|
||||
<div className="h-full relative w-full overflow-hidden bg-slate-900 flex flex-col items-center justify-center rounded-lg">
|
||||
<div className="absolute inset-0 w-full h-full bg-slate-900 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
|
||||
<Boxes />
|
||||
{/* <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 p-4 z-20"> */}
|
||||
<div className="min-h-screen flex items-center justify-center w-full max-w-4xl z-20">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card className="overflow-hidden border-0 shadow-2xl">
|
||||
<CardContent className="grid p-0 md:grid-cols-2">
|
||||
{/* Form Login */}
|
||||
<div className="p-6 md:p-8">
|
||||
<Form method="post" className="flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="mb-4 p-3 bg-green-100 rounded-full">
|
||||
<Shield className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Portal Administrator
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-balance mt-2">
|
||||
Sistem Pengelolaan Sampah Terpadu
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error Alert */}
|
||||
{actionData?.errors?.general && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{actionData.errors.general}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="email">Email Administrator</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="admin@wastemanagement.com"
|
||||
className={cn(
|
||||
"pl-10",
|
||||
actionData?.errors?.email && "border-red-500"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{actionData?.errors?.email && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="grid gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<a
|
||||
href="/admin/forgot-password"
|
||||
className="text-sm text-green-600 hover:text-green-800 underline-offset-2 hover:underline"
|
||||
>
|
||||
Lupa password?
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Masukkan password"
|
||||
className={cn(
|
||||
"pl-10 pr-10",
|
||||
actionData?.errors?.password && "border-red-500"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{actionData?.errors?.password && (
|
||||
<p className="text-sm text-red-600">
|
||||
{actionData.errors.password}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Remember Me */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
id="remember"
|
||||
name="remember"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
|
||||
/>
|
||||
<Label htmlFor="remember" className="text-sm">
|
||||
Ingat saya selama 30 hari
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-green-600 hover:bg-green-700"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Memverifikasi...
|
||||
</>
|
||||
) : (
|
||||
"Masuk ke Dashboard"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Demo Credentials */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<p className="text-sm font-medium text-blue-800 mb-2">
|
||||
Demo Credentials:
|
||||
</p>
|
||||
<div className="text-xs text-blue-700 space-y-1">
|
||||
<p>Email: admin@wastemanagement.com</p>
|
||||
<p>Password: admin123</p>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* Side Image */}
|
||||
<div className="bg-gradient-to-br from-green-600 to-blue-600 relative hidden md:block">
|
||||
<div className="absolute inset-0 bg-black/20"></div>
|
||||
<div className="relative h-full flex flex-col justify-center items-center text-white p-8">
|
||||
<div className="mb-6 p-4 bg-white/20 rounded-full backdrop-blur-sm">
|
||||
<Recycle className="h-16 w-16" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">
|
||||
Kelola Sistem Sampah
|
||||
</h2>
|
||||
<p className="text-white/90 text-center text-balance leading-relaxed">
|
||||
Platform terpadu untuk mengelola pengumpulan, pengolahan,
|
||||
dan monitoring sampah di seluruh wilayah dengan efisiensi
|
||||
maksimal.
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="mt-8 space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span className="text-sm">Monitoring Real-time</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span className="text-sm">Manajemen Armada</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span className="text-sm">Laporan Analytics</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span className="text-sm">Koordinasi Tim</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<ThemeFloatingDock className="fixed bottom-5 left-1/2 transform -translate-x-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue