Problems
Users Solved
Score
Status
+ const prob = challenges.map((el) => (
+
-
- {el.name}
- {' '}
-
+ {el.name}
-
- {el.userSolved}
- {' '}
-
+ {el.userSolved}
-
- {el.score}
- {' '}
-
+ {el.score}
- {el.status ? 'Solved' : 'Unsolved'}
- {' '}
+ {isSolved(el._id) ? "Solved" : "Unsolved"}{" "}
-
-
@@ -81,7 +113,7 @@ const CompProblems = ({ challenges }) => {
{el.details}
{
InputLabelProps={{
shrink: true,
}}
+ name={el.name}
onChange={answerInput}
/>
-
+
+ {rank + 1}
+ {el.handle}
+ {el.score}
+
+ ));
+ }
- const table = Object.values(leaderboard).map(el => (
-
- {el.rank}
- {el.name}
- {el.score}
-
- ));
return (
-
+
+ );
+ }
+ }
+ table = leaderboard.map((el, rank) => (
+ Rank : {i + 1}
+Score: {leaderboard[i].score}
+
- User Ranking No competitions to show ;
+ if (eventList) {
+ table = eventList.map((event) => (
+
- {rows.map(row => (
+ {rows.map((row) => (
{row.rank}
diff --git a/src/components/UI/Spinner/Spinner.jsx b/src/components/UI/Spinner/Spinner.jsx
index 1817ce7..e6f6eb1 100644
--- a/src/components/UI/Spinner/Spinner.jsx
+++ b/src/components/UI/Spinner/Spinner.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import classes from './Spinner.module.css';
+import React from "react";
+import classes from "./Spinner.module.css";
-const spinner = () => (
+ {value === index && {children} }
+
+ );
+}
+
+TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+ return {
+ id: `full-width-tab-${index}`,
+ "aria-controls": `full-width-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ backgroundColor: theme.palette.background.paper,
+ // width: 300,
+ textAlign: "center",
+ },
+ appbar: {
+ alignItems: "center",
+ },
+}));
+
+export default function FullWidthTabs() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ const handleChangeIndex = (index) => {
+ setValue(index);
+ };
+
+ return (
+
+
+
+
+ Password
+
+
+ {values.showPassword ?
+
+ }
+ />
+
+
+
+
+
+
+ +
+
+
+ );
+};
+
+SignUp.propTypes = {
+ onAuth: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+ loading: state.loading,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ onAuth: (authData, isLogin) => dispatch(actions.auth(authData, isLogin)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignUp);
diff --git a/src/components/auth/admin/signUp/signUp.module.css b/src/components/auth/admin/signUp/signUp.module.css
new file mode 100644
index 0000000..78c2ffc
--- /dev/null
+++ b/src/components/auth/admin/signUp/signUp.module.css
@@ -0,0 +1,27 @@
+.container {
+ text-align: center;
+}
+.modalTitle {
+ font-size: 40px;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.miniLine {
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin: auto;
+ margin-top: 25px;
+ margin-bottom: 0px;
+ border-radius: 3px;
+ height: 8px;
+}
+.textField {
+ display: flex;
+ justify-content: flex-start;
+ margin-right: 200px;
+ width: 350px;
+}
+.btnText {
+ margin-right: 10px;
+}
diff --git a/src/components/auth/logOut/logOut.jsx b/src/components/auth/logOut/logOut.jsx
new file mode 100644
index 0000000..8e4c442
--- /dev/null
+++ b/src/components/auth/logOut/logOut.jsx
@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import { Redirect } from "react-router-dom";
+import { connect } from "react-redux";
+
+import * as actions from "../../../store/actions/index";
+
+class Logout extends Component {
+ componentDidMount() {
+ this.props.onLogout();
+ }
+
+ render() {
+ return
- Login
+
Password
-
+
{values.showPassword ?
-)}
+ }
/>
-
);
+ if (props.loading) {
+ display =
- Sign Up
-
-
-
-
-
- Password
-
-
- {values.showPassword ?
-
-)}
- />
-
-
-
- -
+ {userRank}
-
-
);
};
-compLeaderboard.propTypes = {
- leaderboard: PropTypes.node.isRequired,
+CompLeaderboard.propTypes = {
+ eventId: PropTypes.node.isRequired,
};
-export default compLeaderboard;
+export default CompLeaderboard;
diff --git a/src/components/Table/CompLeaderboard/CompLeaderboard.module.css b/src/components/Table/CompLeaderboard/CompLeaderboard.module.css
index f747c6b..f5a46fb 100644
--- a/src/components/Table/CompLeaderboard/CompLeaderboard.module.css
+++ b/src/components/Table/CompLeaderboard/CompLeaderboard.module.css
@@ -1,15 +1,16 @@
.table {
- font-family: arial, sans-serif;
- border-collapse: collapse;
- width: 100%;
+ font-family: arial, sans-serif;
+ border-collapse: collapse;
+ width: 100%;
}
-td, th {
- border: 1px solid #dddddd;
- text-align: left;
- padding: 8px;
- }
+td,
+th {
+ border: 1px solid #dddddd;
+ text-align: left;
+ padding: 8px;
+}
- tr:nth-child(even) {
- background-color: #dddddd;
- }
\ No newline at end of file
+tr:nth-child(even) {
+ background-color: #dddddd;
+}
diff --git a/src/components/Table/CompTable/CompTable.jsx b/src/components/Table/CompTable/CompTable.jsx
index 82a1f47..078a7a2 100644
--- a/src/components/Table/CompTable/CompTable.jsx
+++ b/src/components/Table/CompTable/CompTable.jsx
@@ -1,55 +1,43 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-
-const useStyles = makeStyles(theme => ({
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import classesExt from "./CompTable.module.css";
+
+const useStyles = makeStyles((theme) => ({
root: {
- padding: theme.spacing(7, 5),
- spacing: 118,
+ padding: "40px",
+ backgroundColor: "rgba(245,245,245,0.6)",
+ position: "relative",
+ // top: '-150px'
},
}));
-
-export default function PaperSheet() {
+export default function PaperSheet({ eventList }) {
const classes = useStyles();
- const dudUrl = '/competition/';
-
+ const dudUrl = "/event/";
+ let table = | Rank | @@ -44,14 +40,12 @@ const compLeaderboard = ({ leaderboard }) => {
|---|
+
+
+ ));
+ }
return (
{event.name}
+
+
-
-
- Competitions
-
-
-
-
-
- Competition 1
-
-
-
-
-
-
-
-
- Competition 2
-
-
-
-
-
-
-
-
- Competition 3
-
-
-
-
+
+
);
diff --git a/src/components/Table/CompTable/CompTable.module.css b/src/components/Table/CompTable/CompTable.module.css
index e69de29..d7dd6a1 100644
--- a/src/components/Table/CompTable/CompTable.module.css
+++ b/src/components/Table/CompTable/CompTable.module.css
@@ -0,0 +1,37 @@
+.cardTitle {
+ font-weight: 700;
+ font-size: 40px;
+ text-transform: uppercase;
+}
+.miniLineCenter {
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 25px;
+ height: 8px;
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ border-radius: 3px;
+}
+.competitionList {
+ width: auto;
+ height: auto;
+ /* background-color: red; */
+ margin-top: 20px;
+ /* padding: 20px; */
+}
+.competitionLink {
+ font-style: none;
+ text-decoration: none;
+ color: black;
+ padding: 20px;
+ width: auto;
+ font-size: 20px;
+ font-weight: 600;
+ border-radius: 10px;
+ text-align: center;
+}
+.competitionLink:hover {
+ background-color: rgba(245, 0, 87, 1);
+ color: white;
+}
diff --git a/src/components/Table/UserTable/UserTable.jsx b/src/components/Table/UserTable/UserTable.jsx
index 0ccaad1..0f00ef4 100644
--- a/src/components/Table/UserTable/UserTable.jsx
+++ b/src/components/Table/UserTable/UserTable.jsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import PropTypes from 'prop-types';
+import React from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import PropTypes from "prop-types";
-const StyledTableCell = withStyles(theme => ({
+const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
@@ -18,9 +18,9 @@ const StyledTableCell = withStyles(theme => ({
},
}))(TableCell);
-const StyledTableRow = withStyles(theme => ({
+const StyledTableRow = withStyles((theme) => ({
root: {
- '&:nth-of-type(odd)': {
+ "&:nth-of-type(odd)": {
backgroundColor: theme.palette.background.default,
},
},
@@ -31,27 +31,26 @@ function createData(rank, name, score) {
}
const rows = [
- createData(1, 'Max', 667),
- createData(2, 'Scooby', 660),
- createData(3, 'Planck', 632),
- createData(4, 'Tommy', 611),
- createData(5, 'Rocky', 566),
+ createData(1, "Max", 667),
+ createData(2, "Scooby", 660),
+ createData(3, "Planck", 632),
+ createData(4, "Tommy", 611),
+ createData(5, "Rocky", 566),
];
-
function CustomizedTables({ width }) {
- let wid = '30%';
- if (width) {
- wid = width;
- }
- const useStyles = makeStyles(theme => ({
+ // idk what this code was for ----------------
+ // let wid = '30%';
+ // if (width) {
+ // wid = width;
+ // }
+ const useStyles = makeStyles((theme) => ({
root: {
- width: wid,
- marginTop: theme.spacing(3),
- overflowX: 'auto',
+ width: "300px",
+ padding: "0px",
},
table: {
- minWidth: 250,
+ width: "300px",
},
}));
@@ -68,7 +67,7 @@ function CustomizedTables({ width }) {
-
Competitions
+
+ {table}
Loading...
);
+const spinner = () => Loading...
;
export default spinner;
diff --git a/src/components/UI/Spinner/Spinner.module.css b/src/components/UI/Spinner/Spinner.module.css
index 8b5ef00..c29e383 100644
--- a/src/components/UI/Spinner/Spinner.module.css
+++ b/src/components/UI/Spinner/Spinner.module.css
@@ -1,70 +1,85 @@
.Loader {
- color: black;
- font-size: 20px;
- margin: 100px auto;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- position: relative;
- text-indent: -9999em;
- -webkit-animation: load4 1.3s infinite linear;
- animation: load4 1.3s infinite linear;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- }
- @-webkit-keyframes load4 {
- 0%,
- 100% {
- box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
- }
- 12.5% {
- box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
- }
- 25% {
- box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
- }
- 37.5% {
- box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
- }
- 50% {
- box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
- }
- 62.5% {
- box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
- }
- 75% {
- box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
- }
- 87.5% {
- box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
- }
- }
- @keyframes load4 {
- 0%,
- 100% {
- box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
- }
- 12.5% {
- box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
- }
- 25% {
- box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
- }
- 37.5% {
- box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
- }
- 50% {
- box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
- }
- 62.5% {
- box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
- }
- 75% {
- box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
- }
- 87.5% {
- box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
- }
- }
-
\ No newline at end of file
+ color: black;
+ font-size: 20px;
+ margin: 100px auto;
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ -webkit-animation: load4 1.3s infinite linear;
+ animation: load4 1.3s infinite linear;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+}
+@-webkit-keyframes load4 {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
+ 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
+ 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
+ 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+@keyframes load4 {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
+ 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
+ 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
+ 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+ 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
diff --git a/src/components/UI/Timer/timer.jsx b/src/components/UI/Timer/timer.jsx
new file mode 100644
index 0000000..1d4c7fb
--- /dev/null
+++ b/src/components/UI/Timer/timer.jsx
@@ -0,0 +1,267 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import "./timer.module.css";
+
+const calculateStateFromProps = (props) => {
+ const { dateTo, numberOfFigures, mostSignificantFigure } = props;
+ const currentDate = new Date();
+ const targetDate = new Date(dateTo);
+ const diff = targetDate - currentDate;
+ let significance = ["year", "month", "day", "hour", "min", "sec"];
+
+ let year = Math.floor(diff / 31104000000); // time diff in years
+ let month = Math.floor((diff / 2592000000) % 12); // time diff in months (modulated to 12)
+ let day = Math.floor((diff / 86400000) % 30); // time diff in days (modulated to 30)
+ let hour = Math.floor((diff / 3600000) % 24); // time diff's hours (modulated to 24)
+ let min = Math.floor((diff / 60000) % 60); // time diff's minutes (modulated to 60)
+ let sec = Math.floor((diff / 1000) % 60); // time diff's seconds (modulated to 60)
+
+ if (mostSignificantFigure === "none") {
+ if (year === 0) {
+ significance = significance.slice(1);
+ if (month === 0) {
+ significance = significance.slice(1);
+ if (day === 0) {
+ significance = significance.slice(1);
+ if (hour === 0) {
+ significance = significance.slice(1);
+ if (min === 0) {
+ significance = significance.slice(1);
+ }
+ }
+ }
+ }
+ }
+ } else {
+ significance = significance.slice(
+ significance.indexOf(mostSignificantFigure)
+ );
+ }
+ significance = significance.slice(0, numberOfFigures);
+
+ if (significance.indexOf("year") === -1) {
+ month += year * 12;
+ year = 0;
+ }
+ if (significance.indexOf("month") === -1) {
+ day += month * 30;
+ month = 0;
+ }
+ if (significance.indexOf("day") === -1) {
+ hour += day * 24;
+ day = 0;
+ }
+ if (significance.indexOf("hour") === -1) {
+ min += hour * 60;
+ hour = 0;
+ }
+ if (significance.indexOf("min") === -1) {
+ sec += min * 60;
+ min = 0;
+ }
+ if (diff <= 0) props.callback();
+ return {
+ speed: 250,
+ diff,
+ significance,
+ year,
+ month,
+ day,
+ hour,
+ min,
+ sec,
+ };
+};
+
+class Timer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+
+ componentDidMount() {
+ this.setState(calculateStateFromProps(this.props), () => {
+ if (this.state.diff > 0) {
+ const tickId = setInterval(this.tick, 1000);
+ this.setState({ tickId });
+ }
+ });
+ }
+
+ static getDerivedStateFromProps(props, state) {
+ const newState = calculateStateFromProps(props);
+ return newState;
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.state.tickId);
+ }
+
+ animateAndChangeIfNeeded = (unit, prevUnit) => {
+ const { speed, significance } = this.state;
+
+ if (significance.indexOf(unit) !== -1) {
+ const unitSpan = this.refs[unit];
+ const digits = unitSpan.children;
+ for (let i = 0; i < digits.length; i++) {
+ if (i === digits.length - 1) {
+ setTimeout(() => {
+ digits[i].classList.toggle("odometerEnd");
+ setTimeout(() => {
+ digits[i].classList.toggle("odometerEnd");
+ digits[i].classList.toggle("odometerStart");
+ if (prevUnit !== "none") {
+ const newState = {};
+ newState[prevUnit] = 59;
+ newState[unit] = this.state[unit] - 1;
+ this.setState(newState);
+ }
+ setTimeout(
+ () => digits[i].classList.toggle("odometerStart"),
+ speed
+ );
+ }, speed);
+ }, 1000 - speed);
+ } else {
+ let allZeros = true;
+ for (let j = i + 1; j < digits.length; j++) {
+ if (digits[j].innerHTML === "0") {
+ allZeros = true;
+ } else {
+ allZeros = false;
+ break;
+ }
+ }
+ if (allZeros) {
+ setTimeout(() => {
+ digits[i].classList.toggle("odometerEnd");
+ setTimeout(() => {
+ digits[i].classList.toggle("odometerEnd");
+ digits[i].classList.toggle("odometerStart");
+ if (prevUnit !== "none") {
+ const newState = {};
+ newState[prevUnit] = 59;
+ newState[unit] = this.state[unit] - 1;
+ this.setState(newState);
+ }
+ setTimeout(
+ () => digits[i].classList.toggle("odometerStart"),
+ speed
+ );
+ }, speed);
+ }, 1000 - speed);
+ }
+ }
+ }
+ }
+ };
+
+ tick = () => {
+ this.setState({ sec: this.state.sec - 1 });
+ this.animateAndChangeIfNeeded("sec", "none");
+
+ if (this.state.sec === 0) {
+ this.animateAndChangeIfNeeded("min", "sec");
+
+ if (this.state.min === 0) {
+ this.animateAndChangeIfNeeded("hour", "min");
+
+ if (this.state.hour === 0) {
+ this.animateAndChangeIfNeeded("day", "hour");
+
+ if (this.state.day === 0) {
+ this.animateAndChangeIfNeeded("month", "day");
+
+ if (this.state.month === 0) {
+ this.animateAndChangeIfNeeded("year", "month");
+ }
+ }
+ }
+ }
+ }
+
+ if (
+ this.state.sec === 0 &&
+ this.state.min === 0 &&
+ this.state.hour === 0 &&
+ this.state.day === 0 &&
+ this.state.month === 0 &&
+ this.state.year === 0
+ ) {
+ this.setState({ diff: -1 });
+ clearInterval(this.state.tickId);
+ this.props.callback();
+ }
+ };
+
+ dissect = (value, unit) => {
+ let valStr = Number(value).toString();
+ if (valStr.length === 1) {
+ valStr = `0${valStr}`;
+ }
+ return valStr.split("").map((digit, key) => (
+
+ {digit}
+
+ ));
+ };
+
+ render() {
+ const { significance } = this.state;
+ const { locales, locales_plural } = this.props;
+ const units = ["year", "month", "day", "hour", "min", "sec"];
+
+ if (this.state.diff < 0) {
+ // past date
+ return (
+
+ {units.map((unit, key) => {
+ if (significance.indexOf(unit) !== -1) {
+ return 0 {locales[key]} ;
+ }
+ return null;
+ })}
+
+ );
+ }
+ return (
+
+ {units.map((unit, key) => {
+ if (significance.indexOf(unit) !== -1) {
+ return (
+
+
+ {this.dissect(this.state[unit], unit)}
+ {" "}
+ {this.state[unit] <= 1 && locales[key]}
+ {this.state[unit] > 1 && locales_plural[key]}
+ {` `}
+
+ );
+ }
+ return null;
+ })}
+
+ );
+ }
+}
+
+Timer.propTypes = {
+ locales: PropTypes.array,
+ locales_plural: PropTypes.array,
+ dateTo: PropTypes.string.isRequired,
+ callback: PropTypes.func,
+ mostSignificantFigure: PropTypes.string,
+ numberOfFigures: PropTypes.number,
+};
+
+Timer.defaultProps = {
+ locales: ["year", "month", "day", "hour", "minute", "second"],
+ locales_plural: ["years", "months", "days", "hours", "minutes", "seconds"],
+ dateTo: new Date().toString(),
+ callback: () => null,
+ mostSignificantFigure: "none",
+ numberOfFigures: 6,
+};
+
+export default Timer;
diff --git a/src/components/UI/Timer/timer.module.css b/src/components/UI/Timer/timer.module.css
new file mode 100644
index 0000000..50a1577
--- /dev/null
+++ b/src/components/UI/Timer/timer.module.css
@@ -0,0 +1,40 @@
+@keyframes moveup {
+ 0% {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+}
+
+@keyframes movedown {
+ 0% {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(-12px);
+ }
+}
+
+.odometerStart {
+ display: inline-block;
+ animation-name: modeup 0.25s;
+ -webkit-animation: moveup 0.25s;
+ animation-fill-mode: forwards;
+}
+.odometerEnd {
+ display: inline-block;
+ animation-name: movedown 0.25s;
+ -webkit-animation: movedown 0.25s;
+ animation-fill-mode: forwards;
+}
+
+.odometer-block {
+ display: inline-block;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/components/UI/snackbar/snackbar.jsx b/src/components/UI/snackbar/snackbar.jsx
new file mode 100644
index 0000000..2ab951b
--- /dev/null
+++ b/src/components/UI/snackbar/snackbar.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Snackbar from "@material-ui/core/Snackbar";
+import { makeStyles } from "@material-ui/core/styles";
+import CloseIcon from "@material-ui/icons/Close";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ width: "100%",
+ "& > * + *": {
+ marginTop: theme.spacing(2),
+ },
+ },
+}));
+
+export default function Notif(props) {
+ const classes = useStyles();
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/about/about.jsx b/src/components/about/about.jsx
deleted file mode 100644
index 2669536..0000000
--- a/src/components/about/about.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const about = () => (
- About
-); - -export default about; diff --git a/src/components/auth/admin/admin.jsx b/src/components/auth/admin/admin.jsx new file mode 100644 index 0000000..0ba562b --- /dev/null +++ b/src/components/auth/admin/admin.jsx @@ -0,0 +1,95 @@ +import React from "react"; +import PropTypes from "prop-types"; +import SwipeableViews from "react-swipeable-views"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Tabs from "@material-ui/core/Tabs"; +import Tab from "@material-ui/core/Tab"; +import Typography from "@material-ui/core/Typography"; +import Box from "@material-ui/core/Box"; +import Login from "../login/login"; +import SignUp from "./signUp/signUp"; + +function TabPanel(props) { + const { children, value, index, ...other } = props; + + return ( +
+
+
+
+
+
+
+ Login
+
+
+ Sign Up
+
+
+
+ );
+}
diff --git a/src/components/auth/admin/signUp/signUp.jsx b/src/components/auth/admin/signUp/signUp.jsx
new file mode 100644
index 0000000..e479a02
--- /dev/null
+++ b/src/components/auth/admin/signUp/signUp.jsx
@@ -0,0 +1,116 @@
+import React from "react";
+import clsx from "clsx";
+import { connect } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import { Container, Button } from "@material-ui/core";
+import Icon from "@material-ui/core/Icon";
+import Visibility from "@material-ui/icons/Visibility";
+import VisibilityOff from "@material-ui/icons/VisibilityOff";
+import FormControl from "@material-ui/core/FormControl";
+import IconButton from "@material-ui/core/IconButton";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import PropTypes from "prop-types";
+import classes from "./signUp.module.css";
+import * as actions from "../../../../store/actions/index";
+
+const SignUp = (props) => {
+ const [values, setValues] = React.useState({
+ username: "",
+ password: "",
+ email: "",
+ secret: "",
+ });
+ const handleChange = (prop) => (event) => {
+ setValues({ ...values, [prop]: event.target.value });
+ };
+ const handleClickShowPassword = () => {
+ setValues({ ...values, showPassword: !values.showPassword });
+ };
+ const loginSubmitHandler = (event) => {
+ event.preventDefault();
+ props.onAuth(values, false);
+ };
+ return (
+ Sign Up
+
+ +
+
+
+
+
+
+ +
+
+
Login
+
+ -
{display}
;
};
-export default Login;
+const mapStateToProps = (state) => ({
+ loading: state.loading,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ onAuth: (authData, isLogin) => dispatch(actions.auth(authData, isLogin)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);
diff --git a/src/components/auth/login/login.module.css b/src/components/auth/login/login.module.css
index 70a652b..78c2ffc 100644
--- a/src/components/auth/login/login.module.css
+++ b/src/components/auth/login/login.module.css
@@ -1,10 +1,27 @@
.container {
- text-align: center;
+ text-align: center;
+}
+.modalTitle {
+ font-size: 40px;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.miniLine {
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin: auto;
+ margin-top: 25px;
+ margin-bottom: 0px;
+ border-radius: 3px;
+ height: 8px;
}
-
.textField {
- display: flex;
- justify-content: flex-start;
- margin-right: 200px;
- width:200px
-}
\ No newline at end of file
+ display: flex;
+ justify-content: flex-start;
+ margin-right: 200px;
+ width: 350px;
+}
+.btnText {
+ margin-right: 10px;
+}
diff --git a/src/components/auth/signUp/signUp.jsx b/src/components/auth/signUp/signUp.jsx
index 06f7962..d0f8032 100644
--- a/src/components/auth/signUp/signUp.jsx
+++ b/src/components/auth/signUp/signUp.jsx
@@ -1,104 +1,143 @@
-import React from 'react';
-import clsx from 'clsx';
-import TextField from '@material-ui/core/TextField';
-import { Typography, Container, Button } from '@material-ui/core';
-import Icon from '@material-ui/core/Icon';
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
-import FormControl from '@material-ui/core/FormControl';
-import IconButton from '@material-ui/core/IconButton';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Axios from 'axios';
-import classes from './signUp.module.css';
-import Modal from '../../modal/modal';
-import Login from '../login/login';
+import React from "react";
+import clsx from "clsx";
+import { connect } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import { Typography, Container, Button } from "@material-ui/core";
+import Icon from "@material-ui/core/Icon";
+import Visibility from "@material-ui/icons/Visibility";
+import VisibilityOff from "@material-ui/icons/VisibilityOff";
+import FormControl from "@material-ui/core/FormControl";
+import IconButton from "@material-ui/core/IconButton";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import classes from "./signUp.module.css";
+import Modal from "../../modal/modal";
+import Login from "../login/login";
+import Admin from "../admin/admin";
+import Spinner from "../../UI/Spinner/Spinner";
+import * as actions from "../../../store/actions/index";
-const SignUp = () => {
+const SignUp = (props) => {
const [values, setValues] = React.useState({
- name: '',
- emailId: '',
- number: 0,
- username: '',
- password: '',
+ name: "",
+ email: "",
+ number: "",
+ username: "",
+ password: "",
});
- const handleChange = prop => (event) => {
+ const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleClickShowPassword = () => {
setValues({ ...values, showPassword: !values.showPassword });
};
- const loginSubmitHandler = () => {
- Axios.post('Post Link', values);
+ const loginSubmitHandler = (event) => {
+ event.preventDefault();
+ props.onAuth(values, false);
};
- return (
+ let display = (
-
-
-
-
-
- -
-
-
);
};
-export default AddCompetitionForm;
+const mapStateToProps = (state) => ({
+ token: state.token,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ addEvent: (event, token) => dispatch(actions.onitEvent(event, token)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddCompetitionForm);
diff --git a/src/components/forms/addCompetitionForm/addCompetitionForm.module.css b/src/components/forms/addCompetitionForm/addCompetitionForm.module.css
index 0c1eeca..4f87767 100644
--- a/src/components/forms/addCompetitionForm/addCompetitionForm.module.css
+++ b/src/components/forms/addCompetitionForm/addCompetitionForm.module.css
@@ -1,6 +1,40 @@
+.mainCont {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ /* background-color: red; */
+ justify-content: flex-start;
+ position: absolute;
+ top: 150px;
+ /* height: calc(100% - 150px); */
+ width: 100%;
+ left: 0px;
+ padding-bottom: 100px;
+}
+.miniLine {
+ width: 40px;
+ height: 8px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin-top: 25px;
+ border-radius: 3px;
+}
+.subCont {
+ /* margin-left: 50px; */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ margin-top: 50px;
+}
+.title {
+ font-size: 50px;
+ font-weight: 700;
+}
.textField {
- display: flex;
- justify-content: flex-start;
- margin-right: 200px;
- width:200px
-}
\ No newline at end of file
+ display: flex;
+ justify-content: flex-start;
+ margin-right: 200px;
+ width: 450px;
+}
diff --git a/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.jsx b/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.jsx
index fe0807e..cb70b25 100644
--- a/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.jsx
+++ b/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.jsx
@@ -1,24 +1,31 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
import {
- Typography, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Grid, Container,
-} from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import Spinner from '../../../UI/Spinner/Spinner';
-import * as probelmActions from '../../../../store/actions/index';
-
+ Typography,
+ ExpansionPanel,
+ ExpansionPanelSummary,
+ ExpansionPanelDetails,
+ Grid,
+ Container,
+ Button,
+} from "@material-ui/core";
+import Icon from "@material-ui/core/Icon";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import Spinner from "../../../UI/Spinner/Spinner";
+import * as probelmActions from "../../../../store/actions/index";
+import classes from "./problemAdderDialog.module.css";
class problems extends Component {
- state={
- challenges: [],
- };
-
- componentDidMount() {
- const { onInitProblems } = this.props;
- onInitProblems();
- }
+ state = {
+ challenges: [],
+ levels: new Map(),
+ };
+ componentDidMount() {
+ const { onInitProblems } = this.props;
+ onInitProblems("2");
+ }
checkBoxChangeHandler = (element) => {
const { challenges } = this.state;
@@ -27,29 +34,44 @@ class problems extends Component {
if (i === element) {
flag = false;
}
- return '';
+ return "";
});
+ const { levels } = this.state;
+ const level = element.level.toString();
if (flag === true) {
- this.setState({ challenges: [...challenges, element] });
+ if (!levels.has(level)) {
+ levels.set(level, 0);
+ }
+ levels.set(
+ level,
+ (parseInt(levels.get(level), 10) + element.score).toString()
+ );
+ this.setState({ challenges: [...challenges, element._id], levels });
} else {
let temp = [...challenges];
- temp = temp.filter(item => item !== element);
- this.setState({ challenges: temp });
+ if (levels.has(level)) {
+ levels.set(
+ levels.get(level),
+ (parseInt(levels.get(level), 10) - element.score).toString()
+ );
+ }
+ temp = temp.filter((item) => item !== element);
+ this.setState({ challenges: temp, levels });
}
};
submitHandler = () => {
- const { challenges } = this.state;
+ const { challenges, levels } = this.state;
const { problemSubmit } = this.props;
- problemSubmit(challenges);
- }
+ problemSubmit(challenges, levels);
+ };
render() {
const { problemsList } = this.props;
let prob = null;
if (problemsList) {
- prob = Object.values(problemsList).map(el => (
-
-
- Problems
-
+
-
-
);
}
@@ -147,12 +159,12 @@ problems.propTypes = {
problemSubmit: PropTypes.node.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
problemsList: state.problems,
});
-const mapDispatchToProps = dispatch => ({
- onInitProblems: () => dispatch(probelmActions.initProbelms()),
+const mapDispatchToProps = (dispatch) => ({
+ onInitProblems: (problemType) =>
+ dispatch(probelmActions.initProbelms(problemType)),
});
-
export default connect(mapStateToProps, mapDispatchToProps)(problems);
diff --git a/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.module.css b/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.module.css
new file mode 100644
index 0000000..ae77b1e
--- /dev/null
+++ b/src/components/forms/addCompetitionForm/problemAdderDialog/problemAdderDialog.module.css
@@ -0,0 +1,19 @@
+.title {
+ font-size: 40px;
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+.tableTitle {
+ font-size: 17px;
+ font-weight: 500;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+.column1 {
+ display: flex;
+ flex-direction: row;
+}
+.checkBox {
+ margin-right: 10px;
+}
diff --git a/src/components/forms/addProblemForm/addProblemForm.jsx b/src/components/forms/addProblemForm/addProblemForm.jsx
index 204d039..1eec5fe 100644
--- a/src/components/forms/addProblemForm/addProblemForm.jsx
+++ b/src/components/forms/addProblemForm/addProblemForm.jsx
@@ -1,55 +1,90 @@
-import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import { Typography, Container, Button } from '@material-ui/core';
-import Icon from '@material-ui/core/Icon';
-import Axios from 'axios';
-import classes from './addProblemForm.module.css';
+import React, { useState } from "react";
+import TextField from "@material-ui/core/TextField";
+import { Typography, Container, Button } from "@material-ui/core";
+import Icon from "@material-ui/core/Icon";
+import Axios from "axios";
+import { connect } from "react-redux";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Snackbar from "../../UI/snackbar/snackbar";
+import * as actions from "../../../store/actions/index";
+import classes from "./addProblemForm.module.css";
-
-const AddProbelmForm = () => {
+const AddProbelmForm = (props) => {
const [formElements, setFormElement] = useState({
- name: '',
- category: '',
- details: '',
- difficulty: '',
- answer: '',
+ name: "",
+ category: "",
+ details: "",
+ difficulty: "",
+ answer: "",
+ level: 1,
+ score: 0,
+ isActive: 1,
});
+ const [open, setOpen] = React.useState(false);
+ const [message, setMessage] = React.useState("");
+
+ const openSnack = (mess) => {
+ setMessage(mess);
+ setOpen(true);
+ };
- const changeHandler = name => (event) => {
+ const handleClose = (event, reason) => {
+ if (reason === "clickaway") {
+ return;
+ }
+ setOpen(false);
+ };
+
+ const changeHandler = (name) => (event) => {
setFormElement({ ...formElements, [name]: event.target.value });
};
const submitHandler = (event) => {
event.preventDefault();
- Axios.post('https://ctf-apis.firebaseio.com/problems.json', formElements);
+ const { addProblem, token } = props;
+ addProblem(formElements, token);
+ openSnack("Problem added Successfully");
};
-
return (
-
-
+
);
+
+ if (props.loading) {
+ display =
+
+ Sign Up
+
+
+
+
+ OR
+
+
+
+
+
+
+
+
+
+ Password
+
+
+ {values.showPassword ?
+
+ }
+ />
+
+
+
+ +
+
+
+
+
+
+ +
{display}
;
};
-export default SignUp;
+const mapStateToProps = (state) => ({
+ loading: state.loading,
+ error: state.error,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ onAuth: (authData, isLogin) => dispatch(actions.auth(authData, isLogin)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignUp);
diff --git a/src/components/auth/signUp/signUp.module.css b/src/components/auth/signUp/signUp.module.css
index 7d6c3a8..0025079 100644
--- a/src/components/auth/signUp/signUp.module.css
+++ b/src/components/auth/signUp/signUp.module.css
@@ -1,10 +1,69 @@
.container {
-text-align: center;
+ text-align: center;
+}
+.mainCont {
+ display: flex;
+ flex-direction: row;
+ position: absolute;
+ top: 150px;
+ height: calc(100% - 150px);
+ width: 100%;
+ left: 0px;
+ justify-content: center;
+ align-items: center;
+ /* background-color: green; */
+}
+.pageTitle {
+ font-weight: 700;
+ font-size: 50px;
+ margin-top: 30px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+.miniLine {
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin: auto;
+ margin-top: 25px;
+ margin-bottom: 0px;
+ border-radius: 3px;
+ height: 8px;
+}
+.left {
+ width: 40%;
+ /* background-color: red; */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.right {
+ width: 40%;
+ /* background-color: green; */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.modalRow {
+ margin-top: 30px;
+ width: 200px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+}
+.modalRow .orSym {
+ width: 40px;
+ line-height: 40px;
+ height: 40px;
+ border-radius: 20px;
+ border: 1px solid black;
}
-
.textField {
- display: flex;
- justify-content: flex-start;
- margin-right: 200px;
- width:200px
-}
\ No newline at end of file
+ width: 350px;
+}
+.btnText {
+ margin-right: 10px;
+}
diff --git a/src/components/competition/competition.jsx b/src/components/competition/competition.jsx
index 453fbc7..5c29108 100644
--- a/src/components/competition/competition.jsx
+++ b/src/components/competition/competition.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
+import React from "react";
-const competition = () => (
- Competition
-); +const competition = () =>Competition
; export default competition; diff --git a/src/components/contactUs/contactUs.jsx b/src/components/contactUs/contactUs.jsx index 74be985..688fb8b 100644 --- a/src/components/contactUs/contactUs.jsx +++ b/src/components/contactUs/contactUs.jsx @@ -1,7 +1,5 @@ -import React from 'react'; +import React from "react"; -const contactUs = () => ( -Contact Us
-); +const contactUs = () =>Contact Us
; export default contactUs; diff --git a/src/components/forms/addCompetitionForm/addCompetitionForm.jsx b/src/components/forms/addCompetitionForm/addCompetitionForm.jsx index 8b1ffe7..3f1e1dd 100644 --- a/src/components/forms/addCompetitionForm/addCompetitionForm.jsx +++ b/src/components/forms/addCompetitionForm/addCompetitionForm.jsx @@ -1,104 +1,146 @@ -import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; -import { Typography, Container, Button } from '@material-ui/core'; -import Icon from '@material-ui/core/Icon'; -import { - DateTimePicker, - MuiPickersUtilsProvider, -} from 'material-ui-pickers'; -import MomentUtils from '@date-io/moment'; -import Axios from 'axios'; -import classes from './addCompetitionForm.module.css'; -import Modal from '../../modal/modal'; -import ProblemAdderDialog from './problemAdderDialog/problemAdderDialog'; +import React, { useState } from "react"; +import { connect } from "react-redux"; +import TextField from "@material-ui/core/TextField"; +import { Typography, Container, Button } from "@material-ui/core"; +import Icon from "@material-ui/core/Icon"; +import { DateTimePicker, MuiPickersUtilsProvider } from "material-ui-pickers"; +import MomentUtils from "@date-io/moment"; +import Axios from "axios"; +import classes from "./addCompetitionForm.module.css"; +import Modal from "../../modal/modal"; +import ProblemAdderDialog from "./problemAdderDialog/problemAdderDialog"; +import * as actions from "../../../store/actions/index"; +import Snackbar from "../../UI/snackbar/snackbar"; - -const AddCompetitionForm = () => { +const AddCompetitionForm = (props) => { const [values, setValues] = useState({ - name: '', + name: "", challenges: [], - details: '', + details: "", + level: 0, + levelScore: new Map(), }); const [startDate, handleStartDateChange] = useState(new Date()); const [endDate, handleEndDateChange] = useState(new Date()); + const [open, setOpen] = React.useState(false); + const [message, setMessage] = React.useState(""); + + const openSnack = (mess) => { + setMessage(mess); + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + setOpen(false); + }; - const changeHandler = name => (event) => { + const changeHandler = (name) => (event) => { setValues({ ...values, [name]: event.target.value }); }; const submitHandler = (event) => { event.preventDefault(); - const send = { ...values, ...startDate, ...endDate }; - Axios.post('Post Link', send); + const req = { + ...values, + startTime: startDate, + endTime: endDate, + }; + const { addEvent, token } = props; + // console.log(req.levelScore) + addEvent(req, token); + openSnack("Competition Created Successfully"); }; - const problemSubmitHandler = (challenges) => { - setValues({ ...values, challenges }); + const problemSubmitHandler = (challenges, levels) => { + const level = levels.size; + setValues({ ...values, challenges, levelScore: levels, level }); + openSnack("Problems added Successfully"); }; - return (
- Add a Competition
-
-
+ -
+ prob = Object.values(problemsList).map((el) => (
+
-
- this.checkBoxChangeHandler(el)} />
- {el.name}
- {' '}
-
+
-
- {el.userSolved}
- {' '}
-
+ {el.userSolved}
-
- {el.score}
- {' '}
-
+ {el.score}
-
- {el.status ? 'Solved' : 'Unsolved'}
- {' '}
-
+ {el.status ? "Solved" : "Unsolved"}
-
-
-
- {el.details}
-
+ {el.details}
@@ -103,39 +116,38 @@ class problems extends Component {
- Problems
+
- Users Solved
+
- Score
+
- Status
+
-
-
-
);
}
-
return (
+
+ this.checkBoxChangeHandler(el)}
+ />
+
+ {el.name}
+
Problems
Users Solved
Score
Status
Problems
{display}
{prob}
-
-
+
- Add a Problem
-
+
+
+ );
+ }
+
return (
-
+
+
);
};
-export default AddProbelmForm;
+const mapStateToProps = (state) => ({
+ token: state.token,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ addProblem: (problem, token) => dispatch(actions.onitProblem(problem, token)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddProbelmForm);
+
+//
+
-
+ Add a Problem
+
+
+
+
+
+
+
-
-
-
+
{value === 0 && (
-
-
+
+
)}
{value === 1 && (
-
-
+
+
)}
{value === 2 && (
-
-
+
+
)}
{value === 3 && (
-
-
+
+
)}
{value === 4 && (
-
-
+
+
)}
{value === 5 && (
-
-
+
+
)}
-
+ {red}
);
};
@@ -196,5 +208,9 @@ NavTabs.propTypes = {
location: PropTypes.objectOf(PropTypes.string).isRequired,
};
+const mapStateToProps = (state) => ({
+ loading: state.loading,
+ isAuthenticated: state.token !== null,
+});
-export default withRouter(NavTabs);
+export default connect(mapStateToProps)(withRouter(NavTabs));
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
index a6fadd4..c353fd9 100644
--- a/src/components/header/header.module.css
+++ b/src/components/header/header.module.css
@@ -1,5 +1,4 @@
.header {
- display: flex;
- justify-content: flex-end;
-
-}
\ No newline at end of file
+ display: flex;
+ justify-content: flex-end;
+}
diff --git a/src/components/home/home.jsx b/src/components/home/home.jsx
index b0606af..dce6814 100644
--- a/src/components/home/home.jsx
+++ b/src/components/home/home.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
+import React from "react";
-const home = () => (
- Capture The Flag
-
+
+
+
+ {logOut}
+
+
+ + Capture The Flag +
+
-
-
-
- -
- {' '} -
- {' '} -
-
- - -
-
-
- - -
- {' '} -
- {' '} -
-
- - -
+
+
+
+
+ +
+
+
-
- {' '} -
- {' '} -
- {' '} -
- -
-
- - {' '} -
- {' '} -
- {' '} -
- -
+
+
+ +
-
-
-
-
- - -
-
-
- -
-
-
- - -
+
+
+
+
+
+ +
+
+
+
-
- {' '} -
- {' '} -
- {' '} -
- - -
-
-
- - {' '} -
- {' '} -
- {' '} -
- - -
+
+
+ +
-
- {' '} -
- {' '} -
- {' '} -
- - -
-
-
- - {' '} -
- {' '} -
- {' '} -
- - -
+
+
+ +
-
- {' '} -
- {' '} -
- {' '} -
- - -
-
-
- - {' '} -
- {' '} -
- {' '} -
- - -
+
+
+ +
Home
-); +const home = () =>Home
; export default home; diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx index f2b3dc2..03f6013 100644 --- a/src/components/modal/modal.jsx +++ b/src/components/modal/modal.jsx @@ -1,16 +1,16 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Modal from '@material-ui/core/Modal'; -import Button from '@material-ui/core/Button'; -import PropTypes from 'prop-types'; +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import Modal from "@material-ui/core/Modal"; +import Button from "@material-ui/core/Button"; +import PropTypes from "prop-types"; function rand() { return Math.round(Math.random() * 20) - 10; } function getModalStyle() { - const top = 50 + rand(); - const left = 50 + rand(); + const top = 50; + const left = 50; return { top: `${top}%`, @@ -19,14 +19,14 @@ function getModalStyle() { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ paper: { - position: 'absolute', + position: "absolute", width: 900, backgroundColor: theme.palette.background.paper, boxShadow: theme.shadows[5], padding: theme.spacing(4), - outline: 'none', + outline: "none", }, })); diff --git a/src/components/practice/practice.jsx b/src/components/practice/practice.jsx index 777c618..616cd8e 100644 --- a/src/components/practice/practice.jsx +++ b/src/components/practice/practice.jsx @@ -1,7 +1,5 @@ -import React from 'react'; +import React from "react"; -const practice = () => ( -Practice
-); +const practice = () =>Practice
; export default practice; diff --git a/src/containers/about/about.jsx b/src/containers/about/about.jsx index 9cc7408..940fde2 100644 --- a/src/containers/about/about.jsx +++ b/src/containers/about/about.jsx @@ -1,30 +1,32 @@ -import React from 'react'; -import { Container } from '@material-ui/core'; -import classes from './about.module.css'; +import React from "react"; +import { Container } from "@material-ui/core"; +import classes from "./about.module.css"; const about = () => (
+
-
Why CTF?
-CTF gives you a platform to learn and show your talent as hackers
+ ++ {" "} + CTF gives you a platform to learn and show your talent as hackers{" "} +
-
-
-
-
);
export default about;
diff --git a/src/containers/about/about.module.css b/src/containers/about/about.module.css
index b053801..ffc762a 100644
--- a/src/containers/about/about.module.css
+++ b/src/containers/about/about.module.css
@@ -1,15 +1,57 @@
+.mainCont {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* background-color: red; */
+ justify-content: center;
+ position: absolute;
+ top: 150px;
+ height: calc(100% - 150px);
+ width: 100%;
+ left: 0px;
+}
+.topbox {
+ font-family: "Roboto", sans-serif;
+ background-color: #e6e6e6;
+ border-radius: 20px;
+ text-align: center;
+ padding: 40px;
+ width: calc(63% - 80px);
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 30px;
+}
.whyctf {
- padding-top: 80px;
- padding-bottom: 0px;
- color: #89D6F3;
-
- text-align: center;
- }
-
- .topbox {
- font-family: "Roboto", sans-serif;
- background-color: #1D6B87;
- text-align: center;
- padding-bottom: 80px;
- color : #FFFFFF;
- }
\ No newline at end of file
+ /* padding-bottom: 0px; */
+ text-align: center;
+}
+.whyDesc {
+ font-style: italic;
+}
+.subText {
+ width: 60%;
+ margin-top: 30px;
+}
+.miniLine {
+ width: 40px;
+ height: 8px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin-top: 25px;
+ border-radius: 3px;
+}
+.miniLineCenter {
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 5px;
+ height: 3px;
+}
+.aboutTitle {
+ font-size: 40px;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.aboutText {
+ margin-top: 25px;
+ font-size: 16px;
+}
diff --git a/src/containers/competitions/competition/competition.jsx b/src/containers/competitions/competition/competition.jsx
index 2c5629a..9615959 100644
--- a/src/containers/competitions/competition/competition.jsx
+++ b/src/containers/competitions/competition/competition.jsx
@@ -1,65 +1,239 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Typography, Container, Box } from '@material-ui/core';
-import { connect } from 'react-redux';
-import classes from './competition.module.css';
-import CompLeaderboard from '../../../components/Table/CompLeaderboard/CompLeaderboard';
-import CompProblems from '../../../components/Problem/CompProblems/CompProblems';
-import * as CompetitionActions from '../../../store/actions/index';
-import Spinner from '../../../components/UI/Spinner/Spinner';
-
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Typography, Container, Box, Paper, Button } from "@material-ui/core";
+import { connect } from "react-redux";
+import Timer from "../../../components/UI/Timer/timer";
+import classes from "./competition.module.css";
+import CompLeaderboard from "../../../components/Table/CompLeaderboard/CompLeaderboard";
+import CompProblems from "../../../components/Problem/CompProblems/CompProblems";
+import * as CompetitionActions from "../../../store/actions/index";
+import Spinner from "../../../components/UI/Spinner/Spinner";
+import Snackbar from "../../../components/UI/snackbar/snackbar";
class competition extends Component {
componentDidMount() {
- const { onInitCompetition, history } = this.props;
- const id = history.location.pathname.substr(13);
- onInitCompetition(id);
+ const {
+ onInitCompetition,
+ location,
+ token,
+ onInitLeaderboard,
+ } = this.props;
+ const { _id } = location.state;
+ onInitCompetition(_id, token, 1);
+ onInitLeaderboard(_id);
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ level: 1,
+ eventId: null,
+ leaderboardShow: true,
+ open: false,
+ message: "",
+ dummy: true,
+ };
+ this.openSnack = this.openSnack.bind(this);
+ this.closeSnack = this.closeSnack.bind(this);
+ }
+
+ openSnack(mess) {
+ this.setState({
+ open: true,
+ message: mess,
+ });
+ }
+
+ closeSnack() {
+ this.setState({
+ open: false,
+ });
}
+ updateUI = () => {
+ const { level } = this.state;
+ const {
+ onInitCompetition,
+ location,
+ token,
+ onInitProfile,
+ onInitLeaderboard,
+ userId,
+ } = this.props;
+ const { _id } = location.state;
+ onInitCompetition(_id, token, level);
+ onInitProfile(userId, token);
+ onInitLeaderboard(_id);
+ };
+
+ nextButtonHandler = (participant) => {
+ const {
+ token,
+ compDetails,
+ location,
+ onInitCompetitionLevelProblems,
+ } = this.props;
+ const { level } = this.state;
+ const { _id } = location.state;
+ if (level === compDetails.levels) {
+ this.openSnack("This is the Final level!!");
+ }
+ if (participant.level > level) {
+ const updatedLevel = level + 1;
+ onInitCompetitionLevelProblems(_id, token, updatedLevel, participant._id);
+ this.setState({ level: updatedLevel });
+ } else {
+ this.openSnack("Level not Unlocked yet!!");
+ }
+ };
+
+ prevButtonHandler = () => {
+ const {
+ profile,
+ location,
+ token,
+ onInitCompetitionLevelProblems,
+ } = this.props;
+ const { level } = this.state;
+ const { _id } = location.state;
+ let participant = null;
+ if (level > 1) {
+ const updatedLevel = level - 1;
+ if (profile) {
+ participant = profile.participant[profile.participant.length - 1];
+ }
+ onInitCompetitionLevelProblems(_id, token, updatedLevel, participant._id);
+ this.setState({ level: updatedLevel });
+ } else {
+ this.openSnack("This is the first level");
+ }
+ };
+
+ showLeaderboardHandler = (eventId, leaderboardStatus, token) => {
+ const { onInitLeaderboardStatus, onInitLeaderboard } = this.props;
+ onInitLeaderboardStatus(eventId, leaderboardStatus, token);
+
+ const { dummy } = this.state;
+ setTimeout(() => {
+ // this.forceUpdate()
+ onInitLeaderboard(eventId);
+ this.setState({ dummy: !dummy });
+ }, 2000);
+ };
+
render() {
- const { compDetails } = this.props;
+ const {
+ compDetails,
+ token,
+ profile,
+ leaderboard,
+ leaderboardStatus,
+ } = this.props;
+ const { open, message } = this.state;
+ const { level } = this.state;
+ let participant = null;
+ let problemsSolved = null;
+ let userId = null;
+ if (compDetails && profile) {
+ userId = profile._id;
+ participant = compDetails.participants.filter(
+ (el) => el.userId === userId
+ );
+ if (!participant) {
+ this.forceUpdate();
+ }
+ participant = participant[0];
+ problemsSolved = participant.problemsSolved;
+ problemsSolved = problemsSolved.map((prb) => {
+ const prbId = Object.keys(prb)[1];
+ return prbId;
+ });
+ }
let data = About
- -CTF stands for Capture The Flag. A flag is associated with every challenge.
- -- {' '} -Once you have solved a particular challenge you would get the hidden +
+
About
+
+
+ CTF stands for Capture The Flag. A flag is associated with every
+ challenge.
+
+
+ Once you have solved a particular challenge you would get the hidden flag which you need to submit back to us for getting points. - +
+
+ Once you have solved a particular challenge you would get the hidden flag which you need to submit back to us for getting points. - +
-
-
- {compDetails.name}
-
-
-
-
- {compDetails.details}
-
+ Rules and Regulations :
-
{compDetails.name}
+
+
+ {new Date(compDetails.endTime) > new Date() ? ( +
+
+ + {new Date(compDetails.endTime) > new Date() ? ( +
Competition Over
+ )}{compDetails.details}
-
-
-
- The rules are as follow, Blah Blah Blah Blah and so on.
-
+
+
- Rules and Regulations:
+
+ Rule Details
- Challenges
-
-
-
- {data}
-
+
-
-
);
}
}
@@ -68,14 +242,39 @@ competition.propTypes = {
onInitCompetition: PropTypes.node.isRequired,
compDetails: PropTypes.node.isRequired,
history: PropTypes.node.isRequired,
+ location: PropTypes.node.isRequired,
+ token: PropTypes.node.isRequired,
+ profile: PropTypes.node.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
compDetails: state.competition,
+ token: state.token,
+ profile: state.profile,
+ leaderboard: state.leaderboard,
+ userId: state.userId,
+ leaderboardStatus: state.leaderboardStatus,
});
-const mapDispatchToProps = dispatch => ({
- onInitCompetition: id => dispatch(CompetitionActions.initCompetition(id)),
+const mapDispatchToProps = (dispatch) => ({
+ onInitProfile: (userId, token) =>
+ dispatch(CompetitionActions.initProfile(userId, token)),
+ onInitCompetition: (id, token, level) =>
+ dispatch(CompetitionActions.initCompetition(id, token, level)),
+ onInitLeaderboard: (eventId) =>
+ dispatch(CompetitionActions.initLeaderboard(eventId)),
+ onInitLeaderboardStatus: (eventId, leaderboardStatus) =>
+ dispatch(
+ CompetitionActions.initLeaderboardStatus(eventId, leaderboardStatus)
+ ),
+ onInitCompetitionLevelProblems: (eventId, token, level, participantId) =>
+ dispatch(
+ CompetitionActions.initCompetitionLevelProblems(
+ eventId,
+ token,
+ level,
+ participantId
+ )
+ ),
});
-
export default connect(mapStateToProps, mapDispatchToProps)(competition);
diff --git a/src/containers/competitions/competition/competition.module.css b/src/containers/competitions/competition/competition.module.css
index 2937e9b..fe026b8 100644
--- a/src/containers/competitions/competition/competition.module.css
+++ b/src/containers/competitions/competition/competition.module.css
@@ -1,17 +1,61 @@
+.mainCont {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ position: absolute;
+ top: 150px;
+ width: 100%;
+ left: 0px;
+ padding-bottom: 80px;
+}
.title {
- padding : 50px;
-
-}
-
-.para {
- padding:20px;
-
-}
-
-
-
-.flex {
- display:flex;
- flex-direction: row-reverse;
-
-}
\ No newline at end of file
+ font-size: 50px;
+ font-weight: 700;
+ text-align: center;
+ text-transform: uppercase;
+ margin-top: 50px;
+}
+.miniLineCol {
+ width: 40px;
+ background-color: rgba(245, 0, 87, 1);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin: auto;
+ margin-bottom: 0px;
+ margin-top: 20px;
+ border-radius: 3px;
+ height: 8px;
+}
+.details {
+ font-size: 16px;
+ margin: auto;
+ text-align: center;
+ margin-top: 20px;
+ width: 60%;
+}
+.ruleCont,
+.challengesCont,
+.rankingCont {
+ width: 100%;
+ margin: auto;
+}
+.subTitle {
+ font-weight: 600;
+ font-size: 35px;
+ margin: auto;
+ margin-top: 40px;
+}
+.miniLine {
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin-top: 20px;
+ margin-left: 10px;
+ border-radius: 3px;
+ height: 8px;
+}
+.ruleDetails {
+ margin: auto;
+ margin-top: 20px;
+ width: 98%;
+}
diff --git a/src/containers/competitions/competitions.jsx b/src/containers/competitions/competitions.jsx
index a3c3155..c4dc6f8 100644
--- a/src/containers/competitions/competitions.jsx
+++ b/src/containers/competitions/competitions.jsx
@@ -1,72 +1,202 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
import {
- Typography, CssBaseline, Paper, Grid, Container, Box,
-} from '@material-ui/core';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import classes from './competitions.module.css';
-import Spinner from '../../components/UI/Spinner/Spinner';
-import * as CompetitionActions from '../../store/actions/index';
+ Typography,
+ Paper,
+ Grid,
+ Container,
+ Box,
+ Fab,
+ Button,
+} from "@material-ui/core";
+import PropTypes from "prop-types";
+import NavigationIcon from "@material-ui/icons/Navigation";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import Axios from "axios";
+import classes from "./competitions.module.css";
+import Spinner from "../../components/UI/Spinner/Spinner";
+import * as CompetitionActions from "../../store/actions/index";
+import Snackbar from "../../components/UI/snackbar/snackbar";
class competitions extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ open: false,
+ message: "",
+ };
+ this.openSnack = this.openSnack.bind(this);
+ this.closeSnack = this.closeSnack.bind(this);
+ }
+
componentDidMount() {
const { onInitCompetitions } = this.props;
onInitCompetitions();
}
+ openSnack(mess) {
+ this.setState({
+ open: true,
+ message: mess,
+ });
+ }
+
+ closeSnack() {
+ this.setState({
+ open: false,
+ });
+ }
+
+ // constructor(props){
+ // super(props);
+ // this.state = {
+ // render: false,
+ // }
+ // }
+
+ deleteEventHandler = async (eventId) => {
+ const { token } = this.props;
+ const url = `http://localhost:3000/api/event/${eventId}`;
+ const response = await Axios({
+ method: "DELETE",
+ url,
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ };
+
+ registerHandler = async (event) => {
+ const { token, userId, profile, registerCompetition } = this.props;
+ if (!token) {
+ this.openSnack("Login to Register!!");
+ return;
+ }
+ if (new Date(event.startTime) > new Date()) {
+ this.openSnack("Registration has not started yet!!");
+ return;
+ }
+ const profileParticipantsId = profile.participant.map((el) => el._id);
+ const isParticipated = profileParticipantsId.some((item) =>
+ event.participants.includes(item)
+ );
+ if (isParticipated) {
+ this.openSnack("Already Registered !!");
+ return;
+ }
+ await registerCompetition(token, userId, profile, event);
+ const { onInitCompetitions, onInitProfile } = this.props;
+ await onInitProfile(userId, token);
+ await onInitCompetitions();
+ this.forceUpdate();
+ this.openSnack("Successfully Registered!!");
+ };
+
render() {
- const { competitionsList } = this.props;
+ const { open, message } = this.state;
+ const { competitionsList, profile } = this.props;
+ let isAdmin = null;
+ if (profile) {
+ isAdmin = profile.isAdmin;
+ }
let compList =
+
+
-
- Challenges:
+
+
+ Level {level}
+
+
+
+
+
+
-
);
}
return (
+
User Ranking:
+
+ {leaderboardShow}
+
+
{data}
+
-
-
-
+ {this.props.red}
-
{
+ const { token, profile } = this.props;
+ let reg = null;
+ let profileParticipantsId = null;
+ let isParticipated = null;
+ if (profile) {
+ profileParticipantsId = profile.participant.map((el) => el._id);
+ isParticipated = profileParticipantsId.some((item) =>
+ el.participants.includes(item)
+ );
+ }
+ if (!token) {
+ reg = "Login to Register";
+ } else if (!isParticipated) {
+ reg = "Register";
+ } else {
+ reg = "Registered";
+ }
+ const startCompetition = () => {
+ if (!token) {
+ this.openSnack("Login to Enter Competition");
+ return;
+ }
+ if (!isParticipated) {
+ this.openSnack("Register to Enter Competition");
+ return;
+ }
+ if (new Date(el.startTime) > new Date()) {
+ this.openSnack("Competition has not started yet!!");
+ }
+ };
+ return (
+
-
-
+ );
+ });
}
return (
+
+ startCompetition()}
+ to={{
+ pathname: `/event/${
+ isParticipated &&
+ token &&
+ new Date(el.startTime) < new Date()
+ ? el._id
+ : ""
+ }`,
+ state: {
+ _id: `${el._id}`,
+ },
+ }}
>
-
- {el.name}
-
-
-
-
-
- {el.details}
-
+
+
+ {el.name}
+
+ {el.details}
+
+
+
+
+
- Registered
-
-
- {el.userReg} -
-
-
-
-
-
- ));
+
+ Registered - {el.participants.length}
-
- -
- {el.userReg} -
+ {isAdmin ? (
+
+ ) : null}
+
+
-
-Competitions
- {compList}
- Add a new Competition
+
-
-
+
+ Competitions
+
+ {compList}
+ {isAdmin ? (
+
+
+
+
+
+
+ ) : null}
-
Contact Us
-- We are always a message away on our - {' '} - Facebook page. -
-- {' '} -We @ DevClub are constantly looking for ways to make our products better. - {' '} - Click here -, If you have any feedback you want to share with us. - {' '} -
+
+
-
-
);
export default contactUs;
diff --git a/src/containers/home/home.jsx b/src/containers/home/home.jsx
index 452e2a0..a3abb87 100644
--- a/src/containers/home/home.jsx
+++ b/src/containers/home/home.jsx
@@ -1,66 +1,81 @@
-import React from 'react';
-import {
- Container, Grid, Typography, Fab,
-} from '@material-ui/core';
-import NavigationIcon from '@material-ui/icons/Navigation';
-import classes from './home.module.css';
-import CompTable from '../../components/Table/CompTable/CompTable';
-import UserTable from '../../components/Table/UserTable/UserTable';
+import React, { useEffect, useState } from "react";
+import { Container, Grid, Typography, Fab } from "@material-ui/core";
+import NavigationIcon from "@material-ui/icons/Navigation";
+import Axios from "axios";
+import classes from "./home.module.css";
+import CompTable from "../../components/Table/CompTable/CompTable";
+import UserTable from "../../components/Table/UserTable/UserTable";
+const Home = () => {
+ const [event, setEvent] = useState(null);
+ useEffect(() => {
+ const getEvents = async (url) => {
+ const response = await Axios.get(url);
+ setEvent(response.data);
+ };
+ const url = "http://localhost:3000/api/event/ongoing-events";
+ getEvents(url);
+ }, []);
+ let eventList = [];
+ if (event) {
+ eventList = [...event];
+ }
+ return (
+
+
Contact Us
+
+
+
+
+ DevClub is one of the most friendly and open clubs that is there in
+ the Institute and all of its members are easily accessible.You can
+ go through our official website and feel free to send us any mail or
+ message over facebook.
+
+
+ Some more contact information below +
+
+
+ +
+ Some more contact information below +
+ {" "} + We @ DevClub are constantly looking for ways to make our + products better.{" "} + + Click here{" "} + + , If you have any feedback you want to share with us.{" "} +
+
+
+
+
+ );
+};
-const home = () => (
-
+
+
+
+ {/*
+
+
+
+
+
+
+
+ Most Wanted
+
+
+ Cyber security is a high priority of companies, small and big,
+ as cyber attacks have been on the rise in recent years. In
+ response to these attacks, security professionals and college
+ students have been through rigorous training as how hackers
+ are able to get into the companies and how to defend against
+ them. One way of cyber security training is through a cyber
+ security capture the flag (CTF) event. A cyber security CTF is
+ a competition between security professionals and/or students
+ learning about cyber security. This competition is used as a
+ learning tool for everyone that is interested in cyber
+ security and it can help sharpen the tools they have learned
+ during their training.
+
+ +
+
+ If you are new to CTF, we recommend you going through our
+ walkthrough portal given here.
+
+ +
+
+
+
+
+
+
+
+
*/}
+ User Rank
+
+
+
+
-
-
-Most Wanted
-
-
-
-
- Cyber security is a high priority of companies, small and big, as cyber attacks
- have been on the rise
- in recent years. In response to these attacks, security professionals and
- college students have been
- through rigorous training as how hackers are able to get into the companies and
- how to defend against
- them. One way of cyber security training is through a cyber security capture
- the flag (CTF) event.
- A cyber security CTF is a competition between security professionals
- and/or students learning about
- cyber security. This competition is used as a learning tool for everyone
- that is interested in cyber
- security and it can help sharpen the tools they have learned
- during their training.
-
-
-
- If you are new to CTF, we recommend you going through our
- walkthrough portal given here.
-
-
-
- - -
-
-
-
-
-
-
-
-);
-
-export default home;
+export default Home;
diff --git a/src/containers/home/home.module.css b/src/containers/home/home.module.css
index e6aaedd..b899c90 100644
--- a/src/containers/home/home.module.css
+++ b/src/containers/home/home.module.css
@@ -1,7 +1,76 @@
.title {
- text-align: center;
+ text-align: center;
}
.center {
- display: flex;
- justify-content: center;
-}
\ No newline at end of file
+ display: flex;
+ justify-content: center;
+}
+.mainCont {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ position: absolute;
+ top: 150px;
+ height: calc(100% - 150px);
+ width: 100%;
+ left: 0px;
+}
+.section {
+ margin-left: 80px;
+ margin-top: 80px;
+ margin-right: 120px;
+}
+.sectionTitle {
+ font-size: 80px;
+ font-weight: 700;
+}
+.miniLine {
+ width: 80px;
+ height: 8px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin-top: 25px;
+ border-radius: 3px;
+}
+.splitSection {
+ /* margin-top: 30px; */
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+.splitSectionLeft {
+ width: 60%;
+ font-size: 17px;
+}
+.splitSectionLeftDesc {
+ margin-top: 30px;
+}
+.splitSectionLeftHighlight {
+ font-size: 16px;
+ font-style: italic;
+ font-weight: 300;
+}
+.splitSectionRight {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.section2 {
+ margin-left: 80px;
+ margin-right: 80px;
+ margin-top: 100px;
+ padding-bottom: 100px;
+ width: calc(100% - 160px);
+ text-align: center;
+}
+.sectionTitleSmall {
+ font-weight: 700;
+ font-size: 50px;
+}
+.userTableCont {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 40px;
+}
diff --git a/src/containers/practice/Categories/categories.jsx b/src/containers/practice/Categories/categories.jsx
index 10d1c02..ebfca74 100644
--- a/src/containers/practice/Categories/categories.jsx
+++ b/src/containers/practice/Categories/categories.jsx
@@ -1,42 +1,71 @@
-import React from 'react';
-import {
- Grid, Box, Container, Typography,
-} from '@material-ui/core';
-import ComplexButton from '../../../components/ComplexButton/complexButton';
+import React from "react";
+import { Grid, Box, Container, Typography } from "@material-ui/core";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import ComplexButton from "../../../components/ComplexButton/complexButton";
-const Categories = () => (
- -
-
-
-
- - -
-
-
-
- User Rank
-
-
-
-
- Categories
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+const Categories = (props) => {
+ const { profile, token } = props;
+ let isAdmin = null;
+ if (profile) {
+ isAdmin = profile.isAdmin;
+ }
+ return (
+
-);
+Categories.propTypes = {
+ profile: PropTypes.string.isRequired,
+ token: PropTypes.string.isRequired,
+};
+const mapStateToProps = (state) => ({
+ token: state.token,
+ profile: state.profile,
+});
-export default Categories;
+export default connect(mapStateToProps)(Categories);
diff --git a/src/containers/practice/Categories/categories.module.css b/src/containers/practice/Categories/categories.module.css
new file mode 100644
index 0000000..64eebc3
--- /dev/null
+++ b/src/containers/practice/Categories/categories.module.css
@@ -0,0 +1,36 @@
+.mainCont {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ /* background-color: red; */
+ justify-content: flex-start;
+ position: absolute;
+ top: 145px;
+ height: calc(100% - 145px);
+ width: calc(100% - 200px);
+ left: 200px;
+}
+.innerCont {
+ width: 80%;
+ margin: auto;
+}
+.pageTitle {
+ font-size: 50px;
+ font-weight: 700;
+}
+.miniLine {
+ width: 40px;
+ height: 8px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin-top: 20px;
+ border-radius: 3px;
+}
+.pageDetCont {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ margin-top: 40px;
+}
diff --git a/src/containers/practice/Categories/category/category.jsx b/src/containers/practice/Categories/category/category.jsx
index 6dcf836..a4a9e34 100644
--- a/src/containers/practice/Categories/category/category.jsx
+++ b/src/containers/practice/Categories/category/category.jsx
@@ -1,38 +1,85 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
import {
- Typography, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Grid, Container, Box,
-} from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import Axios from 'axios';
-import Spinner from '../../../../components/UI/Spinner/Spinner';
-import * as probelmActions from '../../../../store/actions/index';
-
-
-class problems extends Component {
+ Typography,
+ ExpansionPanel,
+ ExpansionPanelSummary,
+ ExpansionPanelDetails,
+ Grid,
+ Container,
+ TextField,
+ Button,
+ Box,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import Axios from "axios";
+import Spinner from "../../../../components/UI/Spinner/Spinner";
+import * as probelmActions from "../../../../store/actions/index";
+
+class categories extends Component {
componentDidMount() {
const { oncategoryFetchProblems, history } = this.props;
- oncategoryFetchProblems(history.location.pathname.substring(21));
+ const categoryNames = {
+ 1: "Binary Exploitation",
+ 2: "Reverse Engineering",
+ 3: "Web Exploitation",
+ 4: "Cryptography",
+ 5: "Forensics",
+ hidden: "Hidden Problems",
+ };
+ oncategoryFetchProblems(
+ categoryNames[history.location.pathname.substring(21)]
+ );
}
+ status = (_id) => {
+ const { profile } = this.props;
+ if (profile) {
+ if (profile.problems.includes(_id)) {
+ return true;
+ }
+ }
+ return false;
+ };
+
answerInput = (event) => {
event.preventDefault();
const answer = event.target.value;
this.setState({ answer });
- }
+ };
- submitAnswerHandler = () => {
+ submitAnswerHandler = async (prb) => {
+ const { profile, token } = this.props;
const { answer } = this.state;
- Axios.post('Post Link', answer);
- }
+ if (token && prb.answer === answer) {
+ console.log("Sedning req");
+ profile.problems.push(prb._id);
+ prb.userSolved += 1;
+ const url = `http://localhost:3000/api/problem/updated_problem/${prb._id}`;
+ const response = await Axios({
+ method: "PUT",
+ url,
+ data: {
+ problems: profile.problems,
+ userSolved: prb.userSolved,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ alert("Correct Answer");
+ } else if (!token) {
+ alert("Login to answer");
+ } else if (prb.answer !== answer) {
+ alert("Wrong Answer");
+ }
+ };
render() {
const { problemsList } = this.props;
let prob = null;
if (problemsList) {
- prob = Object.values(problemsList).map(el => (
-
+
+ Categories
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isAdmin && token ? (
+
+
+ ) : null}
+
+
+
+
+ );
+};
-
+ prob = Object.values(problemsList).map((el) => (
+
-
- {el.name}
- {' '}
-
+ {el.name}
-
- {el.userSolved}
- {' '}
-
+ {el.userSolved}
-
- {el.score}
- {' '}
-
+ {el.score}
- {el.status ? 'Solved' : 'Unsolved'}
- {' '}
+ {" "}
+ {this.status(el._id) ? "Solved" : "Unsolved"}{" "}
-
-
{el.details}
@@ -89,62 +141,55 @@ class problems extends Component {
- Problems
+ Problems
Users Solved
- Score
+ Score
- Status
+ Status
-
-
-
);
}
-
return (
- Category Problems
+ Category Problems
-
- {display}
-
+ {display}
{prob}
-
-
-
);
}
}
-problems.propTypes = {
+categories.propTypes = {
oncategoryFetchProblems: PropTypes.node.isRequired,
problemsList: PropTypes.node.isRequired,
history: PropTypes.node.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
problemsList: state.categoryProblems,
+ token: state.token,
+ profile: state.profile,
});
-const mapDispatchToProps = dispatch => ({
- oncategoryFetchProblems: category => dispatch(probelmActions.categoryFetchProblems(category)),
+const mapDispatchToProps = (dispatch) => ({
+ oncategoryFetchProblems: (category) =>
+ dispatch(probelmActions.categoryFetchProblems(category)),
});
-
-export default connect(mapStateToProps, mapDispatchToProps)(problems);
+export default connect(mapStateToProps, mapDispatchToProps)(categories);
diff --git a/src/containers/practice/Leaderboard/Leaderboard.jsx b/src/containers/practice/Leaderboard/Leaderboard.jsx
index cca57a6..9dc0832 100644
--- a/src/containers/practice/Leaderboard/Leaderboard.jsx
+++ b/src/containers/practice/Leaderboard/Leaderboard.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Typography, Container } from '@material-ui/core';
-import UserTable from '../../../components/Table/UserTable/UserTable';
+import React from "react";
+import { Typography, Container } from "@material-ui/core";
+import UserTable from "../../../components/Table/UserTable/UserTable";
class leaderboard extends React.PureComponent {
render() {
@@ -10,14 +10,15 @@ class leaderboard extends React.PureComponent {
- Leaderboard
+ Leaderboard
-
-
-
+
-
+
);
}
diff --git a/src/containers/practice/Problems/Problems.jsx b/src/containers/practice/Problems/Problems.jsx
index b45cd4a..62b1218 100644
--- a/src/containers/practice/Problems/Problems.jsx
+++ b/src/containers/practice/Problems/Problems.jsx
@@ -1,73 +1,106 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
import {
- Typography, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Grid, Container, Box,
- Button, TextField,
-} from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import Axios from 'axios';
-import Spinner from '../../../components/UI/Spinner/Spinner';
-import * as probelmActions from '../../../store/actions/index';
-
+ Typography,
+ ExpansionPanel,
+ ExpansionPanelSummary,
+ ExpansionPanelDetails,
+ Grid,
+ Button,
+ TextField,
+ Fab,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import Axios from "axios";
+import NavigationIcon from "@material-ui/icons/Navigation";
+import Spinner from "../../../components/UI/Spinner/Spinner";
+import * as probelmActions from "../../../store/actions/index";
+import classes from "./Problems.module.css";
class problems extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ answer: "",
+ id: "",
+ };
+ }
+
componentDidMount() {
const { onInitProblems } = this.props;
- onInitProblems();
+ onInitProblems("1");
}
+ status = (_id) => {
+ const { profile } = this.props;
+ if (profile) {
+ if (profile.problems.includes(_id)) {
+ return true;
+ }
+ }
+ return false;
+ };
+
answerInput = (event) => {
event.preventDefault();
const answer = event.target.value;
this.setState({ answer });
- }
+ };
- submitAnswerHandler = () => {
+ submitAnswerHandler = async (prb) => {
+ const { profile, token } = this.props;
const { answer } = this.state;
- Axios.post('Post Link', answer);
- }
+ if (token && prb.answer === answer) {
+ console.log("Sedning req");
+ profile.problems.push(prb._id);
+ prb.userSolved += 1;
+ const url = `http://localhost:3000/api/problem/updated_problem/${prb._id}`;
+ const response = await Axios({
+ method: "PUT",
+ url,
+ data: {
+ problems: profile.problems,
+ userSolved: prb.userSolved,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ alert("Correct Answer");
+ } else if (!token) {
+ alert("Login to answer");
+ } else if (prb.answer !== answer) {
+ alert("Wrong Answer");
+ }
+ };
render() {
const { problemsList } = this.props;
let prob = null;
if (problemsList) {
- prob = Object.values(problemsList).map(el => (
-
+ prob = problemsList.map((el) => (
+
-
- {el.name}
- {' '}
-
+ {el.name}
-
- {el.userSolved}
- {' '}
-
+ {el.userSolved}
-
- {el.score}
- {' '}
-
+ {el.score}
- {el.status ? 'Solved' : 'Unsolved'}
- {' '}
+ {this.status(el._id) ? "Solved" : "Unsolved"}{" "}
-
-
@@ -75,7 +108,7 @@ class problems extends Component {
{el.details}
@@ -101,47 +137,50 @@ class problems extends Component {
if (problemsList) {
display = (
-
- Problems
+
- Users Solved
+
- Score
+
- Status
+
-
-
-
);
}
+ const { profile, token } = this.props;
+ let isAdmin = null;
+ if (profile) {
+ isAdmin = profile.isAdmin;
+ }
return (
- Problems
Users Solved
Score
Status
-
-
- Problems
-
-
+
);
+ return
+
);
}
@@ -152,12 +191,14 @@ problems.propTypes = {
problemsList: PropTypes.node.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
problemsList: state.problems,
+ token: state.token,
+ profile: state.profile,
});
-const mapDispatchToProps = dispatch => ({
- onInitProblems: () => dispatch(probelmActions.initProbelms()),
+const mapDispatchToProps = (dispatch) => ({
+ onInitProblems: (problemType) =>
+ dispatch(probelmActions.initProbelms(problemType)),
});
-
export default connect(mapStateToProps, mapDispatchToProps)(problems);
diff --git a/src/containers/practice/Problems/Problems.module.css b/src/containers/practice/Problems/Problems.module.css
index e69de29..8dfbc2e 100644
--- a/src/containers/practice/Problems/Problems.module.css
+++ b/src/containers/practice/Problems/Problems.module.css
@@ -0,0 +1,46 @@
+.mainCont {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ /* background-color: red; */
+ justify-content: flex-start;
+ position: absolute;
+ top: 145px;
+ height: calc(100% - 145px);
+ width: calc(100% - 200px);
+ left: 200px;
+}
+.innerCont {
+ width: 80%;
+ margin: auto;
+}
+.pageDetCont {
+ margin-left: 80px;
+ margin-top: 80px;
+ margin-right: 80px;
+}
+.pageTitle {
+ font-size: 50px;
+ font-weight: 700;
+}
+.miniLine {
+ width: 40px;
+ height: 8px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin-top: 25px;
+ border-radius: 3px;
+}
+.tableCont {
+ margin-top: 20px;
+}
+.tableFieldTitle {
+ font-size: 18px;
+ font-weight: 600;
+}
+.tableProbs {
+ margin-top: 20px;
+}
+.btnCont {
+ margin-top: 50px;
+}
diff --git a/src/containers/practice/Rules/rules.jsx b/src/containers/practice/Rules/rules.jsx
index 7caf3e4..7530620 100644
--- a/src/containers/practice/Rules/rules.jsx
+++ b/src/containers/practice/Rules/rules.jsx
@@ -1,9 +1,5 @@
-import React from 'react';
-
-const rules = () => (
-
-
+
Problems
+
+
{display}
-
-
- {prob}
-
-
- Add a new Problem
-
-
-
+
+ {isAdmin && token ? (
+ {prob}
+
+
+
+
+
+
+ ) : null}
+ rules
-); +import React from "react"; +const rules = () =>rules
; export default rules; diff --git a/src/containers/practice/practice.jsx b/src/containers/practice/practice.jsx index fa04f9c..9b85ebe 100644 --- a/src/containers/practice/practice.jsx +++ b/src/containers/practice/practice.jsx @@ -1,54 +1,33 @@ -import React, { PureComponent } from 'react'; -import { CssBaseline } from '@material-ui/core'; -import { NavLink } from 'react-router-dom'; -import classes from './practice.module.css'; +import React, { PureComponent } from "react"; +import { CssBaseline } from "@material-ui/core"; +import { NavLink } from "react-router-dom"; +import classes from "./practice.module.css"; class practice extends PureComponent { render() { - return ( + const display = ({display}
;
}
}
-
export default practice;
diff --git a/src/containers/practice/practice.module.css b/src/containers/practice/practice.module.css
index 128bca4..dfe7c89 100644
--- a/src/containers/practice/practice.module.css
+++ b/src/containers/practice/practice.module.css
@@ -1,44 +1,42 @@
.body {
- margin : 0px;
- padding : 0px;
+ margin: 0px;
+ padding: 0px;
}
.center {
- display: flex;
- justify-content: center;
-
+ display: flex;
+ justify-content: center;
}
nav {
- position : fixed;
- top : 100px;
- left : 0px;
- width : 200px;
- height : 100%;
- background : #151719;
- display : flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
+ position: fixed;
+ top: 100px;
+ left: 0px;
+ width: 200px;
+ height: 100%;
+ background: #151719;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
.catList {
- color: rgba(230, 230, 230,0.9);
- list-style: none;
- padding: 65px 10px;
- border-bottom: 1px solid rgba(100,100,100,0.3);
- font-size: 20px;
- cursor: pointer;
+ color: rgba(230, 230, 230, 0.9);
+ list-style: none;
+ padding: 65px 10px;
+ border-bottom: 1px solid rgba(100, 100, 100, 0.3);
+ font-size: 20px;
+ cursor: pointer;
}
.catList:hover {
- color: blue;
+ color: blue;
}
main {
- margin-left: 220px;
+ margin-left: 220px;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
diff --git a/src/containers/profile/profile.jsx b/src/containers/profile/profile.jsx
index ea4e026..d341089 100644
--- a/src/containers/profile/profile.jsx
+++ b/src/containers/profile/profile.jsx
@@ -1,115 +1,73 @@
-import React from 'react';
-import {
- Container, Typography, Box, Paper, Grid,
-} from '@material-ui/core';
-import { Link } from 'react-router-dom';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import Spinner from '../../components/UI/Spinner/Spinner';
-import classes from './profile.module.css';
-import * as ProfileActions from '../../store/actions/index';
+import React from "react";
+import { Container, Box } from "@material-ui/core";
+
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import Spinner from "../../components/UI/Spinner/Spinner";
+import classes from "./profile.module.css";
+import * as ProfileActions from "../../store/actions/index";
class Profile extends React.PureComponent {
componentDidMount() {
- const { onInitProfile } = this.props;
- onInitProfile();
+ const { onInitProfile, userId, token } = this.props;
+ onInitProfile(userId, token);
}
-
render() {
- const {
- profile,
- } = this.props;
+ const { profile } = this.props;
let compList =
-
-
-
-
- {el.name}
-
+ compList = profile.participant.map((el) => {
+ if (el.score === 0) {
+ return null;
+ }
+ const { _id } = el;
+ return (
+
+ );
+ });
}
let display = null;
if (profile) {
display = (
-
+
+
-
-
-
-
-
-
-
-
-
- ));
+
+
- {el.eventName}
-
- Rank:
- {' '}
- {el.rank}
-
-
-
-
- Score:
- {' '}
- {el.score}
-
-
-
-
- {profile.name}
-
-
-
-
-
- UserName:
- {' '}
- {profile.username}
-
+
@@ -118,20 +76,24 @@ class Profile extends React.PureComponent { {display}
-
);
}
}
Profile.propTypes = {
onInitProfile: PropTypes.node.isRequired,
profile: PropTypes.node.isRequired,
+ token: PropTypes.node.isRequired,
+ userId: PropTypes.node.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
profile: state.profile,
+ userId: state.userId,
+ token: state.token,
});
-const mapDispatchToProps = dispatch => ({
- onInitProfile: () => dispatch(ProfileActions.initProfile()),
+const mapDispatchToProps = (dispatch) => ({
+ onInitProfile: (userId, token) =>
+ dispatch(ProfileActions.initProfile(userId, token)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Profile);
diff --git a/src/containers/profile/profile.module.css b/src/containers/profile/profile.module.css
index abf668c..b0474d7 100644
--- a/src/containers/profile/profile.module.css
+++ b/src/containers/profile/profile.module.css
@@ -1,18 +1,81 @@
+.mainCont {
+ text-align: center;
+ position: absolute;
+ top: 150px;
+ height: calc(100% - 150px);
+ width: 100%;
+ left: 0px;
+ /* background-color: green; */
+}
+.pageTitle {
+ font-weight: 700;
+ font-size: 50px;
+ margin-top: 50px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+.miniLine {
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ /* background-color: rgba(0,0,0,0.8); */
+ margin: auto;
+ margin-top: 25px;
+ margin-bottom: 0px;
+ border-radius: 3px;
+ height: 8px;
+}
+.subDetail {
+ width: 400px;
+ /* background-color: red; */
+ margin: auto;
+ margin-top: 15px;
+ text-align: left;
+ font-size: 20px;
+}
+.subDetailTitle {
+ font-weight: 600;
+ font-size: 22px;
+}
+.subDetailDesc {
+ font-weight: 200;
+ margin-left: 10px;
+}
+.miniLineLeft {
+ width: 40px;
+ background-color: rgba(63, 81, 181, 0.9);
+ margin-top: 25px;
+ margin-bottom: 0px;
+ border-radius: 3px;
+ height: 8px;
+}
+.subTitle {
+ font-weight: 600;
+ font-size: 26px;
+ text-transform: uppercase;
+ margin-top: 30px;
+}
+.compListCont {
+ width: 80%;
+ margin: auto;
+ padding-bottom: 100px;
+}
.list {
- padding: 50px;
-}
-
-.padding {
- padding: 20px;
-}
-
-.title {
- padding: 20px;
-
-}
-
-.title:hover {
- cursor: pointer;
- color:blue;
- text-decoration: underline;
-}
\ No newline at end of file
+ padding: 10px;
+ text-align: center;
+ width: 60%;
+ margin: auto;
+ margin-top: 20px;
+ font-size: 20px;
+ font-weight: 600;
+ text-transform: uppercase;
+ border-radius: 10px;
+ border: 2px solid rgba(245, 0, 87, 1);
+ color: rgba(245, 0, 87, 1);
+ transition: 0.2s ease-out;
+}
+.list:hover .innerListTitle {
+ color: white;
+}
+.list:hover {
+ background-color: rgba(245, 0, 87, 1);
+}
diff --git a/src/containers/walkthrough/walkthrough.html b/src/containers/walkthrough/walkthrough.html
new file mode 100644
index 0000000..acf6fc8
--- /dev/null
+++ b/src/containers/walkthrough/walkthrough.html
@@ -0,0 +1,211 @@
+
@@ -22,7 +19,7 @@ const app = (
);
-ReactDOM.render(app, document.getElementById('root'));
+ReactDOM.render(app, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index cabff3d..b719ab4 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -11,17 +11,17 @@
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
- window.location.hostname === 'localhost'
+ window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
- || window.location.hostname === '[::1]'
+ window.location.hostname === "[::1]" ||
// 127.0.0.1/8 is considered localhost for IPv4.
- || window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
- ),
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
);
export function register(config) {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
@@ -31,7 +31,7 @@ export function register(config) {
return;
}
- window.addEventListener('load', () => {
+ window.addEventListener("load", () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
@@ -42,8 +42,8 @@ export function register(config) {
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
- 'This web app is being served cache-first by a service '
- + 'worker. To learn more, visit https://bit.ly/CRA-PWA',
+ "This web app is being served cache-first by a service " +
+ "worker. To learn more, visit https://bit.ly/CRA-PWA"
);
});
} else {
@@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) {
return;
}
installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
+ if (installingWorker.state === "installed") {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
- 'New content is available and will be used when all '
- + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
+ "New content is available and will be used when all " +
+ "tabs for this page are closed. See https://bit.ly/CRA-PWA."
);
// Execute callback
@@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
- console.log('Content is cached for offline use.');
+ console.log("Content is cached for offline use.");
// Execute callback
if (config && config.onSuccess) {
@@ -94,7 +94,7 @@ function registerValidSW(swUrl, config) {
};
})
.catch((error) => {
- console.error('Error during service worker registration:', error);
+ console.error("Error during service worker registration:", error);
});
}
@@ -103,10 +103,10 @@ function checkValidServiceWorker(swUrl, config) {
fetch(swUrl)
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type');
+ const contentType = response.headers.get("content-type");
if (
- response.status === 404
- || (contentType != null && contentType.indexOf('javascript') === -1)
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf("javascript") === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
@@ -121,13 +121,13 @@ function checkValidServiceWorker(swUrl, config) {
})
.catch(() => {
console.log(
- 'No internet connection found. App is running in offline mode.',
+ "No internet connection found. App is running in offline mode."
);
});
}
export function unregister() {
- if ('serviceWorker' in navigator) {
+ if ("serviceWorker" in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister();
});
diff --git a/src/store/actions/actionsTypes.jsx b/src/store/actions/actionsTypes.jsx
index 90aff8c..203c4bd 100644
--- a/src/store/actions/actionsTypes.jsx
+++ b/src/store/actions/actionsTypes.jsx
@@ -1,5 +1,16 @@
-export const SET_PROBLEMS = 'SET_PROBLEMS';
-export const SET_COMPETITIONS = 'SET_COMPETITIONS';
-export const SET_COMPETITION = 'SET_COMPETITION';
-export const CAT_SET_PROBLEMS = 'CAT_SET_PROBLEMS';
-export const SET_PROFILE = 'SET_PROFILE';
+export const SET_PROBLEMS = "SET_PROBLEMS";
+export const SET_COMPETITIONS = "SET_COMPETITIONS";
+export const SET_COMPETITION = "SET_COMPETITION";
+export const CAT_SET_PROBLEMS = "CAT_SET_PROBLEMS";
+export const SET_PROFILE = "SET_PROFILE";
+export const AUTH_START = "AUTH_START";
+export const AUTH_SUCCESS = "AUTH_SUCCESS";
+export const AUTH_FAIL = "AUTH_FAIL";
+export const AUTH_LOGOUT = "AUTH_LOGOUT";
+export const SET_PARTICIPANT = "SET_PARTICIPANT";
+export const ADD_PROBLEM = "ADD_PROBLEM";
+export const ADD_EVENT = "ADD_EVENT";
+export const SET_COMPETITIONS_LEVEL_PROBLEMS =
+ "SET_COMPETITIONS_LEVEL_PROBLEMS";
+export const SET_LEADERBOARD = "SET_LEADERBOARD";
+export const SET_LEADERBOARD_STATUS = "SET_LEADERBOARD_STATUS";
diff --git a/src/store/actions/auth.jsx b/src/store/actions/auth.jsx
new file mode 100644
index 0000000..a20fea3
--- /dev/null
+++ b/src/store/actions/auth.jsx
@@ -0,0 +1,98 @@
+import axios from "axios";
+import * as actionTypes from "./actionsTypes";
+
+export const authStart = () => ({
+ type: actionTypes.AUTH_START,
+});
+
+export const authSuccess = (token, userId) => ({
+ type: actionTypes.AUTH_SUCCESS,
+ idToken: token,
+ userId,
+});
+
+export const authFail = (error) => ({
+ type: actionTypes.AUTH_FAIL,
+ error,
+});
+
+export const logout = () => {
+ localStorage.removeItem("token");
+ localStorage.removeItem("userId");
+ localStorage.removeItem("expirationDate");
+ return {
+ type: actionTypes.AUTH_LOGOUT,
+ };
+};
+
+export const checkAuthTimeOut = (expirationTime) => (dispatch) => {
+ setTimeout(() => {
+ dispatch(logout());
+ }, expirationTime * 10000);
+};
+
+export const fetchProfile = (profile) => ({
+ type: actionTypes.SET_PROFILE,
+ profile,
+});
+
+export const initProfile = (userId, token) => async (dispatch) => {
+ const url = `http://localhost:3000/api/user/${userId}`;
+ const response = await axios({
+ method: "GET",
+ url,
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ dispatch(fetchProfile(response.data.data));
+};
+
+export const auth = (authData, isLogin) => (dispatch) => {
+ dispatch(authStart());
+ let url = "http://localhost:3000/api/user/signup";
+ if (isLogin) {
+ url = "http://localhost:3000/api/user/login";
+ }
+ axios
+ .post(url, authData)
+ .then((response) => {
+ if (response.data.status === 200) {
+ localStorage.setItem("token", response.data.token);
+ localStorage.setItem("userId", response.data.userId);
+ const expirationDate = new Date(
+ new Date().getTime() + response.data.expiresIn * 1000
+ );
+ localStorage.setItem("expirationDate", expirationDate);
+ dispatch(authSuccess(response.data.token, response.data.userId));
+ dispatch(initProfile(response.data.userId, response.data.token));
+ dispatch(checkAuthTimeOut(response.data.expiresIn));
+ alert(response.data.message);
+ return;
+ }
+ dispatch(authFail(response.data.message));
+ alert(response.data.message);
+ })
+ .catch((err) => {
+ dispatch(authFail(err));
+ });
+};
+
+export const authCheckState = () => (dispatch) => {
+ const token = localStorage.getItem("token");
+ if (!token) {
+ dispatch(logout());
+ } else {
+ const expirationDate = new Date(localStorage.getItem("expirationDate"));
+ if (expirationDate > new Date()) {
+ const userId = localStorage.getItem("userId");
+ dispatch(authSuccess(token, userId));
+ dispatch(initProfile(userId, token));
+ dispatch(
+ checkAuthTimeOut(
+ (expirationDate.getTime() - new Date().getTime()) / 1000
+ )
+ );
+ } else {
+ dispatch(logout());
+ }
+ }
+};
diff --git a/src/store/actions/competitions.jsx b/src/store/actions/competitions.jsx
index 8440824..1a809bc 100644
--- a/src/store/actions/competitions.jsx
+++ b/src/store/actions/competitions.jsx
@@ -1,27 +1,176 @@
-import Axios from 'axios';
-import * as actionType from './actionsTypes';
+import Axios from "axios";
+import * as actionType from "./actionsTypes";
-export const fetchCompetitions = competitions => ({
+export const fetchCompetitions = (competitions) => ({
type: actionType.SET_COMPETITIONS,
competitions,
});
+export const fetchProfile = (profile) => ({
+ type: actionType.SET_PROFILE,
+ profile,
+});
+
export const initCompetitions = () => (dispatch) => {
- Axios.get('https://ctf-apis.firebaseio.com/competitionList.json')
- .then((response) => {
- dispatch(fetchCompetitions(response.data));
- });
+ Axios.get("http://localhost:3000/api/event/").then((response) => {
+ dispatch(fetchCompetitions(response.data.data.reverse()));
+ });
};
-export const fetchCompetition = competition => ({
+export const fetchCompetition = (competition) => ({
type: actionType.SET_COMPETITION,
competition,
});
-export const initCompetition = id => (dispatch) => {
- const link = `https://ctf-apis.firebaseio.com/competitions/${id}.json`;
- Axios.get(link)
- .then((response) => {
- dispatch(fetchCompetition(response.data));
- });
+export const initCompetition = (eventId, token, level) => async (dispatch) => {
+ const url = `http://localhost:3000/api/event/${eventId}`;
+ const response = await Axios({
+ method: "GET",
+ url,
+ params: {
+ level,
+ eventId,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ await dispatch(fetchCompetition(response.data));
+};
+
+export const fetchCompetitionLevelProblems = (challenges) => ({
+ type: actionType.SET_COMPETITIONS_LEVEL_PROBLEMS,
+ challenges,
+});
+
+export const fetchLeaderboard = (leaderboard) => ({
+ type: actionType.SET_LEADERBOARD,
+ leaderboard,
+});
+
+export const initLeaderboard = (eventId) => async (dispatch) => {
+ const url = `http://localhost:3000/api/event/leaderboard/${eventId}`;
+ const response = await Axios.get(url);
+ console.log(response.data);
+ await dispatch(fetchLeaderboard(response.data));
+};
+
+export const fetchLeaderboardStatus = (leaderboardStatus) => ({
+ type: actionType.SET_LEADERBOARD_STATUS,
+ leaderboardStatus,
+});
+
+export const initLeaderboardStatus = (
+ eventId,
+ leaderboardStatus,
+ token
+) => async (dispatch) => {
+ const url = `http://localhost:3000/api/event/leaderboard/${eventId}`;
+ console.log(leaderboardStatus);
+ const response = await Axios({
+ method: "PUT",
+ url,
+ data: {
+ leaderboardStatus,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ await dispatch(fetchLeaderboardStatus(response.data.showLeaderboard));
+};
+
+export const initCompetitionLevelProblems = (
+ eventId,
+ token,
+ level,
+ participantId
+) => async (dispatch) => {
+ const url = `http://localhost:3000/api/event/${eventId}/level-probelms`;
+ const response = await Axios({
+ method: "GET",
+ url,
+ params: {
+ eventId,
+ level,
+ participantId,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ await dispatch(fetchCompetitionLevelProblems(response.data.data));
+};
+
+// Adding an Event or Competition
+
+export const addEvent = (competition) => ({
+ type: actionType.ADD_EVENT,
+ competition,
+});
+
+export const onitEvent = (event, token) => async (dispatch) => {
+ const url = "http://localhost:3000/api/event/";
+ const levelScore = JSON.stringify(Array.from(event.levelScore.entries()));
+ const response = await Axios({
+ method: "POST",
+ url,
+ data: {
+ ...event,
+ levelScore,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ dispatch(addEvent(response.data.data));
+};
+
+export const regEvent = (token, userId, profile, event) => async (dispatch) => {
+ let username = null;
+ if (profile) {
+ username = profile.username;
+ }
+ let url = "http://localhost:3000/api/participant/";
+ const participant = await Axios({
+ method: "POST",
+ url,
+ data: {
+ eventId: event._id,
+ eventName: event.name,
+ userId,
+ handle: username,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ if (!participant.data.data) {
+ console.log("Already Registered!!");
+ return;
+ }
+ const participantId = participant.data.data._id;
+ url = `http://localhost:3000/api/event/${event._id}`;
+ event.participants.push(participantId);
+ event.leaderboard.push(participantId);
+ const eventResponse = await Axios({
+ method: "PUT",
+ url,
+ data: {
+ participants: event.participants,
+ leaderboard: event.leaderboard,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ url = `http://localhost:3000/api/user/${userId}`;
+ const userParticipant = [...profile.participant];
+ const userEvent = [...profile.events];
+ userEvent.push(event._id);
+ userParticipant.push(participantId);
+ const userResponse = await Axios({
+ method: "PUT",
+ url,
+ data: {
+ participant: userParticipant,
+ events: userEvent,
+ },
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ const updatedProfile = {
+ ...profile,
+ participant: userParticipant,
+ events: userEvent,
+ };
+ dispatch(fetchProfile(updatedProfile));
+ // alert('Registered Successfully!!!')
};
diff --git a/src/store/actions/index.jsx b/src/store/actions/index.jsx
index 20b1702..921f92a 100644
--- a/src/store/actions/index.jsx
+++ b/src/store/actions/index.jsx
@@ -2,16 +2,21 @@ export {
initProbelms,
fetchProblems,
categoryFetchProblems,
-} from './problems';
+ onitProblem,
+} from "./problems";
export {
initCompetitions,
fetchCompetitions,
initCompetition,
fetchCompetition,
-} from './competitions';
+ onitEvent,
+ initCompetitionLevelProblems,
+ regEvent,
+ initLeaderboard,
+ initLeaderboardStatus,
+} from "./competitions";
-export {
- initProfile,
- fetchProfile,
-} from './profile';
+export { initProfile, fetchProfile } from "./profile";
+
+export { auth, logout, authCheckState } from "./auth";
diff --git a/src/store/actions/problems.jsx b/src/store/actions/problems.jsx
index 4ffbc70..35222e9 100644
--- a/src/store/actions/problems.jsx
+++ b/src/store/actions/problems.jsx
@@ -1,19 +1,35 @@
-import Axios from 'axios';
-import * as actionType from './actionsTypes';
+import Axios from "axios";
+import * as actionType from "./actionsTypes";
-export const fetchProblems = problems => ({
+export const fetchProblems = (problems) => ({
type: actionType.SET_PROBLEMS,
problems,
});
-export const initProbelms = () => (dispatch) => {
- Axios.get('https://ctf-apis.firebaseio.com/problems.json')
- .then((response) => {
- dispatch(fetchProblems(response.data));
- });
+export const initProbelms = (problemType) => (dispatch) => {
+ const url = `http://localhost:3000/api/problem/all_paroblems/${problemType}`;
+ Axios.get(url).then((response) => {
+ dispatch(fetchProblems(response.data.data));
+ });
};
-export const categoryFetchProblems = category => ({
+export const categoryFetchProblems = (category) => ({
type: actionType.CAT_SET_PROBLEMS,
category,
});
+
+export const addProblem = (problem) => ({
+ type: actionType.ADD_PROBLEM,
+ problem,
+});
+
+export const onitProblem = (problem, token) => async (dispatch) => {
+ const url = "http://localhost:3000/api/problem/";
+ const response = await Axios({
+ method: "POST",
+ url,
+ data: problem,
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ dispatch(addProblem(response.data.data));
+};
diff --git a/src/store/actions/profile.jsx b/src/store/actions/profile.jsx
index 2d8232b..dddbc08 100644
--- a/src/store/actions/profile.jsx
+++ b/src/store/actions/profile.jsx
@@ -1,14 +1,17 @@
-import Axios from 'axios';
-import * as actionType from './actionsTypes';
+import Axios from "axios";
+import * as actionType from "./actionsTypes";
-export const fetchProfile = profile => ({
+export const fetchProfile = (profile) => ({
type: actionType.SET_PROFILE,
profile,
});
-export const initProfile = () => (dispatch) => {
- Axios.get('https://ctf-apis.firebaseio.com/profile.json')
- .then((response) => {
- dispatch(fetchProfile(response.data));
- });
+export const initProfile = (userId, token) => async (dispatch) => {
+ const url = `http://localhost:3000/api/user/${userId}`;
+ const response = await Axios({
+ method: "GET",
+ url,
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ dispatch(fetchProfile(response.data.data));
};
diff --git a/src/store/reducer/reducer.jsx b/src/store/reducer/reducer.jsx
index 896d843..1ee8d32 100644
--- a/src/store/reducer/reducer.jsx
+++ b/src/store/reducer/reducer.jsx
@@ -1,21 +1,58 @@
-import * as actionTypes from '../actions/actionsTypes';
+import * as actionTypes from "../actions/actionsTypes";
+import { updateObject } from "../utility";
const initialState = {
- problems: null,
- competitions: null,
+ problems: [],
+ competitions: [],
competition: null,
categoryProblems: null,
profile: null,
+ token: null,
+ userId: null,
+ error: null,
+ loading: false,
+ leaderboard: [],
+ leaderboardStatus: true,
};
+const authStart = (state, action) =>
+ updateObject(state, { error: null, loading: true });
+
+const authSuccess = (state, action) =>
+ updateObject(state, {
+ token: action.idToken,
+ userId: action.userId,
+ error: null,
+ loading: false,
+ });
+
+const authLogOut = (state, action) =>
+ updateObject(state, {
+ token: null,
+ userId: null,
+ profile: null,
+ });
+
+const authFail = (state, action) =>
+ updateObject(state, {
+ error: action.error,
+ loading: false,
+ });
const reducer = (state = initialState, action) => {
+ const updatedProblems = [...state.problems];
switch (action.type) {
case actionTypes.SET_PROBLEMS:
return {
...state,
problems: action.problems,
};
+ case actionTypes.ADD_PROBLEM:
+ updatedProblems.push(action.problem);
+ return {
+ ...state,
+ problems: updatedProblems,
+ };
case actionTypes.SET_COMPETITIONS:
return {
...state,
@@ -26,10 +63,33 @@ const reducer = (state = initialState, action) => {
...state,
competition: action.competition,
};
+ case actionTypes.SET_LEADERBOARD:
+ return {
+ ...state,
+ leaderboard: action.leaderboard,
+ };
+ case actionTypes.SET_LEADERBOARD_STATUS:
+ return {
+ ...state,
+ leaderboardStatus: action.leaderboardStatus,
+ };
+ case actionTypes.SET_COMPETITIONS_LEVEL_PROBLEMS:
+ return {
+ ...state,
+ competition: {
+ ...state.competition,
+ challenges: action.challenges,
+ },
+ };
+ case actionTypes.ADD_EVENT:
+ return {
+ ...state,
+ competitions: [...state.competitions, action.competition],
+ };
case actionTypes.CAT_SET_PROBLEMS: {
const problemArray = { ...state.problems };
const newarray = Object.values(problemArray).filter(
- problemItem => problemItem.category === action.category,
+ (problemItem) => problemItem.category === action.category
);
return {
...state,
@@ -41,7 +101,14 @@ const reducer = (state = initialState, action) => {
...state,
profile: action.profile,
};
-
+ case actionTypes.AUTH_START:
+ return authStart(state, action);
+ case actionTypes.AUTH_SUCCESS:
+ return authSuccess(state, action);
+ case actionTypes.AUTH_FAIL:
+ return authFail(state, action);
+ case actionTypes.AUTH_LOGOUT:
+ return authLogOut(state, action);
default:
return state;
}
diff --git a/src/store/utility.jsx b/src/store/utility.jsx
new file mode 100644
index 0000000..8b9c4e9
--- /dev/null
+++ b/src/store/utility.jsx
@@ -0,0 +1,4 @@
+export const updateObject = (oldObject, updatedProperties) => ({
+ ...oldObject,
+ ...updatedProperties,
+});
- 
-
-
+
-
- Competitions Participated
-
+
-
- {compList}
-
-
-
- Leaderboard
-
-
-
-
- Rank:
- {profile.problems.rank}
-
-
-
-
- Score:
- {profile.problems.score}
-
-
-
+
);
}
-
return (
{profile.name}
+
+
+ User Name:{" "}
+ {profile.username}
+
+ Email:{" "} + {profile.email} +
+ Phone No:{" "} + {profile.number} + +
+ Email:{" "} + {profile.email} +
+ Phone No:{" "} + {profile.number} + +
Competitions Participated
+
{compList}
@@ -118,20 +76,24 @@ class Profile extends React.PureComponent { {display}
+
+(t8n: "pulse")[Welcome!]
+
+Before starting this walkthrough, first let's get to know each other!
+My name is Cyanorobot, what's yours?
+
+Your Name:
+<input type="text" data-varname="name" placeholder="Enter your name here!">\
+<script>processInputElements();</script>
+
+(link-goto: "Submit!", "second") (t8n: "pulse")[Uh Oh!]
+
+(t8n: "instant")[There has been some error and it seems that we are stuck here! A has locked us into his world. Luckily, he has left 5 keys which can help us get out of this.
+
+We can now only get out by finding out the 5 keys hidden in this world.
+
+Fortunately, we have clues, each one pointing us towards a key.
+Let's do this one-by-one and get out of here, quickly!]
+
+(hover-style:(text-color:cyan) + (text-style:'italic'))+ (colour: "#696969")
+[
+[[Old problems...|P2]]
+]
+
+
+Current progress : $progress %
+
+We're running out of time, $name !
+
+
+Hello $name !
+(set: $progress = 0)
+Welcome to DevClub's CTF Walkthrough, $name ! This is going to be a very simple walkthrough taking you through the basics of CTF. Let's begin!
+
+First of all, do you know what CTF is?
+<img src="https://ctftime.org/media/events/hackit_ctf_ctftime.png" width="500" height="300" alt="Hack it!" align="middle">
+CTF (Capture The Flag) is a kind of information security competition that challenges contestants to solve a variety of tasks ranging from a scavenger hunt on wikipedia to basic programming exercises, to hacking your way into a server to steal data.
+
+[[Are you ready ? |3]] Web Exploitation!
+
+Cyanorobot has hidden his key somewhere on this :
+
+(link:"Cyanorobot's website")[(gotoURL:"http://2018shell.picoctf.com:47428")]
+
+But fortunately for us, he has left some clues on this webpage and it's upto you know to figure it out.
+
+Can you find the flag from the website?
+
+<input type="text" data-varname="key" placeholder="Enter your flag here">\
+<script>processInputElements();</script>
+
+[[Submit|submit1]]
+(correct answer- answer1)
+
+Not really sure what Web explotation is?
+
+[[Click here to know more!|webhowto]]
+
+An old man offered help to us but unfortunately he does not speak English or Hindi.
+
+From what we know, he speaks Base64.
+
+Can you convert his message to get our next key?
+
+<img src="https://i.ibb.co/VSXLs1t/buddha.png">
+Can you decode the following string "dGg0dF93NHNfczFtcEwz" from base64 format to ASCII?
+
+<input type="text" data-varname="key2" placeholder="Enter your flag here">\
+<script>processInputElements();</script>
+
+[[Submit|Submit2]]
+(correct answer- answer2)
+
+Not really sure what Base64 is?
+
+[[Click here to know more|base64howto]]
+
+ To Grep or not to Grep
+
+The flag for this challenge is hidden somewhere deep inside this (link:"file")[(gotoURL:"https://2018shell.picoctf.com/static/7216e49d925b623c5d2cf9d141a6e180/file")]
+
+Our job is to find the next flag somehow.
+It would be really obnoxious to look through by hand, see if you can find a faster way.
+
+<input type="text" data-varname="key" placeholder="Enter your flag here">\
+<script>processInputElements();</script>
+[[Submit|submit3]]
+
+(correct answer- answer3)
+
+Not really sure how to go about it?
+Read up more about Grep (link:"here")[(gotoURL:"https://ryanstutorials.net/linuxtutorial/grep.php")]
+Leveling up...
+
+(link:"Netcat(nc)")[(gotoURL:"https://linuxize.com/post/netcat-nc-command-with-examples/")] is going to be the biggest tool in your arsenal useful not only in getting out of here but in all our adventures beyond.
+
+Can you connect to xyz.com at port 49387 to get the flag?
+
+
+4 questions done till now. Baaki last question kal subah karunga.
+
+ Double-click this passage to edit it.
+We are not done yet!
+(hover-style:(text-color:cyan) + (text-style:'italic'))+ (colour: "#696969")
+[
+[[Old problems|P2]] (if: $progress is "20")[- success]
+[[Initial Exploits|P1]]
+[[To grep or not to grep|P3]]
+[[Clue_04|P4]]
+[[Clue_05|P5]]
+]
+
+
+Current progress : $progress %
+
+We're running out of time, $name !
+
+
+(if: $key is "answer1")[<img src="https://www.xda-developers.com/files/2019/07/google-fit-featured-810x298_c.jpg">
+(set: $progress to $progress + 20)
+
+
+(css: "font-size: 150%;")[Congratulations! ]
+2 out of 5? Not bad!
+
+Current progress : $progress %
+
+[[Click here to continue|P3]]
+[[Click here to move to home page|Home]]]
+
+(if: $key is not "answer1")[Alas! That is not correct.
+
+
+[[Return to Problem|P1]]] Websites all around the world are programmed using various programming languages, and although most programmers try to hide the internal structure and data flow, all programming languages have their and vulnerabilities. It is essential for a developer to know about these vulnerabilities. CTFs focus on the above mentioned web security threats in the form of a category of questions under web exploitation, where you need to exploit a bug to gain a higher level privilege.
+
+<img src="https://camo.githubusercontent.com/4bbddc9d9d22d41b9a200b2ba7382d4621fae7ac/68747470733a2f2f696d616765732e706578656c732e636f6d2f70686f746f732f313933363239392f706578656c732d70686f746f2d313933363239392e6a7065673f6175746f3d636f6d70726573732663733d74696e7973726762266470723d3326683d37353026773d31323630" width="500" height="300" alt="Hack it!" align="middle">
+
+In layman's terms - you know all sites are written using front end and back end programming languages. Understand that all these languages have their vulnerabilities which when exploited can show information about the internal working of the site. You have to exploit these flaws in the enemies sites and also protect your own site. After all you can't give anyone leverage.
+
+
+(link:"A site to get you started -")[(gotoURL:"https://trailofbits.github.io/ctf/web/exploits.html")]
+(if: $key2 is "answer2")[<img src="https://www.xda-developers.com/files/2019/07/google-fit-featured-810x298_c.jpg">
+(set: $progress to $progress + 20)
+
+
+(css: "font-size: 150%;")[Congratulations! ]
+There is hope!
+
+Current progress : $progress %
+
+[[Click here to continue|P1]]
+[[Click here to move to home page|Home]]]
+
+(if: $key2 is not "answer2")[Alas! That is not correct.
+
+
+[[Return to Problem|P2]]] Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with textual data.
+
+You can read up more on Wiki!
+(if: $key is "answer3")[<img src="https://www.xda-developers.com/files/2019/07/google-fit-featured-810x298_c.jpg">
+(set: $progress to $progress + 20)
+
+
+(css: "font-size: 150%;")[Congratulations! ]
+We are halfway done! Let's do this!
+
+Current progress : $progress %
+
+[[Click here to continue|P4]]
+[[Click here to move to home page|Home]]]
+
+(if: $key is not "answer3")[Alas! That is not correct.
+
+
+[[Return to Problem|P3]]]
diff --git a/src/containers/walkthrough/walkthrough.jsx b/src/containers/walkthrough/walkthrough.jsx
new file mode 100644
index 0000000..1536e95
--- /dev/null
+++ b/src/containers/walkthrough/walkthrough.jsx
@@ -0,0 +1,6 @@
+import React from "react";
+import htmlContent from "./walkthrough.html";
+
+export default function MyComponent() {
+ return ;
+}
diff --git a/src/index.jsx b/src/index.jsx
index 70b5389..b32b0f0 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,19 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import { BrowserRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-import { composeWithDevTools } from 'redux-devtools-extension';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-import reducer from './store/reducer/reducer';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import { composeWithDevTools } from "redux-devtools-extension";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import reducer from "./store/reducer/reducer";
-
-const store = createStore(reducer, composeWithDevTools(
- applyMiddleware(thunk),
-));
+const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
const app = (