From 677118ee65c63cd81b8513ed1b63a1d62f88d4c7 Mon Sep 17 00:00:00 2001
From: wr1159 <chuweiron18@gmail.com>
Date: Tue, 15 Oct 2024 20:41:46 +0800
Subject: [PATCH 1/2] Extract out isPasswordComplex

---
 frontend/components/user-settings/user-settings.tsx | 11 +----------
 frontend/lib/password.ts                            |  9 +++++++++
 2 files changed, 10 insertions(+), 10 deletions(-)
 create mode 100644 frontend/lib/password.ts

diff --git a/frontend/components/user-settings/user-settings.tsx b/frontend/components/user-settings/user-settings.tsx
index a9fab7ebcf..21ddf01f78 100644
--- a/frontend/components/user-settings/user-settings.tsx
+++ b/frontend/components/user-settings/user-settings.tsx
@@ -24,6 +24,7 @@ import LoadingScreen from "@/components/common/loading-screen";
 import { useAuth } from "@/app/auth/auth-context";
 import { cn } from "@/lib/utils";
 import { User, UserSchema } from "@/lib/schemas/user-schema";
+import { isPasswordComplex } from "@/lib/password";
 import { userServiceUri } from "@/lib/api-uri";
 
 const fetcher = async (url: string): Promise<User> => {
@@ -300,16 +301,6 @@ export default function UserSettings({ userId }: { userId: string }) {
     }
   }, [newPassword, confirmPassword]);
 
-  const isPasswordComplex = (password: string) => {
-    const minLength = 8;
-    const hasUpperCase = /[A-Z]/.test(password);
-    const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(
-      password
-    );
-
-    return password.length >= minLength && hasUpperCase && hasSpecialChar;
-  };
-
   if (isLoading) {
     return <LoadingScreen />;
   }
diff --git a/frontend/lib/password.ts b/frontend/lib/password.ts
new file mode 100644
index 0000000000..c06455cc69
--- /dev/null
+++ b/frontend/lib/password.ts
@@ -0,0 +1,9 @@
+export const isPasswordComplex = (password: string) => {
+  const minLength = 8;
+  const hasUpperCase = /[A-Z]/.test(password);
+  const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(
+    password
+  );
+
+  return password.length >= minLength && hasUpperCase && hasSpecialChar;
+};

From 800f1680d93d4e0359e0c47d0bbb967e4af6eea5 Mon Sep 17 00:00:00 2001
From: wr1159 <chuweiron18@gmail.com>
Date: Tue, 15 Oct 2024 20:50:44 +0800
Subject: [PATCH 2/2] Add password complexity check

---
 frontend/components/auth/reset-password-form.tsx | 11 ++++++++++-
 frontend/components/auth/sign-up-form.tsx        |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/components/auth/reset-password-form.tsx b/frontend/components/auth/reset-password-form.tsx
index 833e1a780a..3ae44f7667 100644
--- a/frontend/components/auth/reset-password-form.tsx
+++ b/frontend/components/auth/reset-password-form.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { resetPassword } from "@/lib/reset-password";
+import { isPasswordComplex } from "@/lib/password";
 import { useToast } from "@/components/hooks/use-toast";
 
 import { Button } from "@/components/ui/button";
@@ -24,7 +25,6 @@ export function ResetPasswordForm({ token }: { token: string }) {
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
-    // TODO: Add validation for password
     if (password !== passwordConfirmation) {
       toast({
         title: "Password Mismatch",
@@ -32,6 +32,15 @@ export function ResetPasswordForm({ token }: { token: string }) {
       });
       return;
     }
+    if (!isPasswordComplex(passwordConfirmation)) {
+      toast({
+        title: "Weak Password",
+        description:
+          "Password must be at least 8 characters long, include 1 uppercase letter and 1 special character.",
+      });
+      return;
+    }
+
     const res = await resetPassword(token, password);
     if (!res.ok) {
       toast({
diff --git a/frontend/components/auth/sign-up-form.tsx b/frontend/components/auth/sign-up-form.tsx
index 61ed1ea891..32e6c48fce 100644
--- a/frontend/components/auth/sign-up-form.tsx
+++ b/frontend/components/auth/sign-up-form.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { toast } from "@/components/hooks/use-toast";
 import { signUp } from "@/lib/signup";
+import { isPasswordComplex } from "@/lib/password";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -34,6 +35,14 @@ export function SignUpForm() {
       });
       return;
     }
+    if (!isPasswordComplex(passwordConfirmation)) {
+      toast({
+        title: "Weak Password",
+        description:
+          "Password must be at least 8 characters long, include 1 uppercase letter and 1 special character.",
+      });
+      return;
+    }
     const res = await signUp(username, email, password);
     if (!res.ok) {
       toast({