Add activity code S56

individual/fullstack/s54-s62/src/App.js

@@ -3,8 +3,10 @@ import { Container } from "react-bootstrap";
 import "./App.css";
 
 // Pages
-import Home from "./pages/Home";
+// import Home from "./pages/Home";
-import Courses from "./pages/Courses";
+// import Courses from "./pages/Courses";
+import Register from "./pages/Register";
+import Login from "./pages/Login";
 
 function App() {
   return (
@@ -14,8 +16,8 @@ function App() {
     <>
       <AppNavBar />
       <Container>
-        <Home />
+        {/* <Register/> */}
-        <Courses />
+        <Login/>
       </Container>
     </>
   );

individual/fullstack/s54-s62/src/components/CourseCard.js

@@ -13,10 +13,10 @@ export default function CourseCard({ courseProp }) {
    * const [ getter, setterFunction ] = useState(initialGetterValue)
    */
 
-  const [ count, setCount ] = useState(30);
+  const [ count, setCount ] = useState(0);
   const enroll = () => {
-    if (count > 0) {
+    if (count < 30) {
-      setCount(count - 1);
+      setCount(count + 1);
     } else {
       alert('No More Seats');
     }

individual/fullstack/s54-s62/src/pages/Login.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { Form, Button } from "react-bootstrap";
+
+const Login = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isValid, setIsValid] = useState(false);
+
+  const checkFormValidity = () => {
+    // Simple validation for demonstration purposes
+    const isValid = email !== "" && password !== "";
+    setIsValid(isValid);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    // Update state based on the input field name
+    switch (name) {
+      case "email":
+        setEmail(value);
+        break;
+      case "password":
+        setPassword(value);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch("http://localhost:4000/users/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      });
+
+      if (response.ok) {
+        alert("Thank you for logging in");
+        console.log("Login success")
+        // Handle successful login, e.g., redirect to another page
+      } else {
+        alert("Unsucessful login");
+        // Handle invalid credentials, e.g., show an error message
+      }
+    } catch (error) {
+      console.error("Error during login:", error);
+      // Handle other errors, e.g., network issues
+    }
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <h1 className="my-5 text-center">Login</h1>
+      <Form.Group>
+        <Form.Label>Email Address:</Form.Label>
+        <Form.Control
+          type="email"
+          placeholder="Enter Email"
+          required
+          name="email"
+          value={email}
+          onChange={(e) => {
+            handleInputChange(e);
+            checkFormValidity();
+          }}
+        />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Password:</Form.Label>
+        <Form.Control
+          type="password"
+          placeholder="Enter Password"
+          required
+          name="password"
+          value={password}
+          onChange={(e) => {
+            handleInputChange(e);
+            checkFormValidity();
+          }}
+        />
+      </Form.Group>
+      <Button variant="success" type="submit" disabled={!isValid}>
+        Login
+      </Button>
+    </Form>
+  );
+};
+
+export default Login;

individual/fullstack/s54-s62/src/pages/Register.js

@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+import { Form, Button } from 'react-bootstrap';
+
+export default function Register() {
+
+	// State hooks to store the values of the input fields
+	const [ firstName, setFirstName ] = useState("");
+	const [ lastName, setLastName ] = useState("");
+	const [ email, setEmail ] = useState("");
+	const [ mobileNo, setMobileNo ] = useState("");
+	const [ password, setPassword] = useState("");
+	const [ confirmPassword, setConfirmPassword ] = useState("");
+	// State to determine whether the submit button is enabled or not
+	const [ isActive, setIsActive ] = useState(false);
+
+	console.log(firstName);
+	console.log(lastName);
+	console.log(email);
+	console.log(mobileNo);
+	console.log(password);
+	console.log(confirmPassword);
+
+
+	function registerUser(e) {
+
+		e.preventDefault();
+
+		fetch("http://localhost:4000/users/register", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			}, 
+			body: JSON.stringify({
+				firstName: firstName,
+				lastName: lastName,
+				email: email,
+				mobileNo: mobileNo,
+				password: password
+			})
+		})
+		.then(res => res.json())
+		.then(data => {
+			console.log(data)
+
+			if (data) {
+				setFirstName("");
+				setLastName("");
+				setEmail("");
+				setMobileNo("");
+				setPassword("");
+				setConfirmPassword("");
+
+				alert("Thank you for registering!")
+
+			} else {
+
+				alert("Please try again later.")
+			}
+		})
+	}
+
+
+	useEffect(() => {
+		if((firstName !== "" && lastName !== "" && email !== "" && mobileNo !== "" && password !== "" && confirmPassword !== "") && (password === confirmPassword) && (mobileNo.length === 11)) {
+
+			setIsActive(true)
+		} else {
+			setIsActive(false)
+		}
+		// dependencies
+	}, [firstName, lastName, email, mobileNo, password, confirmPassword])
+
+    return (
+		
+		<Form onSubmit={(e) => registerUser(e)}>
+		<h1 className="my-5 text-center">Register</h1>
+			<Form.Group>
+				<Form.Label>First Name:</Form.Label>
+				<Form.Control 
+					type="text" 
+					placeholder="Enter First Name" 
+					required
+					value={firstName}
+					onChange={e => {setFirstName(e.target.value)}}
+				/>
+			</Form.Group>
+			<Form.Group>
+				<Form.Label>Last Name:</Form.Label>
+				<Form.Control 
+					type="text" 
+					placeholder="Enter Last Name" 
+					required
+					value={lastName}
+					onChange={e => {setLastName(e.target.value)}}
+				/>
+			</Form.Group>
+			<Form.Group>
+				<Form.Label>Email:</Form.Label>
+				<Form.Control 
+					type="email" 
+					placeholder="Enter Email" 
+					required
+					value={email}
+					onChange={e => {setEmail(e.target.value)}}
+					/>					
+			</Form.Group>
+			<Form.Group>
+				<Form.Label>Mobile No:</Form.Label>
+				<Form.Control 
+					type="number" 
+					placeholder="Enter 11 Digit No."
+					required
+					value={mobileNo}
+					onChange={e => {setMobileNo(e.target.value)}}
+					/>
+			</Form.Group>
+			<Form.Group>
+				<Form.Label>Password:</Form.Label>
+				<Form.Control 
+					type="password" 
+					placeholder="Enter Password" 
+					required
+					value={password}
+					onChange={e => {setPassword(e.target.value)}}
+					/>
+			</Form.Group>
+			<Form.Group>
+				<Form.Label>Confirm Password:</Form.Label>
+				<Form.Control 
+					type="password" 
+					placeholder="Confirm Password" 
+					required
+					value={confirmPassword}
+					onChange={e => {setConfirmPassword(e.target.value)}}
+					/>
+			</Form.Group>
+
+			{/*conditionally renders the submit button based on the isActive state*/}
+			{
+				isActive
+				?
+				<Button variant="primary" type="submit" id="submitBtn">Submit</Button>
+				:
+				<Button variant="danger" type="submit" id="submitBtn" disabled>Submit</Button>
+			}
+			
+				
+		</Form>
+    )
+
+}