Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Leaderboard Implementation and Modal in Sign-Up page #633

Merged
merged 8 commits into from
Dec 25, 2023
Merged

Leaderboard Implementation and Modal in Sign-Up page #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4d7d1ca
Leaderboard Implementation and Modal in Sign-Up page
AliNasra Dec 25, 2023
910d588
Update Router.jsx
AliNasra Dec 25, 2023
ee42b29
Update Router.jsx
AliNasra Dec 25, 2023
445daee
Update Router.jsx
AliNasra Dec 25, 2023
9a7f3b3
Added the terms of use
AliNasra Dec 25, 2023
30a7aac
Update index.jsx
AliNasra Dec 25, 2023
d633c18
Render images correctly
AliNasra Dec 25, 2023
3d44c04
Improvements
AliNasra Dec 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
.splitContainerStyle {
display: flex;
width: 100%;
margin: 0 auto;
height: 100vh;
display: flex;
width: 100%;
margin: 0 auto;
height: 100vh;
}

.animationStyle {
max-width: 100%;
max-height: 100%;
}

.agreementStyle {
margin-left: 10px;
}

.ruleStyle {
font-size: 14px;
color: #333;
line-height: 1.5;
overflow-y: auto;
max-height: 60vh;
padding: 20px;
}

.displayCenterStyle {
display: flex;
Expand All @@ -29,13 +41,12 @@
padding: 22px 0px;
width: 100%;
opacity: 0.85;
background: var(--primary-500);
background: var(--primary-500);
}

.dividerStyle {
color: var(--primary-900);
border-color: var(--primary-900);
margin: 8px 0px 8px 0px;
margin: 4px 0px 4px 0px;
}

.formDatePickerStyle {
Expand Down Expand Up @@ -66,13 +77,14 @@
align-items: center;
justify-content: center;
margin-bottom: 20px;
margin-top: 100px;
max-width: 80%;
max-height: 80%;
}

