From badb1a22a161df5a126545f72a6815237538aa58 Mon Sep 17 00:00:00 2001 From: Ram Date: Mon, 3 Feb 2020 20:43:16 +0530 Subject: [PATCH 01/18] Change register styling --- .../components/Authentication/Register.tsx | 449 +++++++++--------- src/app/styles/Authentication.module.css | 59 ++- src/app/types/Authentication/Register.ts | 1 + 3 files changed, 293 insertions(+), 216 deletions(-) diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 890c01a2..0d17b6ea 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -1,5 +1,4 @@ -import { faEnvelope, faFlag, faLock, faUser, faUserTie } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// tslint:disable-next-line:max-line-length import { RECAPTCHA_SITE_KEY } from 'app/../config/config'; import { Routes } from 'app/routes'; import * as styles from 'app/styles/Authentication.module.css'; @@ -17,6 +16,9 @@ import { Redirect } from 'react-router-dom'; export class Register extends React.Component { private registerRef = React.createRef(); + private register1Ref = React.createRef(); + private register2Ref = React.createRef(); + private register3Ref = React.createRef(); private recaptchaRef = React.createRef(); constructor(props: RegisterInterfaces.Props) { @@ -26,6 +28,7 @@ export class Register extends React.Component { + const { currentStep } = this.state; + + if (currentStep === 0) { + if (this.register1Ref.current) { + this.register1Ref.current.classList.add('was-validated'); + if (this.register1Ref.current.checkValidity()) { + this.setState({ + currentStep: 1, + }); + } + } + } else if (currentStep === 1) { + if (this.register2Ref.current) { + this.register2Ref.current.classList.add('was-validated'); + if (this.register2Ref.current.checkValidity()) { + this.setState({ + currentStep: 2, + }); + } + } + } + }; + + public handlePrevious = () => { + const { currentStep } = this.state; + if (currentStep === 1) { + if (this.register2Ref.current) { + this.setState({ + currentStep: 0, + }); + } + } else if (currentStep === 2) { + if (this.register3Ref.current) { + this.setState({ + currentStep: 1, + }); + } + } + }; + public render() { const { repeatPassword, @@ -73,6 +117,7 @@ export class Register extends React.Component +
+
+

Register to CodeCharacter!

+

Register now and code your way through!!

