feat(frontend): rebuild auth around mobile-first flow

src/views/ResetPasswordConfirm.tsx

@@ -1,77 +1,77 @@
 "use client";
 
-import { useState } from 'react';
-import { useParams, useNavigate } from '@/lib/router';
-import { useToast } from '@/hooks/use-toast';
-import { api } from '@/lib/api';
-import { resolveErrorMessage } from '@/lib/utils';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
+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 navigate = useNavigate();
-  const { toast } = useToast();
-  const [password, setPassword] = useState('');
-  const [confirm, setConfirm] = useState('');
-  const [loading, setLoading] = useState(false);
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["legacy-reset-guidance", token],
+    queryFn: () => api.getLegacyResetTokenMessage(token || ""),
+    retry: false,
+  });
 
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!token) {
-      toast({ title: 'توکن نامعتبر است', variant: 'destructive' });
-      return;
-    }
-    if (password.length < 8) {
-      toast({ title: 'رمز عبور کوتاه است', description: 'حداقل ۸ کاراکتر', variant: 'destructive' });
-      return;
-    }
-    if (password !== confirm) {
-      toast({ title: 'عدم تطابق', description: 'تکرار رمز با رمز جدید یکسان نیست', variant: 'destructive' });
-      return;
-    }
-    try {
-      setLoading(true);
-      await api.resetPasswordConfirm(token, password);
-      toast({ title: 'رمز عبور با موفقیت تغییر کرد', variant: 'success' });
-      navigate('/auth');
-    } catch (error: unknown) {
-      toast({
-        title: 'خطا',
-        description: resolveErrorMessage(error, 'مشکلی رخ داد'),
-        variant: 'destructive',
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
+  const message = isError
+    ? resolveErrorMessage(error, "این مسیر دیگر برای بازیابی رمز عبور فعال نیست.")
+    : data?.message ||
+      "لینک بازیابی ایمیلی غیرفعال شده است. برای ادامه از بازیابی با موبایل یا ورود با گوگل استفاده کنید.";
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
-      <Card className="w-full max-w-md" dir="rtl">
-        <CardHeader>
-          <CardTitle>تعیین رمز جدید</CardTitle>
-          <CardDescription>رمز عبور جدید را وارد کنید</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={onSubmit} className="space-y-4">
-            <div>
-              <Label htmlFor="password">رمز عبور جدید</Label>
-              <Input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
+    <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>
-            <div>
-              <Label htmlFor="confirm">تکرار رمز</Label>
-              <Input id="confirm" type="password" required value={confirm} onChange={(e) => setConfirm(e.target.value)} />
+            <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>
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? 'در حال ثبت...' : 'ثبت رمز جدید'}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+
+            <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>
   );
 }
-