Customize Toast with Action Button for Resending Verification on Sign…

…-In Failure

- Updated the `sign-in` failed toast notification with custom styling.
- Added an action button inside the toast that allows users to navigate to the resend verification page if sign-in fails.
- Ensured the action button is intuitive and improves user experience by providing an immediate option for verification issues.
- Tested and verified that the navigation works correctly when triggered from the toast notification.

client/src/App.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 
 import { ForgotPasswordPage } from "@/pages/forgot-password/page";
 import { ResetPasswordPage } from "@/pages/reset-password/page";
+import { ResendVerifyPage } from "@/pages/resend-verify/page";
 import VerifyEmailPage from "@/pages/verify-email/page";
 import PrivateGuard from "@/guards/private-guard";
 import { AppRoutes } from "@/constants/routes";
@@ -21,6 +22,7 @@ function App() {
           <Route path={AppRoutes.SignUp} element={<SignUpPage />} />
           <Route path={AppRoutes.SignIn} element={<SignInPage />} />
           <Route path={AppRoutes.VerifyEmail} element={<VerifyEmailPage />} />
+          <Route path={AppRoutes.ResendVerify} element={<ResendVerifyPage />} />
         </Route>
         <Route
           path={AppRoutes.ForgotPassword}

client/src/pages/resend-verify/page.tsx

@@ -0,0 +1,11 @@
+import { AuthTitle } from "@/components/auth-title";
+
+const ResendVerifyPage = () => {
+  return (
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <AuthTitle title="Resend Code" />
+    </section>
+  );
+};
+
+export { ResendVerifyPage };

client/src/pages/sign-in/_components/sign-in-form.tsx

@@ -17,7 +17,6 @@ import { Input } from "@/components/input";
 const SignInForm = () => {
   const navigate = useNavigate();
   const { setEmail, setAuthorized } = useAuthStore();
-
   const { mutate, isPending } = useMutation({
     mutationKey: [SIGNINKEY],
     mutationFn: AuthService.signIn,
@@ -26,7 +25,23 @@ const SignInForm = () => {
       setAuthorized(true);
     },
     onError: (error: ErrorResponse) => {
-      toast.error("Please verify to sign in");
+      toast.error("Please verify to sign in. Didn't get the code?", {
+        className: "gap-x-4",
+        actionButtonStyle: {
+          background: "rgb(var(--accent))",
+          color: "rgb(var(--foreground))",
+          padding: "16px",
+          marginLeft: "16px",
+          filter: `
+            drop-shadow(0 0px 25px rgb(var(--accent))) 
+            drop-shadow(0 0px 50px rgb(var(--accent)))
+          `,
+        },
+        action: {
+          label: "Resend",
+          onClick: () => navigate(AppRoutes.ResendVerify),
+        },
+      });
 
       if (error.status == 403) {
         navigate(AppRoutes.VerifyEmail);