Init front

app/recPassword/page.jsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const RecPasswordPage = () => {
+    const router = useRouter();
+    const [email, setEmail] = useState("");
+    const [emailSent, setEmailSent] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const isEmailValid = emailRegex.test(email);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!isEmailValid) return;
+
+        // имитация запроса на бэк
+        try {
+            setIsLoading(true);
+
+            await new Promise((resolve) => setTimeout(resolve, 1000)); // фейковый запрос [web:254][web:264]
+
+            setEmailSent(true);
+            // навигация на ввод кода
+            router.push("/recPasswordCode");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
+            <div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
+                <div className="flex items-center mb-4">
+                    <button
+                        type="button"
+                        onClick={() => router.back()}
+                        className="text-white text-sm font-montserrat hover:underline"
+                    >
+                        Назад
+                    </button>
+                    <span className="flex-1 text-center font-montserrat text-white font-extrabold text-xl sm:text-2xl">
+                        Восстановление пароля
+                    </span>
+                    {/* Пустой блок для симметрии по ширине с кнопкой Назад */}
+                    <span className="w-[60px]" />
+                </div>
+
+                {emailSent && (
+                    <div
+                        className="mb-4 w-full bg-green-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-xl flex items-center justify-center shadow-md"
+                        role="status"
+                    >
+                        Если почта существует, ссылка для восстановления отправлена
+                    </div>
+                )}
+
+                <form onSubmit={handleSubmit} className="mt-2 space-y-4">
+                    {/* Почта */}
+                    <div className="space-y-1">
+                        <label className="block font-montserrat font-extrabold text-xs text-white">
+                            Почта
+                        </label>
+                        <input
+                            type="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
+                        />
+                        {!isEmailValid && email.length > 0 && (
+                            <p className="text-[11px] text-red-600 font-montserrat">
+                                Введите корректный email
+                            </p>
+                        )}
+                    </div>
+
+                    {/* Кнопка Восстановить */}
+                    <button
+                        type="submit"
+                        disabled={!isEmailValid || isLoading}
+                        className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
+    ${isEmailValid && !isLoading
+                                ? "bg-green-500 text-white hover:bg-green-600"
+                                : "bg-white text-[#C4C4C4] cursor-not-allowed"
+                            }`}
+                    >
+                        {isLoading ? "Отправка..." : "Восстановить"}
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default RecPasswordPage;