+
-
-
-
+ {currentStep === 0 && ( +
+ +
+ + this.setState({ + fullName: e.target.value, + }) + } + required + /> +
Name must have minimum 5 characters.
+
-
- - - -
{ checkUsernameExists(e.target.value); @@ -119,19 +184,10 @@ export class Register extends React.Component
Username must have minimum 5 characters.
-
-
-
-
-
- - - -
Please enter a valid Email ID.
-
+
+ +
+
-
-
+ )} + {currentStep === 1 && ( +
+
-
- - - -
this.setState({ @@ -174,222 +239,178 @@ export class Register extends React.Component
-
-
-
- Are you a student ?{' '} - - - this.setState({ - isStudent: !isStudent, - type: - type === RegisterInterfaces.RegisterType.Student - ? RegisterInterfaces.RegisterType.Professional - : RegisterInterfaces.RegisterType.Student, - }) - } - /> - - +
+ + this.setState({ + repeatPassword: e.target.value, + }) + } + required + /> +
Passwords should match.
+
+ +
+ + +
+
- {isStudent ? ( -
-
-
+ )} + {currentStep === 2 && ( +
+
+
+ Are you a student ?{' '} + + + this.setState({ + isStudent: !isStudent, + type: + type === RegisterInterfaces.RegisterType.Student + ? RegisterInterfaces.RegisterType.Professional + : RegisterInterfaces.RegisterType.Student, + }) + } + /> + + +
+ {isStudent && (
-
- - - -
{ - checkUsernameExists(e.target.value); + onChange={(e) => this.setState({ collegeName: e.target.value, - }); - }} + }) + } required />
- Username must have minimum 5 characters. + College Name should have minimum 5 characters.
-
-
-
- ) : null} -
-
-
-
+ )}
-
- - - -
- - this.setState({ - fullName: e.target.value, - }) - } - required - /> -
Name must have minimum 5 characters.
-
-
-
-
-
-
-
- - - -
-
Please select a country.
+
Please Select a country
-
-
-
-
-
-
- - - +
+
Choose your spirit animal
+
+
+ {avatars.map((avatar: string, index: number) => ( +
{ + this.setState({ + avatar, + }); + }} + title={avatar} + > + { + // @ts-ignore + + } +
+ ))} +
- - this.setState({ - repeatPassword: e.target.value, - }) - } - required +
+
+ -
Passwords should match.
+
+ Please fill recaptcha. +
-
-
-
-
Choose your spirit animal
-
-
- {avatars.map((avatar: string, index: number) => ( -
{ - this.setState({ - avatar, - }); - }} - title={avatar} - > - { - // @ts-ignore - - } -
- ))} -
-
-
-
-
-
-
- -
- Please fill recaptcha. +
+
+
{errorMessage}
-
-
-
-
-
{errorMessage}
-
-
-
- -
+ +
+ +
+
-
+ )} + {currentStep === 2 && ( + + )}
+ - +
Already have an account?{' '} { @@ -444,7 +465,7 @@ export class Register extends React.Component Date: Mon, 10 Feb 2020 18:14:35 +0530 Subject: [PATCH 02/18] Add horizontal nav to register page --- package.json | 1 + .../components/Authentication/Register.tsx | 352 ++++++++++++------ src/app/styles/Authentication.module.css | 73 +++- src/app/types/Authentication/Register.ts | 1 - 4 files changed, 295 insertions(+), 132 deletions(-) diff --git a/package.json b/package.json index f4e18608..2aea89c6 100644 --- a/package.json +++ b/package.json @@ -149,6 +149,7 @@ "react-flags-select": "^1.1.10", "react-ga": "^2.7.0", "react-google-recaptcha": "^1.0.5", + "react-horizontal-timeline": "^1.5.3", "react-joyride": "^2.0.4", "react-markdown": "^4.0.6", "react-monaco-editor": "^0.22.0", diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 0d17b6ea..f690d29d 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -1,4 +1,7 @@ // tslint:disable-next-line:max-line-length +import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + import { RECAPTCHA_SITE_KEY } from 'app/../config/config'; import { Routes } from 'app/routes'; import * as styles from 'app/styles/Authentication.module.css'; @@ -12,14 +15,27 @@ import ReactFlagsSelect from 'react-flags-select'; import 'react-flags-select/css/react-flags-select.css'; // tslint:disable-next-line:import-name import ReCAPTCHA from 'react-google-recaptcha'; +import HorizontalTimeline from 'react-horizontal-timeline'; import { Redirect } from 'react-router-dom'; + +const stepLabel = { + 0:"Name,Email", + 1:"Password", + 2:"Others" +} + + + + + export class Register extends React.Component { private registerRef = React.createRef(); private register1Ref = React.createRef(); private register2Ref = React.createRef(); private register3Ref = React.createRef(); private recaptchaRef = React.createRef(); + private passwordErrorRef = React.createRef(); constructor(props: RegisterInterfaces.Props) { super(props); @@ -70,7 +86,7 @@ export class Register extends React.Component +

Register to CodeCharacter!

Register now and code your way through!!

@@ -139,6 +168,7 @@ export class Register extends React.Component {currentStep === 0 && (
@@ -147,68 +177,85 @@ export class Register extends React.Component -
- - this.setState({ - fullName: e.target.value, - }) - } - required - /> -
Name must have minimum 5 characters.
-
-
- { - checkUsernameExists(e.target.value); - this.setState({ - username: e.target.value, - }); - }} - required - /> -
Username must have minimum 5 characters.
-
-
- - this.setState({ - email: e.target.value, - }) +
+
Full Name
+
+ + this.setState({ + fullName: e.target.value, + }) + } + required + /> +
+ Name must have minimum 5 characters. +
+
+
Username
+
+ { + checkUsernameExists(e.target.value); + this.setState({ + username: e.target.value, + }); + }} + required + /> +
+ Username must have minimum 5 characters. +
+
+
Email
+
+ + this.setState({ + email: e.target.value, + }) + } + required + /> +
+ Please enter a valid Email ID. +
+
+ +
-
Please enter a valid Email ID.
-
-
- + {errorMessage} +
+
)} @@ -219,12 +266,12 @@ export class Register extends React.Component +
Password
-
+
Password should have minimum 5 characters.
+
Confirm Password
-
Passwords should match.
-
- - +
+
+ Password and confirm passwords have different values +
+ +
)} @@ -303,24 +345,26 @@ export class Register extends React.Component
{isStudent && ( -
- - this.setState({ - collegeName: e.target.value, - }) - } - required - /> -
- College Name should have minimum 5 characters. +
+
College Name
+
+ + this.setState({ + collegeName: e.target.value, + }) + } + required + /> +
+ College Name should have minimum 5 characters. +
)} @@ -332,9 +376,11 @@ export class Register extends React.Component -
Please Select a country
+
+ Please Select a country +
-
+
Choose your spirit animal
@@ -378,31 +424,40 @@ export class Register extends React.Component
-
-
-
{errorMessage}
-
+
-
-
+ +
)} - {currentStep === 2 && ( - - )} + + + + +
- + +
+ { + this.handelStepChange(this.state.currentStep,index); + }} + getLabel={function(date:string) { return stepLabel[date]; }} + values={ ["0","1","2"] } + minEventPadding={120} + linePadding={49} + /> +
+ +
@@ -422,10 +477,65 @@ export class Register extends React.Component + + + + +
); } + + private handelStepChange = (oldStep:number ,newStep:number ) => { + if(oldStep===0){ + if(newStep===1 || newStep===2){ + if (this.register1Ref.current) { + this.register1Ref.current.classList.add('was-validated'); + if (this.register1Ref.current.checkValidity() && !this.props.errorMessage) { + this.setState({ + currentStep: 1, + }); + } + } + } + }else if(oldStep ===1){ + if(newStep===0){ + if (this.register2Ref.current) { + this.setState({ + currentStep: 0, + }); + } + }else if(newStep===2){ + if (this.register2Ref.current) { + if (this.state.password === this.state.repeatPassword) { + if (this.passwordErrorRef.current) { + this.passwordErrorRef.current.classList.remove( + classnames(styles['register-error-active']), + ); + } + this.register2Ref.current.classList.add('was-validated'); + if (this.register2Ref.current.checkValidity()) { + this.setState({ + currentStep: 2, + }); + } + } else { + if (this.passwordErrorRef.current ) { + this.passwordErrorRef.current.classList.add( + classnames(styles['register-error-active']), + ); + } + } + } + } + }else if (oldStep===2){ + this.setState({ + currentStep:newStep + }) + } + } + private onSelectFlag = (countryCode: string) => { this.setState({ country: countryCode, @@ -448,9 +558,11 @@ export class Register extends React.Component void; } From 1922b31db07c1534e5a029121bc9fdcad618359e Mon Sep 17 00:00:00 2001 From: Ram Date: Mon, 10 Feb 2020 18:23:19 +0530 Subject: [PATCH 03/18] Add handleRegister --- .../components/Authentication/Register.tsx | 84 +++++++------------ 1 file changed, 31 insertions(+), 53 deletions(-) diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index f690d29d..35fb0e53 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -18,16 +18,11 @@ import ReCAPTCHA from 'react-google-recaptcha'; import HorizontalTimeline from 'react-horizontal-timeline'; import { Redirect } from 'react-router-dom'; - const stepLabel = { - 0:"Name,Email", - 1:"Password", - 2:"Others" -} - - - - + 0: 'Name,Email', + 1: 'Password', + 2: 'Others', +}; export class Register extends React.Component { private registerRef = React.createRef(); @@ -157,7 +152,7 @@ export class Register extends React.Component +

Register to CodeCharacter!

Register now and code your way through!!

@@ -255,7 +250,6 @@ export class Register extends React.Component
-
)} @@ -312,8 +306,6 @@ export class Register extends React.Component
- -
)} @@ -425,37 +417,29 @@ export class Register extends React.Component
- - +
- -
)} - - - - -
- -
- { - this.handelStepChange(this.state.currentStep,index); - }} - getLabel={function(date:string) { return stepLabel[date]; }} - values={ ["0","1","2"] } - minEventPadding={120} - linePadding={49} + +
+ { + this.handelStepChange(this.state.currentStep, index); + }} + getLabel={function(date: string) { + return stepLabel[date]; + }} + values={['0', '1', '2']} + minEventPadding={120} + linePadding={49} /> -
+
@@ -477,19 +461,13 @@ export class Register extends React.Component - - - - -
); } - - private handelStepChange = (oldStep:number ,newStep:number ) => { - if(oldStep===0){ - if(newStep===1 || newStep===2){ + private handelStepChange = (oldStep: number, newStep: number) => { + if (oldStep === 0) { + if (newStep === 1 || newStep === 2) { if (this.register1Ref.current) { this.register1Ref.current.classList.add('was-validated'); if (this.register1Ref.current.checkValidity() && !this.props.errorMessage) { @@ -499,14 +477,14 @@ export class Register extends React.Component { this.setState({ From e570e9b19754abab8a1ed7c303e3923e035c678e Mon Sep 17 00:00:00 2001 From: Ram Date: Mon, 10 Feb 2020 23:48:53 +0530 Subject: [PATCH 04/18] Add nav buttons to Register page --- package.json | 1 - .../components/Authentication/Register.tsx | 134 +++++++++++++----- src/app/styles/Authentication.module.css | 108 +++++++++++++- 3 files changed, 201 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 2aea89c6..f4e18608 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,6 @@ "react-flags-select": "^1.1.10", "react-ga": "^2.7.0", "react-google-recaptcha": "^1.0.5", - "react-horizontal-timeline": "^1.5.3", "react-joyride": "^2.0.4", "react-markdown": "^4.0.6", "react-monaco-editor": "^0.22.0", diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 35fb0e53..0cd207bb 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -1,7 +1,6 @@ // tslint:disable-next-line:max-line-length -import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - import { RECAPTCHA_SITE_KEY } from 'app/../config/config'; import { Routes } from 'app/routes'; import * as styles from 'app/styles/Authentication.module.css'; @@ -15,15 +14,8 @@ import ReactFlagsSelect from 'react-flags-select'; import 'react-flags-select/css/react-flags-select.css'; // tslint:disable-next-line:import-name import ReCAPTCHA from 'react-google-recaptcha'; -import HorizontalTimeline from 'react-horizontal-timeline'; import { Redirect } from 'react-router-dom'; -const stepLabel = { - 0: 'Name,Email', - 1: 'Password', - 2: 'Others', -}; - export class Register extends React.Component { private registerRef = React.createRef(); private register1Ref = React.createRef(); @@ -162,7 +154,6 @@ export class Register extends React.Component {currentStep === 0 && ( @@ -333,7 +324,9 @@ export class Register extends React.Component - +
{isStudent && ( @@ -361,13 +354,15 @@ export class Register extends React.Component )}
- +
+ +
Please Select a country
@@ -416,32 +411,101 @@ export class Register extends React.Component
+
+ {errorMessage} +
- +
)}
+ {/* + +
+ { + this.handelStepChange(this.state.currentStep, index); + }} + styles={{background:'white',foreground: '#7b9d6f'}} + getLabel={(index:number) => { + if(index===0){ + return "Name,Email" + } + else if(index===1){ + return "Password" + } + else { + return "Others" + } + }} + values={[0, 1, 2]} + minEventPadding={120} + linePadding={49} + /> +
+ + */} -
- { - this.handelStepChange(this.state.currentStep, index); - }} - getLabel={function(date: string) { - return stepLabel[date]; - }} - values={['0', '1', '2']} - minEventPadding={120} - linePadding={49} - /> +
+ this.handelStepChange(this.state.currentStep, this.state.currentStep - 1) + } + > + +
+
    +
  • this.handelStepChange(this.state.currentStep, 0)} + > + {' '} +

    User Details

    +
    • +
  • this.handelStepChange(this.state.currentStep, 1)} + > +

    Credentials

    +
    • +
  • this.handelStepChange(this.state.currentStep, 2)} + > +

    Other Details

    +
    • +
+
+ this.handelStepChange(this.state.currentStep, this.state.currentStep + 1) + } + > +
-
@@ -470,7 +534,7 @@ export class Register extends React.Component) => { + private handleRegister = async (event: React.MouseEvent) => { const { register } = this.props; const { avatar, diff --git a/src/app/styles/Authentication.module.css b/src/app/styles/Authentication.module.css index eeefa075..85d5e70d 100755 --- a/src/app/styles/Authentication.module.css +++ b/src/app/styles/Authentication.module.css @@ -203,10 +203,40 @@ .register-input { margin: 0 !important; height: 50px; + width: 100%; border: 1px solid black; border-radius: 3px !important; margin-bottom: 10px !important; } +.left-arrow { + position: relative; + left: 14%; + top: 4px; + border-radius: 50%; + border: 2px solid #4630eb; + width: 30px; + height: 30px; + cursor: pointer; +} +.right-arrow { + position: relative; + right: 14%; + top: 4px; + border-radius: 50%; + border: 2px solid #4630eb; + width: 30px; + height: 30px; + cursor: pointer; +} +.right-arrow:hover { + background-color: #4630eb; + color: white; +} +.left-arrow:hover { + background-color: #4630eb; + color: white; +} + .register-input:focus, .register-input:active { outline: none !important; @@ -289,8 +319,6 @@ } .login-section1 { - height: 350px; - box-sizing: content-box; } @@ -301,12 +329,80 @@ } .register-button { + margin: 10px; + width: 100px; + height: 40px; background-color: #4630eb; color: white; - width: 10%; +} + +.multi-steps > li.is-active:before, +.multi-steps > li.is-active ~ li:before { + content: counter(stepNum); + font-family: inherit; + font-weight: 700; +} +.multi-steps > li.is-active:after, +.multi-steps > li.is-active ~ li:after { + background-color: #ededed; +} + +.multi-steps { + display: table; + table-layout: fixed; + width: 70%; + margin: auto; + cursor: pointer; + font-family: 'Poppins'; + padding: 0; +} +.multi-steps > li { + counter-increment: stepNum; + text-align: center; + display: table-cell; + position: relative; + color: #4bb543; +} +.multi-steps > li:before { + content: '\2713'; display: block; + margin: 0 auto 4px; + background-color: #fff; + width: 36px; + height: 36px; + line-height: 32px; + text-align: center; + font-weight: bold; + border-width: 2px; + border-style: solid; + border-color: #4bb543; + border-radius: 50%; +} +.multi-steps > li:after { + content: ''; + height: 2px; + width: 100%; + background-color: #4bb543; position: absolute; - height: 50px; - bottom: 11px; - right: 27%; + top: 16px; + left: 50%; + z-index: -1; +} +.multi-steps li.is-active { + color: #4630eb; +} + +.multi-steps > li:last-child:after { + display: none; +} +.multi-steps > li.is-active:before { + background-color: #fff; + border-color: #4630eb; +} +.multi-steps > li.is-active ~ li { + color: #808080; +} +.multi-steps > li.is-active ~ li:before { + background-color: #ededed; + border-color: #ededed; } From 4beafe502664399e84e85a9eb0719143792c25c7 Mon Sep 17 00:00:00 2001 From: Ram Date: Tue, 11 Feb 2020 00:23:39 +0530 Subject: [PATCH 05/18] Fix allignment --- .../components/Authentication/Register.tsx | 6 +-- src/app/styles/Authentication.module.css | 37 +++++++++---------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 0cd207bb..c3080fe6 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -1,5 +1,5 @@ // tslint:disable-next-line:max-line-length -import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; +import { faChevronCircleLeft, faChevronCircleRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { RECAPTCHA_SITE_KEY } from 'app/../config/config'; import { Routes } from 'app/routes'; @@ -474,7 +474,7 @@ export class Register extends React.Component - +
  • - +
diff --git a/src/app/styles/Authentication.module.css b/src/app/styles/Authentication.module.css index 85d5e70d..75bd54df 100755 --- a/src/app/styles/Authentication.module.css +++ b/src/app/styles/Authentication.module.css @@ -142,6 +142,10 @@ margin-top: 3% !important; } +.register-form{ + width:390px !important; +} + .login-error { background-color: #fee5d4; padding: 9px; @@ -150,7 +154,7 @@ .register-error { background-color: #fee5d4; padding: 9px; - margin-top: -10px; + margin-top: -20px; } .register-error-inactive { @@ -204,38 +208,32 @@ margin: 0 !important; height: 50px; width: 100%; + margin-left: 10%; border: 1px solid black; border-radius: 3px !important; - margin-bottom: 10px !important; + margin-bottom: 20px !important; } .left-arrow { position: relative; left: 14%; - top: 4px; border-radius: 50%; - border: 2px solid #4630eb; - width: 30px; - height: 30px; + /* border: 2px solid #4630eb; */ + color:#4630eb; + font-size: 30px; + bottom: 5px; cursor: pointer; } .right-arrow { position: relative; right: 14%; - top: 4px; + bottom: 5px; border-radius: 50%; - border: 2px solid #4630eb; - width: 30px; - height: 30px; + /* border: 2px solid #4630eb; */ + color:#4630eb; + font-size: 30px; cursor: pointer; } -.right-arrow:hover { - background-color: #4630eb; - color: white; -} -.left-arrow:hover { - background-color: #4630eb; - color: white; -} + .register-input:focus, .register-input:active { @@ -268,10 +266,11 @@ .stage-div { margin: auto; - width: 40%; + width: 30%; display: block; } .stage-form { + } .register-input { From f77f60e81c66fff8487ef05d72b31b36d9828762 Mon Sep 17 00:00:00 2001 From: Ram Date: Tue, 11 Feb 2020 20:22:00 +0530 Subject: [PATCH 06/18] Make enums for currentStep in register page --- .../components/Authentication/Register.tsx | 181 ++++++------------ src/app/styles/Authentication.module.css | 28 +-- src/app/types/Authentication/Register.ts | 8 +- 3 files changed, 78 insertions(+), 139 deletions(-) diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index c3080fe6..d10f2f31 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -1,4 +1,3 @@ -// tslint:disable-next-line:max-line-length import { faChevronCircleLeft, faChevronCircleRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { RECAPTCHA_SITE_KEY } from 'app/../config/config'; @@ -31,7 +30,7 @@ export class Register extends React.Component { - const { currentStep } = this.state; - - if (currentStep === 0) { - if (this.register1Ref.current) { - this.register1Ref.current.classList.add('was-validated'); - if (this.register1Ref.current.checkValidity() && !this.props.errorMessage) { - this.setState({ - currentStep: 1, - }); - } - } - } else if (currentStep === 1) { - if (this.register2Ref.current) { - if (this.state.password === this.state.repeatPassword) { - if (this.passwordErrorRef.current) { - this.passwordErrorRef.current.classList.remove( - classnames(styles['register-error-active']), - ); - } - this.register2Ref.current.classList.add('was-validated'); - if (this.register2Ref.current.checkValidity()) { - this.setState({ - currentStep: 2, - }); - } - } else { - if (this.passwordErrorRef.current && this.register2Ref.current.checkValidity()) { - this.passwordErrorRef.current.classList.add( - classnames(styles['register-error-active']), - ); - } - } - } - } - }; - - public handlePrevious = () => { - const { currentStep } = this.state; - if (currentStep === 1) { - if (this.register2Ref.current) { - this.setState({ - currentStep: 0, - }); - } - } else if (currentStep === 2) { - if (this.register3Ref.current) { - this.setState({ - currentStep: 1, - }); - } - } - }; - public render() { const { repeatPassword, @@ -146,17 +91,16 @@ export class Register extends React.Component
-

Register to CodeCharacter!

+

Register to CodeCharacter!

Register now and code your way through!!

- {currentStep === 0 && ( + {currentStep === RegisterInterfaces.Steps.USERDETAILS && (
)} - {currentStep === 1 && ( + {currentStep === RegisterInterfaces.Steps.CREDENTIALS && (
)} - {currentStep === 2 && ( + {currentStep === RegisterInterfaces.Steps.OTHERS && (
-
+
Choose your spirit animal
@@ -439,69 +383,53 @@ export class Register extends React.Component
- {/* - -
- { - this.handelStepChange(this.state.currentStep, index); - }} - styles={{background:'white',foreground: '#7b9d6f'}} - getLabel={(index:number) => { - if(index===0){ - return "Name,Email" - } - else if(index===1){ - return "Password" - } - else { - return "Others" - } - }} - values={[0, 1, 2]} - minEventPadding={120} - linePadding={49} - /> -
- - */} -
- this.handelStepChange(this.state.currentStep, this.state.currentStep - 1) - } + onClick={() => this.handleStepChange(currentStep, currentStep - 1)} >
  • this.handelStepChange(this.state.currentStep, 0)} + className={ + currentStep === RegisterInterfaces.Steps.USERDETAILS + ? classnames(styles['is-active']) + : undefined + } + onClick={() => + this.handleStepChange(currentStep, RegisterInterfaces.Steps.USERDETAILS) + } > {' '}

    User Details

  • this.handelStepChange(this.state.currentStep, 1)} + className={ + currentStep === RegisterInterfaces.Steps.CREDENTIALS + ? classnames(styles['is-active']) + : undefined + } + onClick={() => + this.handleStepChange(currentStep, RegisterInterfaces.Steps.CREDENTIALS) + } >

    Credentials

  • this.handelStepChange(this.state.currentStep, 2)} + className={ + currentStep === RegisterInterfaces.Steps.OTHERS + ? classnames(styles['is-active']) + : undefined + } + onClick={() => this.handleStepChange(currentStep, RegisterInterfaces.Steps.OTHERS)} >

    Other Details

- this.handelStepChange(this.state.currentStep, this.state.currentStep + 1) - } + onClick={() => this.handleStepChange(currentStep, currentStep + 1)} >
@@ -512,10 +440,7 @@ export class Register extends React.Component { updateErrorMessage(''); }} @@ -529,9 +454,9 @@ export class Register extends React.Component { - if (oldStep === 0) { - if (newStep === 1 || newStep === 2) { + private handleStepChange = (oldStep: number, newStep: number) => { + switch (oldStep) { + case RegisterInterfaces.Steps.USERDETAILS: { if (this.register1Ref.current) { this.register1Ref.current.classList.add('was-validated'); if (this.register1Ref.current.checkValidity()) { @@ -540,27 +465,28 @@ export class Register extends React.Component Date: Tue, 11 Feb 2020 22:20:27 +0530 Subject: [PATCH 07/18] Fix allignment length --- src/app/styles/Authentication.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/styles/Authentication.module.css b/src/app/styles/Authentication.module.css index c2d16c6f..66ce3285 100755 --- a/src/app/styles/Authentication.module.css +++ b/src/app/styles/Authentication.module.css @@ -215,7 +215,7 @@ } .left-arrow { position: relative; - left: 23%; + left: 30%; border-radius: 50%; color: #4630eb; font-size: 30px; @@ -224,7 +224,7 @@ } .right-arrow { position: relative; - right: 23%; + right: 30%; bottom: 5px; border-radius: 50%; color: #4630eb; @@ -343,7 +343,7 @@ .multi-steps { display: table; table-layout: fixed; - width: 50%; + width: 34%; margin: auto; cursor: pointer; font-family: 'Poppins'; From c496e2b3e076128d366055b34c4adc1195791f34 Mon Sep 17 00:00:00 2001 From: Ram Date: Tue, 11 Feb 2020 22:40:03 +0530 Subject: [PATCH 08/18] change USERDETAILS to USER_DETAILS --- src/app/components/Authentication/Register.tsx | 14 ++++++-------- src/app/styles/Authentication.module.css | 2 +- src/app/types/Authentication/Register.ts | 2 +- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index d10f2f31..0173cfee 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -30,7 +30,7 @@ export class Register extends React.Component - {currentStep === RegisterInterfaces.Steps.USERDETAILS && ( + {currentStep === RegisterInterfaces.Steps.USER_DETAILS && (
  • - this.handleStepChange(currentStep, RegisterInterfaces.Steps.USERDETAILS) + this.handleStepChange(currentStep, RegisterInterfaces.Steps.USER_DETAILS) } > {' '} @@ -456,7 +456,7 @@ export class Register extends React.Component { switch (oldStep) { - case RegisterInterfaces.Steps.USERDETAILS: { + case RegisterInterfaces.Steps.USER_DETAILS: { if (this.register1Ref.current) { this.register1Ref.current.classList.add('was-validated'); if (this.register1Ref.current.checkValidity()) { @@ -504,8 +504,7 @@ export class Register extends React.Component Date: Tue, 11 Feb 2020 23:00:59 +0530 Subject: [PATCH 09/18] Change register form width --- src/app/components/Authentication/Register.tsx | 1 - src/app/styles/Authentication.module.css | 8 +++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 0173cfee..12cf1c44 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -504,7 +504,6 @@ export class Register extends React.Component