diff --git a/prediction-polls/frontend/src/Assets/icons/EditIcon.jsx b/prediction-polls/frontend/src/Assets/icons/EditIcon.jsx new file mode 100644 index 00000000..713a2844 --- /dev/null +++ b/prediction-polls/frontend/src/Assets/icons/EditIcon.jsx @@ -0,0 +1,10 @@ +import styles from "./Icon.module.css"; +const EditIcon = ({ width, height }) => ( + + + + + + +) +export default EditIcon; \ No newline at end of file diff --git a/prediction-polls/frontend/src/Assets/icons/Icon.module.css b/prediction-polls/frontend/src/Assets/icons/Icon.module.css index f920ae18..e9472a24 100644 --- a/prediction-polls/frontend/src/Assets/icons/Icon.module.css +++ b/prediction-polls/frontend/src/Assets/icons/Icon.module.css @@ -3,4 +3,8 @@ } .iconFill{ fill:var(--neutral-900) +} +.iconEdit{ + stroke:var(--neutral-white) + } \ No newline at end of file diff --git a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css index 44e66bc1..66d4d38a 100644 --- a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css +++ b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css @@ -1,46 +1,4 @@ -.mobileMenu { - width: 80vw; - height: 100vh; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: stretch; - padding-top: 20px; - background-color: var(--primary-50); - justify-content: space-between; - overflow: auto; -} -.wrapper { - position: fixed; - width: 100vw; - height: 100vh; - overflow: hidden; -} -.menuItem { - padding: 20px; - display: flex; - justify-content: flex-start; - align-items: center; - gap: 20px; - background-color: var(--primary-50); - color: var(--neutral-900); - cursor: pointer; - border-bottom: 1px solid var(--neutral-300); -} - -.menuItem:last-child { - border-bottom: none; -} - -.logo { - width: 100%; - flex-shrink: 0; - display: flex; - justify-content: center; - align-items: center; - pointer-events: none; -} .mobileMenuButton { display: none; @@ -48,8 +6,11 @@ color: var(--neutral-900); cursor: pointer; } +.wrapper { + display: none; +} -@media (max-width: 640px) { +@media (max-width: 768px) { .mobileMenuButton { justify-content: flex-start; height: 50px; @@ -60,8 +21,52 @@ cursor: pointer; padding-left: 10px; } -} -.point { + .mobileMenu { + width: 80vw; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: stretch; + padding-top: 20px; + background-color: var(--primary-50); + justify-content: space-between; + } + .wrapper { + flex-grow: 1; + position: fixed; + width: 100vw; + height: 100%; + z-index: 3; + display: flex; + align-items: stretch; + } + + .menuItem { + padding: 20px; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 20px; + background-color: var(--primary-50); + color: var(--neutral-900); + cursor: pointer; + border-bottom: 1px solid var(--neutral-300); + } + + .menuItem:last-child { + border-bottom: none; + } + + .logo { + width: 100%; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + .point { display: flex; justify-content: center; gap: 20px; @@ -73,3 +78,5 @@ font-size: 20px; font-weight: 700; } +} + diff --git a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx index e7e67b1e..902c7f3b 100644 --- a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx +++ b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx @@ -26,9 +26,7 @@ const menuData = [ const MobileMenuItem = ({ pageKey, Icon, label, navigate, to, theme }) => { return (
navigate(to)}> - {Icon && ( - - )} + {Icon && } {label || pageKey}
); @@ -44,11 +42,13 @@ const MobileMenu = () => { return ( <> - {!menuActive && ( + {!menuActive ? ( + ) : ( +
)} {menuActive && (
setMenuActive(false)}> diff --git a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css index 529031ea..9362480a 100644 --- a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css +++ b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css @@ -2,9 +2,10 @@ display: flex; flex-direction: row; justify-content: space-between; - width: 90%; + width: 95%; box-shadow: 2px 4px 8px var(--neutral-shadow); padding: 30px; + box-sizing: border-box; border-radius: 8px; gap: 20px; background-color: var(--neutral-pollCard); @@ -28,11 +29,13 @@ display: flex; align-items: center; gap: 5px; + cursor: pointer; } .creatorImage { width: 35px; height: 35px; border-radius: 100px; + cursor: pointer; } .creatorName { font-size: 16px; @@ -157,3 +160,29 @@ color: var(--neutral-black); } + +a{ + text-decoration: none; +} + +.buttonText{ + margin: 0px; +} + +@media (max-width:769px){ + .buttonText{ + display: none; + } + .commentButton, +.shareButton, +.reportButton { + padding: 12px; +} +} +@media (max-width:1025px){ + .card{ + padding: 25px 15px ; + + } + +} \ No newline at end of file diff --git a/prediction-polls/frontend/src/Components/PollCard/index.jsx b/prediction-polls/frontend/src/Components/PollCard/index.jsx index 27214fa7..43e9e40a 100644 --- a/prediction-polls/frontend/src/Components/PollCard/index.jsx +++ b/prediction-polls/frontend/src/Components/PollCard/index.jsx @@ -8,36 +8,58 @@ import { ReactComponent as ReportIcon } from "../../Assets/icons/Warning.svg"; import PollOption from "../PollOption"; function PollCard({ PollData }) { - const totalPoints = !PollData.isCustomPoll + const [selectedArray, setSelectedArray] = React.useState( + !PollData.isCustomPoll ? Array(PollData["options"].length).fill(false) : [] + ); + const [pollData, setPollData] = React.useState( + JSON.parse(JSON.stringify(PollData)) + ); + var totalPoints = !PollData.isCustomPoll ? PollData.options.reduce((acc, curr) => acc + curr.votes, 0) : 0; - + const handleSelect = (newList) => { + setSelectedArray(newList); + var newPoll = JSON.parse(JSON.stringify(PollData)); + for (let i = 0; i < PollData["options"].length; i++) { + if (newList[i] == true) { + newPoll["options"][i]["votes"] = newPoll["options"][i]["votes"] + 1; + break; + } + } + setPollData(JSON.parse(JSON.stringify(newPoll))); + totalPoints = !PollData.isCustomPoll + ? PollData.options.reduce((acc, curr) => acc + curr.votes, 0) + : 0; + }; const navigate = useNavigate(); + return (
- {PollData.tags.map((tag, index) => ( + {pollData.tags.map((tag, index) => ( ))}
-

{PollData.question}

+

{pollData.question}

-
- {!PollData.isCustomPoll ? ( + {!pollData.isCustomPoll ? (
- {PollData.options.map((option, index) => { + {pollData.options.map((option, index) => { const widthPercentage = (option.votes / totalPoints) * 100; return ( ); })} @@ -57,7 +79,7 @@ function PollCard({ PollData }) {
{`${PollData.comments.length} comment${ @@ -68,25 +90,30 @@ function PollCard({ PollData }) {
- user -
{PollData.creatorName}
+ + user + + +
{PollData.creatorName}
+

Closing In

diff --git a/prediction-polls/frontend/src/Components/PollOption/PollOption.module.css b/prediction-polls/frontend/src/Components/PollOption/PollOption.module.css index e2f61de4..b34e42a9 100644 --- a/prediction-polls/frontend/src/Components/PollOption/PollOption.module.css +++ b/prediction-polls/frontend/src/Components/PollOption/PollOption.module.css @@ -19,6 +19,22 @@ cursor: pointer; display: flex; } +.selectedOptionText { + flex-direction: row; + justify-content: space-between; + align-items: center; + border: 2px solid var(--secondary-500); + border-radius: 10px; + font-size: 16px; + font-weight: 500; + width: 100%; + padding: 0px 10px ; + box-sizing: border-box; + font-weight: 700; + position: relative; + cursor: pointer; + display: flex; +} .optionPoints { font-size: 14px; font-weight: normal; @@ -33,6 +49,15 @@ border-radius: 8px; z-index: 1; } +.selectedBackgroundDiv { + position: absolute; + top: 0; + left: 0; + height: 100%; + background-color: var(--secondary-500); + border-radius: 8px; + z-index: 1; +} .textDiv { z-index: 2; diff --git a/prediction-polls/frontend/src/Components/PollOption/index.jsx b/prediction-polls/frontend/src/Components/PollOption/index.jsx index 167bb494..fd84004a 100644 --- a/prediction-polls/frontend/src/Components/PollOption/index.jsx +++ b/prediction-polls/frontend/src/Components/PollOption/index.jsx @@ -1,11 +1,51 @@ -import React from "react"; +import React, { useEffect } from "react"; import styles from "./PollOption.module.css"; +import { useNavigate } from "react-router-dom"; +import { useLocation } from "react-router-dom"; + +function PollOption({ + widthPercentage, + isSelected, + id, + option, + index, + arrayLength, + selectOption, + page, +}) { + const updatePollColor = () => { + selectOption( + Array.from({ length: arrayLength }, (_, i) => (i == index ? true : false)) + ); + }; + + const navigate = useNavigate(); + const location = useLocation(); + const [isVotePath, setIsVotePath] = React.useState( + /^\/vote\//.test(location.pathname) + ); + + useEffect(() => { + setIsVotePath(/^\/vote\//.test(location.pathname)); + }, [location.pathname]); + + const clickHandle = () => { + navigate("/vote/" + id); + }; -function PollOption({ widthPercentage, navigate, option, index }) { return ( -
navigate("/vote")}> +
(isVotePath ? updatePollColor() : clickHandle())} + >
{option.title}
diff --git a/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css b/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css index 6885b0a8..f4875e15 100644 --- a/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css +++ b/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css @@ -58,7 +58,7 @@ border: none; } -@media (max-width: 640px) { +@media (max-width: 768px) { .sidebar { display: none; } diff --git a/prediction-polls/frontend/src/Components/Sidebar/index.jsx b/prediction-polls/frontend/src/Components/Sidebar/index.jsx index 1895c275..9579b2b8 100644 --- a/prediction-polls/frontend/src/Components/Sidebar/index.jsx +++ b/prediction-polls/frontend/src/Components/Sidebar/index.jsx @@ -14,14 +14,14 @@ import logout from "../../api/requests/logout.jsx"; const menuData = [ - { key: "Profile", Icon: ProfileIcon }, - { key: "Feed", Icon: FeedIcon }, - { key: "Vote", Icon: VoteIcon }, - { key: "Create", Icon: CreateIcon }, - { key: "Moderation", Icon: ModerationIcon }, - { key: "Leaderboard", Icon: LeaderboardIcon }, - { key: "Notifications", Icon: NotificationsIcon }, - { key: "Settings", Icon: SettingsIcon }, + { key: "Profile", Icon: ProfileIcon, to:"profile/can.gezer" }, + { key: "Feed", Icon: FeedIcon, to:"feed" }, + { key: "Vote", Icon: VoteIcon, to:"vote" }, + { key: "Create", Icon: CreateIcon , to:"create"}, + { key: "Moderation", Icon: ModerationIcon , to:"moderation"}, + { key: "Leaderboard", Icon: LeaderboardIcon, to:"leaderboard" }, + { key: "Notifications", Icon: NotificationsIcon, to:"notifications" }, + { key: "Settings", Icon: SettingsIcon, to:"settings" }, ]; const SidebarMenuItem = ({ @@ -72,7 +72,7 @@ const Sidebar = ({ currentPage, handlePageChange }) => { pageKey={item.key} Icon={item.Icon} navigate={navigate} - to={`/${item.key.toLowerCase()}`} + to={`/${item.to}`} /> ))} diff --git a/prediction-polls/frontend/src/MockData/LeaderboardList.json b/prediction-polls/frontend/src/MockData/LeaderboardList.json new file mode 100644 index 00000000..7b9979dd --- /dev/null +++ b/prediction-polls/frontend/src/MockData/LeaderboardList.json @@ -0,0 +1,11 @@ +{ + "e-sport": [ + { "point": 420, "username": "sofistik" }, + { "point": 385, "username": "artemis" }, + { "point": 360, "username": "afrandes" }, + { "point": 340, "username": "anakavun" }, + { "point": 325, "username": "otaliptus" }, + { "point": 290, "username": "marcholpin" }, + { "point": 289, "username": "trella" } + ] +} diff --git a/prediction-polls/frontend/src/MockData/PollData.json b/prediction-polls/frontend/src/MockData/PollData.json index 1c00355d..68175d0e 100644 --- a/prediction-polls/frontend/src/MockData/PollData.json +++ b/prediction-polls/frontend/src/MockData/PollData.json @@ -6,6 +6,7 @@ "tags": ["Color", "Favorite"], "creatorName": "Zehra Kaya", "creatorId": 6327697326, + "creatorUsername": "zehra.kaya", "creatorImage": "https://www.w3schools.com/howto/img_lights_wide.jpg", "isCustomPoll": false, "options": [ @@ -53,6 +54,7 @@ "question": "When is your birthday?", "tags": ["Birthday", "Personal"], "creatorName": "Can Gezer", + "creatorUsername": "can.gezer", "creatorId": 6578493045, "creatorImage": "https://www.w3schools.com/howto/img_woods_wide.jpg", "isCustomPoll": true, @@ -76,6 +78,7 @@ "question": "How many books have you read this year?", "tags": ["Reading", "Hobby"], "creatorName": "Pelin Kaya", + "creatorUsername": "pelin.kaya", "creatorId": 9472638473, "creatorImage": "https://www.w3schools.com/howto/img_mountains_wide.jpg", "isCustomPoll": true, diff --git a/prediction-polls/frontend/src/MockData/Users.json b/prediction-polls/frontend/src/MockData/Users.json new file mode 100644 index 00000000..94ceb833 --- /dev/null +++ b/prediction-polls/frontend/src/MockData/Users.json @@ -0,0 +1,29 @@ + +{ + "userList":[ + { + "username":"can.gezer", + "name":"Can Gezer", + "about":"I am a software developer", + "image":"https://s3-alpha-sig.figma.com/img/fc6e/c509/c0b74981996d9829fa6111c5cbdc49af?Expires=1701043200&Signature=ZmoY99LI1VB2MqoReZhzDo479RnGlhHvGuFp4B46c0Tf4agDDcldUu2QVH2c4-n9zeCF53l4--4fscf1fsHuRe2qImIOSeA~e-KptBctEpDCevuW2ny148usMFDtMOBGt0vmCujJVcP0-zQMgfRqSil90q6nBF6mvpXae894TM6vV5yoYH4kc-fepYEcuf5aNVwwb6jU62OZYkI43nZtp4C77S~B3PWsumQcmQCOhu0cHvt9LMDSciH8u5NchF0Mm3GtLGFEuHGgAWWHi81lr82-gp7CPcKmxl1bUjtRtdveHQMOJLnoGZ12T4VhzLGdA8cGQWkgqA8XO0QGhxH5tw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4", + "thumbnailImage":"https://s3-alpha-sig.figma.com/img/76d4/bfac/585eb54eac56f1d953fc74070b88ac83?Expires=1701043200&Signature=HW96gwr6cPNWu6v3OaSJRarXFJKlv7ULOYkoQrPJ~R55iPzYTtf-bM7yWnYcMqVmlSopJNqJKy4~a-NTnG4u7wPKnU2uNo159Ty4PUa-U0adzlY~ozwRBhuRlBgHyciIh2vxckf96kufvocheTBCvP7tMX39oQzd~z5Pv-zEWxc4h7L8e~d8eO9NUD3J9GXfrH2r82iav3HN8BdMgqE59Yh1W9qiaN~sk5T9SQAYxpNZWS4STckVx4~SLssxAtk2xCEsZlzXmsoVsTAM1hyXH63fLUMhKxR7~OZn4~yNBucY1Ih4Noblc8cED6SuBJbbn2ANb6a8Iuq3ILMi4j-e1Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" + }, + { + "username":"pelin.kaya", + "name":"Pelin Kaya", + "about":"Lorem ipsum", + "image":"https://www.w3schools.com/howto/img_mountains_wide.jpg", + "thumbnailImage":"https://s3-alpha-sig.figma.com/img/76d4/bfac/585eb54eac56f1d953fc74070b88ac83?Expires=1701043200&Signature=HW96gwr6cPNWu6v3OaSJRarXFJKlv7ULOYkoQrPJ~R55iPzYTtf-bM7yWnYcMqVmlSopJNqJKy4~a-NTnG4u7wPKnU2uNo159Ty4PUa-U0adzlY~ozwRBhuRlBgHyciIh2vxckf96kufvocheTBCvP7tMX39oQzd~z5Pv-zEWxc4h7L8e~d8eO9NUD3J9GXfrH2r82iav3HN8BdMgqE59Yh1W9qiaN~sk5T9SQAYxpNZWS4STckVx4~SLssxAtk2xCEsZlzXmsoVsTAM1hyXH63fLUMhKxR7~OZn4~yNBucY1Ih4Noblc8cED6SuBJbbn2ANb6a8Iuq3ILMi4j-e1Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" + }, + { + "username":"zehra.kaya", + "name":"Zehra Kaya", + "about":"Lorem Ipsum", + "image":"https://www.w3schools.com/howto/img_lights_wide.jpg", + "thumbnailImage":"https://s3-alpha-sig.figma.com/img/76d4/bfac/585eb54eac56f1d953fc74070b88ac83?Expires=1701043200&Signature=HW96gwr6cPNWu6v3OaSJRarXFJKlv7ULOYkoQrPJ~R55iPzYTtf-bM7yWnYcMqVmlSopJNqJKy4~a-NTnG4u7wPKnU2uNo159Ty4PUa-U0adzlY~ozwRBhuRlBgHyciIh2vxckf96kufvocheTBCvP7tMX39oQzd~z5Pv-zEWxc4h7L8e~d8eO9NUD3J9GXfrH2r82iav3HN8BdMgqE59Yh1W9qiaN~sk5T9SQAYxpNZWS4STckVx4~SLssxAtk2xCEsZlzXmsoVsTAM1hyXH63fLUMhKxR7~OZn4~yNBucY1Ih4Noblc8cED6SuBJbbn2ANb6a8Iuq3ILMi4j-e1Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" + } + + + + ] +} \ No newline at end of file diff --git a/prediction-polls/frontend/src/Pages/Auth/Google/index.jsx b/prediction-polls/frontend/src/Pages/Auth/Google/index.jsx new file mode 100644 index 00000000..d2b0f8a9 --- /dev/null +++ b/prediction-polls/frontend/src/Pages/Auth/Google/index.jsx @@ -0,0 +1,31 @@ +import React, { useEffect } from 'react'; +import { useNavigate, useLocation } from 'react-router-dom'; +import googleLogin from '../../../api/requests/googleLogin'; + +function GoogleLogin() { + const navigate = useNavigate(); + const location = useLocation(); + + useEffect(() => { + const code = new URLSearchParams(location.search).get('code'); + if (code) { + googleLogin(code).then(success => { + if (success) { + // Redirect to profile if login was successful + navigate('/profile'); + } else { + // Redirect to a login error page or back to login + navigate('/auth/sign-in'); + } + }); + } + }, [location.search, navigate]); + + return ( +
+

Redirecting..

+
+ ); +} + +export default GoogleLogin; diff --git a/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css b/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css new file mode 100644 index 00000000..29ef13b4 --- /dev/null +++ b/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css @@ -0,0 +1,94 @@ +.splitContainerStyle { + display: flex; + width: 100%; + height: 100vh; + margin: 0 auto; +} + +.formContainerStyle { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; +} + +.animationStyle { + max-width: 100%; + max-height: 100%; +} + +.dividerStyle { + color: var(--primary-700); + border-color: var(--primary-700); +} + +.imageStyle { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(var(--primary-50), var(--primary-100)); +} + +.displayCenterStyle { + display: flex; + align-items: center; + justify-content: center; +} + +.formButtonStyle { + display: flex; + align-items: center; + justify-content: center; + padding: 22px 0px; + width: 100%; + background: var(--primary-500); + color: var(--neutral-white); +} +.formButtonStyle:hover { + background: var(--primary-600); +} + +.logoStyle { + color: var(--neutral-100); + margin-bottom: 20px; + max-width: 80%; + max-height: 80%; +} + +.googleLogoStyle { + margin-right: 20px; +} + +.displayCenterStyle { + color: var(--neutral-100); +} + +.signUpStyle { + color: var(--primary-500); +} + +.passwordDivStyle { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +; + +.labelStyle { + font-size: 12px; +} + +.messageStyle { + color: var(--neutral-100); + color: var(--warning-600) +} +@media (max-width: 768px) { + .imageStyle{ + display: none; + } + +} \ No newline at end of file diff --git a/prediction-polls/frontend/src/Pages/Auth/SignIn/index.jsx b/prediction-polls/frontend/src/Pages/Auth/SignIn/index.jsx index 3defd3a1..6037b451 100644 --- a/prediction-polls/frontend/src/Pages/Auth/SignIn/index.jsx +++ b/prediction-polls/frontend/src/Pages/Auth/SignIn/index.jsx @@ -1,4 +1,5 @@ import React from "react"; +import styles from "./SignIn.module.css"; import { Button, Input, Form, Divider, Typography } from "antd"; import { ReactComponent as Logo } from "../../../Assets/Logo.svg"; import { ReactComponent as SignPageAnimation } from "../../../Assets/SignPageAnimation.svg"; @@ -8,90 +9,15 @@ import { Link } from "react-router-dom"; import getGoogleOAuthURL from "../../../Config/googleOAuth" const { Text } = Typography; -const splitContainerStyle = { - display: "flex", - width: "100%", - height: "100vh", - margin: "0 auto", -}; - -const formContainerStyle = { - flex: 1, - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - padding: "20px", -}; -const animationStyle = { - maxWidth: "100%", - maxHeight: "100%", -}; - -const dividerStyle = { - color: "#9EC8EE", - borderColor: "#9EC8EE", -}; - -const imageStyle = { - flex: 1, - display: "flex", - alignItems: "center", - justifyContent: "center", - background: "linear-gradient(#EAF3FB, #BEDAF4)", -}; - -const formItemLayout = { - labelCol: { span: 24 }, - wrapperCol: { span: 24 }, -}; -const displayCenterStyle = { - display: "flex", - alignItems: "center", - justifyContent: "center", -}; -const formButtonStyle = { - ...displayCenterStyle, - padding: "22px 0px", - width: "100%", - background: "#2D87DA", - color: "#FFFFFF", -}; -const logoStyle = { - ...displayCenterStyle, - marginBottom: "20px", - maxWidth: "80%", - maxHeight: "80%", -}; -const googleLogoStyle = { - marginRight: "20px", -}; -const forgotPasswordStyle = { - color: "#363A3D", -}; -const signUpStyle = { - color: "#2D87DA", -}; -const passwordDivStyle = { - display: "flex", - flexDirection: "column", - alignItems: "flex-end", -}; -const labelStyle = { - fontSize: "12px", -}; - -const messageStyle = { - ...displayCenterStyle, - color: "#FC1612" -} - function SignIn() { const [passwordVisible, setPasswordVisible] = React.useState(false); const [username, setUsername] = React.useState(""); const [password, setPassword] = React.useState(""); const [message, setMessage] = React.useState(""); const navigate = useNavigate(); + const handleLogin = () => { + window.location.href = getGoogleOAuthURL(); + }; const handleSignIn = async (e) => { e.preventDefault(); @@ -104,7 +30,7 @@ function SignIn() { password: password }) }; - const response = await fetch(process.env.REACT_APP_BACKEND_LINK+'/login', requestOptions); + const response = await fetch(process.env.REACT_APP_BACKEND_LINK+'/auth/login', requestOptions); const data = await response.json(); if (response.status === 201 && data.accessToken && data.refreshToken) { @@ -120,28 +46,27 @@ function SignIn() { }; return ( -
-
- +
+
+ -
+
-
- + or - USERNAME + USERNAME - PASSWORD -
+ PASSWORD +
setPassword(e.target.value)} /> -
- + -
+
Don't have an account? -
-
{message ?

{message}

: null}
+
{message ?

{message}

: null}
-
- +
+
diff --git a/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css b/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css new file mode 100644 index 00000000..3c4d04c7 --- /dev/null +++ b/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css @@ -0,0 +1,78 @@ + .splitContainerStyle { + display: flex; + width: 100%; + margin: 0 auto; + height: 100vh; + } + + .animationStyle { + max-width: 100%; + max-height: 100%; + } + + + .displayCenterStyle { + display: flex; + align-items: center; + justify-content: center; + } + + .formInputStyle { + padding: 5px 5px; + width: 100%; + } + + .formButtonStyle { + display: flex; + align-items: center; + justify-content: center; + padding: 22px 0px; + width: 100%; + opacity: 0.85; + background: var(--primary-500); + } + + .dividerStyle { + color: var(--primary-900); + border-color: var(--primary-900); + margin: 8px 0px 8px 0px; + } + + .formDatePickerStyle { + padding: 5px 5px; + width: 100%; + width: 100%; + } + + .imageContainerStyle { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(var(--primary-50), var(--primary-100)); + } + + .formContainerStyle { + flex: 1; + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center + } + + .logoStyle { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + max-width: 80%; + max-height: 80%; + } + + @media (max-width: 768px) { + .imageContainerStyle{ + display: none; + } + + } \ No newline at end of file diff --git a/prediction-polls/frontend/src/Pages/Auth/SignUp/index.jsx b/prediction-polls/frontend/src/Pages/Auth/SignUp/index.jsx index c3c31d73..b30765cd 100644 --- a/prediction-polls/frontend/src/Pages/Auth/SignUp/index.jsx +++ b/prediction-polls/frontend/src/Pages/Auth/SignUp/index.jsx @@ -8,6 +8,7 @@ import { Typography, Divider, } from "antd"; +import styles from "./SignUp.module.css"; import { Link, useNavigate } from "react-router-dom"; import { ReactComponent as Logo } from "../../../Assets/Logo.svg"; import { ReactComponent as SignPageAnimation } from "../../../Assets/SignPageAnimation.svg"; @@ -24,15 +25,15 @@ function SignUp() { const handleSubmit = async (values) => { try { const formattedValues = { ...values }; - if (values.birthday) { - if (typeof values.birthday.format === 'function') { - formattedValues.birthday = formatDate(values.birthday.toDate()); - } - } else { - formattedValues.birthday = undefined; - } + if (values.birthday) { + if (typeof values.birthday.format === 'function') { + formattedValues.birthday = formatDate(values.birthday.toDate()); + } + } else { + formattedValues.birthday = undefined; + } - const res = await fetch(process.env.REACT_APP_BACKEND_LINK+"/signup", { + const res = await fetch(process.env.REACT_APP_BACKEND_LINK + "/signup", { method: "POST", headers: { "Content-Type": "application/json", @@ -49,7 +50,7 @@ function SignUp() { setUsernameHelp("Username should be unique"); } } catch (err) { - + } }; @@ -71,102 +72,29 @@ function SignUp() { } }; - const splitContainerStyle = { - display: "flex", - width: "100%", - margin: "0 auto", - height: "100vh", - }; - - const animationStyle = { - maxWidth: "100%", - maxHeight: "100%", - }; - - const displayCenterStyle = { - display: "flex", - alignItems: "center", - justifyContent: "center", - }; - - const formInputStyle = { - padding: "5px 5px", - width: "100%", - }; - - const formButtonStyle = { - ...displayCenterStyle, - padding: "22px 0px", - width: "100%", - opacity: "0.85", - }; - - const dividerStyle = { - color: "rgba(22, 119, 255, 0.4)", - borderColor: "rgba(22, 119, 255, 0.2)", - margin: "8px 0px 8px 0px", - }; - - const formDatePickerStyle = { - ...formInputStyle, - width: "100%", - }; - - const imageContainerStyle = { - flex: 1, - display: "flex", - alignItems: "center", - justifyContent: "center", - background: "linear-gradient(#EAF3FB, #BEDAF4)", - }; - - const formContainerStyle = { - flex: 1, - paddingLeft: "20px", - display: "flex", - flexDirection: "column", - alignItems: "center", - }; - - const logoStyle = { - ...displayCenterStyle, - marginBottom: "20px", - maxWidth: "80%", - maxHeight: "80%", - }; - - const formItemLayout = { - labelCol: { - span: 24, - }, - wrapperCol: { - span: 24, - }, - }; - return ( -
-
- +
+
+
-
- + or @@ -187,7 +115,7 @@ function SignUp() { @@ -206,7 +134,7 @@ function SignUp() { @@ -232,15 +160,15 @@ function SignUp() { > @@ -269,7 +197,7 @@ function SignUp() {
-
- I Have an Account - +
+ I Have an Account + Login
-
+
{/* Our sign up image from mock-up */} - +
-
+
); } diff --git a/prediction-polls/frontend/src/Pages/Create/Create.module.css b/prediction-polls/frontend/src/Pages/Create/Create.module.css index a8398eb3..6634eefb 100644 --- a/prediction-polls/frontend/src/Pages/Create/Create.module.css +++ b/prediction-polls/frontend/src/Pages/Create/Create.module.css @@ -1,10 +1,73 @@ -.page{ +.page { display: flex; background-color: var(--neutral-white); width: 100%; -} -@media (max-width: 640px) { - .page{ - flex-direction: column; + } + + @media (max-width: 640px) { + .page { + flex-direction: column; } -} \ No newline at end of file + } + + .createContainer { + margin: 20px; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #fff; + width: 60%; + } + + .questionContainer { + margin-bottom: 16px; + } + + .pollTypeContainer { + margin-bottom: 16px; + } + + .submitContainer { + position: absolute; + bottom: 40px; + width: 40%; + } + + .multipleChoiceInputs { + margin-bottom: 16px; + } + + .choiceInput { + margin-bottom: 8px; + } + + .datePickerContainer { + margin-top: 8px; + } + + .numericInputContainer { + margin-top: 8px; + } + + .dueDatePollInputContainer { + margin-top: 8px; + } + + .setDueDateContainer { + margin-top: 8px; + } + + .dateOptionsContainer { + margin-top: 8px; + } + + .timeInput { + width: 60px; + margin-right: 8px; + } + + .openVisibilityContainer { + position: absolute; + bottom: 100px; + } + diff --git a/prediction-polls/frontend/src/Pages/Create/index.jsx b/prediction-polls/frontend/src/Pages/Create/index.jsx index a4a1b689..87ab1337 100644 --- a/prediction-polls/frontend/src/Pages/Create/index.jsx +++ b/prediction-polls/frontend/src/Pages/Create/index.jsx @@ -1,14 +1,203 @@ import React from 'react' import Menu from '../../Components/Menu' import styles from './Create.module.css' +import { useState } from 'react'; +import { Button, Input, DatePicker, Checkbox, Select } from 'antd'; +const { TextArea } = Input; +const { Option } = Select; function Create() { + const [question, setQuestion] = useState(''); + const [pollType, setPollType] = useState(''); + const [showMultipleChoiceInputs, setShowMultipleChoiceInputs] = useState(false); + const [additionalChoices, setAdditionalChoices] = useState(['']); + const [customizedType, setCustomizedType] = useState('text'); + const [customizedOptions, setCustomizedOptions] = useState(['']); + const [selectedDate, setSelectedDate] = useState(null); + const [setDueDate, setSetDueDate] = useState(false); + const [dueDatePoll, setDueDatePoll] = useState(null); + const [numericFieldValue, setNumericFieldValue] = useState(''); + const [selectedTimeUnit, setSelectedTimeUnit] = useState('min'); + const [openVisibility, setOpenVisibility] = useState(false); + + const handleOpenVisibilityChange = (e) => { + setOpenVisibility(e.target.checked); + }; + + const handleDueDatePollChange = (date) => { + setDueDatePoll(date); + }; + + const handleSetDueDateChange = (e) => { + setSetDueDate(e.target.checked); + }; + + const handleQuestionChange = (e) => { + setQuestion(e.target.value); + }; + + const handlePollTypeChange = (type) => { + setPollType(type); + setShowMultipleChoiceInputs(type === 'multipleChoice'); + setSelectedDate(null); + }; + + const handleAddChoice = () => { + setAdditionalChoices([...additionalChoices, '']); + }; + + const handleDeleteChoice = (index) => { + const updatedChoices = [...additionalChoices]; + updatedChoices.splice(index, 1); + setAdditionalChoices(updatedChoices); + }; + + const handleChoiceChange = (index, value) => { + const updatedChoices = [...additionalChoices]; + updatedChoices[index] = value; + setAdditionalChoices(updatedChoices); + }; + + const handleCustomizedTypeChange = (type) => { + setCustomizedType(type); + }; + + const handleDateChange = (date) => { + setSelectedDate(date); + }; + + const handleSubmit = () => { + // Additional logic will be added + }; + return (
- -

Create Page

+ + Create + +
+

Create Poll

+
+ +
+