mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-07 20:05:41 +00:00
405 lines
15 KiB
TypeScript
405 lines
15 KiB
TypeScript
import { type FormEvent, useState } from "react";
|
|
import { parsePhoneNumberFromString } from "libphonenumber-js";
|
|
import { Eye, EyeOff, Mail, Smartphone, UserRound, ArrowUpRight, Globe, ChevronDown } from "lucide-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { useAuth } from "@/auth/useAuth";
|
|
|
|
type LoginMode = "email" | "phone" | "username";
|
|
|
|
const loginModes: Array<{
|
|
value: LoginMode;
|
|
label: string;
|
|
icon: typeof Mail;
|
|
placeholder: string;
|
|
}> = [
|
|
{ value: "email", label: "Email", icon: Mail, placeholder: "name@company.com" },
|
|
{ value: "phone", label: "Phone", icon: Smartphone, placeholder: "09XXXXXXXX" },
|
|
{ value: "username", label: "Username", icon: UserRound, placeholder: "username" },
|
|
];
|
|
|
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const usernamePattern = /^[a-zA-Z0-9._-]{3,32}$/;
|
|
|
|
const normalizeIdentifier = (mode: LoginMode, value: string) => {
|
|
const trimmed = value.trim();
|
|
|
|
if (mode === "email") {
|
|
if (!emailPattern.test(trimmed.toLowerCase())) {
|
|
throw new Error("Enter a valid email address.");
|
|
}
|
|
|
|
return trimmed.toLowerCase();
|
|
}
|
|
|
|
if (mode === "phone") {
|
|
const parsed = parsePhoneNumberFromString(trimmed, "ET");
|
|
|
|
if (!parsed?.isValid()) {
|
|
throw new Error("Enter a valid Ethiopian phone number.");
|
|
}
|
|
|
|
return parsed.number;
|
|
}
|
|
|
|
if (!usernamePattern.test(trimmed)) {
|
|
throw new Error("Username must be 3-32 characters and use letters, numbers, ., _, or -.");
|
|
}
|
|
|
|
return trimmed;
|
|
};
|
|
|
|
const LOGIN_IMAGE = "/assets/login.png";
|
|
const EDR_LOGO = "/assets/logo.svg";
|
|
|
|
const fieldClass =
|
|
"h-11 w-full rounded-xl border border-gray-200/90 bg-white px-4 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 outline-none transition-all duration-200 hover:border-gray-300 focus:border-primary focus:bg-white focus:ring-4 focus:ring-primary/10";
|
|
|
|
const primaryButtonClass =
|
|
"h-11 w-full rounded-full bg-primary text-sm font-semibold text-primary-foreground shadow-[0_8px_20px_-6px_rgba(16,94,52,0.5)] transition-all duration-200 hover:bg-primary/90 hover:shadow-[0_10px_24px_-6px_rgba(16,94,52,0.55)] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none";
|
|
|
|
const LeftPanelDecor = () => (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
|
|
<svg
|
|
className="absolute -bottom-24 -left-24 h-[420px] w-[420px] text-white/[0.07]"
|
|
viewBox="0 0 400 400"
|
|
fill="none"
|
|
>
|
|
{[0, 1, 2, 3, 4, 5].map((ring) => (
|
|
<circle key={ring} cx="200" cy="200" r={60 + ring * 36} stroke="currentColor" strokeWidth="1" />
|
|
))}
|
|
</svg>
|
|
<div className="absolute right-0 top-0 h-40 w-40 rounded-full bg-white/[0.06] blur-2xl" />
|
|
</div>
|
|
);
|
|
|
|
const RightPanelDecor = () => (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
|
|
<div className="absolute -right-16 -top-20 h-56 w-56 rounded-full bg-primary/[0.06] blur-3xl" />
|
|
<div className="absolute -bottom-12 left-1/4 h-40 w-40 rounded-full bg-primary/[0.04] blur-2xl" />
|
|
<svg className="absolute inset-0 h-full w-full text-gray-200/40" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="login-grid" width="28" height="28" patternUnits="userSpaceOnUse">
|
|
<circle cx="1" cy="1" r="0.75" fill="currentColor" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#login-grid)" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
|
|
const LeftPanel = () => (
|
|
<div className="relative hidden shrink-0 flex-col overflow-hidden rounded-2xl shadow-[0_8px_32px_rgba(15,23,42,0.1)] lg:flex lg:h-auto lg:min-h-0 lg:flex-1 lg:basis-1/2 lg:rounded-[28px]">
|
|
<img
|
|
src={LOGIN_IMAGE}
|
|
alt="Ethio Djibouti Railway"
|
|
className="absolute inset-0 h-full w-full object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0a2e1a]/92 via-[#0f4a2a]/55 to-[#1a5c34]/45" />
|
|
<LeftPanelDecor />
|
|
|
|
<div className="relative z-10 flex shrink-0 items-center justify-between px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
|
|
<img src={EDR_LOGO} alt="EDR Freight" className="h-7 w-auto brightness-0 invert sm:h-9" />
|
|
<a
|
|
href="#"
|
|
className="flex items-center gap-1.5 rounded-full border border-white/70 bg-white/10 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/20 sm:px-4 sm:py-2 sm:text-sm"
|
|
>
|
|
Support
|
|
<ArrowUpRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="relative z-10 mt-auto hidden px-8 pb-8 lg:block">
|
|
<div className="max-w-md rounded-2xl border border-white/15 bg-black/30 p-5 backdrop-blur-md">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<div className="h-2 w-2 shrink-0 rounded-full bg-primary" />
|
|
<span className="text-sm font-semibold text-white">
|
|
Empower Your Freight Operations
|
|
</span>
|
|
</div>
|
|
<p className="text-sm leading-relaxed text-white/85">
|
|
Sign in to manage bookings, track cargo, and run logistics operations on the
|
|
Ethio Djibouti Railway freight platform.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const LanguageSelector = () => (
|
|
<div className="flex cursor-pointer items-center gap-1.5 rounded-full border border-gray-200/80 bg-white px-3 py-1.5 text-sm text-gray-600 shadow-sm">
|
|
<Globe className="h-4 w-4 text-gray-500" />
|
|
<span>Eng</span>
|
|
<ChevronDown className="h-4 w-4 text-gray-400" />
|
|
</div>
|
|
);
|
|
|
|
const FormFooter = () => (
|
|
<div className="relative z-10 flex shrink-0 flex-col items-center justify-between gap-3 border-t border-gray-100 px-4 py-4 text-xs text-gray-400 sm:flex-row sm:gap-4 sm:px-6 sm:py-4 lg:px-8 lg:pb-6">
|
|
<span className="shrink-0">© 2026 EDR Freight</span>
|
|
<div className="flex flex-wrap items-center justify-center gap-3 sm:justify-end sm:gap-6">
|
|
<a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
|
|
Terms & Conditions
|
|
</a>
|
|
<a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
|
|
Privacy Policy
|
|
</a>
|
|
<a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
|
|
Help & Support
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const LoginPage = () => {
|
|
const navigate = useNavigate();
|
|
const { login, verifyMfa } = useAuth();
|
|
const [mode, setMode] = useState<LoginMode>("email");
|
|
const [identifier, setIdentifier] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [otp, setOtp] = useState("");
|
|
const [needsMfa, setNeedsMfa] = useState(false);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [normalizedIdentifier, setNormalizedIdentifier] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const currentMode = loginModes.find((item) => item.value === mode)!;
|
|
|
|
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const normalized = normalizeIdentifier(mode, identifier);
|
|
setNormalizedIdentifier(normalized);
|
|
|
|
const result = await login({ email: normalized, password });
|
|
console.log(result)
|
|
if (result.mfaRequired) {
|
|
setNeedsMfa(true);
|
|
return;
|
|
}
|
|
|
|
// navigate("/dashboard/overview", { replace: true });
|
|
} catch {
|
|
setError("Unable to sign in with those credentials.");
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleVerifyMfa = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
await verifyMfa({ email: normalizedIdentifier, otp: otp.trim() });
|
|
navigate("/dashboard/overview", { replace: true });
|
|
} catch {
|
|
setError("Unable to verify the one-time code.");
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const loginForm = (
|
|
<form className="flex w-full flex-col" onSubmit={handleSubmit}>
|
|
<div className="mb-4 flex justify-center sm:mb-6">
|
|
<img src={EDR_LOGO} alt="EDR Freight" className="h-9 w-auto sm:h-11" />
|
|
</div>
|
|
|
|
<div className="mb-4 space-y-1.5 text-center sm:mb-5">
|
|
<h1 className="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">Get Started</h1>
|
|
<p className="text-sm leading-relaxed text-gray-500">
|
|
Log in to access the freight backoffice & explore all logistics resources.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col gap-4">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-medium text-gray-800">Sign in method</label>
|
|
<div className="relative">
|
|
<select
|
|
value={mode}
|
|
onChange={(event) => setMode(event.target.value as LoginMode)}
|
|
className={`${fieldClass} appearance-none pr-10`}
|
|
>
|
|
{loginModes.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-medium text-gray-800">
|
|
{currentMode.label} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
value={identifier}
|
|
onChange={(event) => setIdentifier(event.target.value)}
|
|
placeholder={currentMode.placeholder}
|
|
className={fieldClass}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-medium text-gray-800">
|
|
Password <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showPassword ? "text" : "password"}
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
placeholder="Enter your password"
|
|
className={`${fieldClass} pr-11`}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword((current) => !current)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 transition-colors hover:text-gray-600"
|
|
aria-label={showPassword ? "Hide password" : "Show password"}
|
|
>
|
|
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="flex cursor-pointer items-start gap-2.5">
|
|
<input
|
|
type="checkbox"
|
|
className="mt-0.5 h-4 w-4 shrink-0 cursor-pointer rounded-md border-gray-300 text-primary transition-colors focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
|
|
/>
|
|
<span className="text-sm leading-snug text-gray-600">
|
|
I agree to EDR Freight{" "}
|
|
<a href="#" className="font-semibold text-primary hover:underline">
|
|
Terms & Conditions
|
|
</a>
|
|
.
|
|
</span>
|
|
</label>
|
|
|
|
{error ? (
|
|
<div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<button type="submit" disabled={submitting} className={primaryButtonClass}>
|
|
{submitting ? "Signing in..." : "Sign In"}
|
|
</button>
|
|
|
|
<p className="text-center text-sm text-gray-500">
|
|
Need an account?{" "}
|
|
<a href="#" className="font-semibold text-primary hover:underline">
|
|
Contact your admin
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
);
|
|
|
|
const mfaForm = (
|
|
<form className="flex w-full flex-col" onSubmit={handleVerifyMfa}>
|
|
<div className="mb-4 flex justify-center sm:mb-6">
|
|
<img src={EDR_LOGO} alt="EDR Freight" className="h-9 w-auto sm:h-11" />
|
|
</div>
|
|
|
|
<div className="mb-4 space-y-1.5 text-center sm:mb-5">
|
|
<h1 className="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
|
|
Multi-factor verification
|
|
</h1>
|
|
<p className="text-sm leading-relaxed text-gray-500">
|
|
We sent a verification code to{" "}
|
|
<span className="font-medium text-gray-700">{normalizedIdentifier}</span>. Enter it below
|
|
to complete sign in.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col gap-4">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-medium text-gray-800">
|
|
Verification code <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
value={otp}
|
|
onChange={(event) => setOtp(event.target.value)}
|
|
placeholder="Enter the code"
|
|
className={fieldClass}
|
|
/>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex w-full gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setNeedsMfa(false);
|
|
setOtp("");
|
|
setError(null);
|
|
}}
|
|
className="h-11 min-w-0 flex-1 rounded-full border border-gray-200 bg-white text-sm font-semibold text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50"
|
|
>
|
|
Back
|
|
</button>
|
|
<button type="submit" disabled={submitting} className={`${primaryButtonClass} min-w-0 flex-1`}>
|
|
{submitting ? "Verifying..." : "Verify"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<div
|
|
className="flex h-[100dvh] overflow-hidden bg-[#e8eaef] px-4 py-3 antialiased sm:px-6 sm:py-4 md:px-[70px]"
|
|
style={{ fontFamily: "'Outfit', var(--font-sans)" }}
|
|
>
|
|
<div className="flex h-full min-h-0 w-full flex-col gap-3 lg:flex-row lg:gap-4">
|
|
<LeftPanel />
|
|
|
|
<div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-[#f5f7fa] shadow-[0_8px_32px_rgba(15,23,42,0.08)] lg:basis-1/2 lg:rounded-[28px]">
|
|
<RightPanelDecor />
|
|
|
|
<div className="relative z-10 flex shrink-0 justify-end px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
|
|
<LanguageSelector />
|
|
</div>
|
|
|
|
<div className="relative z-10 min-h-0 flex-1 overflow-y-auto overscroll-contain">
|
|
<div className="flex min-h-full justify-center px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
|
|
<div className="my-auto w-full max-w-xl rounded-3xl border border-gray-100/80 bg-white px-5 py-6 shadow-[0_4px_24px_rgba(15,23,42,0.06)] sm:px-7 sm:py-8 lg:px-9 lg:py-9">
|
|
{!needsMfa ? loginForm : mfaForm}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<FormFooter />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|