diff --git a/client/src/App.tsx b/client/src/App.tsx
index 386f2b1..30811c4 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,6 +1,7 @@
import { Route, Routes } from "react-router-dom";
import { ForgotPasswordPage } from "@/pages/forgot-password/page";
+import { ResetPasswordPage } from "@/pages/reset-password/page";
import VerifyEmailPage from "@/pages/verify-email/page";
import PrivateGuard from "@/guards/private-guard";
import { AppRoutes } from "@/constants/routes";
@@ -25,6 +26,10 @@ function App() {
path={AppRoutes.ForgotPassword}
element={}
/>
+ }
+ />
);
diff --git a/client/src/constants/collections.ts b/client/src/constants/collections.ts
index 453f821..27a6ab2 100644
--- a/client/src/constants/collections.ts
+++ b/client/src/constants/collections.ts
@@ -7,7 +7,7 @@ import {
ValidateUsername,
} from "@/lib/utils/validations";
-export const SIGNUPINPUTS = [
+export const SIGNUP_INPUTS = [
{
name: "username",
label: "Username",
@@ -35,7 +35,7 @@ export const SIGNUPINPUTS = [
name: "password",
label: "Password",
tooltip:
- "Create a strong password with at least 8 characters. Include a mix of uppercase letters, lowercase letters, numbers, and special characters for better security.",
+ "Create a password with at least 8 characters, including uppercase, lowercase, numbers, and special characters for security.",
placeholder: "e.g. m#P52s@ap$V",
type: "password",
autoComplete: "new-password",
@@ -56,7 +56,7 @@ export const SIGNUPINPUTS = [
},
];
-export const SIGNININPUTS = [
+export const SIGNIN_INPUTS = [
{
name: "email",
label: "Email Address",
@@ -82,3 +82,40 @@ export const SIGNININPUTS = [
maxLength: 128,
},
];
+
+export const RESET_PASSWORD_INPUTS = [
+ {
+ name: "old-password",
+ label: "Old Password",
+ tooltip: "Enter your current password",
+ placeholder: "e.g. m#P52s@ap$V",
+ type: "password",
+ autoComplete: "new-password",
+ suffixIcon: Lock,
+ validation: ValidatePassword,
+ maxLength: 128,
+ },
+ {
+ name: "new-password",
+ label: "New Password",
+ tooltip:
+ "Create a password with at least 8 characters, including uppercase, lowercase, numbers, and special characters for security",
+ placeholder: "e.g. m#P52s@ap$V",
+ type: "password",
+ autoComplete: "new-password",
+ suffixIcon: Lock,
+ validation: ValidatePassword,
+ maxLength: 128,
+ },
+ {
+ label: "Confirm Password",
+ tooltip:
+ "Re-enter your password to confirm it matches the one you typed above. Ensure both passwords are identical.",
+ placeholder: "e.g. m#P52s@ap$V",
+ type: "password",
+ autoComplete: "new-password",
+ suffixIcon: Lock,
+ validation: ValidateConfirmPassword,
+ maxLength: 128,
+ },
+];
diff --git a/client/src/constants/keys.ts b/client/src/constants/keys.ts
index f22fa6f..a7c242f 100644
--- a/client/src/constants/keys.ts
+++ b/client/src/constants/keys.ts
@@ -5,3 +5,4 @@ export const VERIFYEMAILKEY = "verify-email";
export const RESENDVERIFYKEY = "resend-verify";
export const VERIFYTOKENKEY = "verify-token";
export const FORGOTPASSWORDKEY = "forgot-password";
+export const RESETPASSWORDKEY = "reset-password";
diff --git a/client/src/pages/reset-password/_components/reset-password-form.tsx b/client/src/pages/reset-password/_components/reset-password-form.tsx
new file mode 100644
index 0000000..92018a3
--- /dev/null
+++ b/client/src/pages/reset-password/_components/reset-password-form.tsx
@@ -0,0 +1,56 @@
+import { useMutation } from "@tanstack/react-query";
+import { FormEvent, useState } from "react";
+
+import { RESET_PASSWORD_INPUTS } from "@/constants/collections";
+import { RESETPASSWORDKEY } from "@/constants/keys";
+import { Button } from "@/components/text-button";
+import { Input } from "@/components/input";
+
+const ResetPasswordForm = () => {
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const { isPending } = useMutation({
+ mutationKey: [RESETPASSWORDKEY],
+ });
+
+ const onSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ };
+
+ return (
+
+ );
+};
+
+export { ResetPasswordForm };
diff --git a/client/src/pages/reset-password/page.tsx b/client/src/pages/reset-password/page.tsx
new file mode 100644
index 0000000..05f0a65
--- /dev/null
+++ b/client/src/pages/reset-password/page.tsx
@@ -0,0 +1,18 @@
+import { ResetPasswordForm } from "./_components/reset-password-form";
+
+const ResetPasswordPage = () => {
+ return (
+
+
+ Reset Password
+
+
+
+
+ );
+};
+
+export { ResetPasswordPage };
diff --git a/client/src/pages/sign-in/_components/sign-in-form.tsx b/client/src/pages/sign-in/_components/sign-in-form.tsx
index d6ed026..98a5dc0 100644
--- a/client/src/pages/sign-in/_components/sign-in-form.tsx
+++ b/client/src/pages/sign-in/_components/sign-in-form.tsx
@@ -7,7 +7,7 @@ import { GenericResponse } from "@/lib/classes/generic-response-class";
import { ErrorResponse } from "@/lib/classes/error-response-class";
import { AuthService } from "@/lib/services/auth-service";
import { useAuthStore } from "@/lib/stores/auth-store";
-import { SIGNININPUTS } from "@/constants/collections";
+import { SIGNIN_INPUTS } from "@/constants/collections";
import { SignInDTO } from "@/lib/DTO/sign-in-dto";
import { Button } from "@/components/text-button";
import { AppRoutes } from "@/constants/routes";
@@ -52,13 +52,13 @@ const SignInForm = () => {
onSubmit={onSubmit}
className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
>
- {SIGNININPUTS.map((s) => (
+ {SIGNIN_INPUTS.map((i) => (
))}
diff --git a/client/src/pages/sign-up/_components/sign-up-form.tsx b/client/src/pages/sign-up/_components/sign-up-form.tsx
index f4d24fd..338d88e 100644
--- a/client/src/pages/sign-up/_components/sign-up-form.tsx
+++ b/client/src/pages/sign-up/_components/sign-up-form.tsx
@@ -5,7 +5,7 @@ import { toast } from "sonner";
import { ErrorResponse } from "@/lib/classes/error-response-class";
import { AuthService } from "@/lib/services/auth-service";
-import { SIGNUPINPUTS } from "@/constants/collections";
+import { SIGNUP_INPUTS } from "@/constants/collections";
import { SignUpDTO } from "@/lib/DTO/sign-up-dto";
import { Button } from "@/components/text-button";
import { AppRoutes } from "@/constants/routes";
@@ -41,7 +41,7 @@ const SignUpForm = () => {
onSubmit={onSubmit}
className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
>
- {SIGNUPINPUTS.map((s) => (
+ {SIGNUP_INPUTS.map((s) => (