Forget Password

frontend/app/auth/forget-password/page.tsx

@@ -0,0 +1,9 @@
+import ForgetPassword from "@/components/forget-password";
+
+export default function ForgetPasswordPage() {
+  return (
+    <div className="flex items-center justify-center h-[90vh]">
+      <ForgetPassword />
+    </div>
+  );
+}

frontend/app/auth/reset-password/[token]/page.tsx

@@ -0,0 +1,13 @@
+import { ResetPasswordForm } from "@/components/auth/reset-password-form";
+
+export default function UserSettingsPage({
+  params,
+}: {
+  params: { token: string };
+}) {
+  return (
+    <div className="flex items-center justify-center h-[90vh]">
+      <ResetPasswordForm token={params.token} />
+    </div>
+  );
+}

frontend/components/auth/login-form.tsx

@@ -62,8 +62,10 @@ export function LoginForm() {
           <div className="grid gap-2">
             <div className="flex items-center">
               <Label htmlFor="password">Password</Label>
-              {/* TODO: Link to forget password */}
-              <Link href="#" className="ml-auto inline-block text-sm underline">
+              <Link
+                href="/auth/forget-password"
+                className="ml-auto inline-block text-sm underline"
+              >
                 Forgot your password?
               </Link>
             </div>
@@ -93,7 +95,7 @@ export function LoginForm() {
           </Button>
         </form>
         <div className="mt-4 text-center text-sm">
-          Don&apos;t have an account? {/* TODO: Link to sign up link */}
+          Don&apos;t have an account?{" "}
           <Link href="/auth/signup" className="underline">
             Sign up
           </Link>

frontend/components/auth/reset-password-form.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { resetPassword } from "@/lib/reset-password";
+import { useToast } from "@/components/hooks/use-toast";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function ResetPasswordForm({ token }: { token: string }) {
+  const [password, setPassword] = useState("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState("");
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    // TODO: Add validation for password
+    if (password !== passwordConfirmation) {
+      toast({
+        title: "Password Mismatch",
+        description: "The passwords you entered do not match",
+      });
+      return;
+    }
+    const res = await resetPassword(token, password);
+    if (!res.ok) {
+      toast({
+        title: "Unknown Error",
+        description: "An unexpected error has occurred",
+      });
+    }
+    switch (res.status) {
+      case 200:
+        toast({
+          title: "Success",
+          description: "Your password has been reset!",
+        });
+        setTimeout(() => router.push("/auth/login"), 500);
+        break;
+      case 500:
+        toast({
+          title: "Server Error",
+          description: "The server encountered an error",
+        });
+        break;
+      default:
+        toast({
+          title: "Unknown Error",
+          description: "An unexpected error has occured",
+        });
+        break;
+    }
+  };
+
+  return (
+    <Card className="mx-auto w-96 max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-2xl">Reset Password</CardTitle>
+        <CardDescription>Enter your new password below</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="grid gap-4">
+          <div className="grid gap-2">
+            <div className="flex items-center">
+              <Label htmlFor="password">Password</Label>
+            </div>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          <div className="grid gap-2">
+            <div className="flex items-center">
+              <Label htmlFor="passwordConfirmation">
+                Password Confirmation
+              </Label>
+            </div>
+            <Input
+              id="passwordConfirmation"
+              type="password"
+              value={passwordConfirmation}
+              onChange={(e) => setPasswordConfirmation(e.target.value)}
+              required
+            />
+          </div>
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={!password || !passwordConfirmation}
+          >
+            Reset Password
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

frontend/components/auth/sign-up-form.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { toast } from "@/components/hooks/use-toast";
 import { signUp } from "@/lib/signup";
 
 import { Button } from "@/components/ui/button";
@@ -15,7 +16,6 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { toast } from "@/hooks/use-toast";
 
 export function SignUpForm() {
   const [username, setUsername] = useState("");

frontend/components/forget-password.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+
+const ForgetPassword: React.FC = () => {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError("");
+    setSuccess(false);
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (!emailRegex.test(email)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        "http://localhost:3001/users/forget-password",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ email }),
+        }
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(
+          errorData.message || "Failed to request password reset"
+        );
+      }
+      setSuccess(true);
+    } catch (error) {
+      console.error("Error requesting password reset:", error);
+      setError(
+        error instanceof Error
+          ? error.message
+          : "Failed to send reset link. Please try again."
+      );
+    }
+  };
+
+  return (
+    <Card className="max-w-xl mx-auto">
+      <CardHeader>
+        <CardTitle>Reset Password</CardTitle>
+        <CardDescription>
+          Enter your email to receive a password reset link.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+          <Button type="submit" className="w-full">
+            Send Reset Link
+          </Button>
+        </form>
+        {error && (
+          <Alert variant="destructive" className="mt-4">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+        {success && (
+          <Alert className="mt-4">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Success</AlertTitle>
+            <AlertDescription>
+              Password reset link has been sent to your email.
+            </AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+      <CardFooter>
+        <Link href="/auth/login" className="text-sm underline">
+          Return to login
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default ForgetPassword;