Merge pull request #17 from sjohn198/edit_profile

Editing Profile + Delete User Profile

packages/express-backend/backend.js

@@ -85,6 +85,23 @@ app.post("/users", (req, res) => {
  userService.signupUser(req, res);
 });
 
+app.post("/users/profile", userService.authenticateUser, (req, res) => {
+ const { bio, skills } = req.body; // from form
+ const id = req.userID;
+ userService.editProfile(id, bio, skills)
+ .then((result) => {
+ if (result) {
+ res.send(result);
+ } else {
+ res.status(404).send(`Not found: ${id}`);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ res.status(500).send(error);
+ });
+});
+
 app.get("/users", userService.authenticateUser, (req, res) => {
  const id = req.userID;
  userService
@@ -121,6 +138,18 @@ app.post("/login", (req, res) => {
  userService.loginUser(req, res);
 });
 
+app.delete("/users", userService.authenticateUser, (req, res) => {
+ const id = req.userID;
+ userService
+ .removeUser(id)
+ .then((result) => {
+ res.status(204).send(result);
+ })
+ .catch((error) => {
+ res.status(500).send(error.name);
+ });
+});
+
 app.delete("/products/:id", userService.authenticateUser, (req, res) => {
  const id = req.params["id"];
  const userID = req.userID;

packages/express-backend/services/user-service.js

@@ -140,6 +140,17 @@ function authenticateUser(req, res, next) {
  }
 }
 
+function editProfile(id, bio, skills) {
+ return UserModel.findByIdAndUpdate(
+ id,
+ {
+ bio: bio,
+ skills: skills
+ },
+ {new: true}
+ );
+}
+
 function changeUserProfilePicture(id, profilePictureId) {
  return UserModel.findByIdAndUpdate(
  id,
@@ -222,6 +233,7 @@ export default {
  findProfilePictureById,
  uploadProfilePicture,
  changeUserProfilePicture,
+ editProfile,
  addProductToUser,
  removeProductFromUserID,
  addOrderToUser,

packages/react-frontend/src/Components/Auth.jsx

@@ -30,7 +30,7 @@ function Auth(props) {
  />
  <label htmlFor="password">password</label>
  <input
- type="text"
+ type="password"
  name="password"
  id="password"
  value={userAuth.password}

packages/react-frontend/src/Components/Navbar.jsx

@@ -9,6 +9,7 @@ import AddOrders from "../Views/AddOrders";
 import OrderStatistics from "../Views/OrderStatistics";
 import ProfilePage from "../Views/Profile";
 import ProductPage from "../Views/ProductPage"; // Import ProductPage component
+import EditProfile from "../Views/EditProfile";
 import "../Styles/Navbar.css";
 
 function App() {
@@ -27,6 +28,7 @@ function App() {
  <Route path="/add-orders" element={<AddOrders />} />
  <Route path="/statistics" element={<OrderStatistics />} />
  <Route path="/profile" element={<ProfilePage user_id={user} />} />
+ <Route path="/profile/edit" element={<EditProfile/>} />
  <Route path="/" element={<HomePage />} />
  <Route path="/product/:id" element={<ProductPage />} />
  </Routes>

packages/react-frontend/src/Components/ProfileEdit.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+
+function ProfileEdit(props) {
+ const [userProfile, setLogin] = useState({
+ bio: "",
+ skills: ""
+ });
+
+ function handleChange(event) {
+ const { name, value } = event.target;
+ if (name === "skills") {
+ setLogin({ bio: userProfile["bio"], skills: value });
+ } else setLogin({ bio: value, skills: userProfile["skills"] });
+ }
+
+ function submitForm() {
+ props.handleSubmit(userProfile);
+ setLogin({ bio: "", skills: "" });
+ }
+
+ return (
+ <form>
+ <label htmlFor="bio">bio</label>
+ <textarea
+ type="text"
+ name="bio"
+ id="bio"
+ value={userProfile.bio}
+ onChange={handleChange}
+ />
+ <label htmlFor="skills">skills</label>
+ <textarea
+ type="text"
+ name="skills"
+ id="skills"
+ value={userProfile.skills}
+ onChange={handleChange}
+ />
+ <input type="button" value="Change Profile" onClick={submitForm} />
+ </form>
+ );
+}
+
+export default ProfileEdit;

packages/react-frontend/src/Styles/Profile.css

@@ -14,6 +14,18 @@
  margin-bottom: 20px;
 }
 
+.button-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+}
+
+.centered-button {
+ padding: 10px 20px;
+ font-size: 16px;
+}
+
 .profile-avatar {
  width: 150px;
  height: 150px;

packages/react-frontend/src/Views/EditProfile.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import ProfileEdit from "../Components/ProfileEdit";
+import "../Styles/Profile.css";
+import Cookies from "js-cookie";
+import { addAuthHeader } from "../Components/helpers";
+import { useNavigate } from "react-router-dom";
+
+function EditProfile() {
+ const navigate = useNavigate();
+ function changeProfile(profile){
+ fetch("http://localhost:8000/users/profile", {
+ method: "POST",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ }),
+ body: JSON.stringify(profile)
+ })
+ .then((response) => {
+ if (!response.ok) {
+ // Handle the case where the server returns an error
+ throw new Error("User Not Found (Invalid Token)");
+ }
+ navigate("/profile");
+ });
+ }
+ return (
+ <div className="ProductList">
+ <h1>Edit Profile:</h1>
+ <ProfileEdit handleSubmit={changeProfile} />
+ </div>
+ );
+}
+
+export default EditProfile;

packages/react-frontend/src/Views/Profile.jsx

@@ -2,8 +2,12 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import "../Styles/Profile.css";
 import { addAuthHeader } from "../Components/helpers";
+import { useNavigate } from "react-router-dom";
+import Cookies from 'js-cookie';
+
 
 function Profile() {
+ const navigate = useNavigate();
  const [profilePicture, setProfilePicture] = useState("");
  const [user, setUser] = useState({ bio: "", skills: ["", ""] });
 
@@ -63,6 +67,23 @@ function Profile() {
  }
  };
 
+ function deleteProfile() {
+ fetch("http://localhost:8000/users", {
+ method: "DELETE",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ })
+ }).then((res) => {
+ if (res.status === 204)
+ {
+ Cookies.remove('safeHavenToken');
+ }
+ });
+ }
+ function editProfile() {
+ navigate("/profile/edit");
+ } 
+
  return (
  <div>
  <div className="profile-container">
@@ -97,6 +118,12 @@ function Profile() {
  </ul>
  </div>
  </div>
+ <div className="button-container">
+ <button className="centered-button" onClick={editProfile}>Edit Profile</button>
+ </div>
+ <div className="button-container">
+ <button className="centered-button" onClick={deleteProfile}>Delete Profile</button>
+ </div>
  <div className="bottom-margin"></div>
  </div>
  );