├── .dockerignore ├── .eslintignore ├── .eslintrc.json ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ ├── doc_report.yml │ ├── feature_request.yml │ ├── other.yml │ └── responsive_web.yml ├── pull_request_template.md └── workflows │ ├── community.yml │ ├── deploy.yml │ ├── labels.yml │ ├── release-please.yml │ └── release.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierignore ├── .prettierrc ├── .storybook ├── main.js └── preview.js ├── .stylelintrc ├── 404.html ├── CHANGELOG.md ├── CNAME ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Dockerfile ├── LICENSE ├── README.md ├── example.env ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── public ├── 404.html ├── robots.txt └── sitemap.xml ├── src ├── App.css ├── App.jsx ├── NotFound.jsx ├── app │ └── store.js ├── assets │ ├── ComputerNetwork.png │ ├── ImagesAreInTheCloud │ ├── Timeline.png │ ├── greenBG.png │ ├── images │ │ ├── TheCyberHUB-Desktop.png │ │ ├── TheCyberHUB_logo_outlined.png │ │ ├── certificate-bg.png │ │ ├── homepage.png │ │ ├── no_data_found.svg │ │ ├── open-source-contribution.svg │ │ ├── th3cyb3rhub-fav.png │ │ ├── undraw_firmware_re_fgdy.svg │ │ ├── undraw_programming_re_kg9v.svg │ │ ├── undraw_public_discussion_re_w9up.svg │ │ ├── undraw_tutorial_video_re_wepc.svg │ │ └── undraw_version_control_re_mg66.svg │ ├── loading.gif │ └── underMaintenance.png ├── components │ ├── AIChat │ │ ├── AIChat.jsx │ │ ├── AIChatElements.jsx │ │ ├── Chat.jsx │ │ ├── ChatMessages.jsx │ │ ├── MarkdownPreview.jsx │ │ ├── NewChat.jsx │ │ ├── Prompts │ │ │ ├── PromptCard.jsx │ │ │ ├── Prompts.jsx │ │ │ └── prompts.json │ │ ├── RecentChats.jsx │ │ └── RecentChatsElements.jsx │ ├── AdminDashboard │ │ ├── AdminDashboard.jsx │ │ ├── AdminDashboardRoute.jsx │ │ ├── AdminDashboardSidebar │ │ │ ├── AdminDashbaordSidebarElements.jsx │ │ │ └── AdminDashboardSidebar.jsx │ │ └── ManageCommunityEvents │ │ │ ├── ManageCommunityEvents.jsx │ │ │ └── ManageCommunityEventsElements.jsx │ ├── Beta │ │ └── Test │ │ │ └── FetchFromGitHub.jsx │ ├── Blogs │ │ ├── BlogCard │ │ │ ├── BlogCard.jsx │ │ │ ├── BlogCardElements.jsx │ │ │ ├── BlogCards.jsx │ │ │ ├── LoadingBlogCard.jsx │ │ │ └── LoadingBlogCardElements.jsx │ │ ├── BlogFilter.jsx │ │ ├── BlogSidebar │ │ │ ├── LeftBlogSidebar.jsx │ │ │ ├── LeftBlogSidebarElements.jsx │ │ │ ├── RightBlogSidebar.jsx │ │ │ └── RightBlogSidebarElements.jsx │ │ ├── Blogs.jsx │ │ ├── BlogsElements.jsx │ │ ├── BlogsRoute.jsx │ │ ├── BlogsTagsElements.jsx │ │ ├── ManageBlogs │ │ │ ├── BlogPostForm.jsx │ │ │ ├── CreateBlog │ │ │ │ ├── CreateBlog.jsx │ │ │ │ └── CreateBlogElements.jsx │ │ │ ├── CreateBlogV2 │ │ │ │ ├── AddBlogTags.jsx │ │ │ │ ├── AddBlogTagsElements.jsx │ │ │ │ ├── BlogPostFormV2.jsx │ │ │ │ ├── CreateBlogV2.jsx │ │ │ │ └── CreateBlogV2Elements.jsx │ │ │ └── EditBlog │ │ │ │ ├── EditBlog.jsx │ │ │ │ └── EditBlogElements.jsx │ │ ├── PreviewBlogContent.jsx │ │ ├── ReactBarr │ │ │ └── ReactBar.jsx │ │ ├── SingleBlog │ │ │ ├── ReactionsBlog.jsx │ │ │ ├── ReactionsBlogElements.jsx │ │ │ ├── SingleBlog.jsx │ │ │ └── SingleBlogElements.jsx │ │ ├── TrendingBlogs │ │ │ ├── TrendingBlogCard.jsx │ │ │ ├── TrendingBlogCardElements.jsx │ │ │ ├── TrendingBlogs.jsx │ │ │ └── TrendingBlogsElements.jsx │ │ ├── UserBlogs.jsx │ │ ├── ViewBlog │ │ │ ├── BlogComments │ │ │ │ ├── BlogComments.jsx │ │ │ │ └── BlogCommentsElements.jsx │ │ │ ├── PreviewMarkdown.jsx │ │ │ ├── ViewBlog.jsx │ │ │ ├── ViewBlogElements.jsx │ │ │ └── ViewBlogOld.jsx │ │ ├── dark.js │ │ └── util.js │ ├── CaptureTheFlag │ │ ├── CTF.css │ │ ├── CTF.jsx │ │ ├── CTFCards │ │ │ └── CtfChallenges.jsx │ │ ├── CTFData.jsx │ │ ├── CTFDataOld.jsx │ │ ├── CTFElements.jsx │ │ ├── CTFLeaderboard │ │ │ ├── CTFLeaderboard.jsx │ │ │ └── CTFLeaderboardElements.jsx │ │ ├── CTFRoute.jsx │ │ ├── CreateCTF.jsx │ │ ├── CreateCTFElements.jsx │ │ ├── CtFPage │ │ │ ├── MainPage.jsx │ │ │ ├── MainPageElement.jsx │ │ │ ├── QuestionAnswer.jsx │ │ │ ├── QuestionAnswerComponent.jsx │ │ │ ├── QuestionAnswerComponentElement.jsx │ │ │ └── Submission.jsx │ │ ├── CtfCard.jsx │ │ ├── SingleCTF │ │ │ ├── CtfRegister.jsx │ │ │ ├── CtfTeam.jsx │ │ │ ├── CtfTimeToStart.jsx │ │ │ ├── GetCertificate.jsx │ │ │ ├── GetCertificateElements.jsx │ │ │ ├── LikesAndViews.jsx │ │ │ ├── SingleCTF.jsx │ │ │ ├── SingleCTFElements.jsx │ │ │ └── SubmissionElements.jsx │ │ ├── Team │ │ │ ├── Team.jsx │ │ │ ├── TeamChat.jsx │ │ │ ├── TeamElements.jsx │ │ │ ├── TeamInvite.jsx │ │ │ └── TeamInviteElements.jsx │ │ ├── TimeToStart.jsx │ │ └── createCertificate.js │ ├── Chat │ │ ├── Avatar.jsx │ │ ├── Chat │ │ │ ├── Chat.jsx │ │ │ ├── ChatElement.jsx │ │ │ ├── ChatHeader.jsx │ │ │ └── ChatHeaderElements.jsx │ │ ├── ChatArea │ │ │ └── ChatArea.jsx │ │ ├── ChatBox │ │ │ ├── ChatBox.jsx │ │ │ ├── ChatBoxElements.jsx │ │ │ └── UserList.jsx │ │ ├── CommunityChat.jsx │ │ ├── Contact.jsx │ │ ├── DummyChat │ │ │ ├── ChatData.js │ │ │ ├── ChatMessage.jsx │ │ │ ├── ChatMessageElement.jsx │ │ │ └── ChatMessageSelf.jsx │ │ ├── SendMessage.jsx │ │ ├── Sidebar │ │ │ ├── Sidebar.jsx │ │ │ └── SidebarElements.jsx │ │ └── encryptData.js │ ├── ChatBot │ │ ├── ActionProvider.jsx │ │ ├── ChatBot.jsx │ │ ├── ChatbotElements.jsx │ │ ├── MessageParser.jsx │ │ ├── Widgets │ │ │ ├── Assists │ │ │ │ ├── AssistElements.jsx │ │ │ │ ├── AssistLinks.jsx │ │ │ │ ├── AssistLinksData.jsx │ │ │ │ └── AssistOptions.jsx │ │ │ └── BotComponents │ │ │ │ └── ChatBotAvatar.jsx │ │ └── config.jsx │ ├── Common │ │ ├── CodeSyntaxHighlighter.jsx │ │ ├── DateDisplay │ │ │ ├── DateDisplay.jsx │ │ │ ├── DateDisplay.stories.jsx │ │ │ ├── DateDisplayElements.jsx │ │ │ └── index.js │ │ ├── DurationDisplay │ │ │ ├── DurationDisplay.jsx │ │ │ ├── DurationDisplay.stories.jsx │ │ │ ├── DurationDisplayElements.jsx │ │ │ └── index.js │ │ ├── ExternalLink │ │ │ └── ExternalLink.jsx │ │ ├── GeneralDashboardSidebar │ │ │ ├── GeneralDashboardSidebar.jsx │ │ │ ├── GeneralDashboardSidebarElements.jsx │ │ │ └── index.js │ │ ├── HeadingBanner │ │ │ ├── HeadingBanner.jsx │ │ │ └── HeadingBannerElements.jsx │ │ ├── ImageSlider │ │ │ ├── ImageSlider.jsx │ │ │ └── ImageSliderElements.jsx │ │ ├── ImageUpload │ │ │ ├── ImageElements.jsx │ │ │ ├── ImageInput.jsx │ │ │ ├── ImagePreview.jsx │ │ │ ├── index.js │ │ │ └── useUploadImages.jsx │ │ ├── InputEditor │ │ │ ├── InputEditor.jsx │ │ │ ├── InputEditorElements.jsx │ │ │ └── index.jsx │ │ ├── LoginBox.jsx │ │ ├── MarkdownEditor │ │ │ ├── CheckBoxClickable.jsx │ │ │ ├── MarkdownEditor.css │ │ │ ├── MarkdownEditor.jsx │ │ │ ├── MarkdownEditorElements.jsx │ │ │ ├── index.jsx │ │ │ └── useImageUploadEvents.jsx │ │ ├── MarkdownPreview.jsx │ │ ├── ModalOptions │ │ │ ├── Modal.jsx │ │ │ ├── Options.css │ │ │ ├── Options.jsx │ │ │ ├── OptionsElements.jsx │ │ │ └── index.js │ │ ├── MultipleSelect │ │ │ ├── MultipleSelect.jsx │ │ │ ├── MultipleSelect.stories.jsx │ │ │ ├── MultipleSelectElements.jsx │ │ │ └── index.js │ │ ├── PopUpWindow.jsx │ │ ├── SearchInputBox │ │ │ ├── SearchInputBox.jsx │ │ │ ├── SearchInputBox.stories.jsx │ │ │ ├── SearchInputBoxElements.jsx │ │ │ └── index.js │ │ ├── SocialSidebar │ │ │ ├── Sidebar.jsx │ │ │ ├── Sidebar.stories.jsx │ │ │ ├── SidebarElements.jsx │ │ │ ├── SidebarFilterButton.jsx │ │ │ ├── SidebarFilterButtons.jsx │ │ │ └── index.js │ │ ├── ThemeContext.jsx │ │ ├── TimePickerDisplay │ │ │ ├── TimePickerDisplay.jsx │ │ │ ├── TimePickerDisplayElements.jsx │ │ │ └── index.js │ │ ├── dateFormat.js │ │ └── dateFormatter.js │ ├── CommunityEvents │ │ ├── CommunityEvents.jsx │ │ ├── CommunityEventsElement.jsx │ │ ├── EventItemList.jsx │ │ ├── EventItemListElement.jsx │ │ ├── ModifyCommunityEvent.jsx │ │ ├── ModifyElements.jsx │ │ ├── ModifyTimeline.jsx │ │ ├── ParticipantsDisplay.jsx │ │ ├── ParticipantsDisplayElement.jsx │ │ ├── TimelineListItemDisplay.jsx │ │ └── index.js │ ├── Courses │ │ ├── Courses.jsx │ │ ├── CoursesElements.jsx │ │ ├── LearningPath │ │ │ ├── FreeCourse.jsx │ │ │ ├── LearningPath.jsx │ │ │ ├── LearningPathData.jsx │ │ │ ├── LearningPathElements.jsx │ │ │ └── text.jsx │ │ └── NewCourses │ │ │ ├── Course.jsx │ │ │ ├── CoursesData.jsx │ │ │ └── NewCourses.jsx │ ├── Dashboard │ │ ├── Analytics │ │ │ ├── Analytics.jsx │ │ │ ├── AnalyticsBarChart.jsx │ │ │ ├── AnalyticsBarChartElements.jsx │ │ │ ├── AnalyticsDoughnutChart.jsx │ │ │ ├── AnalyticsDoughnutChartElements.jsx │ │ │ ├── AnalyticsElements.jsx │ │ │ ├── AnalyticsHorizontalBarCharts.jsx │ │ │ ├── AnalyticsHorizontalBarChartsElements.jsx │ │ │ ├── AnalyticsIconElements.jsx │ │ │ ├── AnalyticsMainBarChart.jsx │ │ │ ├── AnalyticsMainBarChartElements.jsx │ │ │ ├── AnalyticsPageBottomSectionMainContent.jsx │ │ │ ├── AnalyticsPageBottomSectionMainContentElements.jsx │ │ │ ├── AnalyticsPageTopSectionMainContent.jsx │ │ │ ├── AnalyticsPageTopSectionMainContentElements.jsx │ │ │ ├── AnalyticsPostsData.json │ │ │ ├── AnalyticsTopInnerCards.jsx │ │ │ ├── AnalyticsTopInnerCardsElement.jsx │ │ │ ├── AnalyticsUtils.js │ │ │ ├── AnalyticsVisitorsData.json │ │ │ ├── MainBarChartData.json │ │ │ ├── MainBarChartDataHours.json │ │ │ ├── MainBarChartDataMonths.json │ │ │ └── useAnalyticsChartCustomHook.jsx │ │ ├── Bookmarks │ │ │ ├── Bookmarks.jsx │ │ │ └── BookmarksElements.jsx │ │ ├── DashbaordSidebar │ │ │ ├── DashbaordSidebarElements.jsx │ │ │ └── DashboardSidebar.jsx │ │ ├── Dashboard.jsx │ │ ├── DashboardElements.jsx │ │ ├── DashboardRoute.jsx │ │ ├── FormData │ │ │ ├── CheckValuesElements.jsx │ │ │ ├── FormData.jsx │ │ │ ├── FormDataElements.jsx │ │ │ ├── InternshipResponse.jsx │ │ │ ├── InternshipResponseElements.jsx │ │ │ ├── Jobs │ │ │ │ ├── Job.jsx │ │ │ │ ├── JobDetailsElements.jsx │ │ │ │ ├── JobDetailsPage.jsx │ │ │ │ ├── Jobs.jsx │ │ │ │ ├── JobsData.jsx │ │ │ │ └── JobsElements.jsx │ │ │ ├── New │ │ │ │ ├── Response.jsx │ │ │ │ └── Responses.jsx │ │ │ ├── SendEmail.jsx │ │ │ ├── SingleFormData.jsx │ │ │ ├── SingleFormDataElements.jsx │ │ │ └── checkValues.jsx │ │ ├── Notetaker │ │ │ ├── Category │ │ │ │ ├── CategoryElements.jsx │ │ │ │ ├── CategoryItem.jsx │ │ │ │ ├── CategoryList.jsx │ │ │ │ ├── CategorySidebar.jsx │ │ │ │ ├── ModifyCategory.jsx │ │ │ │ └── index.jsx │ │ │ ├── NoteApp.css │ │ │ ├── NoteApp.jsx │ │ │ ├── NoteDescription.jsx │ │ │ ├── NoteElements.jsx │ │ │ ├── NoteItem.jsx │ │ │ ├── NoteList.jsx │ │ │ ├── NotePinning.jsx │ │ │ └── NoteSidebar.jsx │ │ ├── OldDashbaord │ │ │ ├── DashboardItems.jsx │ │ │ ├── EmailNotVerified.jsx │ │ │ ├── EmailNotVerifiedElements.jsx │ │ │ ├── GoalSetter │ │ │ │ ├── GoalForm.jsx │ │ │ │ ├── GoalItem.jsx │ │ │ │ ├── GoalSetter.css │ │ │ │ ├── GoalSetter.jsx │ │ │ │ └── old │ │ │ │ │ ├── GoalElements.jsx │ │ │ │ │ ├── GoalForm.jsx │ │ │ │ │ ├── GoalItem.jsx │ │ │ │ │ └── GoalSetter.jsx │ │ │ ├── Streak │ │ │ │ ├── Streak.jsx │ │ │ │ └── StreakElements.jsx │ │ │ ├── VerifyToAccess.jsx │ │ │ └── checkUserVerified.js │ │ ├── Profile │ │ │ ├── AboutMe.jsx │ │ │ ├── Achievements │ │ │ │ ├── Achievements.jsx │ │ │ │ └── AchievementsElements.jsx │ │ │ ├── ActivityGraph │ │ │ │ ├── ActivityGraph.jsx │ │ │ │ └── ActivityGraphElements.jsx │ │ │ ├── CTFParticipation │ │ │ │ ├── CTFParticipation.jsx │ │ │ │ └── CTFParticipationElements.jsx │ │ │ ├── ConnectionsAndFollows │ │ │ │ ├── Connections │ │ │ │ │ ├── Connection.jsx │ │ │ │ │ ├── ConnectionElements.jsx │ │ │ │ │ ├── Connections.jsx │ │ │ │ │ ├── ConnectionsElements.jsx │ │ │ │ │ └── MyConnections.jsx │ │ │ │ ├── ConnectionsAndFollows.jsx │ │ │ │ ├── Follow │ │ │ │ │ ├── Follow.jsx │ │ │ │ │ └── FollowElements.jsx │ │ │ │ └── test.jsx │ │ │ ├── CyberProfiles │ │ │ │ ├── CyberProfiles.jsx │ │ │ │ └── CyberProfilesElements.jsx │ │ │ ├── CyberSecuritySkills.jsx │ │ │ ├── EditProfile.jsx │ │ │ ├── EditProfileElements.jsx │ │ │ ├── EditPublicProfile │ │ │ │ ├── EditAboutMe.jsx │ │ │ │ ├── EditAchievements.jsx │ │ │ │ ├── EditProfileHeader.jsx │ │ │ │ ├── EditPublicProfile.jsx │ │ │ │ ├── EditSkillSet.jsx │ │ │ │ ├── EditUserLinks.jsx │ │ │ │ └── EditUserProjects.jsx │ │ │ ├── EditUserDetails.jsx │ │ │ ├── Experience │ │ │ │ ├── Experience.jsx │ │ │ │ └── ExperienceElements.jsx │ │ │ ├── Followers │ │ │ │ └── Followers.jsx │ │ │ ├── IAmAvailableFor.jsx │ │ │ ├── MyCtfCertificates.jsx │ │ │ ├── MyCtfCertificatesElements.jsx │ │ │ ├── ProfileElements.jsx │ │ │ ├── ProfileHeader │ │ │ │ └── ProfileHeader.jsx │ │ │ ├── SkillSet │ │ │ │ ├── SkillSet.jsx │ │ │ │ └── SkillSetElements.jsx │ │ │ ├── StreakBox.jsx │ │ │ ├── ToolsAndSoftware.jsx │ │ │ ├── UserLinks │ │ │ │ ├── UserInfo.jsx │ │ │ │ ├── UserLinks.jsx │ │ │ │ ├── UserLinksElements.jsx │ │ │ │ └── socialLinksTemplate.js │ │ │ ├── UserPoints │ │ │ │ ├── UserPoints.jsx │ │ │ │ └── UserPointsElements.jsx │ │ │ ├── UserProfile.jsx │ │ │ ├── UserProjects │ │ │ │ ├── Achievements.jsx │ │ │ │ ├── AchievementsElements.jsx │ │ │ │ ├── UserProjects.jsx │ │ │ │ └── UserProjectsElements.jsx │ │ │ ├── UserSocialLinks │ │ │ │ └── UserSocialLinksElements.jsx │ │ │ └── test.jsx │ │ └── Settings │ │ │ ├── Account │ │ │ ├── ProfileForm.jsx │ │ │ ├── index.jsx │ │ │ └── profile.css │ │ │ ├── Api │ │ │ ├── ApiForm.jsx │ │ │ ├── api.css │ │ │ └── index.jsx │ │ │ ├── Appearance │ │ │ └── index.jsx │ │ │ ├── Display │ │ │ ├── displayComponents.jsx │ │ │ └── index.jsx │ │ │ ├── Notifications │ │ │ ├── Notification.css │ │ │ ├── index.jsx │ │ │ └── toggle.jsx │ │ │ ├── Profile │ │ │ └── index.jsx │ │ │ ├── SettingsSidebar.jsx │ │ │ ├── index.jsx │ │ │ └── settings.css │ ├── Explore │ │ ├── Explore.jsx │ │ ├── ExploreElements.jsx │ │ ├── ExploreRoutes.jsx │ │ ├── FeedsExplore.jsx │ │ ├── Internships │ │ │ └── Internships.jsx │ │ ├── Tags │ │ │ ├── Tags.jsx │ │ │ └── TagsElements.jsx │ │ └── Users │ │ │ ├── Users.jsx │ │ │ └── UsersElements.jsx │ ├── Feeds │ │ ├── FeedPage │ │ │ ├── FeedComments │ │ │ │ ├── AddFeedComment.jsx │ │ │ │ ├── AddFeedCommentsElements.jsx │ │ │ │ ├── FeedComments.jsx │ │ │ │ └── ReplyCard.jsx │ │ │ ├── FeedPage.jsx │ │ │ ├── FeedPageElements.jsx │ │ │ └── FeedPagePost.jsx │ │ ├── FeedPoll │ │ │ ├── Poll.jsx │ │ │ ├── PollAnswers.jsx │ │ │ ├── PollAnswers.stories.jsx │ │ │ ├── PollImage.jsx │ │ │ ├── PollQuestions.jsx │ │ │ ├── PollQuestions.stories.jsx │ │ │ └── StyledCheckbox.jsx │ │ ├── FeedPosts │ │ │ ├── FeedPost.jsx │ │ │ ├── FeedPosts.jsx │ │ │ ├── FeedPostsElements.jsx │ │ │ └── PostActionsAndStats.jsx │ │ ├── FeedTags │ │ │ ├── FeedTagsElements.jsx │ │ │ └── SocialTags.jsx │ │ ├── Feeds.jsx │ │ ├── FeedsElements.jsx │ │ ├── FeedsRoute.jsx │ │ ├── PostForm │ │ │ ├── AddPostElements.jsx │ │ │ ├── AddPostTags │ │ │ │ ├── AddPostTags.jsx │ │ │ │ └── AddPostTagsElements.jsx │ │ │ ├── AddThreadElements.jsx │ │ │ ├── AddThreads.jsx │ │ │ └── ModifyFeed.jsx │ │ └── UserFeeds.jsx │ ├── Forum │ │ ├── CommentMarkdownPreview.jsx │ │ ├── CreateForumPost │ │ │ ├── AddBlogTags.jsx │ │ │ ├── AddBlogTagsElements.jsx │ │ │ ├── BlogPostFormV2.jsx │ │ │ ├── CreateBlogV2Elements.jsx │ │ │ └── CreateForumPost.jsx │ │ ├── Forum.jsx │ │ ├── ForumData.jsx │ │ ├── ForumElements.jsx │ │ ├── ForumPosts │ │ │ ├── Card.jsx │ │ │ ├── CardElements.jsx │ │ │ ├── ForumPosts.jsx │ │ │ └── ForumPostsElements.jsx │ │ ├── ForumRoute.jsx │ │ ├── ForumSubPage.jsx │ │ ├── ForumSubPageElements.jsx │ │ ├── PostCommentForm.jsx │ │ └── PostCommentFormElements.jsx │ ├── Header │ │ ├── Dropdowns │ │ │ ├── Dropdown.jsx │ │ │ ├── DropdownElements.jsx │ │ │ └── SideDropdown.jsx │ │ ├── Exp.jsx │ │ ├── ExpElemenets.jsx │ │ ├── Navbar │ │ │ ├── Navbar.jsx │ │ │ └── NavbarElements.jsx │ │ ├── Sidebar │ │ │ ├── Sidebar.jsx │ │ │ └── SidebarElements.jsx │ │ └── UserOptions │ │ │ ├── UserOptions.css │ │ │ ├── UserOptions.jsx │ │ │ └── UserOptionsElements.jsx │ ├── Homepage │ │ ├── About │ │ │ ├── About.jsx │ │ │ └── AboutElements.jsx │ │ ├── ContactForm │ │ │ ├── ContactForm.jsx │ │ │ └── ContactFormElements.jsx │ │ ├── Footer │ │ │ ├── Footer.jsx │ │ │ └── FooterElements.jsx │ │ ├── Hero │ │ │ ├── Hero.jsx │ │ │ └── HeroElements.jsx │ │ ├── Homepage.jsx │ │ ├── Info │ │ │ ├── Data.jsx │ │ │ ├── Info.jsx │ │ │ └── InfoElements.jsx │ │ ├── Registration │ │ │ ├── CenterCard.jsx │ │ │ ├── Form.jsx │ │ │ ├── Learn2CodePromotion.jsx │ │ │ └── index.jsx │ │ ├── Socials │ │ │ ├── Socials.jsx │ │ │ └── SocialsElements.jsx │ │ └── SpecialSponsors │ │ │ ├── SpecialSponsors.jsx │ │ │ └── SpecialSponsorsElement.jsx │ ├── Learn │ │ ├── Courses │ │ │ ├── Courses.jsx │ │ │ ├── CoursesRoute.jsx │ │ │ ├── VideoCard │ │ │ │ ├── VideoCard.css │ │ │ │ ├── VideoCard.jsx │ │ │ │ └── VideoCardElements.jsx │ │ │ ├── YouTubeVideosElements.jsx │ │ │ ├── YoutubeCourseDetail.jsx │ │ │ ├── YoutubeCoursesData │ │ │ │ ├── BlueTeamCoursesData.jsx │ │ │ │ ├── BugHuntingCoursesData.jsx │ │ │ │ ├── CyberSecCoursesData.jsx │ │ │ │ ├── LinuxCoursesData.jsx │ │ │ │ ├── RedTeamCoursesData.jsx │ │ │ │ └── index.js │ │ │ ├── YoutubeCoursesLayout.jsx │ │ │ └── YoutubeCoursesSidebar.jsx │ │ ├── Learn.jsx │ │ └── Roadmaps │ │ │ ├── CyberSecurityData.jsx │ │ │ ├── Roadmap.jsx │ │ │ ├── RoadmapCard.jsx │ │ │ ├── RoadmapElements.jsx │ │ │ ├── Roadmaps.jsx │ │ │ ├── RoadmapsData.jsx │ │ │ ├── RoadmapsElements.jsx │ │ │ └── RoadmapsRoute.jsx │ ├── OldEvents │ │ ├── Events.jsx │ │ ├── EventsData │ │ │ ├── Capture.png │ │ │ ├── EventsData.jsx │ │ │ └── HacktoberfestEventData.jsx │ │ ├── EventsElement.jsx │ │ ├── EventsRoute.jsx │ │ ├── OnGoingEvents │ │ │ ├── OnGoingEvents.jsx │ │ │ └── OnGoingEventsElements.jsx │ │ ├── PastEvents │ │ │ ├── PastEvents.jsx │ │ │ └── PastEventsElements.jsx │ │ ├── UpComingEvents │ │ │ ├── UpComingEvents.jsx │ │ │ └── UpComingEventsElements.jsx │ │ └── ViewEvent │ │ │ └── Event.jsx │ ├── Opportunities │ │ ├── DisplayCommunityEvents │ │ │ ├── DisplayCommunityEvents.jsx │ │ │ ├── DisplayEventDetails.jsx │ │ │ ├── DisplayEventDetailsElement.jsx │ │ │ ├── DisplayTimelineElements.jsx │ │ │ ├── DisplayTimelineItem.jsx │ │ │ ├── DisplayTimelineList.jsx │ │ │ └── index.js │ │ ├── Internship │ │ │ ├── InternshipElements.jsx │ │ │ ├── InternshipProgram.jsx │ │ │ ├── InternshipProgramData.js │ │ │ ├── InternshipTimeline.jsx │ │ │ └── InternshipTimelineElements.jsx │ │ ├── OpenSecProjects │ │ │ ├── OpenSecProjects.jsx │ │ │ ├── OpenSecProjectsData.js │ │ │ └── OpenSecProjectsElements.jsx │ │ ├── TheCyberXcel │ │ │ └── TheCyberXcel.jsx │ │ └── Volunteer │ │ │ ├── Volunteer.jsx │ │ │ ├── VolunteerData.js │ │ │ └── VolunteerElements.jsx │ ├── Other │ │ ├── Certificate │ │ │ ├── CertificateCard.jsx │ │ │ ├── CertificateElements.jsx │ │ │ ├── CertificatePage.jsx │ │ │ └── createCtfCertificate.js │ │ ├── Community │ │ │ ├── Community.jsx │ │ │ └── CommunityElements.jsx │ │ ├── ContactForm │ │ │ ├── ContactForm.jsx │ │ │ └── ContactFormElements.jsx │ │ ├── CyberGames │ │ │ ├── CyberGames.jsx │ │ │ ├── CyberGamesElements.jsx │ │ │ ├── Leaderboard │ │ │ │ ├── Leaderboard.jsx │ │ │ │ ├── Leaderboard.module.css │ │ │ │ ├── LeaderboardElements.jsx │ │ │ │ └── NewLeaderboard.jsx │ │ │ ├── OSINTGame │ │ │ │ ├── OSINTGame.jsx │ │ │ │ └── OSINTGameElements.jsx │ │ │ └── OpensourceProjects │ │ │ │ ├── OpensourceProjects.jsx │ │ │ │ ├── OpensourceProjectsData.jsx │ │ │ │ └── OpensourceProjectsElements.jsx │ │ ├── MixComponents │ │ │ ├── Buttons │ │ │ │ └── ButtonElements.jsx │ │ │ ├── ComingSoon.jsx │ │ │ ├── InputField │ │ │ │ └── CustomInputField.jsx │ │ │ ├── Layout │ │ │ │ ├── LayoutElements.jsx │ │ │ │ └── index.jsx │ │ │ └── Spinner │ │ │ │ ├── Loader.jsx │ │ │ │ ├── LoadingSpinner.jsx │ │ │ │ ├── Spinner.jsx │ │ │ │ └── SpinnerElements.jsx │ │ ├── NoUser.jsx │ │ ├── ScrollToTop.jsx │ │ ├── Security │ │ │ ├── HallOfFame.jsx │ │ │ ├── HallOfFameElements.jsx │ │ │ ├── ResponsibleDisclosure.jsx │ │ │ ├── ResponsibleDisclosureElements.jsx │ │ │ ├── RulesOfEngagement.jsx │ │ │ ├── RulesOfEngagementElements.jsx │ │ │ ├── Security.jsx │ │ │ ├── SecurityElements.jsx │ │ │ ├── SecurityNavigation.jsx │ │ │ └── SecurityRoutes.jsx │ │ ├── SessionExpireLogout.js │ │ ├── SplashScreen │ │ │ ├── SplashScreen.jsx │ │ │ └── SplashScreenElements.jsx │ │ ├── Support │ │ │ ├── Sponsors.jsx │ │ │ └── SponsorsElements.jsx │ │ ├── UnderMaintenance │ │ │ ├── UnderMaintenance.jsx │ │ │ └── UnderMaintenanceElements.jsx │ │ └── Victimhelp │ │ │ ├── Victimhelp.jsx │ │ │ └── VictimhelpElements.jsx │ ├── Resources │ │ ├── Cheatsheets │ │ │ ├── Cheatsheets.jsx │ │ │ ├── CheatsheetsElements.jsx │ │ │ └── cheatsheetsData.jsx │ │ ├── Checklist │ │ │ ├── Checklist.jsx │ │ │ ├── ChecklistElements.jsx │ │ │ └── checklistData.jsx │ │ ├── Hackliner │ │ │ └── Hackliner.jsx │ │ ├── Hacklist │ │ │ ├── Hacklist.jsx │ │ │ ├── HacklistData │ │ │ │ ├── OWASP_TOP_10 │ │ │ │ │ ├── XSS.md │ │ │ │ │ └── owasp10.md │ │ │ │ └── Web_Enumeration_Files │ │ │ │ │ └── DIR.md │ │ │ ├── HacklistElements.jsx │ │ │ └── data.jsx │ │ ├── InterviewQuestions │ │ │ ├── InterviewQuestions.jsx │ │ │ ├── InterviewQuestionsData.jsx │ │ │ └── InterviewQuestionsElements.jsx │ │ ├── Jobs │ │ │ ├── Job.jsx │ │ │ ├── JobDetailsElements.jsx │ │ │ ├── JobDetailsPage.jsx │ │ │ ├── Jobs.jsx │ │ │ ├── JobsData.jsx │ │ │ └── JobsElements.jsx │ │ ├── LearningPath │ │ │ ├── FreeCourse.jsx │ │ │ ├── LearningPath.jsx │ │ │ ├── LearningPathData.jsx │ │ │ ├── LearningPathElements.jsx │ │ │ └── text.jsx │ │ ├── Methodology │ │ │ ├── MethodlogyData.jsx │ │ │ ├── MethodologyElement.jsx │ │ │ └── MethodologyMain.jsx │ │ ├── Payloads │ │ │ ├── Payloads.jsx │ │ │ ├── PayloadsElements.jsx │ │ │ └── payloadsData.jsx │ │ ├── PrivacyPolicy.jsx │ │ ├── Quiz │ │ │ ├── Categories │ │ │ │ ├── Categories.jsx │ │ │ │ ├── CategoriesButtonData.jsx │ │ │ │ ├── CategoriesButtons.jsx │ │ │ │ ├── CategoriesElements.jsx │ │ │ │ └── QuizPage.jsx │ │ │ ├── CategoriesData.jsx │ │ │ ├── CreateQuiz │ │ │ │ ├── CreateQuizElement.jsx │ │ │ │ └── Main.jsx │ │ │ ├── Quiz.jsx │ │ │ ├── QuizElements.jsx │ │ │ └── QuizStartSection.jsx │ │ ├── Resources.jsx │ │ ├── ResourcesElements.jsx │ │ ├── ResourcesRoutes.jsx │ │ ├── Submit │ │ │ └── Submit.jsx │ │ ├── TermsAndCondition.jsx │ │ ├── TermsAndConditionElements.jsx │ │ └── WriteUps │ │ │ ├── WriteUps.jsx │ │ │ ├── WriteUpsData.jsx │ │ │ └── WriteUpsElements.jsx │ ├── Tools │ │ ├── BinaryExploits │ │ │ ├── BinaryExploits.jsx │ │ │ ├── BinaryExploitsData.jsx │ │ │ ├── BinaryExploitsElements.jsx │ │ │ ├── Data.jsx │ │ │ └── DataPages.jsx │ │ ├── BreachCheck │ │ │ ├── BreachCheck.jsx │ │ │ └── BreachCheckElements.jsx │ │ ├── CodeSnippet │ │ │ ├── CodeSnippet.jsx │ │ │ └── CodeSnippetElements.jsx │ │ ├── Dorking │ │ │ └── Dorking.jsx │ │ ├── EncoderDecoder.jsx │ │ │ ├── DecoderCode.jsx │ │ │ ├── EncoderCode.jsx │ │ │ ├── EncoderCodeElement.jsx │ │ │ ├── EncoderElement.jsx │ │ │ └── EncoderMain.jsx │ │ ├── GoogleDork │ │ │ └── GoogleDorkMain.jsx │ │ ├── IPInfo.jsx │ │ ├── IPInfoElements.jsx │ │ ├── MarkdownEditor.jsx │ │ ├── PassGen │ │ │ ├── PassGen.jsx │ │ │ └── PassGenElements.jsx │ │ ├── PortScanner │ │ │ ├── PortScanner.jsx │ │ │ └── PortScannerElements.jsx │ │ ├── Reconage │ │ │ ├── Assets │ │ │ │ ├── Asset.jsx │ │ │ │ └── Assets.jsx │ │ │ ├── ReconTools │ │ │ │ ├── PortScanner.jsx │ │ │ │ ├── ReconTools.jsx │ │ │ │ ├── Subfinder.jsx │ │ │ │ ├── TechnologyFinder.jsx │ │ │ │ └── UrlFinder.jsx │ │ │ ├── Reconage.jsx │ │ │ ├── ReconageElements.jsx │ │ │ ├── ReconageRoutes.jsx │ │ │ ├── ReconageSidebar.jsx │ │ │ └── ReconageSidebarElements.jsx │ │ ├── ReverseShell │ │ │ ├── ReveseShellElement.jsx │ │ │ ├── ShellGenerator.jsx │ │ │ ├── encodeCode.jsx │ │ │ └── shellData.jsx │ │ ├── SubdomainFinder │ │ │ ├── SubdomainFinder.jsx │ │ │ └── SubdomainFinderElements.jsx │ │ ├── SubdomainGenerator.jsx │ │ ├── Tools.jsx │ │ ├── ToolsElements.jsx │ │ └── ToolsRoute.jsx │ ├── WebSecurity │ │ ├── CodeReviews │ │ │ ├── CodeReview.jsx │ │ │ ├── CodeReviewData.jsx │ │ │ ├── CodeReviewLab.jsx │ │ │ └── RoomCard.jsx │ │ ├── Common │ │ │ ├── Hint.jsx │ │ │ ├── HintElements.jsx │ │ │ ├── Labs │ │ │ │ ├── Labs.jsx │ │ │ │ ├── LabsData.jsx │ │ │ │ ├── LabsElement.jsx │ │ │ │ ├── RoomCard.jsx │ │ │ │ └── RoomCardElement.jsx │ │ │ ├── LabsRoom │ │ │ │ ├── LabsRoom.jsx │ │ │ │ └── LabsRoomElement.jsx │ │ │ ├── SubHeaderElements.jsx │ │ │ ├── SubmissionBox.jsx │ │ │ ├── SubmissionBoxElements.jsx │ │ │ └── SyntaxHighlight.jsx │ │ ├── CrackMe │ │ │ ├── CrackMe.jsx │ │ │ ├── CrackMeData.jsx │ │ │ └── CrackMeRoom.jsx │ │ ├── SecureCode │ │ │ ├── SecureCode.jsx │ │ │ ├── SecureCodeElements.jsx │ │ │ └── secureCodeData.jsx │ │ ├── Sidebar.jsx │ │ ├── SubHeader.jsx │ │ ├── WebSecurity.jsx │ │ ├── WebSecurityElements.jsx │ │ ├── WebSecurityLabs │ │ │ ├── LabsRoomData.jsx │ │ │ ├── WebSecurityLabs.jsx │ │ │ └── WebSecurityRoom.jsx │ │ ├── WebSecurityRoutes.jsx │ │ └── WebSecurityTopics │ │ │ ├── SubTopic.jsx │ │ │ ├── SubTopicElements.jsx │ │ │ ├── Topic.jsx │ │ │ ├── TopicElements.jsx │ │ │ ├── Topics.jsx │ │ │ ├── TopicsElements.jsx │ │ │ └── topicsData.jsx │ └── index.js ├── favicon.svg ├── features │ ├── UserTimestamps.js │ ├── apiStatus.jsx │ ├── apiUrl.js │ ├── auth │ │ ├── authService.js │ │ └── authSlice.js │ ├── blogs │ │ ├── blogComments │ │ │ ├── blogCommentServices.js │ │ │ └── blogCommentSlice.js │ │ ├── blogLikes │ │ │ ├── blogLikesServices.js │ │ │ └── blogLikesSlice.js │ │ ├── blogService.js │ │ └── blogSlice.js │ ├── bookmarks │ │ ├── bookmark.js │ │ ├── bookmarkServices.js │ │ └── bookmarkSlice.js │ ├── checkTimestamps.js │ ├── ctf │ │ ├── ctfService.js │ │ └── ctfSlice.js │ ├── events │ │ ├── eventsService.js │ │ └── eventsSlice.js │ ├── feeds │ │ ├── feedLikes │ │ │ ├── feedLikesServices.js │ │ │ └── feedLikesSlice.js │ │ ├── feedsService.js │ │ ├── feedsSlice.js │ │ └── views │ │ │ ├── viewServices.js │ │ │ └── viewSlice.js │ ├── forum │ │ ├── forumService.js │ │ └── forumSlice.js │ ├── goals │ │ ├── goalService.js │ │ └── goalSlice.js │ ├── imageUploadService.js │ ├── isAuthenticated.jsx │ ├── notes │ │ ├── notesCategory │ │ │ ├── notesCategoryService.js │ │ │ └── notesCategorySlice.js │ │ ├── notesService.js │ │ └── notesSlice.js │ ├── resetPassword │ │ ├── resetPasswordService.js │ │ └── resetPasswordSlice.js │ └── userDetail │ │ ├── connections │ │ ├── connectionService.js │ │ └── connectionSlice.js │ │ ├── follow │ │ ├── followService.js │ │ └── followSlice.js │ │ ├── userDetailService.js │ │ └── userDetailSlice.js ├── index.css ├── main.jsx ├── pages │ ├── AuthPopup │ │ ├── AuthPopup.jsx │ │ └── AuthPopupElements.jsx │ ├── AuthRoute.jsx │ ├── ForgotPassword.jsx │ ├── Login.jsx │ ├── Register.jsx │ └── ResetPassword.jsx └── utils │ ├── components │ └── RenderProgressIndicator.jsx │ ├── dateTimeRelatedFunctions.js │ ├── generateSitemap.js │ ├── validateEmail.js │ └── workers │ └── imageUploadWorker.js ├── tailwind.config.js └── vite.config.js /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | /src/components/GTFOBins/Data.jsx -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": ["plugin:react/recommended", "standard", "prettier", "plugin:storybook/recommended"], 8 | "overrides": [], 9 | "parserOptions": { 10 | "ecmaVersion": "latest", 11 | "sourceType": "module", 12 | "ecmaFeatures": { 13 | "jsx": true, 14 | "js": true 15 | } 16 | }, 17 | "plugins": ["react", "no-relative-import-paths"], 18 | "settings": { 19 | "react": { 20 | "version": "detect" 21 | } 22 | }, 23 | "rules": { 24 | "react/prop-types": "off", 25 | "no-relative-import-paths/no-relative-import-paths": [ 26 | "error", 27 | { 28 | "allowSameFolder": true 29 | } 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [th3cyb3rhub] 4 | 5 | custom: ["https://www.buymeacoffee.com/th3cyb3rhub", "https://www.thecyberhub.org/sponsors"] 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Security Issues 4 | url: https://twitter.com/th3cyb3rhub 5 | about: For security related issues, contact us on Twitter. 6 | 7 | - name: Discord community 8 | url: https://discord.com/invite/thecyberhub-799183504759324672 9 | about: Join our inclusive Discord community. 10 | 11 | - name: Our socials 12 | url: https://linktr.ee/th3cyb3rhub 13 | about: Feel free to contact us via your preferred platform. 14 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Github Pages deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - "main" 7 | workflow_dispatch: 8 | 9 | permissions: 10 | contents: write # Grants write permissions to contents 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | strategy: 16 | matrix: 17 | node-version: [16.x] 18 | steps: 19 | - uses: actions/checkout@v3 # Update to the latest version of checkout 20 | - name: Use Node.js ${{ matrix.node-version }} 21 | uses: actions/setup-node@v3 # Update to the latest version of setup-node 22 | with: 23 | node-version: ${{ matrix.node-version }} 24 | - run: npm ci 25 | - run: npm run build 26 | env: 27 | PUBLIC_BASE_PATH: /Thecyberhub.org 28 | - name: Deploy 🚀 29 | uses: JamesIves/github-pages-deploy-action@v4 # Use the latest version of the deploy action 30 | with: 31 | branch: gh-pages # The branch the action should deploy to 32 | folder: dist # The folder the action should deploy 33 | clean: true # Ensures the branch is cleaned before deploying 34 | token: ${{ secrets.PAT_TOKEN }} # Uses the GitHub token for authentication 35 | -------------------------------------------------------------------------------- /.github/workflows/labels.yml: -------------------------------------------------------------------------------- 1 | name: Import standard labels 2 | 3 | on: [workflow_dispatch] 4 | 5 | jobs: 6 | labels: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/setup-node@v2 11 | with: 12 | node-version: "14" 13 | - uses: th3cyb3rhub/gh-action-labels@main 14 | with: 15 | github-token: ${{ secrets.GITHUB_TOKEN }} 16 | owner-name: "TheCyberHUB" 17 | repository-name: "thecyberhub.org" 18 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: 4 | - main 5 | 6 | permissions: 7 | contents: write 8 | pull-requests: write 9 | 10 | name: release-please 11 | 12 | jobs: 13 | release-please: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: googleapis/release-please-action@v4 17 | with: 18 | # this assumes that you have created a personal access token 19 | # (PAT) and configured it as a GitHub action secret named 20 | # `MY_RELEASE_PLEASE_TOKEN` (this secret name is not important). 21 | token: ${{ secrets.MY_RELEASE_PLEASE_TOKEN }} 22 | # this is a built-in strategy in release-please, see "Action Inputs" 23 | # for more options 24 | release-type: simple 25 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Releases 2 | on: 3 | push: 4 | branches: 5 | - main 6 | 7 | jobs: 8 | changelog: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: actions/checkout@v2 13 | 14 | - name: Conventional Changelog Action 15 | uses: TriPSs/conventional-changelog-action@v3 16 | with: 17 | github-token: ${{ secrets.github_token }} 18 | version-file: "./package.json,./package-lock.json" 19 | 20 | - name: create release 21 | uses: actions/create-release@v1 22 | if: ${{ steps.changelog.outputs.skipped == 'false' }} 23 | env: 24 | github-token: ${{ secrets.github_token }} 25 | with: 26 | tag_name: ${{ steps.changelog.outputs.tag }} 27 | release_name: ${{ steps.changelog.outputs.tag }} 28 | body: ${{ steps.changelog.outputs.clean_changelog }} 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | # Beta features 11 | .fleet 12 | src/BetaFeatures 13 | src/assets/BetaFeatures 14 | src/components/BetaFeatures 15 | 16 | node_modules 17 | dist 18 | dist-ssr 19 | *.local 20 | 21 | # Editor directories and files 22 | .vscode/* 23 | !.vscode/extensions.json 24 | .idea 25 | .DS_Store 26 | *.suo 27 | *.ntvs* 28 | *.njsproj 29 | *.sln 30 | *.sw? 31 | .eslintcache 32 | .env 33 | TheCyberHUB.iml 34 | 35 | *storybook.log -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "printWidth": 120, 4 | "tabWidth": 4, 5 | "useTabs": false, 6 | "trailingComma": "all", 7 | "bracketSpacing": true, 8 | "semi": true 9 | } 10 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | /** @type { import('@storybook/react-vite').StorybookConfig } */ 2 | const config = { 3 | stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], 4 | addons: [ 5 | "@storybook/addon-onboarding", 6 | "@storybook/addon-links", 7 | "@storybook/addon-essentials", 8 | "@chromatic-com/storybook", 9 | "@storybook/addon-interactions", 10 | ], 11 | framework: { 12 | name: "@storybook/react-vite", 13 | options: {}, 14 | }, 15 | }; 16 | export default config; 17 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | /** @type { import('@storybook/react').Preview } */ 2 | const preview = { 3 | parameters: { 4 | controls: { 5 | matchers: { 6 | color: /(background|color)$/i, 7 | date: /Date$/i, 8 | }, 9 | }, 10 | }, 11 | }; 12 | 13 | export default preview; 14 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "customSyntax": "postcss-styled-syntax", 4 | "plugins": ["stylelint-plugin-styled-components"], 5 | "rules": { 6 | "plugin/styled-components-enforce-ampersand": true, 7 | "named-grid-areas-no-invalid": null 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TheCyberHUB 6 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | www.thecyberhub.org -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Use an official Node.js base image 2 | FROM node:latest 3 | 4 | # Set the working directory in the container 5 | WORKDIR /app 6 | 7 | # Copy package.json and package-lock.json to the container 8 | COPY package*.json ./ 9 | 10 | # Install dependencies 11 | RUN npm install 12 | 13 | # Copy the entire project to the container 14 | COPY . . 15 | 16 | # Build the application for production 17 | RUN npm run build 18 | 19 | # Install http-server package 20 | RUN npm install -g http-server 21 | 22 | # Expose the port that the application will run on 23 | EXPOSE 8080 24 | 25 | # Start the application using http-server 26 | CMD ["http-server", "dist"] -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 TheCyberHUB 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 | -------------------------------------------------------------------------------- /example.env: -------------------------------------------------------------------------------- 1 | VITE_WEB_ENV=development 2 | VITE_API_URL=https://dev.api.thecyberhub.org -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TheCyberHUB 6 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | Sitemap: https://www.thecyberhub.org/sitemap.xml -------------------------------------------------------------------------------- /src/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "./components/Dashboard/Profile/ProfileElements"; 3 | 4 | const NotFound = ({ 5 | title = "404 - Page Not Found", 6 | description = "Sorry, the page you are looking for could not be found.", 7 | }) => { 8 | return ( 9 | 17 |

