Merge pull request #137 from DevLoversTeam/feat/signup-email-verification

 (SP: 3) [Backend][Frontend][UI] Implement secure authentication lifecycle with email verification and password recovery

Author: ViktorSvertoka

frontend/app/[locale]/forgot-password/page.tsx

@@ -0,0 +1,118 @@
+"use client";
+import { Link } from "@/i18n/routing";
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+export default function ForgotPasswordPage() {
+    const searchParams = useSearchParams();
+    const returnTo = searchParams.get("returnTo");
+
+    const [loading, setLoading] = useState(false);
+    const [email, setEmail] = useState("");
+    const [submitted, setSubmitted] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+
+        const res = await fetch("/api/auth/password-reset", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email }),
+        });
+
+        setLoading(false);
+
+        if (!res.ok) {
+            setError("Something went wrong. Please try again.");
+            return;
+        }
+
+        setSubmitted(true);
+    }
+
+    return (
+        <div className="mx-auto max-w-sm py-12">
+            <h1 className="mb-6 text-2xl font-semibold">
+                Forgot password
+            </h1>
+
+            {submitted ? (
+                <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
+                    <p>
+                        If an account for{" "}
+                        <strong>{email}</strong> exists, we’ve sent a
+                        password reset link.
+                    </p>
+
+                    <p className="mt-2">
+                        Please check your inbox and follow the
+                        instructions to reset your password.
+                    </p>
+
+                    <Link
+                        href={
+                            returnTo
+                                ? `/login?returnTo=${encodeURIComponent(returnTo)}`
+                                : "/login"
+                        }
+                        className="mt-4 inline-block underline"
+                    >
+                        Back to login
+                    </Link>
+                </div>
+            ) : (
+                <form onSubmit={onSubmit} className="space-y-4">
+                    <p className="text-sm text-gray-600">
+                        Enter your email address and we’ll send
+                        you a link to reset your password.
+                    </p>
+
+                    <input
+                        type="email"
+                        required
+                        placeholder="Email"
+                        value={email}
+                        onChange={e => setEmail(e.target.value)}
+                        className="w-full rounded border px-3 py-2"
+                    />
+
+                    {error && (
+                        <p className="text-sm text-red-600">
+                            {error}
+                        </p>
+                    )}
+
+                    <Button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full"
+                    >
+                        {loading
+                            ? "Sending reset link..."
+                            : "Send reset link"}
+                    </Button>
+                </form>
+            )}
+
+            {!submitted && (
+                <p className="mt-4 text-sm text-gray-600">
+                    Remembered your password?{" "}
+                    <Link
+                        href={
+                            returnTo
+                                ? `/login?returnTo=${encodeURIComponent(returnTo)}`
+                                : "/login"
+                        }
+                        className="underline"
+                    >
+                        Log in
+                    </Link>
+                </p>
+            )}
+        </div>
+    );
+}

frontend/app/[locale]/login/page.tsx

@@ -1,46 +1,65 @@
 "use client";
 
-import { useLocale } from 'next-intl';
-import { Link } from '@/i18n/routing';
+import { useLocale } from "next-intl";
+import { Link } from "@/i18n/routing";
 import { useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { getPendingQuizResult, clearPendingQuizResult } from "@/lib/quiz/guest-quiz";
 import { Button } from "@/components/ui/button";
-import { OAuthButtons } from '@/components/auth/OAuthButtons';
+import { OAuthButtons } from "@/components/auth/OAuthButtons";
 
 export default function LoginPage() {
   const searchParams = useSearchParams();
   const returnTo = searchParams.get("returnTo");
   const locale = useLocale();
+
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const [email, setEmail] = useState("");
+  const [verificationSent, setVerificationSent] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
-    setError(null);
+    setErrorMessage(null);
+    setErrorCode(null);
+    setVerificationSent(false);
 
     const formData = new FormData(e.currentTarget);
+    const emailValue = String(formData.get("email") || "");
+    setEmail(emailValue);
 
     const res = await fetch("/api/auth/login", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        email: formData.get("email"),
+        email: emailValue,
         password: formData.get("password"),
       }),
     });
 
+    const data = await res.json().catch(() => null);
     setLoading(false);
 
     if (!res.ok) {
-      setError("Invalid email or password");
+      setErrorCode(data?.code ?? null);
+
+      if (data?.code === "EMAIL_NOT_VERIFIED") {
+        setErrorMessage(
+          "Your email address is not verified. Please check your inbox."
+        );
+      } else {
+        setErrorMessage("Invalid email or password");
+      }
+
       return;
     }
 
