2eb9dbfe64
Investigate and address problems related to users not receiving email confirmation messages.
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
|
|
import React from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Mail, InfoIcon, RefreshCw } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
|
|
interface EmailConfirmationProps {
|
|
email: string;
|
|
onBackToForm: () => void;
|
|
onResendEmail?: () => Promise<void>;
|
|
}
|
|
|
|
const EmailConfirmation: React.FC<EmailConfirmationProps> = ({ email, onBackToForm, onResendEmail }) => {
|
|
const navigate = useNavigate();
|
|
const [isResending, setIsResending] = useState(false);
|
|
|
|
// 이메일 재전송 핸들러
|
|
const handleResendEmail = async () => {
|
|
if (!onResendEmail) return;
|
|
|
|
setIsResending(true);
|
|
try {
|
|
await onResendEmail();
|
|
// 성공 메시지는 onResendEmail 내부에서 표시
|
|
} catch (error) {
|
|
console.error('이메일 재전송 오류:', error);
|
|
} finally {
|
|
setIsResending(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="neuro-flat p-8 mb-6">
|
|
<div className="text-center space-y-6">
|
|
<Mail className="w-16 h-16 mx-auto text-neuro-income" />
|
|
<h2 className="text-2xl font-bold">이메일 인증이 필요합니다</h2>
|
|
<p className="text-gray-600">
|
|
<strong>{email}</strong>로 인증 링크가 포함된 이메일을 보냈습니다.
|
|
이메일을 확인하고 링크를 클릭하여 계정 등록을 완료해주세요.
|
|
</p>
|
|
|
|
<Alert className="bg-blue-50 border-blue-200 my-6">
|
|
<InfoIcon className="h-5 w-5 text-blue-600" />
|
|
<AlertTitle className="text-blue-700">인증 이메일이 보이지 않나요?</AlertTitle>
|
|
<AlertDescription className="text-blue-600">
|
|
스팸 폴더를 확인해보세요. 또한 이메일 서비스에 따라 도착하는데 몇 분이 걸릴 수 있습니다.
|
|
{onResendEmail && (
|
|
<div className="mt-2">
|
|
아직도 받지 못했다면 아래 '인증 메일 재전송' 버튼을 클릭하세요.
|
|
</div>
|
|
)}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className="space-y-4 pt-4">
|
|
{onResendEmail && (
|
|
<Button
|
|
onClick={handleResendEmail}
|
|
variant="secondary"
|
|
className="w-full"
|
|
disabled={isResending}
|
|
>
|
|
{isResending ? (
|
|
<>
|
|
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
|
인증 메일 전송 중...
|
|
</>
|
|
) : (
|
|
<>
|
|
인증 메일 재전송
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
onClick={() => navigate("/login")}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
로그인 페이지로 이동
|
|
</Button>
|
|
<Button
|
|
onClick={onBackToForm}
|
|
variant="ghost"
|
|
className="w-full"
|
|
>
|
|
회원가입 양식으로 돌아가기
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmailConfirmation;
|