diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0291b5c..211409a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,11 +16,13 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", "react-scripts": "^5.0.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^1.1.1" }, "devDependencies": { "@tailwindcss/forms": "^0.5.3", @@ -8357,6 +8359,42 @@ "node": ">= 6" } }, + "node_modules/formik": { + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz", + "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "dependencies": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/formik/node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/formik/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -8757,6 +8795,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -11857,6 +11908,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -14109,6 +14165,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -14418,6 +14479,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -16053,6 +16119,16 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -16085,6 +16161,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -17400,6 +17481,28 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.1.1.tgz", + "integrity": "sha512-KfCGHdAErqFZWA5tZf7upSUnGKuTOnsI3hUsLr7fgVtx+DK04NPV01A68/FslI4t3s/ZWpvXJmgXhd7q6ICnag==", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } } } diff --git a/frontend/package.json b/frontend/package.json index e7af7b3..21c82e2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,11 +11,13 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", "react-scripts": "^5.0.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^1.1.1" }, "scripts": { "start": "react-scripts start", diff --git a/frontend/src/components/About.jsx b/frontend/src/components/About.jsx index a1c3424..31d8bd9 100644 --- a/frontend/src/components/About.jsx +++ b/frontend/src/components/About.jsx @@ -1,25 +1,52 @@ import { Link } from 'react-router-dom'; -import eva_bg from "../assets/images/eva_bg.png"; +import eva_bg from '../assets/images/eva_bg.png'; function About() { - return( -
-
-
HACKMAN
-
Code is our canvas, innovation is our paint
-
Date : June 4th - 5th
-
HackMan v.6 is an Inter College, extravagant 24-hours Hackathon, hosted by the Department of ISE, Dayananda Sagar College of Engineering (DSCE), Bangalore. We give the brightest of minds a chance to brainstorm as a team and come up with unique solutions, code it out and solve some of the pressing problems of our society. Over the first 4 versions we have seen some brilliant projects and we challenge you to top them off with your Out-of-the-box ideas. “You can't solve a problem on the same level that it was created. You have to rise above it to the next level.”
-
- - REGISTER - -
-
-
- Registration eva -
+ return ( +
+
+
+ HACKMAN
- ); +
+ Code is our canvas, innovation is our paint +
+
+ Date : June 4th - 5th +
+
+ HackMan v.6 is an Inter College, extravagant 24-hours Hackathon, + hosted by the Department of ISE, Dayananda Sagar College of + Engineering (DSCE), Bangalore. We give the brightest of minds a chance + to brainstorm as a team and come up with unique solutions, code it out + and solve some of the pressing problems of our society. Over the first + 4 versions we have seen some brilliant projects and we challenge you + to top them off with your Out-of-the-box ideas. “You can't solve a + problem on the same level that it was created. You have to rise above + it to the next level.” +
+
+ + Register + +
+
+
+ Registration eva +
+
+ ); } -export default About; \ No newline at end of file +export default About; diff --git a/frontend/src/components/Registeration.jsx b/frontend/src/components/Registeration.jsx index f932bc0..92d1bf2 100644 --- a/frontend/src/components/Registeration.jsx +++ b/frontend/src/components/Registeration.jsx @@ -1,57 +1,180 @@ -import eva_lightleft from "../assets/images/eva_lightbgleft.png"; -import eva_lightright from "../assets/images/eva_lightbgright.png"; - -function Registeration() { - return ( -
-
- Registration eva - Registration eva -
-
REGISTER
-
Basic Details
- -
-
-
-
- -
-
- -
-
+import eva_lightleft from '../assets/images/eva_lightbgleft.png'; +import eva_lightright from '../assets/images/eva_lightbgright.png'; -
-
- -
-
- -
-
+import { useFormik } from 'formik'; +import { useEffect } from 'react'; +import * as Yup from 'yup'; -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+const initialValues = { + name: '', + email: '', + phone: '', + college: '', +}; + +const validationSchema = Yup.object({ + name: Yup.string().required('Required'), + email: Yup.string().email('Invalid email address').required('Required'), + phone: Yup.string() + .matches(/^[0-9]+$/, 'Invalid phone number') + .min(10, 'Invalid phone number') + .required('Required'), + college: Yup.string().required('Required'), +}); + +const Registeration = props => { + const { setBasicRegistrationFormValid } = props; + + const formik = useFormik({ + initialValues: initialValues, + validationSchema: validationSchema, + onSubmit: values => { + console.log('submit registration'); + }, + }); + + const { + handleChange, + handleSubmit, + handleBlur, + touched, + errors, + isValid, + dirty, + } = formik; + + useEffect(() => { + setBasicRegistrationFormValid(isValid && dirty); + }, [isValid, dirty]); + + return ( +
+
+ Registration eva + Registration eva +
+
+ REGISTER +
+
+ Basic Details +
+ + +
+
+
+ +
+
+ + {touched.name && errors.name ? ( +
{errors.name}
+ ) : null} +
+
+ +
+
+ +
+
+ + {touched.email && errors.email ? ( +
{errors.email}
+ ) : null} +
+
+ +
+
+ +
+
+ + {touched.phone && errors.phone ? ( +
{errors.phone}
+ ) : null} +
+
+ +
+
+ +
+
+ + {touched.college && errors.college ? ( +
+ {errors.college}
- + ) : null} +
+
- ); -} + +
+ ); +}; -export default Registeration; \ No newline at end of file +export default Registeration; diff --git a/frontend/src/components/Registeration2.jsx b/frontend/src/components/Registeration2.jsx index 44da1bf..641e70e 100644 --- a/frontend/src/components/Registeration2.jsx +++ b/frontend/src/components/Registeration2.jsx @@ -1,76 +1,237 @@ -import eva_lightleft from "../assets/images/eva_lightbgleft.png"; -import eva_lightright from "../assets/images/eva_lightbgright.png"; -import React, { useState } from "react"; - -function Registration2() { - const [numInputs, setNumInputs] = useState(1); - const handleAddInput = () => { - setNumInputs(numInputs + 1); - }; - - const AddButtonDisplay = () => { - const max = 3; - if (numInputs < max) { - return ( -
- -
- ); - } - else { - return ( -
-
Maximum 4
-
- ); - } - } +import { FieldArray, FormikProvider, useFormik } from 'formik'; +import React, { useEffect, useState } from 'react'; +import * as Yup from 'yup'; +import eva_lightleft from '../assets/images/eva_lightbgleft.png'; +import eva_lightright from '../assets/images/eva_lightbgright.png'; + +const initialValues = { + teamName: '', + theme: '', + teamMembers: [''], +}; + +const validationSchema = Yup.object({ + teamName: Yup.string().required('Required'), + theme: Yup.string().required('Required'), + teamMembers: Yup.array() + .of(Yup.string().required('Team member name is required')) + .min(1, 'At least one team member is required'), +}); + +const Registration2 = props => { + const { setTeamDetailsRegistrationFormValid } = props; + const [numInputs, setNumInputs] = useState(1); + const handleAddInput = () => { + setNumInputs(numInputs + 1); + }; + + const formik = useFormik({ + initialValues: initialValues, + validationSchema: validationSchema, + onSubmit: values => { + console.log('submit registration'); + }, + }); + const { + values, + handleChange, + handleSubmit, + handleBlur, + touched, + errors, + isValid, + dirty, + setFieldValue, + } = formik; + + useEffect(() => { + setTeamDetailsRegistrationFormValid(isValid && dirty); + }, [isValid, dirty]); + + const AddButtonDisplay = () => { + const max = 4; + if (numInputs < max) { + return ( +
+ +
+ ); + } else { + return ( +
+
Maximum 4
+
+ ); + } + }; - return ( -
-
- Registration eva - Registration eva + return ( +
+
+ Registration eva + Registration eva +
+
+ REGISTER +
+
+ Team Details +
+ +
+
+
+
+ +
+
+ + {touched.teamName && errors.teamName ? ( +
+ {errors.teamName} +
+ ) : null} +
-
REGISTER
-
Team Details
- - -
-
-
- -
-
- -
-
- -
-
- -
- {[...Array(numInputs)].map((_, index) => ( + +
+
+ +
+ + { + return ( + <> + {values?.teamMembers?.map((member, index) => (
- + + setFieldValue( + `teamMembers[${index}]`, + e?.target?.value + ) + } + onBlur={handleBlur} + /> + + {} + + {touched?.teamMembers?.[index] && + errors?.teamMembers?.[index] ? ( +
+ {errors?.teamMembers[index]}{' '} +
+ ) : null}
- ))} - {AddButtonDisplay(numInputs)} -
- -
-
- -
-
- -
-
-
- -
- ); -} + ))} + +
+ {values?.teamMembers?.length >= 2 ? ( +
+ +
+ ) : null} + + {values?.teamMembers?.length < 4 ? ( +
+ +
+ ) : ( +
+
Maximum 4
+
+ )} +
+ + ); + }} + /> +
+ +
+
+ +
+
+ + {touched.theme && errors.theme ? ( +
+ {errors.theme} +
+ ) : null} +
+
+
+ + +
+ ); +}; -export default Registration2; \ No newline at end of file +export default Registration2; diff --git a/frontend/src/pages/RegisterationPage.js b/frontend/src/pages/RegisterationPage.js index 05053c4..d2902af 100644 --- a/frontend/src/pages/RegisterationPage.js +++ b/frontend/src/pages/RegisterationPage.js @@ -1,38 +1,60 @@ -import React, {useState} from 'react'; -import Navbar from '../components/Navbar'; -import Registeration from '../components/Registeration'; -import Registeration2 from '../components/Registeration2'; +import React, { useState } from 'react' +import Navbar from '../components/Navbar' +import Registeration from '../components/Registeration' +import Registeration2 from '../components/Registeration2' function RegisterationPage() { - const [page, setPage] = useState(0); - + const [page, setPage] = useState(0) + const [isBasicRegistrationFormValid, setBasicRegistrationFormValid] = + useState(false) + const [ + isTeamDetailsRegistrationFormValid, + setTeamDetailsRegistrationFormValid, + ] = useState(false) const ButtonDisplay = () => { - if (page === 0){ + if (page === 0) { return (
-
- ); + ) } - if (page === 1 ){ + if (page === 1) { return (
- +
- +
-
@@ -43,28 +65,35 @@ function RegisterationPage() { } const PageDisplay = () => { - if (page === 0){ + if (page === 0) { return (
- +
- ); - } - else { + ) + } else { return ( - - ); + + ) } } - return ( -
- - {PageDisplay(page)} -
{ButtonDisplay(page)}
+ return ( +
+ + {PageDisplay(page)} +
+ {ButtonDisplay(page)}
- ) - } - -export default RegisterationPage; \ No newline at end of file +
+ ) +} + +export default RegisterationPage