profile

package-lock.json

@@ -2734,7 +2734,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "requires": {
         "camelcase": "^2.0.0",
@@ -6227,7 +6227,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -8846,7 +8846,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "requires": {
         "camelcase-keys": "^2.0.0",
@@ -9182,7 +9182,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         }
       }
@@ -9286,7 +9286,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "^2.2.1",
@@ -15017,7 +15017,7 @@
         },
         "os-locale": {
           "version": "1.4.0",
-          "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
           "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
           "requires": {
             "lcid": "^1.0.0"
@@ -15025,7 +15025,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -15180,7 +15180,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "requires": {
             "amdefine": ">=0.0.4"
@@ -16030,7 +16030,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "requires": {
         "block-stream": "*",

src/actions/user/changeEmail.js

@@ -0,0 +1,17 @@
+import * as actionTypes from './../../constants/user';
+
+export const changeEmailRequest = payload => {
+    console.log('Inside the changeEMAIL action', payload);
+    return {
+        type: actionTypes.CHANGE_EMAIL_REQUEST,
+        payload
+    };
+}
+export const changeEmailSuccess = payload => ({
+    type: actionTypes.CHANGE_EMAIL_REQUEST_SUCCESS,
+    payload
+});
+export const changeEmailFailure = error => ({
+    type: actionTypes.CHANGE_EMAIL_REQUEST_FAILURE,
+    error
+});

src/actions/user/changePassword.js

@@ -0,0 +1,17 @@
+import * as actionTypes from './../../constants/user';
+
+export const changePasswordRequest = payload => {
+    console.log('Inside the changePassword action', payload);
+    return {
+        type: actionTypes.CHANGE_PASSWORD_REQUEST,
+        payload
+    };
+}
+export const changePasswordSuccess = payload => ({
+    type: actionTypes.CHANGE_PASSWORD_REQUEST_SUCCESS,
+    payload
+});
+export const changePasswordFailure = error => ({
+    type: actionTypes.CHANGE_PASSWORD_REQUEST_FAILURE,
+    error
+});

src/components/user/ProfilePage/ChangeEmailForm/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+
+import formInput from '../../../common/formInput';
+
+class ChangeEmailForm extends React.Component {
+
+    submit = ({email}) => {
+        const {actions:{changeEmailRequest},data:{_id},token } = this.props
+        console.log(_id, email,token);
+
+        changeEmailRequest({
+            token,
+           _id,
+            email
+        })
+        
+    }
+
+    render() {
+        const { children, handleSubmit, actions:{changeEmailRequest}, handlers: {  handleClick, handleClicks }, data, token } = this.props;
+        const { submit}=this
+        return (
+            <form onSubmit={handleSubmit(submit)} >
+                <Field name="email" type="email" placeholder="Enter new login" component={formInput} />
+                <button
+                    type="button" className="link link--btn right"  onClick={
+                        function() {
+                        handleClicks();
+                            handleSubmit(submit)();
+                        }    
+                    
+                    }>
+                    Change
+                </button>
+            </form >
+        )
+    }
+}
+
+export default reduxForm({
+    form: "changeEmailForm",
+})(ChangeEmailForm);

src/components/user/ProfilePage/changePassword/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+
+import formInput from '../../../common/formInput';
+
+class ChangePasswordForm extends React.Component {
+
+    submit = ({password, confirmPassword }) => {
+        const {actions:{changePasswordRequest},data:{_id},token } = this.props
+        console.log(_id, password, confirmPassword, token);
+
+        changePasswordRequest({
+            token,
+           _id,
+            password,
+            confirmPassword
+        })
+        
+    }
+
+    render() {
+        const { children, handleSubmit, actions:{changePasswordRequest}, handlers: {  handleClicked }, data, token } = this.props;
+        const { submit}=this
+        console.log( data)
+        return (
+            <form onSubmit={handleSubmit(submit)} >
+                <Field name="password" type="password" placeholder="Password" component={formInput} />
+                <Field name="confirmPassword" type="password" placeholder="new Password" component={formInput} />
+
+                <button
+                    type="button" className="link link--btn right"  onClick={
+                        function() {
+                        handleClicked();
+                            handleSubmit(submit)();
+                        }    
+                    
+                    }>
+                    Change
+                </button>
+            </form >
+        )
+    }
+}
+
+export default reduxForm({
+    form: "changePasswordForm",
+})(ChangePasswordForm);

src/components/user/ProfilePage/index.js

@@ -2,36 +2,48 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux'
 import ChangeLoginForm from './ChangeLoginForm/index';
-import {changeLoginRequest} from '../../../actions/user/changelogin'
-
+import ChangeEmailForm from './ChangeEmailForm/index';
+import ChangePasswordForm from './changePassword/index'
+import {changeLoginRequest} from '../../../actions/user/changelogin';
+import {changeEmailRequest} from '../../../actions/user/changeEmail';
+import {changePasswordRequest } from '../../../actions/user/changePassword'
 
 
 class ProfilePage extends React.Component {
+    
     state={
-        clicked:false
+        clicked:false,
+        klick: false,
+        click: false
     }
 
     handleClick = () => {
         this.setState((prevState) => ({ clicked: !prevState.clicked }));
     }
+    handleClicks = () => {
+        this.setState((prevState) => ({ klick: !prevState.klick }));
+    }
+    handleClicked = () => {
+        this.setState((prevState) => ({ click: !prevState.click }));
+    }
 
     render() {
-        const { signIn:{data, token}, changeLoginRequest, changeLogin} = this.props;
-        console.log(changeLogin)
-        const {clicked} =this.state;
-        const {handleClick} = this;
+        const { signIn:{data, token}, changeLoginRequest, chageLoginReducer, changeEmailRequest, changeEmailReducer, changePasswordRequest} = this.props;
+      console.log(changeEmailReducer)
+        const {clicked, klick, click} =this.state;
+        const {handleClick, handleClicks, handleClicked} = this;
 
         return (
             <div className="page page--bottom-only profile-page">
                 <div className="border bg-autumn-foliage m-5 rounded d-flex">
                     <div>
-                <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{data.name}</h5>
-                <div className="d-flex"  >
+                {/* <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{data.name}</h5> */}
+                {/* <div className="d-flex"  >
                 <p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">Email</p><p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">{data.email}</p>
-                </div>
-                <div className="d-flex"  >
+                </div> */}
+                {/* <div className="d-flex"  >
                 <p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">Role</p><p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">{data.role}</p>
-                </div>
+                </div> */}
                 
                     <div>
                         <img className="m-4 " src=" https://cdn.iconscout.com/icon/free/png-256/avatar-373-456325.png" ></img>
@@ -42,7 +54,14 @@ class ProfilePage extends React.Component {
                             ?
                         <div  className ="d-flex mb-3" >
                             <h3 className = " p-2 flex-fill bd-highlight">Name</h3>
-                            <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{data.name}</h5>
+                            <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{
+                                chageLoginReducer.data == null
+                                ?
+                                data.name 
+                                :
+                                chageLoginReducer.data
+
+                                }</h5>
                             <button type="button" onClick ={handleClick}  className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
                         </div>
                         :
@@ -52,15 +71,41 @@ class ProfilePage extends React.Component {
                         <ChangeLoginForm data ={data} token={token} actions ={{changeLoginRequest}} handlers={{ handleClick}}> </ChangeLoginForm>
                         </div>
                             }
+                            {!klick
+                            ?
+                        <div  className ="d-flex mb-3" >
+                            <h3 className = "p-2 flex-fill bd-highlight">Email</h3>
+                            <h5 className="p-2 flex-fill font-po-bold bd-highlight align-self-end">
+                                {
+                                    changeEmailReducer.data ===null
+                                    ?
+                                    data.email
+                                    :
+                                    changeEmailReducer.data
+                                }
+                            </h5>
+                            <button type="button" name ="name"  onClick ={handleClicks} className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
+                        </div>
+                        :
                         <div  className ="d-flex mb-3" >
                             <h3 className = "p-2 flex-fill bd-highlight">Email</h3>
                             <h5 className="p-2 flex-fill font-po-bold bd-highlight align-self-end">{data.email}</h5>
-                            <button type="button" className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
+                            <ChangeEmailForm  data ={data} token={token} actions ={{changeEmailRequest}} handlers={{ handleClicks}}></ChangeEmailForm>
                         </div>
+                            }
+                            {
+                                !click
+                                ?
                         <div  className ="d-flex mb-3" >
                             <h3 className = "p-2 flex-fill bd-highlight">Password</h3>
-                            <button type="button" className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
+                            <button type="button" onClick ={handleClicked} className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
                         </div>
+                        :
+                        <div  className ="d-flex mb-3" >
+                            <h3 className = "p-2 flex-fill bd-highlight">Password</h3>
+                           <ChangePasswordForm data ={data} token={token} actions ={{changePasswordRequest}} handlers={{ handleClicked}}></ChangePasswordForm>
+                        </div>
+                            }
                  
                     </div>
                 </div>
@@ -94,9 +139,10 @@ class ProfilePage extends React.Component {
 const
     mapStateToProps = state => ({
         signIn: state.signIn,
-        changeLogin: state.changeLogin
+        chageLoginReducer: state.chageLoginReducer,
+        changeEmailReducer:state.changeEmailReducer
     });
 
-const mapDispatchToProps = dispatch => bindActionCreators({changeLoginRequest}, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({changeLoginRequest, changeEmailRequest, changePasswordRequest}, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);

src/constants/user.js

@@ -1,4 +1,12 @@
 export const USER_URL = 'https://test-app-a-level.herokuapp.com/users/'; 
-export const CHANGE_LOGIN_REQUEST = 'CHANGE_LOGIN_REQEST';
+export const CHANGE_LOGIN_REQUEST = 'CHANGE_LOGIN_REQUEST';
 export const CHANGE_LOGIN_REQUEST_SUCCESS = 'CHANGE_LOGIN_REQUEST_SUCCESS';
-export const CHANGE_LOGIN_REQUEST_FAILURE = 'CHANGE_LOGIN_REQUEST_FAILURE';
+export const CHANGE_LOGIN_REQUEST_FAILURE = 'CHANGE_LOGIN_REQUEST_FAILURE';
+
+export const CHANGE_EMAIL_REQUEST = 'CHANGE_EMAIL_REQUEST';
+export const CHANGE_EMAIL_REQUEST_SUCCESS = 'CHANGE_EMAIL_REQUEST_SUCCESS';
+export const CHANGE_EMAIL_REQUEST_FAILURE = 'CHANGE_EMAIL_REQUEST_FAILURE';
+
+export const CHANGE_PASSWORD_REQUEST = 'CHANGE_PASSWORD_REQUEST';
+export const CHANGE_PASSWORD_REQUEST_SUCCESS = 'CHANGE_PASSWORD_REQUEST_SUCCESS';
+export const CHANGE_PASSWORD_REQUEST_FAILURE = 'CHANGE_PASSWORD_REQUEST_FAILURE';

src/reducers/index.js

@@ -3,10 +3,12 @@ import { reducer as form } from 'redux-form';
 
 import signIn from './auth/signIn';
 import chageLoginReducer from './user/chageLogin';
+import changeEmailReducer from './user/changeEmail';
 
 export default combineReducers({
 
     signIn,
     chageLoginReducer,
+    changeEmailReducer,
     form
 })

src/reducers/initialState.js

@@ -14,5 +14,10 @@ export default {
         isFetching: false,
         data: null,
         error: null
-    }
+    },
+    changeEmail:{
+        isFetching: false,
+        data: null,
+        error: null
+    },
 }

src/reducers/user/chageLogin.js

@@ -12,7 +12,8 @@ export default function chageLoginReducer(state = initialState.changeLogin, {  t
             }
         }
         case actionTypes.CHANGE_LOGIN_REQUEST_SUCCESS: {
-            const { name } = payload;
+            const { user:{name} } = payload;
+            console.log(name)
 
             return {
                 ...state,

src/reducers/user/changeEmail.js

@@ -0,0 +1,37 @@
+import * as actionTypes from './../../constants/user';
+import initialState from './../initialState';
+
+export default function changeEmailReducer(state = initialState.changeEmail, {  type, payload }) {
+    switch (type) {
+        case actionTypes.CHANGE_EMAIL_REQUEST: {
+            console.log(payload)
+            return {
+                ...state,
+                isFetching: true,
+                payload
+            }
+        }
+        case actionTypes.CHANGE_EMAIL_REQUEST_SUCCESS: {
+            const { user:{email} } = payload;
+            console.log(email)
+
+            return {
+                ...state,
+                isFetching: false,
+                data:email
+            }
+        }
+        case actionTypes.CHANGE_EMAIL_REQUEST_FAILURE: {
+            const { error } = payload;
+
+            return {
+                ...state,
+                isFetching: false,
+                error
+            }
+        }
+        default: {
+            return state;
+        }
+    }
+}

src/sagas/user/changeEmail.js

@@ -0,0 +1,27 @@
+import { put, call } from 'redux-saga/effects';
+import axios from 'axios';
+
+import { USER_URL } from './../../constants/user';
+import { changeEmailSuccess, changeEmailFailure } from './../../actions/user/changeEmail'
+
+export default function* ({payload:{_id,email,token}}) {
+    console.log('User inside the worker-saga', _id,email,token);
+    try {
+        const config = {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${token}`
+            }
+        }
+
+        const user = yield call(() =>
+            axios.put(`${USER_URL}${_id}`,{email:email}, config)
+                .then(({ data }) => data)
+        )
+
+        yield put(changeEmailSuccess(user));
+    }
+    catch ({ message }) {
+        yield put(changeEmailFailure(message));
+    }
+}

src/sagas/user/changePassword.js

@@ -0,0 +1,28 @@
+import { put, call } from 'redux-saga/effects';
+import axios from 'axios';
+
+import { USER_URL } from './../../constants/user';
+import { changePasswordSuccess, changePasswordFailure } from './../../actions/user/changePassword'
+
+export default function* ({payload:{_id, password, confirmPassword,token}}) {
+    console.log('User inside the worker-saga', _id, password, confirmPassword, token);
+    try {
+        const config = {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${token}`
+            }
+        }
+
+        const user = yield call(() =>
+            axios.put(`${USER_URL}${_id}`,{
+                password, confirmPassword}, config)
+                .then(({ data }) => data)
+        )
+
+        yield put(changePasswordSuccess(user));
+    }
+    catch ({ message }) {
+        yield put(changePasswordFailure(message));
+    }
+}

src/sagas/user/index.js

@@ -1,9 +1,15 @@
 import changeLogin from './changeLogin';
+import changeEmail from './changeEmail';
+import changePassword from './changePassword'
 import * as actionTypes from './../../constants/user'
 
 import { takeEvery } from 'redux-saga/effects';
 
 export default function* () {
-    yield takeEvery(actionTypes.CHANGE_LOGIN_REQUEST, changeLogin)
+    yield takeEvery(actionTypes.CHANGE_LOGIN_REQUEST, changeLogin);
+    yield takeEvery(actionTypes.CHANGE_EMAIL_REQUEST, changeEmail);
+    yield takeEvery(actionTypes.CHANGE_PASSWORD_REQUEST, changePassword);
+
+
 
 }