9 |
17 | );
18 | }
19 |
20 | export default Login;
21 |
--------------------------------------------------------------------------------
/client/src/assets/svg/Error.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import "./styles/dark.css";
5 | import App from "./App";
6 | import { store } from "./app/store";
7 | import { Provider } from "react-redux";
8 | import "react-toastify/dist/ReactToastify.css";
9 | import "react-loading-skeleton/dist/skeleton.css";
10 |
11 |
12 | ReactDOM.createRoot(document.getElementById('root')).render(
13 |
8 | 
9 |
21 | );
22 | };
23 |
24 | export default NotFound;
25 |
--------------------------------------------------------------------------------
/client/src/components/CustomButton/index.jsx:
--------------------------------------------------------------------------------
1 | import "./index.css";
2 |
3 | const CustomButton = ({
4 | onSubmit,
5 | type,
6 | className,
7 | value,
8 | disabled,
9 | onClick,
10 | Icon,
11 | children,
12 |
13 | }) => {
14 | return !Icon ? (
15 |
23 | ) : (
24 |
33 | );
34 | };
35 |
36 | export default CustomButton;
37 |
--------------------------------------------------------------------------------
/api/models/comment.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 | const Schema = mongoose.Schema;
3 |
4 | const CommentSchema = new Schema(
5 | {
6 | post: {
7 | type: Schema.Types.ObjectId,
8 | ref: "post",
9 | required: true,
10 | },
11 | parentId : {
12 | type: String,
13 | default: null
14 | },
15 | owner: {
16 | type: Schema.Types.ObjectId,
17 | ref: "user",
18 | required: true,
19 | },
20 | text: {
21 | type: String,
22 | required: true,
23 | },
24 | likes: {
25 | type: [String],
26 | default: [],
27 | },
28 | },
29 | { timestamps: true }
30 | );
31 |
32 |
33 | module.exports = mongoose.model("comment", CommentSchema);
34 |
--------------------------------------------------------------------------------
/client/src/assets/svg/friendsActive.jsx:
--------------------------------------------------------------------------------
1 | function FriendsActive() {
2 | return (
3 |
6 | );
7 | }
8 |
9 | export default FriendsActive;
10 |
--------------------------------------------------------------------------------
/client/src/assets/svg/notifications.jsx:
--------------------------------------------------------------------------------
1 | function Notifications() {
2 | return (
3 |
6 | );
7 | }
8 |
9 | export default Notifications;
10 |
--------------------------------------------------------------------------------
/client/src/components/input/AuthInput/style.module.css:
--------------------------------------------------------------------------------
1 | .authInput_container {
2 | width: 100%;
3 | position: relative;
4 | }
5 | .authInput_container input {
6 | background: var(--bg-secondary);
7 | border: 1px solid var(--bg-third);
8 | border-radius: 10px;
9 | color: var(--color-secondary);
10 | font-size: 17px;
11 | height: 40px;
12 | margin-bottom: 10px;
13 | outline: none;
14 | padding-left: 10px;
15 | width: 100%;
16 | }
17 | .ERROR {
18 | border-color: var(--color-error) !important;
19 | }
20 | .ER {
21 | position: absolute;
22 | right: 40px;
23 | top: 15px;
24 | }
25 |
26 | .showHidePassword {
27 | position: absolute;
28 | right: 9px;
29 | top: 8px;
30 | font-size: 17px;
31 | cursor: "pointer";
32 | }
33 |
--------------------------------------------------------------------------------
/client/src/hooks/useOnClickOutside.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | function useOnClickOutside(ref, state, handler) {
4 | useEffect(() => {
5 | const listener = (event) => {
6 | if (
7 | !ref.current ||
8 | ref.current.contains(event.target) ||
9 | state === false
10 | ) {
11 | return;
12 | }
13 | handler(event);
14 | };
15 | document.addEventListener("mousedown", listener);
16 | document.addEventListener("touchstart", listener);
17 | return () => {
18 | document.removeEventListener("mousedown", listener);
19 | document.removeEventListener("touchstart", listener);
20 | };
21 | }, [ref, handler, state]);
22 | }
23 | export default useOnClickOutside;
24 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
10 |
20 | 11 | Looks like this page does not exist or Something Went Wrong. 12 |
13 |14 | Go Back to the 15 | 16 | Home Page 17 | 18 |
19 |
7 |
22 | );
23 | }
24 |
25 | export default ProfileMenu;
26 |
--------------------------------------------------------------------------------
/api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "start": "nodemon server.js"
8 | },
9 | "author": "Zhioua Mohamed",
10 | "license": "ISC",
11 | "dependencies": {
12 | "bcryptjs": "^2.4.3",
13 | "cloudinary": "^1.32.0",
14 | "cookie-parser": "^1.4.6",
15 | "cors": "^2.8.5",
16 | "dotenv": "^16.0.3",
17 | "express": "^4.18.2",
18 | "express-rate-limit": "^6.7.0",
19 | "jsonwebtoken": "^8.5.1",
20 | "mongoose": "^6.7.3",
21 | "multer": "^1.4.5-lts.1",
22 | "nodemon": "^2.0.20",
23 | "sharp": "^0.31.3",
24 | "socket.io": "^4.6.1",
25 | "unique-username-generator": "^1.1.3",
26 | "validator": "^13.7.0",
27 | "xss-clean": "^0.1.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/client/src/assets/svg/openEye.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/app/features/auth/prefetch.jsx:
--------------------------------------------------------------------------------
1 | import { store } from "../../store"
2 | import { useEffect } from 'react';
3 | import { Outlet } from 'react-router-dom';
4 | import { extendedApiSlice } from "../post/postApi";
5 | import { reactionApiSlice } from "../reaction/reactionApi";
6 | import { CommentApiSlice } from "../comment/commentApi";
7 |
8 |
9 | const Prefetch = () => {
10 |
11 | useEffect(() => {
12 | store.dispatch(extendedApiSlice.util.prefetch('fetchPosts', 'fetchPosts', { force: true }));
13 | store.dispatch(reactionApiSlice.util.prefetch('fetchReactions', 'fetchReactions', { force: true }));
14 | store.dispatch(CommentApiSlice.util.prefetch('fetchComments', 'fetchComments', { force: true }));
15 | }, [])
16 |
17 | return
8 |
9 | Posts
10 |
11 |
12 | About
13 |
14 |
15 | Friends
16 |
17 |
18 | Photos
19 |
20 |
21 |
14 |
24 |
15 | 
21 |
22 | {children}
23 |
7 |
26 | )
27 | }
28 |
29 | export default NotificationSkeleton
--------------------------------------------------------------------------------
/client/src/components/Profile/ProfileInfo.jsx:
--------------------------------------------------------------------------------
1 | import { CustomButton } from "../index";
2 | import style from "./index.module.css";
3 |
4 | function ProfileInfo({ isVisitor }) {
5 | return (
6 |
8 |
15 |
16 |
25 |
7 |
24 | );
25 | }
26 |
27 | export default ProfileInfo;
28 |
--------------------------------------------------------------------------------
/client/src/components/UI/Notification/Notification.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | display: flex;
3 | gap: 6px;
4 | flex-direction: column;
5 | background:var(--bg-primary);
6 | padding: 15px;
7 | border-radius: 10px;
8 | }
9 | .header {
10 | font-size: 14px;
11 | font-weight: 600;
12 | }
13 | .content {
14 | display: flex;
15 | align-items: center;
16 | justify-content: space-between;
17 | gap: 15px;
18 | font-size: 14px;
19 | font-weight: 400;
20 | cursor: pointer;
21 | text-decoration: none;
22 | }
23 |
24 | .content2 {
25 | display: flex;
26 | flex-direction: column;
27 | }
28 | .image {
29 | position: relative;
30 | }
31 | .image img:nth-child(1) {
32 | width: 56px;
33 | height: 56px;
34 | border-radius: 100%;
35 | }
36 | .type {
37 | width: 28px;
38 | height: 28px;
39 | position: absolute;
40 | right: -5px;
41 | bottom: 0;
42 | }
43 |
44 | .time {
45 | font-size: 12px;
46 | font-weight: 600;
47 | color:var(--color-primary);
48 | }
49 |
--------------------------------------------------------------------------------
/client/src/pages/Post/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import classes from "./style.module.css";
3 | import {Post , PostSkeleton} from "../../components/index";
4 | import { useNavigate ,useParams} from "react-router-dom";
5 | import { useFetchPostQuery } from "../../app/features/post/postApi";
6 |
7 | function PostPage() {
8 | const navigate = useNavigate();
9 |
10 | const { id } = useParams();
11 | const {data,isLoading ,isError ,isFetching,isSuccess} = useFetchPostQuery(id)
12 | const post = data?.entities[id]
13 |
14 |
15 | const postsSkelton = isLoading || isFetching;
16 |
17 | useEffect(() => {
18 | if (isError) {
19 | navigate("/404");
20 | }
21 | }, [isError]);
22 |
23 | return (
24 |
8 | ziwi
9 |
10 |
11 | ziwi
12 | ziwi
13 |
14 |
15 |
23 |
16 | {isVisitor ? (
17 |
22 |
25 |
30 | );
31 | }
32 |
33 | export default PostPage;
34 |
--------------------------------------------------------------------------------
/client/src/components/UI/FormLoader/index.jsx:
--------------------------------------------------------------------------------
1 | import PulseLoader from "react-spinners/PulseLoader";
2 | import BeatLoader from "react-spinners/BeatLoader";
3 | import "./index.css";
4 |
5 | const FormLoader = ({ loading, children, type }) => {
6 | return (
7 |
26 | {postsSkelton && }
28 |
29 |
8 | {loading ? : ""}
9 | {loading ? (
10 |
32 | );
33 | };
34 |
35 | export default FormLoader;
36 |
--------------------------------------------------------------------------------
/api/models/notification.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 | const Schema = mongoose.Schema;
3 | const User =require("../models/user")
4 |
5 | const NotificationSchema = new Schema(
6 | {
7 | sender: { type: Schema.Types.ObjectId, ref: "user" },
8 | recipient: { type: Schema.Types.ObjectId, ref: "user" },
9 | url: {
10 | type: String,
11 | },
12 | content: {
13 | type: String,
14 | trim: true,
15 | },
16 | type: {
17 | type: String,
18 | enum: ['react', 'comment', 'friend'],
19 | },
20 | seen: {type:Boolean, default: false}
21 | },
22 | { timestamps: true }
23 | );
24 |
25 | NotificationSchema.pre(/^find/, function (next) {
26 | this.populate({
27 | path: 'sender',
28 | select: 'photo',
29 | });
30 | next();
31 | });
32 |
33 | NotificationSchema.post('save', async function () {
34 | this.populate({
35 | path: 'sender',
36 | select: 'photo',
37 | });
38 | });
39 |
40 | module.exports = mongoose.model("notification", NotificationSchema);
41 |
--------------------------------------------------------------------------------
/client/src/app/features/user/photosApi.jsx:
--------------------------------------------------------------------------------
1 | import { apiSlice } from "../../api/apiSlice";
2 |
3 | export const PhotosApiSlice = apiSlice.injectEndpoints({
4 | endpoints: (builder) => ({
5 |
6 | FetchPhotos: builder.query({
7 | query: (username) => `/api/users/${username}/photos`,
8 | providesTags: ["Photo"],
9 | }),
10 |
11 | updateCoverPhoto: builder.mutation({
12 | query: (credentials) => ({
13 | url: "/api/users/update/profile/cover",
14 | method: "POST",
15 | body: credentials,
16 | }),
17 | invalidatesTags: ["Photo"],
18 | }),
19 |
20 | updateProfilePhoto: builder.mutation({
21 | query: (credentials) => ({
22 | url: "/api/users/update/profile/Photo",
23 | method: "POST",
24 | body: credentials,
25 | }),
26 | invalidatesTags: ["Photo"],
27 | }),
28 | }),
29 | });
30 |
31 | export const {
32 | useFetchPhotosQuery,
33 | useUpdateCoverPhotoMutation,
34 | useUpdateProfilePhotoMutation,
35 | } = PhotosApiSlice;
36 |
--------------------------------------------------------------------------------
/client/src/components/Posts/Post/Likes/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import reactionStyle from "./react.module.css";
3 | import chekedlike from "../../../../assets/svg/like.svg";
4 |
5 | const Likes = ({ Reactions, userId }) => {
6 | if (Reactions?.length > 0) {
7 |
8 | return Reactions?.find((reaction) => reaction.owner === userId) ? (
9 |
10 | <>
11 |
11 | {type === 2 ? (
12 |
25 | ) : (
26 | ""
27 | )}
28 |
29 | {children}
30 |
31 | {
13 | input.current.focus();
14 | setShowSearchMenu(true);
15 | }}
16 | >
17 | {showIcon && {
25 | setShowIcon(false);
26 | setShowSearchMenu(true);
27 | }}
28 | onBlur={() => setShowIcon(true)}
29 | />
30 |
31 |
32 | );
33 | };
34 |
35 | export default Search;
36 |
--------------------------------------------------------------------------------
/api/models/post.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 | const Schema = mongoose.Schema;
3 | const Comment = require("./comment");
4 | const Reaction = require("./reaction");
5 |
6 | const PostSchema = new Schema(
7 | {
8 | owner: {
9 | type: Schema.Types.ObjectId,
10 | ref: "user",
11 | required: true,
12 | },
13 | text: {
14 | type: String,
15 | required: true,
16 | },
17 | image: {
18 | type: String,
19 | default: "no photo",
20 | },
21 | cloudinary_id: {
22 | type: String,
23 | },
24 | },
25 | { timestamps: true }
26 | );
27 |
28 | // delete post comments when the post is removed
29 | PostSchema.pre("remove", async function (next) {
30 | const post = this;
31 | await Comment.deleteMany({ post: post._id });
32 | next();
33 | });
34 |
35 | // delete post reactions when the post is removed
36 | PostSchema.pre("remove", async function (next) {
37 | const post = this;
38 | await Reaction.deleteMany({ post: post._id });
39 | next();
40 | });
41 |
42 | module.exports = mongoose.model("post", PostSchema);
43 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@popperjs/core": "^2.11.6",
13 | "@reduxjs/toolkit": "^1.9.3",
14 | "formik": "^2.2.9",
15 | "js-cookie": "^3.0.1",
16 | "moment": "^2.29.4",
17 | "react": "^18.2.0",
18 | "react-dom": "^18.2.0",
19 | "react-easy-crop": "^4.7.4",
20 | "react-loading-skeleton": "^3.2.0",
21 | "react-popper": "^2.3.0",
22 | "react-redux": "^8.0.5",
23 | "react-responsive": "^9.0.2",
24 | "react-router-dom": "^6.9.0",
25 | "react-simple-image-viewer": "^1.2.2",
26 | "react-spinners": "^0.13.8",
27 | "react-toastify": "^9.1.1",
28 | "socket.io-client": "^4.6.1",
29 | "styled-components": "^5.3.9",
30 | "yup": "^1.0.2"
31 | },
32 | "devDependencies": {
33 | "@types/react": "^18.0.28",
34 | "@types/react-dom": "^18.0.11",
35 | "@vitejs/plugin-react": "^3.1.0",
36 | "vite": "^4.2.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Zhioua Mohamed
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/api/middlewares/checkAuth.js:
--------------------------------------------------------------------------------
1 | const User = require("../models/user");
2 | const jwt = require("jsonwebtoken");
3 |
4 | async function checkAuth(req, res, next) {
5 | let token;
6 | try {
7 | // check if token exist
8 | if (
9 | req.headers.authorization &&
10 | req.headers.authorization.startsWith("Bearer")
11 | ) {
12 | token = req.headers.authorization.split(" ")[1];
13 | } else if (req.cookies.Authorization) {
14 | token = req.cookies.Authorization;
15 | }
16 | if (!token)
17 | return res
18 | .status(401)
19 | .json("You are not logged in, please log in to access");
20 | //decoding the token
21 | var decoded = jwt.verify(token, process.env.ACCESS_TOKEN_SECRET);
22 | //finding the user using decoded sub
23 | const user = await User.findById(decoded.sub);
24 | if (!user) {
25 | return res.status(401).json("user not found");
26 | } else {
27 | // attach user to req
28 | req.user = user;
29 | next();
30 | }
31 | } catch (error) {
32 | return res.status(404).json(error.message);
33 | }
34 | }
35 |
36 | module.exports = checkAuth;
37 |
--------------------------------------------------------------------------------
/client/src/components/Profile/ProfileCover/OldCovers/OldCovers.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | }
6 | .card {
7 | width: 100%;
8 | max-width: 700px;
9 | min-height: 70vh;
10 | padding: 0;
11 | margin: 8px;
12 | }
13 | .header {
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | padding: 16px 0;
18 | border-bottom: 1px solid var(--divider);
19 | font-size: 20px;
20 | font-weight: 700;
21 | position: relative;
22 | }
23 | .header div {
24 | position: absolute;
25 | right: 0;
26 | }
27 | .content {
28 | padding: 16px;
29 | display: flex;
30 | flex-direction: column;
31 | gap: 16px;
32 | }
33 |
34 | .old_photos {
35 | display: flex;
36 | flex-wrap: wrap;
37 | gap: 5px;
38 | justify-content: center;
39 | margin: 10px 0;
40 | max-height: 150px;
41 | overflow: auto;
42 | }
43 | .old_photos img {
44 | width: 100px;
45 | height: 100px;
46 | object-fit: cover;
47 | border-radius: 10px;
48 | cursor: pointer;
49 | }
50 |
--------------------------------------------------------------------------------
/client/src/app/features/user/userProfileApi.jsx:
--------------------------------------------------------------------------------
1 | import { apiSlice } from "../../api/apiSlice";
2 | import { socket } from "../../../routes/PrivateRoute";
3 |
4 | export const UserProfileApiSlice = apiSlice.injectEndpoints({
5 | endpoints: (builder) => ({
6 | fetchUserProfile: builder.query({
7 | query: (username) => `/api/users/getUserProfile/${username}`,
8 | providesTags: ["Userprofile"],
9 | }),
10 |
11 | FetchFriends: builder.query({
12 | query: () => `/api/friends/`,
13 | providesTags: ["Userprofile"],
14 | }),
15 |
16 | FriendFunc: builder.mutation({
17 | query: ({ id, type }) => ({
18 | url: `/api/friends/${type}/${id}`,
19 | method: "PUT",
20 | }),
21 | invalidatesTags: ["Userprofile"],
22 | transformResponse: (responseData) => {
23 | const newNotification = responseData?.newNotif;
24 | if (newNotification) {
25 | socket.emit("notification", { notification: newNotification });
26 | }
27 | },
28 | }),
29 | }),
30 | });
31 |
32 | export const { useFetchUserProfileQuery, useFriendFuncMutation, useFetchFriendsQuery } =
33 | UserProfileApiSlice;
34 |
--------------------------------------------------------------------------------
/client/src/assets/svg/friends.jsx:
--------------------------------------------------------------------------------
1 | function Friends() {
2 | return (
3 |
6 | );
7 | }
8 |
9 | export default Friends;
10 |
--------------------------------------------------------------------------------
/client/src/assets/svg/liveVideo.jsx:
--------------------------------------------------------------------------------
1 | function LiveVideo({ color }) {
2 | return (
3 |
15 | );
16 | }
17 |
18 | export default LiveVideo;
19 |
--------------------------------------------------------------------------------
/client/src/components/UI/skeleton/postSkeleton.jsx:
--------------------------------------------------------------------------------
1 | import Skeleton from "react-loading-skeleton";
2 | import {Card} from "../../index";
3 | import styles from"./skeleton.module.css"
4 |
5 | function PostSkeleton() {
6 | return (
7 |
9 |
35 |
10 |
30 |
11 |
18 |
19 |
29 |
31 |
34 |
20 |
38 | );
39 | }
40 |
41 | export default Home;
42 |
--------------------------------------------------------------------------------
/client/src/app/features/auth/authApi.jsx:
--------------------------------------------------------------------------------
1 | import { apiSlice } from "../../api/apiSlice";
2 | import { logOut } from "../user/userSlice";
3 |
4 | export const authApiSlice = apiSlice.injectEndpoints({
5 | endpoints: (builder) => ({
6 | login: builder.mutation({
7 | query: (Credentials) => ({
8 | url: "/api/users/signin",
9 | method: "POST",
10 | body: { ...Credentials },
11 | }),
12 |
13 | }),
14 |
15 | register: builder.mutation({
16 | query: (credentials) => {
17 | return {
18 | url: "/api/users/signup",
19 | method: "POST",
20 | body: { ...credentials },
21 | };
22 | },
23 | }),
24 |
25 | Logout: builder.mutation({
26 | query: () => {
27 | return {
28 | url: "/api/users/logout",
29 | method: "GET",
30 | };
31 | },
32 | async onQueryStarted(arg, { dispatch, queryFulfilled }) {
33 | try {
34 | const { data } = await queryFulfilled
35 | dispatch(logOut());
36 | setTimeout(() => {
37 | dispatch(apiSlice.util.resetApiState())
38 | }, 1000)
39 | } catch (error) {
40 | console.log(error)
41 | }
42 | }
43 | }),
44 | }),
45 | });
46 |
47 | export const {
48 | useLoginMutation,
49 | useRegisterMutation,
50 | useLogoutMutation,
51 | } = authApiSlice;
52 |
--------------------------------------------------------------------------------
/client/src/assets/svg/photo.jsx:
--------------------------------------------------------------------------------
1 | function Photo({ color }) {
2 | return (
3 |
16 | );
17 | }
18 |
19 | export default Photo;
20 |
--------------------------------------------------------------------------------
/client/src/components/Profile/Photos.jsx:
--------------------------------------------------------------------------------
1 | import Skeleton from "react-loading-skeleton";
2 | import { Link } from "react-router-dom";
3 | import { Card } from "../index";
4 | import style from "./index.module.css";
5 | import PuffLoader from "react-spinners/PuffLoader";
6 |
7 | function Photos({ photosData, photosSkelton }) {
8 | return (
9 |
21 |
37 |
23 | {postSkeleton && (
24 | <>
25 |
36 |
11 | Photos
12 |
13 | See all photos
14 |
15 |
16 |
17 |
38 |
18 | {photosSkelton ? (
19 |
24 | {photosSkelton ? (
25 |
28 | {photosData?.resources?.slice(0, 9).map((img) => (
29 |
34 | ))}
35 |
36 | )}
37 | Are you sure?
25 | 26 |
27 |
32 | 28 | Do you really want to delete these memorie? This process cannot be 29 | undone. 30 |
31 |
33 | dispatch(closeModal())}
37 | />
38 | {deletePost(id) ;dispatch(closeModal())}}
42 | />
43 |
44 |
45 | );
46 | };
47 |
48 | export default DeleteConfirm;
49 |
--------------------------------------------------------------------------------
/client/src/utils/YupValidation.jsx:
--------------------------------------------------------------------------------
1 | import * as Yup from "yup";
2 |
3 | export const signupValidation = Yup.object({
4 | firstName: Yup.string()
5 | .required("What's your first name?")
6 | .max(100)
7 | .min(2)
8 | .matches(/^([a-zA-Z]+\s)*[a-zA-Z]+$/, "You can use english charcters only"),
9 | lastName: Yup.string()
10 | .required("What's your last name?")
11 | .max(100)
12 | .min(2)
13 | .matches(/^([a-zA-Z]+\s)*[a-zA-Z]+$/, "You can use english charcters only"),
14 | email: Yup.string()
15 | .required(
16 | "You'll need this when you log in and if you ever need to reset your password."
17 | )
18 | .email("Must be a valid email.")
19 | .max(100),
20 | password: Yup.string()
21 | .required("Password is required")
22 | .min(8)
23 | .matches(
24 | /(?=(.*[0-9]))((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.{8,}$/i,
25 | "Password should have at least 1 lowercase letter, 1 uppercase letter, 1 number, and be at least 8 characters long"
26 | ),
27 | passwordConfirm: Yup.string().test(
28 | "passwords-match",
29 | "Password confirm must match password !",
30 | function (value) {
31 | return this.parent.password === value;
32 | }
33 | ),
34 | gender: Yup.string().required("Gender is required"),
35 | });
36 |
37 | export const loginValidation = Yup.object({
38 | email: Yup.string()
39 | .required("Email address is required.")
40 | .email("Must be a valid email.")
41 | .max(100),
42 | password: Yup.string().required("Password is required").min(8),
43 | });
44 |
--------------------------------------------------------------------------------
/client/src/assets/svg/market.jsx:
--------------------------------------------------------------------------------
1 | function Market({ color }) {
2 | return (
3 |
6 | );
7 | }
8 |
9 | export default Market;
10 |
--------------------------------------------------------------------------------
/api/routes/users.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const router = express.Router();
3 | const multerUploads = require("../middlewares/multerMiddleware");
4 | const checkAuth = require("../middlewares/checkAuth");
5 | const AuthController = require("../controllers/auth");
6 | const UserProfileController = require("../controllers/usersProfile");
7 | const sharpMiddleware = require("../middlewares/sharpMiddleware");
8 |
9 | // POST request for creating a new User.
10 | router.post("/signup", AuthController.signup);
11 |
12 | // GET request for user login.
13 | router.post("/signin", AuthController.signin);
14 |
15 | // GET request to logout the User .
16 | router.get("/logout", AuthController.logout);
17 |
18 | // PROTECT ALL ROUTES AFTER THIS MIDDLEWARE
19 | router.use(checkAuth);
20 |
21 | // POST request to filter users by user term .
22 | router.post("/search", UserProfileController.searchUsers);
23 |
24 | /* User Profile */
25 |
26 | // Post request to update the User profile Cover.
27 | router.post(
28 | "/update/profile/cover",
29 | multerUploads,
30 | sharpMiddleware.resizeProfileCover,
31 | UserProfileController.updateProfileCover
32 | );
33 |
34 | // Post request to update the User profile image.
35 | router.post(
36 | "/update/profile/Photo",
37 | multerUploads,
38 | sharpMiddleware.resizeProfilePhoto,
39 | UserProfileController.updateProfilePhoto
40 | );
41 |
42 | // GET request to get all the User photos .
43 | router.get("/:username/photos", UserProfileController.getPhotos);
44 |
45 | // GET request to get a user profile.
46 | router.get("/getUserProfile/:username", UserProfileController.getUserProfile);
47 |
48 | module.exports = router;
49 |
--------------------------------------------------------------------------------
/client/src/components/UI/Notification/index.jsx:
--------------------------------------------------------------------------------
1 | import moment from "moment";
2 | import { Link } from "react-router-dom";
3 | import style from "./Notification.module.css";
4 | import chekedlike from "../.././../assets/svg/like.svg";
5 | import { useIsNotifSeenMutation } from "../../../app/features/notification/notificationApi";
6 |
7 | function Notification({ toast, t, notification }) {
8 | const [isNotifSeen] = useIsNotifSeenMutation();
9 |
10 | return (
11 |
12 | New notification
13 | {
17 | toast.dismiss(t.id);
18 | isNotifSeen(notification?._id);
19 | }}
20 | >
21 |
47 | );
48 | }
49 |
50 | export default Notification;
51 |
--------------------------------------------------------------------------------
/client/src/components/Posts/CreatPost/index.jsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from "react-redux";
2 | import { openModal } from "../../../app/features/modal/modalSlice";
3 | import classe from "./postbody.module.css";
4 | import { Feeling, LiveVideo, Photo } from "../../../assets/svg";
5 |
6 | function CreatPost() {
7 | const { user } = useSelector((state) => state.user);
8 |
9 | const dispatch = useDispatch();
10 | return (
11 |
22 | 
23 | {notification.type === "react" ? (
24 | 
25 | ) : (
26 | ""
27 | )}
28 |
29 |
30 | {notification.content}
31 |
32 | {moment(notification?.createdAt).fromNow()}
33 |
34 |
35 |
36 |
44 |
45 |
46 |
12 |
48 | );
49 | }
50 |
51 | export default CreatPost;
52 |
--------------------------------------------------------------------------------
/client/src/layouts/Modal/index.css:
--------------------------------------------------------------------------------
1 | /* modal */
2 | .modal-backDrop {
3 | position: fixed;
4 | z-index: 1000;
5 | background: rgb(0 0 0 / 0.4);
6 | top: 0;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | transition: all 0.4s;
14 | backdrop-filter: blur(2px);
15 | }
16 |
17 | .modal-container {
18 | position: fixed;
19 | z-index: 1500;
20 | background-color: var(--bg-primary);
21 | max-width: 100%;
22 | max-height: 100%;
23 | width: 450px;
24 | border-radius: 15px;
25 | box-shadow: 0px 0px 16px 1px var(--shadow-1);
26 | top: 50%;
27 | left: 50%;
28 | transform: translate(-50%, -50%);
29 | transition: all 0.3s;
30 | padding: 20px 40px;
31 | margin: 0 auto;
32 | }
33 |
34 | .modal-close {
35 | top: 6px;
36 | right: 6px;
37 | position: absolute;
38 | border-radius: 50%;
39 | display: flex;
40 | align-items: center;
41 | justify-content: center;
42 | cursor: pointer;
43 | }
44 | .modal-close-icon {
45 | top: 5px;
46 | right: 5px;
47 | width: 25px;
48 | height: 25px;
49 | position: absolute;
50 | -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
51 | -moz-transition: -moz-transform 0.25s, opacity 0.25s;
52 | transition: transform 0.25s, opacity 0.25s;
53 | opacity: 0.25;
54 | }
55 | .modal-close-icon:hover {
56 | -webkit-transform: rotate(270deg);
57 | -moz-transform: rotate(270deg);
58 | transform: rotate(270deg);
59 | opacity: 1;
60 | }
61 |
62 | .modal-content {
63 | width: 100%;
64 | height: 100%;
65 | }
66 |
67 | .modal-hide {
68 | opacity: 0;
69 | visibility: hidden;
70 | }
71 |
72 | .modal-show {
73 | opacity: 1;
74 | visibility: visible;
75 | }
76 |
--------------------------------------------------------------------------------
/client/src/components/index.jsx:
--------------------------------------------------------------------------------
1 | export { default as AddEditPost } from "./Posts/AddEditPost";
2 | export { default as Post } from "./Posts/Post/Post";
3 | export { default as Comments } from "./Posts/Post/Comments";
4 | export { default as CustomButton } from "./CustomButton";
5 | export { default as CustomInput } from "./input/CustomInput";
6 | export { default as Likes } from "./Posts/Post/Likes";
7 | export { default as PostHead } from "./Posts/Post/PostHead";
8 | export { default as SearchBar } from "./Search";
9 | export { default as Loading } from "./UI/Loading";
10 | export { default as FormLoader } from "./UI/FormLoader";
11 | export { default as Card } from "./UI/Card";
12 | export { default as PostList } from "./Posts/Post/PostList";
13 | export { default as LoginForm } from "./LoginForm";
14 | export { default as RegisterForm } from "./RegisterForm";
15 | export { default as ProfileMenu } from "./Profile/ProfileMenu";
16 | export {default as ProfileCover} from "./Profile/ProfileCover/ProfileCover"
17 | export {default as ProfileInfo} from "./Profile/ProfileInfo"
18 | export {default as Photos} from "./Profile/Photos"
19 | export {default as Friends} from "./Profile/Friends"
20 | export {default as CreatPost } from "./Posts/CreatPost"
21 | export {default as AuthInput } from "./input/AuthInput"
22 | export {default as Popper } from "./UI/Popper"
23 | export{default as PostSkeleton} from "./UI/skeleton/postSkeleton"
24 | export{default as NotificationSkeleton} from "./UI/skeleton/notificationSkeleton"
25 | export {default as ProfilePhoto} from "./Profile/ProfilePhoto"
26 | export {default as Friendship} from "./Profile/Friendship"
27 | export {default as Notification} from "./UI/Notification"
28 | export {default as FriendCard} from "./friendCard"
29 |
30 |
--------------------------------------------------------------------------------
/client/src/components/Profile/Friends.jsx:
--------------------------------------------------------------------------------
1 | import Skeleton from "react-loading-skeleton";
2 | import { Link } from "react-router-dom";
3 | import { Card } from "../index";
4 | import style from "./index.module.css";
5 | import IconStyle from "../../styles/icons.module.css";
6 |
7 | function Friends({ userfriendsdata, photosSkelton }) {
8 | return (
9 |
13 | 
14 |
28 |
29 |
17 | dispatch(
18 | openModal({
19 | name: "AddEditPost",
20 | childrenProps: { user: user },
21 | })
22 | )
23 | }
24 | >
25 | {` What's on your mind, ${user?.firstName}`}
26 |
27 |
30 |
47 |
31 |
34 |
35 |
39 |
42 |
43 |
46 |
11 | Friends
12 |
13 | See all Friends
14 |
15 |
16 |
17 |
46 |
18 | {photosSkelton ? (
19 |
24 |
25 | {userfriendsdata &&
26 | userfriendsdata.slice(0, 9).map((user, index) => (
27 |
32 |
36 |
37 | {`${user?.firstName} ${user?.lastName}`}
38 |
41 |
42 |
43 | ))}
44 |
45 |
22 |
23 | 
24 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/client/src/components/Posts/Post/PostHead/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useDispatch, useSelector } from "react-redux";
3 | import moment from "moment";
4 | import { Link } from "react-router-dom";
5 | import { openModal } from "../../../../app/features/modal/modalSlice";
6 | import style from "./postHead.module.css";
7 | import { Dots } from "../../../../assets/svg";
8 |
9 | const PostHead = ({ post, isVisitor }) => {
10 | const { user } = useSelector((state) => state.user);
11 |
12 | const dispatch = useDispatch();
13 | const canEdit = Boolean(
14 | user?._id === post?.owner?._id || user?._id === post?.owner
15 | );
16 | return (
17 |
25 | {user.firstName} {user.lastName}
26 |
27 |
28 | {type === "sent" ? (
29 |
30 | cancelRequestHandler(requestID)}
33 | >
34 | Cancel Request
35 |
36 |
37 | ) : type === "request" ? (
38 |
39 | acceptRequestHanlder(requestID)}
42 | >
43 | Confirm
44 |
45 | cancelRequestHandler(requestID)}
48 | >
49 | Delete
50 |
51 |
52 | ) : (
53 | ""
54 | )}
55 |
18 |
55 | );
56 | };
57 |
58 | export default PostHead;
59 |
--------------------------------------------------------------------------------
/client/src/components/RegisterForm/GenderSelector.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useMediaQuery } from "react-responsive";
3 | import classes from "./register.module.css";
4 | import { Field, ErrorMessage, useField } from "formik";
5 | import {Popper} from "../index";
6 | import ErrorSVG from "../../assets/svg/Error.svg";
7 |
8 | function GenderSelector() {
9 | const [trigger, setTrigger] = React.useState(null);
10 | const [show, setShow] = React.useState(false);
11 | const [field, meta] = useField({ name: "gender" });
12 |
13 | const genderError = meta.error;
14 |
15 | const desktopView = useMediaQuery({
16 | query: "(min-width: 850px)",
17 | });
18 |
19 |
20 | return (
21 |
19 |
39 | {canEdit && (
40 |
20 |
24 | 
25 |
26 |
27 |
28 |
32 | {post?.owner?.firstName}
33 |
34 |
35 | {moment(post?.createdAt).fromNow()}
36 |
37 |
38 |
43 | dispatch(
44 | openModal({
45 | name: "AddEditPost",
46 | childrenProps: { post: post, user: user },
47 | })
48 | )
49 | }
50 | >
51 |
53 | )}
54 | setShow(true)}
25 | onMouseLeave={() => setShow(false)}
26 | >
27 |
62 | );
63 | }
64 |
65 | export default GenderSelector;
66 |
--------------------------------------------------------------------------------
/api/server.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const express = require("express");
3 | const cors = require("cors");
4 | const cookieParser = require("cookie-parser");
5 | const { createServer } = require("http");
6 | const connectDB = require("./config/db");
7 | const corsOptions = require ("./utils/corsOptions")
8 | const allowedOrigins = require("./utils/allowedOrigins")
9 | const xss = require('xss-clean');
10 |
11 | const app = express();
12 |
13 | // connectDB()
14 | app.use(cors((corsOptions)));
15 |
16 | //load env variables
17 | require("dotenv").config();
18 | const PORT = process.env.PORT || 3070;
19 |
20 | // express app config
21 | // Middleware
22 | app.use(express.json({ limit: "5000kb" })); // LIMIT for JSON
23 | // parse requests of content-type - application/x-www-form-urlencoded
24 | app.use(express.urlencoded({ extended: true, limit: "5000kb" })); // LIMIT for URL ENCODE (image data)
25 | app.use(cookieParser());
26 | // Add the xss-clean middleware to all routes
27 | app.use(xss());
28 |
29 | // app.use('/', express.static(path.join(__dirname, 'public')))
30 |
31 | //Routes
32 | app.use("/api/users", require("./routes/users"));
33 | app.use("/api/posts", require("./routes/posts"));
34 | app.use("/api/friends", require("./routes/friends"));
35 | app.use("/api/notifications", require("./routes/notifications"));
36 |
37 | app.all('*', (req, res) => {
38 | res.status(404)
39 | if (req.accepts('html')) {
40 | res.sendFile(path.join(__dirname, 'views', '404.html'))
41 | } else if (req.accepts('json')) {
42 | res.json({ message: '404 Not Found' })
43 | } else {
44 | res.type('txt').send('404 Not Found')
45 | }
46 | })
47 |
48 |
49 | const httpServer = createServer(app);
50 | const sio = require("./utils/socket");
51 |
52 | sio.init(httpServer, {
53 | pingTimeout: 60000,
54 | pingInterval: 60000,
55 | cors: {
56 | origin: allowedOrigins,
57 | },
58 | });
59 |
60 | const server = httpServer.listen(PORT, function () {
61 | console.log(`Server Runs Perfectly at http://localhost:${PORT}`);
62 | });
63 |
--------------------------------------------------------------------------------
/client/src/components/Search/SearchMenu/SearchMenu.module.css:
--------------------------------------------------------------------------------
1 | .SearchMenu_container {
2 | position: absolute;
3 | align-items: flex-start;
4 | flex-direction: column;
5 | min-width: 250px;
6 | border-bottom-left-radius: 10px;
7 | border-bottom-right-radius: 10px;
8 | background: var(--bg-primary);
9 | box-shadow: 2px 2px 2px var(--shadow-1);
10 | border: 1px solid var(--color-primary);
11 | padding: 8px 6px 10px 6px;
12 | overflow: hidden;
13 | gap: 6px;
14 | min-height: 400px;
15 | max-height: 700px;
16 | z-index: 1;
17 | }
18 |
19 | .SearchMenu_wrap {
20 | display: flex;
21 | align-items: center;
22 | gap: 15px;
23 | }
24 | /* .SearchMenu_container .search {
25 | padding: 10px 44px 10px 12px;
26 | width: 252px;
27 | gap: 4px;
28 | } */
29 | .search {
30 | display: flex;
31 | align-items: center;
32 | gap: 6px;
33 | background: var(--bg-secondary);
34 | padding: 10px 20px 10px 13px;
35 | border-radius: 50px;
36 | cursor: text;
37 | min-width: 250px;
38 | }
39 | .search_input {
40 | outline: none;
41 | border: none;
42 | background: transparent;
43 | font-size: 15px;
44 | font-family: inherit;
45 | padding-left: 2px;
46 | }
47 | /*---Search menu-----*/
48 |
49 | .search_results {
50 | display: flex;
51 | flex-direction: column;
52 | gap: 5px;
53 | margin-top: 10px;
54 | }
55 | .search_result {
56 | display: flex;
57 | align-items: center;
58 | gap: 12px;
59 | font-size: 14px;
60 | padding: 5px;
61 | border-radius: 10px;
62 | cursor: pointer;
63 | color: var(--bg-primary);
64 | font-weight: 600;
65 | }
66 |
67 | .search_result_img {
68 | width: 36px;
69 | height: 36px;
70 | border-radius: 50%;
71 | object-fit: cover;
72 | }
73 |
74 | .search_result span {
75 | transform: translateY(-5px);
76 | }
77 |
78 | .search_item {
79 | border-radius: 10px;
80 | padding: 2px 5px;
81 | }
82 | .search_user_item {
83 | display: flex;
84 | align-items: center;
85 | width: 100%;
86 | justify-content: space-between;
87 | padding-right: 10px;
88 | }
89 |
--------------------------------------------------------------------------------
/api/utils/cloudinary.js:
--------------------------------------------------------------------------------
1 | const cloudinary = require("cloudinary");
2 |
3 | //here is cloudinary api credentials
4 | cloudinary.config({
5 | cloud_name: process.env.CLOUD_NAME,
6 | api_key: process.env.API_KEY,
7 | api_secret: process.env.API_SECRET,
8 | });
9 |
10 | module.exports = {
11 | // Upload image to cloudinary
12 |
13 | // uploadToCloudinary: async (fileString, format) => {
14 | // try {
15 | // const { uploader } = cloudinary;
16 |
17 | // const res = await uploader.upload(
18 | // `data:image/${format};base64,${fileString}`
19 | // );
20 | // return res;
21 | // } catch (error) {
22 | // console.log(error);
23 | // }
24 | // },
25 |
26 | uploadToCloudinary : async (file, path) => {
27 | return new Promise((resolve, reject) => {
28 | if (file) {
29 | cloudinary.v2.uploader
30 | .upload_stream({ folder: path }, (err, res) => {
31 | if (err) {
32 | console.log("🚀 ~ file: cloudinary.js:32 ~ .upload_stream ~ err:", err)
33 | reject(err);
34 | } else {
35 | resolve(res);
36 | console.log(`Upload succeed: ${res}`);
37 | }
38 | })
39 | .end(file);
40 | }
41 | });
42 | },
43 |
44 | // delete image from cloudinary
45 | removeFromCloudinary: async (public_id) => {
46 | await cloudinary.uploader.destroy(public_id, function (error, result) {
47 | console.log("🚀 ~ file: cloudinary.js:28 ~ result", result)
48 | console.log({ message: error.message })
49 | });
50 | },
51 | // get images from cloudinary
52 |
53 | getImages : async (path, max, sort) => {
54 | return new Promise((resolve, reject) => {
55 | cloudinary.v2.search
56 | .expression(`${path}`)
57 | .sort_by('created_at', `${sort}`)
58 | .max_results(max)
59 | .execute()
60 | .then((res) => {
61 | resolve(res);
62 | })
63 | .catch((error) => {
64 | reject(error);
65 | console.log({ message: error.message })
66 | });
67 |
68 | });
69 | },
70 |
71 | };
72 |
--------------------------------------------------------------------------------
/client/src/app/features/reaction/reactionApi.jsx:
--------------------------------------------------------------------------------
1 | import { createEntityAdapter, createSelector } from "@reduxjs/toolkit";
2 | import {socket} from "../../../routes/PrivateRoute"
3 | import { apiSlice } from "../../api/apiSlice";
4 |
5 | const reactionAdapter = createEntityAdapter({
6 | selectId: (reaction) => reaction._id,
7 | });
8 |
9 | const initialState = reactionAdapter.getInitialState();
10 |
11 | export const reactionApiSlice = apiSlice.injectEndpoints({
12 | endpoints: (builder) => ({
13 |
14 | fetchReactions: builder.query({
15 | query: () => "/api/posts/getPostsReactions/",
16 | transformResponse: (responseData) => {
17 | return reactionAdapter.setAll(initialState, responseData);
18 | },
19 | providesTags: (result, error, arg) => [
20 | { type: "Reaction", id: "LIST" },
21 | ...result.ids.map((id) => ({ type: "Reaction", id })),
22 | ],
23 | }),
24 |
25 | likePost: builder.mutation({
26 | query: (id) => ({
27 | url: `/api/posts/like/${id}`,
28 | method: "PUT",
29 | }),
30 | invalidatesTags: (result, error, arg) => [
31 | { type: "Reaction", id: arg.id },
32 | ],
33 | transformResponse: (responseData) => {
34 | const newNotification = responseData?.newNotif;
35 | if (newNotification) {
36 | socket.emit("notification", { notification: newNotification });
37 | }
38 | },
39 | }),
40 | }),
41 | });
42 |
43 |
44 | export const { useFetchReactionsQuery, useLikePostMutation } = reactionApiSlice;
45 |
46 | // returns the query result object
47 | export const selectReactionsResult =
48 | reactionApiSlice.endpoints.fetchReactions.select();
49 |
50 | // Creates memoized selector
51 | const selectReactionsData = createSelector(
52 | selectReactionsResult,
53 | (reactionsResult) => reactionsResult.data // normalized state object with ids & entities
54 | );
55 |
56 | export const {
57 | selectAll: selectAllReactions,
58 | selectById: selectReactionById,
59 | selectIds: selectReactionIds,
60 | } = reactionAdapter.getSelectors(
61 | (state) => selectReactionsData(state) ?? initialState
62 | );
63 |
--------------------------------------------------------------------------------
/client/src/components/UI/Popper/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styled from "styled-components";
3 | import { usePopper } from "react-popper";
4 | import Portal from "../../../utils/Portal";
5 |
6 | export const TooltipArrow = styled.div`
7 | width: 0.6rem;
8 | height: 0.6rem;
9 | &::before {
10 | content: "";
11 | background: #b94a48;
12 | width: 0.6rem;
13 | height: 0.6rem;
14 | transform: translate(-50%, -50%) rotate(45deg);
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | }
19 | `;
20 |
21 | const TipWrapper = styled.div`
22 | background: #b94a48;
23 | border-radius: 5px;
24 | color: white;
25 | padding: 0.8rem;
26 | font-weight: 300;
27 | font-size: 13px;
28 | z-index: 99;
29 | max-width: 318px;
30 |
31 | &[data-popper-placement^="right"] {
32 | ${TooltipArrow} {
33 | left: 0px;
34 | }
35 | }
36 |
37 | &[data-popper-placement^="left"] {
38 | ${TooltipArrow} {
39 | right: -0.6rem;
40 | }
41 | }
42 |
43 | &[data-popper-placement^="top"] {
44 | ${TooltipArrow} {
45 | bottom: -0.6rem;
46 | }
47 | }
48 |
49 | &[data-popper-placement^="bottom"] {
50 | ${TooltipArrow} {
51 | top: 0px;
52 | }
53 | }
54 | `;
55 |
56 | const Popper = ({ children, trigger, placement, offsetNum }) => {
57 | const [popperElement, setPopperElement] = useState(null);
58 | const [arrowElement, setArrowElement] = useState(null);
59 |
60 | const { styles, attributes } = usePopper(trigger, popperElement, {
61 | placement,
62 | modifiers: [
63 | { name: "arrow", options: { element: arrowElement } },
64 | {
65 | name: "offset",
66 | options: {
67 | offset: [0, parseInt(offsetNum || 8)],
68 | },
69 | },
70 | ],
71 | });
72 |
73 | return (
74 |
28 | Gender
29 | {genderError &&
30 | }
31 |
32 |
33 |
42 |
51 | {genderError && show && (
52 |
57 |
59 | )}
60 |
61 |
27 | {!(submitLabel === "update") && (
28 |
63 | );
64 | };
65 |
66 | export default CommentForm;
67 |
--------------------------------------------------------------------------------
/api/validator/SignupValidation.js:
--------------------------------------------------------------------------------
1 | const validator = require("validator");
2 | const isEmpty = require("./IsEmpty");
3 |
4 | module.exports = function SignupValidation(data) {
5 | let regex = /(?=(.*[0-9]))((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.{8,}$/i;
6 | let errors = {};
7 | // Convert empty fields to an empty string so we can use validator
8 | data.firstName = !isEmpty(data.firstName) ? data.firstName : "";
9 | data.lastName = !isEmpty(data.lastName) ? data.lastName : "";
10 | data.email = !isEmpty(data.email) ? data.email : "";
11 | data.password = !isEmpty(data.password) ? data.password : "";
12 | data.passwordConfirm = !isEmpty(data.passwordConfirm) ? data.passwordConfirm : "";
13 | data.gender = !isEmpty(data.gender) ? data.gender : "";
14 | data.birthYear = !isEmpty(data.birthYear) ? data.birthYear : "";
15 | data.birthMonth = !isEmpty(data.birthMonth) ? data.birthMonth : "";
16 | data.birthDay = !isEmpty(data.birthDay) ? data.birthDay : "";
17 |
18 | // firstName checks
19 | if (validator.isEmpty(data.firstName)) {
20 | errors.firstName = "firstName field is required";
21 | }
22 | // lastName checks
23 | if (validator.isEmpty(data.lastName)) {
24 | errors.lastName = "lastName field is required";
25 | }
26 | // gender checks
27 | if (validator.isEmpty(data.gender)) {
28 | errors.gender = "gender field is required";
29 | }
30 |
31 | // Email checks
32 | if (validator.isEmpty(data.email)) {
33 | errors.email = "Email field is required";
34 | } else if (!validator.isEmail(data.email)) {
35 | errors.email = "Format Email required";
36 | }
37 |
38 | // Password checks
39 | if (validator.isEmpty(data.password)) {
40 | errors.password = "Password field is required";
41 | } else if (!regex.test(data.password)) {
42 | errors.password =
43 | "Password should have 1 lowercase letter, 1 uppercase letter, 1 number, and be at least 8 characters long";
44 | }
45 |
46 | if (!validator.equals(data.password, data.passwordConfirm)) {
47 | errors.passwordConfirm = "Passwords not matches";
48 | }
49 |
50 | if (validator.isEmpty(data.passwordConfirm)) {
51 | errors.passwordConfirm = "Required passwordConfirm";
52 | }
53 | return {
54 | errors,
55 | isValid: isEmpty(errors),
56 | };
57 | };
58 |
--------------------------------------------------------------------------------
/client/src/components/Posts/Post/post.module.css:
--------------------------------------------------------------------------------
1 | /* Post */
2 | .post {
3 | padding: 0;
4 | }
5 | .post_body {
6 | display: flex;
7 | flex-direction: column;
8 | gap: 10px;
9 | }
10 | .footer {
11 | display: flex;
12 | flex-direction: column;
13 | }
14 | .reaction {
15 | display: flex;
16 | justify-content: space-around;
17 | height: 40px;
18 | margin: 0 16px 10px;
19 | padding: 3px 0;
20 | position: relative;
21 | border-top: 1px solid var(--divider);
22 | border-bottom: 1px solid var(--divider);
23 | }
24 | .reaction_infos {
25 | display: flex;
26 | justify-content: space-between;
27 | padding: 10px 16px;
28 | }
29 | .reaction_infos_left {
30 | display: flex;
31 | gap: 8px;
32 | cursor: pointer;
33 | }
34 |
35 | .reaction_infos_right {
36 | display: flex;
37 | gap: 5px;
38 | color: var(--color-third);
39 | font-size: 15px;
40 | }
41 | .reaction_infos_right span {
42 | cursor: pointer;
43 | }
44 |
45 | .reaction_infos_right span:hover {
46 | text-decoration: underline;
47 | }
48 | .image_container {
49 | height: inherit;
50 | width: 100%;
51 | max-height: inherit;
52 | margin-top: 8px;
53 | }
54 | .post_image {
55 | height: inherit;
56 | width: inherit;
57 | max-height: inherit;
58 | object-fit: cover;
59 | }
60 | .edit_link {
61 | color: var(--color-secondary) !important;
62 | }
63 |
64 | .profile_img {
65 | width: 40px;
66 | height: 40px;
67 | border-radius: 50%;
68 | object-fit: cover;
69 | }
70 |
71 | .post_comments_section {
72 | width: 100%;
73 | height: 100%;
74 | }
75 | .comments_section {
76 | margin-top: 1rem;
77 | }
78 |
79 | /* PostList */
80 | .text-center {
81 | margin-top: 150px;
82 | }
83 | @media (max-width: 1175px) {
84 | .post {
85 | width: 84%;
86 | }
87 | }
88 | @media (max-width: 1030px) {
89 | .post {
90 | width: 100%;
91 | }
92 | }
93 | @media (max-width: 960px) {
94 | .post {
95 | width: 93%;
96 | }
97 | }
98 |
99 | @media (max-width: 885px) {
100 | .post {
101 | width: 100%;
102 | }
103 | }
104 |
105 | @media (max-width: 620px) {
106 | .post {
107 | width: 100%;
108 | }
109 | }
110 | @media (max-width: 400px) {
111 | .post {
112 | width: 100%;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/client/src/components/Posts/CreatPost/postbody.module.css:
--------------------------------------------------------------------------------
1 | .post_body {
2 | width: 100%;
3 | background:var(--bg-primary);
4 | border-radius: 10px;
5 | box-shadow: 0 1px 2px var(--shadow-1);
6 | cursor: pointer;
7 | }
8 | .post_body_header {
9 | display: flex;
10 | align-items: center;
11 | gap: 8px;
12 | padding: 10px 17px 5px 15px;
13 | }
14 |
15 | .post_body_image {
16 | width: 40px;
17 | height: 40px;
18 | border-radius: 50%;
19 | object-fit: cover;
20 | }
21 | .open_post {
22 | background: var(--bg-secondary);
23 | color: var(--color-third);
24 | height: 41px;
25 | flex: 1;
26 | border-radius: 50px;
27 | font-size: 17px;
28 | line-height: 21px;
29 | display: flex;
30 | align-items: center;
31 | padding-left: 10px;
32 | -webkit-line-clamp: 1;
33 | -webkit-box-orient: horizontal;
34 | overflow: hidden;
35 | line-height: 2rem;
36 | }
37 | .post_body_footer {
38 | padding: 0 10px 8px 10px;
39 | display: grid;
40 | grid-template-columns: repeat(3, 1fr);
41 | }
42 | .splitter {
43 | height: 1px;
44 | width: 95%;
45 | background: var(--divider);
46 | margin: 10px 10px;
47 | }
48 | .actions_icon {
49 | display: flex;
50 | align-items: center;
51 | justify-content: center;
52 | gap: 8px;
53 | font-weight: 600;
54 | padding: 7px;
55 | color: var(--color-third);
56 | border-radius: 10px;
57 | font-size: 14px;
58 | }
59 |
60 | @media (max-width: 1175px) {
61 | .create_post {
62 | width: 84%;
63 | }
64 | }
65 | @media (max-width: 1030px) {
66 | .create_post {
67 | width: 100%;
68 | }
69 | }
70 | @media (max-width: 960px) {
71 | .create_post {
72 | width: 93%;
73 | }
74 | }
75 |
76 | @media (max-width: 885px) {
77 | .create_post {
78 | width: 100%;
79 | }
80 | }
81 |
82 | @media (max-width: 620px) {
83 | .create_post {
84 | width: 100%;
85 | }
86 | .open_post {
87 | font-size: 15px;
88 | }
89 | }
90 | @media (max-width: 400px) {
91 | .create_post {
92 | width: 100%;
93 | }
94 | .open_post {
95 | font-size: 13px;
96 | }
97 | .actions_icon {
98 | gap: 4px;
99 | padding: 5px;
100 | font-size: 12px;
101 | }
102 | .actions_icon svg {
103 | width: 20px;
104 | height: 20px;
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/client/src/layouts/Header/HeaderMenu/DisplayAccessibility.jsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from "react-redux";
2 | import styles from "./HeaderMenu.module.css";
3 | import IconStyle from "../../../styles/icons.module.css"
4 | import { changeTheme } from "../../../app/features/user/userSlice";
5 |
6 | export default function DisplayAccessibility({ setShow }) {
7 | const dispatch = useDispatch();
8 | const theme = useSelector((state) => state.user.theme);
9 | return (
10 |
29 | 
30 |
31 | )}
32 |
33 |
62 |
34 |
60 |
61 |
11 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/client/src/components/input/AuthInput/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useField, ErrorMessage } from "formik";
3 | import { Popper } from "../../index";
4 | import styles from "./style.module.css";
5 | import ErrorSVG from "../../../assets/svg/Error.svg";
6 | import CloseEye from "../../../assets/svg/closeEye.svg";
7 | import OpenEye from "../../../assets/svg/openEye.svg"
8 | import { useMediaQuery } from "react-responsive";
9 |
10 | function AuthInput({ placeholder, dir, type, disabled ,password,onClick, ...props }) {
11 | const [trigger, setTrigger] = React.useState(null);
12 | const [field, meta] = useField(props);
13 | const [show, setShow] = React.useState(false);
14 |
15 | const desktopView = useMediaQuery({
16 | query: "(min-width: 850px)",
17 | });
18 | return (
19 | <>
20 |
12 |
22 | {
15 | setShow(false);
16 | }}
17 | >
18 |
19 |
20 | Display & Accessibility
21 |
23 |
34 |
48 |
62 |
24 |
25 |
26 |
27 | Dark Mode
28 |
29 | Adjust the appearance of Ziwibook to reduce glare and give your eyes
30 | a break.
31 |
32 |
33 |
21 | {meta.touched && meta.error && show && (
22 |
27 |
29 | )}
30 | setShow(true)}
39 | onBlurCapture={(e) => {
40 | setShow(false);
41 | }}
42 | />
43 |
45 | {(field.name === "password" )|| (field.name === "passwordConfirm") ? (
46 | <>
47 | {type === "password" ? (
48 | 
49 |
50 | ) : (
51 | 
52 |
53 | )}
54 |
55 | ) : (
56 | ""
57 | )}
58 |
59 | {meta.touched && meta.error && (
60 |
61 | )}
62 |
63 |
64 |
65 | );
66 | }
67 |
68 | export default AuthInput;
69 |
--------------------------------------------------------------------------------
/api/utils/socket.js:
--------------------------------------------------------------------------------
1 | const { Server } = require('socket.io');
2 |
3 | let io = new Server();
4 |
5 | let users = [];
6 | const addUser = (info, socketId) => {
7 | const checkUser = users.some((user) => user.info.id === info.id);
8 |
9 | if (!checkUser) {
10 | users.push({ info, socketId });
11 | }
12 | };
13 | const userRemove = (socketId) => {
14 | users = users.filter((user) => user.socketId !== socketId);
15 | };
16 |
17 | const findFriendBySoket = (socketId) => {
18 | return users.find((user) => user.socketId === socketId);
19 | };
20 |
21 | const findFrienddById = (userId) => {
22 | return users.find((user) => user.info.id === userId);
23 | };
24 |
25 | const userLogout = (userId) => {
26 | users = users.filter((user) => user.userId !== userId);
27 | };
28 |
29 | module.exports = {
30 | init: function (server, options) {
31 | io = new Server(server, options);
32 | io.on('connection', (socket) => {
33 | socket.emit('connected');
34 |
35 | socket.on('setup', ({ info }) => {
36 | const filterdUsers = users.map((user) => user.info);
37 |
38 | socket.emit('online_user', { type: 'connect', info: filterdUsers });
39 |
40 | addUser(info, socket.id);
41 | users.forEach((user) => {
42 | if (user.info.id == info.id) return;
43 | socket.to(user.socketId).emit('online_user', { type: 'add', info });
44 | });
45 | });
46 |
47 | socket.on('notification', ({ notification }) => {
48 | if (!notification?.recipient)
49 | return console.log('chat.users not defined');
50 | const onlineUser = findFrienddById(notification.recipient);
51 | if (onlineUser)
52 | socket
53 | .to(onlineUser.socketId)
54 | .emit('new_notification', { notification });
55 | });
56 |
57 | socket.on('disconnect', () => {
58 | const d_user = findFriendBySoket(socket.id);
59 |
60 | users.forEach((user) => {
61 | socket
62 | .to(user.socketId)
63 | .emit('online_user', { type: 'remove', info: d_user?.info });
64 | });
65 | userRemove(socket.id);
66 | });
67 | });
68 | return io;
69 | },
70 | getIO: function () {
71 | if (!io) {
72 | throw new Error("Can't get io instance before calling .init()");
73 | }
74 | return io;
75 | },
76 | };
77 |
--------------------------------------------------------------------------------
/client/src/components/Profile/ProfileCover/OldCovers/OldCovers.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import useOnClickOutside from "../../../../hooks/useOnClickOutside";
3 | import classes from "./OldCovers.module.css";
4 | import IconStyle from "../../../../styles/icons.module.css";
5 | import {Card} from "../../../index";
6 |
7 | function OldCovers({ setShowOldCover, setImage, photosData, showOldCover }) {
8 | const oldCoversCardRef = React.useRef(null);
9 |
10 | useOnClickOutside(oldCoversCardRef, showOldCover, () => {
11 | setShowOldCover(false);
12 | });
13 |
14 | return (
15 |
16 |
17 |
62 |
63 | );
64 | }
65 |
66 | export default OldCovers;
67 |
--------------------------------------------------------------------------------
/client/src/components/RegisterForm/DateSelector.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useMediaQuery } from "react-responsive";
3 | import classes from "./register.module.css";
4 | import { Field } from "formik";
5 | import {Popper} from "../index";
6 | import ErrorSVG from "../../assets/svg/Error.svg";
7 |
8 | function DateSelector({ birthDay, birthMonth, birthYear , dateError}) {
9 | const [trigger, setTrigger] = React.useState(null);
10 | const [show, setShow] = React.useState(false);
11 |
12 | const desktopView = useMediaQuery({
13 | query: "(min-width: 850px)",
14 | });
15 | const yearTemp = new Date().getFullYear();
16 | const years = Array.from(new Array(108), (val, index) => yearTemp - index);
17 | const months = Array.from(new Array(12), (val, index) => 1 + index);
18 | const getDays = () => {
19 | return new Date(birthYear, birthMonth, 0).getDate();
20 | };
21 |
22 | const days = Array.from(new Array(getDays()), (val, index) => 1 + index);
23 |
24 | return (
25 |
18 | Update Cover Photo
19 |
23 | setShowOldCover(false)}>
20 |
21 |
22 |
24 | {photosData?.profileCovers.length > 0 && (
25 | <>
26 |
61 | Choose from old cover picture
27 |
28 | {photosData?.profileCovers.map((photo) => (
29 | 
{
33 | setImage(photo.url);
34 | setShowOldCover(false);
35 | }}
36 | key={photo.id}
37 | />
38 | ))}
39 |
40 |
41 | )}
42 | {photosData?.resources.length > 0 && (
43 | <>
44 | Choose from your profile photos
45 |
46 | {photosData?.resources.map((photo) => (
47 | {
51 | setImage(photo.url);
52 | setShowOldCover(false);
53 | }}
54 | key={photo.id}
55 | />
56 | ))}
57 |
58 |
59 | )}
60 | setShow(true)}
29 | onMouseLeave={() => setShow(false)}
30 | >
31 |
73 | );
74 | }
75 |
76 | export default DateSelector;
77 |
--------------------------------------------------------------------------------
/client/src/components/RegisterForm/register.module.css:
--------------------------------------------------------------------------------
1 | .signup_card {
2 | position: absolute;
3 | left: 50%;
4 | top: 50%;
5 | transform: translate(-50%, -50%);
6 | width: 350px;
7 | padding: 20px;
8 | }
9 |
10 | .signup_header {
11 | border-bottom: 1px solid var(--bg-third);
12 | display: flex;
13 | flex-direction: column;
14 | gap: 2px;
15 | padding-bottom: 10px;
16 | position: relative;
17 | margin-bottom: 10px;
18 | }
19 | .signup_header i {
20 | cursor: pointer;
21 | position: absolute;
22 | right: 0;
23 | }
24 | .signup_header_title {
25 | font-size: 32px;
26 | font-weight: 600;
27 | color: var(--color-secondary);
28 | }
29 | .signup_header_title1 {
30 | color:var(--color-third);
31 | font-size: 15px;
32 | }
33 | .signup_form {
34 | display: flex;
35 | flex-direction: column;
36 | gap: 8px;
37 | }
38 | .LINE {
39 | display: flex;
40 | gap: 15px;
41 | }
42 |
43 | .login_link {
44 | cursor: pointer;
45 | font-size: 14px;
46 | font-weight: 700;
47 | color:var(--color-primary);
48 | text-decoration: none;
49 | }
50 | .login_link:hover {
51 | text-decoration: underline;
52 | color:var(--color-primary);
53 | }
54 | .register {
55 | justify-content: center;
56 | align-items: center;
57 | display: flex;
58 | margin-top: 10px;
59 | }
60 | .error_text {
61 | color: var(--color-error);
62 | font-weight: 700;
63 | text-align: center;
64 | margin: 0 auto 10px;
65 | }
66 | .col {
67 | margin-bottom: 10px;
68 | }
69 | .colHeader {
70 | align-items: center;
71 | color:var(--color-third);
72 | display: flex;
73 | font-size: 13px;
74 | gap: 4px;
75 | }
76 | .select_grid {
77 | grid-gap: 10px;
78 | display: grid;
79 | gap: 10px;
80 | grid-template-columns: repeat(3, 1fr);
81 | height: 35px;
82 | margin-top: 5px;
83 | width: 100%;
84 | }
85 | .gender {
86 | grid-template-columns: repeat(2, 1fr);
87 | }
88 | .select_grid select {
89 | border-radius: 5px;
90 | color:var(--color-secondary);
91 | cursor: pointer;
92 | font-size: 16px;
93 | width: 100%;
94 | padding: 0 10px;
95 | background:var(--bg-primary);
96 | }
97 | .select_grid label {
98 | border-radius: 5px;
99 | align-items: center;
100 | border: 1px solid var(--color-third);
101 | display: flex;
102 | justify-content: space-between;
103 | padding: 0 15px;
104 | accent-color:var(--color-primary);
105 | }
106 | .ERROR {
107 | border-color: var(--color-error) !important;
108 | }
109 |
110 | @media (min-width: 540px) {
111 | .signup_card {
112 | width: 400px;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/client/src/components/input/CustomInput/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./index.css";
3 | import CloseEye from "../../../assets/svg/closeEye.svg";
4 | import OpenEye from "../../../assets/svg/openEye.svg"
5 | const CustomInput = ({
6 | onFocus,
7 | onBlur,
8 | name,
9 | label,
10 | type,
11 | onChange,
12 | error,
13 | placeholder,
14 | value,
15 | defaultValue,
16 | accept,
17 | hidden,
18 | float,
19 | onClick,
20 | className,
21 | autoFocus,
22 | innerRef,
23 | }) => {
24 | return (
25 |
26 | Birthday
32 | {dateError &&
33 | }
35 |
36 |
37 |
42 | {days.map((day, i) => (
43 |
46 | ))}
47 |
48 |
49 | {months.map((month, i) => (
50 |
53 | ))}
54 |
55 |
56 | {years.map((year, i) => (
57 |
60 | ))}
61 |
62 | {dateError && show && (
63 |
68 | {dateError}
69 |
70 | )}
71 |
72 |
27 | {!float && }
28 | {type === "textarea" ? (
29 |
45 | ) : (
46 |
68 | )}
69 | {name === "password" ? (
70 |
71 | {type === "password" ? (
72 |
73 | ) : (
74 |
75 | )}
76 |
77 | ) : (
78 | ""
79 | )}
80 |
81 | {float && }
82 | {error && (
83 |
88 |
89 | );
90 | };
91 |
92 | export default CustomInput;
93 |
--------------------------------------------------------------------------------
/client/src/components/Profile/ProfilePhoto/ProfilePhoto.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | }
6 | .profile_photo_container {
7 | width: 100%;
8 | max-width: 500px;
9 | min-height: 400px;
10 | padding: 0;
11 | margin: 8px;
12 | }
13 | .header_exit {
14 | border-bottom: 1px solid var(--bg-third);
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | font-weight: 700;
19 | position: relative;
20 | padding: 16px 0;
21 | }
22 | .exit {
23 | cursor: pointer;
24 | position: absolute;
25 | right: 0;
26 | }
27 | .profile_photo_content {
28 | display: flex;
29 | flex-direction: column;
30 | gap: 16px;
31 | }
32 | .crooper {
33 | position: relative;
34 | display: flex;
35 | justify-content: center;
36 | height: 300px;
37 | width: 100%;
38 | }
39 |
40 | .crooper img {
41 | width: 100%;
42 | object-fit: contain;
43 | }
44 |
45 | .slider {
46 | width: 100%;
47 | display: flex;
48 | align-items: center;
49 | justify-content: center;
50 | margin: 25px 0;
51 | gap: 10px;
52 | }
53 | .slider input[type="range"] {
54 | -webkit-appearance: none;
55 | -moz-appearance: none;
56 | appearance: none;
57 | width: 55%;
58 | height: 4px;
59 | background: var(--color-primary);
60 | cursor: pointer;
61 | }
62 |
63 | .slider input[type="range"]::-webkit-slider-thumb {
64 | -webkit-appearance: none;
65 | width: 20px;
66 | height: 20px;
67 | outline: none;
68 | border-radius: 50%;
69 | background: var(--color-primary);
70 | }
71 | .slider_circle {
72 | width: 36px;
73 | height: 36px;
74 | display: grid;
75 | place-items: center;
76 | border-radius: 50%;
77 | cursor: pointer;
78 | }
79 | .buttons {
80 | display: flex;
81 | gap: 10px;
82 | padding: 0 20px 20px 20px;
83 | }
84 | .upload_btn {
85 | border: none;
86 | outline: none;
87 | background: var(--bg-secondary);
88 | padding: 8.5px 12px;
89 | font-family: inherit;
90 | font-weight: 600;
91 | font-size: 14px;
92 | color: var(--color-secondary);
93 | display: flex;
94 | align-items: center;
95 | justify-content: center;
96 | gap: 6px;
97 | cursor: pointer;
98 | }
99 | .upload_btn:hover {
100 | background: var(--bg-third);
101 | }
102 | .old {
103 | padding: 0 8px;
104 | }
105 | .old_photos {
106 | display: flex;
107 | flex-wrap: wrap;
108 | gap: 5px;
109 | justify-content: center;
110 | margin: 10px 0;
111 | max-height: 150px;
112 | overflow: auto;
113 | }
114 | .old_photos img {
115 | width: 100px;
116 | height: 100px;
117 | object-fit: cover;
118 | border-radius: 10px;
119 | cursor: pointer;
120 | }
121 |
--------------------------------------------------------------------------------
/api/utils/notification.js:
--------------------------------------------------------------------------------
1 | const Notif = require("../models/notification");
2 |
3 | module.exports = class Notification {
4 | constructor({ recipient, sender, postId, postReact }) {
5 | this.sender = sender;
6 | this.recipient = recipient;
7 | this.postId = postId;
8 | this.postReact = postReact;
9 | }
10 |
11 | async createNotifcation({ content, type, path }) {
12 | let newNotif = null;
13 |
14 | if (this.recipient._id.toString().includes(this.sender?._id.toString())) return;
15 |
16 | newNotif = await Notif.create({
17 | sender: this.sender?._id,
18 | recipient: this.recipient?._id,
19 | type,
20 | url: path,
21 | content,
22 | });
23 | await newNotif.save();
24 | return newNotif;
25 | }
26 |
27 | async PostLike() {
28 | const path = `/${this.recipient?.username}/posts/${this.postId}`;
29 | const noti = await this.createNotifcation({
30 | content: `${this.sender?.firstName} reacted by like on your post`,
31 | type: "react",
32 | path: path,
33 | });
34 | return noti;
35 | }
36 |
37 | async PostComment() {
38 | const path = `/${this.recipient?.username}/posts/${this.postId}`;
39 | const noti = await this.createNotifcation({
40 | content: `${this.sender?.firstName} commented ${this.postReact} on your post`,
41 | type: "comment",
42 | path: path,
43 | });
44 | return noti;
45 | }
46 |
47 | async CommentLike() {
48 | const path = `/${this.recipient?.username}/posts/${this.postId}`;
49 | const noti = await this.createNotifcation({
50 | content: `${this.sender?.firstName} like your comment`,
51 | type: "react",
52 | path: path,
53 | });
54 | return noti;
55 | }
56 |
57 | async CommentReplie() {
58 | const postLink = `${process.env.FRONTEND_URL}/${this.recipient?.username}/posts/${this.postId}`;
59 | const path = `/${this.recipient?.username}/posts/${this.postId}`;
60 |
61 | const noti = await this.createNotifcation({
62 | content: `${this.sender?.firstName} replied ${this.postReact} on your comment`,
63 | click: postLink,
64 | type: "comment",
65 | path: path,
66 | });
67 | return noti;
68 | }
69 |
70 | async FriendRequest() {
71 | const path = `/profile/${this.sender?.username}`;
72 | const noti = await this.createNotifcation({
73 | content: `${this.sender?.firstName} Sent you a friend request`,
74 | type: "friend",
75 | path: path,
76 | });
77 | return noti;
78 | }
79 |
80 | async AcceptFriendRequest() {
81 | const path = `/profile/${this.sender?.username}`;
82 | const noti = await this.createNotifcation({
83 | content: `${this.sender?.firstName} Accept your friend request`,
84 | type: "friend",
85 | path: path,
86 | });
87 | return noti;
88 | }
89 | };
90 |
--------------------------------------------------------------------------------
/client/src/components/Posts/AddEditPost/Post.module.css:
--------------------------------------------------------------------------------
1 | .post_container {
2 | display: flex;
3 | flex-direction: column;
4 | max-width: 500px;
5 | }
6 | .post_head {
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | }
11 | .post_head span {
12 | font-size: 18px;
13 | font-weight: 700;
14 | }
15 | .post_auther {
16 | display: flex;
17 | padding: 10px 0px;
18 | gap: 5px;
19 | }
20 | .auther_name {
21 | font-size: 14px;
22 | font-weight: 600;
23 | }
24 | .auther_photo {
25 | height: 40px;
26 | width: 40px;
27 | border-radius: 50%;
28 | }
29 | .post_content {
30 | max-height: 410px;
31 | overflow-y: scroll;
32 | }
33 | .textarea {
34 | width: 100%;
35 | font-size: 24px;
36 | background: transparent;
37 | resize: none;
38 | border: none;
39 | outline: none;
40 | font-family: inherit;
41 | /* color: var(--color-secondary); */
42 | }
43 |
44 | .post_footer {
45 | display: flex;
46 | flex-direction: column;
47 | }
48 | .post_action {
49 | display: flex;
50 | justify-content: space-between;
51 | align-items: center;
52 | padding: 8px;
53 | border: 1px solid var(--color-primary);
54 | border-radius: 10px;
55 | height: 57px;
56 | }
57 | .footer_text {
58 | font-size: 14px;
59 | font-weight: 600;
60 | padding: 8px;
61 | }
62 | .post_image_container {
63 | display: flex;
64 | flex-direction: column;
65 | gap: 10px;
66 | border: 1px solid var(--color-primary);
67 | border-radius: 10px;
68 | margin: 15px;
69 | padding: 10px;
70 | margin-right: 10px;
71 | }
72 | .add_image {
73 | background: var(--bg-secondary);
74 | border-radius: 10px;
75 | position: relative;
76 | height: 200px;
77 | display: flex;
78 | justify-content: center;
79 | align-items: center;
80 | }
81 | .exit {
82 | position: absolute;
83 | top: 5px;
84 | right: 0;
85 | }
86 | .small_white_circle {
87 | width: 30px;
88 | height: 30px;
89 | border-radius: 50%;
90 | border: 1px solid var(--bg-third);
91 | background: var(--bg-primary);
92 | margin-right: 8px;
93 | display: flex;
94 | align-items: center;
95 | justify-content: center;
96 | cursor: pointer;
97 | }
98 | .post_btn {
99 | display: flex;
100 | gap: 5px;
101 | align-items: center;
102 | padding: 8px 12px;
103 | background: var(--bg-primary);
104 | color: var(--color-primary);
105 | border: none;
106 | border-radius: 10px;
107 | cursor: pointer;
108 | font-size: 14px;
109 | font-weight: 500;
110 | }
111 | .imge {
112 | height: auto;
113 | width: 100%;
114 | }
115 | .img {
116 | height: inherit;
117 | width: inherit;
118 | max-height: inherit;
119 | border-radius: 10px;
120 | object-fit: cover;
121 | }
122 |
123 | .post_footer {
124 | margin: 0 16px;
125 | display: flex;
126 | flex-direction: column;
127 | gap: 16px;
128 | margin-bottom: 16px;
129 | padding-top: 10px;
130 | }
131 |
--------------------------------------------------------------------------------
/client/src/layouts/Header/Header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | background-color: var(--bg-primary);
3 | box-shadow: 0 2px 4px var(--shadow-1);
4 | height: 56px;
5 | width: 100%;
6 | top: 0px;
7 | left: 0px;
8 | position: fixed !important;
9 | z-index: 100;
10 | display: grid;
11 | grid-template-columns: repeat(3, 1fr);
12 | }
13 |
14 | :global(.dark) .navbar_right svg,
15 | :global(.dark) .navbar_left svg {
16 | fill: rgb(174, 174, 174);
17 | }
18 |
19 | :global(.dark) .navbar_middle svg {
20 | fill: rgb(174, 174, 174);
21 | }
22 |
23 | .navbar_left {
24 | display: flex;
25 | align-items: center;
26 | transform: translateX(-39px);
27 | }
28 | .logo {
29 | width: 200px;
30 | cursor: pointer;
31 | }
32 |
33 | .navbar_search {
34 | margin-left: -10px;
35 | }
36 |
37 | .navbar_middle {
38 | display: flex;
39 | align-items: center;
40 | gap: 14px;
41 | }
42 | .navbar_middle_icon {
43 | position: relative;
44 | display: flex;
45 | align-items: center;
46 | justify-content: center;
47 | border-radius: 10px;
48 | cursor: pointer;
49 | width: 80px;
50 | height: 50px;
51 | }
52 |
53 | .active {
54 | border-bottom: 3px solid var(--color-primary);
55 | border-radius: 0;
56 | height: 56px;
57 | }
58 | .active_icon {
59 | display: none;
60 | }
61 | .active .active_icon {
62 | display: block;
63 | }
64 | .active .notActive_icon {
65 | display: none;
66 | }
67 | .navbar_right {
68 | display: flex;
69 | position: absolute;
70 | gap: 17px;
71 | right: 8px;
72 | top: 50%;
73 | transform: translateY(-50%);
74 | }
75 | .circle_icons {
76 | height: 40px;
77 | width: 40px;
78 | border-radius: 50%;
79 | display: flex;
80 | align-items: center;
81 | justify-content: center;
82 | background: var(--bg-forth);
83 | cursor: pointer;
84 | }
85 | .navbar_profile {
86 | cursor: pointer;
87 | width: 47px;
88 | height: 47px;
89 | border-radius: 50%;
90 | }
91 | .notification {
92 | position: absolute;
93 | top: 3px;
94 | right: 45px;
95 | background: var(--color-primary);
96 | border-radius: 50px;
97 | padding: 1px 7px;
98 | font-size: 15px;
99 | font-weight: 600;
100 | color:var(--bg-primary);
101 | }
102 |
103 | @media (max-width: 760px) {
104 | .navbar_middle_icon:nth-child(3) {
105 | display: none;
106 | }
107 | .navbar_middle_icon:nth-child(4) {
108 | display: none;
109 | }
110 | .navbar_middle_icon {
111 | width: 35px;
112 | }
113 | }
114 |
115 | @media (max-width: 550px) {
116 | .navbar_middle {
117 | transform: translateX(-20%);
118 | }
119 | .navbar_middle {
120 | gap: 12px;
121 | }
122 | .navbar_right {
123 | gap: 10px;
124 | }
125 | }
126 |
127 | @media (max-width: 400px) {
128 | .navbar_middle {
129 | transform: translateX(-48%);
130 | }
131 | .navbar_middle {
132 | gap: 5px;
133 | }
134 | .navbar_right {
135 | gap: 8px;
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
/client/src/assets/svg/ZIWIBook.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
48 |
--------------------------------------------------------------------------------
/client/src/utils/getCroppedImg.jsx:
--------------------------------------------------------------------------------
1 | export const createImage = (url) =>
2 | new Promise((resolve, reject) => {
3 | const image = new Image();
4 | image.addEventListener("load", () => resolve(image));
5 | image.addEventListener("error", (error) => reject(error));
6 | image.setAttribute("crossOrigin", "anonymous"); // needed to avoid cross-origin issues on CodeSandbox
7 | image.src = url;
8 | });
9 |
10 | export function getRadianAngle(degreeValue) {
11 | return (degreeValue * Math.PI) / 180;
12 | }
13 |
14 | /**
15 | * Returns the new bounding area of a rotated rectangle.
16 | */
17 | export function rotateSize(width, height, rotation) {
18 | const rotRad = getRadianAngle(rotation);
19 |
20 | return {
21 | width:
22 | Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
23 | height:
24 | Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
25 | };
26 | }
27 |
28 | /**
29 | * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
30 | */
31 | export default async function getCroppedImg(
32 | imageSrc,
33 | pixelCrop,
34 | rotation = 0,
35 | flip = { horizontal: false, vertical: false }
36 | ) {
37 | const image = await createImage(imageSrc);
38 | const canvas = document.createElement("canvas");
39 | const ctx = canvas.getContext("2d");
40 |
41 | if (!ctx) {
42 | return null;
43 | }
44 |
45 | const rotRad = getRadianAngle(rotation);
46 |
47 | // calculate bounding box of the rotated image
48 | const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
49 | image.width,
50 | image.height,
51 | rotation
52 | );
53 |
54 | // set canvas size to match the bounding box
55 | canvas.width = bBoxWidth;
56 | canvas.height = bBoxHeight;
57 |
58 | // translate canvas context to a central location to allow rotating and flipping around the center
59 | ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
60 | ctx.rotate(rotRad);
61 | ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
62 | ctx.translate(-image.width / 2, -image.height / 2);
63 |
64 | // draw rotated image
65 | ctx.drawImage(image, 0, 0);
66 |
67 | // croppedAreaPixels values are bounding box relative
68 | // extract the cropped image using these values
69 | const data = ctx.getImageData(
70 | pixelCrop.x,
71 | pixelCrop.y,
72 | pixelCrop.width,
73 | pixelCrop.height
74 | );
75 |
76 | // set canvas width to final desired crop size - this will clear existing context
77 | canvas.width = pixelCrop.width;
78 | canvas.height = pixelCrop.height;
79 |
80 | // paste generated rotate image at the top left corner
81 | ctx.putImageData(data, 0, 0);
82 |
83 | // As Base64 string
84 | // return canvas.toDataURL('image/jpeg');
85 |
86 | // As a blob
87 | return new Promise((resolve, reject) => {
88 | canvas.toBlob((file) => {
89 | resolve(URL.createObjectURL(file));
90 | }, "image/jpeg");
91 | });
92 | }
93 |
--------------------------------------------------------------------------------
/client/src/assets/svg/404Error.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/layouts/Header/HeaderMenu/HeaderMenu.jsx:
--------------------------------------------------------------------------------
1 | import { Link} from "react-router-dom";
2 | import style from "./HeaderMenu.module.css";
3 | import styleIcons from "../../../styles/icons.module.css";
4 | import { useState } from "react";
5 | import { useLogoutMutation } from "../../../app/features/auth/authApi";
6 | import DisplayAccessibility from "./DisplayAccessibility";
7 |
8 | function HeaderMenu({ user, setShowHeaderMenu }) {
9 | const [Logout] = useLogoutMutation();
10 | const [show ,setShow]=useState(false)
11 | const LogoutHandler = async () => {
12 | Logout();
13 | };
14 | return (
15 |
84 | {error}
85 |
86 | )}
87 |
16 |
80 | );
81 | }
82 |
83 | export default HeaderMenu;
84 |
--------------------------------------------------------------------------------
/client/src/pages/Profile/profile.module.css:
--------------------------------------------------------------------------------
1 | .profile_container {
2 | /* padding: 0px 15%; */
3 | margin: 56px 0 30px;
4 | }
5 |
6 | .head {
7 | background: var(--bg-primary);
8 | width: 100%;
9 | display: flex;
10 | justify-content: center;
11 | }
12 | .head_container {
13 | max-width: 1100px;
14 | width: 100%;
15 | justify-items: center;
16 | }
17 | .top_head {
18 | display: flex;
19 | flex-direction: column;
20 | }
21 | .top_head_content {
22 | display: flex;
23 | flex-direction: column;
24 | align-items: flex-start;
25 | }
26 |
27 | .photo_container {
28 | height: 80px;
29 | }
30 | .photo {
31 | position: relative;
32 | top: -84px;
33 | }
34 |
35 | .user_photo {
36 | border-radius: 50%;
37 | width: 168px;
38 | height: 168px;
39 | border: 4px solid var(--bg-primary);
40 | }
41 | .add_photo {
42 | position: absolute;
43 | right: 0;
44 | bottom: 10px;
45 | }
46 | .profile_info {
47 | display: flex;
48 | flex-direction: column;
49 | align-items: center;
50 | justify-content: center;
51 | position: relative;
52 | gap: 10px;
53 | }
54 | .user_name {
55 | overflow-wrap: break-word;
56 | text-align: flex;
57 | line-height: 38px;
58 | width: max-content;
59 | }
60 | .friends {
61 | font-size: 16px;
62 | font-weight: 600;
63 | color: var(--color-third);
64 | /* align-self: flex-start; */
65 | }
66 |
67 | .profile_btns {
68 | display: flex;
69 | gap: 10px;
70 | align-items: center;
71 | justify-content: center;
72 | width: 100%;
73 | padding: 16px;
74 | white-space: nowrap;
75 | position: relative;
76 | }
77 |
78 | .footer {
79 | display: flex;
80 | align-items: center;
81 | justify-content: center;
82 | margin-bottom: 5px;
83 | }
84 | .footer_container {
85 | max-width: 1100px;
86 | width: 100%;
87 | justify-items: center;
88 | display: grid;
89 | grid-template-columns: 1fr;
90 | gap: 10px;
91 | padding: 6px;
92 | }
93 |
94 | .posts {
95 | display: flex;
96 | flex-direction: column;
97 | padding-top: 0.5rem;
98 | max-width: 680px;
99 | width: 100%;
100 | }
101 | .details {
102 | width: 100%;
103 | padding-top: 0.5rem;
104 | display: flex;
105 | flex-direction: column;
106 | gap: 10px;
107 | max-width: 680px;
108 | }
109 | .details_con {
110 | display: flex;
111 | flex-direction: column;
112 | position: static;
113 | }
114 | .line {
115 | width: 100%;
116 | height: 1px;
117 | background: var(--divider);
118 | margin: 5px 0;
119 | }
120 | @media (min-width: 495px) {
121 | .profile_btns {
122 | width: 50%;
123 | }
124 | }
125 | @media (min-width: 900px) {
126 | .details_con {
127 | position: sticky;
128 | }
129 | .footer_container {
130 | grid-template-columns: 1fr 1.6fr;
131 | }
132 |
133 | .top_head_content {
134 | flex-direction: row;
135 | padding: 10px 16px;
136 | justify-content: flex-start;
137 | column-gap: 25px;
138 | margin-bottom: 20px;
139 | }
140 | .profile_btns {
141 | width: 30%;
142 | margin-left: auto;
143 | }
144 | .profile_info {
145 | width: 37%;
146 | align-items: flex-start;
147 | }
148 | .photo {
149 | top: -60px;
150 | }
151 |
152 | .user_name {
153 | text-align: left;
154 | }
155 | }
156 |
--------------------------------------------------------------------------------
/client/src/app/features/post/postApi.jsx:
--------------------------------------------------------------------------------
1 | import { createEntityAdapter, createSelector } from "@reduxjs/toolkit";
2 | import { apiSlice } from "../../api/apiSlice";
3 |
4 |
5 | const postsAdapter = createEntityAdapter({
6 | selectId: (post) => post._id,
7 | sortComparer: (a, b) => b.createdAt.localeCompare(a.createdAt),
8 | });
9 |
10 | const initialState = postsAdapter.getInitialState();
11 |
12 | export const extendedApiSlice = apiSlice.injectEndpoints({
13 | endpoints: (builder) => ({
14 | fetchPosts: builder.query({
15 | query: () => "/api/posts/",
16 | transformResponse: (responseData) => {
17 | return postsAdapter.setAll(initialState, responseData);
18 | },
19 | providesTags: (result, error, arg) => [
20 | { type: "Post", id: "LIST" },
21 | ...result.ids.map((id) => ({ type: "Post", id })),
22 | ],
23 | }),
24 |
25 | fetchPostsByUser: builder.query({
26 | query: (usernameID) => `/api/posts/${usernameID}/posts`,
27 | transformResponse: (responseData) => {
28 | return postsAdapter.setAll(initialState, responseData);
29 | },
30 | providesTags: (result, error, arg) => {
31 | return [...result?.ids.map((id) => ({ type: "Post", id }))];
32 | },
33 | }),
34 |
35 | fetchPost: builder.query({
36 | query: (id) => `/api/posts/getOnePost/${id}`,
37 | transformResponse: (responseData) => {
38 | return postsAdapter.setOne(initialState, responseData);
39 | },
40 | providesTags: (result, error, id) => [{ type: "Post", id }],
41 | }
42 | ),
43 |
44 | addNewPost: builder.mutation({
45 | query: (form) => ({
46 | url: "/api/posts/addPost",
47 | method: "POST",
48 | body: form,
49 | }),
50 | invalidatesTags: (result, error, arg) => [{ type: "Post", id: arg.id }],
51 | }),
52 |
53 | updatePost: builder.mutation({
54 | query: ({ id, dataForm }) => ({
55 | url: `/api/posts/updatePost/${id}`,
56 | method: "PATCH",
57 | body: dataForm,
58 | }),
59 | invalidatesTags: (result, error, arg) => [{ type: "Post", id: arg.id }],
60 | }),
61 |
62 | deletePost: builder.mutation({
63 | query: (id) => ({
64 | url: `/api/posts/deletePost/${id}`,
65 | method: "DELETE",
66 | }),
67 | invalidatesTags: (result, error, arg) => [{ type: "Post", id: arg.id }],
68 | }),
69 | }),
70 | });
71 |
72 | export const {
73 | useFetchPostsQuery,
74 | useFetchPostsByUserQuery,
75 | useFetchPostQuery,
76 | useAddNewPostMutation,
77 | useUpdatePostMutation,
78 | useDeletePostMutation,
79 | } = extendedApiSlice;
80 |
81 | // returns the query result object
82 | export const selectPostsResult = extendedApiSlice.endpoints.fetchPosts.select();
83 |
84 | // Creates memoized selector
85 | const selectPostsData = createSelector(
86 | selectPostsResult,
87 | (postsResult) => postsResult.data // normalized state object with ids & entities
88 | );
89 |
90 | //getSelectors creates these selectors and we rename them with aliases using destructuring
91 | export const {
92 | selectAll: selectAllPosts,
93 | selectById: selectPostById,
94 | selectIds: selectPostIds,
95 | // Pass in a selector that returns the posts slice of state
96 | } = postsAdapter.getSelectors(
97 | (state) => selectPostsData(state) ?? initialState
98 | );
99 |
--------------------------------------------------------------------------------
/api/controllers/auth.js:
--------------------------------------------------------------------------------
1 | const bcrypt = require("bcryptjs");
2 | const jwt = require("jsonwebtoken");
3 | const User = require("../models/user");
4 | const SignupValidation = require("../validator/SignupValidation");
5 | const SigninValidation = require("../validator/SigninValidation");
6 |
7 | module.exports = {
8 | // --------------------------------------- //signup method to add a new user//--------------------------- //
9 | signup: async (req, res) => {
10 | const { email, password } = req.body;
11 |
12 | const { errors, isValid } = SignupValidation(req.body);
13 | try {
14 | if (!isValid) {
15 | res.status(404).json(errors);
16 | } else {
17 | await User.findOne({ email }).then(async (exist) => {
18 | if (exist) {
19 | errors.email = "Email already in use";
20 | res.status(404).json(errors);
21 | } else {
22 | const hashedpassword = bcrypt.hashSync(password, 8);
23 | req.body.password = hashedpassword;
24 | await User.create(req.body);
25 | res.status(201).json({ message: "user added with success" });
26 | }
27 | });
28 | }
29 | } catch (error) {
30 | res.status(404).json({ message: error.message });
31 | }
32 | },
33 | // --------------------------------------- //signin method to add a new user//--------------------------- //
34 |
35 | signin: async (req, res) => {
36 | const { email, password } = req.body;
37 | const { errors, isValid } = SigninValidation(req.body);
38 |
39 | try {
40 | if (!isValid) {
41 | return res.status(404).json(errors);
42 | } else {
43 | await User.findOne({ email }).then(async (user) => {
44 | if (!user) {
45 | errors.email =
46 | "Email does not exist ! please Enter the right Email or You can make account";
47 | return res.status(404).json(errors);
48 | }
49 | // Compare sent in password with found user hashed password
50 | const passwordMatch = bcrypt.compareSync(password, user.password);
51 | if (!passwordMatch) {
52 | errors.password = "Wrong Password";
53 | return res.status(404).json(errors);
54 | } else {
55 | // generate a token and send to client
56 | const exp = Date.now() + 1000 * 60 * 60 * 24 * 30;
57 | const token = jwt.sign(
58 | { "sub": user._id },
59 | process.env.ACCESS_TOKEN_SECRET,
60 | { expiresIn: "7d" }
61 |
62 | );
63 | // Authorization
64 | const options = {
65 | expires: new Date(exp),
66 | httpOnly: false, //accessible only by web server
67 | secure: true, //https
68 | sameSite: "None", //cross-site cookie
69 | };
70 | res.cookie("Authorization", token, options);
71 | res.status(201).json({
72 | token,
73 | user,
74 | });
75 | }
76 | });
77 | }
78 | } catch (error) {
79 | res.status(404).json({ message: error.message });
80 | }
81 | },
82 | // --------------------------------------- // logout method //--------------------------- //
83 |
84 | logout: async (req, res) => {
85 | try {
86 | res.clearCookie("Authorization");
87 | res.status(200).json(" You are logged out , to the next login !");
88 | } catch (error) {
89 | res.status(404).json({ message: error.message });
90 | }
91 | },
92 | };
93 |
--------------------------------------------------------------------------------
/client/src/layouts/Header/HeaderMenu/HeaderMenu.module.css:
--------------------------------------------------------------------------------
1 | /* HeaderMenu */
2 | .header_menu {
3 | padding: 0 0.3rem;
4 | position: absolute;
5 | top: 100%;
6 | right: 0;
7 | width: 360px;
8 | border-radius: 10px;
9 | background: var(--bg-primary);
10 | box-shadow: 2px 2px 2px var(--shadow-1);
11 | user-select: none;
12 | padding: 10px;
13 | border: 1px solid var(--color-primary);
14 | }
15 | :global(.dark) .header_menu i {
16 | filter: invert(100%);
17 | }
18 | .head {
19 | display: flex;
20 | align-items: center;
21 | border-radius: 10px;
22 | text-decoration: none;
23 | gap: 5px;
24 | }
25 | .menu_image {
26 | width: 40px;
27 | height: 40px;
28 | border-radius: 50%;
29 | }
30 |
31 | .menu_user {
32 | font-weight: 600;
33 | font-size: 15px;
34 | }
35 |
36 | .menu_splitter {
37 | width: 100%;
38 | height: 1px;
39 | background: var(--bg-third);
40 | margin-top: 5px;
41 | }
42 | .menu_action {
43 | position: relative;
44 | display: flex;
45 | align-items: center;
46 | margin-top: 5px;
47 | padding: 7px;
48 | font-weight: 600;
49 | font-size: 14px;
50 | border-radius: 10px;
51 | }
52 | .Arrow {
53 | right: 10px;
54 | transform: translateY(-50%);
55 | top: 30px;
56 | position: absolute;
57 | }
58 | .action_span {
59 | font-size: 14px;
60 | }
61 | .circle_icons {
62 | height: 40px;
63 | width: 40px;
64 | border-radius: 50%;
65 | display: flex;
66 | align-items: center;
67 | justify-content: center;
68 | background: var(--bg-forth);
69 | cursor: pointer;
70 | }
71 | :global(.dark) .menu i {
72 | filter: invert(100%);
73 | }
74 | /* displayAccessibility */
75 | .absolute_container {
76 | padding: 0 0.3rem;
77 | position: absolute;
78 | top: 0;
79 | bottom: 0;
80 | right: 0;
81 | left: 0;
82 | width: 360px;
83 | border-radius: 10px;
84 | background: var(--bg-primary);
85 | user-select: none;
86 | padding: 10px;
87 | }
88 | .absolute_container .mmenu_item {
89 | margin-top: 0;
90 | }
91 | .absolute_container_header {
92 | display: flex;
93 | align-items: center;
94 | gap: 10px;
95 | font-weight: 700;
96 | font-size: 24px;
97 | }
98 | .absolute_container label {
99 | display: flex;
100 | align-items: center;
101 | justify-content: space-between;
102 | margin-left: 50px;
103 | font-weight: 600;
104 | padding: 10px;
105 | cursor: pointer;
106 | border-radius: 10px;
107 | }
108 |
109 | .absolute_container label input {
110 | width: 20px;
111 | height: 20px;
112 | accent-color: var(--color-primary);
113 | }
114 | .mmenu_col {
115 | display: flex;
116 | flex-direction: column;
117 | justify-content: center;
118 | }
119 |
120 | .mmenu_col span:first-of-type {
121 | color: var(--color-secondary);
122 | font-weight: 600;
123 | font-size: 15px;
124 | letter-spacing: 1px;
125 | }
126 |
127 | .mmenu_col span:last-of-type {
128 | font-size: 14px;
129 | }
130 |
131 | .mmenu_main {
132 | padding: 10px;
133 | margin-top: 5px;
134 | display: flex;
135 | align-items: center;
136 | gap: 5px;
137 | }
138 |
139 | .mmenu_splitter {
140 | width: 100%;
141 | height: 1px;
142 | background: var(--bg-third);
143 | margin-top: 5px;
144 | }
145 |
146 | .mmenu_span1 {
147 | font-size: 14px !important;
148 | }
149 |
150 | .mmenu_span2 {
151 | font-size: 12px !important;
152 | color: var(--color-third);
153 | }
154 |
155 | .mmenu_item {
156 | position: relative;
157 | display: flex;
158 | align-items: center;
159 | margin-top: 5px;
160 | padding: 7px;
161 | font-weight: 600;
162 | font-size: 14px;
163 | border-radius: 10px;
164 | }
165 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | -webkit-touch-callout: none; /* iOS Safari */
6 | -webkit-user-select: none; /* Safari */
7 | -khtml-user-select: none; /* Konqueror HTML */
8 | -moz-user-select: none; /* Old versions of Firefox */
9 | -ms-user-select: none; /* Internet Explorer/Edge */
10 | user-select: none;
11 | color: var(--color-secondary);
12 | }
13 | body {
14 | font-family: "Segoe UI", Helvetica, Arial, sans-serif;
15 | background: var(--bg-secondary) !important ;
16 | }
17 |
18 | html {
19 | overflow-y: scroll;
20 | }
21 | :root {
22 |
23 | --bg-primary: #ffffff;
24 | --bg-secondary: #f0f2f5;
25 | --bg-third: #e4e6eb;
26 | --bg-forth: #f0f2f5;
27 | --color-primary:#5c6e58;
28 | --color-secondary: #050505;
29 | --color-third: #65676b;
30 | --divider: #d6d7d9;
31 | --dark-bg-primary: #18191a;
32 | --dark-bg-secondary: #242526;
33 | --dark-bg-third: #3a3b3c;
34 | --dark-bg-forth: #3a3b3c;
35 | --dark-color-primary: #242526;
36 | --dark-color-secondary: #b0b3b8;
37 | --red-color: #e40c2b;
38 | --orange-color: #e1523d;
39 | --blue-color: #0096ff;
40 | --light-blue-color: #0096ff21;
41 | --blue: #1876f2;
42 | --green-color: #42b72a;
43 | --light-blue-color: #e7f3ff;
44 | --border-color: #ccced2;
45 | --shadow-1: rgba(0, 0, 0, 0.1);
46 | --shadow-2: rgba(0, 0, 0, 0.2);
47 | --shadow-5: rgba(0, 0, 0, 0.5);
48 | --shadow-8: rgba(0, 0, 0, 0.8);
49 | --shadow-inset: rgba(255, 255, 255, 0.5);
50 | --color-error: #b94a48;
51 | }
52 |
53 |
54 | .line {
55 | width: 100%;
56 | height: 1px;
57 | background: var(--divider);
58 | margin: 5px 0;
59 | }
60 |
61 | /*----Scrollbar----*/
62 | .scrollbar {
63 | overflow: auto;
64 | }
65 |
66 | ::-webkit-scrollbar {
67 | width: 8px;
68 | }
69 |
70 | ::-webkit-scrollbar-thumb {
71 | background: #aeaeafa1;
72 | border-radius: 5px;
73 | }
74 |
75 | /*----Scrollbar----*/
76 |
77 | /* hover */
78 | .hover1:hover {
79 | background: var(--bg-secondary);
80 | }
81 | .hover2:hover {
82 | background: var(--bg-third);
83 | }
84 |
85 | /* hover */
86 |
87 | /*---Circles------*/
88 | .small_circle {
89 | position: relative;
90 | height: 36px;
91 | width: 36px;
92 | border-radius: 50%;
93 | display: flex;
94 | align-items: center;
95 | justify-content: center;
96 | margin-right: 11px;
97 | background: var(--bg-third);
98 | cursor: pointer;
99 | }
100 | .smaller_circle {
101 | position: relative;
102 | height: 30px;
103 | width: 30px;
104 | border-radius: 50%;
105 | border: 1px solid #5c6e58;
106 | display: flex;
107 | align-items: center;
108 | justify-content: center;
109 | margin-right: 11px;
110 | background: var(--bg-primary);
111 | cursor: pointer;
112 | }
113 |
114 | /*---Circles------*/
115 | .blur {
116 | position: fixed;
117 | top: 0;
118 | left: 0;
119 | right: 0;
120 | background: rgba(255, 255, 255, 0.768);
121 | bottom: 0;
122 | z-index: 99;
123 | backdrop-filter: blur(2px);
124 | }
125 | /*----filters---*/
126 | #ReactSimpleImageViewer {
127 | z-index: 19;
128 | background-color: #000000f0;
129 | }
130 | #ReactSimpleImageViewer img {
131 | max-height: 70%;
132 | max-width: 80%;
133 | border-radius: 10px;
134 | }
135 | .reactEasyCrop_CropArea {
136 | color: rgba(255, 255, 255, 0.5) !important;
137 | }
138 |
139 | .dark .react-loading-skeleton {
140 | --base-color: #2d2d2d !important;
141 | --highlight-color: #484848 !important;
142 | --animation-duration: 1s;
143 | --animation-direction: normal;
144 | --pseudo-element-display: block;
145 | }
146 |
--------------------------------------------------------------------------------
/client/src/pages/friends/style.module.css:
--------------------------------------------------------------------------------
1 | .friends_container {
2 | height: calc(100vh - 56px);
3 | width: 100%;
4 | margin-top: 56px;
5 | color:var(--color-secondary);
6 | display: grid;
7 | grid-template-columns: 22% auto;
8 | }
9 | .left {
10 | background:var(--bg-primary);
11 | padding: 10px;
12 | position: fixed;
13 | width: 22%;
14 | height: 100%;
15 | left: 0;
16 | }
17 |
18 | .right {
19 | background:var(--bg-secondary);
20 | padding: 1.2rem;
21 | top: 56px;
22 | left: 360px;
23 | right: 0;
24 | width: 100%;
25 | min-height: calc(100vh - 56px);
26 | }
27 | .left .header,
28 | .friends_left_header {
29 | display: flex;
30 | align-items: center;
31 | justify-content: space-between;
32 | }
33 |
34 | .left .header h3,
35 | .friends_left_header h3 {
36 | font-size: 21px;
37 | }
38 |
39 | .left .menu_item {
40 | align-items: center;
41 | border-radius: 10px;
42 | cursor: pointer;
43 | display: flex;
44 | font-size: 14px;
45 | font-weight: 600;
46 | margin-top: 5px;
47 | padding: 7px;
48 | position: relative;
49 | }
50 | .rArrow {
51 | position: absolute;
52 | right: 10px;
53 | top: 50%;
54 | -webkit-transform: translateY(-50%);
55 | transform: translateY(-50%);
56 | }
57 | .active_friends {
58 | background:var(--bg-secondary);
59 | }
60 | .active_friends .rArrow {
61 | display: none;
62 | }
63 | .active_friends > div {
64 | background:var(--color-primary);
65 | }
66 | .active_friends i {
67 | -webkit-filter: invert(100%);
68 | filter: invert(100%);
69 | }
70 |
71 | .req_card {
72 | width: 210px;
73 | height: fit-content;
74 | border-radius: 10px;
75 | font-weight: 600;
76 | display: flex;
77 | flex-direction: column;
78 | align-items: center;
79 | gap: 2px;
80 | padding: 6px;
81 | }
82 |
83 | .req_card img {
84 | width: 100%;
85 | height: 200px;
86 | object-fit: cover;
87 | border-radius: 10px;
88 | }
89 |
90 | .req_card button {
91 | width: 170px !important;
92 | }
93 | .friends_right_wrap {
94 | padding-bottom: 10px;
95 | border-bottom: 1px solid var(--bg-third);
96 | }
97 |
98 | .friends_right_wrap .flex_wrap {
99 | margin-top: 10px;
100 | display: flex;
101 | flex-wrap: wrap;
102 | align-items: center;
103 | gap: 15px;
104 | }
105 |
106 | .see_link {
107 | color:var(--color-primary);
108 | padding: 5px;
109 | border-radius: 10px;
110 | cursor: pointer;
111 | width: 60px;
112 | height: 40px;
113 | }
114 | .flex_wrap {
115 | margin-top: 10px;
116 | display: flex;
117 | flex-wrap: wrap;
118 | align-items: center;
119 | gap: 15px;
120 | }
121 | .photo {
122 | position: relative;
123 | border-radius: 10px;
124 | overflow: hidden;
125 | }
126 | .req_name {
127 | cursor: pointer;
128 | text-align: center;
129 | position: absolute;
130 | bottom: 0;
131 | background:var(--color-third);
132 | width: 100%;
133 | height: 12%;
134 | display: flex;
135 | justify-content: center;
136 | align-items: center;
137 | color:var(--bg-primary);
138 | font-size: 18px;
139 | font-family: sans-serif;
140 | }
141 |
142 | .btns {
143 | display: flex;
144 | flex-direction: column;
145 | gap: 4px;
146 | width: 100%;
147 | margin-top: 4px;
148 | }
149 | .btns button {
150 | width: 100% !important;
151 | font-weight: 500;
152 | font-size: 15px;
153 | }
154 |
155 | @media (max-width: 870px) {
156 | .left {
157 | width: auto;
158 | }
159 | .rArrow,
160 | .menu_item span,
161 | .header h3 {
162 | display: none;
163 | }
164 | .header {
165 | justify-content: center;
166 | }
167 | .friends_container {
168 | grid-template-columns: auto;
169 | padding-left: 70px;
170 | }
171 | }
172 |
--------------------------------------------------------------------------------
/client/src/components/Posts/Post/Comments/comment.module.css:
--------------------------------------------------------------------------------
1 | /* Comments */
2 | .comments {
3 | margin: 0.5rem 0;
4 | }
5 | .comments:last-child {
6 | margin-bottom: 0;
7 | }
8 | .comments .comments_img {
9 | width: 32px;
10 | height: 32px;
11 | border-radius: 50%;
12 | object-fit: cover;
13 | }
14 |
15 | /* Comment */
16 | .comment {
17 | width: 100%;
18 | margin: 20px 0;
19 | padding: 0.5rem;
20 | border: 1px solid var(--color-primary);
21 | border-radius: 0.5rem;
22 | }
23 | .comment_header {
24 | color: var(--color-primary);
25 | display: flex;
26 | justify-content: space-between;
27 | margin-bottom: 0.25rem;
28 | font-size: 0.75em;
29 | }
30 | .comment_header_left {
31 | display: flex;
32 | text-align: center;
33 | justify-content: center;
34 | }
35 | .comment_header_right {
36 | width: 100%;
37 | }
38 | .comment_info {
39 | padding: 8px;
40 | display: flex;
41 | flex-direction: column;
42 | border-radius: 10px;
43 | gap: 2px;
44 | min-width: 170px;
45 | max-width: max-content;
46 | position: relative;
47 | padding-right: 30px;
48 | background: var(--bg-forth);
49 | }
50 | .comment_info_auther {
51 | font-size: 12px;
52 | font-weight: 500;
53 | cursor: pointer;
54 | display: flex;
55 | align-items: center;
56 | }
57 |
58 | .comment_image {
59 | width: 40px;
60 | height: 40px;
61 | border-radius: 50%;
62 | object-fit: cover;
63 | }
64 |
65 | .author:hover {
66 | text-decoration: underline;
67 | }
68 | .date {
69 | font-size: 9px;
70 | color: var(--color-third);
71 | align-self: flex-end;
72 | }
73 | .date:hover {
74 | text-decoration: underline;
75 | }
76 |
77 | .comment_info_text {
78 | font-size: 14px;
79 | font-weight: 400;
80 | word-break: break-all;
81 | }
82 | .comment_info_likes {
83 | cursor: pointer;
84 | background: var(--bg-primary);
85 | width: 35px;
86 | height: 35px;
87 | border-radius: 50px;
88 | display: flex;
89 | justify-content: center;
90 | align-items: center;
91 | position: absolute;
92 | right: -15px;
93 | bottom: -10px;
94 | gap: 5px;
95 | box-shadow: 0 2px 4px var(--shadow-1);
96 | }
97 | .comment_actions {
98 | display: flex;
99 | margin-top: 8px;
100 | gap: 7px;
101 | }
102 | .actions {
103 | cursor: pointer;
104 | font-size: 12px;
105 | font-weight: 600;
106 | }
107 | .actions:hover {
108 | text-decoration: underline;
109 | }
110 | .comment_date {
111 | font-size: 12px;
112 | }
113 | .replying {
114 | margin-top: 10px;
115 | margin-left: 10px;
116 | }
117 | .nested_replies_stack {
118 | display: flex;
119 | }
120 |
121 | .nested_replies {
122 | padding-left: 0.2rem;
123 | flex-grow: 1;
124 | }
125 |
126 | .hide {
127 | display: none;
128 | }
129 |
130 | /* commentForm */
131 | .comment_form_container {
132 | padding: 5px 0px;
133 | display: flex;
134 | align-items: center;
135 | gap: 10px;
136 | margin-bottom: 5px;
137 | }
138 | .comment_form_left {
139 | display: flex;
140 | text-align: center;
141 | justify-content: center;
142 | }
143 | .comments_img {
144 | width: 32px;
145 | height: 32px;
146 | border-radius: 50%;
147 | }
148 | .comment_form_right {
149 | background: var(--bg-forth);
150 | color:var(--color-secondary);
151 | height: 38px;
152 | flex: 1 1;
153 | border-radius: 50px;
154 | font-size: 15px;
155 | line-height: 21px;
156 | display: flex;
157 | align-items: center;
158 | justify-content: space-between;
159 | padding: 0 10px;
160 | gap: 10px;
161 | }
162 | .comment_form_right:hover {
163 | background:var(--bg-third);
164 | }
165 | .comment_form_inputs {
166 | width: 100%;
167 | height: 100%;
168 | }
169 |
170 | /*
171 | .comment-form-row {
172 | display: flex;
173 | gap: 0.5rem;
174 | } */
175 |
--------------------------------------------------------------------------------
17 | setShowHeaderMenu(false)}
21 | >
22 |
23 |
24 | {user?.firstName} {user?.lastName}
25 |
26 |
27 |
28 |
76 | {show && (
77 |
29 |
37 |
30 |
31 |
32 | Settings & privacy
33 |
34 |
35 |
36 |
38 |
46 |
39 |
40 |
41 | Help & support
42 |
43 |
44 |
45 | {
48 | setShow(true);
49 | }}>
50 |
58 |
51 |
52 |
53 | Display & Accessibility
54 |
55 |
56 |
57 |
59 |
66 |
60 |
61 |
62 |
63 |
65 | Give feedback
64 |
70 |
75 |
71 |
72 |
73 | Logout
74 |