Major updates - Guest (readonly), UI, security, better uploads, user …

…bans, etc New user ban system, guest will have read-only access, Edit profile fixed, major backend efactor
nidhish-nayak · Mar 25, 2024 · 26add71 · 26add71
1 parent 2517ea8
commit 26add71
Show file tree

Hide file tree

Showing 46 changed files with 854 additions and 259 deletions.
diff --git a/client/.env.example b/client/.env.example
@@ -5,3 +5,7 @@ VITE_LOCAL_CLIENT_URL=
 VITE_LOCAL_SERVER_URL=
 VITE_SUPABASE_URL=
 VITE_SUPABASE_KEY=
+
+# Optional - guest username & password
+VITE_GUEST_USERNAME=
+VITE_GUEST_PASSWORD=
diff --git a/client/src/components/addComment/addComment.tsx b/client/src/components/addComment/addComment.tsx
@@ -29,6 +29,7 @@ const AddComment = ({ postId }: { postId: number }) => {
 			return setUploading(false);
 		},
 		onError(error) {
+			setUploading(false);
 			console.log(error);
 			return alert("Comment upload failed!");
 		},

diff --git a/client/src/components/comment/comment.scss b/client/src/components/comment/comment.scss
@@ -72,7 +72,7 @@
 							border-radius: 10px;
 							color: themed("textColor");
 							overflow: hidden;
-							padding: 8px 14px 8px 10px;
+							padding: 6px 12px 8px 10px;
 							gap: 5px;
 							transition: 250ms ease-in-out;
 							box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

diff --git a/client/src/components/leftbar/leftbar.scss b/client/src/components/leftbar/leftbar.scss
@@ -38,6 +38,23 @@
 				flex-direction: column;
 				gap: 10px;
 
+				.tablet {
+					display: none;
+				}
+
+				@include tablet {
+					.tablet {
+						display: flex;
+						width: 100%;
+					}
+				}
+
+				@include mobile {
+					.tablet {
+						display: none;
+					}
+				}
+
 				svg {
 					color: themed("svgColor");
 				}

diff --git a/client/src/components/leftbar/leftbar.tsx b/client/src/components/leftbar/leftbar.tsx
@@ -9,6 +9,7 @@ import {
 	Groups3Outlined,
 	HomeOutlined,
 	MarkUnreadChatAltOutlined,
+	MonitorHeart,
 	NotificationsActiveOutlined,
 	TravelExploreOutlined,
 } from "@mui/icons-material";
