feat: Implement profile picture #343

client/src/components/UserAvatar.jsx

@@ -0,0 +1,37 @@
+import { HiUserCircle, HiPencil } from 'react-icons/hi';
+import PropTypes from 'prop-types';
+
+
+export default function UserAvatar({imageUrl, onUploadClick, onEditClick }) {
+  return (
+    <div className="relative group">
+      {imageUrl ? (
+        <>
+          <img
+            src={imageUrl}
+            alt="Profile Image"
+            className="h-20 w-20 rounded-full"
+          />
+          <div className="absolute top-0 -right-5 opacity-0 group-hover:opacity-100 flex items-center space-x-2">
+            <HiPencil
+              className="text-blue-500 h-6 w-6 cursor-pointer"
+              onClick={onEditClick}
+            />
+          </div>
+        </>
+      ) : (
+        <HiUserCircle
+          className="text-highlight h-20 w-20 cursor-pointer"
+          onClick={onUploadClick}
+          title='upload profile image'
+        />
+      )}
+    </div>
+  )
+};
+
+UserAvatar.propTypes = {
+  imageUrl: PropTypes.string.isRequired,
+  onUploadClick: PropTypes.func.isRequired,
+  onEditClick: PropTypes.func.isRequired,
+};

client/src/pages/Profile.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { HiUserCircle } from 'react-icons/hi';
+import UserAvatar from '../components/UserAvatar';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 
 import { useAuth } from 'context/AuthContext';