{title}

18 |

{description}

19 | 20 | ); 21 | }; 22 | 23 | export default NotFound; 24 | -------------------------------------------------------------------------------- /src/assets/ComputerNetwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/ComputerNetwork.png -------------------------------------------------------------------------------- /src/assets/ImagesAreInTheCloud: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/ImagesAreInTheCloud -------------------------------------------------------------------------------- /src/assets/Timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/Timeline.png -------------------------------------------------------------------------------- /src/assets/greenBG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/greenBG.png -------------------------------------------------------------------------------- /src/assets/images/TheCyberHUB-Desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/images/TheCyberHUB-Desktop.png -------------------------------------------------------------------------------- /src/assets/images/TheCyberHUB_logo_outlined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/images/TheCyberHUB_logo_outlined.png -------------------------------------------------------------------------------- /src/assets/images/certificate-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/images/certificate-bg.png -------------------------------------------------------------------------------- /src/assets/images/homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/images/homepage.png -------------------------------------------------------------------------------- /src/assets/images/th3cyb3rhub-fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/images/th3cyb3rhub-fav.png -------------------------------------------------------------------------------- /src/assets/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/loading.gif -------------------------------------------------------------------------------- /src/assets/underMaintenance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/assets/underMaintenance.png -------------------------------------------------------------------------------- /src/components/AIChat/Prompts/PromptCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const PromptCard = ({ prompt, handleSendDummyMessage, index }) => { 4 | return ( 5 | 17 | ); 18 | }; 19 | 20 | export default PromptCard; 21 | -------------------------------------------------------------------------------- /src/components/AIChat/Prompts/Prompts.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import promptsData from "./prompts.json"; 3 | import PromptCard from "./PromptCard"; 4 | 5 | const Prompts = ({ handleSendDummyMessage }) => { 6 | const [prompts, setPrompts] = useState([]); 7 | 8 | useEffect(() => { 9 | // Shuffle the prompts array 10 | const shuffledPrompts = promptsData.sort(() => Math.random() - 0.5).slice(0, 6); 11 | setPrompts(shuffledPrompts); 12 | }, []); // Empty dependency array ensures the effect runs only once 13 | 14 | return ( 15 |
16 | {prompts.map((prompt, index) => ( 17 | 18 | ))} 19 |
20 | ); 21 | }; 22 | 23 | export default Prompts; 24 | -------------------------------------------------------------------------------- /src/components/AdminDashboard/AdminDashboard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 3 | import { DashboardContainer } from "src/components/Dashboard/DashboardElements"; 4 | import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance"; 5 | import apiStatus from "src/features/apiStatus"; 6 | import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner"; 7 | 8 | const AdminDashboard = () => { 9 | const { isApiLoading, isApiWorking } = apiStatus(); 10 | // const [isLoading, setIsLoading] = useState(false); 11 | 12 | if (isApiLoading) return ; 13 | 14 | if (!isApiWorking) return ; 15 | 16 | return ( 17 | 18 | {/* */} 19 | 20 | ); 21 | }; 22 | 23 | export default AdminDashboard; 24 | -------------------------------------------------------------------------------- /src/components/AdminDashboard/AdminDashboardSidebar/AdminDashbaordSidebarElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { MdOutlineEventNote } from "react-icons/md"; 3 | import { BiHomeCircle } from "react-icons/bi"; 4 | 5 | const createStyledIcon = (IconComponent) => { 6 | return styled(IconComponent)` 7 | font-size: 20px; 8 | `; 9 | }; 10 | 11 | export const MdOutlineEventNoteIcon = createStyledIcon(MdOutlineEventNote); 12 | export const BiHomeCircleIcon = createStyledIcon(BiHomeCircle); 13 | -------------------------------------------------------------------------------- /src/components/AdminDashboard/AdminDashboardSidebar/AdminDashboardSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BiHomeCircleIcon, MdOutlineEventNoteIcon } from "./AdminDashbaordSidebarElements"; 3 | import GeneralDashboardSidebar from "src/components/Common/GeneralDashboardSidebar"; 4 | 5 | const AdminDashboardSidebar = ({ userDetail }) => { 6 | const sidebarItems = [ 7 | { to: "/", icon: , label: "Home" }, 8 | { to: "/admin-dashboard/manage-community-events", icon: , label: "Community Events" }, 9 | ]; 10 | 11 | return ; 12 | }; 13 | 14 | export default AdminDashboardSidebar; 15 | -------------------------------------------------------------------------------- /src/components/AdminDashboard/ManageCommunityEvents/ManageCommunityEventsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { AiFillClockCircle, AiOutlineCloseCircle, AiOutlineFieldTime } from "react-icons/ai"; 3 | import { BiUserPlus } from "react-icons/bi"; 4 | import { TbEditCircle, TbRestore } from "react-icons/tb"; 5 | 6 | export const CommunityEventsContainer = styled.div` 7 | width: 100%; 8 | `; 9 | const createStyledIcon = (IconComponent) => { 10 | return styled(IconComponent)` 11 | width: 20px; 12 | height: 20px; 13 | `; 14 | }; 15 | 16 | export const AiFillClockCircleIcon = createStyledIcon(AiFillClockCircle); 17 | export const TbEditCircleIcon = createStyledIcon(TbEditCircle); 18 | export const TbRestoreIcon = createStyledIcon(TbRestore); 19 | export const BiUserPlusIcon = createStyledIcon(BiUserPlus); 20 | export const AiOutlineCloseCircleIcon = createStyledIcon(AiOutlineCloseCircle); 21 | export const AiOutlineFieldTimeIcon = createStyledIcon(AiOutlineFieldTime); 22 | -------------------------------------------------------------------------------- /src/components/Beta/Test/FetchFromGitHub.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import PreviewMarkdown from "src/components/Blogs/ViewBlog/PreviewMarkdown"; 3 | 4 | const FetchFromGitHub = () => { 5 | const [content, setContent] = useState(""); 6 | 7 | useEffect(() => { 8 | async function fetchData() { 9 | const res = await fetch("https://raw.githubusercontent.com/th3cyb3rhub/hackliner/main/README.md"); 10 | const data = await res.text(); 11 | setContent(data); 12 | } 13 | fetchData(); 14 | }, []); 15 | 16 | return ( 17 |
18 | 19 |
20 | ); 21 | }; 22 | 23 | export default FetchFromGitHub; 24 | -------------------------------------------------------------------------------- /src/components/Blogs/BlogCard/LoadingBlogCardElements.jsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from "styled-components"; 2 | export const lineLoading = keyframes` 3 | 0% { 4 | width: 0; 5 | } 6 | 100% { 7 | width: 100%; 8 | } 9 | `; 10 | export const LoadingBlogContainer = styled.div` 11 | height: 250px; 12 | `; 13 | 14 | export const animate = keyframes` 15 | 0% { 16 | transform: translateX(-100%); 17 | } 18 | 100% { 19 | transform: translateX(100%); 20 | } 21 | `; 22 | 23 | export const LoadingContainer = styled.div` 24 | background: #232323; 25 | width: 100%; 26 | margin: 0 0 10px; 27 | overflow: hidden; 28 | border-radius: 5px; 29 | `; 30 | 31 | export const LoadingLine = styled.div` 32 | overflow: hidden; 33 | height: ${(props) => props.height}px; 34 | border-radius: 5px; 35 | background-color: #414141; 36 | animation: ${animate} 2s ease-in-out infinite; 37 | `; 38 | 39 | export const LoadingImage = styled.div` 40 | overflow: hidden; 41 | height: ${(props) => props.height || props.width * 0.6}px; 42 | background-color: #414141; 43 | animation: ${animate} 2s ease-in-out infinite; 44 | `; 45 | -------------------------------------------------------------------------------- /src/components/Blogs/BlogFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Option, Select } from "src/components/Blogs/BlogsElements"; 4 | 5 | const BlogFilter = ({ selectedBlogs, handleSelectedBlogs }) => { 6 | return ( 7 |
8 |

Filter

9 | 13 |
14 | ); 15 | }; 16 | 17 | export default BlogFilter; 18 | -------------------------------------------------------------------------------- /src/components/Blogs/BlogsRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import { Blogs, CreateBlog, EditBlog, NotFound, SingleBlog, UserBlogs } from "src/components/index"; 4 | import CreateBlogV2 from "src/components/Blogs/ManageBlogs/CreateBlogV2/CreateBlogV2.jsx"; 5 | 6 | const BlogsRoute = () => { 7 | return ( 8 | 9 | } /> 10 | } /> 11 | } /> 12 | 13 | } /> 14 | 15 | } /> 16 | } /> 17 | 18 | {/* }/> */} 19 | } /> 20 | 21 | ); 22 | }; 23 | 24 | export default BlogsRoute; 25 | -------------------------------------------------------------------------------- /src/components/Blogs/BlogsTagsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const TagsContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: flex-start; 7 | align-items: flex-start; 8 | text-align: start; 9 | padding: 25px; 10 | width: 100%; 11 | max-width: 250px; 12 | height: auto; 13 | background: #101010; 14 | margin-bottom: 15px; 15 | border-radius: 5px; 16 | `; 17 | 18 | export const Tags = styled.div` 19 | display: flex; 20 | font-size: 150%; 21 | flex-wrap: wrap; 22 | word-wrap: break-word; 23 | 24 | @media screen and (width <= 600px) { 25 | flex-wrap: wrap; 26 | padding: 15px 0; 27 | width: 100%; 28 | font-size: 10px; 29 | } 30 | `; 31 | 32 | export const Tag = styled.p` 33 | background: #252525; 34 | padding: 0 10px; 35 | margin: 5px 10px 5px 0; 36 | border-radius: 5px; 37 | cursor: pointer; 38 | font-size: 16px; 39 | transition: transform 0.3s; 40 | flex-wrap: wrap; 41 | word-wrap: break-word; 42 | word-break: break-word; 43 | overflow-wrap: break-word; 44 | 45 | &:hover { 46 | transform: scale(1.03); 47 | } 48 | `; 49 | -------------------------------------------------------------------------------- /src/components/Blogs/ManageBlogs/CreateBlogV2/AddBlogTags.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconAdd, TagInput, TagsInput } from "src/components/Blogs/ManageBlogs/CreateBlogV2/CreateBlogV2Elements"; 3 | 4 | const AddBlogTags = ({ tags, setTags }) => { 5 | const handleTagChange = (index, value) => { 6 | const newTags = [...tags]; 7 | newTags[index] = value; 8 | setTags(newTags); 9 | }; 10 | 11 | const handleAddTag = () => { 12 | setTags([...tags, ""]); 13 | }; 14 | 15 | return ( 16 | 17 | {tags?.map((tag, index) => ( 18 | handleTagChange(index, e.target.value)} 25 | placeholder={"tag here"} 26 | /> 27 | ))} 28 | + 29 | 30 | ); 31 | }; 32 | 33 | export default AddBlogTags; 34 | -------------------------------------------------------------------------------- /src/components/Blogs/ManageBlogs/CreateBlogV2/AddBlogTagsElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Blogs/ManageBlogs/CreateBlogV2/AddBlogTagsElements.jsx -------------------------------------------------------------------------------- /src/components/Blogs/ManageBlogs/EditBlog/EditBlogElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { FcAddImage } from "react-icons/fc"; 3 | 4 | export const SectionUpdateBlog = styled.div` 5 | display: flex; 6 | flex-direction: column; 7 | `; 8 | export const UpdateBlogContainer = styled.div` 9 | display: flex; 10 | flex-direction: column; 11 | min-width: 1200px; 12 | `; 13 | export const AddImage = styled(FcAddImage)` 14 | font-size: 25px; 15 | cursor: pointer; 16 | `; 17 | -------------------------------------------------------------------------------- /src/components/Blogs/PreviewBlogContent.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ContentSection, PreviewMarkdownHeading, Tag, Tags } from "./ViewBlog/ViewBlogElements"; 3 | import PreviewMarkdown from "src/components/Blogs/ViewBlog/PreviewMarkdown"; 4 | import { useLocation } from "react-router-dom"; 5 | 6 | const PreviewBlogContent = (props) => { 7 | const { pathname } = useLocation(); 8 | return ( 9 |
10 | {props.title !== "" ? props.title : "Please add a Heading"} 11 | 12 | 13 | 14 | 15 | {pathname === "/dashboard/blogs/create" 16 | ? props.tags.length !== 0 && props.tags[0] !== "" 17 | ? props.tags.split(/,\s*/).map((tag, id) => {tag}) 18 | : "Please add some Tags" 19 | : props?.tags?.length !== 0 && props?.tags[0] !== "" 20 | ? props.tags.map((tag, id) => {tag}) 21 | : "Please add some Tags"} 22 | 23 |
24 | ); 25 | }; 26 | 27 | export default PreviewBlogContent; 28 | -------------------------------------------------------------------------------- /src/components/Blogs/SingleBlog/ReactionsBlog.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Blogs/SingleBlog/ReactionsBlog.jsx -------------------------------------------------------------------------------- /src/components/Blogs/SingleBlog/ReactionsBlogElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Blogs/SingleBlog/ReactionsBlogElements.jsx -------------------------------------------------------------------------------- /src/components/Blogs/SingleBlog/SingleBlog.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 3 | import ViewBlog from "src/components/Blogs/ViewBlog/ViewBlog"; 4 | import { ContainerSingleBlog } from "src/components/Blogs/SingleBlog/SingleBlogElements"; 5 | 6 | const SingleBlog = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default SingleBlog; 17 | -------------------------------------------------------------------------------- /src/components/Blogs/SingleBlog/SingleBlogElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerSingleBlog = styled.div` 4 | display: flex; 5 | justify-content: center; 6 | flex-direction: row; 7 | width: 100%; 8 | max-width: 1500px; 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/Blogs/TrendingBlogs/TrendingBlogs.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TrendingBlogCard from "src/components/Blogs/TrendingBlogs/TrendingBlogCard"; 3 | import { ComponentTrendingBlogs } from "src/components/Blogs/TrendingBlogs/TrendingBlogsElements"; 4 | import forumData from "src/components/Forum/ForumData"; 5 | 6 | const TrendingBlogs = () => { 7 | return ( 8 | 9 |

Trending Blogs

10 | {"// Dummy Data //"} 11 | {forumData.map((item, id) => ( 12 | 23 | ))} 24 | 25 | ); 26 | }; 27 | 28 | export default TrendingBlogs; 29 | -------------------------------------------------------------------------------- /src/components/Blogs/TrendingBlogs/TrendingBlogsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ComponentTrendingBlogs = styled.div` 4 | text-align: center; 5 | `; 6 | -------------------------------------------------------------------------------- /src/components/Blogs/ViewBlog/PreviewMarkdown.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ContentReactMarkdown } from "src/components/Blogs/ViewBlog/ViewBlogElements"; 3 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; 4 | import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; 5 | 6 | const PreviewMarkdown = (props) => { 7 | return ( 8 | 14 | {String(children).replace(/\n$/, "")} 15 | 16 | ) : ( 17 | 18 | {children} 19 | 20 | ); 21 | }, 22 | }} 23 | > 24 | {props.content !== "" ? props.content : "PLease add Some Content"} 25 | 26 | ); 27 | }; 28 | 29 | export default PreviewMarkdown; 30 | -------------------------------------------------------------------------------- /src/components/Blogs/util.js: -------------------------------------------------------------------------------- 1 | export function encodeURL(title) { 2 | return title 3 | ?.replace(/[^a-zA-Z0-9\s]/g, "") 4 | .split(" ") 5 | .join("-") 6 | .toLowerCase(); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/CTFRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import { CertificateCard, CTF, NotFound } from "src/components/index"; 4 | import CreateCTF from "./CreateCTF"; 5 | import MainPage from "./CtFPage/MainPage"; 6 | import Team from "src/components/CaptureTheFlag/Team/Team.jsx"; 7 | 8 | const CtfRoute = () => { 9 | return ( 10 | 11 | } /> 12 | } /> 13 | } /> 14 | } /> 15 | 16 | } /> 17 | } /> 18 | 19 | ); 20 | }; 21 | 22 | export default CtfRoute; 23 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/CtFPage/QuestionAnswerComponentElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Button = styled.button` 4 | background-color: transparent; 5 | padding-right: 30px; 6 | padding-left: 30px; 7 | border: 1px solid #ff6b08; 8 | color: #ff6b08; 9 | border-radius: 3px; 10 | margin-left: 10px; 11 | 12 | &:hover { 13 | background-color: #ff6b08; 14 | color: white; 15 | border-color: white; 16 | } 17 | `; 18 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/SingleCTF/CtfRegister.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ButtonCTFRegister, ChallengeName, CTFRegistration } from "./SingleCTFElements"; 3 | 4 | const CtfRegister = ({ challenge, handleRegister }) => { 5 | return ( 6 | 7 | 12 | {challenge?.challengeName} 13 | 14 |

