Merge branch 'main' into feat/matching/backend-integration

Author: jq1836

.env.sample

@@ -18,3 +18,12 @@ USER_SVC_DB_URI=
 JWT_SECRET=
 EMAIL_ADDRESS=
 EMAIL_PASSWORD=
+
+## Matching service variables
+MATCHING_SVC_PORT=6969
+
+## Redis variables
+REDIS_PORT=6379
+
+## Redisinsight variables
+REDIS_INSIGHT_PORT=5540

docker-compose.yml

@@ -44,9 +44,23 @@ services:
       - $MATCHING_SVC_PORT:$MATCHING_SVC_PORT
     environment:
       - PORT=$MATCHING_SVC_PORT
+      - REDIS_HOST=redis
+      - REDIS_PORT=$REDIS_PORT
+    depends_on:
+      - redis
 
   redis:
     image: redis:7.4-alpine
     restart: always
     ports:
-      - 6379:6379
+      - $REDIS_PORT:$REDIS_PORT
+
+  # access RedisInsight at http://localhost:5540
+  # connect to redis on redis insight at redis:6379
+  redisinsight:
+    image: redis/redisinsight:latest
+    restart: always
+    ports:
+      - $REDIS_INSIGHT_PORT:$REDIS_INSIGHT_PORT  # Expose RedisInsight UI on port 5540
+    depends_on:
+      - redis

frontend/app/app/user-settings/[user_id]/page.tsx

@@ -8,7 +8,7 @@ export default function UserSettingsPage({
 }) {
   return (
     <AuthPageWrapper requireLoggedIn userId={params.user_id}>
-      <UserSettings userId={params.user_id} />;
+      <UserSettings userId={params.user_id} />
     </AuthPageWrapper>
   );
 }

frontend/app/auth/auth-context.tsx

