141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
import React, { Component } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Container, Form, Header, Message, Segment } from "semantic-ui-react";
|
|
|
|
import {
|
|
clearAuthRequestError,
|
|
clearAuthRequestSuccess,
|
|
setFormPassword,
|
|
setFormPasswordConfirmation,
|
|
setFormOldPassword
|
|
} from "../../actions/auth/reducer.actions";
|
|
import { sendChangePasswordRequest } from "../../actions/auth/saga.actions";
|
|
import Error from "../Shared/Error";
|
|
|
|
class Settings extends Component {
|
|
componentWillMount() {
|
|
this.props.dispatch(clearAuthRequestError());
|
|
this.props.dispatch(clearAuthRequestSuccess());
|
|
}
|
|
|
|
changePassword = event => {
|
|
this.props.dispatch(setFormPassword(event.target.value));
|
|
};
|
|
|
|
changePasswordConfirmation = event => {
|
|
this.props.dispatch(setFormPasswordConfirmation(event.target.value));
|
|
};
|
|
|
|
changeOldPassword = event => {
|
|
this.props.dispatch(setFormOldPassword(event.target.value));
|
|
};
|
|
|
|
onSubmitChangePassword = event => {
|
|
event.preventDefault();
|
|
const {
|
|
dispatch,
|
|
password,
|
|
passwordConfirmation,
|
|
oldPassword
|
|
} = this.props;
|
|
dispatch(
|
|
sendChangePasswordRequest({
|
|
new_password1: password,
|
|
new_password2: passwordConfirmation,
|
|
old_password: oldPassword
|
|
})
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
isSendingAuthRequest,
|
|
authRequestError,
|
|
authRequestSuccess,
|
|
password,
|
|
passwordConfirmation,
|
|
oldPassword
|
|
} = this.props;
|
|
return (
|
|
<SettingsView
|
|
isSendingAuthRequest={isSendingAuthRequest}
|
|
authRequestError={authRequestError}
|
|
authRequestSuccess={authRequestSuccess}
|
|
password={password}
|
|
passwordConfirmation={passwordConfirmation}
|
|
oldPassword={oldPassword}
|
|
changePassword={this.changePassword}
|
|
changePasswordConfirmation={this.changePasswordConfirmation}
|
|
changeOldPassword={this.changeOldPassword}
|
|
onSubmitChangePassword={this.onSubmitChangePassword}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return { ...state.auth };
|
|
}
|
|
|
|
const SettingsView = ({
|
|
isSendingAuthRequest,
|
|
authRequestError,
|
|
authRequestSuccess,
|
|
password,
|
|
passwordConfirmation,
|
|
oldPassword,
|
|
changePassword,
|
|
changePasswordConfirmation,
|
|
changeOldPassword,
|
|
onSubmitChangePassword
|
|
}) => (
|
|
<Container>
|
|
<Header>Settings</Header>
|
|
<Header attached="top"> Change Password </Header>
|
|
<Segment attached>
|
|
<Form
|
|
loading={isSendingAuthRequest}
|
|
onSubmit={onSubmitChangePassword}
|
|
error={!!authRequestError}
|
|
success={!!authRequestSuccess}
|
|
>
|
|
<Form.Field>
|
|
<label>Old Password</label>
|
|
<input
|
|
placeholder="••••••••"
|
|
type="password"
|
|
value={oldPassword}
|
|
onChange={changeOldPassword}
|
|
/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<label>New Password</label>
|
|
<input
|
|
placeholder="••••••••"
|
|
type="password"
|
|
value={password}
|
|
onChange={changePassword}
|
|
/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<label>Confirm New Password</label>
|
|
<input
|
|
placeholder="••••••••"
|
|
type="password"
|
|
value={passwordConfirmation}
|
|
onChange={changePasswordConfirmation}
|
|
/>
|
|
</Form.Field>
|
|
<Error header="Change Password failed!" error={authRequestError} />
|
|
<Message success>
|
|
<Message.Header>Password Successfully Changed!</Message.Header>
|
|
<p>New password has been set.</p>
|
|
</Message>
|
|
<Form.Button primary>Change Password</Form.Button>
|
|
</Form>
|
|
</Segment>
|
|
</Container>
|
|
);
|
|
|
|
export default connect(mapStateToProps)(Settings);
|