Develop

client/src/components/screens/Login.tsx

@@ -1,25 +1,77 @@
 // src/components/Login.tsx
-import React from 'react';
+import React from "react";
 import "../../styles/codezilla.css";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
+import { useMutation } from "@apollo/client";
+import { LOGIN } from "../../graphql/mutations";
+import { useState } from "react";
 
 export const Login: React.FC = () => {
   const navigate = useNavigate();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  // create a function to handle the mutation
+  const [login] = useMutation(LOGIN);
+
+  const handleLogin = async (e:any) => {
+   e.preventDefault();
+
+   console.log(username)
+   console.log(password)
+
+  try {
+    const response = await login({
+      variables: {
+        username: username,
+        password: password,
+      },
+    });
+
+    const token = response.data.login.token;
+
+
+    localStorage.setItem('token', token);
+    console.log(token)
+
+    if(token) {
+      navigate('/map');
+    }
+  } catch(err) {
+    console.error("Login failed", err);
+    alert("Login failed. Please check your username and password.");
+  }
 
-  const handleLogin = () => {
-    navigate('/signup');
   };
 
   return (
     <div className="login-wrapper">
       <div className="login-content">
-        <div className="question-box">
+        <form className="question-box" onSubmit={handleLogin}>
           <h1>Login</h1>
-          <input type="text" placeholder="username" className="login-input" />
-          <input type="password" placeholder="password" className="login-input" />
+
+          <input 
+            type="text" 
+            placeholder="username" 
+            className="login-input"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+          <input
+            type="password"
+            placeholder="password"
+            className="login-input"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button type="submit">Login</button>
+
+
           <p>Not a player yet?</p>
-          <button className="signup-button" onClick={handleLogin}>Sign Up!</button>
-        </div>
+          <a href="/signup" className="signup-link">
+            <button type="button" className="signup-button">Sign Up</button>
+          </a>
+        </form>
       </div>
     </div>
   );

client/src/components/screens/Signup.tsx

@@ -1,38 +1,62 @@
 /*CREATE IMPORTS */
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import "../../styles/codezilla.css";
+import { useMutation } from "@apollo/client";
+import { ADD_USER } from "../../graphql/mutations";
 
 const avatarList = [
-  '/avatars/carmen.png',
-  '/avatars/jacquilyn.png',
-  '/avatars/trevor.png',
-  '/avatars/michael.png',
-  '/avatars/shawna.png',
+  "/avatars/carmen.png",
+  "/avatars/jacquilyn.png",
+  "/avatars/trevor.png",
+  "/avatars/michael.png",
+  "/avatars/shawna.png",
 ];
 
 const SignUp: React.FC = () => {
   const navigate = useNavigate();
-  const [selectedAvatar, setSelectedAvatar] = useState('');
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const [selectedAvatar, setSelectedAvatar] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  // create a function to handle the mutation
+  const [addUser] = useMutation(ADD_USER);
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-  
+
     if (!username.trim() || !selectedAvatar) {
-      alert('Please enter a username and select an avatar before proceeding.');
+      alert("Please enter a username and select an avatar before proceeding.");
       return;
     }
-  
-    localStorage.setItem('selectedAvatar', selectedAvatar);
-    localStorage.setItem('username', username);
-  
+
+    // localStorage.setItem('selectedAvatar', selectedAvatar);
+    // localStorage.setItem('username', username);
+
     console.log({ username, password, selectedAvatar });
-    navigate('/map');
+
+    try {
+      const response = await addUser({
+        variables: {
+          input: {
+            password: password,
+            selectedAvatar: selectedAvatar,
+            username: username,
+          },
+        },
+      });
+
+      const token = response.data.addUser.token;
+
+      localStorage.setItem("token", token);
+
+      console.log(response);
+      navigate('/map');
+    } catch (err) {
+      console.error("Signup failed", err);
+      alert("Signup failed");
+    }
   };
-
-
 
   return (
     <div className="login-wrapper">
@@ -53,34 +77,39 @@ const SignUp: React.FC = () => {
           onChange={(e) => setPassword(e.target.value)}
         />
 
-<p>Select Your Avatar</p>
-<div className="avatar-grid">
-  <div className="avatar-row">
-    {avatarList.slice(0, 3).map((avatar, index) => (
-      <img
-        key={index}
-        src={avatar}
-        alt={`Avatar ${index}`}
-        className={`avatar-option ${selectedAvatar === avatar ? 'selected' : ''}`}
-        onClick={() => setSelectedAvatar(avatar)}
-      />
-    ))}
-  </div>
-  <div className="avatar-row">
-    {avatarList.slice(3).map((avatar, index) => (
-      <img
-        key={index + 3}
-        src={avatar}
-        alt={`Avatar ${index + 3}`}
-        className={`avatar-option ${selectedAvatar === avatar ? 'selected' : ''}`}
-        onClick={() => setSelectedAvatar(avatar)}
-      />
-    ))}
-  </div>
-</div>
-
+        <p>Select Your Avatar</p>
+        <div className="avatar-grid">
+          <div className="avatar-row">
+            {avatarList.slice(0, 3).map((avatar, index) => (
+              <img
+                key={index}
+                src={avatar}
+                alt={`Avatar ${index}`}
+                className={`avatar-option ${
+                  selectedAvatar === avatar ? "selected" : ""
+                }`}
+                onClick={() => setSelectedAvatar(avatar)}
+              />
+            ))}
+          </div>
+          <div className="avatar-row">
+            {avatarList.slice(3).map((avatar, index) => (
+              <img
+                key={index + 3}
+                src={avatar}
+                alt={`Avatar ${index + 3}`}
+                className={`avatar-option ${
+                  selectedAvatar === avatar ? "selected" : ""
+                }`}
+                onClick={() => setSelectedAvatar(avatar)}
+              />
+            ))}
+          </div>
+        </div>
 
-        <button className="signup-button" type="submit">Enter the Game</button>
+        <button className="signup-button" type="submit">
+          Enter the Game
+        </button>
       </form>
     </div>
   );

client/src/graphql/mutations.ts

@@ -12,15 +12,15 @@ export const UPDATE_STATS = gql`
 
 // Mutation to login
 export const LOGIN = gql`
-  mutation Login($email: String!, $password: String!) {
-    login(email: $email, password: $password) {
-      token
-      user {
-        _id
-        username
-      }
+mutation Login($username: String!, $password: String!) {
+  login(username: $username, password: $password) {
+    token
+    user {
+      _id
+      username
     }
   }
+}
 `;
 
 // Mutation to add a new user

server/package.json

@@ -9,7 +9,12 @@
     "build": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "nodemon src/server.ts",
-    "watch": "nodemon dist/server.js"
+    "watch": "nodemon"
+  },
+  "nodemonConfig": {
+    "watch": ["src"],
+    "ext": "ts,json,js",
+    "exec": "npx tsc && node dist/server.js"
   },
   "keywords": [],
   "author": "",

server/src/models/User.ts

@@ -4,7 +4,8 @@ import bcrypt from 'bcrypt';
 // Define an interface for the User document
 interface IUser extends Document {
     username: string;
-    email: string;
+    // email: string;
+    selectedAvatar: string;
     password: string;
     correctAnswers: number;
     wrongAnswers: number;
@@ -20,16 +21,21 @@ const userSchema = new Schema<IUser>(
             unique: true,
             trim: true,
         },
-        email: {
+        // email: {
+        //     type: String,
+        //     required: true,
+        //     unique: true,
+        //     match: [/.+@.+\..+/, 'Must match an email address!'],
+        // },
+        password: {
             type: String,
             required: true,
-            unique: true,
-            match: [/.+@.+\..+/, 'Must match an email address!'],
+            minlength: 5,
         },
-        password: {
+
+        selectedAvatar: {
             type: String,
             required: true,
-            minlength: 5,
         },
         correctAnswers: {
             type: Number,

server/src/schemas/resolvers.ts

@@ -13,13 +13,15 @@ const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 interface AddUserArgs {
   input: {
     username: string;
-    email: string;
+    // email: string;
+    selectedAvatar: string;
     password: string;
   };
 }
 
 interface LoginUserArgs {
-  email: string;
+  // email: string;
+  username: string;
   password: string;
 }
 
@@ -64,11 +66,17 @@ const resolvers = {
   Mutation: {
     addUser: async (_parent: any, { input }: AddUserArgs) => {
       const user = await User.create(input);
-      const token = signToken(user.username, user.email, user._id);
+      const token = signToken(
+        user.username, 
+        // user.email, 
+        user._id
+      );
       return { token, user };
     },
-    login: async (_parent: any, { email, password }: LoginUserArgs) => {
-      const user = await User.findOne({ email });
+    // login: async (_parent: any, { email, password }: LoginUserArgs) => {
+    //   const user = await User.findOne({ email });
+    login: async (_parent: any, { username, password }: LoginUserArgs) => {
+      const user = await User.findOne({ username });
 
       if (!user) {
         throw new AuthenticationError('Invalid credentials');
@@ -80,7 +88,12 @@ const resolvers = {
         throw new AuthenticationError('Invalid credentials');
       }
 
-      const token = signToken(user.username, user.email, user._id);
+      const token = signToken(
+        user.username, 
+        // user.email, 
+        user._id
+      );
+
       return { token, user };
     },
     createCharacter: async (_: any, { name, picture, voice }: { name: string, picture: string, voice: string }) => {

server/src/schemas/typeDefs.ts

@@ -12,7 +12,7 @@ const typeDefs = gql`
 
   input UserInput {
     username: String!
-    email: String!
+    selectedAvatar: String!
     password: String!
   }
 
@@ -44,11 +44,18 @@ const typeDefs = gql`
 
   type Mutation {
     addUser(input: UserInput!): Auth
-    login(email: String!, password: String!): Auth
+    login(username: String!, password: String!): Auth
     createCharacter(name: String!, picture: String!, voice: String!): Character
     deleteCharacter(id: ID!): Character
     updateStats(isCorrect: Boolean!): User
   }
 `;
 
 export default typeDefs;
+
+
+// input UserInput {
+//   username: String!
+//   email: String!
+//   password: String!
+// }