You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.9 KiB
115 lines
2.9 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Link, Redirect } from "react-router-dom"; |
|
import { Button, Container, Form, Header, Message } from "semantic-ui-react"; |
|
|
|
import { |
|
clearAuthRequestError, |
|
clearAuthRequestSuccess, |
|
setFormEmail, |
|
setFormPassword |
|
} from "../../actions/auth/reducer.actions"; |
|
import { sendLoginRequest } from "../../actions/auth/saga.actions"; |
|
import Error from "../Shared/Error"; |
|
|
|
class Login extends Component { |
|
componentWillMount() { |
|
this.props.dispatch(clearAuthRequestError()); |
|
this.props.dispatch(clearAuthRequestSuccess()); |
|
} |
|
|
|
changeEmail = event => { |
|
this.props.dispatch(setFormEmail(event.target.value)); |
|
}; |
|
|
|
changePassword = event => { |
|
this.props.dispatch(setFormPassword(event.target.value)); |
|
}; |
|
|
|
onSubmitLogin = event => { |
|
event.preventDefault(); |
|
const { dispatch, email, password } = this.props; |
|
dispatch(sendLoginRequest({ email, password })); |
|
}; |
|
|
|
render() { |
|
const { |
|
isSendingAuthRequest, |
|
authRequestError, |
|
authRequestSuccess, |
|
email, |
|
password, |
|
userToken |
|
} = this.props; |
|
if (userToken) return <Redirect to={"/user/profile"} />; |
|
return ( |
|
<LoginView |
|
isSendingAuthRequest={isSendingAuthRequest} |
|
authRequestError={authRequestError} |
|
authRequestSuccess={authRequestSuccess} |
|
email={email} |
|
password={password} |
|
changeEmail={this.changeEmail} |
|
changePassword={this.changePassword} |
|
onSubmitLogin={this.onSubmitLogin} |
|
/> |
|
); |
|
} |
|
} |
|
|
|
function mapStateToProps(state) { |
|
return { ...state.auth }; |
|
} |
|
|
|
const LoginView = ({ |
|
isSendingAuthRequest, |
|
authRequestError, |
|
authRequestSuccess, |
|
email, |
|
password, |
|
changeEmail, |
|
changePassword, |
|
onSubmitLogin |
|
}) => ( |
|
<Container> |
|
<Header>Login</Header> |
|
<Form |
|
loading={isSendingAuthRequest} |
|
onSubmit={onSubmitLogin} |
|
error={!!authRequestError} |
|
success={!!authRequestSuccess} |
|
> |
|
<Form.Field> |
|
<label>Email</label> |
|
<input |
|
placeholder="bob@gmail.com" |
|
type="email" |
|
value={email} |
|
onChange={changeEmail} |
|
/> |
|
</Form.Field> |
|
<Form.Field> |
|
<label>Password</label> |
|
<input |
|
placeholder="••••••••" |
|
type="password" |
|
value={password} |
|
onChange={changePassword} |
|
/> |
|
</Form.Field> |
|
<Error header="Login failed!" error={authRequestError} /> |
|
<Message success> |
|
<Message.Header>Login successful!</Message.Header> |
|
<p>Redirecting you now...</p> |
|
</Message> |
|
<Button.Group> |
|
<Button type="submit" primary>Login</Button> |
|
<Button as={Link} to="/auth/forgot-password" secondary> |
|
Forgot Password |
|
</Button> |
|
</Button.Group> |
|
</Form> |
|
</Container> |
|
); |
|
|
|
export default connect(mapStateToProps)(Login);
|
|
|