@@ -12,18 +12,20 @@ import {
 } from "react";
 
 interface AuthContextType {
-  user: User | null;
-  token: string | null;
+  user: User | null | undefined;
+  token: string | null | undefined;
   login: (email: string, password: string) => Promise<User | undefined>;
   logout: () => Promise<void>;
+  isLoading: boolean;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const tokenKey = "jwtToken";
-  const [user, setUser] = useState<User | null>(null);
-  const [token, setToken] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>();
+  const [token, setToken] = useState<string | null>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const router = useRouter();
 
   useEffect(() => {
@@ -32,7 +34,11 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
 
   // Login using locally stored JWT token
   useEffect(() => {
+    if (token !== undefined) {
+      setIsLoading(false);
+    }
     if (token) {
+      setIsLoading(true);
       fetch(`${userServiceUri(window.location.hostname)}/auth/verify-token`, {
         method: "GET",
         headers: {
@@ -42,10 +48,12 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
         .then((res) => {
           res.json().then((result) => {
             setUser(result.data);
+            setIsLoading(false);
           });
         })
         .catch((err) => {
           console.error(err);
+          setIsLoading(false);
         });
     }
   }, [token]);
@@ -85,14 +93,15 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   };
 
   const logout = async () => {
-    setUser(null);
-    setToken(null);
-    localStorage.removeItem("jwtToken");
     router.push("/");
+    localStorage.removeItem("jwtToken");
+    setUser(undefined);
+    setToken(undefined);
+    setIsLoading(true);
   };
 
   return (
-    <AuthContext.Provider value={{ user, token, login, logout }}>
+    <AuthContext.Provider value={{ user, token, login, logout, isLoading }}>
       {children}
     </AuthContext.Provider>
   );

frontend/app/layout.tsx

@@ -4,7 +4,6 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import AuthProvider from "@/app/auth/auth-context";
-import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 import { Navbar } from "@/components/navbar";
 
 const geistSans = localFont({
@@ -41,7 +40,7 @@ export default function RootLayout({
         >
           <AuthProvider>
             <Navbar />
-            <AuthPageWrapper>{children}</AuthPageWrapper>
+            {children}
           </AuthProvider>
           <Toaster />
         </ThemeProvider>

frontend/components/admin-user-management/admin-user-management.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/table";
 import LoadingScreen from "@/components/common/loading-screen";
 import AdminEditUserModal from "@/components/admin-user-management/admin-edit-user-modal";
+import DeleteAccountModal from "@/components/common/delete-account-modal";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { User, UserArraySchema } from "@/lib/schemas/user-schema";
 import { userServiceUri } from "@/lib/api-uri";
@@ -51,25 +52,33 @@ export default function AdminUserManagement() {
   const [users, setUsers] = useState<User[]>([]);
   const [showModal, setShowModal] = useState<boolean>(false);
   const [selectedUser, setSelectedUser] = useState<User>();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [confirmUsername, setConfirmUsername] = useState("");
+  const [isDeleteButtonEnabled, setIsDeleteButtonEnabled] = useState(false);
 
   useEffect(() => {
     if (data) {
       setUsers(data);
     }
   }, [data]);
 
+  // Enable delete button in the delete account modal only when the input username matches the original username
+  useEffect(() => {
+    setIsDeleteButtonEnabled(confirmUsername === selectedUser?.username);
+  }, [confirmUsername, selectedUser]);
+
   if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const handleDelete = async (userId: string) => {
+  const handleDelete = async () => {
     const token = auth?.token;
     if (!token) {
       throw new Error("No authentication token found");
     }
 
     const response = await fetch(
-      `${userServiceUri(window.location.hostname)}/users/${userId}`,
+      `${userServiceUri(window.location.hostname)}/users/${selectedUser?.id}`,
       {
         method: "DELETE",
         headers: {
@@ -82,7 +91,7 @@ export default function AdminUserManagement() {
       throw new Error("Failed to delete user");
     }
 
-    setUsers(users.filter((user) => user.id !== userId));
+    setUsers(users.filter((user) => user.id !== selectedUser?.id));
   };
 
   const onUserUpdate = () => {
@@ -100,6 +109,16 @@ export default function AdminUserManagement() {
           user={selectedUser}
           onUserUpdate={onUserUpdate}
         />
+        <DeleteAccountModal
+          showDeleteModal={showDeleteModal}
+          originalUsername={selectedUser?.username || ""}
+          confirmUsername={confirmUsername}
+          setConfirmUsername={setConfirmUsername}
+          handleDeleteAccount={handleDelete}
+          isDeleteButtonEnabled={isDeleteButtonEnabled}
+          setShowDeleteModal={setShowDeleteModal}
+          isAdmin={true}
+        />
         <Table>
           <TableHeader>
             <TableRow>
@@ -130,7 +149,10 @@ export default function AdminUserManagement() {
                   </Button>
                   <Button
                     variant="destructive"
-                    onClick={() => handleDelete(user.id)}
+                    onClick={() => {
+                      setSelectedUser(user);
+                      setShowDeleteModal(true);
+                    }}
                   >
                     <Trash2Icon className="h-4 w-4" />
                   </Button>

frontend/components/auth/auth-page-wrapper.tsx

@@ -5,6 +5,7 @@ import { ReactNode } from "react";
 import { useAuth } from "@/app/auth/auth-context";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import LoadingScreen from "../common/loading-screen";
 
 type AuthCheck = (
   user: { id: string; isAdmin: boolean } | undefined | null
@@ -49,7 +50,9 @@ const AuthPageWrapper: React.FC<AuthPageWrapperProps> = ({
 
   return (
     <div>
-      {authCheck(auth?.user) ? (
+      {auth?.isLoading ? (
+        <LoadingScreen />
+      ) : authCheck(auth?.user) ? (
         children
       ) : (
         <div className="flex items-start justify-center h-2/6">

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,14 +25,22 @@ 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",
         description: "The passwords you entered do not match",
       });
       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({

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({

frontend/components/user-settings/delete-account-modal.tsx renamed to frontend/components/common/delete-account-modal.tsx

@@ -17,6 +17,7 @@ interface DeleteAccountModalProps {
   handleDeleteAccount: () => void;
   isDeleteButtonEnabled: boolean;
   setShowDeleteModal: (show: boolean) => void;
+  isAdmin: boolean;
 }
 
 const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
@@ -27,6 +28,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
   handleDeleteAccount,
   isDeleteButtonEnabled,
   setShowDeleteModal,
+  isAdmin,
 }) => {
   return (
     <>
@@ -37,10 +39,18 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
               <DialogTitle>Confirm Delete Account</DialogTitle>
             </DialogHeader>
             <div className="space-y-4">
-              <p>To confirm, please type your username ({originalUsername}):</p>
+              {isAdmin ? (
+                <p>
+                  To delete, please confirm the username ({originalUsername}):
+                </p>
+              ) : (
+                <p>
+                  To confirm, please type your username ({originalUsername}):
+                </p>
+              )}
               <Input
                 type="text"
-                placeholder="Enter your username"
+                placeholder="Confirm username"
                 value={confirmUsername}
                 onChange={(e) => setConfirmUsername(e.target.value)}
               />
@@ -57,7 +67,11 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
               </Button>
               <Button
                 variant="destructive"
-                onClick={handleDeleteAccount}
+                onClick={() => {
+                  setShowDeleteModal(false);
+                  setConfirmUsername("");
+                  handleDeleteAccount();
+                }}
                 disabled={!isDeleteButtonEnabled}
               >
                 Delete Account