Register and Build your team to participate in this challenge

15 | Register Now 16 | 17 | ); 18 | }; 19 | 20 | export default CtfRegister; 21 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/SingleCTF/CtfTeam.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Team from "src/components/CaptureTheFlag/Team/Team"; 3 | import TeamChat from "src/components/CaptureTheFlag/Team/TeamChat"; 4 | 5 | const CtfTeam = ({ teams, isTeamEdit }) => { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | }; 13 | 14 | export default CtfTeam; 15 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/SingleCTF/CtfTimeToStart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ChallengeName } from "./SingleCTFElements"; 3 | import TimeToStart from "src/components/CaptureTheFlag/TimeToStart"; 4 | 5 | const CtfTimeToStart = ({ challenge }) => { 6 | return ( 7 |
8 | {challenge?.challengeName} 9 | 10 |

Register and Build your team to participate in this challenge

11 |
12 | ); 13 | }; 14 | 15 | export default CtfTimeToStart; 16 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/SingleCTF/GetCertificateElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const GetCertificateContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | background: #0c0c0c; 9 | padding: 25px; 10 | border-radius: 10px; 11 | width: 100%; 12 | text-align: center; 13 | `; 14 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/Team/TeamChat.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const TeamChat = () => { 4 | return
Team Chat
; 5 | }; 6 | 7 | export default TeamChat; 8 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/TimeToStart.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | const TimeToStart = ({ ctfDate }) => { 4 | const [timeRemaining, setTimeRemaining] = useState({ hours: 0, minutes: 0, seconds: 0 }); 5 | 6 | useEffect(() => { 7 | const intervalId = setInterval(() => { 8 | const now = new Date().getTime(); 9 | const targetTime = new Date(ctfDate).getTime(); 10 | const timeDifference = targetTime - now; 11 | const hours = Math.floor(timeDifference / (1000 * 60 * 60)); 12 | const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); 13 | const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); 14 | setTimeRemaining({ hours, minutes, seconds }); 15 | }, 1000); 16 | 17 | return () => { 18 | clearInterval(intervalId); 19 | }; 20 | }, [ctfDate]); 21 | 22 | return ( 23 |

24 | CTF will start in {timeRemaining.hours} hours {timeRemaining.minutes} minutes {timeRemaining.seconds} 25 | seconds 26 |

27 | ); 28 | }; 29 | 30 | export default TimeToStart; 31 | -------------------------------------------------------------------------------- /src/components/CaptureTheFlag/createCertificate.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/CaptureTheFlag/createCertificate.js -------------------------------------------------------------------------------- /src/components/Chat/Avatar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const Avatar = ({ userId, username, online }) => { 3 | const colors = [ 4 | "bg-teal-500", 5 | "bg-red-500", 6 | "bg-green-500", 7 | "bg-purple-500", 8 | "bg-blue-500", 9 | "bg-yellow-500", 10 | "bg-orange-500", 11 | "bg-cyan-500", 12 | "bg-amber-500", 13 | "bg-emerald-500", 14 | "bg-gray-500", 15 | "bg-red-500", 16 | "bg-amber-500", 17 | ]; 18 | 19 | const userIdBase10 = parseInt(userId.substring(10), 16); 20 | const colorIndex = userIdBase10 % colors.length; 21 | const color = colors[colorIndex]; 22 | 23 | return ( 24 |
25 |
{username[0]}
26 | {online && ( 27 |
28 | )} 29 | {!online && ( 30 |
31 | )} 32 |
33 | ); 34 | }; 35 | 36 | export default Avatar; 37 | -------------------------------------------------------------------------------- /src/components/Chat/Chat/ChatHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { HiUserGroup } from "react-icons/hi"; 3 | import { SlOptionsVertical } from "react-icons/sl"; 4 | import { ChatHeaderContainer, ChatHeaderInfo } from "./ChatHeaderElements"; 5 | 6 | const ChatHeader = ({ hideSidebar, setHideSidebar }) => { 7 | return ( 8 | 9 | { 12 | setHideSidebar(!hideSidebar); 13 | }} 14 | /> 15 | Welcome to Chat 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default ChatHeader; 22 | -------------------------------------------------------------------------------- /src/components/Chat/Chat/ChatHeaderElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ChatHeaderContainer = styled.div` 4 | width: 100%; 5 | position: relative; 6 | display: flex; 7 | align-items: center; 8 | justify-content: space-between; 9 | background: #121212; 10 | padding: 10px; 11 | border-radius: 10px; 12 | border-bottom: 1px solid #252525; 13 | `; 14 | 15 | export const ChatHeaderInfo = styled.div` 16 | margin-left: 15px; 17 | color: #f5f5f5; 18 | `; 19 | -------------------------------------------------------------------------------- /src/components/Chat/ChatArea/ChatArea.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ChatContainer, LeftNav, RightNav } from "src/components/Chat/Chat/ChatElement"; 3 | import { FaPhoneAlt, FaVideo, FaUserCircle } from "react-icons/fa"; 4 | 5 | const ChatArea = ({ name }) => { 6 | return ( 7 | 8 | {name} 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default ChatArea; 19 | -------------------------------------------------------------------------------- /src/components/Chat/Contact.jsx: -------------------------------------------------------------------------------- 1 | import Avatar from "./Avatar.jsx"; 2 | import React from "react"; 3 | 4 | export default function Contact({ id, username, onClick, selected, online }) { 5 | return ( 6 |
onClick(id)} 9 | className={`border-b border-gray-800 rounded-lg flex items-center gap-2 cursor-pointer ${ 10 | selected ? "bg-neutral-800 text-white" : "" 11 | }`} 12 | > 13 | {selected &&
} 14 |
15 | 16 | {username?.slice(0, 15)} 17 |
18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Chat/DummyChat/ChatMessageSelf.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MessageContainerSelf, MessageContentSelf, SenderImage, Timestamp } from "./ChatMessageElement"; 3 | 4 | const ChatMessageSelf = ({ username, message, sender, recipient, image, user }) => { 5 | return ( 6 | 7 | 13 | 14 | {message || ""} 15 | 16 | 26 | {/* {time} */} 27 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ChatMessageSelf; 34 | -------------------------------------------------------------------------------- /src/components/Chat/SendMessage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MessageInputContainer, Message, Input, InputGroup } from "./Chat/ChatElement"; 3 | import { BiSend } from "react-icons/bi"; 4 | 5 | const SendMessage = ({ ws, selectedUserId, setMessages, newMessageText, setNewMessageText, sendMessage }) => { 6 | return ( 7 | 8 | 9 | setNewMessageText(ev.target.value)} 12 | placeholder="Type your message here" 13 | /> 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | }; 21 | 22 | export default SendMessage; 23 | -------------------------------------------------------------------------------- /src/components/Chat/encryptData.js: -------------------------------------------------------------------------------- 1 | import CryptoJS from "crypto-js"; 2 | 3 | export const encryptData = (data) => { 4 | const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), "thecyberworld").toString(); 5 | return encryptedData; 6 | }; 7 | 8 | export const decryptData = (encryptedData) => { 9 | const bytes = CryptoJS.AES.decrypt(encryptedData, "thecyberworld"); 10 | const decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8)); 11 | 12 | return decryptedData; 13 | }; 14 | -------------------------------------------------------------------------------- /src/components/ChatBot/Widgets/Assists/AssistLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AssistLinksData } from "./AssistLinksData"; 3 | 4 | import { LinkList } from "./AssistElements"; 5 | 6 | export default function AssistLinks(props) { 7 | const linkMarkup = AssistLinksData.map((data) => { 8 | return data.name === props.optionName 9 | ? data.linkOptions.map((link) => ( 10 |
  • 11 | 12 | {link.text} 13 | 14 |
    • 15 | )) 16 | : ""; 17 | }); 18 | 19 | return ( 20 | 21 | {linkMarkup.map((item, id) => ( 22 |
    {item}
    23 | ))} 24 |     25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/ChatBot/Widgets/BotComponents/ChatBotAvatar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { getCdnAssets } from "src/features/apiUrl"; 3 | const logoThecyberworld = `${getCdnAssets}/images/ThecyberworldLogo/Thecyberworld_logo_outlined.png`; 4 | 5 | export default function ChatBotAvatar() { 6 | return ( 7 |
    8 |
    9 | BotAvatar 10 |
    11 |
    12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Common/CodeSyntaxHighlighter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SyntaxHighlighter from "react-syntax-highlighter"; 3 | import { a11yDark } from "react-syntax-highlighter/src/styles/hljs"; 4 | 5 | const CodeSyntaxHighlighter = ({ code }) => { 6 | return ( 7 | 28 | {code} 29 | 30 | ); 31 | }; 32 | 33 | export default CodeSyntaxHighlighter; 34 | -------------------------------------------------------------------------------- /src/components/Common/DateDisplay/DateDisplay.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DateDisplay from "./DateDisplay"; 3 | import { DateDisplayContainer } from "./DateDisplayElements"; 4 | 5 | export default { 6 | title: "Components/DateDisplay/DateDisplay", 7 | component: DateDisplay, 8 | argTypes: { 9 | rightBorder: { control: "boolean" }, 10 | time: { control: "date" }, 11 | isCanBeToday: { control: "boolean" }, 12 | }, 13 | }; 14 | 15 | const Template = (args) => ( 16 | 17 | 18 | 19 | ); 20 | 21 | export const Default = Template.bind({}); 22 | Default.args = { 23 | rightBorder: false, 24 | time: new Date().toISOString(), 25 | isCanBeToday: true, 26 | }; 27 | 28 | export const WithRightBorder = Template.bind({}); 29 | WithRightBorder.args = { 30 | rightBorder: true, 31 | time: new Date().toISOString(), 32 | isCanBeToday: true, 33 | }; 34 | 35 | export const CustomDate = Template.bind({}); 36 | CustomDate.args = { 37 | rightBorder: false, 38 | time: "2024-05-20T00:00:00Z", 39 | isCanBeToday: false, 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/Common/DateDisplay/DateDisplayElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const DateDisplayContainer = styled.div` 4 | .date { 5 | font-weight: 600; 6 | font-size: 1.125rem; 7 | flex-basis: 10%; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | flex-direction: column; 12 | border-right: ${(props) => (props.rightBorder ? "1px solid #f0f0f0" : "")}; 13 | padding: ${(props) => (props.rightBorder ? "0rem 1.5rem 0rem 0.75rem" : "")}; 14 | 15 | p { 16 | text-align: center; 17 | } 18 | 19 | &.today-date { 20 | color: #e45221; 21 | } 22 | 23 | .date-digit-container { 24 | display: flex; 25 | min-width: 110px; 26 | justify-content: space-between; 27 | } 28 | 29 | .date-digit-day { 30 | min-width: 45px; 31 | text-align: center; 32 | } 33 | 34 | .date-digit { 35 | font-size: 2rem; 36 | font-weight: 800; 37 | } 38 | 39 | .date-year { 40 | font-size: 1rem; 41 | font-weight: 500; 42 | } 43 | } 44 | `; 45 | -------------------------------------------------------------------------------- /src/components/Common/DateDisplay/index.js: -------------------------------------------------------------------------------- 1 | import DateDisplay from "./DateDisplay"; 2 | export default DateDisplay; 3 | -------------------------------------------------------------------------------- /src/components/Common/DurationDisplay/DurationDisplay.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DurationDisplay from "./DurationDisplay"; 3 | 4 | export default { 5 | title: "Components/DurationDisplay/DurationDisplay", 6 | component: DurationDisplay, 7 | argTypes: { 8 | startTime: { control: "date" }, 9 | endTime: { control: "date" }, 10 | reschedule: { control: "boolean" }, 11 | showDate: { control: "boolean" }, 12 | }, 13 | }; 14 | 15 | const Template = (args) => ; 16 | 17 | export const Default = Template.bind({}); 18 | Default.args = { 19 | startTime: "2024-05-20", 20 | endTime: "2024-05-20", 21 | reschedule: false, 22 | showDate: false, 23 | }; 24 | 25 | export const WithReschedule = Template.bind({}); 26 | WithReschedule.args = { 27 | startTime: "2024-05-20T08:00:00", 28 | endTime: "2024-05-20T12:00:00", 29 | reschedule: true, 30 | showDate: false, 31 | }; 32 | -------------------------------------------------------------------------------- /src/components/Common/DurationDisplay/DurationDisplayElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { AiFillClockCircle, AiFillExclamationCircle } from "react-icons/ai"; 3 | 4 | export const DurationDisplayContainer = styled.div` 5 | display: flex; 6 | align-items: center; 7 | margin-bottom: 0.75rem; 8 | 9 | &:last-child { 10 | margin-bottom: 0; 11 | } 12 | 13 | p { 14 | margin: 0 0.75rem; 15 | } 16 | 17 | .text-over-flow { 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | width: 158px; 22 | } 23 | `; 24 | export const DurationRequest = styled.div` 25 | color: #e24612; 26 | `; 27 | 28 | const createStyledIcon = (IconComponent) => { 29 | return styled(IconComponent)` 30 | width: 20px; 31 | height: 20px; 32 | `; 33 | }; 34 | 35 | export const AiFillClockCircleIcon = createStyledIcon(AiFillClockCircle); 36 | export const AiFillExclamationCircleIcon = createStyledIcon(AiFillExclamationCircle); 37 | -------------------------------------------------------------------------------- /src/components/Common/DurationDisplay/index.js: -------------------------------------------------------------------------------- 1 | import DurationDisplay from "./DurationDisplay"; 2 | 3 | export default DurationDisplay; 4 | -------------------------------------------------------------------------------- /src/components/Common/GeneralDashboardSidebar/index.js: -------------------------------------------------------------------------------- 1 | import GeneralDashboardSidebar from "./GeneralDashboardSidebar"; 2 | export default GeneralDashboardSidebar; 3 | -------------------------------------------------------------------------------- /src/components/Common/HeadingBanner/HeadingBanner.jsx: -------------------------------------------------------------------------------- 1 | import { InternshipHeader, InternshipHeading } from "./HeadingBannerElements"; 2 | import React from "react"; 3 | 4 | const HeadingBanner = ({ heading }) => { 5 | return ( 6 | 7 | {heading} 8 | 9 | ); 10 | }; 11 | 12 | export default HeadingBanner; 13 | -------------------------------------------------------------------------------- /src/components/Common/HeadingBanner/HeadingBannerElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const InternshipHeader = styled.div` 4 | background: #090909; 5 | width: 100%; 6 | height: 100%; 7 | min-height: 100px; 8 | padding: 20px; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | 15 | @media screen and (width <= 768px) { 16 | padding: 10px; 17 | } 18 | `; 19 | 20 | export const InternshipHeading = styled.h1` 21 | font-size: 5rem; 22 | 23 | /* font-style: oblique; */ 24 | font-family: "Cascadia Code", monospace; 25 | 26 | @media screen and (width <= 768px) { 27 | transition: 0.2s ease-in-out; 28 | font-size: 3rem; 29 | } 30 | 31 | transition: 0.2s ease-in-out; 32 | 33 | @media screen and (width <= 500px) { 34 | transition: 0.2s ease-in-out; 35 | font-size: 2rem; 36 | } 37 | `; 38 | -------------------------------------------------------------------------------- /src/components/Common/ImageUpload/ImagePreview.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ImageContainer, ImagesContainer, PreviewImage, RemoveButton } from "./ImageElements"; 3 | 4 | const ImagePreview = ({ files, onRemove }) => { 5 | const closeIcon = <>✕; 6 | 7 | return ( 8 | 9 | {files?.map((file, index) => ( 10 | 11 | 12 | onRemove(index)}>{closeIcon} 13 | 14 | ))} 15 | 16 | ); 17 | }; 18 | export default ImagePreview; 19 | -------------------------------------------------------------------------------- /src/components/Common/ImageUpload/index.js: -------------------------------------------------------------------------------- 1 | import ImageInput from "./ImageInput"; 2 | import ImagePreview from "./ImagePreview"; 3 | import useUploadImages from "./useUploadImages"; 4 | 5 | export { ImageInput, ImagePreview, useUploadImages }; 6 | -------------------------------------------------------------------------------- /src/components/Common/InputEditor/InputEditor.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { InputEditorContainer, InputEditorTextarea, InputEditorTheInput } from "./InputEditorElements"; 3 | 4 | const InputEditor = ({ content, label, onCopyChanges, placeholder, inputType, isTextarea = false, textAreaHeight }) => { 5 | const [value, setValue] = useState(""); 6 | 7 | useEffect(() => { 8 | setValue(content); 9 | }, [content, label]); 10 | 11 | const handleChange = (e) => { 12 | setValue(e.target.value); 13 | onCopyChanges(label, e.target.value); 14 | }; 15 | 16 | return ( 17 | 18 | {isTextarea ? ( 19 | 26 | ) : ( 27 | 28 | )} 29 | 30 | ); 31 | }; 32 | export default InputEditor; 33 | -------------------------------------------------------------------------------- /src/components/Common/InputEditor/InputEditorElements.jsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components"; 2 | 3 | export const InputEditorContainer = styled.div` 4 | width: 100%; 5 | `; 6 | const InputEditorField = css` 7 | padding: 7px 12px; 8 | color: white; 9 | width: 100%; 10 | border-radius: 3px; 11 | border: 1px solid #111; 12 | box-shadow: 0 0 0 2px #090909; 13 | outline: none; 14 | text-transform: capitalize; 15 | background-color: #090909; 16 | font: 17 | 16px Poppins, 18 | sans-serif; 19 | line-height: 1; 20 | `; 21 | export const InputEditorTheInput = styled.input` 22 | ${InputEditorField} 23 | `; 24 | 25 | export const InputEditorTextarea = styled.textarea` 26 | ${InputEditorField} 27 | resize: none; 28 | height: ${(props) => props.textAreaHeight}; 29 | `; 30 | 31 | export const InputEditorLabel = styled.h2` 32 | text-transform: capitalize; 33 | text-align: center; 34 | color: #4f4f4f; 35 | `; 36 | -------------------------------------------------------------------------------- /src/components/Common/InputEditor/index.jsx: -------------------------------------------------------------------------------- 1 | import InputEditor from "./InputEditor"; 2 | export default InputEditor; 3 | -------------------------------------------------------------------------------- /src/components/Common/LoginBox.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const LoginBox = (user) => { 4 | if (user) return
    Please Login before you can access this page
    ; 5 | }; 6 | 7 | export default LoginBox; 8 | -------------------------------------------------------------------------------- /src/components/Common/MarkdownEditor/MarkdownEditor.css: -------------------------------------------------------------------------------- 1 | .w-md-editor-text-pre > code, 2 | .w-md-editor-text-input { 3 | font-size: 18px !important; 4 | line-height: 24px !important; 5 | } 6 | .image { 7 | max-height: 500px; 8 | } 9 | .preview { 10 | max-height: calc(100vh - 550px - 3rem); 11 | overflow-y: auto; 12 | } 13 | 14 | code .token { 15 | padding: 0; 16 | font-size: 18px; 17 | } 18 | 19 | code .tag + .tag { 20 | margin: 0; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Common/MarkdownEditor/MarkdownEditorElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const MarkdownContainer = styled.div` 4 | display: flex; 5 | flex: 1; 6 | flex-direction: column; 7 | `; 8 | 9 | export const MarkdownEditorContainer = styled.div` 10 | border: 1px solid #4f4f4f; 11 | border-radius: 5px; 12 | background-color: #090909; 13 | color: #f5f5f5; 14 | font-size: 14px; 15 | overflow: auto; 16 | height: 100%; 17 | min-height: 500px; 18 | max-height: 1000px; 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: flex-start; 22 | align-items: flex-start; 23 | 24 | &:focus { 25 | outline: none; 26 | } 27 | 28 | .md-editor { 29 | width: 100%; 30 | min-height: 80vh; 31 | overflow: auto; 32 | font-size: 14px; 33 | background-color: #090909; 34 | color: #f5f5f5; 35 | 36 | &:focus { 37 | outline: none; 38 | } 39 | 40 | &::placeholder { 41 | color: #f5f5f5; 42 | } 43 | } 44 | `; 45 | 46 | export const MarkdownLabel = styled.h2` 47 | text-transform: capitalize; 48 | text-align: center; 49 | color: #4f4f4f; 50 | `; 51 | -------------------------------------------------------------------------------- /src/components/Common/MarkdownEditor/index.jsx: -------------------------------------------------------------------------------- 1 | import MarkdownEditor from "./MarkdownEditor"; 2 | export default MarkdownEditor; 3 | -------------------------------------------------------------------------------- /src/components/Common/ModalOptions/Options.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | color: #646464; 3 | transition: all 0.3s ease; 4 | } 5 | .icon-edit { 6 | color: #00a8ff; 7 | } 8 | 9 | .icon-delete, 10 | .icon-cancel, 11 | .icon-delete > path { 12 | color: #f14844; 13 | fill: #f14844; 14 | } 15 | 16 | .icon-save { 17 | color: #00a8ff; 18 | } 19 | .icon-options:hover { 20 | color: #00a8ff; 21 | } 22 | .icon:hover { 23 | opacity: 0.7; 24 | cursor: pointer; 25 | } 26 | .icon-not-hover-effect:hover { 27 | opacity: 1; 28 | cursor: pointer; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/Common/ModalOptions/Options.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { BsThreeDotsVertical } from "react-icons/bs"; 3 | 4 | import { OptionsMainContainer } from "./OptionsElements"; 5 | import Modal from "./Modal"; 6 | 7 | const Options = ({ onDelete, onEdit, modalContainerId }) => { 8 | const [isOpen, setIsOpen] = useState(false); 9 | 10 | const handleClickEvent = (e, option) => { 11 | e.stopPropagation(); 12 | e.preventDefault(); 13 | setIsOpen(option); 14 | }; 15 | 16 | return ( 17 | handleClickEvent(e, true)}> 18 | 19 | 26 | 27 | ); 28 | }; 29 | export default Options; 30 | -------------------------------------------------------------------------------- /src/components/Common/ModalOptions/index.js: -------------------------------------------------------------------------------- 1 | import Options from "./Options"; 2 | 3 | export default Options; 4 | -------------------------------------------------------------------------------- /src/components/Common/MultipleSelect/MultipleSelect.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Option, Select, SelectContainer } from "./MultipleSelectElements"; 3 | import styled from "styled-components"; 4 | 5 | /* 6 | optionsValuesWithLabels=[ 7 | { 8 | value: string; 9 | label: string; 10 | } 11 | ] 12 | */ 13 | const MultipleSelect = ({ selectLabel, selectedValue, onValueSelect, optionsValuesWithLabels, defaultValue }) => { 14 | const optionsDisplay = optionsValuesWithLabels.map((option) => { 15 | return ( 16 | 19 | ); 20 | }); 21 | return ( 22 | 23 | {selectLabel && {selectLabel}:} 24 | 31 | 32 | ); 33 | }; 34 | 35 | const StyledLabel = styled.label` 36 | color: #d7d7d7; 37 | `; 38 | export default MultipleSelect; 39 | -------------------------------------------------------------------------------- /src/components/Common/MultipleSelect/MultipleSelect.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MultipleSelect from "./MultipleSelect"; 3 | import { Option, SelectContainer } from "./MultipleSelectElements"; 4 | 5 | export default { 6 | title: "Components/MultipleSelect/MultipleSelect", 7 | component: MultipleSelect, 8 | }; 9 | 10 | const Template = ({ optionsValuesWithLabels, ...args }) => ( 11 | 12 | 13 | 20 | 21 | 22 | ); 23 | 24 | export const Default = Template.bind({}); 25 | Default.args = { 26 | selectLabel: "Label", 27 | selectedValue: "", 28 | defaultValue: "", 29 | optionsValuesWithLabels: [ 30 | { value: "1", label: "Option 1" }, 31 | { value: "2", label: "Option 2" }, 32 | { value: "3", label: "Option 3" }, 33 | ], 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/Common/MultipleSelect/MultipleSelectElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Select = styled.select` 4 | border: 1px solid #000; 5 | padding: 8px; 6 | font-size: 16px; 7 | width: 100%; 8 | border-radius: 4px; 9 | background: #252525; 10 | color: #d7d7d7; 11 | 12 | &:focus { 13 | outline: none; 14 | box-shadow: 0 0 0 1px #1a1c1d; 15 | } 16 | 17 | @media screen and (width <= 380px) { 18 | width: 100%; 19 | } 20 | 21 | text-transform: capitalize; 22 | `; 23 | 24 | // Option Component 25 | export const Option = styled.option` 26 | border: 1px solid #000; 27 | font-size: 16px; 28 | 29 | &:focus { 30 | outline: none; 31 | box-shadow: 0 0 0 1px #1a1c1d; 32 | } 33 | 34 | text-transform: capitalize; 35 | `; 36 | export const SelectContainer = styled.div` 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | gap: 10px; 41 | background: #131313; 42 | border-radius: 4px; 43 | padding: 0 0 0 10px; 44 | 45 | @media screen and (width <= 380px) { 46 | width: 100%; 47 | } 48 | `; 49 | -------------------------------------------------------------------------------- /src/components/Common/MultipleSelect/index.js: -------------------------------------------------------------------------------- 1 | import MultipleSelect from "./MultipleSelect"; 2 | 3 | export default MultipleSelect; 4 | -------------------------------------------------------------------------------- /src/components/Common/PopUpWindow.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { CloseButton, PopupContainer } from "src/pages/AuthPopup/AuthPopupElements"; 3 | 4 | const PopUpWindow = ({ onClose, children, customStyles }) => { 5 | const [seen, setSeen] = useState(true); 6 | 7 | const togglePop = () => { 8 | setSeen(!seen); 9 | onClose(); 10 | }; 11 | 12 | return ( 13 | 14 |
    15 | {children} 16 | 17 |
    18 |     19 | ); 20 | }; 21 | 22 | export default PopUpWindow; 23 | -------------------------------------------------------------------------------- /src/components/Common/SearchInputBox/SearchInputBox.stories.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import SearchInputBox from "./SearchInputBox"; 3 | 4 | export default { 5 | title: "Components/Search/SearchInputBox", 6 | component: SearchInputBox, 7 | }; 8 | 9 | const Template = (args) => { 10 | const [searchValue, setSearchValue] = useState(args.value || ""); 11 | const inputRef = useRef(null); 12 | 13 | const handleChange = (event) => { 14 | setSearchValue(event.target.value); 15 | args.onChange(event.target.value); 16 | }; 17 | 18 | const clearValue = () => { 19 | setSearchValue(""); 20 | args.setValue(""); 21 | inputRef.current.focus(); 22 | }; 23 | 24 | return ( 25 | 33 | ); 34 | }; 35 | 36 | export const Default = Template.bind({}); 37 | Default.args = { 38 | placeholder: "Search...", 39 | value: "", 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/Common/SearchInputBox/index.js: -------------------------------------------------------------------------------- 1 | import SearchInputBox from "./SearchInputBox"; 2 | export default SearchInputBox; 3 | -------------------------------------------------------------------------------- /src/components/Common/SocialSidebar/SidebarFilterButton.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FilterButton } from "./SidebarElements"; 3 | 4 | const SidebarFilterButton = ({ filterLabel, onClick, activeButton, id }) => { 5 | return ( 6 | onClick(id)}> 7 | {filterLabel} 8 | 9 | ); 10 | }; 11 | export default SidebarFilterButton; 12 | -------------------------------------------------------------------------------- /src/components/Common/SocialSidebar/SidebarFilterButtons.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import SidebarFilterButton from "./SidebarFilterButton"; 3 | 4 | const SidebarFilterButtons = ({ filterButtonsData, defaultButtonId = "" }) => { 5 | const [activeButton, setActiveButton] = useState(defaultButtonId); 6 | 7 | const renderButtons = filterButtonsData.map(({ filterLabel, onClick, id }) => { 8 | const handleClick = (filterId) => { 9 | setActiveButton(filterId); 10 | onClick(filterLabel); 11 | }; 12 | 13 | return ( 14 | 21 | ); 22 | }); 23 | return
    {renderButtons}
    ; 24 | }; 25 | export default SidebarFilterButtons; 26 | -------------------------------------------------------------------------------- /src/components/Common/SocialSidebar/index.js: -------------------------------------------------------------------------------- 1 | import Sidebar from "./Sidebar"; 2 | import SidebarFilterButton from "./SidebarFilterButton"; 3 | import SidebarFilterButtons from "./SidebarFilterButtons"; 4 | 5 | export { Sidebar, SidebarFilterButton, SidebarFilterButtons }; 6 | -------------------------------------------------------------------------------- /src/components/Common/ThemeContext.jsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState } from "react"; 2 | 3 | const ThemeContext = createContext(); 4 | 5 | const ThemeProvider = ({ children }) => { 6 | const [isDarkMode, setIsDarkMode] = useState(false); 7 | 8 | const toggleTheme = () => { 9 | setIsDarkMode((prevMode) => !prevMode); 10 | }; 11 | 12 | const lightTheme = { 13 | theme: "light", 14 | background: "#f5f5f5", 15 | text: "#000", 16 | primary: "gray", // Add your primary color here 17 | }; 18 | 19 | const darkTheme = { 20 | theme: "dark", 21 | background: "#000", 22 | text: "#f5f5f5", 23 | primary: "gray", // Add your primary color here 24 | }; 25 | 26 | const themes = { 27 | dark: darkTheme, 28 | light: lightTheme, 29 | }; 30 | 31 | const theme = isDarkMode ? themes.dark : themes.light; 32 | 33 | return {children}; 34 | }; 35 | 36 | export { ThemeProvider, ThemeContext }; 37 | -------------------------------------------------------------------------------- /src/components/Common/TimePickerDisplay/TimePickerDisplayElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const DisplayDate = styled.p` 4 | width: 50%; 5 | margin-right: 10px; 6 | `; 7 | export const DisplayDateContainer = styled.div` 8 | width: 100%; 9 | margin-right: 10px; 10 | `; 11 | 12 | export const TimeInputEditorContainer = styled.div` 13 | width: ${({ dateFieldType }) => (dateFieldType === "show date" || dateFieldType === "pick date" ? "45%" : "100%")}; 14 | `; 15 | 16 | export const TimeInputLabel = styled.p` 17 | margin: 0 10px; 18 | `; 19 | 20 | export const TimePickerContainer = styled.div` 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | margin-left: 10px; 25 | `; 26 | -------------------------------------------------------------------------------- /src/components/Common/TimePickerDisplay/index.js: -------------------------------------------------------------------------------- 1 | import TimePickerDisplay from "./TimePickerDisplay"; 2 | 3 | export default TimePickerDisplay; 4 | -------------------------------------------------------------------------------- /src/components/Common/dateFormat.js: -------------------------------------------------------------------------------- 1 | const dateFormat = (createdAt) => { 2 | const date = createdAt ? new Date(createdAt) : null; 3 | 4 | const options = { 5 | year: "numeric", 6 | month: "short", 7 | day: "numeric", 8 | hour: "numeric", 9 | minute: "numeric", 10 | }; 11 | 12 | return date?.toLocaleString("en-US", options); 13 | }; 14 | export default dateFormat; 15 | -------------------------------------------------------------------------------- /src/components/Common/dateFormatter.js: -------------------------------------------------------------------------------- 1 | export const dateFormatter = ({ date }) => { 2 | const currentDate = new Date(); 3 | const getMonthNameAbbreviated = (monthIndex) => { 4 | const monthsAbbreviated = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 5 | return monthsAbbreviated[monthIndex]; 6 | }; 7 | 8 | const formatDate = (date) => { 9 | const day = date.getDate(); 10 | const month = date.getMonth(); 11 | const year = date.getFullYear(); 12 | 13 | const currentYear = currentDate.getFullYear(); 14 | const isCurrentYear = year === currentYear; 15 | 16 | const monthNameAbbreviated = getMonthNameAbbreviated(month); 17 | 18 | if (isCurrentYear) { 19 | return `${day} ${monthNameAbbreviated}`; 20 | } else { 21 | return `${day} ${monthNameAbbreviated} ${year}`; 22 | } 23 | }; 24 | 25 | return formatDate(date); 26 | }; 27 | -------------------------------------------------------------------------------- /src/components/CommunityEvents/ParticipantsDisplay.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { cdnContentImagesUrl } from "src/features/apiUrl"; 3 | import { ParticipantsContainer } from "./ParticipantsDisplayElement"; 4 | 5 | const ParticipantsDisplay = ({ participants = [] }) => { 6 | return ( 7 | 8 |
    9 | {participants.map((participant, pIndex) => ( 10 | {participant?.name} 15 | ))} 16 |
    17 |     18 | ); 19 | }; 20 | export default ParticipantsDisplay; 21 | -------------------------------------------------------------------------------- /src/components/CommunityEvents/ParticipantsDisplayElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ParticipantsContainer = styled.div` 4 | .details-profile { 5 | display: flex; 6 | margin-top: 2rem; 7 | flex-wrap: wrap; 8 | height: 40px; 9 | overflow: hidden; 10 | 11 | img { 12 | width: 40px; 13 | height: 40px; 14 | object-fit: cover; 15 | border-radius: 100%; 16 | 17 | &:not(&:first-child) { 18 | margin-left: -0.8rem; 19 | } 20 | } 21 | } 22 | `; 23 | -------------------------------------------------------------------------------- /src/components/CommunityEvents/index.js: -------------------------------------------------------------------------------- 1 | import CommunityEvents from "./CommunityEvents"; 2 | export default CommunityEvents; 3 | -------------------------------------------------------------------------------- /src/components/Courses/Courses.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // import FreeCourse from "./LearningPath/FreeCourse"; 3 | import NewCourses from "./NewCourses/NewCourses"; 4 | import { CoursesContainer } from "./CoursesElements"; 5 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 6 | 7 | const Courses = () => { 8 | return ( 9 | 10 | 11 | {/* */} 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default Courses; 19 | -------------------------------------------------------------------------------- /src/components/Courses/CoursesElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const CoursesContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | gap: 25px; 7 | max-width: 1500px; 8 | width: 100%; 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/Courses/LearningPath/text.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Courses/LearningPath/text.jsx -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsBarChart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Bar } from "react-chartjs-2"; 3 | import { BarChartContainer } from "./AnalyticsBarChartElements"; 4 | import { displayMonths, allOptions as newOptions, allDatasets as newDatasets } from "./AnalyticsUtils"; 5 | import { useAnalyticsChartCustomHook } from "./useAnalyticsChartCustomHook"; 6 | import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js"; 7 | 8 | ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); 9 | 10 | export function AnalyticsBarChart() { 11 | const [chartData, chartOptions] = useAnalyticsChartCustomHook({ 12 | displayMonths: displayMonths(9), 13 | newDatasets: newDatasets.slice(0, 1), 14 | newOptions: newOptions.slice(0, 1), 15 | }); 16 | 17 | return ( 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsBarChartElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const BarChartContainer = styled.div` 4 | width: 100%; 5 | height: 100%; 6 | border: 1px solid #151414; 7 | text-align: center; 8 | `; -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsDoughnutChart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Pie } from "react-chartjs-2"; 3 | import { DoughnutChartContainer } from "./AnalyticsDoughnutChartElements"; 4 | import { displayMonths, allOptions as newOptions, allDatasets as newDatasets } from "./AnalyticsUtils"; 5 | import { useAnalyticsChartCustomHook } from "./useAnalyticsChartCustomHook"; 6 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; 7 | 8 | ChartJS.register(ArcElement, Tooltip, Legend); 9 | 10 | export function AnalyticsDoughnutChart() { 11 | const [chartData, chartOptions] = useAnalyticsChartCustomHook({ 12 | displayMonths: displayMonths(0), 13 | newDatasets: newDatasets.slice(1, 2), 14 | newOptions: newOptions.slice(-1), 15 | }); 16 | 17 | return ( 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsDoughnutChartElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const DoughnutChartContainer = styled.div` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100%; 8 | margin-top: -1.5rem; 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const AnalyticsContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | gap: 20px; 7 | padding: 20px; 8 | width: 100%; 9 | `; 10 | 11 | export const AnalyticsHeader = styled.header` 12 | display: flex; 13 | justify-content: flex-start; 14 | background-color: #151414; 15 | border: 1px solid #151414; 16 | border-radius: 5px; 17 | color: #fff; 18 | padding: 20px; 19 | `; 20 | 21 | export const Container = styled.div` 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: space-between; 25 | gap: 20px; 26 | `; 27 | 28 | export const Post = styled.div` 29 | background-color: #1c1c1c; 30 | padding: 10px; 31 | margin-bottom: 10px; 32 | box-shadow: 0 2px 4px rgb(0 0 0 / 10%); 33 | color: #eaeaea; 34 | border: 1px solid #151414; 35 | border-radius: 5px; 36 | `; 37 | 38 | export const SummaryItem = styled.div` 39 | background-color: #1c1c1c; 40 | padding: 10px; 41 | margin-bottom: 10px; 42 | box-shadow: 0 2px 4px rgb(0 0 0 / 10%); 43 | color: #eaeaea; 44 | border: 1px solid #151414; 45 | border-radius: 5px; 46 | `; 47 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsHorizontalBarCharts.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { Bar } from "react-chartjs-2"; 5 | import { BarChartsContainer } from "./AnalyticsHorizontalBarChartsElements"; 6 | import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js"; 7 | import { data, options } from "./AnalyticsUtils"; 8 | 9 | ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); 10 | 11 | export default function AnalyticsHorizontalBarCharts() { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsHorizontalBarChartsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const BarChartsContainer = styled.div` 4 | width: 100%; 5 | height: 100%; 6 | border: 1px solid #151414; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsIconElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | import { FiInfo } from "react-icons/fi"; 4 | import { SlCalender } from "react-icons/sl"; 5 | import { TbFileDownload } from "react-icons/tb"; 6 | import { CiHeart } from "react-icons/ci"; 7 | import { IoChatboxOutline } from "react-icons/io5"; 8 | 9 | const createStyledIcon = (IconComponent) => { 10 | return styled(IconComponent)` 11 | margin-right: 8px; 12 | font-size: 20px; 13 | color: grey; 14 | `; 15 | }; 16 | 17 | export const FiInfoIcon = createStyledIcon(FiInfo); 18 | export const SlCalenderIcon = createStyledIcon(SlCalender); 19 | export const TbFileDownloadIcon = createStyledIcon(TbFileDownload); 20 | export const CiHeartIcon = createStyledIcon(CiHeart); 21 | export const IoChatboxOutlineIcon = createStyledIcon(IoChatboxOutline); 22 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsMainBarChartElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const BarChartContainer = styled.div` 4 | width: 100%; 5 | height: 100%; 6 | padding: 5rem 0.5rem 0.5rem; 7 | border: 1px solid #151414; 8 | text-align: center; 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/AnalyticsVisitorsData.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Most Active Times", 5 | "value": 1.234, 6 | "percent": "+89.67%", 7 | "chart": "barchart", 8 | "createdAt": "2024-02-17T10:00:00", 9 | "updatedAt": "2024-02-17T10:00:00" 10 | }, 11 | { 12 | "id": 2, 13 | "title": "Total Visitors", 14 | "value": 1.004, 15 | "percent": "+71.80%", 16 | "chart": "stackedchart", 17 | "createdAt": "2024-02-19T10:00:00", 18 | "updatedAt": "2024-02-19T10:00:00" 19 | }, 20 | { 21 | "id": 3, 22 | "title": "Age Average", 23 | "value": 1.045, 24 | "percent": "+67.82%", 25 | "chart": "piechart", 26 | "createdAt": "2024-02-20T10:00:00", 27 | "updatedAt": "2024-02-20T10:00:00" 28 | } 29 | ] 30 | -------------------------------------------------------------------------------- /src/components/Dashboard/Analytics/useAnalyticsChartCustomHook.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | export const useAnalyticsChartCustomHook = (props) => { 4 | const { displayMonths, newDatasets, newOptions } = props; 5 | 6 | const [chartData, setChartData] = useState({ 7 | datasets: [], 8 | }); 9 | const [chartOptions, setChartOptions] = useState({}); 10 | 11 | useEffect(() => { 12 | setChartData({ 13 | labels: displayMonths, 14 | datasets: newDatasets, 15 | }); 16 | setChartOptions({ options: newOptions }); 17 | }, []); 18 | 19 | const setGeneralChartData = ({ displayMonths, newDatasets, newOptions }) => { 20 | setChartData({ 21 | labels: displayMonths, 22 | datasets: newDatasets, 23 | }); 24 | setChartOptions({ options: newOptions }); 25 | }; 26 | 27 | return [chartData, chartOptions, setGeneralChartData]; 28 | }; 29 | -------------------------------------------------------------------------------- /src/components/Dashboard/Bookmarks/BookmarksElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const BookmarksContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | margin: 0 auto; 7 | width: 100%; 8 | max-width: 1200px; 9 | padding: 0 30px; 10 | color: #fff; 11 | `; 12 | -------------------------------------------------------------------------------- /src/components/Dashboard/DashbaordSidebar/DashbaordSidebarElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { BiHomeCircle, BiBookmarks, BiLogoAlgolia, BiCog, BiChat } from "react-icons/bi"; 3 | import { PiNotebookDuotone, PiReadCvLogo } from "react-icons/pi"; 4 | import { CgOpenCollective } from "react-icons/cg"; 5 | import { GoTasklist } from "react-icons/go"; 6 | import { MdAnalytics } from "react-icons/md"; 7 | 8 | const createStyledIcon = (IconComponent) => { 9 | return styled(IconComponent)` 10 | font-size: 30px; 11 | `; 12 | }; 13 | 14 | export const BiHomeCircleIcon = createStyledIcon(BiHomeCircle); 15 | export const MdAnalyticsIcon = createStyledIcon(MdAnalytics); 16 | export const BiBookmarksIcon = createStyledIcon(BiBookmarks); 17 | export const CgOpenCollectiveIcon = createStyledIcon(CgOpenCollective); 18 | export const PiNotebookDuotoneIcon = createStyledIcon(PiNotebookDuotone); 19 | export const BsClipboardCheckIcon = createStyledIcon(GoTasklist); 20 | export const BiLogoBloggerIcon = createStyledIcon(PiReadCvLogo); 21 | export const BiLogoAlgoliaIcon = createStyledIcon(BiLogoAlgolia); 22 | export const CiSettingsIcon = createStyledIcon(BiCog); 23 | export const BiChatIcon = createStyledIcon(BiChat); 24 | -------------------------------------------------------------------------------- /src/components/Dashboard/DashbaordSidebar/DashboardSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | BiHomeCircleIcon, 4 | // BiChatIcon, 5 | PiNotebookDuotoneIcon, 6 | // MdAnalyticsIcon, 7 | BiBookmarksIcon, 8 | BiChatIcon, 9 | // BsClipboardCheckIcon, 10 | } from "./DashbaordSidebarElements"; 11 | import GeneralDashboardSidebar from "src/components/Common/GeneralDashboardSidebar"; 12 | import { GiTridentShield } from "react-icons/gi"; 13 | import { FiSettings } from "react-icons/fi"; 14 | 15 | const DashboardSidebar = ({ userDetail }) => { 16 | const sidebarItems = [ 17 | { to: "/", icon: , label: "Home" }, 18 | { to: "/dashboard/reconage", icon: , label: "Reconage" }, 19 | { to: "/dashboard/notes", icon: , label: "Notes" }, 20 | { to: "/dashboard/chat", icon: , label: "Chat" }, 21 | { to: "/dashboard/saved", icon: , label: "Saved" }, 22 | { to: "/settings", icon: , label: "Settings" }, 23 | ]; 24 | 25 | return ; 26 | }; 27 | 28 | export default DashboardSidebar; 29 | -------------------------------------------------------------------------------- /src/components/Dashboard/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "./Profile/ProfileElements"; 3 | import { DashboardContainer } from "./DashboardElements"; 4 | import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance"; 5 | import apiStatus from "src/features/apiStatus"; 6 | import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner"; 7 | 8 | const Dashboard = () => { 9 | const { isApiLoading, isApiWorking } = apiStatus(); 10 | // const [isLoading, setIsLoading] = useState(false); 11 | 12 | if (isApiLoading) return ; 13 | if (!isApiWorking) return ; 14 | 15 | return ( 16 | 17 | {/* */} 18 | 19 | ); 20 | }; 21 | 22 | export default Dashboard; 23 | -------------------------------------------------------------------------------- /src/components/Dashboard/DashboardElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const DashboardRoutesContainer = styled.div` 5 | display: flex; 6 | flex-direction: row; 7 | align-items: start; 8 | justify-content: space-between; 9 | width: 100%; 10 | 11 | /* max-width: 1500px; */ 12 | `; 13 | 14 | export const DashboardContainer = styled.div` 15 | display: flex; 16 | flex-direction: column; 17 | align-items: start; 18 | width: 100%; 19 | max-width: 1500px; 20 | `; 21 | 22 | export const DashboardItemsContainer = styled.div` 23 | width: 100%; 24 | display: flex; 25 | flex-direction: row; 26 | justify-content: space-evenly; 27 | margin: 25px; 28 | border-radius: 10px; 29 | color: #f5f5f5; 30 | 31 | @media screen and (width <= 768px) { 32 | flex-wrap: wrap; 33 | } 34 | `; 35 | 36 | export const DashboardItemsLink = styled(Link)` 37 | width: 100%; 38 | max-width: 300px; 39 | text-align: center; 40 | border: #2a2a2a 1px solid; 41 | margin: 10px; 42 | padding: 50px 100px; 43 | border-radius: 10px; 44 | cursor: pointer; 45 | color: #f5f5f5; 46 | `; 47 | -------------------------------------------------------------------------------- /src/components/Dashboard/FormData/FormDataElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const FormDataContainer = styled.div` 4 | margin-top: 50px; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: center; 9 | position: relative; 10 | padding: 5px; 11 | z-index: 1; 12 | color: #666; 13 | width: 100%; 14 | max-width: 1500px; 15 | `; 16 | 17 | export const FormDataCard = styled.div` 18 | width: 100%; 19 | padding: 25px; 20 | background: #1a1c1d; 21 | `; 22 | 23 | export const FromDataSection = styled.div` 24 | width: 100%; 25 | `; 26 | 27 | export const FormType = styled.button` 28 | background: #080a10; 29 | color: #b9b9b9; 30 | border: 1px solid #111; 31 | padding: 10px 20px; 32 | margin: 10px; 33 | border-radius: 5px; 34 | cursor: pointer; 35 | transition: all 0.2s ease-in-out; 36 | font-size: 18px; 37 | `; 38 | -------------------------------------------------------------------------------- /src/components/Dashboard/Notetaker/Category/ModifyCategory.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { MdOutlineCancel } from "react-icons/md"; 3 | import { FaSave } from "react-icons/fa"; 4 | 5 | import { ModifyCategoryModalButtons, ModifyCategoryModalContainer, ModifyCategoryModalInput } from "./CategoryElements"; 6 | 7 | const ModifyCategory = ({ onSave, onCancel, editCategoryName = "" }) => { 8 | const [value, setValue] = useState(""); 9 | 10 | useEffect(() => { 11 | setValue(editCategoryName); 12 | }, [editCategoryName]); 13 | 14 | const handleChange = (e) => { 15 | setValue(e.target.value); 16 | }; 17 | 18 | return ( 19 | 20 | 21 | 22 | onSave(value)} /> 23 | 24 | 25 | 26 | ); 27 | }; 28 | export default ModifyCategory; 29 | -------------------------------------------------------------------------------- /src/components/Dashboard/Notetaker/Category/index.jsx: -------------------------------------------------------------------------------- 1 | import CategorySidebar from "./CategorySidebar"; 2 | 3 | export { CategorySidebar }; 4 | -------------------------------------------------------------------------------- /src/components/Dashboard/Notetaker/NoteApp.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | color: #646464; 3 | transition: all 0.3s ease; 4 | } 5 | .icon-add { 6 | color: #ff6b08; 7 | } 8 | .icon-edit { 9 | color: #00a8ff; 10 | } 11 | .icon-delete, 12 | .icon-cancel, 13 | .icon-delete > path { 14 | color: #f14844; 15 | fill: #f14844; 16 | } 17 | .icon-pin, 18 | .icon-pin > path { 19 | color: #ff6b08; 20 | fill: #ff6b08; 21 | } 22 | 23 | .icon-save { 24 | color: #00a8ff; 25 | } 26 | .icon-options { 27 | color: #646464; 28 | } 29 | .icon-options:hover { 30 | color: #00a8ff; 31 | } 32 | .icon:hover { 33 | opacity: 0.7; 34 | cursor: pointer; 35 | } 36 | .icon-not-hover-effect:hover { 37 | opacity: 1; 38 | cursor: pointer; 39 | } 40 | -------------------------------------------------------------------------------- /src/components/Dashboard/Notetaker/NoteItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | NoteItemElement, 4 | NoteItemElementContainer, 5 | NoteItemPinningContainer, 6 | NoteItemShortTitle, 7 | } from "./NoteElements"; 8 | import NotePinning from "./NotePinning"; 9 | 10 | const NoteItem = ({ _id, title, pinned, onPick, onPin, isPicked }) => { 11 | return ( 12 | 13 | onPick(_id)} $isPicked={isPicked}> 14 | {title.slice(0, 23)} 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | export default NoteItem; 23 | -------------------------------------------------------------------------------- /src/components/Dashboard/Notetaker/NotePinning.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AiOutlinePushpin, AiTwotonePushpin } from "react-icons/ai"; 3 | 4 | const NotePinning = ({ isPinned, onPin, noteId }) => { 5 | const pinDisplay = isPinned ? ( 6 | onPin(noteId)} /> 7 | ) : ( 8 | onPin(noteId)} /> 9 | ); 10 | return <>{pinDisplay}; 11 | }; 12 | export default NotePinning; 13 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/DashboardItems.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { DashboardItemsContainer } from "src/components/Dashboard/DashboardElements"; 3 | 4 | const DashboardItems = () => { 5 | return ; 6 | }; 7 | 8 | export default DashboardItems; 9 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/EmailNotVerified.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Dashboard/OldDashbaord/EmailNotVerified.jsx -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/EmailNotVerifiedElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const EmailNotVerifiedContainer = styled.div` 4 | /* background: transparent; 5 | background: #08ff00; */ 6 | width: 100%; 7 | height: 50px; 8 | display: flex; 9 | justify-content: center; 10 | background: ${({ $scrollNav }) => ($scrollNav ? "#000000" : "transparent")}; 11 | align-items: center; 12 | text-align: center; 13 | top: 80px; 14 | position: sticky; 15 | z-index: 5; 16 | `; 17 | 18 | export const EmailNotVerifiedText = styled.div` 19 | /* color: #1a1c1d; */ 20 | color: #08ff00; 21 | 22 | @media screen and (width <= 500px) { 23 | padding: 5px; 24 | font-size: 14px; 25 | } 26 | `; 27 | 28 | export const ResendButton = styled.button` 29 | background: #0e0e0e; 30 | color: #08ff00; 31 | margin: 5px 10px; 32 | padding: 5px 10px; 33 | border: 1px #545454 solid; 34 | border-radius: 5px; 35 | cursor: pointer; 36 | 37 | &:hover { 38 | scale: 1.1; 39 | transition: all 0.2s ease-in-out; 40 | } 41 | `; 42 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/GoalSetter/GoalItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { deleteGoal } from "src/features/goals/goalSlice.js"; 4 | import { GoalText } from "./old/GoalElements"; 5 | 6 | const GoalItem = ({ goal }) => { 7 | const dispatch = useDispatch(); 8 | 9 | return ( 10 |
    11 |
    12 | 15 | {goal.text} 16 | 17 |
    18 |
    19 | {new Intl.DateTimeFormat("en-US", { 20 | month: "short", 21 | day: "numeric", 22 | year: "numeric", 23 | }).format(new Date(goal.createdAt))} 24 |
    25 |
    26 |
    27 | ); 28 | }; 29 | 30 | export default GoalItem; 31 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/GoalSetter/old/GoalElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const GoalsContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | text-align: center; 9 | max-width: 1500px; 10 | width: 100%; 11 | `; 12 | 13 | export const GoalText = styled.h3` 14 | word-wrap: break-word; 15 | font-weight: 500; 16 | margin-bottom: 30px; 17 | min-height: 60px; 18 | `; 19 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/GoalSetter/old/GoalForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { createGoal } from "src/features/goals/goalSlice"; 4 | 5 | import "src/components/Dashboard/OldDashbaord/GoalSetter/GoalSetter.css"; 6 | 7 | const GoalForm = () => { 8 | const [text, setText] = useState(""); 9 | 10 | const dispatch = useDispatch(); 11 | 12 | const onSubmit = (e) => { 13 | e.preventDefault(); 14 | 15 | dispatch(createGoal({ text })); 16 | setText(""); 17 | }; 18 | 19 | return ( 20 |
    21 |
    22 |
    23 | 24 | setText(e.target.value)} /> 25 |
    26 |
    27 | 30 |
    31 |
    32 |
    33 | ); 34 | }; 35 | 36 | export default GoalForm; 37 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/GoalSetter/old/GoalItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { deleteGoal } from "src/features/goals/goalSlice"; 4 | 5 | const GoalItem = ({ goal }) => { 6 | const dispatch = useDispatch(); 7 | 8 | return ( 9 |
    10 | {/*
    {new Date(goal.createdAt).toLocaleString("en-US")}
    */} 11 |

    {goal.text}

    12 | 15 |
    16 | ); 17 | }; 18 | 19 | export default GoalItem; 20 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/Streak/StreakElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { MdOutlineLocalFireDepartment } from "react-icons/md"; 3 | 4 | export const StreakIcon = styled(MdOutlineLocalFireDepartment)` 5 | color: #4cc23e; 6 | font-size: 1.5rem; 7 | margin-right: 15px; 8 | margin-left: 5px; 9 | `; 10 | 11 | export const Count = styled.p` 12 | font-size: 1.2rem; 13 | color: #4cc23e; 14 | display: flex; 15 | flex-direction: row; 16 | align-items: center; 17 | text-align: center; 18 | justify-content: center; 19 | `; 20 | 21 | export const StreakContainer = styled.div` 22 | color: #4cc23e; 23 | display: flex; 24 | flex-direction: row; 25 | align-items: center; 26 | text-align: center; 27 | justify-content: center; 28 | `; 29 | 30 | export const Streaks = styled.div` 31 | color: #4cc23e; 32 | display: flex; 33 | flex-direction: row; 34 | align-items: center; 35 | justify-content: center; 36 | `; 37 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/VerifyToAccess.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 3 | 4 | const VerifyToAccess = () => { 5 | return ( 6 | 7 |
    8 |

    15 | Please Verify Your Email To Access This Page 16 |

    17 |
    18 |     19 | ); 20 | }; 21 | 22 | export default VerifyToAccess; 23 | -------------------------------------------------------------------------------- /src/components/Dashboard/OldDashbaord/checkUserVerified.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import { getApiUrl } from "src/features/apiUrl"; 4 | 5 | export const useUserData = ({ user }) => { 6 | const [userData, setUserData] = useState({}); 7 | const [message, setMessage] = useState(""); 8 | 9 | useEffect(() => { 10 | if (!user) { 11 | setUserData({}); 12 | } else if (user.token) { 13 | const fetchUserData = async () => { 14 | try { 15 | const response = await axios.get(getApiUrl("api/users/getUser"), { 16 | headers: { 17 | Authorization: `Bearer ${user.token}`, 18 | }, 19 | }); 20 | setUserData(response.data); 21 | } catch (err) { 22 | setMessage(err.message); 23 | } 24 | }; 25 | fetchUserData(); 26 | } 27 | }, [user && user.token]); 28 | 29 | if (message === "Network Error") { 30 | return message; 31 | } 32 | 33 | return userData; 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/AboutMe.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AboutSection } from "./ProfileElements"; 3 | 4 | const AboutMe = ({ aboutMe }) => { 5 | return ( 6 | 7 |

    About Me

    8 |

    {aboutMe}

    9 |     10 | ); 11 | }; 12 | 13 | export default AboutMe; 14 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/CTFParticipation/CTFParticipation.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CtfParticipation = () => { 4 | return
    ; 5 | }; 6 | 7 | export default CtfParticipation; 8 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/CTFParticipation/CTFParticipationElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Dashboard/Profile/CTFParticipation/CTFParticipationElements.jsx -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/ConnectionsAndFollows/Connections/ConnectionsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ConnectionsContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | background: #171718; 7 | border-radius: 20px; 8 | padding: 25px; 9 | margin: 10px; 10 | border: 1px solid #3a3a3a; 11 | gap: 10px; 12 | width: 100%; 13 | max-width: 800px; 14 | `; 15 | 16 | export const ConnectionWrapper = styled.div` 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | color: #e0e0e0; 21 | `; 22 | 23 | export const DropdownButton = styled.button` 24 | background-color: #4caf50; 25 | color: white; 26 | padding: 10px; 27 | border: none; 28 | cursor: pointer; 29 | `; 30 | 31 | export const DropdownContent = styled.div` 32 | background: #1a1c1d; 33 | position: absolute; 34 | min-width: 160px; 35 | box-shadow: 0 8px 16px rgb(0 0 0 / 20%); 36 | z-index: 1; 37 | `; 38 | 39 | export const DropdownItem = styled.div` 40 | padding: 10px; 41 | cursor: pointer; 42 | 43 | &:hover { 44 | background-color: #f1f1f1; 45 | } 46 | `; 47 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/ConnectionsAndFollows/Connections/MyConnections.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const MyConnections = () => { 4 | return
    ; 5 | }; 6 | 7 | export default MyConnections; 8 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/CyberProfiles/CyberProfiles.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CyberProfilesContainer } from "./CyberProfilesElements"; 3 | 4 | const CyberProfiles = ({ cyberProfiles, userDetailData, setUserDetailData, isEdit }) => { 5 | // const onChange = (e) => { 6 | // const value = e.target.value; 7 | // setUserDetailData((prevState) => ({ 8 | // ...prevState, 9 | // aboutMe: value, 10 | // })); 11 | // }; 12 | const THMUsername = "kabir0x23"; 13 | const THMBadgeURL = `https://tryhackme-badges.s3.amazonaws.com/${THMUsername}.png`; 14 | const THMProfileURL = `https://tryhackme.com/p/${THMUsername}`; 15 | 16 | return ( 17 | 18 |

    Cyber Profiles

    19 | {isEdit ? ( 20 | 21 | ) : ( 22 | 23 | TryHackMe 24 | 25 | )} 26 |     27 | ); 28 | }; 29 | 30 | export default CyberProfiles; 31 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/CyberProfiles/CyberProfilesElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const CyberProfilesContainer = styled.div` 4 | margin: 25px; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | `; 9 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/CyberSecuritySkills.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CyberSecuritySkills = () => { 4 | return
    CyberSecurity Skills
    ; 5 | }; 6 | 7 | export default CyberSecuritySkills; 8 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/EditPublicProfile/EditProfileHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { HeaderContainer, UserBanner } from "src/components/Dashboard/Profile/ProfileElements"; 3 | import { getCdnAssets } from "src/features/apiUrl"; 4 | 5 | const ProfileHeader = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default ProfileHeader; 14 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/Followers/Followers.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Followers = ({ followers, userDetails }) => { 4 | const followersList = userDetails?.filter((user) => followers?.includes(user?.user)); 5 | return ( 6 |
    7 | {followersList?.map((follower, index) => ( 8 |
    9 |

    {follower?.username}

    10 |
    11 | ))} 12 |
    13 | ); 14 | }; 15 | 16 | export default Followers; 17 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/IAmAvailableFor.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const IAmAvailableFor = () => { 4 | return
    I Am Available For DevOps, Cyber security
    ; 5 | }; 6 | 7 | export default IAmAvailableFor; 8 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/ProfileHeader/ProfileHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { HeaderContainer, UserBanner } from "src/components/Dashboard/Profile/ProfileElements"; 3 | import { getCdnAssets } from "src/features/apiUrl"; 4 | 5 | const ProfileHeader = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default ProfileHeader; 14 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/SkillSet/SkillSet.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AchievementList } from "src/components/Dashboard/Profile/Achievements/AchievementsElements"; 3 | import { SkillName, SkillSetContainer, SkillSetListItem } from "./SkillSetElements"; 4 | 5 | const SkillSet = ({ skills }) => { 6 | return ( 7 | 8 |

    Skills

    9 | 10 | 11 | {skills?.length > 0 && 12 | skills[0]?.skill?.map((skill, index) => {skill?.skillName})} 13 | 14 | 15 |     16 | ); 17 | }; 18 | 19 | export default SkillSet; 20 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/ToolsAndSoftware.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const ToolsAndSoftware = () => { 4 | return
    Tools And Software
    ; 5 | }; 6 | 7 | export default ToolsAndSoftware; 8 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/UserLinks/UserInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { UserPicture } from "src/components/Explore/Users/UsersElements"; 4 | import { cdnContentImagesUrl } from "src/features/apiUrl"; 5 | import { UserInfoContainer } from "./UserLinksElements"; 6 | 7 | const UserInfo = ({ children, heightSize, widthSize, fontSizeName, fontSizeUsername, avatarPath }) => { 8 | const avatar = avatarPath 9 | ? cdnContentImagesUrl(avatarPath) 10 | : cdnContentImagesUrl("/user/" + (children?.avatar || "avatar.png")); 11 | 12 | const measurements = { height: heightSize || "200px", width: widthSize || "200px" }; 13 | 14 | return ( 15 | 16 | 17 | {children?.name} 18 | {children?.username && `@${children?.username}`} 19 | 20 | ); 21 | }; 22 | export default UserInfo; 23 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/UserLinks/socialLinksTemplate.js: -------------------------------------------------------------------------------- 1 | const SocialLinksTemplate = [ 2 | { icon: "FaInstagram", platform: "Instagram", profileUsername: "", websiteLink: "https://www.instagram.com/" }, 3 | { icon: "FaTwitter", platform: "Twitter", profileUsername: "", websiteLink: "https://twitter.com/" }, 4 | { icon: "FaLinkedin", platform: "LinkedIn", profileUsername: "", websiteLink: "https://www.linkedin.com/in/" }, 5 | { icon: "FaGithub", platform: "GitHub", profileUsername: "", websiteLink: "https://github.com/" }, 6 | { icon: "FaMedium", platform: "Medium", profileUsername: "", websiteLink: "https://medium.com/@" }, 7 | { icon: "RiEarthFill", platform: "Website", profileUsername: "", websiteLink: "" }, 8 | ]; 9 | 10 | export default SocialLinksTemplate; 11 | -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/UserProjects/UserProjectsElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Dashboard/Profile/UserProjects/UserProjectsElements.jsx -------------------------------------------------------------------------------- /src/components/Dashboard/Profile/UserSocialLinks/UserSocialLinksElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const UserSocialLinksContainer = styled.div` 4 | padding: 10px; 5 | border-radius: 5px; 6 | background: #0e0e0e; 7 | `; 8 | 9 | export const SocialUsername = styled.a` 10 | font-size: 15px; 11 | color: #e0e0e0; 12 | text-decoration: none; 13 | 14 | &:hover { 15 | text-decoration: underline; 16 | } 17 | `; 18 | export const SocialLink = styled.div` 19 | color: #e0e0e0; 20 | font-size: 18px; 21 | display: flex; 22 | align-items: center; 23 | justify-content: left; 24 | border-radius: 5px; 25 | transition: all 0.3s ease-in-out; 26 | cursor: pointer; 27 | gap: 5px; 28 | `; 29 | 30 | export const EditSocialUsername = styled.input` 31 | font-size: 18px; 32 | color: #e0e0e0; 33 | text-decoration: none; 34 | margin-left: 7px; 35 | margin-bottom: 7px; 36 | background: transparent; 37 | padding: 5px; 38 | border: 1px solid #3a3a3a; 39 | border-radius: 5px; 40 | width: 100%; 41 | `; 42 | -------------------------------------------------------------------------------- /src/components/Dashboard/Settings/Account/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SettingsForm from "src/components/Dashboard/Settings/Account/ProfileForm.jsx"; 3 | import "./profile.css"; 4 | 5 | export default function Account() { 6 | return ( 7 |
    8 |
    9 |
    10 |

    Account

    11 |

    User Configuration Settings.

    12 |
    13 |
    14 | 15 |
    16 |
    17 |
    18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/components/Dashboard/Settings/Api/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SettingsForm from "./ApiForm"; 3 | import "./api.css"; 4 | 5 | export default function Api() { 6 | return ( 7 |
    8 |
    9 |
    10 |

    Api

    11 |

    Entter Your gemini AI Api key.

    12 |
    13 | 14 |
    15 |

    Get your API Key:

    16 | 22 | 23 | 24 |
    25 | 26 |
    27 | 28 |
    29 |
    30 |
    31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Dashboard/Settings/Appearance/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Appearance() { 4 | return
    Appearance
    ; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Dashboard/Settings/Notifications/toggle.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Notification.css"; 3 | 4 | export default function Toggle({ className, handleClick, checked }) { 5 | return ( 6 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Dashboard/Settings/Profile/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Profile() { 4 | return ( 5 |
    6 |

    Profile

    7 |
    8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Explore/ExploreRoutes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import { NotFound } from "src/components/index"; 4 | import Explore from "./Explore"; 5 | 6 | const ExploreRoutes = () => { 7 | return ( 8 | 9 | } /> 10 | } /> 11 | 12 | ); 13 | }; 14 | 15 | export default ExploreRoutes; 16 | -------------------------------------------------------------------------------- /src/components/Explore/Internships/Internships.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Internships = () => { 4 | return
    ; 5 | }; 6 | 7 | export default Internships; 8 | -------------------------------------------------------------------------------- /src/components/Explore/Tags/Tags.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AllTags, Tag, TagsContainer } from "./TagsElements"; 3 | 4 | const Tags = ({ tags }) => { 5 | return ( 6 | 7 |

    16 | Trending 17 |

    18 | 19 | {tags.slice(0, 10).map( 20 | (tag, key) => 21 | tag.length !== 0 && ( 22 | 23 | {/* */} 24 | {tag} 25 | {/* */} 26 | 27 | ), 28 | )} 29 | 30 |     31 | ); 32 | }; 33 | 34 | export default Tags; 35 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedPage/FeedPageElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const FeedPageContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | max-width: 1500px; 8 | width: 100%; 9 | `; 10 | 11 | export const FeedContentSection = styled.div` 12 | margin-top: 10px; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | width: 100%; 17 | max-width: 600px; 18 | `; 19 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedPoll/PollAnswers.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { PollAnswers } from "./PollAnswers"; 3 | import { Poll } from "./Poll"; 4 | 5 | export default { 6 | title: "Components/Poll/PollAnswers", 7 | component: Poll, 8 | id: "components-poll-questions", 9 | }; 10 | 11 | const Template = (args) => ( 12 | 13 | 20 | 21 | ); 22 | 23 | export const DefaultPollAnswers = Template.bind({}); 24 | DefaultPollAnswers.args = { 25 | title: "What Programming language do you use", 26 | votes: "57 votes", 27 | daysLeft: "4 days left", 28 | }; 29 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedPoll/PollImage.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const PollImage = styled.div` 4 | width: 25px; 5 | height: 25px; 6 | background-color: #66c; 7 | border-radius: 50%; 8 | position: relative; 9 | margin-left: -0.5rem; 10 | border: 1px solid #333; 11 | `; 12 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedPoll/PollQuestions.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { StyledCheckbox } from "./StyledCheckbox"; 4 | 5 | const StyledQuestion = styled.div` 6 | display: flex; 7 | align-items: center; 8 | gap: 1rem; 9 | color: #fff; 10 | `; 11 | 12 | export const PollQuestions = ({ questions }) => { 13 | return questions.map((question, index) => { 14 | return ( 15 | 16 | 17 |

    {question}

    18 |     19 | ); 20 | }); 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedPoll/PollQuestions.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Poll } from "./Poll"; 3 | import { PollQuestions } from "./PollQuestions"; 4 | 5 | export default { 6 | title: "Components/Poll/PollQuestions", 7 | component: Poll, 8 | id: "components-poll-answers", 9 | }; 10 | 11 | const Template = (args) => ( 12 | 13 | 14 | 15 | ); 16 | 17 | export const DefaultPollQuestions = Template.bind({}); 18 | DefaultPollQuestions.args = { 19 | title: "What Programming language do you use", 20 | votes: "57 votes", 21 | daysLeft: "4 days left", 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedPoll/StyledCheckbox.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const StyledCheckbox = styled.input.attrs({ type: "checkbox" })` 4 | appearance: none; 5 | width: 20px; 6 | height: 20px; 7 | background-color: #fff; 8 | border: 2px solid #007bff; 9 | border-radius: 50%; 10 | display: inline-block; 11 | position: relative; 12 | cursor: pointer; 13 | 14 | &:checked { 15 | background-color: #007bff; 16 | border: 2px solid #fff; 17 | 18 | &::after { 19 | content: ""; 20 | position: absolute; 21 | top: 2px; 22 | left: 6px; 23 | width: 4px; 24 | height: 10px; 25 | border: solid white; 26 | border-width: 0 2px 2px 0; 27 | transform: rotate(45deg); 28 | } 29 | } 30 | `; 31 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedTags/SocialTags.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AllTags, Tag, TagsContainer } from "./FeedTagsElements"; 3 | 4 | const SocialTags = ({ tags, handleClick, selectedTags, setSelectedTags }) => { 5 | const handleTagSelection = (tag) => { 6 | if (selectedTags.includes(tag)) { 7 | setSelectedTags(selectedTags.filter((item) => item !== tag)); 8 | } else { 9 | setSelectedTags([...selectedTags, tag]); 10 | } 11 | }; 12 | return ( 13 | 14 | 15 | {tags.slice(0, 10).map( 16 | (tag, key) => 17 | tag?.length !== 0 && ( 18 | { 22 | handleTagSelection(tag); 23 | }} 24 | > 25 | {tag} 26 | 27 | ), 28 | )} 29 | 30 | 31 | ); 32 | }; 33 | export default SocialTags; 34 | -------------------------------------------------------------------------------- /src/components/Feeds/FeedsRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import { NotFound } from "src/components/index"; 4 | import Feeds from "./Feeds"; 5 | import FeedPage from "./FeedPage/FeedPage"; 6 | import UserFeeds from "src/components/Feeds/UserFeeds.jsx"; 7 | 8 | const FeedsRoute = () => { 9 | return ( 10 | 11 | } /> 12 | } /> 13 | } /> 14 | 15 | } /> 16 | 17 | ); 18 | }; 19 | 20 | export default FeedsRoute; 21 | -------------------------------------------------------------------------------- /src/components/Feeds/PostForm/AddThreadElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { ImCross } from "react-icons/im"; 3 | 4 | export const AddThreadsContainer = styled.div` 5 | position: fixed; 6 | z-index: 1; 7 | left: 0; 8 | top: 0; 9 | width: 100%; 10 | height: 100%; 11 | overflow: auto; 12 | background-color: rgb(0 0 0 / 40%); 13 | border-radius: 5px; 14 | 15 | .popup-inner { 16 | border: #2a2a2a solid 1px; 17 | position: absolute; 18 | left: 50%; 19 | top: 50%; 20 | transform: translate(-50%, -50%); 21 | } 22 | `; 23 | 24 | export const CloseButton = styled(ImCross)` 25 | position: absolute; 26 | top: 20px; 27 | right: 20px; 28 | border: none; 29 | cursor: pointer; 30 | font-size: 25px; 31 | color: #090a0c; 32 | background: #fc6c1a; 33 | border-radius: 50%; 34 | padding: 5px; 35 | transition: all 0.3s ease-in-out; 36 | 37 | &:hover { 38 | background: #f5f5f5; 39 | color: #000; 40 | } 41 | `; 42 | -------------------------------------------------------------------------------- /src/components/Forum/CommentMarkdownPreview.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CommentContentMarkdownPreview, CommentMarkdownPreviewContainer } from "./ForumSubPageElements"; 3 | import remarkGfm from "remark-gfm"; 4 | 5 | const CommentMarkdownPreview = (props) => { 6 | return ( 7 | 8 | 14 | {props.comment} 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default CommentMarkdownPreview; 21 | -------------------------------------------------------------------------------- /src/components/Forum/CreateForumPost/AddBlogTags.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconAdd, TagInput, TagsInput } from "./CreateBlogV2Elements"; 3 | 4 | const AddBlogTags = ({ tags, setTags }) => { 5 | const handleTagChange = (index, value) => { 6 | const newTags = [...tags]; 7 | newTags[index] = value; 8 | setTags(newTags); 9 | }; 10 | 11 | const handleAddTag = () => { 12 | setTags([...tags, ""]); 13 | }; 14 | 15 | return ( 16 | 17 | {tags?.map((tag, index) => ( 18 | handleTagChange(index, e.target.value)} 25 | placeholder={"tag here"} 26 | /> 27 | ))} 28 | + 29 | 30 | ); 31 | }; 32 | 33 | export default AddBlogTags; 34 | -------------------------------------------------------------------------------- /src/components/Forum/CreateForumPost/AddBlogTagsElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Forum/CreateForumPost/AddBlogTagsElements.jsx -------------------------------------------------------------------------------- /src/components/Forum/ForumElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ForumContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | width: 100%; 8 | gap: 25px; 9 | max-width: 1500px; 10 | `; 11 | -------------------------------------------------------------------------------- /src/components/Forum/ForumPosts/ForumPostsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { ExploreContentContainer } from "src/components/Explore/ExploreElements"; 3 | 4 | export const Cards = styled(ExploreContentContainer)` 5 | background-color: ${(props) => (props.$displayAt === "explore" ? "#090909" : "#000000")}; 6 | padding: ${(props) => (props.$displayAt ? "15px" : "0")}; 7 | 8 | /* for multi line text */ 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/Forum/ForumRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import Forum from "./Forum"; 4 | import ForumSubPage from "./ForumSubPage"; 5 | import { NotFound } from "src/components/index"; 6 | 7 | const ForumRoute = () => { 8 | return ( 9 | 10 | } /> 11 | } /> 12 | } /> 13 | 14 | ); 15 | }; 16 | 17 | export default ForumRoute; 18 | -------------------------------------------------------------------------------- /src/components/Forum/PostCommentForm.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CommentForm, PostCommentFormContainer } from "./PostCommentFormElements"; 3 | import { CommentTextArea } from "./ForumSubPageElements"; 4 | 5 | const PostCommentForm = (props) => { 6 | return ( 7 | 8 | 9 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default PostCommentForm; 22 | -------------------------------------------------------------------------------- /src/components/Forum/PostCommentFormElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const PostCommentFormContainer = styled.div` 4 | width: 100%; 5 | `; 6 | 7 | export const CommentForm = styled.form` 8 | display: flex; 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/Header/UserOptions/UserOptionsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { Link as LinkRouter } from "react-router-dom"; 3 | 4 | export const RouterLink = styled(LinkRouter)` 5 | color: whitesmoke; 6 | `; 7 | 8 | export const UserOptionsContainer = styled.div` 9 | /* width: 100%; 10 | height: 100%; */ 11 | display: flex; 12 | 13 | /* justify-content: flex-end; */ 14 | 15 | @media screen and (width <= 340px) { 16 | /* display: inline-flex; 17 | justify-content: center; 18 | text-align: center; 19 | margin-top: 45px; */ 20 | } 21 | `; 22 | export const UserOptionsDropdownContainer = styled.div` 23 | position: absolute; 24 | top: 58px; 25 | width: 300px; 26 | transform: translateX(-45%); 27 | background-color: var(--bg); 28 | border: var(--border); 29 | border-radius: var(--border-radius); 30 | 31 | /* padding: 1rem; */ 32 | overflow: hidden; 33 | transition: height var(--speed) ease; 34 | `; 35 | 36 | export const NavbarNav = styled.ul` 37 | max-width: 100%; 38 | height: 100%; 39 | display: flex; 40 | justify-content: flex-end; 41 | `; 42 | -------------------------------------------------------------------------------- /src/components/Homepage/About/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Section } from "src/components/Resources/WriteUps/WriteUpsElements"; 3 | 4 | const About = () => { 5 | return
    About
    ; 6 | }; 7 | 8 | export default About; 9 | -------------------------------------------------------------------------------- /src/components/Homepage/About/AboutElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Homepage/About/AboutElements.jsx -------------------------------------------------------------------------------- /src/components/Homepage/Registration/index.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Homepage/Registration/index.jsx -------------------------------------------------------------------------------- /src/components/Learn/Courses/CoursesRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import Courses from "src/components/Courses/Courses"; 4 | import { NotFound } from "src/components/index"; 5 | 6 | const CoursesRoute = () => { 7 | return ( 8 | 9 | } /> 10 | } /> 11 | 12 | ); 13 | }; 14 | 15 | export default CoursesRoute; 16 | -------------------------------------------------------------------------------- /src/components/Learn/Courses/YoutubeCoursesData/BlueTeamCoursesData.jsx: -------------------------------------------------------------------------------- 1 | export const BlueTeamCoursesData = [ 2 | { 3 | id: "freeYoutubeCourses", 4 | sectionsHeading: "Blue Team Courses", 5 | topLine: "Free Courses", 6 | YTChannelImageLink: "https://i.ytimg.com/vi/Bt5fh3wQUAQ/maxresdefault.jpg", 7 | tag: "Blue Team", 8 | videoHeading: "Blue Team Tutorials", 9 | videoLink: "https://www.youtube.com/watch?v=Bt5fh3wQUAQ&list=PLBf0hzazHTGNcIS_dHjM2NgNUFMW1EZFx", 10 | channelName: "HackerSploit", 11 | channelLogo: 12 | "https://yt3.ggpht.com/ytc/AMLnZu9nSdhYbPUgxIavX6vicAOFioLHhkuCNeHcp-Icpw=s48-c-k-c0x00ffffff-no-rj", 13 | timeStamp: "Oct 7 2022", 14 | alt: "Blue Team Courses", 15 | channelLink: "https://www.youtube.com/c/HackerSploit", 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /src/components/Learn/Courses/YoutubeCoursesData/RedTeamCoursesData.jsx: -------------------------------------------------------------------------------- 1 | export const RedTeamCoursesData = [ 2 | { 3 | id: "freeYoutubeCourses", 4 | sectionsHeading: "Red Team Courses", 5 | topLine: "Free Courses", 6 | YTChannelImageLink: "https://i.ytimg.com/vi/EIHLXWnK1Dw/maxresdefault.jpg", 7 | tag: "Red Team", 8 | videoHeading: "Red Team Tutorials", 9 | videoLink: "https://www.youtube.com/watch?v=EIHLXWnK1Dw&list=PLBf0hzazHTGMjSlPmJ73Cydh9vCqxukCu", 10 | channelName: "HackerSploit", 11 | channelLogo: 12 | "https://yt3.ggpht.com/ytc/AMLnZu9nSdhYbPUgxIavX6vicAOFioLHhkuCNeHcp-Icpw=s48-c-k-c0x00ffffff-no-rj", 13 | timeStamp: "Oct 7 2022", 14 | alt: "Red Team Courses", 15 | channelLink: "https://www.youtube.com/c/HackerSploit", 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /src/components/Learn/Courses/YoutubeCoursesData/index.js: -------------------------------------------------------------------------------- 1 | export { CyberSecCoursesData } from "./CyberSecCoursesData"; 2 | export { LinuxCoursesData } from "./LinuxCoursesData"; 3 | export { BugHuntingCoursesData } from "./BugHuntingCoursesData"; 4 | export { RedTeamCoursesData } from "./RedTeamCoursesData"; 5 | export { BlueTeamCoursesData } from "./BlueTeamCoursesData"; 6 | -------------------------------------------------------------------------------- /src/components/Learn/Courses/YoutubeCoursesLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Outlet } from "react-router"; 3 | 4 | import YoutubeCoursesSidebar from "./YoutubeCoursesSidebar"; 5 | import { Container, MainContent } from "./YouTubeVideosElements"; 6 | 7 | const FreeYoutubeCoursesLayout = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default FreeYoutubeCoursesLayout; 19 | -------------------------------------------------------------------------------- /src/components/Learn/Learn.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Learn = () => { 4 | return ( 5 |
    6 |

    Learn

    7 |
    8 | ); 9 | }; 10 | 11 | export default Learn; 12 | -------------------------------------------------------------------------------- /src/components/Learn/Roadmaps/CyberSecurityData.jsx: -------------------------------------------------------------------------------- 1 | // const CyberSecurityData = [ 2 | // { 3 | // title: "Cyber Security", 4 | // links: [ 5 | // { 6 | // title: "Cyber Security Tutorial for Beginners", 7 | // url: "https://youtu.be/3QhU9jd03a0", 8 | // target: "_blank", 9 | // }, 10 | // { 11 | // title: "Cyber Security for Beginners", 12 | // url: "https://youtu.be/1S0aBV-Waeo", 13 | // target: "_blank", 14 | // }, 15 | // ], 16 | // }, 17 | // ]; 18 | -------------------------------------------------------------------------------- /src/components/Learn/Roadmaps/RoadmapCard.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Learn/Roadmaps/RoadmapCard.jsx -------------------------------------------------------------------------------- /src/components/Learn/Roadmaps/RoadmapsRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import { NotFound, Roadmap, Roadmaps } from "src/components/index"; 4 | 5 | const RoadmapsRoute = () => { 6 | return ( 7 | 8 | } /> 9 | } /> 10 | } /> 11 | 12 | ); 13 | }; 14 | 15 | export default RoadmapsRoute; 16 | -------------------------------------------------------------------------------- /src/components/OldEvents/EventsData/Capture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/OldEvents/EventsData/Capture.png -------------------------------------------------------------------------------- /src/components/OldEvents/EventsData/EventsData.jsx: -------------------------------------------------------------------------------- 1 | const EventsData = []; 2 | 3 | export default EventsData; 4 | -------------------------------------------------------------------------------- /src/components/OldEvents/EventsRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import { Event, Events, NotFound } from "src/components/index"; 4 | 5 | const EventsRoute = () => { 6 | return ( 7 | 8 | } /> 9 | } /> 10 | } /> 11 | 12 | ); 13 | }; 14 | 15 | export default EventsRoute; 16 | -------------------------------------------------------------------------------- /src/components/OldEvents/OnGoingEvents/OnGoingEvents.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { OnGoingEventsContainer } from "./OnGoingEventsElements"; 3 | 4 | import { 5 | EventsVenue, 6 | EventsContent, 7 | EventLocation, 8 | EventsHeading, 9 | EventsSubHeading, 10 | EventsImage, 11 | } from "src/components/OldEvents/EventsElement"; 12 | 13 | const OnGoingEvents = (event) => { 14 | return ( 15 | 16 |
    17 | 18 | {event.title} 19 | 20 | {event.location} 21 | {event.date} • {event.venue} 22 | 23 |
    24 | {event.content.slice(0, 200)} 25 |     26 | ); 27 | }; 28 | 29 | export default OnGoingEvents; 30 | -------------------------------------------------------------------------------- /src/components/OldEvents/OnGoingEvents/OnGoingEventsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const OnGoingEventsContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: left; 7 | text-align: left; 8 | height: auto; 9 | width: 100%; 10 | border: 1px solid #f5f5f50d; 11 | border-radius: 10px; 12 | background-color: #0c0c0c; 13 | margin: 0 20px 20px 0; 14 | padding: 15px 20px; 15 | 16 | @media screen and (width <= 768px) { 17 | margin: 0 0 20px; 18 | } 19 | `; 20 | 21 | export const OnGoingEventsImage = styled.img` 22 | height: 100%; 23 | width: auto; 24 | margin-bottom: 10px; 25 | font-size: 12px; 26 | color: #999; 27 | word-break: break-all; 28 | `; 29 | 30 | export const OnGoingEventsContent = styled.div` 31 | margin-bottom: 20px; 32 | `; 33 | 34 | export const OnGoingEventsSubHeading = styled.h4` 35 | color: #9b9b9b; 36 | margin: 5px 0 10px; 37 | `; 38 | 39 | export const OnGoingEventsChangeViewBtn = styled.a` 40 | text-decoration: none; 41 | color: currentcolor; 42 | opacity: 0.5; 43 | cursor: pointer; 44 | `; 45 | -------------------------------------------------------------------------------- /src/components/OldEvents/PastEvents/PastEvents.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { PastEventsContainer } from "./PastEventsElements"; 3 | 4 | import { 5 | EventLocation, 6 | EventsHeadingSmall, 7 | EventsImage, 8 | EventsSubHeading, 9 | EventsVenue, 10 | } from "src/components/OldEvents/EventsElement"; 11 | 12 | const PastEvents = (event) => { 13 | return ( 14 | 15 |
    16 | 17 | {event.title} 18 | 19 | {event.location} 20 | {event.date} • {event.venue} 21 | 22 |
    23 |     24 | ); 25 | }; 26 | 27 | export default PastEvents; 28 | -------------------------------------------------------------------------------- /src/components/OldEvents/UpComingEvents/UpComingEvents.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UpComingEventsContainer } from "./UpComingEventsElements"; 3 | 4 | import { 5 | EventsVenue, 6 | EventsContent, 7 | EventsImage, 8 | EventsSubHeading, 9 | EventLocation, 10 | EventLink, 11 | EventsHeadingMedium, 12 | } from "src/components/OldEvents/EventsElement"; 13 | 14 | const UpComingEvents = (event) => { 15 | return ( 16 | <> 17 | 18 |
    19 | 20 | 21 | {event.title} 22 | 23 | 24 | {event.location} 25 | {event.date} • {event.venue} 26 | 27 |
    28 | {event.content.slice(0, 200)} 29 |     30 | 31 | ); 32 | }; 33 | 34 | export default UpComingEvents; 35 | -------------------------------------------------------------------------------- /src/components/OldEvents/UpComingEvents/UpComingEventsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const UpComingEventsContainer = styled.div` 4 | width: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: left; 8 | text-align: left; 9 | height: auto; 10 | border: 1px solid #f5f5f50d; 11 | border-radius: 10px; 12 | background-color: #0c0c0c; 13 | padding: 15px 20px; 14 | margin: 0 0 25px; 15 | 16 | @media screen and (width <= 768px) { 17 | margin: 0 0 20px; 18 | width: 100%; 19 | } 20 | `; 21 | 22 | export const UpComingEventsImage = styled.img` 23 | height: 100%; 24 | width: auto; 25 | margin-bottom: 10px; 26 | font-size: 12px; 27 | color: #999; 28 | word-break: break-all; 29 | `; 30 | 31 | export const UpComingEventsSubHeading = styled.h4` 32 | margin: 5px 0 10px; 33 | color: #777; 34 | `; 35 | -------------------------------------------------------------------------------- /src/components/OldEvents/ViewEvent/Event.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router"; 3 | import CTFDataOld from "src/components/CaptureTheFlag/CTFDataOld"; 4 | import { encodeURL } from "src/components/Blogs/util"; 5 | import { 6 | EventComponent, 7 | EventContent, 8 | EventHeaderImage, 9 | EventHeaderImageContainer, 10 | EventTitle, 11 | // EventVenue, 12 | } from "src/components/OldEvents/EventsElement"; 13 | // 14 | 15 | const Event = () => { 16 | const { title } = useParams(); 17 | const event = [...CTFDataOld].find((event) => encodeURL(event?.title) === title); 18 | 19 | return ( 20 | 21 | 22 | 23 | {/* {event?.venue} */} 24 | 25 | {event?.title} 26 |

    {event?.date}

    27 | {event?.content} 28 |     29 | ); 30 | }; 31 | 32 | export default Event; 33 | -------------------------------------------------------------------------------- /src/components/Opportunities/DisplayCommunityEvents/DisplayTimelineList.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import DisplayTimelineItem from "./DisplayTimelineItem"; 4 | import { DisplayTimelineContainer } from "./DisplayTimelineElements"; 5 | 6 | const DisplayTimelineList = ({ children }) => { 7 | const timelineListItems = children?.map((item) => {item}); 8 | return {timelineListItems}; 9 | }; 10 | export default DisplayTimelineList; 11 | -------------------------------------------------------------------------------- /src/components/Opportunities/DisplayCommunityEvents/index.js: -------------------------------------------------------------------------------- 1 | import DisplayCommunityEvents from "./DisplayCommunityEvents"; 2 | import DisplayEventDetails from "./DisplayEventDetails"; 3 | export default DisplayCommunityEvents; 4 | export { DisplayEventDetails }; 5 | -------------------------------------------------------------------------------- /src/components/Opportunities/Internship/InternshipTimeline.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { TimelineContainer } from "./InternshipTimelineElements"; 3 | import { getCdnAssets } from "src/features/apiUrl"; 4 | 5 | const InternshipTimeline = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default InternshipTimeline; 14 | -------------------------------------------------------------------------------- /src/components/Opportunities/OpenSecProjects/OpenSecProjectsData.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Opportunities/OpenSecProjects/OpenSecProjectsData.js -------------------------------------------------------------------------------- /src/components/Opportunities/TheCyberXcel/TheCyberXcel.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ComingSoon from "src/components/Other/MixComponents/ComingSoon"; 3 | 4 | const TheCyberXcel = () => { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default TheCyberXcel; 13 | -------------------------------------------------------------------------------- /src/components/Opportunities/Volunteer/VolunteerElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Opportunities/Volunteer/VolunteerElements.jsx -------------------------------------------------------------------------------- /src/components/Other/Certificate/createCtfCertificate.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { getApiUrl } from "src/features/apiUrl"; 3 | 4 | const createCtfCertificate = async ({ ctf, ctfId, userId, ctfDate, username, fullName, email }) => { 5 | const ctfCertificate = { 6 | ctf, 7 | ctfId, 8 | user: userId, 9 | ctfDate, 10 | username, 11 | fullName, 12 | email, 13 | issueDate: new Date(Date.now()).toISOString(), 14 | description: `Congratulations on successfully completing ${ctf} and demonstrating your skills in cybersecurity`, 15 | kind: "rooted", 16 | }; 17 | 18 | try { 19 | const token = JSON.parse(localStorage.getItem("user")).token; 20 | const config = { 21 | headers: { 22 | Authorization: `Bearer ${token}`, 23 | }, 24 | }; 25 | 26 | await axios 27 | .post(getApiUrl(`api/ctfCertificate/createCtfCertificate`), ctfCertificate, config) 28 | .then((response) => {}) 29 | .catch((error) => { 30 | console.log(error.message); 31 | }); 32 | } catch (error) { 33 | console.log(error.message); 34 | } 35 | }; 36 | 37 | export default createCtfCertificate; 38 | -------------------------------------------------------------------------------- /src/components/Other/CyberGames/CyberGames.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CTFGame, CyberGamesContainer, OSINTGame, CyberGamesImage } from "./CyberGamesElements"; 3 | import { getCdnAssets } from "src/features/apiUrl"; 4 | const OSINTImage = `${getCdnAssets}/images/CyberGames/OSINT.png`; 5 | const CTFImage = `${getCdnAssets}/images/CyberGames/CTF.png`; 6 | const CyberGames = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default CyberGames; 20 | -------------------------------------------------------------------------------- /src/components/Other/CyberGames/CyberGamesElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { Link as RouterLink } from "react-router-dom"; 3 | 4 | export const CyberGamesContainer = styled.div` 5 | display: flex; 6 | justify-content: center; 7 | text-align: center; 8 | margin: 150px 20px; 9 | color: #cecac3; 10 | 11 | @media screen and (width <= 760px) { 12 | text-align: center; 13 | } 14 | `; 15 | 16 | export const OSINTGame = styled(RouterLink)` 17 | /* RouterLink */ 18 | `; 19 | export const CTFGame = styled(RouterLink)` 20 | /* RouterLink */ 21 | `; 22 | export const CyberGamesImage = styled.img` 23 | border-radius: 10px; 24 | height: 200px; 25 | width: auto; 26 | display: flex; 27 | margin: 0 30px; 28 | border: 1px solid #545454; 29 | 30 | &:hover { 31 | transform: scale(1.1); 32 | border: 2px solid #72b74c; 33 | transition: all 0.2s ease-in-out; 34 | } 35 | `; 36 | -------------------------------------------------------------------------------- /src/components/Other/CyberGames/OSINTGame/OSINTGame.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { OSINTGameContainer } from "./OSINTGameElements"; 3 | import { Section } from "src/components/Resources/WriteUps/WriteUpsElements"; 4 | import { Heading } from "src/components/Other/Community/CommunityElements"; 5 | 6 | const OSINTGame = () => { 7 | return ( 8 | 9 |
    10 | Coming soon 11 |
    12 |     13 | ); 14 | }; 15 | 16 | export default OSINTGame; 17 | -------------------------------------------------------------------------------- /src/components/Other/CyberGames/OpensourceProjects/OpensourceProjectsData.jsx: -------------------------------------------------------------------------------- 1 | const OpensourceProjectsData = [ 2 | { 3 | id: 1, 4 | title: "thecyberhub.org", 5 | link: "https://github.com/th3cyb3rhub/TheCyberHUB", 6 | content: " Community website.", 7 | tags: ["React", "Website"], 8 | }, 9 | { 10 | id: 2, 11 | title: "thecyberhub-app", 12 | link: "https://github.com/th3cyb3rhub/thecyberhub-app", 13 | content: "Thecyberhub mobile app.", 14 | tags: ["React Native", "Website"], 15 | }, 16 | { 17 | id: 3, 18 | title: "ThecyberX", 19 | link: "https://github.com/th3cyb3rhub/ThecyberX", 20 | content: "Cyber security web extension.", 21 | tags: ["React", "NextJs", "Web Extension"], 22 | }, 23 | { 24 | id: 4, 25 | title: "thecyberbot-discord", 26 | link: "https://github.com/th3cyb3rhub/thecyberbot-discord", 27 | content: "Thecyberbot Discord", 28 | tags: ["Python", "Bot", "Discord"], 29 | }, 30 | ]; 31 | 32 | export default OpensourceProjectsData; 33 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/ComingSoon.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "src/index.css"; 3 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 4 | const ComingSoon = () => { 5 | return ( 6 | 7 |

    Coming Soon

    8 |     9 | ); 10 | }; 11 | 12 | export default ComingSoon; 13 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/Layout/LayoutElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | min-height: 100vh; 6 | height: fit-content; 7 | flex-direction: column; 8 | `; 9 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/Layout/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container } from "./LayoutElements"; 3 | 4 | const Layout = () => { 5 | return ; 6 | }; 7 | 8 | export default Layout; 9 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/Spinner/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ScaleLoader } from "react-spinners"; 3 | 4 | const Loader = () => { 5 | return ( 6 |
    7 | 8 |
    9 | ); 10 | }; 11 | 12 | export default Loader; 13 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/Spinner/LoadingSpinner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 3 | import { CircleSpinner } from "react-spinners-kit"; 4 | 5 | const LoadingSpinner = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default LoadingSpinner; 14 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/Spinner/Spinner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ScaleLoader } from "react-spinners"; 3 | import { SpinnerSection } from "./SpinnerElements"; 4 | const Spinner = ({ loading, key }) => { 5 | return ( 6 |
    7 | {/* */} 8 | 9 | 10 | 11 |
    12 | ); 13 | }; 14 | 15 | export default Spinner; 16 | -------------------------------------------------------------------------------- /src/components/Other/MixComponents/Spinner/SpinnerElements.jsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from "styled-components"; 2 | export const SpinnerSection = styled.div` 3 | text-align: center; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | height: 100vh; 9 | `; 10 | 11 | // Define the keyframes for the spinning animation 12 | const spinAnimation = keyframes` 13 | 0% { 14 | transform: rotate(0deg); 15 | } 16 | 100% { 17 | transform: rotate(360deg); 18 | } 19 | `; 20 | 21 | export const SpinnerImage = styled.img` 22 | animation: ${spinAnimation} 10s linear infinite; 23 | width: 15px; 24 | text-align: center; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | font-size: 12px; 29 | color: #999; 30 | word-break: break-all; 31 | `; 32 | -------------------------------------------------------------------------------- /src/components/Other/NoUser.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 3 | import { 4 | ButtonText, 5 | LoginToAccess, 6 | NavigationButtonContainer, 7 | } from "src/components/Resources/LearningPath/LearningPathElements"; 8 | import { RouterLink } from "src/components/Header/UserOptions/UserOptionsElements"; 9 | 10 | export const NoUser = () => { 11 | return ( 12 | 13 | {"Please login to access this page".toUpperCase()} 14 | 15 | 16 | Login 17 | 18 | 19 | Register 20 | 21 | 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/Other/ScrollToTop.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { useLocation } from "react-router"; 3 | 4 | const ScrollToTop = (props) => { 5 | const location = useLocation(); 6 | useEffect(() => { 7 | window.scrollTo(0, 0); 8 | }, [location]); 9 | 10 | return
    {props.children}
    ; 11 | }; 12 | 13 | export default ScrollToTop; 14 | -------------------------------------------------------------------------------- /src/components/Other/Security/ResponsibleDisclosureElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | margin: 20px; 5 | `; 6 | 7 | export const Title = styled.h1` 8 | font-size: 24px; 9 | `; 10 | 11 | export const Paragraph = styled.p` 12 | margin-bottom: 10px; 13 | `; 14 | 15 | export const List = styled.ul` 16 | list-style-type: disc; 17 | margin-left: 20px; 18 | `; 19 | 20 | export const ListItem = styled.li` 21 | margin-bottom: 5px; 22 | `; 23 | -------------------------------------------------------------------------------- /src/components/Other/Security/RulesOfEngagementElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const RulesOfEngagementContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | width: 100%; 9 | max-width: 1500px; 10 | gap: 25px; 11 | `; 12 | 13 | export const RulesOfEngagementContentSection = styled.div` 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | width: 100%; 19 | gap: 25px; 20 | `; 21 | 22 | export const RulesOfEngagementContentList = styled.div` 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: center; 26 | align-items: center; 27 | width: 100%; 28 | padding: 25px; 29 | gap: 25px; 30 | background: #090909; 31 | `; 32 | 33 | export const ROEHeading = styled.h1` 34 | color: #fff; 35 | text-align: center; 36 | max-width: 800px; 37 | font-size: 20px; 38 | `; 39 | 40 | export const ROEDescription = styled.p` 41 | white-space: pre-line; 42 | text-align: start; 43 | width: 100%; 44 | max-width: 800px; 45 | 46 | @media screen and (width <= 400px) { 47 | font-size: 14px; 48 | } 49 | `; 50 | -------------------------------------------------------------------------------- /src/components/Other/Security/SecurityNavigation.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InternshipHeader, InternshipHeading } from "src/components/Opportunities/Internship/InternshipElements"; 3 | import { NavigationContainer, NavigationLink } from "./SecurityElements"; 4 | 5 | const SecurityNavigation = ({ heading }) => { 6 | return ( 7 | <> 8 | 9 | {heading} 10 | 11 | 12 | 13 | Security 14 | Rules of Engagement 15 | Hall of Fame 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default SecurityNavigation; 22 | -------------------------------------------------------------------------------- /src/components/Other/Security/SecurityRoutes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import Security from "./Security"; 4 | import HallOfFame from "./HallOfFame"; 5 | import RulesOfEngagement from "./RulesOfEngagement"; 6 | 7 | const SecurityRoutes = () => { 8 | return ( 9 | 10 | } /> 11 | } /> 12 | } /> 13 | 14 | ); 15 | }; 16 | 17 | export default SecurityRoutes; 18 | -------------------------------------------------------------------------------- /src/components/Other/UnderMaintenance/UnderMaintenance.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UnderMaintenanceContainer, UnderMaintenanceLogo } from "./UnderMaintenanceElements"; 3 | 4 | import UnderMaintenancePNG from "src/assets/underMaintenance.png"; 5 | const UnderMaintenance = () => { 6 | return ( 7 | 8 | 9 |

    Under Maintenance

    10 |     11 | ); 12 | }; 13 | 14 | export default UnderMaintenance; 15 | -------------------------------------------------------------------------------- /src/components/Resources/Checklist/ChecklistElements.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Resources/Checklist/ChecklistElements.jsx -------------------------------------------------------------------------------- /src/components/Resources/Hacklist/HacklistData/OWASP_TOP_10/XSS.md: -------------------------------------------------------------------------------- 1 | # XSS 2 | 3 | XSS is cross site scripting 4 | -------------------------------------------------------------------------------- /src/components/Resources/Hacklist/HacklistData/OWASP_TOP_10/owasp10.md: -------------------------------------------------------------------------------- 1 | # owasp 10 2 | 3 | ## Owasp is Bee 4 | -------------------------------------------------------------------------------- /src/components/Resources/Hacklist/HacklistData/Web_Enumeration_Files/DIR.md: -------------------------------------------------------------------------------- 1 | # Dir 2 | 3 | Directory brute forcing 4 | -------------------------------------------------------------------------------- /src/components/Resources/LearningPath/text.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/Resources/LearningPath/text.jsx -------------------------------------------------------------------------------- /src/components/Resources/Methodology/MethodologyElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | export const MainTitleContainer = styled.div` 3 | display: flex; 4 | flex-direction: column; 5 | width: 820px; 6 | justify-content: center; 7 | align-items: center; 8 | `; 9 | export const MethodologyHeading = styled.h2` 10 | display: flex; 11 | justify-content: space-between; 12 | background: rgb(14 14 14); 13 | padding: 15px; 14 | border: 1px solid #343434; 15 | border-radius: 5px; 16 | color: #eaeaea; 17 | cursor: pointer; 18 | `; 19 | 20 | export const HideDataContainer = styled.div` 21 | display: none; 22 | padding: 20px; 23 | background: rgb(26 28 29); 24 | margin: 10px 0; 25 | `; 26 | -------------------------------------------------------------------------------- /src/components/Resources/Quiz/Categories/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useNavigate } from "react-router"; 3 | 4 | import { CardTool, CardToolHeading, ContainerTools } from "src/components/Tools/ToolsElements"; 5 | import { CategoriesButtonData } from "./CategoriesButtonData"; 6 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 7 | 8 | export default function Categories() { 9 | const navigator = useNavigate(); 10 | return ( 11 | 12 |
    13 | 14 | {/* */} 15 | {/* */} 16 | {CategoriesButtonData.map((type) => ( 17 | { 20 | navigator("/quiz/" + type.type); 21 | }} 22 | > 23 | {type.value} 24 | 25 | ))} 26 | 27 |
    28 |     29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/components/Resources/Quiz/Categories/CategoriesButtonData.jsx: -------------------------------------------------------------------------------- 1 | export const CategoriesButtonData = [ 2 | { type: "CBQ", value: "Basics" }, 3 | { type: "Phishing", value: "Phishing" }, 4 | { type: "PSQ", value: "Physical Security" }, 5 | { type: "Ransomware", value: "Ransomware" }, 6 | { type: "SRAQ", value: "Secure Remote Access" }, 7 | { type: "TSSQ", value: "Tech Support Scams" }, 8 | { type: "VSQ", value: "Vendor Security" }, 9 | ]; 10 | -------------------------------------------------------------------------------- /src/components/Resources/Quiz/Quiz.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Categories from "./Categories/Categories"; 3 | import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements"; 4 | import { QuizContainer } from "./QuizElements"; 5 | import HeadingBanner from "src/components/Common/HeadingBanner/HeadingBanner"; 6 | 7 | const Quiz = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default Quiz; 19 | -------------------------------------------------------------------------------- /src/components/Resources/Quiz/QuizElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const QuizContainer = styled.div` 4 | color: white; 5 | font-weight: 600; 6 | flex-direction: column; 7 | width: 100%; 8 | max-width: 1500px; 9 | height: min-content; 10 | border-radius: 10px; 11 | box-shadow: 10px 10px 42px 0 rgb(0 0 0 / 75%); 12 | display: flex; 13 | 14 | @media screen and (width <= 800px) { 15 | margin: 50px 30px; 16 | } 17 | `; 18 | -------------------------------------------------------------------------------- /src/components/Resources/Resources.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Section } from "./WriteUps/WriteUpsElements"; 3 | import Roadmaps from "src/components/Learn/Roadmaps/Roadmaps"; 4 | 5 | const Resources = () => { 6 | return ( 7 |
    8 | 9 |

    Many things are on the way 🚀

    10 |
    11 | ); 12 | }; 13 | 14 | export default Resources; 15 | -------------------------------------------------------------------------------- /src/components/Resources/Submit/Submit.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Section } from "src/components/Resources/WriteUps/WriteUpsElements"; 3 | const Submit = () => { 4 |
    5 |

    Hi

    6 |
    ; 7 | }; 8 | export default Submit; 9 | -------------------------------------------------------------------------------- /src/components/Resources/TermsAndConditionElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const TermsAndConditionContainer = styled.div` 5 | max-width: 1200px; 6 | background: #0a0a0a; 7 | padding: 25px; 8 | `; 9 | 10 | export const TermsHeading = styled.h3` 11 | font-family: Roboto, sans-serif; 12 | padding: 5px 25px 0; 13 | color: #666; 14 | `; 15 | export const TermsDescription = styled.p` 16 | padding: 5px 25px 25px; 17 | color: #b2b2b2; 18 | `; 19 | 20 | export const List = styled.li` 21 | margin: 0 15px; 22 | `; 23 | export const RouterLink = styled(Link)` 24 | text-decoration: none; 25 | color: #87ff25; 26 | margin: 0 5px; 27 | 28 | &:hover { 29 | transform: scale(1.1); 30 | } 31 | `; 32 | -------------------------------------------------------------------------------- /src/components/Resources/WriteUps/WriteUpsData.jsx: -------------------------------------------------------------------------------- 1 | export const writeUpsData = [ 2 | { 3 | id: "IDOR", 4 | authorImage: "https://miro.medium.com/fit/c/176/176/1*WrWKJOzibjROkAF5S5Qn8w.jpeg", 5 | authorUsername: "Steiner255", 6 | date: "5 Days Ago", 7 | sectionHeading: "IDOR", 8 | writeUpHeading: "Another day, Another IDOR vulnerability — $5000 Reddit Bug Bounty", 9 | desc: "Write Ups", 10 | writeThumbnail: "https://miro.medium.com/fit/c/224/224/1*cRu3ETnHdt6n-z96oedxPQ.png", 11 | tag: "Bug Bounty", 12 | timeRead: "2 min read", 13 | }, 14 | ]; 15 | -------------------------------------------------------------------------------- /src/components/Tools/BinaryExploits/BinaryExploitsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ExploitTagsContainer = styled.div` 4 | display: flex; 5 | flex-flow: row wrap; 6 | justify-content: center; 7 | gap: 10px; 8 | max-width: 800px; 9 | `; 10 | 11 | export const ExploitTag = styled.button` 12 | padding: 10px; 13 | border: solid 1px #212121; 14 | border-radius: 5px; 15 | background-color: ${(props) => (props.activeFunction ? "#ff6b08" : "black")}; 16 | color: ${(props) => (props.activeFunction ? "black" : "white")}; 17 | `; 18 | -------------------------------------------------------------------------------- /src/components/Tools/EncoderDecoder.jsx/EncoderCodeElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import React from "react"; 3 | import { toast } from "react-toastify"; 4 | 5 | export const Container = styled.div` 6 | height: 50px; 7 | background: #131313; 8 | margin-bottom: 10px; 9 | border-radius: 5px; 10 | display: flex; 11 | flex-direction: row; 12 | justify-content: space-between; 13 | align-items: center; 14 | padding: 5px; 15 | overflow: clip; 16 | color: white; 17 | `; 18 | 19 | const CopyButton = styled.button` 20 | padding: 5px 10px; 21 | background-color: #ff6b08; 22 | color: white; 23 | border: none; 24 | border-radius: 3px; 25 | cursor: pointer; 26 | `; 27 | 28 | export const CodeContainer = ({ text, title }) => { 29 | function copyToClipboard(text) { 30 | navigator.clipboard.writeText(text).then(() => { 31 | toast.success("Copied to clipboard!"); 32 | }); 33 | } 34 | 35 | return ( 36 | <> 37 |

    {title}

    38 | 39 |

    {text}

    40 | copyToClipboard(text)}>Copy 41 |     42 | 43 | ); 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/Tools/Reconage/Reconage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { ReconageContainer } from "src/components/Tools/Reconage/ReconageElements.jsx"; 4 | import ReconTools from "src/components/Tools/Reconage/ReconTools/ReconTools.jsx"; 5 | 6 | const Reconage = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default Reconage; 15 | -------------------------------------------------------------------------------- /src/components/Tools/Reconage/ReconageElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | // import { CgSoftwareDownload } from "react-icons/cg"; 3 | // import { MdContentCopy } from "react-icons/md"; 4 | 5 | export const ReconageContainer = styled.div` 6 | display: flex; 7 | flex-direction: row; 8 | justify-content: space-between; 9 | align-items: start; 10 | width: 100%; 11 | color: #d0d7de; 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/Tools/Reconage/ReconageSidebarElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ReconageSidebarContainer = styled.div` 4 | width: 250px; /* Set the width of the sidebar */ 5 | background-color: #2c3e50; /* Dark background color */ 6 | color: #ecf0f1; /* Light text color */ 7 | padding: 20px; 8 | box-shadow: 0 2px 4px rgb(0 0 0 / 20%); /* Add shadow for better visual effect */ 9 | height: 100%; 10 | `; 11 | 12 | export const SidebarTitle = styled.div` 13 | font-size: 24px; 14 | font-weight: bold; 15 | display: flex; 16 | align-items: center; 17 | gap: 10px; 18 | margin-bottom: 30px; /* Space between title and list */ 19 | `; 20 | 21 | export const SidebarList = styled.ul` 22 | list-style: none; 23 | padding: 0; 24 | margin: 0; 25 | `; 26 | 27 | export const SidebarItem = styled.li` 28 | font-size: 18px; 29 | padding: 10px; 30 | cursor: pointer; 31 | border-radius: 5px; 32 | color: #fff; /* Change text color on hover */ 33 | transition: 34 | background-color 0.3s, 35 | color 0.3s; 36 | 37 | &:hover { 38 | background-color: #34495e; /* Darker background on hover */ 39 | color: #fff; /* Change text color on hover */ 40 | } 41 | `; 42 | -------------------------------------------------------------------------------- /src/components/Tools/ReverseShell/encodeCode.jsx: -------------------------------------------------------------------------------- 1 | const encodeCode = ({ type, code }) => { 2 | const payload = code; 3 | 4 | let encodedValue; 5 | 6 | switch (type) { 7 | case "base64": 8 | encodedValue = btoa(payload); 9 | break; 10 | case "url": 11 | encodedValue = encodeURIComponent(payload); 12 | break; 13 | default: 14 | console.error("Invalid encoding type"); 15 | return; 16 | } 17 | 18 | return encodedValue; 19 | }; 20 | 21 | export default encodeCode; 22 | -------------------------------------------------------------------------------- /src/components/WebSecurity/CodeReviews/CodeReview.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { codeReviewData } from "./CodeReviewData"; 3 | import Labs from "src/components/WebSecurity/Common/Labs/Labs"; 4 | 5 | const CodeReview = () => { 6 | return ; 7 | }; 8 | 9 | export default CodeReview; 10 | -------------------------------------------------------------------------------- /src/components/WebSecurity/CodeReviews/CodeReviewLab.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Room from "src/components/WebSecurity/Common/LabsRoom/LabsRoom"; 3 | import { codeReviewData } from "./CodeReviewData"; 4 | 5 | const CodeReviewLab = () => { 6 | return ; 7 | }; 8 | 9 | export default CodeReviewLab; 10 | -------------------------------------------------------------------------------- /src/components/WebSecurity/Common/Hint.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RiLightbulbFlashFill } from "react-icons/ri"; 3 | import { HintContainer, HintIcon } from "./HintElements"; 4 | 5 | const Hint = () => { 6 | return ( 7 | 8 | Show Hint 9 | 10 | 11 | 12 | {/* */} 13 | 14 | ); 15 | }; 16 | 17 | export default Hint; 18 | -------------------------------------------------------------------------------- /src/components/WebSecurity/Common/HintElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const HintContainer = styled.div` 4 | display: flex; 5 | justify-content: space-between; 6 | text-decoration: none; 7 | padding: 10px 10px 10px 15px; 8 | background-color: #151515; 9 | border: 1px solid #343434; 10 | color: #eaeaea; 11 | border-radius: 5px; 12 | cursor: pointer; 13 | `; 14 | 15 | export const SolutionContainer = styled.div` 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | text-decoration: none; 20 | padding: 10px 10px 10px 15px; 21 | background-color: #151515; 22 | border: 1px solid #343434; 23 | color: #eaeaea; 24 | border-radius: 5px; 25 | cursor: pointer; 26 | gap: 20px; 27 | `; 28 | 29 | export const HintIcon = styled.div` 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | background: #ed652f; 34 | padding: 5px; 35 | border: 1px solid #ed652f; 36 | border-radius: 5px; 37 | color: black; 38 | `; 39 | -------------------------------------------------------------------------------- /src/components/WebSecurity/Common/Labs/LabsElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const LabContainer = styled.div` 4 | width: 100%; 5 | 6 | /* height: 700px; */ 7 | display: flex; 8 | flex-direction: row; 9 | align-items: flex-start; 10 | gap: 15px; 11 | `; 12 | export const LabCategory = styled.div` 13 | background-color: rgb(19 19 19); 14 | width: 287px; 15 | padding: 20px; 16 | margin-right: 20px; 17 | `; 18 | export const RoomContainer = styled.div` 19 | width: 100%; 20 | height: 100%; 21 | display: flex; 22 | flex-direction: column; 23 | gap: 15px; 24 | 25 | .header { 26 | display: flex; 27 | flex-direction: row; 28 | justify-content: space-between; 29 | gap: 20px; 30 | padding: 0; 31 | margin: 0; 32 | } 33 | 34 | .room-cards-container { 35 | display: flex; 36 | flex-flow: row wrap; 37 | justify-content: space-between; 38 | gap: 20px; 39 | padding: 0; 40 | margin: 0; 41 | } 42 | `; 43 | export const LevelContainer = styled.div` 44 | background: #090909; 45 | width: 390px; 46 | height: 42px; 47 | display: flex; 48 | flex-direction: row; 49 | border-radius: 7px; 50 | overflow: clip; 51 | `; 52 | -------------------------------------------------------------------------------- /src/components/WebSecurity/Common/Labs/RoomCardElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const RoomCardContainer = styled.div` 4 | width: 100%; 5 | height: 150px; 6 | border-radius: 15px; 7 | overflow: clip; 8 | `; 9 | export const RoomTags = styled.label` 10 | margin-left: 10px; 11 | font-size: 15px; 12 | background: #131313; 13 | padding: 7px; 14 | border-radius: 7px; 15 | `; 16 | export const LevelButton = styled.button` 17 | height: 100%; 18 | width: 100%; 19 | gap: 10px; 20 | padding: 10px; 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/WebSecurity/Common/SubmissionBox.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { SubmissionBoxContainer, SubmitButton, Input, InputSection } from "./SubmissionBoxElements"; 3 | import { PiUploadDuotone } from "react-icons/pi"; 4 | 5 | const SubmissionBox = ({ submitType, onSubmit, setUserInput }) => { 6 | const [inputValue, setInputValue] = useState(""); 7 | 8 | const handleInputChange = (event) => { 9 | setInputValue(event.target.value); 10 | setUserInput(event.target.value); 11 | }; 12 | 13 | const handleSubmit = () => { 14 | onSubmit(); 15 | setInputValue(""); 16 | }; 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | }; 29 | 30 | export default SubmissionBox; 31 | -------------------------------------------------------------------------------- /src/components/WebSecurity/Common/SubmissionBoxElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const SubmissionBoxContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | gap: 20px; 7 | 8 | /* padding: 20px; */ 9 | `; 10 | 11 | export const InputSection = styled.div` 12 | display: flex; 13 | flex-direction: row; 14 | gap: 10px; 15 | width: 100%; 16 | `; 17 | 18 | export const Input = styled.input` 19 | padding: 5px 15px; 20 | width: 100%; 21 | height: 100%; 22 | flex: 1; 23 | background: #131313; 24 | color: #fff; 25 | border: 1px solid #464646; 26 | border-radius: 5px; 27 | font-size: 18px; 28 | outline: none; 29 | 30 | &::placeholder { 31 | color: #464646; 32 | } 33 | 34 | &:focus { 35 | border: 1px solid #ff6b08; 36 | } 37 | 38 | &:hover { 39 | border: 1px solid #ff6b08; 40 | } 41 | 42 | &:active { 43 | border: 1px solid #ff6b08; 44 | } 45 | `; 46 | 47 | export const SubmitButton = styled.button` 48 | padding: 10px; 49 | background-color: #ff6b08; 50 | color: black; 51 | border: none; 52 | border-radius: 5px; 53 | cursor: pointer; 54 | `; 55 | -------------------------------------------------------------------------------- /src/components/WebSecurity/CrackMe/CrackMe.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Lab from "src/components/WebSecurity/Common/Labs/Labs"; 3 | import { crackmeLabData } from "./CrackMeData"; 4 | const CrackMe = () => { 5 | return ; 6 | }; 7 | 8 | export default CrackMe; 9 | -------------------------------------------------------------------------------- /src/components/WebSecurity/CrackMe/CrackMeRoom.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { crackmeLabData } from "./CrackMeData"; 3 | import Room from "src/components/WebSecurity/Common/LabsRoom/LabsRoom"; 4 | 5 | const CrackMeRoom = () => { 6 | return ; 7 | }; 8 | 9 | export default CrackMeRoom; 10 | -------------------------------------------------------------------------------- /src/components/WebSecurity/SecureCode/SecureCodeElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ReconageContainer = styled.div` 4 | display: flex; 5 | gap: 20px; 6 | padding: 20px; 7 | `; 8 | 9 | export const EditorContainer = styled.div` 10 | flex: 1; 11 | `; 12 | 13 | export const ExplanationContainer = styled.div` 14 | flex: 1; 15 | overflow-y: auto; 16 | `; 17 | 18 | export const SubmitButton = styled.button` 19 | margin-top: 10px; 20 | padding: 10px 20px; 21 | background-color: #4caf50; 22 | color: white; 23 | border: none; 24 | cursor: pointer; 25 | 26 | &:hover { 27 | background-color: #45a049; 28 | } 29 | `; 30 | 31 | export const ResultMessage = styled.p` 32 | color: ${(props) => (props.success ? "green" : "red")}; 33 | font-weight: bold; 34 | `; 35 | -------------------------------------------------------------------------------- /src/components/WebSecurity/WebSecurityElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const WebSecurityContainer = styled.div` 4 | width: 100%; 5 | max-width: 1500px; 6 | height: 100%; 7 | background-color: #090909; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/WebSecurity/WebSecurityLabs/LabsRoomData.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/th3cyb3rhub/TheCyberHub/ffec088fd4993f45ad28d89e6ee70d8b7c780d5b/src/components/WebSecurity/WebSecurityLabs/LabsRoomData.jsx -------------------------------------------------------------------------------- /src/components/WebSecurity/WebSecurityLabs/WebSecurityLabs.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Labs from "src/components/WebSecurity/Common/Labs/Labs"; 3 | import { LabData } from "src/components/WebSecurity/Common/Labs/LabsData"; 4 | 5 | const WebSecurityLabs = () => { 6 | return ; 7 | }; 8 | 9 | export default WebSecurityLabs; 10 | -------------------------------------------------------------------------------- /src/components/WebSecurity/WebSecurityLabs/WebSecurityRoom.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Room from "src/components/WebSecurity/Common/LabsRoom/LabsRoom"; 3 | import { LabData } from "src/components/WebSecurity/Common/Labs/LabsData"; 4 | 5 | const WebSecurityRoom = () => { 6 | return ; 7 | }; 8 | 9 | export default WebSecurityRoom; 10 | -------------------------------------------------------------------------------- /src/components/WebSecurity/WebSecurityTopics/SubTopicElements.jsx: -------------------------------------------------------------------------------- 1 | // import styled from 'styled-components'; 2 | // import { Link } from 'react-router-dom'; 3 | -------------------------------------------------------------------------------- /src/components/WebSecurity/WebSecurityTopics/TopicsElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const StyledTopicsContainer = styled.div` 4 | width: 100%; 5 | max-width: 1500px; 6 | height: 100%; 7 | background-color: #090909; 8 | display: flex; 9 | flex-direction: row; 10 | gap: 20px; 11 | `; 12 | 13 | export const StyledTopicCard = styled.div` 14 | display: grid; 15 | grid-template-columns: 1fr; 16 | grid-template-rows: 1fr; 17 | align-items: center; 18 | justify-content: center; 19 | gap: 10px; 20 | width: 300px; 21 | padding: 20px; 22 | border-radius: 10px; 23 | background: transparent; 24 | border: 1px solid rgb(255 255 255 / 18%); 25 | 26 | &:hover { 27 | transition: all 0.3s ease-in-out; 28 | transform: translateY(-5px); 29 | background: #1f0b02; 30 | } 31 | `; 32 | 33 | export const StyledTag = styled.span` 34 | display: inline-block; 35 | margin: 2px; 36 | padding: 4px 8px; 37 | background: rgb(61 61 61 / 53%); 38 | border-radius: 4px; 39 | 40 | /* border: 1px solid #444; */ 41 | color: #a1a1a1; /* Tag Text Color */ 42 | `; 43 | -------------------------------------------------------------------------------- /src/features/apiStatus.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import { getApiUrl } from "./apiUrl"; 4 | 5 | const apiStatus = () => { 6 | const [isApiLoading, setIsApiLoading] = useState(false); 7 | const [isApiWorking, setIsApiWorking] = useState(false); 8 | 9 | useEffect(() => { 10 | const checkApiStatus = async () => { 11 | try { 12 | setIsApiLoading(true); 13 | const response = await axios.get(getApiUrl("api/status")); 14 | if (response.status === 200) { 15 | setIsApiWorking(true); 16 | } 17 | setIsApiLoading(false); 18 | } catch (error) { 19 | setIsApiWorking(false); 20 | setIsApiLoading(false); 21 | } 22 | }; 23 | 24 | checkApiStatus(); 25 | }, []); 26 | 27 | return { isApiLoading, isApiWorking }; 28 | }; 29 | 30 | export default apiStatus; 31 | -------------------------------------------------------------------------------- /src/features/blogs/blogLikes/blogLikesServices.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { getApiUrl } from "src/features/apiUrl"; 3 | 4 | const API_URL = getApiUrl("api/blogLikes/"); 5 | 6 | // Create new Like 7 | const addblogLike = async (likeData, token) => { 8 | const config = { 9 | headers: { 10 | Authorization: `Bearer ${token}`, 11 | }, 12 | }; 13 | 14 | const response = await axios.post(API_URL + "add", likeData, config); 15 | 16 | return response.data; 17 | }; 18 | 19 | // Delete user Like 20 | const removeblogLike = async (likeData, token) => { 21 | const config = { 22 | headers: { 23 | Authorization: `Bearer ${token}`, 24 | }, 25 | }; 26 | 27 | const response = await axios.post(API_URL + "remove", likeData, config); 28 | 29 | return response.data; 30 | }; 31 | 32 | // Get user Likes 33 | const getblogLikes = async (likesData) => { 34 | const response = await axios.get(API_URL + "get", likesData); 35 | 36 | return response.data; 37 | }; 38 | 39 | const LikeService = { 40 | addblogLike, 41 | removeblogLike, 42 | getblogLikes, 43 | }; 44 | 45 | export default LikeService; 46 | -------------------------------------------------------------------------------- /src/features/bookmarks/bookmark.js: -------------------------------------------------------------------------------- 1 | import { useSelector, useDispatch } from "react-redux"; 2 | import { addBookmark, removeBookmark } from "./bookmarkSlice"; 3 | 4 | const useBookmark = ({ itemId }) => { 5 | const dispatch = useDispatch(); 6 | const bookmarks = useSelector((state) => state.bookmarks); 7 | const isBookmarked = bookmarks.includes(itemId); 8 | 9 | const handleBookmark = () => { 10 | if (isBookmarked) { 11 | dispatch(removeBookmark({ itemId })); 12 | } else { 13 | dispatch(addBookmark({ itemId })); 14 | } 15 | }; 16 | 17 | return { isBookmarked, handleBookmark }; 18 | }; 19 | 20 | export default useBookmark; 21 | -------------------------------------------------------------------------------- /src/features/checkTimestamps.js: -------------------------------------------------------------------------------- 1 | import { getUserDetail } from "./userDetail/userDetailSlice"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { useEffect } from "react"; 4 | import apiStatus from "./apiStatus"; 5 | 6 | const checkTimestamps = ({ user }) => { 7 | const { isApiLoading, isApiWorking } = apiStatus(); 8 | const dispatch = useDispatch(); 9 | const { userDetail, isLoading } = useSelector((state) => state.userDetail); 10 | 11 | useEffect(() => { 12 | dispatch(getUserDetail(user?.username)); 13 | }, [dispatch, user?.username]); 14 | 15 | if (isApiLoading || isLoading) { 16 | return null; 17 | } 18 | 19 | if (!isApiWorking || !userDetail) { 20 | return null; 21 | } 22 | 23 | return userDetail.visitTimestamps; 24 | }; 25 | 26 | export default checkTimestamps; 27 | -------------------------------------------------------------------------------- /src/features/feeds/feedLikes/feedLikesServices.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { getApiUrl } from "src/features/apiUrl"; 3 | 4 | const API_URL = getApiUrl("api/feedLikes/"); 5 | 6 | // Create new Like 7 | const addFeedLike = async (likeData, token) => { 8 | const config = { 9 | headers: { 10 | Authorization: `Bearer ${token}`, 11 | }, 12 | }; 13 | 14 | const response = await axios.post(API_URL + "add", likeData, config); 15 | 16 | return response.data; 17 | }; 18 | 19 | // Delete user Like 20 | const removeFeedLike = async (likeData, token) => { 21 | const config = { 22 | headers: { 23 | Authorization: `Bearer ${token}`, 24 | }, 25 | }; 26 | 27 | const response = await axios.post(API_URL + "remove", likeData, config); 28 | 29 | return response.data; 30 | }; 31 | 32 | // Get user Likes 33 | const getFeedLikes = async (likesData) => { 34 | const response = await axios.get(API_URL + "get", likesData); 35 | 36 | return response.data; 37 | }; 38 | 39 | const LikeService = { 40 | addFeedLike, 41 | removeFeedLike, 42 | getFeedLikes, 43 | }; 44 | 45 | export default LikeService; 46 | -------------------------------------------------------------------------------- /src/features/feeds/views/viewServices.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { getApiUrl } from "src/features/apiUrl"; 3 | 4 | const API_URL = getApiUrl("api/views/"); 5 | 6 | // Create new View 7 | const updateView = async (viewData, token) => { 8 | const config = { 9 | headers: { 10 | Authorization: `Bearer ${token}`, 11 | }, 12 | }; 13 | 14 | const response = await axios.post(API_URL + "add", viewData, config); 15 | 16 | return response.data; 17 | }; 18 | 19 | // Get user Views 20 | const getViews = async () => { 21 | const response = await axios.get(API_URL + "get"); 22 | return response.data; 23 | }; 24 | 25 | const viewService = { 26 | updateView, 27 | getViews, 28 | }; 29 | 30 | export default viewService; 31 | -------------------------------------------------------------------------------- /src/features/goals/goalService.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { getApiUrl } from "src/features/apiUrl"; 3 | 4 | const API_URL = getApiUrl("api/goals/"); 5 | 6 | // Create new goal 7 | const createGoal = async (goalData, token) => { 8 | const config = { 9 | headers: { 10 | Authorization: `Bearer ${token}`, 11 | }, 12 | }; 13 | 14 | const response = await axios.post(API_URL, goalData, config); 15 | 16 | return response.data; 17 | }; 18 | 19 | // Get user goals 20 | const getGoals = async (token) => { 21 | const config = { 22 | headers: { 23 | Authorization: `Bearer ${token}`, 24 | }, 25 | }; 26 | 27 | const response = await axios.get(API_URL, config); 28 | 29 | return response.data; 30 | }; 31 | 32 | // Delete user goal 33 | const deleteGoal = async (goalId, token) => { 34 | const config = { 35 | headers: { 36 | Authorization: `Bearer ${token}`, 37 | }, 38 | }; 39 | 40 | const response = await axios.delete(API_URL + goalId, config); 41 | 42 | return response.data; 43 | }; 44 | 45 | const goalService = { 46 | createGoal, 47 | getGoals, 48 | deleteGoal, 49 | }; 50 | 51 | export default goalService; 52 | -------------------------------------------------------------------------------- /src/features/imageUploadService.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { toast } from "react-toastify"; 3 | import { getApiUrl } from "src/features/apiUrl"; 4 | 5 | const API_URL = getApiUrl("api/upload"); 6 | 7 | export const uploadImages = async (formData, token) => { 8 | const config = { 9 | headers: { 10 | Authorization: `Bearer ${token}`, 11 | }, 12 | }; 13 | 14 | try { 15 | const response = await axios.post(API_URL, formData, config); 16 | toast.success(response.data); 17 | return response.data; 18 | } catch (err) { 19 | if (err.response) { 20 | switch (err.response.status) { 21 | case 429: 22 | toast.error("You are uploading images too fast. Please wait a few seconds and try again."); 23 | break; 24 | case 401: 25 | toast.error("Unauthorized. Please log in again."); 26 | break; 27 | default: 28 | toast.error("An error occurred while uploading images. Please try again."); 29 | } 30 | } else { 31 | toast.error("Network error. Please check your connection and try again."); 32 | } 33 | throw err; 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /src/features/resetPassword/resetPasswordService.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { getApiUrl } from "src/features/apiUrl"; 3 | 4 | const API_URL = getApiUrl("api/users/"); 5 | 6 | const forgotPassword = async (userData) => { 7 | try { 8 | const response = await axios.post(`${API_URL}forgot-password`, userData); 9 | return response.data; 10 | } catch (error) { 11 | throw error.response.data; 12 | } 13 | }; 14 | 15 | // Service function for resetting password with token 16 | const resetPassword = async (userData) => { 17 | try { 18 | const response = await axios.put(`${API_URL}reset-password`, userData); 19 | return response.data; 20 | } catch (error) { 21 | throw error.response.data; 22 | } 23 | }; 24 | 25 | const resetPasswordService = { 26 | forgotPassword, 27 | resetPassword, 28 | }; 29 | 30 | export default resetPasswordService; 31 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | margin: 0; 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", 8 | "Droid Sans", "Helvetica Neue", sans-serif; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; 15 | } 16 | 17 | ::selection { 18 | /*background-color: #70ff00;*/ 19 | /*color: #000000;*/ 20 | background-color: #ff6b08; 21 | color: #000000; 22 | } 23 | 24 | @media (width <= 980px) { 25 | .hide-nav { 26 | display: none !important; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { BrowserRouter, HashRouter } from "react-router-dom"; 4 | import { Provider } from "react-redux"; 5 | 6 | import App from "./App"; 7 | import "./index.css"; 8 | import store from "./app/store"; 9 | 10 | const rootElement = document.getElementById("root"); 11 | export const webEnv = import.meta.env.VITE_WEB_ENV || "production"; 12 | const hostname = window.location.hostname; 13 | const isElectron = navigator.userAgent.toLowerCase().includes(" electron/"); 14 | 15 | if (!rootElement) { 16 | throw new Error("Root element not found. Make sure there is a div with id 'root' in your HTML."); 17 | } 18 | 19 | ReactDOM.createRoot(rootElement).render( 20 | 21 | {isElectron || webEnv === "security" || (webEnv === "development" && hostname !== "localhost") ? ( 22 | 23 | 24 | 25 | 26 | 27 | ) : ( 28 | 29 | 30 | 31 | 32 | 33 | )} 34 | , 35 | ); 36 | -------------------------------------------------------------------------------- /src/pages/AuthPopup/AuthPopup.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { PopupContainer, CloseButton } from "./AuthPopupElements"; 3 | import Register from "src/pages/Register"; 4 | 5 | const AuthPopup = ({ onClose }) => { 6 | const [seen, setSeen] = useState(true); 7 | 8 | const togglePop = () => { 9 | setSeen(!seen); 10 | onClose(); 11 | }; 12 | 13 | return ( 14 | 15 |
    16 | 17 | 18 |
    19 |     20 | ); 21 | }; 22 | 23 | export default AuthPopup; 24 | -------------------------------------------------------------------------------- /src/pages/AuthRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // import { Route, Routes } from "react-router-dom"; 3 | // import { Login } from "src/components"; 4 | // import ForgotPassword from "./ForgotPassword"; 5 | // import ResetPassword from "./ResetPassword"; 6 | // import Register from "./Register"; 7 | 8 | const AuthRoute = () => { 9 | return
    ; 10 | }; 11 | 12 | export default AuthRoute; 13 | -------------------------------------------------------------------------------- /src/utils/components/RenderProgressIndicator.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { QuizProgressIndicator, ProgressBar } from "src/components/Resources/Quiz/Categories/CategoriesElements"; 3 | 4 | export default function RenderProgressIndicator({ currentQuestion, length }) { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/utils/dateTimeRelatedFunctions.js: -------------------------------------------------------------------------------- 1 | export const setDateAndTime = (date, time) => { 2 | const newDate = date ? new Date(date) : new Date(); 3 | const newTime = time ? new Date(time) : newDate; 4 | return new Date( 5 | newDate?.getFullYear(), 6 | newDate?.getMonth(), 7 | newDate?.getDate(), 8 | newTime?.getHours(), 9 | newTime?.getMinutes(), 10 | ); 11 | }; 12 | export const addZeroToDateString = (dateValue) => { 13 | return +dateValue < 10 ? `0${dateValue}` : dateValue; 14 | }; 15 | -------------------------------------------------------------------------------- /src/utils/validateEmail.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export function validateEmail(email) { 3 | const regex = 4 | /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; 5 | if (!email || regex.test(email) === false) { 6 | return false; 7 | } 8 | return true; 9 | } 10 | -------------------------------------------------------------------------------- /src/utils/workers/imageUploadWorker.js: -------------------------------------------------------------------------------- 1 | onmessage = async (event) => { 2 | const { image, requiredImageWidth, requiredImageHeight, multiple } = event.data; 3 | const bitmap = await createImageBitmap(image); 4 | const canvas = new OffscreenCanvas(256, 256); 5 | const ctx = canvas.getContext("2d"); 6 | const aspectRatio = requiredImageWidth / bitmap.width; 7 | canvas.width = requiredImageWidth; 8 | canvas.height = requiredImageHeight > 0 ? requiredImageHeight : bitmap.height * aspectRatio; 9 | ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); 10 | const blobImage = await canvas.convertToBlob(); 11 | postMessage({ blobImage, multiple }); 12 | }; 13 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | --------------------------------------------------------------------------------