Last active
January 31, 2018 16:25
-
-
Save kwekuboateng/2548ba4bbaa1ab16279eebdfddfd2612 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
// import '../Shared/css/separate/pages/login.css'; | |
import {NavLink} from 'react-router-dom'; | |
import PropTypes from 'prop-types'; | |
import Logo from '../Plugins/images/aidahbot-logo-web-blue-bigdots.png'; | |
import Phone from 'react-intl-tel-input'; | |
import '../../../node_modules/react-intl-tel-input/dist/main.css'; | |
import '../../../node_modules/react-intl-tel-input/dist/libphonenumber.js'; | |
// import '../../../node_modules/react-intl-tel-input/dist/main.js'; | |
var field = document.querySelector(".store_name"); | |
console.log(field, 'this is field') | |
field.addEventListener('onKeyUp', function ( event ) { | |
var key = event.keyCode; | |
if (key === 32) { | |
event.preventDefault(); | |
} | |
}); | |
function trim(str) { | |
return str.replace(/^\s+|\s+$/g,""); | |
} | |
class SignUp extends Component{ | |
constructor(props) { | |
super(props) | |
this.state = { | |
first_name: '', | |
last_name: '', | |
store_name: '', | |
email: '', | |
phone_number: '', | |
password: '', | |
error: {}, | |
} | |
this.onChange = this.onChange.bind(this); | |
this.onSubmit = this.onSubmit.bind(this); | |
} | |
onChange(e){ | |
this.setState( | |
{[e.target.name]: e.target.value} | |
); | |
} | |
onSubmit(e){ | |
e.preventDefault(); | |
// console.log("this.state====", this.state); | |
this.props.userSignUpRequest(this.state). | |
then(response => { | |
if (!response.success) { | |
this.setState({error: response.error.errors}); | |
return false; | |
} | |
// Handle successful registration/signup | |
alert("You've signed up successfully"); | |
window.location.href = '/login'; | |
}). | |
catch(error => { | |
// | |
}); | |
} | |
render(){ | |
const {error} = this.state; | |
return( | |
<form onSubmit={this.onSubmit} className="form-horizontal form-material" id="loginform"> | |
<a | |
className="text-center db" href="https://aidahbot.com" target="_blank"> <img style={{width:'180px', display: 'block', | |
marginRight: 'auto', marginLeft: 'auto'}} src={Logo} alt="Home" /> | |
</a> | |
<h3 className="box-title m-t-40 m-b-0">Setup your account</h3><small>No credit card required</small> | |
<br/><br/> | |
<div className="row"> | |
<div className="col-6"> | |
<div className="form-group"> | |
<input | |
name="first_name" | |
required | |
onChange={this.onChange} | |
value={this.state.first_name} | |
type="text" className="form-control" placeholder="First Name" /> | |
{error.first_name && <span className="form-text text-muted">{error.first_name.message}</span>} | |
</div> | |
</div> | |
<div className="col-6"> | |
<div className="form-group"> | |
<input | |
name="last_name" | |
required | |
onChange={this.onChange} | |
value={this.state.last_name} | |
type="text" className="form-control" placeholder="Last Name" /> | |
{error.last_name && <span className="form-text text-muted">{error.last_name.message}</span>} | |
</div> | |
</div> | |
</div> | |
<div className="row"> | |
<div className="col-6"> | |
<div className="form-group"> | |
<input | |
className="store_name form-control" | |
name="store_name" | |
required | |
onChange={this.onChange} | |
value={this.state.store_name.toLowerCase()} | |
type="text" placeholder="storename" /> | |
{error.store_name && <span className="form-text text-muted">{error.store_name.message}</span>} | |
</div> | |
</div> | |
<div className="col-6"> | |
<div className="form-group"> | |
<input | |
name="email" | |
required | |
onChange={this.onChange} | |
value={this.state.email} | |
type="email" className="form-control" placeholder="E-Mail" /> | |
{error.email && <span className="form-text error-color">{error.email.message}</span>} | |
</div> | |
</div> | |
</div> | |
<div className="row"> | |
<div className="col-6"> | |
<div className="form-group"> | |
<Phone | |
name="phone_number" | |
country={ 'GH' } | |
css={['intl-tel-input', 'form-control']} | |
// utilsScript={ '../../../node_modules/react-intl-tel-input/dist/libphonenumber.js' } | |
onChange={this.onChange} | |
value={this.state.phone_number} | |
type="number" className="form-control" placeholder="phone number" | |
/> | |
{error.phone_number && <span className="form-text error-color">{error.phone_number.message}</span>} | |
</div> | |
</div> | |
<div className="col-6"> | |
<div className="form-group"> | |
<input | |
name="password" | |
required | |
onChange={this.onChange} | |
value={this.state.password} | |
type="password" className="form-control" placeholder="Password" /> | |
{error.password && <span className="help-block">{error.password}</span>} | |
</div> | |
</div> | |
</div> | |
<div className="form-group text-center m-t-20"> | |
<div className="col-xs-12"> | |
<button className="btn btn-color btn-lg btn-block | |
text-uppercase waves-effect waves-light" type="submit">Sign Up</button> | |
</div> | |
</div> | |
<p className="sign-note">Already have an account? <NavLink to="/login">Sign in</NavLink></p> | |
</form> | |
) | |
} | |
} | |
SignUp.propTypes = { | |
userSignUpRequest: PropTypes.func.isRequired, | |
}; | |
export default SignUp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
handleKeyUp = event => {
var key = event.keyCode;
if (key === 32) {
event.preventDefault();
}
}