-    const data = await res.json();
     const pendingResult = getPendingQuizResult();
-    if (pendingResult && data.userId) {
+
+    if (pendingResult && data?.userId) {
       try {
         const quizRes = await fetch("/api/quiz/guest-result", {
           method: "POST",
@@ -53,32 +72,52 @@ export default function LoginPage() {
             timeSpentSeconds: pendingResult.timeSpentSeconds,
           }),
         });
+
         if (!quizRes.ok) {
           throw new Error(`Failed to save quiz result: ${quizRes.status}`);
         }
+
         const result = await quizRes.json();
 
         if (result.success) {
-          sessionStorage.setItem('quiz_just_saved', JSON.stringify({
-            score: result.score,
-            total: result.totalQuestions,
-            percentage: result.percentage,
-            pointsAwarded: result.pointsAwarded,
-            quizSlug: pendingResult.quizSlug,
-          }));
+          sessionStorage.setItem(
+            "quiz_just_saved",
+            JSON.stringify({
+              score: result.score,
+              total: result.totalQuestions,
+              percentage: result.percentage,
+              pointsAwarded: result.pointsAwarded,
+              quizSlug: pendingResult.quizSlug,
+            })
+          );
         }
       } catch (err) {
-        console.error('Failed to save quiz result:', err);
+        console.error("Failed to save quiz result:", err);
       } finally {
         clearPendingQuizResult();
       }
 
       window.location.href = `/${locale}/dashboard`;
       return;
     }
+
     window.location.href = returnTo || `/${locale}/dashboard`;
   }
 
+  async function resendVerification() {
+    if (!email) return;
+
+    await fetch("/api/auth/resend-verification", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email }),
+    });
+
+    setVerificationSent(true);
+    setErrorCode(null);
+    setErrorMessage(null);
+  }
+
   return (
     <div className="mx-auto max-w-sm py-12">
       <h1 className="mb-6 text-2xl font-semibold">Log in</h1>
@@ -98,17 +137,62 @@ export default function LoginPage() {
           placeholder="Email"
           required
           className="w-full rounded border px-3 py-2"
+          onChange={e => setEmail(e.target.value)}
         />
 
-        <input
-          name="password"
-          type="password"
-          placeholder="Password"
-          required
-          className="w-full rounded border px-3 py-2"
-        />
-
-        {error && <p className="text-sm text-red-600">{error}</p>}
+        <div className="relative">
+          <input
+            name="password"
+            type={showPassword ? "text" : "password"}
+            placeholder="Password"
+            required
+            className="w-full rounded border px-3 py-2 pr-10"
+          />
+
+          <button
+            type="button"
+            aria-label={showPassword ? "Hide password" : "Show password"}
+            onClick={() => setShowPassword(v => !v)}
+            className="absolute inset-y-0 right-2 flex items-center text-sm text-gray-500"
+          >
+            {showPassword ? "Hide" : "Show"}
+          </button>
+        </div>
+
+        <div className="text-right">
+          <Link
+            href={
+              returnTo
+                ? `/forgot-password?returnTo=${encodeURIComponent(returnTo)}`
+                : "/forgot-password"
+            }
+            className="text-sm underline text-gray-600"
+          >
+            Forgot password?
+          </Link>
+        </div>
+
+        {errorMessage && !verificationSent && (
+          <div className="rounded-md border border-yellow-400 bg-yellow-50 p-3 text-sm text-yellow-800">
+            <p>{errorMessage}</p>
+
+            {errorCode === "EMAIL_NOT_VERIFIED" && (
+              <button
+                type="button"
+                onClick={resendVerification}
+                className="mt-2 underline"
+              >
+                Resend verification email
+              </button>
+            )}
+          </div>
+        )}
+
+        {verificationSent && (
+          <div className="rounded-md border border-green-400 bg-green-50 p-3 text-sm text-green-800">
+            Verification successfully sent to <strong>{email}</strong>
+          </div>
+        )}
 
         <Button type="submit" disabled={loading} className="w-full">
           {loading ? "Logging in..." : "Log in"}
@@ -117,10 +201,17 @@ export default function LoginPage() {
 
       <p className="mt-4 text-sm text-gray-600">
         Don’t have an account?{" "}
-        <Link href={returnTo ? `/signup?returnTo=${encodeURIComponent(returnTo)}` : '/signup'} className="underline">
+        <Link
+          href={
+            returnTo
+              ? `/signup?returnTo=${encodeURIComponent(returnTo)}`
+              : "/signup"
+          }
+          className="underline"
+        >
           Sign up
         </Link>
       </p>
     </div>
   );
-}
+}