158 lines
6.7 KiB
TypeScript
158 lines
6.7 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react";
|
||
import { useState } from "react";
|
||
import { useHistory } from "react-router-dom";
|
||
|
||
import { toast } from 'sonner';
|
||
import { connect } from '../confconnect';
|
||
import { getRouteLogin } from "../shared/consts/router";
|
||
// import axios from 'axios';
|
||
|
||
|
||
//НАДО НА БЕКЕНДЕ НАСТРОИТЬ ЗАДЕРЖКУ + перебрасывает на auth/login, а надо на /login + ОТПРАВКИ ФОРМЫ И СТИЛИ ТАМ ДРУГИЕ
|
||
|
||
const ForgotPassword: React.FC = () => {
|
||
const history = useHistory()
|
||
const [email, setEmail] = useState("")
|
||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsSubmitted(true);
|
||
|
||
try {
|
||
await connect.post('/reset-password/api/add-request', { email });
|
||
toast.success('Письмо для сброса пароля отправлено.', {
|
||
richColors: true,
|
||
});
|
||
|
||
|
||
// Задержка перед переходом
|
||
history.push(getRouteLogin());
|
||
|
||
// Обработка ошибок, например, если пользователь не найден
|
||
setIsSubmitted(false);
|
||
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
} catch (error: any) {
|
||
setIsSubmitted(false);
|
||
toast.error('Ошибка авторизации!', {
|
||
richColors: true,
|
||
});
|
||
|
||
console.error(error);
|
||
}
|
||
|
||
// Можно убрать или оставить в зависимости от логики
|
||
// setIsSubmitted(true); // Уже установлено в начале
|
||
}
|
||
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center p-4">
|
||
<div className="w-full max-w-md relative">
|
||
{/* Back Button */}
|
||
<button
|
||
onClick={() => history.goBack()}
|
||
className="absolute top-0 left-0 w-12 h-12 bg-white/10 backdrop-blur-lg rounded-xl flex items-center justify-center border border-white/20 text-white hover:bg-white/20 transition-all"
|
||
aria-label="Go back"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
{/* Header */}
|
||
<div className="text-center mb-8 mt-16">
|
||
{" "}
|
||
{/* Added mt-16 to push content down from back button */}
|
||
<div className="w-20 h-20 bg-white/10 backdrop-blur-2xl rounded-2xl flex items-center justify-center mx-auto mb-4 border border-white/20 shadow-2xl">
|
||
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h1 className="text-3xl font-black text-white mb-2">Забыли пароль?</h1>
|
||
<p className="text-white/80 font-medium">
|
||
{isSubmitted ? "Проверьте вашу почту" : "Введите email для восстановления пароля"}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<div className="glass-morphism rounded-3xl p-8 border border-white/20 shadow-2xl">
|
||
{!isSubmitted ? (
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
{/* Email Input */}
|
||
<div>
|
||
<label htmlFor="email" className="block text-gray-700 text-sm font-semibold mb-2 sr-only">
|
||
Электронная почта
|
||
</label>
|
||
<div className="relative">
|
||
<input
|
||
id="email"
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
className="w-full bg-white rounded-xl px-4 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#2BACBE] focus:border-transparent transition-all shadow-sm"
|
||
placeholder="Электронная почта"
|
||
required
|
||
/>
|
||
<svg
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
{/* Submit Button */}
|
||
<button
|
||
type="submit"
|
||
className="w-full bg-[#2BACBE] hover:bg-[#2099A8] text-white font-bold py-3 px-6 rounded-xl border border-[#2BACBE] transition-all duration-300 transform hover:scale-105 shadow-lg"
|
||
>
|
||
Отправить ссылку
|
||
</button>
|
||
</form>
|
||
) : (
|
||
<div className="text-center space-y-6">
|
||
{/* Success Icon */}
|
||
<div className="w-16 h-16 bg-green-500/20 backdrop-blur-lg rounded-full flex items-center justify-center mx-auto border border-green-400/30">
|
||
<svg className="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-xl font-bold text-gray-800 mb-2">Письмо отправлено!</h3>
|
||
<p className="text-gray-700/80 text-sm leading-relaxed">
|
||
Мы отправили инструкции по восстановлению пароля на адрес{" "}
|
||
<span className="font-semibold">{email}</span>
|
||
</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<p className="text-gray-700/60 text-xs mb-4">Автоматический переход через 3 секунды...</p>
|
||
<button onClick={() => history.push(getRouteLogin())} className="text-gray-700 font-semibold hover:underline">
|
||
Вернуться к входу
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ForgotPassword
|