Frontend: JoinExistingGame Modal implementation

JoinExistingGame modal component created to capture room code for game entry.

onClose function utilized for modal closure by tapping anywhere on the screen.

Navigation to the /game route triggered by pressing the Enter button after input entry; otherwise,a toast prompts for input completion.

Fixes #84

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 frontend/node_modules
-.env
+.DS_Store
+.env

backend/package.json

@@ -16,9 +16,11 @@
     "dependencies": {
         "@types/node": "^20.12.13",
         "@types/uuid": "^9.0.8",
+        "bcrypt": "^5.1.1",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
         "express": "^4.19.2",
+        "jsonwebtoken": "^9.0.2",
         "mongoose": "^8.4.0",
         "ts-node": "^10.9.2",
         "uuid": "^9.0.1"
@@ -27,6 +29,7 @@
         "@types/cors": "^2.8.17",
         "@types/express": "^4.17.21",
         "@types/jest": "^29.5.12",
+        "@types/jsonwebtoken": "^9.0.6",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "eslint": "^8.57.0",
         "eslint-config-standard-with-typescript": "^43.0.1",

backend/src/controllers/userController.ts

@@ -0,0 +1,78 @@
+import { Request, Response } from 'express';
+import { catchError, ControllerFunction } from '../utils';
+import jwt from 'jsonwebtoken';
+import { IUser, User } from '../models/userModel';
+import { Types } from 'mongoose';
+
+const getUserToken = (_id: string | Types.ObjectId): string => {
+    const token = jwt.sign({ _id }, process.env.JWT_SECRET as string, {
+        expiresIn: '28d',
+    });
+    return token;
+};
+
+const registerUser: ControllerFunction = catchError(
+    async (req: Request, res: Response): Promise<void> => {
+        const { username, password }: IUser = req.body;
+
+        if ([username, password].some((field) => field?.trim() === '')) {
+            throw new Error('All fields are required');
+        }
+        const existingUser = await User.findOne({ username });
+        if (existingUser) {
+            throw new Error('User already exists');
+        }
+
+        const user = await User.create({
+            username,
+            password,
+        });
+
+        const createdUser = await User.findById(user._id).select('-password');
+
+        if (!createdUser) {
+            throw new Error('Failed to create user');
+        }
+
+        res.status(201).send({
+            message: 'User created successfully',
+            createdUser,
+        });
+    }
+);
+
+const loginUser: ControllerFunction = catchError(
+    async (req: Request, res: Response): Promise<void> => {
+        const { username, password }: IUser = req.body;
+
+        if (!username) {
+            throw new Error('Username is required');
+        }
+
+        const user = await User.findOne({ username });
+        if (!user) {
+            throw new Error('User not found');
+        }
+
+        const isPasswordCorrect = await user.isPasswordCorrect(password);
+        if (!isPasswordCorrect) {
+            throw new Error('Invalid credentials');
+        }
+
+        const token: string = getUserToken((user as IUser)._id as string);
+
+        const loggedInUser = await User.findById(user._id).select('-password');
+
+        const options = {
+            httpOnly: true,
+            secure: true,
+        };
+
+        res.status(200).cookie('accessToken', token, options).json({
+            token,
+            user: loggedInUser,
+        });
+    }
+);
+
+export { registerUser, loginUser };

backend/src/index.ts

@@ -20,6 +20,11 @@ app.get('/', (req, res) => {
     res.send('Hello from the backend!');
 });
 
+//Routes
+import userRoutes from './routes/userRoutes.js';
+
+app.use('/api/v1/auth', userRoutes);
+
 app.listen(port, () => {
     console.log(`Server running on port ${port}`);
 });

backend/src/middlewares/authMiddleware.ts

@@ -0,0 +1,39 @@
+import jwt from 'jsonwebtoken';
+import { User, IUser } from '../models/userModel';
+import { NextFunction, Request, Response } from 'express';
+
+export interface AuthRequest extends Request {
+    user: IUser;
+}
+
+export const verifyToken = async (
+    req: AuthRequest,
+    res: Response,
+    next: NextFunction
+) => {
+    try {
+        const accessToken: string = req.cookies.accessToken;
+
+        if (!accessToken) {
+            return res.status(401).json({ error: 'Access token is required' });
+        }
+
+        const { _id } = jwt.verify(
+            accessToken,
+            process.env.JWT_SECRET as string
+        ) as { _id: string };
+
+        const user: IUser | null = await User.findOne({ _id });
+
+        if (!user) {
+            return res.status(404).json({ error: 'User not found' });
+        }
+
+        req.user = user;
+        next();
+    } catch (error) {
+        return res.status(401).json({
+            error: (error as Error)?.message || 'Invalid access token',
+        });
+    }
+};

backend/src/models/userModel.ts

@@ -0,0 +1,44 @@
+import mongoose from 'mongoose';
+import bcrypt from 'bcrypt';
+import { NextFunction } from 'express';
+
+export interface IUser extends mongoose.Document {
+    username: string;
+    password: string;
+    isPasswordCorrect: (password: string) => Promise<boolean>;
+}
+
+const userSchema = new mongoose.Schema<IUser>(
+    {
+        username: {
+            type: String,
+            required: true,
+            unique: true,
+        },
+        password: {
+            type: String,
+            required: [true, 'Password is required'],
+            minlength: [6, 'Password must be at least 6 characters long'],
+        },
+    },
+    {
+        timestamps: true,
+    }
+);
+
+userSchema.pre('save', async function (next: NextFunction): Promise<void> {
+    if (!this.isModified('password')) return next();
+
+    this.password = await bcrypt.hash(this.password, 10);
+    next();
+});
+
+userSchema.methods.isPasswordCorrect = async function (
+    password: string
+): Promise<boolean> {
+    return await bcrypt.compare(password, this.password);
+};
+
+const User = mongoose.model<IUser>('User', userSchema);
+
+export { User };

backend/src/routes/userRoutes.js

@@ -0,0 +1,9 @@
+import express from 'express';
+import { loginUser, registerUser } from '../controllers/userController';
+
+const router = express.Router();
+
+router.route('/register').post(registerUser);
+router.route('/login').post(loginUser);
+
+export default router;

backend/src/utils.ts

@@ -1,13 +1,13 @@
 import { Request, Response } from 'express';
 
-type ControllerFunction = (req: Request, res: Response) => Promise<void>;
+export type ControllerFunction = (req: Request, res: Response) => Promise<void>;
 
 export function catchError(fn: ControllerFunction): ControllerFunction {
     return async function (req: Request, res: Response) {
         try {
             return await fn(req, res);
         } catch (error) {
-            res.status(500).json({ error: error });
+            res.status(500).json({ error: (error as Error).message });
         }
     };
 }

backend/tests/userModel.test.ts

@@ -0,0 +1,23 @@
+import dotenv from 'dotenv';
+import mongoose from 'mongoose';
+
+dotenv.config();
+
+describe('insert user', () => {
+    beforeAll(async () => {
+        await mongoose.connect('mongodb://localhost:27017/users');
+    }, 20000);
+
+    afterAll(async () => {
+        await mongoose.connection.close();
+    }, 20000);
+
+    it('should insert a user into collection', async () => {
+        const users = mongoose.connection.collection('users');
+        const mockUser = { username: 'user1234', password: 'pass1' };
+        await users.insertOne(mockUser);
+
+        const insertedUser = await users.findOne({ username: 'user1234' });
+        expect(insertedUser).toEqual(mockUser);
+    });
+});

frontend/src/library/modal.tsx

@@ -0,0 +1,79 @@
+import { useRef, useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from './button';
+import { ToastContext } from './toast/toast-context';
+
+interface ModalProps {
+    onClose: () => void;
+}
+
+const Modal: React.FC<ModalProps> = ({ onClose }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+    const [gameCode, setGameCode] = useState('');
+    const { open } = useContext(ToastContext);
+
+    const closeModal = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (modalRef.current === e.target) {
+            onClose();
+        }
+    };
+
+    const handleButtonClick = () => {
+        if (gameCode.trim()) {
+            navigate('/game');
+        } else {
+            open({
+                message: 'Please enter the game code',
+                duration: 3000,
+                position: 'top-center',
+                color: 'warning',
+            });
+        }
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setGameCode(e.target.value);
+    };
+
+    return (
+        <div
+            ref={modalRef}
+            onClick={closeModal}
+            className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center"
+        >
+            <div className="bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-4 w-100 items-center">
+                <h1 className="font-normal font-[Kavoon] text-[30px] leading-[30px] text-black text-center">
+                    Join an
+                    <br />
+                    Existing Game
+                </h1>
+                <div className="flex justify-center">
+                    <input
+                        className="font-normal font-[Kavoon] text-[20px] py-2 px-6 border-4 border-black rounded-3xl w-64 h-10"
+                        placeholder="Enter the game code"
+                        style={{
+                            backgroundColor: 'rgb(222, 209, 209)',
+                            color: 'black',
+                        }}
+                        value={gameCode}
+                        onChange={handleInputChange}
+                    />
+                </div>
+                <Button
+                    text="Enter"
+                    onClick={handleButtonClick}
+                    backgroundColor="bg-yellow-300"
+                    textColor="text-white"
+                    borderColor="border-black"
+                    hoverColor="hover:bg-yellow-400"
+                    rounded="rounded-full"
+                    buttonSize="w-32 h-10"
+                    textStroke="2px 2px black"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Modal;

frontend/src/pages/Home.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import Button from '../library/button';
 import Heading from '../library/heading';
+import Modal from '../library/modal';
 import '../index.css';
 
 const Home: React.FC = () => {
     const [gameCode, setGameCode] = useState('');
-    const navigate = useNavigate();
+    const [showModal, setShowModal] = useState(false);
     const CreateGame = () => {
         // Logic to create a game
+        setShowModal(true);
         console.log('Create Game');
-        navigate('/game');
     };
 
     const JoinGame = () => {
@@ -83,6 +83,7 @@ const Home: React.FC = () => {
                     </div>
                 </div>
             </div>
+            {showModal && <Modal onClose={() => setShowModal(false)} />}
         </div>
     );
 };