profile;

package-lock.json

@@ -2417,6 +2417,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.2.1.tgz",
+      "integrity": "sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5664,11 +5669,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5681,11 +5688,13 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -5792,7 +5801,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5802,6 +5812,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5814,6 +5825,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5913,7 +5925,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6028,6 +6041,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.2.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-redux": "^6.0.0",

src/components/common/formInput.js

@@ -0,0 +1,8 @@
+import React, { Fragment } from 'react';
+
+export default ({ input, className, placeholder, type, meta: { touched, error } }) => (
+    <Fragment>
+        <input className={className} placeholder={placeholder} type={type} {...input} />
+        {touched && (error && <p style={{"color": "red", "textTransform": "uppercase"}}>⚠ {error}</p>)}
+    </Fragment>
+)

src/components/user/ProfilePage/index.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux'
+
+
+const user = {
+    "data": {
+        "_id": "5c48461c40ca670017ba5974",
+        "name": "Debil",
+        "email": "superus@lol.com",
+        "password": "$2a$10$qoxrQ2Sp3BDTLa9Xdc0ZPuLVHamipMQRWxeWxw1RwthICnbPoFLvC",
+        "profilePhoto": "",
+        "role": 0
+    },
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjNDg0NjFjNDBjYTY3MDAxN2JhNTk3NCIsInJvbGUiOjAsImlhdCI6MTU0ODI1NTczMiwiZXhwIjoxNTQ4MzQyMTMyfQ.RAIiCLjBJ2u1VEQWy1oUgPjHj0dZRG27l0J3c8FDss0"
+}
+
+class ProfilePage extends React.Component {
+
+    render() {
+        const { users, userChangeRequest, passwordChangeRequest } = this.props;
+        const { data } = user;
+
+        return (
+            <div className="page page--bottom-only profile-page">
+                <section className="border bg-secondary m-5 rounded d-flex">
+                    <div>
+                        <img className="m-4 " src=" https://cdn.iconscout.com/icon/free/png-256/avatar-373-456325.png" ></img>
+                    </div>
+                    <div className="border-left bg-secondary m-5 rounded w-75 ">
+                        <div  className ="d-flex mb-3" >
+                            <h3 className = "p-2 flex-fill bd-highlight">Name</h3>
+                            <h5 className="p-2 flex-fill bd-highlight align-self-end">{data.name}</h5>
+                            <button type="button" className=" flex-fill bd-highlight btn btn-outline-success 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 bd-highlight align-self-end">{data.email}</h5>
+                            <button type="button" className=" flex-fill bd-highlight btn btn-outline-success col-3">Change</button>
+                        </div>
+                        <div  className ="d-flex mb-3" >
+                            <h3 className = "p-2 flex-fill bd-highlight">Password</h3>
+                            <button type="button" className=" flex-fill bd-highlight btn btn-outline-success col-3">Change</button>
+                        </div>
+                 
+                    </div>
+                </section>
+                <section className="container section section--stats">
+                    <div className="section__element section__element--">
+                        <h3>Member Since</h3>
+                        <p>{new Date(data.createdAt).toLocaleString()}</p>
+                    </div>
+                    <div className="section__element section__element--comments border-right-0">
+                        <h3>Last comments</h3>
+                        <p className="comments-block">
+                            {
+                                data.comments && data.comments
+                                    .slice(0, 60)
+                                    .map(el =>
+                                        <p>
+                                            <h4>{new Date(el.createdAt).toLocaleString()}</h4>
+                                            {el.text}
+                                        </p>)
+                            }
+                        </p>
+                    </div>
+                </section>
+            </div>
+        )
+    }
+
+}
+
+const
+    mapStateToProps = state => ({
+        user: state.user,
+        users: state.users
+    });
+
+const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);

src/configs/routerConfig.js

@@ -1,6 +1,8 @@
 import React, { lazy } from 'react';
 import * as routes from './../constants/routes';
 
+const ProfilePage =lazy(()=> import('../components/user/ProfilePage'))
+
 export default [
     {
         path: routes.LANDING,
@@ -30,7 +32,7 @@ export default [
     {
         path: routes.PROFILE,
         access: 'user-only',
-        component: () => <div>profile</div>
+        component: ProfilePage
     },
     {
         path: routes.TESTS,