99 lines
4.1 KiB
JavaScript
99 lines
4.1 KiB
JavaScript
"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;
|