handel login page and logout alson andel create order page to client and build spinner page and complet project structuer , create logo tamplet
This commit is contained in:
m7amedez5511
@@ -3,7 +3,8 @@
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { loginUser } from "../lib/auth";
|
||||
import { loginUser } from "../../src/lib/auth";
|
||||
import Logo from "@/src/utils/logo";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
@@ -19,9 +20,27 @@ export default function LoginPage() {
|
||||
|
||||
try {
|
||||
await loginUser(identity, password);
|
||||
router.replace("/dashboard");
|
||||
|
||||
window.location.href = "/dashboard"; // Use full page reload to ensure all client state is reset after login
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "System temporarily unavailable. Please try later.");
|
||||
// FIX: Surface specific error messages from auth.ts (invalid credentials,
|
||||
// role denial, network failure) directly to the user.
|
||||
if (err instanceof Error) {
|
||||
// Network/fetch failure signals
|
||||
if (
|
||||
err.message.includes("fetch") ||
|
||||
err.message.includes("network") ||
|
||||
err.message.includes("Failed to fetch")
|
||||
) {
|
||||
setError(
|
||||
"Unable to connect. Please check your internet connection and try again later.",
|
||||
);
|
||||
} else {
|
||||
setError(err.message);
|
||||
}
|
||||
} else {
|
||||
setError("System temporarily unavailable. Please try later.");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -31,23 +50,46 @@ export default function LoginPage() {
|
||||
<main className="min-h-screen bg-slate-100 text-slate-900">
|
||||
<section className="grid min-h-screen w-full lg:grid-cols-[1fr_1fr]">
|
||||
<aside className="relative overflow-hidden bg-linear-to-br from-blue-900 via-blue-600 to-blue-700 px-8 py-10 text-white lg:px-12 lg:py-14">
|
||||
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px)", backgroundSize: "40px 40px" }} />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px)",
|
||||
backgroundSize: "40px 40px",
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10 flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-white/30 bg-white/20">🚚</div>
|
||||
<span className="text-[22px] font-bold">LogiFlow</span>
|
||||
</div>
|
||||
<h1 className="mt-10 max-w-md text-[36px] font-bold leading-tight tracking-[-0.5px]">اللوجستيات ببساطة، والتسليم بثقة.</h1>
|
||||
<p className="mt-4 max-w-md text-[15px] leading-7 text-white/75">راقب عمليات التسليم، وقم بتنظيم السائقين، وحافظ على رؤية كل طلب من خلال تسجيل دخول آمن واحد.</p>
|
||||
<Logo />
|
||||
<h1 className="mt-10 max-w-md text-[36px] font-bold leading-tight tracking-[-0.5px]">
|
||||
اللوجستيات ببساطة، والتسليم بثقة.
|
||||
</h1>
|
||||
<p className="mt-4 max-w-md text-[15px] leading-7 text-white/75">
|
||||
راقب عمليات التسليم، وقم بتنظيم السائقين، وحافظ على رؤية كل طلب
|
||||
من خلال تسجيل دخول آمن واحد.
|
||||
</p>
|
||||
<div className="mt-8 space-y-3">
|
||||
{[
|
||||
["التنسيق اللحظي", "تتبع كل طلب من الاستلام إلى التسليم في مكان واحد."],
|
||||
["وصول آمن", "الجلسات المعتمدة على الصلاحيات تبقي مسارات العميل والإدارة منفصلة."],
|
||||
["عمليات سريعة", "استخدم لوحة الإدارة لمراجعة الحالة والتنبيهات وحركة الرحلات."],
|
||||
[
|
||||
"التنسيق اللحظي",
|
||||
"تتبع كل طلب من الاستلام إلى التسليم في مكان واحد.",
|
||||
],
|
||||
[
|
||||
"وصول آمن",
|
||||
"الجلسات المعتمدة على الصلاحيات تبقي مسارات العميل والإدارة منفصلة.",
|
||||
],
|
||||
[
|
||||
"عمليات سريعة",
|
||||
"استخدم لوحة الإدارة لمراجعة الحالة والتنبيهات وحركة الرحلات.",
|
||||
],
|
||||
].map(([title, desc]) => (
|
||||
<article key={title} className="flex items-start gap-3 rounded-[10px] border border-white/15 bg-white/10 p-3">
|
||||
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white/15 text-sm">•</div>
|
||||
<article
|
||||
key={title}
|
||||
className="flex items-start gap-3 rounded-[10px] border border-white/15 bg-white/10 p-3"
|
||||
>
|
||||
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white/15 text-sm">
|
||||
•
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold">{title}</h2>
|
||||
<p className="text-xs text-white/80">{desc}</p>
|
||||
@@ -56,23 +98,32 @@ export default function LoginPage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[12px] text-white/50">مصمم لفرق العمليات التي تحتاج إلى الوضوح والسرعة والثقة.</p>
|
||||
<p className="text-[12px] text-white/50">
|
||||
مصمم لفرق العمليات التي تحتاج إلى الوضوح والسرعة والثقة.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section className="flex items-center justify-center bg-slate-50 px-6 py-10 lg:px-8">
|
||||
<form onSubmit={handleSubmit} className="w-full max-w-100 rounded-[14px] border border-slate-200 bg-white p-8 shadow-sm">
|
||||
<p className="text-[28px] font-bold text-slate-900">مرحبًا بعودتك</p>
|
||||
<p className="mt-1 text-[14px] text-slate-500">سجل الدخول لإدارة عمليات التسليم</p>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="w-full max-w-100 rounded-[14px] border border-slate-200 bg-white p-8 shadow-sm"
|
||||
>
|
||||
<p className="text-[28px] font-bold text-slate-900">
|
||||
مرحبًا بعودتك
|
||||
</p>
|
||||
<p className="mt-1 text-[14px] text-slate-500">
|
||||
سجل الدخول لإدارة عمليات التسليم
|
||||
</p>
|
||||
|
||||
<label className="mt-6 block text-[11px] font-bold uppercase tracking-[0.5px] text-slate-500">
|
||||
البريد الإلكتروني
|
||||
البريد الإلكتروني أو رقم الهاتف أو اسم المستخدم
|
||||
<input
|
||||
autoComplete="email"
|
||||
autoComplete="username"
|
||||
className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 bg-white px-3 text-[14px] text-slate-900 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
|
||||
value={identity}
|
||||
onChange={(event) => setIdentity(event.target.value)}
|
||||
placeholder="name@company.com"
|
||||
placeholder="name@company.com / 05xxxxxxxx / username"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
@@ -91,10 +142,19 @@ export default function LoginPage() {
|
||||
</label>
|
||||
|
||||
<div className="mt-3 flex justify-end">
|
||||
<Link href="/forgot-password" className="text-[12px] text-blue-600 hover:underline">هل نسيت كلمة المرور؟</Link>
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="text-[12px] text-blue-600 hover:underline"
|
||||
>
|
||||
هل نسيت كلمة المرور؟
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{error ? <p className="mt-4 rounded-[9px] border border-red-200 bg-red-50 p-3 text-[13px] text-red-600">{error}</p> : null}
|
||||
{error ? (
|
||||
<p className="mt-4 rounded-[9px] border border-red-200 bg-red-50 p-3 text-[13px] text-red-600">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
@@ -105,7 +165,10 @@ export default function LoginPage() {
|
||||
</button>
|
||||
|
||||
<p className="mt-4 text-center text-[13px] text-slate-500">
|
||||
ليس لديك حساب؟ <Link href="/register" className="text-blue-600 hover:underline">إنشاء حساب</Link>
|
||||
ليس لديك حساب؟{" "}
|
||||
<Link href="/register" className="text-blue-600 hover:underline">
|
||||
إنشاء حساب
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user