@@ -12,6 +12,8 @@ import SignupAnonUser from './SignupAnonUser';
 const Profile = () => {
 	const [username, setUsername] = useState('Anonymous');
 	const [profileResponse, setProfileResponse] = useState();
+	const [uploadedImageUrl, setUploadedImageUrl] = useState(null);
+	const [imageFile, setImageFile] = useState(null);
 
 	const { authState, dispatchAuth } = useAuth();
 	const { logout } = useKindeAuth();
@@ -25,9 +27,12 @@ const Profile = () => {
 	const getProfileData = async (email) => {
 		try {
 			const response = await api.get(`/profile/${email}`);
-			const { aboutMe, age, gender, username } = response.data;
+			const { aboutMe, age, gender, username, profileImage } = response.data;
 
 			setUsername(username);
+			if (profileImage) {
+				setUploadedImageUrl(profileImage);
+			}
 			aboutRef.current.value = aboutMe || '';
 			ageRef.current.value = age;
 			genderRef.current.value = gender;
@@ -38,22 +43,52 @@ const Profile = () => {
 
 	const handleUserName = (e) => setUsername(e.target.value);
 
-	const handleUpdateProfile = async () => {
-		const data = {
-			email,
-			username,
-			aboutMe: aboutRef.current.value,
-			gender: genderRef.current.value,
-			age: Number(ageRef.current.value),
+	const handleImageUpload = () => {
+		const fileInput = document.createElement('input');
+		fileInput.type = 'file';
+		fileInput.accept = 'image/*';
+		fileInput.onchange = (e) => {
+			const file = e.target.files[0];
+			if (file) {
+				setImageFile(file);
+				const reader = new FileReader();
+				reader.onload = (event) => {
+					setUploadedImageUrl(event.target.result);
+				};
+				reader.readAsDataURL(file);
+			}
 		};
-
+		fileInput.click();
+	};
+	const handleEditProfile = () => {
+		handleImageUpload();
+	};
+	const handleUpdateProfile = async () => {
+		const formData = new FormData();
+		formData.append('email', email);
+		formData.append('username', username);
+		formData.append('aboutMe', aboutRef.current.value);
+		formData.append('gender', genderRef.current.value);
+		formData.append('age', Number(ageRef.current.value));
+
+		if (imageFile) {
+			formData.append('profileImage', imageFile);
+		}
 		try {
-			const response = await api.post('/profile', data);
+			const response = await api.post('/profile', formData);
 			console.log(response.data.message);
-			setProfileResponse(response.data);
+			setProfileResponse(response.data.message);
+
 		} catch (error) {
-			console.error(error);
+			// Handle network errors or other unexpected issues
+			console.error('Error uploading file:', error);
+			if (error.response) {
+				// Handle HTTP errors with custom messages
+				console.log(error.response.data.error);
+				setProfileResponse(error.response.data.error);
+			}
 		}
+
 	};
 
 	function logOut() {
@@ -104,7 +139,11 @@ const Profile = () => {
 			) : (
 				<>
 					<section className="min-w-[300px] max-w-[400px] w-[40%] px-10 py-8 rounded-2xl flex flex-col justify-center items-center bg-clip-padding backdrop-filter backdrop-blur-2xl bg-gray-100 dark:bg-opacity-5 dark:bg-gray-300">
-						<HiUserCircle className="text-highlight h-20 w-20" />
+						<UserAvatar
+							imageUrl={uploadedImageUrl}
+							onUploadClick={handleImageUpload}
+							onEditClick={handleEditProfile}
+						/>
 
 						<input
 							className="outline-none bg-transparent w-fit text-center text-2xl placeholder:text-2xl placeholder:text-white"
@@ -169,7 +208,7 @@ const Profile = () => {
 					</button>
 					{profileResponse ? (
 						<div>
-							<p className="text-green-300">Profile Updated!</p>
+							<p className="text-green-300">{profileResponse}</p>
 						</div>
 					) : null}
 				</>

server/.env_sample

@@ -2,3 +2,4 @@ THIS IS JUST A FILE TO HELP YOU KNOW WHAT IS NEEDED IN THE .env FILE.
 YOU HAVE TO CREATE ANOTHER FILE AND NAME IT .env
 
 MongoDB_URL=mongodb://username:password@localhost:27018/
+GOOGLE_APPLICATION_CREDENTIALS=''

server/controllers/userController.js

@@ -3,6 +3,13 @@ const UserRouter = require('express').Router();
 const validator = require('validator').default;
 const { v4: uuidv4 } = require('uuid');
 
+const multer = require('multer');
+// google cloud vision api to check profile image validation
+const vision = require('@google-cloud/vision');
+// multer for profile image
+const storage = multer.memoryStorage();
+const imageUpload = multer({ storage: storage });
+
 const User = require('../models/UserSchema');
 
 let accessToken = process.env.ACCESS_TOKEN;
@@ -36,6 +43,50 @@ const emailValidator = (req, res, next) => {
     next();
   }
 };
+// check picture is safe or not
+const profileImageValidator = async (imageBuffer) => {
+  const CREDENTIALS = JSON.parse(process.env.GOOGLE_APPLICATION_CREDENTIALS);
+  const CONFIG = {
+    credentials: {
+      private_key: CREDENTIALS.private_key,
+      client_email: CREDENTIALS.client_email,
+    },
+  };
+  const client = new vision.ImageAnnotatorClient(CONFIG);
+
+  const likelihoodToPercentage = {
+    VERY_UNLIKELY: 0,
+    UNLIKELY: 25,
+    POSSIBLE: 50,
+    LIKELY: 75,
+    VERY_LIKELY: 100,
+  };
+  const isUnsafe = (detections) => {
+    const likelihood =Math.max(
+      detections.adult,
+      detections.medical,
+      detections.spoof,
+      detections.violence,
+      detections.racy
+    );
+    return likelihoodToPercentage[likelihood] >= 50; // Adjust as needed
+  };
+
+  let result;
+  try {
+    [result] = await client.safeSearchDetection(imageBuffer);
+  } catch (err) {
+    console.error('cloud vision api error', err.code, ' : ', err.details);
+    return {
+      unsafe: false,
+      error:
+        'Currently, there is some error while uploading the profile image. Please try again later.',
+    };
+  }
+  const detections = result.safeSearchAnnotation;
+  const unsafe = isUnsafe(detections);
+  return { unsafe, error: null };
+};
 
 const getAccessToken = async () => {
   try {
@@ -192,12 +243,31 @@ const updateProfile = async (req, res) => {
       return res.status(NOT_FOUND).json({ error: 'User not found' });
     }
 
+    if (req.file) {
+      const imageBuffer = req.file.buffer;
+      // Check for unsafe content using the utility function
+      const validationResult = await profileImageValidator(imageBuffer);
+      if (validationResult.unsafe) {
+        // Return the error if the image is not safe or there's a permission issue
+        return res
+          .status(NOT_ACCEPTABLE)
+          .json({ error: 'Unsafe content detected in the profile image' });
+      } else if (validationResult.error) {
+        console.error(error);
+        return res
+          .status(INTERNAL_SERVER_ERROR)
+          .json({ error: validationResult.error });
+      }
+    }
     // Update user's profile with provided fields or the User fields or defaults
     user.username = username || user.username || 'Anonymous';
     user.aboutMe = aboutMe || user.aboutMe || null;
     user.gender = gender || user.gender || 'Unknown';
     user.age = age || user.age || null;
     user.settings = settings || user.settings;
+    user.profileImage = req.file
+      ? `data:${req.file.mimetype};base64,${req.file.buffer.toString('base64')}`
+      : user.profileImage;
 
     // Save the updated user profile
     await user.save();
@@ -235,7 +305,7 @@ const deleteUser = async (req, res) => {
 };
 
 UserRouter.route('/login').post(emailValidator, loginUser);
-UserRouter.route('/profile').post(emailValidator, updateProfile);
+UserRouter.route('/profile').post(imageUpload.single('profileImage'), emailValidator, updateProfile);
 UserRouter.route('/profile/:email').get(getProfile);
 UserRouter.route('/deleteUser').delete(emailValidator, deleteUser); //Email validation applied to the required request handlers
 

server/models/UserSchema.js

@@ -31,6 +31,10 @@ const UserSchema = new mongoose.Schema({
     type: Object,
     required: false,
   },
+  profileImage: {
+    type: String, 
+    required: false
+  },
 });
 
 UserSchema.index({ email: 1 }, { unique: true });