diff --git a/app/(auth)/forgot-password/page.tsx b/app/(auth)/forgot-password/page.tsx new file mode 100644 index 0000000..b68e0b1 --- /dev/null +++ b/app/(auth)/forgot-password/page.tsx @@ -0,0 +1,75 @@ +import ComponentsAuthForgotForm from '@/components/auth/components-auth-forgot-form'; +import IconFacebookCircle from '@/components/icon/icon-facebook-circle'; +import IconGoogle from '@/components/icon/icon-google'; +import IconInstagram from '@/components/icon/icon-instagram'; +import IconTwitter from '@/components/icon/icon-twitter'; +import { Metadata } from 'next'; +import Link from 'next/link'; +import React from 'react'; + +export const metadata: Metadata = { + title: 'Forgot Password', +}; + +export default function CoverForgotPassword() { + return ( +
+
+ image +
+
+ image + image + image + image +
+
+
+
+ + Logo + +
+ Cover Image +
+
+
+ + {/* Right side form */} +
+
+ + Logo + +
+ +
+
+

+ Forgot Password +

+

+ Enter your email to receive the reset link +

+
+ + {/* forgot form */} + + +
+ Remember your password?  + + SIGN IN + +
+
+ +

+ © {new Date().getFullYear()}. Metatroncube All Rights Reserved. +

+
+
+
+
+ ); +} diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx new file mode 100644 index 0000000..d0b2492 --- /dev/null +++ b/app/(auth)/reset-password/page.tsx @@ -0,0 +1,76 @@ +import ComponentsAuthForgotForm from '@/components/auth/components-auth-forgot-form'; +import ResetPasswordForm from '@/components/auth/components-auth-reset-form'; +import IconFacebookCircle from '@/components/icon/icon-facebook-circle'; +import IconGoogle from '@/components/icon/icon-google'; +import IconInstagram from '@/components/icon/icon-instagram'; +import IconTwitter from '@/components/icon/icon-twitter'; +import { Metadata } from 'next'; +import Link from 'next/link'; +import React from 'react'; + +export const metadata: Metadata = { + title: 'Reset Password', +}; + +export default function CoverForgotPassword() { + return ( +
+
+ image +
+
+ image + image + image + image +
+
+
+
+ + Logo + +
+ Cover Image +
+
+
+ + {/* Right side form */} +
+
+ + Logo + +
+ +
+
+

+ Reset Password +

+

+ Enter the verification code you received and set your new password +

+
+ + {/* forgot form */} + + +
+ Remember your password?  + + SIGN IN + +
+
+ +

+ © {new Date().getFullYear()}. Metatroncube All Rights Reserved. +

+
+
+
+
+ ); +} diff --git a/components/auth/components-auth-forgot-form.tsx b/components/auth/components-auth-forgot-form.tsx new file mode 100644 index 0000000..0899e00 --- /dev/null +++ b/components/auth/components-auth-forgot-form.tsx @@ -0,0 +1,51 @@ +"use client"; + +import React, { useState } from "react"; +import axios from "axios"; + +export default function ForgotPasswordForm() { + const [email, setEmail] = useState(""); + const [loading, setLoading] = useState(false); + const [message, setMessage] = useState(""); + + const handleForgot = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setMessage(""); + try { + const res = await axios.post("http://localhost:3020/api/auth/forgot-password", { email }); + setMessage("✅ We’ve emailed you a reset code / link. Enter it below."); + } catch (err: any) { + console.error(err); + setMessage("Something went wrong. Try again."); + } finally { + setLoading(false); + } + }; + + return ( +
+
+ + setEmail(e.target.value)} + className="form-input w-full rounded-md border-white-light bg-transparent text-black dark:text-white" + placeholder="you@example.com" + /> +
+ + {message &&

{message}

} +
+ ); +} diff --git a/components/auth/components-auth-reset-form.tsx b/components/auth/components-auth-reset-form.tsx new file mode 100644 index 0000000..8651927 --- /dev/null +++ b/components/auth/components-auth-reset-form.tsx @@ -0,0 +1,68 @@ +"use client"; + +import React, { useState } from "react"; +import axios from "axios"; +import { useSearchParams } from "next/navigation"; + +export default function ResetPasswordForm() { + const searchParams = useSearchParams(); + + // ✅ token and email are read from the URL: /reset-password?email=...&token=... + const email = searchParams.get("email") || ""; + const token = searchParams.get("token") || ""; + + const [newPassword, setNewPassword] = useState(""); + const [loading, setLoading] = useState(false); + const [message, setMessage] = useState(""); + + const handleReset = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setMessage(""); + try { + await axios.post("http://localhost:3020/api/auth/reset-password", { + email, + token, // ✅ use token from URL + newPassword, + }); + setMessage("✅ Your password has been successfully reset."); + } catch (err) { + console.error(err); + setMessage("❌ Reset failed. Check the link or try again."); + } finally { + setLoading(false); + } + }; + + return ( +
+
+ + setNewPassword(e.target.value)} + className="form-input w-full rounded-md border-white-light bg-transparent text-black dark:text-white" + placeholder="********" + /> +
+ + + + {message && ( +

+ {message} +

+ )} +
+ ); +} diff --git a/public/assets/images/auth/bg.webp b/public/assets/images/auth/bg.webp index 1946ee8..34c41c0 100644 Binary files a/public/assets/images/auth/bg.webp and b/public/assets/images/auth/bg.webp differ diff --git a/public/assets/images/auth/top-right.webp b/public/assets/images/auth/top-right.webp index fb67333..021775c 100644 Binary files a/public/assets/images/auth/top-right.webp and b/public/assets/images/auth/top-right.webp differ diff --git a/public/assets/images/auth/top.webp b/public/assets/images/auth/top.webp index 5ddc0d2..beebe2a 100644 Binary files a/public/assets/images/auth/top.webp and b/public/assets/images/auth/top.webp differ