在此先感谢大家提供的所有帮助。希望大家度过愉快的一天，并祝您编程愉快！
//Signup.jsx
import React,{ Component } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
// import Swal from 'sweetalert2'
import { signUpthroughFirebase } from '../../firebase/firebase.utils.js'
import './Signup.scss'
import passwordReveal from '../../assets/eye-solid.svg'
import google from '../../assets/google.svg';
import facebook from '../../assets/facebook.svg';
import { UserContext } from '../../contexts/UserContext.js'
// check to see if email is valid
const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
const validateForm = errors => {
let valid = true;
// check to see if any errors exist,otherwise form is invalid
Object.values(errors).forEach(error => {
error.length > 0 && (valid = false)
});
return valid;
}
export default class Signup extends Component {
state = {
credentials: {
id: '',email: '',password: '',passwordCheck: '',tosCheck: false
},errors: {
email: '',tosCheck: ''
},passwordReveal: false,passwordConfirmReveal: false
}
toggleReveal = (e,which) => {
if(which) this.setState({...this.state,passwordConfirmReveal: !this.state.passwordConfirmReveal});
else this.setState({ ...this.state,passwordReveal: !this.state.passwordReveal});
}
handleChange = e => {
let { name,value,checked } = e.target;
let errors = this.state.errors;
// handle input validation here
switch(name) {
case 'email' :
if (!value.length) errors.email = 'email is a required field';
else if (validEmailRegex.test(value) === false) errors.email = 'email must be a valid email';
else errors.email = '';
break;
case 'password' :
if (!value.length) errors.password = 'password is a required field';
else if (value.length < 8) errors.password = 'password must be at least 8 characters';
else errors.password = '';
break;
case 'passwordCheck' :
if (this.state.credentials.password !== value) errors.passwordCheck = 'passwords do not match';
else errors.passwordCheck = '';
break;
case 'tosCheck' :
if (!checked) {
value = false;
errors.tosCheck = 'terms and conditions must be accepted to continue';
} else {
value = true;
errors.tosCheck = '';
};
break;
default :
break;
}
this.setState({
errors,credentials: {
...this.state.credentials,[name]: value
}
})
// console.log(this.state.credentials)
}
onSubmit = e => {
e.preventDefault()
const { email,password,passwordCheck,tosCheck } = this.state.credentials
const user = { email: this.state.credentials.email,password: this.state.credentials.password }
//if no error exists,make the request to the backend
if (email && password && passwordCheck && tosCheck && validateForm(this.state.errors)) {
axios
.post('https://infinite-meadow-87721.herokuapp.com/auth/register',user)
.then(res => {
this.setState({
...this.state,credentials: {
...this.state.credentials,id: res.data._id
}
})
this.props.history.push('/account')
})
.catch(err => console.log(err))
} else {
console.log('x')
}
}
render() {
return (
<UserContext.Consumer>
{props => {
if(this.state.credentials.id !== '') {
props.setLoggedInUser(this.state.credentials);
}
// console.log(props);
return (
<div classname='sign-up-page-container'>
<h1 classname='sign-up-header'>SIGN UP</h1>
<div classname='sign-up-forms'>
<form onSubmit={this.onSubmit} classname='sign-up-email' noValidate>
<label classname='form-input-label'>
EMAIL
<input
type='email'
name='email'
// placeholder='E-mail'
value={this.state.credentials.email}
onChange={this.handleChange}
classname='form-input'
required
/>
</label>
<p classname='form-input-error'>{this.state.errors.email}</p>
<label classname='form-input-label'>
PASSWORD
<div classname='password-container'>
<input
type={this.state.passwordReveal ? 'text' : 'password'}
name='password'
// placeholder='Password'
value={this.state.credentials.password}
onChange={this.handleChange}
required
classname='form-input'
/>
<img classname='password-toggle' src={passwordReveal} alt='toggle password' onClick={(e) => this.toggleReveal(e,0)} />
</div>
</label>
<p classname='form-input-error'>{this.state.errors.password}</p>
<label classname='form-input-label'>
CONFIRM PASSWORD
<div classname='password-container'>
<input
type={this.state.passwordConfirmReveal ? 'text' : 'password'}
name='passwordCheck'
// placeholder='Retype password'
value={this.state.credentials.passwordCheck}
onChange={this.handleChange}
required
classname='form-input'
/>
<img classname='password-toggle' src={passwordReveal} alt='toggle password' onClick={(e) => this.toggleReveal(e,1)} />
</div>
</label>
<p classname='form-input-error'>{this.state.errors.passwordCheck}</p>
<div classname='tos'>
<input type='checkbox' name='tosCheck' id='tosCheck' value={this.state.credentials.tosCheck} onChange={this.handleChange}/>
<label for='tosCheck' classname='tos-text'>I agree to the <a href='google.com' classname='tos-text-link'>Terms and Conditions</a></label>
</div>
<p classname='form-input-error'>{this.state.errors.tosCheck}</p>
<button
classname='sign-up-button'
type='submit'
name='signup_submit'
>
SIGN UP
</button>
<div classname='sign-up-automatic mobile'>
<div classname='firebase-buttons mobile'>
<button onClick={() => signUpthroughFirebase('google',this.props.history)} classname='social-sign-in google'>
<img classname='button-img' src={google} alt='sign up with google' /> SIGN IN WITH GOOGLE
</button>
<button onClick={() => signUpthroughFirebase('facebook',this.props.history)} classname='social-sign-in facebook'>
<img classname='button-img' src={facebook} alt='sign up with facebook' /> SIGN IN WITH FACEBOOK
</button>
</div>
</div>
<Link to='/Signin' classname='sign-in-redirect'>I already have an account</Link>
</form>
<h2 classname='sign-up-or'>OR</h2>
<div classname='sign-up-automatic'>
<div classname='firebase-buttons'>
<button onClick={() => signUpthroughFirebase('google',this.props.history)} classname='social-sign-in google'>
<img classname='button-img' src={google} alt='sign up with google' /> SIGN IN WITH GOOGLE
</button>
<button onClick={() => signUpthroughFirebase('facebook',this.props.history)} classname='social-sign-in facebook'>
<img classname='button-img' src={facebook} alt='sign up with facebook' /> SIGN IN WITH FACEBOOK
</button>
</div>
</div>
</div>
</div>
)
}}
</UserContext.Consumer>
)
}
}