@@ -21,8 +22,8 @@ const Leftbar = () => {
 	const navigate = useNavigate();
 	const { currentUser } = useContext(AuthContext);
 	const { isPostOpen, setIsPostOpen } = useContext(PostContext);
-
 	if (!currentUser) throw Error("User not logged in!");
+
 	const { id, profilePic } = currentUser;
 
 	const handleProfileNavigate = () => {
@@ -111,6 +112,19 @@ const Leftbar = () => {
 							<span>Find People</span>
 						</div>
 					</Link>
+					<Link
+						to="/activities"
+						className="tablet"
+						style={{
+							textDecoration: "none",
+							color: "inherit",
+						}}
+					>
+						<div className="item tablet">
+							<MonitorHeart />
+							<span>Activities</span>
+						</div>
+					</Link>
 				</div>
 				<hr />
 				<div className="menu">

diff --git a/client/src/components/navbar/navbar.scss b/client/src/components/navbar/navbar.scss
@@ -71,6 +71,47 @@
 			align-items: center;
 			gap: 20px;
 
+			.item-realtime {
+				@include tablet {
+					display: none;
+				}
+
+				padding: 5px 10px;
+				border-radius: 6px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 6px;
+				background-color: themed("border");
+				cursor: pointer;
+				border: 1px solid themed("border");
+				transition: all 150ms ease-in-out;
+
+				&:hover {
+					border: 1px solid themed("arrow");
+				}
+
+				.realtime-title {
+					font-size: 0.75rem;
+				}
+
+				.realtime-circle {
+					margin-top: 2px;
+					width: 5px;
+					height: 5px;
+					border-radius: 100%;
+					background-color: themed("activityOn");
+				}
+
+				.realtime-circle.read-only {
+					margin-top: 2px;
+					width: 5px;
+					height: 5px;
+					border-radius: 100%;
+					background-color: yellow;
+				}
+			}
+
 			.user {
 				display: flex;
 				align-items: center;
@@ -131,6 +172,50 @@
 		display: none;
 
 		&.visible {
+			.item-realtime {
+				padding: 5px 10px;
+				border-radius: 6px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 6px;
+				background-color: themed("border");
+				cursor: pointer;
+				border: 1px solid themed("border");
+				transition: all 150ms ease-in-out;
+
+				&:hover {
+					border: 1px solid themed("arrow");
+				}
+
+				.realtime-title {
+					font-weight: 500;
+					font-size: 0.85rem;
+					margin-bottom: 2px;
+				}
+
+				.realtime-circle {
+					width: 5px;
+					height: 5px;
+					border-radius: 100%;
+					background-color: themed("activityOn");
+				}
+
+				.realtime-circle.offline {
+					width: 5px;
+					height: 5px;
+					border-radius: 100%;
+					background-color: themed("activityOff");
+				}
+
+				.realtime-circle.read-only {
+					width: 5px;
+					height: 5px;
+					border-radius: 100%;
+					background-color: yellow;
+				}
+			}
+
 			opacity: 1;
 			transform: translateY(0);
 			transition:

diff --git a/client/src/components/navbar/navbar.tsx b/client/src/components/navbar/navbar.tsx
@@ -27,6 +27,7 @@ import {
 	SearchOff,
 } from "@mui/icons-material";
 import PostSVG from "../../assets/PostSVG";
+import { OnlineContext } from "../../context/onlineContext";
 import { PostContext } from "../../context/postContext";
 import Logo from "../logo/logo";
 import Logout from "../logout/logout";
@@ -39,6 +40,7 @@ const Navbar = () => {
 	const navigate = useNavigate();
 	const scrollDirection = useScrollDirection();
 	const { currentUser } = useContext(AuthContext);
+	const { isOnline } = useContext(OnlineContext);
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const { isPostOpen, setIsPostOpen } = useContext(PostContext);
 	const { darkMode, toggleTheme } = useContext(DarkModeContext);
@@ -91,6 +93,21 @@ const Navbar = () => {
 					<Search />
 				</div>
 				<div className="right">
+					<div
+						className="item-realtime"
+						title={
+							username === "guest"
+								? "Plese sign-up for full-access."
+								: ""
+						}
+					>
+						<p className="realtime-title">
+							{username === "guest" ? "Read Only" : "Full Access"}
+						</p>
+						<div
+							className={`realtime-circle ${username === "guest" ? "read-only" : "online"}`}
+						/>
+					</div>
 					<div className="user">
 						<div className="user-link" onClick={showLogout}>
 							<img
@@ -123,6 +140,16 @@ const Navbar = () => {
 					<Logo />
 				</div>
 				<div className="right-mobile">
+					<div
+						className="item-realtime"
+						title="Status"
+						onClick={() => navigate("/activities")}
+					>
+						<p className="realtime-title">Status</p>
+						<div
+							className={`realtime-circle ${currentUser.username === "guest" ? "read-only" : isOnline ? "online" : "offline"}`}
+						/>
+					</div>
 					<div
 						className="theme"
 						onClick={toggleTheme}

diff --git a/client/src/components/post/post.scss b/client/src/components/post/post.scss
@@ -99,7 +99,7 @@
 						border-radius: 10px;
 						color: themed("textColor");
 						overflow: hidden;
-						padding: 8px 14px 8px 10px;
+						padding: 6px 12px 8px 10px;
 						gap: 5px;
 						transition: 250ms ease-in-out;
 						box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

diff --git a/client/src/components/posts/posts.scss b/client/src/components/posts/posts.scss
@@ -17,11 +17,11 @@
 
 		.empty {
 			background-color: themed("bg");
-			padding: 12px 16px;
+			padding: 8px 16px;
 			border-radius: 10px;
 			width: fit-content;
 			color: themed("textColor");
-			font-size: 1rem;
+			font-size: 0.875rem;
 			font-weight: 500;
 			border: 1px solid themed("border");
 
@@ -33,7 +33,7 @@
 			@include mobile {
 				background-color: themed("bgSoft");
 				margin: 10px;
-				font-size: 0.875rem;
+				font-size: 0.75rem;
 			}
 		}
 

diff --git a/client/src/components/rightbar/mobile/mobileRightbar.scss b/client/src/components/rightbar/mobile/mobileRightbar.scss
@@ -29,6 +29,15 @@
 			padding: 20px;
 			background-color: themed("bg");
 
+			.item.note {
+				display: none;
+
+				@include tablet {
+					display: flex;
+					flex-direction: column;
+				}
+			}
+
 			.item {
 				border: 1px solid themed("border");
 				background-color: themed("bgSoft");
@@ -40,6 +49,33 @@
 					color: themed("textColor");
 				}
 
+				.item-container.mobile.note {
+					margin-top: 10px;
+					font-size: 0.85rem;
+					color: themed("textColorSoft");
+					display: inline;
+
+					span {
+						color: themed("textColorSoft");
+						font-weight: 500;
+						margin-right: 4px;
+					}
+				}
+
+				.item-container.mobile.access {
+					margin-top: 6px;
+					font-size: 0.85rem;
+					color: themed("textColor");
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					gap: 4px !important;
+
+					.username {
+						font-weight: 500;
+					}
+				}
+
 				.item-container {
 					display: flex;
 					justify-content: space-between;
@@ -52,6 +88,19 @@
 
 					.item-title-realtime {
 						color: themed("textColorSoft");
+
+						@include tablet {
+							display: flex;
+							gap: 4px;
+
+							.item-title-data {
+								color: themed("textColor");
+
+								&.username {
+									color: themed("textColorSoft");
+								}
+							}
+						}
 					}
 
 					.item-realtime {
@@ -87,6 +136,13 @@
 							border-radius: 100%;
 							background-color: themed("activityOff");
 						}
+
+						.realtime-circle.read-only {
+							width: 5px;
+							height: 5px;
+							border-radius: 100%;
+							background-color: yellow;
+						}
 					}
 				}
 

diff --git a/client/src/components/rightbar/mobile/mobileRightbar.tsx b/client/src/components/rightbar/mobile/mobileRightbar.tsx
@@ -1,13 +1,15 @@
 import Activity from "../activity/activity";
 import Online from "../online/online";
 import "./mobileRightbar.scss";
+import Status from "./status";
 
 const MobileRightbar = () => {
 	return (
 		<div className="mobile-rightbar">
 			<div className="container">
-				<Activity />
+				<Status />
 				<Online />
+				<Activity />
 			</div>
 		</div>
 	);