From 2f0f94c4474c9557128134b18de2de2145626d57 Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 16:27:54 +0300 Subject: [PATCH 1/9] Update EmailVerificationPage.js Added the verification code form validation requiring exactly 4 digits to be entered. --- .../web/src/pages/EmailVerificationPage.js | 69 +++++++++++++------ 1 file changed, 49 insertions(+), 20 deletions(-) diff --git a/learnify/web/src/pages/EmailVerificationPage.js b/learnify/web/src/pages/EmailVerificationPage.js index e22a5fcc..f95cf417 100644 --- a/learnify/web/src/pages/EmailVerificationPage.js +++ b/learnify/web/src/pages/EmailVerificationPage.js @@ -1,22 +1,39 @@ -import React, {useState,setState} from 'react'; -import { NavLink} from 'react-router-dom'; +import React from 'react'; +import { NavLink, useNavigate } from 'react-router-dom'; +import { useForm } from "react-hook-form"; +import { yupResolver } from '@hookform/resolvers/yup' +import * as Yup from 'yup' +import 'bootstrap/dist/css/bootstrap.min.css' import './style.css' import logo from '../images/logo-dblue.png' import illustration from '../images/learn-illustration.png' +import ButtonLoader from "../buttonIndex"; function EmailVerificationPage() { - const [verificationCode, setVerificationCode] = useState(null); + const formSchema = Yup.object().shape({ + verificationCode: Yup.string() + .required("Verification Code is required!") + .matches( + /^\d{4}$/, + "Verification Code must contain exactly 4 digits!" + ), + }) + const formOptions = { resolver: yupResolver(formSchema) } - const handleInputChange = (e) => { - const {id , value} = e.target; - if(id === "verificationCode"){ - setVerificationCode(value); - } - } + const { register, handleSubmit, formState } = useForm( + formOptions, + {defaultValues: { + verificationCode: "", + }}); + const { errors } = formState + + const navigate = useNavigate(); - const handleSubmit = () => { - console.log(verificationCode); + const onSubmit = (data, event) => { + console.log(data, event); + event.preventDefault(); + navigate('/home-page', {replace: true}); } return( @@ -34,30 +51,42 @@ function EmailVerificationPage() {
- + Sign Up
- - Sign In + + Login
-
+
+
- handleInputChange(e)} id="verificationCode" placeholder="Verification Code"/> + +
{errors.verificationCode?.message}
+
) From 0b5d6cb8389de4517d55420082d9925a36c094bc Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 16:31:29 +0300 Subject: [PATCH 2/9] Create buttonIndex.js Added this file to create the resend button with 3 minute timeout value. --- learnify/web/src/buttonIndex.js | 41 +++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 learnify/web/src/buttonIndex.js diff --git a/learnify/web/src/buttonIndex.js b/learnify/web/src/buttonIndex.js new file mode 100644 index 00000000..643c48e5 --- /dev/null +++ b/learnify/web/src/buttonIndex.js @@ -0,0 +1,41 @@ +import React, { Component } from "react"; + +export default class ButtonLoader extends Component { + state = { + loading: false, + orange: true + }; + + changeColor(){ + this.setState({orange: !this.state.orange}) + } + + fetchData = () => { + this.setState({ loading: true , orange: false}); + + //Faking API call here + setTimeout(() => { + this.setState({ loading: false , orange: true}); + }, 180000); + }; + + render() { + const { loading } = this.state; + + let btn_class = this.state.orange ? "btn-orange" : "btn-grey"; + + return ( +
+ +
+ ); + } +} From 7ec508a5ae4b9e2f3416c26ef4399b5d4578f74d Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 16:33:48 +0300 Subject: [PATCH 3/9] Update style.css Added the btn-grey class to allow the resend button to turn grey for 3 minutes when being clicked. --- learnify/web/src/pages/style.css | 43 +++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/learnify/web/src/pages/style.css b/learnify/web/src/pages/style.css index 92d62b8c..c581f22b 100644 --- a/learnify/web/src/pages/style.css +++ b/learnify/web/src/pages/style.css @@ -78,6 +78,7 @@ body{ text-align: left; } + .login-button{ padding-left: 40px; text-align: left; @@ -148,6 +149,10 @@ body{ padding: 8px; } +.space-20{ + padding: 20px +} + .space-50{ padding: 50px } @@ -191,7 +196,27 @@ body{ padding-right: 15px; text-align: center; touch-action: manipulation; - transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s; + transition: background-color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s; +} + +.btn-grey{ + align-items: center; + background-color: #808080; + border: 0; + border-radius: 100px; + box-sizing: border-box; + color:#1746A2; + cursor: pointer; + font-family: 'Open Sans' sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 20px; + padding: 5px; + padding-left: 15px; + padding-right: 15px; + text-align: center; + touch-action: manipulation; + transition: background-color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s; } .btn-white{ @@ -217,20 +242,22 @@ body{ .welcome-navigation{ display: flex; justify-content: flex-start; - margin-left: 13%; + margin-left: 7%; margin-top: 10%; } .welcome-navigation-item{ background-color:#FFF7E9; color:#1746A2; - padding: 10px 20px; + padding-top: 6px; cursor: pointer; border: none; display: inline-block; text-decoration: none; + text-align: center; border-radius: 100px; - width: 60px; + width: 100px; + height: 40px; font-family: 'Open Sans' sans-serif; font-weight: 600; font-size: 16px; @@ -239,3 +266,11 @@ body{ .welcome-navigation-item-active{ background-color: #FF731D; } + + +*:disabled { + background-color: dimgrey; + color: linen; + opacity: 1; + pointer-events: none; +} From f447c208c619509e6213acbcf59b6c2a450eab9a Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 16:34:56 +0300 Subject: [PATCH 4/9] Update package.json Added some necessary packages for validation purposes. --- learnify/web/package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/learnify/web/package.json b/learnify/web/package.json index 05e5be56..82058c9f 100644 --- a/learnify/web/package.json +++ b/learnify/web/package.json @@ -3,14 +3,18 @@ "version": "0.1.0", "private": true, "dependencies": { + "@hookform/resolvers": "^2.9.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^5.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-hook-form": "^7.38.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", From dc351981d3e25329ec1eb2a56a5c9fd821f37abe Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 16:48:24 +0300 Subject: [PATCH 5/9] Update package-lock.json Updated the package-lock file to comply with the packages installed. --- learnify/web/package-lock.json | 162 ++++++++++++++++++++++++++++++++- 1 file changed, 161 insertions(+), 1 deletion(-) diff --git a/learnify/web/package-lock.json b/learnify/web/package-lock.json index 1072b1ae..1a215324 100644 --- a/learnify/web/package-lock.json +++ b/learnify/web/package-lock.json @@ -8,14 +8,18 @@ "name": "my-app", "version": "0.1.0", "dependencies": { + "@hookform/resolvers": "^2.9.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^5.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-hook-form": "^7.38.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" } }, "node_modules/@adobe/css-tools": { @@ -2199,6 +2203,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@hookform/resolvers": { + "version": "2.9.10", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.10.tgz", + "integrity": "sha512-JIL1DgJIlH9yuxcNGtyhsWX/PgNltz+5Gr6+8SX9fhXc/hPbEIk6wPI82nhgvp3uUb6ZfAM5mqg/x7KR7NAb+A==", + "peerDependencies": { + "react-hook-form": "^7.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.10.7", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz", @@ -3089,6 +3101,16 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz", @@ -4046,6 +4068,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.186", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz", + "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" + }, "node_modules/@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -5372,6 +5399,24 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz", + "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -11462,6 +11507,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", @@ -11790,6 +11840,11 @@ "multicast-dns": "cli.js" } }, + "node_modules/nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -13669,6 +13724,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", @@ -13978,6 +14038,21 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-hook-form": { + "version": "7.38.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz", + "integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15559,6 +15634,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", @@ -16827,6 +16907,23 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "engines": { + "node": ">=10" + } } }, "dependencies": { @@ -18244,6 +18341,12 @@ } } }, + "@hookform/resolvers": { + "version": "2.9.10", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.10.tgz", + "integrity": "sha512-JIL1DgJIlH9yuxcNGtyhsWX/PgNltz+5Gr6+8SX9fhXc/hPbEIk6wPI82nhgvp3uUb6ZfAM5mqg/x7KR7NAb+A==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.10.7", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz", @@ -18888,6 +18991,12 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "peer": true + }, "@remix-run/router": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz", @@ -19596,6 +19705,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/lodash": { + "version": "4.14.186", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz", + "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" + }, "@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -20609,6 +20723,12 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "bootstrap": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz", + "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==", + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -25005,6 +25125,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "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==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -25250,6 +25375,11 @@ "thunky": "^1.0.2" } }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -26419,6 +26549,11 @@ } } }, + "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==" + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26641,6 +26776,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-hook-form": { + "version": "7.38.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz", + "integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27801,6 +27942,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -28771,6 +28917,20 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + } } } } From 4738d5c0fb0516b251cd28f18496c66b73df0ae3 Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 18:47:59 +0300 Subject: [PATCH 6/9] Update SignUpForm.js Updated the sign up page with its latest version. --- learnify/web/src/pages/SignUpForm.js | 127 ++++++++++++++++++--------- 1 file changed, 87 insertions(+), 40 deletions(-) diff --git a/learnify/web/src/pages/SignUpForm.js b/learnify/web/src/pages/SignUpForm.js index 76d4320b..bc85988d 100644 --- a/learnify/web/src/pages/SignUpForm.js +++ b/learnify/web/src/pages/SignUpForm.js @@ -1,38 +1,52 @@ -import React, {useState,setState} from 'react'; -import { NavLink} from 'react-router-dom'; +import React from 'react'; +import { NavLink, useNavigate } from 'react-router-dom'; +import { useForm } from "react-hook-form"; +import { yupResolver } from '@hookform/resolvers/yup' +import * as Yup from 'yup' +import 'bootstrap/dist/css/bootstrap.min.css' import './style.css' import logo from '../images/logo-dblue.png' import illustration from '../images/learn-illustration.png' function SignUpForm() { - const [userName, setUserName] = useState(null); - const [email, setEmail] = useState(null); - const [password,setPassword] = useState(null); - const [confirmPassword,setConfirmPassword] = useState(null); - const [isChecked, setIsChecked] = useState(false); + const formSchema = Yup.object().shape({ + username: Yup.string() + .required("Username is required!") + .min(3, "Username must be at least 3 characters long!"), + email: Yup.string().email("Invalid email!") + .required("Email is required!"), + password: Yup.string() + .required("Password is required!") + .matches( + /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/, + "Password must be 6 to 20 characters long and contain at least one uppercase, one lowercase letter, and one number!" + ), + confirmPassword: Yup.string() + .required("You need to confirm your password!") + .oneOf([Yup.ref("password")], "Passwords do not match!"), + kvkk: Yup.boolean() + .oneOf([true], "You must agree the KVKK confirmation!") + }) + const formOptions = { resolver: yupResolver(formSchema) } - const handleInputChange = (e) => { - const {id , value} = e.target; - if(id === "userName"){ - setUserName(value); - } - if(id === "email"){ - setEmail(value); - } - if(id === "password"){ - setPassword(value); - } - if(id === "confirmPassword"){ - setConfirmPassword(value); - } - if(id === "isChecked"){ - setIsChecked(value); - } - } + const { register, handleSubmit, formState } = useForm( + formOptions, + {defaultValues: { + username: "", + email: "", + password: "", + confirmPassword: "", + kvkk: false + }}); + const { errors } = formState + + const navigate = useNavigate(); - const handleSubmit = () => { - console.log(userName,email,password,confirmPassword); + const onSubmit = (data, event) => { + console.log(data, event); + event.preventDefault(); + navigate('/verify-email', {replace: true}); } return( @@ -50,60 +64,93 @@ function SignUpForm() {
- + Sign Up
- + Login
-
+
+
- +
- handleInputChange(e)} id="userName" placeholder="User Name"/> + +
{errors.username?.message}
- handleInputChange(e)} placeholder="Email"/> + +
{errors.email?.message}
- handleInputChange(e)} placeholder="Password"/> + +
{errors.password?.message}
- handleInputChange(e)} placeholder="Confirm Password"/> + +
{errors.confirmPassword?.message}
-
+
) From 73958a40fe1b7002dff173b00406e11e1c28bdd1 Mon Sep 17 00:00:00 2001 From: surmelienes1 <74325266+surmelienes1@users.noreply.github.com> Date: Sat, 29 Oct 2022 18:50:15 +0300 Subject: [PATCH 7/9] Update EmailVerificationPage.js Changed the wording from "digits" to "digit numbers" so as to make it easier for users to understand the convention. --- learnify/web/src/pages/EmailVerificationPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learnify/web/src/pages/EmailVerificationPage.js b/learnify/web/src/pages/EmailVerificationPage.js index f95cf417..102de430 100644 --- a/learnify/web/src/pages/EmailVerificationPage.js +++ b/learnify/web/src/pages/EmailVerificationPage.js @@ -16,7 +16,7 @@ function EmailVerificationPage() { .required("Verification Code is required!") .matches( /^\d{4}$/, - "Verification Code must contain exactly 4 digits!" + "Verification Code must contain exactly 4 digit numbers!" ), }) const formOptions = { resolver: yupResolver(formSchema) } From 246f2367726ea9cb3c6dc52ceeea6ebedb03597a Mon Sep 17 00:00:00 2001 From: Gokay Yildiz Date: Sun, 30 Oct 2022 11:59:45 +0300 Subject: [PATCH 8/9] grammar fix --- learnify/web/src/pages/EmailVerificationPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learnify/web/src/pages/EmailVerificationPage.js b/learnify/web/src/pages/EmailVerificationPage.js index 102de430..25850cdb 100644 --- a/learnify/web/src/pages/EmailVerificationPage.js +++ b/learnify/web/src/pages/EmailVerificationPage.js @@ -16,7 +16,7 @@ function EmailVerificationPage() { .required("Verification Code is required!") .matches( /^\d{4}$/, - "Verification Code must contain exactly 4 digit numbers!" + "Verification Code must contain exactly 4 digit number!" ), }) const formOptions = { resolver: yupResolver(formSchema) } From 46334f062b297ef59c0c3f9e51644436c569e869 Mon Sep 17 00:00:00 2001 From: Gokay Yildiz Date: Sun, 30 Oct 2022 12:01:53 +0300 Subject: [PATCH 9/9] warnings handled --- learnify/web/src/App.js | 1 - learnify/web/src/pages/ForgetPassword.js | 2 +- learnify/web/src/pages/LoginForm.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/learnify/web/src/App.js b/learnify/web/src/App.js index 02a6820e..6579cbe1 100644 --- a/learnify/web/src/App.js +++ b/learnify/web/src/App.js @@ -2,7 +2,6 @@ import { BrowserRouter, Routes, Route} from 'react-router-dom'; import './App.css'; import EmailVerificationPage from './pages/EmailVerificationPage'; import ForgetPassword from './pages/ForgetPassword'; -import Header from './pages/Header'; import LoginForm from './pages/LoginForm'; import HomePage from './pages/HomePage'; import SignUpForm from './pages/SignUpForm'; diff --git a/learnify/web/src/pages/ForgetPassword.js b/learnify/web/src/pages/ForgetPassword.js index 6a9d231c..4905426a 100644 --- a/learnify/web/src/pages/ForgetPassword.js +++ b/learnify/web/src/pages/ForgetPassword.js @@ -1,4 +1,4 @@ -import React, {useState,setState} from 'react'; +import React, {useState} from 'react'; import { NavLink} from 'react-router-dom'; import './style.css' import logo from '../images/logo-dblue.png' diff --git a/learnify/web/src/pages/LoginForm.js b/learnify/web/src/pages/LoginForm.js index 7a8ed188..d36b17b9 100644 --- a/learnify/web/src/pages/LoginForm.js +++ b/learnify/web/src/pages/LoginForm.js @@ -1,4 +1,4 @@ -import React, {useState,setState} from 'react'; +import React, {useState} from 'react'; import {NavLink} from 'react-router-dom'; import './style.css' import logo from '../images/logo-dblue.png'