Merge remote-tracking branch 'origin/new_Sveta' into new_dev

package-lock.json

@@ -5731,7 +5731,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6083,7 +6084,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6130,6 +6132,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6168,11 +6171,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },

src/components/public/Header.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Link } from "react-router-dom";
+import * as routes from '../../constants/routes'
 
 export default class Header extends React.Component {
     render() {
@@ -14,13 +16,19 @@ export default class Header extends React.Component {
                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul class="navbar-nav mr-auto p-3">
                                 <li class="nav-item active">
-                                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                                <Link onClick={this.handleClick} class="nav-link font-ci font-ci-bold" to={routes.HOME}>Home <span class="sr-only">(current)</span></Link>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" href="#">Link</a>
+                                <Link onClick={this.handleClick}  class="nav-link font-ci font-ci-bold"  to={routes.PROFILE}>Profile</Link>
+                                </li>
+                                <li class="nav-item">
+                                <Link onClick={this.handleClick}  class="nav-link font-ci font-ci-bold "  to={routes.TESTS}>Tests</Link>
+                                </li>
+                                <li class="nav-item">
+                                <Link onClick={this.handleClick}  class="nav-link font-ci font-ci-bold "  to={routes.CATEGORIES}>Catigories</Link>
                                 </li>
                                 {/* TODO: admin-only ! */}
-                                {/* <li class="nav-item dropdown">
+                                <li class="nav-item dropdown">
                                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         Dropdown
                                     </a>
@@ -30,10 +38,8 @@ export default class Header extends React.Component {
                                         <div class="dropdown-divider"></div>
                                         <a class="dropdown-item" href="#">Something else here</a>
                                     </div>
-                                </li> */}
-                                <li class="nav-item">
-                                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                                 </li>
+                               
                             </ul>
                             <form class="form-inline my-2 my-lg-0">
                                 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+
+import formInput from '../../../common/formInput';
+
+class ChangeLoginForm extends React.Component {
+
+    render() {
+        // const { children, handleSubmit, handlers: { handleClick, submit } } = this.props;
+        return (
+            <form  >
+                <Field name="login" type="email" placeholder="Enter new login" component={formInput} />
+                <button
+                    type="button" className="link link--btn right" >
+                    Change
+                </button>
+            </form >
+        )
+    }
+}
+
+export default reduxForm({
+    form: "changeLoginForm",
+})(ChangeLoginForm);

src/components/user/ProfilePage/index.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux'
+ import ChangeLoginForm from './ChangeLoginForm/index';
+
+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 {
+    state={
+        clicked:false
+    }
+
+    handleClick = () => {
+        this.setState((prevState) => ({ clicked: !prevState.clicked }));
+    }
+
+    render() {
+        const { users, userChangeRequest, passwordChangeRequest } = this.props;
+        const { data } = user;
+        const {clicked} =this.state;
+
+        return (
+            <div className="page page--bottom-only profile-page">
+                <section className="border bg-autumn-foliage 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-autumn-foliage m-5 rounded w-75 ">
+                            {!clicked
+                            ?
+                        <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>
+                            <button type="button" onClick ={this.handleClick} className=" flex-fill bg-shadow btn btn-outline-light col-3">Change</button>
+                        </div>
+                        :
+                        <div>
+                        <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>
+                        <ChangeLoginForm> </ChangeLoginForm>
+                        </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-light 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 bg-shadow btn btn-outline-light 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'))
+
 // import SignIn from '../components/public/SignIn';
 const SignIn = lazy(() => import('./../components/public/SignIn'))
 
@@ -33,7 +35,7 @@ export default [
     {
         path: routes.PROFILE,
         access: 'user-only',
-        component: () => <div>profile</div>
+        component: ProfilePage
     },
     {
         path: routes.TESTS,