Skip to content

Commit

Permalink
css and bootstrap update
Browse files Browse the repository at this point in the history
  • Loading branch information
@bm181354
bm181354 committed Aug 24, 2018
1 parent 77646fc commit 30d7acc
Show file tree
Hide file tree
Showing 12 changed files with 12,631 additions and 409 deletions.
12,277 changes: 12,277 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^1.5.1",
"@material-ui/icons": "^2.0.3",
"autoprefixer": "7.1.6",
"axios": "^0.18.0",
"babel-core": "6.26.0",
Expand Down Expand Up @@ -37,6 +39,7 @@
"query-string": "^6.1.0",
"raf": "3.4.0",
"react": "^16.4.2",
"react-bootstrap": "^0.32.3",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.4.2",
"react-facebook-login": "^4.0.1",
Expand Down
123 changes: 58 additions & 65 deletions src/components/AuthForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import "../style/auth.css"




const styles = theme => ({
container: {
display: 'flex',
Expand All @@ -34,10 +33,10 @@ class AuthForm extends Component{

this.onLoadRecaptcha = this.onLoadRecaptcha.bind(this);
this.verifyCallback = this.verifyCallback.bind(this);




// this.state = {
// secret: "asdf",
// username:"",
Expand All @@ -46,7 +45,7 @@ class AuthForm extends Component{
// userType: "custom",
// isvalid : false,
// email:""



// }//add few things later
Expand All @@ -62,27 +61,27 @@ class AuthForm extends Component{
}



}

componentDidMount(){

if (this.captchaDemo) {
console.log("started, just a second...")
this.captchaDemo.reset();

}
}

onLoadRecaptcha() {
if (this.captchaDemo) {
console.log("loaded")
this.captchaDemo.reset();

}
}
verifyCallback(recaptchaToken) {
// Here you will get the final recaptchaToken!!!
// Here you will get the final recaptchaToken!!!
// console.log(recaptchaToken, "<= your recaptcha token")
if(recaptchaToken){
this.setState({
Expand All @@ -91,9 +90,9 @@ class AuthForm extends Component{
}
}







handleChange = e => {
this.setState({
Expand All @@ -106,7 +105,7 @@ class AuthForm extends Component{
// submitting the form
e.preventDefault();
const authType = this.props.signUp ? "user" : "login" ;
const validator = this.props.signUp ? this.state.email.isValid : this.state.email.isValid && this.state.password.isValid
const validator = this.props.signUp ? this.state.email.isValid : this.state.email.isValid && this.state.password.isValid
const data = this.props.signUp?{email:this.state.email.value,type:"userType"}:{email:this.state.email.value,password:this.state.password.value}
if(validator){
this.props.onAuth(authType, data)
Expand All @@ -121,79 +120,79 @@ class AuthForm extends Component{
return
})
} else{

this.setState({secret:"asf"})
}

}

handleBlur = e => {

this.setState({
[e.target.name] :{
value: e.target.value,
isValid: validate(e.target.value,e.target.name)
}
})



}



render(){






// const {email, username, password} = this.state
const { signUp, history,removeError, addError} = this.props


history.listen(()=>{
removeError()
})

})


return(
<div className="formbackground">
<div className="authCard">




<form onSubmit={this.handleSubmit} noValidate autoComplete="off" >
{!signUp && (
<div>


{!signUp && (
<div>
<div className="firstTextFieldAuthForm">

<TextField className="textField"

id="username"
label="Email"
onChange={this.handleChange}
onChange={this.handleChange}
onBlur = {this.handleBlur}
name="email"
error = {this.state.email.isValid?false:true}
helperText={this.state.email.isValid?"":"Invalid email"}
type= "email"
margin="normal"

/>

</div>
<br/>

<div className="secondTextFieldAuthForm">
<div className="secondTextFieldAuthForm">
<TextField className="textField"

id="password-input"
label="Password"
onChange={this.handleChange}
onChange={this.handleChange}
onBlur = {this.handleBlur}
name="password"
type="password"
Expand All @@ -203,57 +202,57 @@ class AuthForm extends Component{
margin="normal"
/>


</div>


</div>


<div>
<button type="button"
onClick ={this.handeleSubmit}
onClick ={this.handeleSubmit}
className="loginButton">
{this.props.buttonText}
</button>
<Link className="linktoSignUp" to="/signup">Sign Up</Link>
<Link className="linktoSignUp" to="/signup">Sign Up</Link>




<div className="facebookButton">

<Facebook addError={addError} {...this.props}/> {//facebookClick = {this.facebookClick}/>
}
</div>



<br/>
</div>
</div>
)}
</div>
)}


{signUp && (
<div>
<h5 className="emailLabel">We will send you verification email on this email.</h5>

<br/>
<div className="fourthTextFieldAuthForm">
<div className="fourthTextFieldAuthForm">
<TextField className="textField"

id="email"
label="Email"
onChange={this.handleChange}
onChange={this.handleChange}
onBlur = {this.handleBlur}
name="email"
type="email"
error = {this.state.email.isValid?false:true}
helperText={this.state.email.isValid?"":"Invalid email"}
margin="normal"
/>
</div>
</div>
<br/>
<div className = "captcha">
<ReCaptcha

ref={(el) => {this.captchaDemo = el;}}
size="normal"
render="explicit"
Expand All @@ -262,33 +261,27 @@ class AuthForm extends Component{
verifyCallback={this.verifyCallback}
/>
</div>


<br/>

<button
<button
disabled = {!this.state.isvalid}
type="button"
className="signupButton"
onClick = {this.handeleSubmit}>
{this.props.buttonText}
</button>

</div>
</div>
)}



</form>





</form>




</div>
</div>
)
Expand All @@ -302,4 +295,4 @@ class AuthForm extends Component{



export default withStyles(styles)(AuthForm);
export default withStyles(styles)(AuthForm);
Loading

0 comments on commit 30d7acc

Please sign in to comment.