Complete change password functionality

src/components/Auth/Settings.jsx

@@ -1,10 +1,76 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { Container } from "semantic-ui-react";
+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 {
+  constructor(props) {
+    super(props);
+    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() {
-    return <SettingsView />;
+    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}
+      />
+    );
   }
 }
 
@@ -12,10 +78,63 @@ function mapStateToProps(state) {
   return { ...state.auth };
 }
 
-const SettingsView = () => (
+const SettingsView = ({
+  isSendingAuthRequest,
+  authRequestError,
+  authRequestSuccess,
+  password,
+  passwordConfirmation,
+  oldPassword,
+  changePassword,
+  changePasswordConfirmation,
+  changeOldPassword,
+  onSubmitChangePassword
+}) => (
   <Container>
-    <h1>Settings</h1>
-    <p>todo, change password</p>
+    <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>Change Password</Form.Button>
+      </Form>
+    </Segment>
   </Container>
 );