@media (max-width: 768px) {
.imageContainerStyle{
display: none;
}
}
.imageContainerStyle {
display: none;
}

}
67 changes: 55 additions & 12 deletions prediction-polls/frontend/src/Pages/Auth/SignUp/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Checkbox,
Typography,
Divider,
Modal,
} from "antd";
import styles from "./SignUp.module.css";
import { Link, useNavigate } from "react-router-dom";
Expand All @@ -21,6 +22,9 @@ function SignUp() {
const [message, setMessage] = useState("");
const [usernameStatus, setUsernameStatus] = useState("");
const [usernameHelp, setUsernameHelp] = useState("");
const [showModal, setShowModal] = useState(false)
const [isCheck, setIsCheck] = useState(false)


const handleSubmit = async (values) => {
try {
Expand Down Expand Up @@ -71,9 +75,44 @@ function SignUp() {
setUsernameHelp("");
}
};

const handleOk = () => {
setIsCheck(true);
setShowModal(false);
};
const handleCancel = () => {
setShowModal(false);
};
const displayModal = () => {
setShowModal(true);
};
const handleIsCheck = () => {
setIsCheck(!isCheck);
}
return (
<div className={styles.splitContainerStyle}>
<Modal title="Prediction Polls Use Agreement" open={showModal}
footer={[
<Button key="back" onClick={handleCancel}>
Cancel
</Button>,
<Button key="submit" type="primary" onClick={handleOk}>
I agree!
</Button>,
]}
>
<div className={styles.ruleStyle}>
<p>Welcome to <strong>Insight Arena</strong>, a dynamic platform dedicated to fostering a community of informed decision-makers through interactive polls and predictions.</p>
<p>By creating an account with Insight Arena, I hereby acknowledge and agree to the following terms:</p>
<p><strong>1. Privacy and Data Protection:</strong> I agree to the Privacy Policy of Insight Arena and consent to the collection and use of my personal information in accordance with KVKK regulations.</p>
<p><strong>2. Conduct and Community Engagement:</strong> I commit to engaging with the community in a respectful and responsible manner. I understand that any violation of community standards may lead to account suspension or termination. I will participate in polls and share my opinions while upholding the standards of Prediction Polls.</p>
<p><strong>3. Content Moderation:</strong> If I choose to act as a moderator, I agree to remain impartial and maintain the confidentiality of the poll processes. I confirm that I have selected at least one tag relevant to the poll and have not participated in that specific poll.</p>
<p><strong>4. Points and Rewards:</strong> I understand that I will earn Domain Specific Points and General Points based on the accuracy of my predictions and my level of activity on the platform.
I acknowledge that the rules governing the points system may change, and I agree to abide by any such amendments.</p>
<p><strong>5. Intellectual Property:</strong> I agree that any content I post on Prediction Polls remains my intellectual property. By posting content, I grant Insight Arena a non-exclusive license to use this content within the platform.</p>
<p><strong>6. Changes to Terms:</strong> I acknowledge that Prediction Polls may revise these terms at any time, and such changes will be effective upon posting on the platform or notification via email.</p>
<p>By clicking "<strong>I Agree!</strong>" you affirm your understanding and commitment to these terms and the responsibilities of being a jury member. Your thoughtful and fair participation is crucial to maintaining the integrity and quality of our community's decision-making process.</p>
</div>
</Modal>
<div className={styles.formContainerStyle}>
<Link to="/home" className={styles.logoStyle}>
<Logo />
Expand All @@ -89,7 +128,7 @@ function SignUp() {
<div>
<Button type="primary" className={styles.formButtonStyle}>
<i
className={{ marginRight: "10px" , fontFamily: "fab fa-google fa-1x"}}
className={{ marginRight: "10px", fontFamily: "fab fa-google fa-1x" }}
></i>{" "}
Sign Up with Google
</Button>
Expand Down Expand Up @@ -152,9 +191,9 @@ function SignUp() {
message: "Password must be at least 8 characters!",
},
{
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/,
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[a-zA-Z\d!@#$%^&*()_+]{8,}$/,
message:
"Password must include uppercase, lowercase, and a number!",
"Password must include uppercase, lowercase, special character, and a number!",
},
]}
>
Expand All @@ -178,19 +217,23 @@ function SignUp() {
valuePropName="checked"
rules={[
{
validator: (_, value) =>
value
? Promise.resolve()
: Promise.reject(new Error("Should accept agreement")),
checked: true,
message: "Please check the terms of use",
},
]}
>
<Checkbox required>
<Checkbox
name="agreement"
checked={isCheck}
onClick={handleIsCheck}
required>
</Checkbox>
<span className={styles.agreementStyle} >
I agree to the{" "}
<Typography.Link href="HERE GOES THE LINK">
<Typography.Link onClick={displayModal}>
platform terms.
</Typography.Link>
</Checkbox>
</span>
</Form.Item>
<Form.Item>
<div>
Expand All @@ -206,7 +249,7 @@ function SignUp() {
</Form.Item>
<Form.Item>
<div className={styles.displayCenterStyle}>
I Have an Account
I Have an Account
<Link to="/auth/sign-in" style={{ paddingLeft: "10px" }}>
Login
</Link>
Expand Down
122 changes: 105 additions & 17 deletions prediction-polls/frontend/src/Pages/Leaderboard/Leaderboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,47 @@
.page{
display: flex;
background-color: var(--neutral-white);
width: 100%;
.page {
display: flex;
background-color: var(--neutral-white);
width: 100%;
}

@media (max-width: 640px) {
.page{
flex-direction: column;
}
.page {
flex-direction: column;
}
}

.creatorImagePlaceholder {
width: 35px;
height: 35px;
border-radius: 100px;
cursor: pointer;
background-color: var(--neutral-100);
justify-content: center;
align-items: center;
display: flex;
}

.creatorImage {
width: 35px;
height: 35px;
border-radius: 100px;
cursor: pointer;
}

.listContainer {
margin-left: 5em;
margin-left: 12em;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
height: 70%;
width: 600px;
border: 1px solid #e8e8e8;
margin-top: 10em ;
margin-top: 2em;
}

.selectionList {
height: 40px;
width: 200px;
margin-top: 5em;
margin-left: 5em;
font-weight: 900;
}

.listHeader {
Expand All @@ -25,32 +52,49 @@
border-bottom: 1px solid #e8e8e8;
}

.rankHeader,
.usernameHeader,
.rankHeader {
font-size: 15px;
font-weight: 700;
}

.usernameHeader {
font-size: 15px;
font-weight: 700;
}

.pointsHeader {
font-weight: normal;
font-size: 15px;
font-weight: 700;
}

.rankHeader {
width: 50px;
text-align: center;
font-weight: 700;
}

.usernameHeader {
flex: 1;
padding-left: 50px;
}

.avatar{
.avatar {
width: 40px;
height: 40px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
background-color: '#000';
color: '#fff';
margin-left: 20px;
}

.pointsHeader {
width: 100px;
text-align: right;
padding-right: 20px;
font-weight: 700;
}

.listItem {
Expand All @@ -61,18 +105,62 @@
}

.rank {
width: 50px;
width: 40px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 25px;
margin-left: 10px;
height: 40px;
background-color: #9ea0a0;
}

.rankGold {
width: 40px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
margin-right: 25px;
margin-left: 10px;
background-color: #FFD700;
}

.rankSilver {
width: 40px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
margin-right: 25px;
margin-left: 10px;
background-color: #C0C0C0;
}

.rankBronze {
width: 40px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
margin-right: 25px;
margin-left: 10px;
background-color: #CD7F32;
}

.username {
flex: 1;
margin-left: 2.1em;
width: 250px;
font-weight: 700;
}

.points {
width: 50px;
font-weight: 700;
margin-right: 1em;
}

}
Loading