GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dedicated notifications page

Browse Source 
Replace the bell popover with an RTL notification inbox, inline Markdown details, read filters, and explicit destination and delete actions. Remove retired email-link screens and client calls.
This commit is contained in:
Amirhossein Khalili
2026-09-26 12:23:18 +03:30
parent b49747e822
commit c714c32a58
15 changed files with 308 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/ResetPasswordConfirm.tsx
View File

@@ -1,77 +0,0 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { AlertTriangle, ArrowLeft, Loader2, ShieldAlert } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/api";
import { Link, useParams } from "@/lib/router";
import { resolveErrorMessage } from "@/lib/utils";
export default function ResetPasswordConfirm() {
const { token } = useParams<{ token: string }>();
const { data, isLoading, isError, error } = useQuery({
queryKey: ["legacy-reset-guidance", token],
queryFn: () => api.getLegacyResetTokenMessage(token || ""),
retry: false,
});
const message = isError
? resolveErrorMessage(error, "این مسیر دیگر برای بازیابی رمز عبور فعال نیست.")
: data?.message ||
"لینک بازیابی ایمیلی غیرفعال شده است. برای ادامه از بازیابی با موبایل یا ورود با گوگل استفاده کنید.";
return (
<div className="min-h-screen bg-background px-4 py-10" dir="rtl">
<div className="mx-auto max-w-2xl">
<Card className="border-border/70 bg-background/90 shadow-xl">
<CardHeader className="text-right">
<div className="mb-4 inline-flex rounded-2xl border border-amber-400/30 bg-amber-500/10 p-3 text-amber-700 dark:text-amber-100">
<ShieldAlert className="h-5 w-5" />
</div>
<CardTitle>لینک بازیابی قدیمی غیرفعال شده است</CardTitle>
<CardDescription className="leading-7">
مسیرهای مبتنی بر ایمیل دیگر برای بازیابی حساب استفاده نمی‌شوند.
</CardDescription>
</CardHeader>
<CardContent className="space-y-5 text-right">
<div className="rounded-[1.5rem] border border-border/70 bg-muted/25 p-4 text-sm leading-7 text-muted-foreground">
{isLoading ? (
<span className="flex items-center justify-end gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
در حال دریافت راهنمای بازیابی...
</span>
) : (
message
)}
</div>
<div className="rounded-[1.5rem] border border-amber-400/30 bg-amber-500/10 p-4 text-sm leading-7 text-amber-900 dark:text-amber-100">
<div className="flex items-start justify-between gap-3">
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" />
<div>
<p className="font-semibold">راه جایگزین</p>
<p className="mt-2">
از صفحه بازیابی با موبایل استفاده کنید. اگر موبایل ثبت‌شده را هم در دسترس ندارید، ورود با گوگل و همان ایمیل قبلی بهترین مسیر بازیابی است.
</p>
</div>
</div>
</div>
<div className="grid gap-3 sm:grid-cols-2">
<Button asChild className="h-12 rounded-2xl">
<Link to="/reset-password">بازیابی با موبایل</Link>
</Button>
<Button asChild variant="outline" className="h-12 rounded-2xl">
<Link to="/auth">
<ArrowLeft className="ml-2 h-4 w-4" />
بازگشت به ورود
</Link>
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
);
}

77
src/views/VerifyEmail.tsx
View File

@@ -1,77 +0,0 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { AlertTriangle, ArrowLeft, Loader2, MailWarning } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/lib/api";
import { Link, useParams } from "@/lib/router";
import { resolveErrorMessage } from "@/lib/utils";
export default function VerifyEmail() {
const { token } = useParams<{ token: string }>();
const { data, isLoading, isError, error } = useQuery({
queryKey: ["legacy-email-guidance", token],
queryFn: () => api.getLegacyVerifyEmailMessage(token || ""),
retry: false,
});
const message = isError
? resolveErrorMessage(error, "تأیید ایمیل دیگر برای ورود و بازیابی حساب استفاده نمی‌شود.")
: data?.message ||
"تأیید ایمیل غیرفعال شده است. برای ادامه باید موبایل خود را تأیید کنید یا با همان حساب گوگل مرتبط وارد شوید.";
return (
<div className="min-h-screen bg-background px-4 py-10" dir="rtl">
<div className="mx-auto max-w-2xl">
<Card className="border-border/70 bg-background/90 shadow-xl">
<CardHeader className="text-right">
<div className="mb-4 inline-flex rounded-2xl border border-amber-400/30 bg-amber-500/10 p-3 text-amber-700 dark:text-amber-100">
<MailWarning className="h-5 w-5" />
</div>
<CardTitle>تأیید ایمیل کنار گذاشته شده است</CardTitle>
<CardDescription className="leading-7">
دسترسی کاربران به ایمیل محدود شده و مسیر تأیید حساب به موبایل و گوگل منتقل شده است.
</CardDescription>
</CardHeader>
<CardContent className="space-y-5 text-right">
<div className="rounded-[1.5rem] border border-border/70 bg-muted/25 p-4 text-sm leading-7 text-muted-foreground">
{isLoading ? (
<span className="flex items-center justify-end gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
در حال دریافت پیام راهنما...
</span>
) : (
message
)}
</div>
<div className="rounded-[1.5rem] border border-amber-400/30 bg-amber-500/10 p-4 text-sm leading-7 text-amber-900 dark:text-amber-100">
<div className="flex items-start justify-between gap-3">
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" />
<div>
<p className="font-semibold">برای کاربران قدیمی</p>
<p className="mt-2">
اگر حساب شما قبلاً با ایمیل ساخته شده است، از صفحه ورود گزینه گوگل را بزنید تا در صورت تطابق ایمیل، حساب‌تان به موبایل متصل شود.
</p>
</div>
</div>
</div>
<div className="grid gap-3 sm:grid-cols-2">
<Button asChild className="h-12 rounded-2xl">
<Link to="/auth">ورود و اتصال حساب</Link>
</Button>
<Button asChild variant="outline" className="h-12 rounded-2xl">
<Link to="/reset-password">
<ArrowLeft className="ml-2 h-4 w-4" />
بازیابی با موبایل
</Link>
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
);
}