Merge pull request #313 from akumar1503/fix-2857-connect-app

Fix for issue# 2857 on connect-app

Author: RishiRajSahu

components/Formsy/PhoneInput.jsx

@@ -15,10 +15,10 @@ class PhoneInput extends Component {
 
   constructor(props) {
     super(props)
-    
+
     this.changeValue = this.changeValue.bind(this)
     this.choseCountry = this.choseCountry.bind(this)
-    this.isValidInput= this.isValidInput.bind(this)
+    this.isValidInput = this.isValidInput.bind(this)
     this.state = {
       currentCountry: {},
       asYouType: {}
@@ -36,11 +36,11 @@ class PhoneInput extends Component {
     this.props.setValue(value)
     let currentCountry
     const asYouType = new AsYouType()
-    asYouType.input(value)
+    asYouType.input(value[0] === '+' ? value : '+' + value)
     if (asYouType.country) {
-      currentCountry = _.filter(this.props.listCountry, {alpha2: asYouType.country})[0]
+      currentCountry = _.filter(this.props.listCountry, { alpha2: asYouType.country })[0]
       if (currentCountry) {
-        this.setState({asYouType, currentCountry})
+        this.setState({ asYouType, currentCountry })
       }
     }
 
@@ -54,15 +54,15 @@ class PhoneInput extends Component {
   choseCountry(country) {
     if (country.code !== this.state.currentCountry.code) {
       const asYouTypeTmp = new AsYouType(country.alpha2)
-      const {asYouType} = this.state
+      const { asYouType } = this.state
       let phoneNumber = ''
       if (asYouType && asYouType.getNationalNumber) {
         phoneNumber = ` ${asYouType.getNationalNumber()}`
       }
 
       if (asYouTypeTmp.countryCallingCode) {
-        this.setState({currentCountry: country})
-        this.changeValue({target: { value: `+${asYouTypeTmp.countryCallingCode}${phoneNumber}` }})
+        this.setState({ currentCountry: country })
+        this.changeValue({ target: { value: `+${asYouTypeTmp.countryCallingCode}${phoneNumber}` } })
       }
     }
   }
@@ -76,7 +76,7 @@ class PhoneInput extends Component {
       [styles['readonly-wrapper']]: readonly,
       'phone-input-container': true
     })
-    const classes = classNames('tc-file-field__inputs', {error: hasError}, {empty: this.props.getValue() === ''})
+    const classes = classNames('tc-file-field__inputs', { error: hasError }, { empty: this.props.getValue() === '' })
     const errorMessage = this.props.getErrorMessage() || this.props.validationError
 
     return (
@@ -99,20 +99,20 @@ class PhoneInput extends Component {
             max={maxValue}
           />
           <Dropdown handleKeyboardNavigation pointerShadow>
-              <div className="dropdown-menu-header flex center middle">{this.state.currentCountry ? this.state.currentCountry.alpha3 : ''}
+            <div className="dropdown-menu-header flex center middle">{this.state.currentCountry ? this.state.currentCountry.alpha3 : ''}
               <IconDown width={20} height={12} fill="#fff" wrapperClass="arrow" /></div>
-              <ul className="dropdown-menu-list">
-                {
-                  this.props.listCountry.map((country, i) => {
-                    /* eslint-disable react/jsx-no-bind */
-                    return <li tabIndex="-1" className={(this.state.currentCountry.code === country.code) ? 'selected' : ''} onClick={() => this.choseCountry(country)} key={i}><a href="javascript:;">{country.name}</a></li>
-                  })
-                }
-              </ul>
-            </Dropdown>
+            <ul className="dropdown-menu-list">
+              {
+                this.props.listCountry.map((country, i) => {
+                  /* eslint-disable react/jsx-no-bind */
+                  return <li tabIndex="-1" className={(this.state.currentCountry.code === country.code) ? 'selected' : ''} onClick={() => this.choseCountry(country)} key={i}><a href="javascript:;">{country.name}</a></li>
+                })
+              }
+            </ul>
+          </Dropdown>
         </div>
         {this.isValidInput() && showCheckMark && (
-          <IconUICheckSimple wrapperClass="check-success-icon" width={10} height={10} fill="#5CC900"/>
+          <IconUICheckSimple wrapperClass="check-success-icon" width={10} height={10} fill="#5CC900" />
         )}
         {readonly && (
           <div styleName="readonly-value">
@@ -121,14 +121,14 @@ class PhoneInput extends Component {
           </div>
         )}
 
-        { hasError ? (<p className="error-message">{errorMessage}</p>) : (this.props.forceErrorMessage && (<p className="error-message">{this.props.forceErrorMessage}</p>))}
+        {hasError ? (<p className="error-message">{errorMessage}</p>) : (this.props.forceErrorMessage && (<p className="error-message">{this.props.forceErrorMessage}</p>))}
       </div>
     )
   }
 }
 
 PhoneInput.defaultProps = {
-  onChange: () => {},
+  onChange: () => { },
   forceErrorMessage: null,
   listCountry: [],
   showCheckMark: false

components/RegistrationScreen/index.jsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import Formsy from 'formsy-react'
 import TextInput from '../Formsy/TextInput'
 import PhoneInput from '../Formsy/PhoneInput'
@@ -52,18 +52,18 @@ class RegistrationScreen extends Component {
   }
 
   reRender() {
-    this.setState({update: true})
+    this.setState({ update: true })
   }
 
-  onChangeCountry({country}) {
-    const {vm} = this.props
+  onChangeCountry({ country }) {
+    const { vm } = this.props
 
     if (!country || !country.code) {
       vm.phoneErrorMessage = 'Please enter a valid phone number.'
       this.reRender()
     } else {
       vm.phoneErrorMessage = null
-      this.setState({update: true, country})
+      this.setState({ update: true, country })
     }
   }
 
@@ -80,14 +80,14 @@ class RegistrationScreen extends Component {
   }
 
   isValidForm() {
-    const {vm} = this.props
-    const {canSubmit} = this.state
+    const { vm } = this.props
+    const { canSubmit } = this.state
     return !vm.loading && canSubmit && !vm.usernameErrorMessage && !vm.emailErrorMessage && !vm.phoneErrorMessage && this.state.country
   }
 
   submit(form) {
-    const {vm} = this.props
-    const {country} = this.state
+    const { vm } = this.props
+    const { country } = this.state
     const fullName = form.name
     vm.phone = form.phone
     vm.title = form.title
@@ -99,13 +99,13 @@ class RegistrationScreen extends Component {
     vm.country = country
     vm.firstName = fullName.trim().split(' ').slice(0, -1).join(' ')
     vm.lastName = fullName.trim().split(' ').slice(-1).join(' ')
-    
+
     vm.submit()
 
   }
 
   render() {
-    const {vm} = this.props
+    const { vm } = this.props
     let preFillName = vm.firstName ? vm.firstName : null
     preFillName = vm.lastName ? `${preFillName} ${vm.lastName}` : preFillName
     const preFillEmail = vm.email ? vm.email : null
@@ -114,7 +114,7 @@ class RegistrationScreen extends Component {
         <div className="container flex column middle center">
           <div className="title">Let's start with introductions</div>
           <div className="sub-title">First we need to know you a bit better</div>
-            {vm.errorMessage && (<div className="server-error-message">{vm.errorMessage}</div>)}
+          {vm.errorMessage && (<div className="server-error-message">{vm.errorMessage}</div>)}
           <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton} className="form flex column middle center">
             <TextInput
               wrapperClass={'input-container'}
@@ -203,7 +203,7 @@ class RegistrationScreen extends Component {
               validator={vm.usernameIsFree}
               showCheckMark
             />
-            { !vm.ssoUser && <PasswordInput
+            {!vm.ssoUser && <PasswordInput
               wrapperClass={'input-container'}
               label="Create a password (8–64 characters, A–Z, 0–9, . _ - ! ? allowed)"
               name="password"
@@ -227,10 +227,9 @@ class RegistrationScreen extends Component {
               wrapperClass={'input-container'}
               label="I agree to receive other communications from Topcoder."
               name="agreeTerm"
-              required
             />
             <div className="space" />
-            <button type="submit" className="tc-btn tc-btn-sm tc-btn-primary flex middle center"  disabled={vm.loading || !this.state.canSubmit || !this.state.country}>Continue</button>
+            <button type="submit" className="tc-btn tc-btn-sm tc-btn-primary flex middle center" disabled={vm.loading || !this.state.canSubmit || !this.state.country}>Continue</button>
             <div className="by-clicking-continue">By clicking “Continue” you agree to our <a href={vm.termsUrl}>Terms</a> and <a href={vm.privacyUrl}>Privacy Policy</a>.
   We are never going to sell your data or send you spam messages. Your email is going to be used for communication purposes only.</div>
           </Formsy.Form>

components/Wizard/WizardRight/style.scss

@@ -11,7 +11,7 @@
       box-shadow: inset 0 80px 50px -40px rgba(0,0,0,0.8);
       position: absolute;
       width: 100%;
-      height: 100%;
+      height: 100px;
       top: 0;
       left: 0;
       z-index: 1;