diff --git a/src/app/components/Authentication/Login.tsx b/src/app/components/Authentication/Login.tsx index 82186b5a..3c227312 100644 --- a/src/app/components/Authentication/Login.tsx +++ b/src/app/components/Authentication/Login.tsx @@ -132,7 +132,7 @@ export class Login extends React.Component
-
{errorMessage}
+
{errorMessage}
diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 890c01a2..5321c5e1 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -1,4 +1,4 @@ -import { faEnvelope, faFlag, faLock, faUser, faUserTie } 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'; @@ -17,7 +17,11 @@ 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(); + private passwordErrorRef = React.createRef(); constructor(props: RegisterInterfaces.Props) { super(props); @@ -26,6 +30,7 @@ export class Register extends React.Component +
+
+

Register to CodeCharacter!

+

Register now and code your way through!!

+
-
-
-
-
-
- - - -
- { - checkUsernameExists(e.target.value); - this.setState({ - username: e.target.value, - }); - }} - required - /> -
Username must have minimum 5 characters.
-
-
-
-
-
-
-
- - - -
- - this.setState({ - email: e.target.value, - }) - } - required - /> -
Please enter a valid Email ID.
-
-
-
-
-
-
-
- - - -
- - this.setState({ - password: e.target.value, - }) - } - required - /> -
- Password should have minimum 5 characters. -
-
-
-
-
- Are you a student ?{' '} - - - this.setState({ - isStudent: !isStudent, - type: - type === RegisterInterfaces.RegisterType.Student - ? RegisterInterfaces.RegisterType.Professional - : RegisterInterfaces.RegisterType.Student, - }) - } - /> - - -
- {isStudent ? ( -
-
-
+ {currentStep === RegisterInterfaces.Steps.USER_DETAILS && ( +
+ +
+
Full Name
-
- - - + + this.setState({ + fullName: e.target.value, + }) + } + required + /> +
+ Name must have minimum 5 characters.
+
+
Username
+
{ checkUsernameExists(e.target.value); this.setState({ - collegeName: e.target.value, + 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. +
+
+ +
+ {errorMessage} +
-
-
- ) : null} -
-
-
-
+ +
+ )} + {currentStep === RegisterInterfaces.Steps.CREDENTIALS && ( +
+
+
Password
-
- - - -
this.setState({ - fullName: e.target.value, + password: e.target.value, }) } required /> -
Name must have minimum 5 characters.
-
-
-
-
-
-
-
- - - +
+ Password should have minimum 5 characters.
- -
Please select a country.
-
-
-
-
+
Confirm Password
-
- - - -
this.setState({ @@ -305,93 +231,216 @@ export class Register extends React.Component -
Passwords should match.
-
+ +
+
+ Password and confirm passwords have different values +
+
+
-
-
Choose your spirit animal
-
-
- {avatars.map((avatar: string, index: number) => ( -
{ + )} + {currentStep === RegisterInterfaces.Steps.OTHERS && ( +
+
+
+ Are you a student ?{' '} + + this.setState({ - avatar, - }); - }} - title={avatar} - > - { - // @ts-ignore - + isStudent: !isStudent, + type: + type === RegisterInterfaces.RegisterType.Student + ? RegisterInterfaces.RegisterType.Professional + : RegisterInterfaces.RegisterType.Student, + }) } + /> + + +
+ {isStudent && ( +
+
College Name
+
+ + this.setState({ + collegeName: e.target.value, + }) + } + required + /> +
+ College Name should have minimum 5 characters. +
- ))} -
-
-
-
-
-
-
- +
+ )} +
+ + + +
+ Please Select a country +
+
+
+
Choose your spirit animal
+
+
+ {avatars.map((avatar: string, index: number) => ( +
{ + this.setState({ + avatar, + }); + }} + title={avatar} + > + { + // @ts-ignore + + } +
+ ))} +
+
+
+
+ +
+ Please fill recaptcha. +
+
- Please fill recaptcha. + {errorMessage}
-
-
-
-
-
{errorMessage}
-
-
-
- -
+
+ +
+
-
+ )}
- - + +
{ if(currentStep!==RegisterInterfaces.Steps.USER_DETAILS) this.handleStepChange(currentStep, currentStep - 1) }} + > + +
+
    +
  • + this.handleStepChange(currentStep, RegisterInterfaces.Steps.USER_DETAILS) + } + > + {' '} +

    User Details

    +
    • +
  • + this.handleStepChange(currentStep, RegisterInterfaces.Steps.CREDENTIALS) + } + > +

    Credentials

    +
    • +
  • this.handleStepChange(currentStep, RegisterInterfaces.Steps.OTHERS)} + > +

    Other Details

    +
    • +
+
{ if(currentStep!==RegisterInterfaces.Steps.OTHERS) this.handleStepChange(currentStep, currentStep + 1) } } + > + +
+ +
Already have an account?{' '} { updateErrorMessage(''); }} @@ -405,13 +454,66 @@ export class Register extends React.Component { + switch (oldStep) { + case RegisterInterfaces.Steps.USER_DETAILS: { + if (this.register1Ref.current) { + this.register1Ref.current.classList.add('was-validated'); + if (this.register1Ref.current.checkValidity()) { + this.setState({ + currentStep: RegisterInterfaces.Steps.CREDENTIALS, + }); + } + } + break; + } + case RegisterInterfaces.Steps.CREDENTIALS: { + if (newStep === RegisterInterfaces.Steps.USER_DETAILS) { + this.setState({ + currentStep: RegisterInterfaces.Steps.USER_DETAILS, + }); + } else if (newStep === RegisterInterfaces.Steps.OTHERS) { + if (this.state.password === this.state.repeatPassword) { + if (this.passwordErrorRef.current) { + this.passwordErrorRef.current.classList.remove( + classnames(styles['register-error-active']), + ); + } + + if (this.register2Ref.current) { + this.register2Ref.current.classList.add('was-validated'); + if (this.register2Ref.current.checkValidity()) { + this.setState({ + currentStep: RegisterInterfaces.Steps.OTHERS, + }); + } + } + } else { + if (this.passwordErrorRef.current) { + this.passwordErrorRef.current.classList.add( + classnames(styles['register-error-active']), + ); + } + } + } + break; + } + case RegisterInterfaces.Steps.OTHERS: { + this.setState({ + currentStep: newStep, + }); + break; + } + } + }; + private onSelectFlag = (countryCode: string) => { this.setState({ country: countryCode, }); }; - private handleRegister = async (event: React.FormEvent) => { + private handleRegister = async (event: React.MouseEvent) => { const { register } = this.props; const { avatar, @@ -427,9 +529,11 @@ export class Register extends React.Component