Skip to content

feat: add email verification confirmation screen with resend option after registration #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pericharlabindhumadhavi-data wants to merge 1 commit into
base: gssoc_develop
Choose a base branch
from
Open

feat: add email verification confirmation screen with resend option after registration #262

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions RestroHub-FrontEnd/src/pages/public/Register.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ const Register = () => {
const [roles, setRoles] = useState([]);
const [rolesLoading, setRolesLoading] = useState(false);
const [rolesError, setRolesError] = useState("");
const [registeredEmail, setRegisteredEmail] = useState("");
const [showVerificationScreen, setShowVerificationScreen] = useState(false);
const [isResending, setIsResending] = useState(false);

useEffect(() => {
const fetchRoles = async () => {
Expand Down Expand Up @@ -128,8 +131,9 @@ const Register = () => {
const res = await api.post("/public/api/v1/auth/register", registerData);

if (res.data.success) {
toast.success("Registration successful! Please login.");
navigate("/login");
setRegisteredEmail(values.email);
setShowVerificationScreen(true);
toast.success("Registration successful! Please check your email.");
} else {
toast.error(res.data.message || "Registration failed");
}
Expand All @@ -141,6 +145,18 @@ const Register = () => {
},
});

const handleResendVerification = async () => {
setIsResending(true);
try {
await api.post("/public/api/v1/auth/resend-verification", { email: registeredEmail });
toast.success("Verification email resent! Please check your inbox.");
} catch (err) {
toast.error(err.response?.data?.message || "Failed to resend verification email.");
} finally {
setIsResending(false);
}
};

const inputClass = (field) =>
`w-full rounded-lg border ${
formik.touched[field] && formik.errors[field]
Expand All @@ -156,6 +172,39 @@ const Register = () => {
formik.setFieldValue("roleIds", nextRoleIds);
};

if (showVerificationScreen) {
return (
<div className="flex min-h-screen items-center justify-center bg-gray-100 px-4 py-10 dark:bg-gray-900 sm:px-6 lg:px-8">
<div className="w-full max-w-md overflow-hidden rounded-2xl border border-gray-200 bg-white p-10 shadow-xl dark:border-gray-700 dark:bg-gray-800 text-center">
<div className="mb-6 flex justify-center">
<span className="text-6xl">📧</span>
</div>
<h2 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white">Check your email</h2>
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
We sent a verification link to
</p>
<p className="mb-6 font-medium text-blue-600 dark:text-blue-400">{registeredEmail}</p>
<p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
Didn&apos;t receive the email? Check your spam folder or resend it.
</p>
<button
onClick={handleResendVerification}
disabled={isResending}
className="mb-4 flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-60 dark:bg-blue-500 dark:hover:bg-blue-600"
>
{isResending ? <><SpinnerIcon /> Resending…</> : "Resend Verification Email"}
</button>
<Link
to="/login"
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
>
Back to Sign In
</Link>
</div>
</div>
);
}

return (
<div className="flex min-h-screen items-center justify-center bg-gray-100 px-4 py-10 dark:bg-gray-900 sm:px-6 lg:px-8">
<div className="w-full max-w-[1200px] overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
Expand Down