ft(verify user page): verify user page

- set up reducer
- set up actions
- set up component
- write test cases

[Delievers 167345631]

src/components/ChangePassword/changePassword.scss

@@ -102,7 +102,7 @@ $success-color: #008000;
   .card-body {
     padding: 1.5rem;
     height: 400px;
-    width: 400px;
+
 
     Button.buttons[type=button] {
       background-color: $form-color;

src/components/ResetPassword/ResetPassword.js

@@ -52,8 +52,7 @@ export class ResetPasswordCard extends Component {
             </CardSubtitle>
             <Heading title="Forgot Password?" />
             <CardText>
-              Please enter your email address here and we will send you information to change your
-              password
+              Please enter your email to reset your password
             </CardText>
             <div className="success">{passwordResetSuccess}</div>
             <FormGroup>

src/components/ResetPassword/resetpassword.scss

@@ -99,7 +99,7 @@ $success-color: #008000;
     padding: 1.5rem;
 
     height: 400px;
-    width: 400px;
+
 
     Button.buttons[type=button] {
       background-color: $form-color;

src/components/VerifyUser/VerifyUser.js

@@ -2,22 +2,20 @@ import React, { PureComponent } from 'react';
 import queryString from 'query-string';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { CardBody } from 'reactstrap';
+import { CardBody, CardText } from 'reactstrap';
 import propTypes from 'prop-types';
 import Card from '../Card/Card';
 import { Header } from '../Header/Header';
 import Footer from '../Footer/Footer';
 import * as actions from '../../../store/actions/authActions';
+import { Heading } from '../Heading/Heading';
+import './VerifyUser.scss';
 
 export class VerifyUser extends PureComponent {
   componentDidMount() {
-    const { match } = this.props;
-    const { params } = match;
-    const { token } = params;
-    const { verifyAuth, history } = this.props;
-    // verifyAuth(token, history);
-    console.log(token);
-
+    const { verifyAuth, history, location } = this.props;
+    const { token } = queryString.parse(location.search);
+    verifyAuth(token, history);
   }
 
   render() {
@@ -26,7 +24,10 @@ export class VerifyUser extends PureComponent {
         <div className="bg-image" />
         <Header />
         <Card>
-          <CardBody />
+          <CardBody className="verified">
+            <Heading title="You've been verified" />
+            <CardText>Redirecting to your profile page ...</CardText>
+          </CardBody>
         </Card>
         <Footer />
       </div>
@@ -41,7 +42,7 @@ const mapDispatchToProps = {
 VerifyUser.propTypes = {
   history: propTypes.shape({ push: propTypes.func }),
   verifyAuth: propTypes.func,
-  match: propTypes.shape({ params: propTypes.shape({ token: propTypes.string }) }),
+  location: propTypes.shape({ search: propTypes.shape({ token: propTypes.string }) }),
 };
 
 export default connect(null, mapDispatchToProps)(withRouter(VerifyUser));

src/components/VerifyUser/VerifyUser.scss

@@ -14,26 +14,18 @@ $success-color: #008000;
   width: 100%;
   z-index: 1000;
 
+  .verified {
+    padding: 3rem;
+    height: 140px;
+  }
+
   @media screen and (min-width: 1200px) {
     max-width: 2140px;
     padding: 0;
   }
 
-  .error {
-    color: $error-color;
-    text-align: left;
-  }
-
-  .success {
-    color: $success-color;
-    margin-bottom: 3px;
-    text-align: center;
-  }
-
   .bg-image {
     background: url("../../assets/images/background.jpg") center center no-repeat;
-    background-position: center;
-    background-repeat: no-repeat;
     background-size: cover;
     display: block;
     -webkit-filter: blur(5px);
@@ -48,78 +40,9 @@ $success-color: #008000;
     z-index: -1000;
   }
 
-  .card-subtitle {
-    margin-bottom: 20px;
-    text-align: center;
-  }
-
   .card-text {
     color: $text-color;
     margin-bottom: 20px;
     text-align: center;
   }
-
-  .forgot {
-    font-size: 20px;
-    line-height: 20px;
-    margin-bottom: 20px;
-    text-align: center;
-  }
-
-  .form-group {
-    margin-bottom: 10px;
-    position: relative;
-  }
-
-  .icon {
-    display: block;
-    height: 40px;
-    line-height: 40px;
-    position: absolute;
-    right: 10px;
-    z-index: 1000;
-  }
-
-  .form-control {
-    box-sizing: border-box;
-    border: 0;
-    border: 1px solid $text-color;
-    border-radius: 5px;
-    display: block;
-    font-size: 16px;
-    height: 40px;
-    margin: auto;
-    outline: 0;
-
-    &:focus {
-      border-color: $form-color;
-    }
-  }
-  .card-body {
-    padding: 1.5rem;
-
-    Button.buttons[type=button] {
-      background-color: $form-color;
-      border: 0;
-      border-radius: 5px;
-      color: $bg-color;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: 400;
-      height: 40px;
-      outline: none;
-      text-align: center;
-      transition: 0.2s;
-      width: 100%;
-
-      &:hover {
-        background-color: $form-color;
-        opacity: 0.6;
-      }
-      &:focus {
-        background-color: $form-color;
-        box-shadow: none;
-      }
-    }
-  }
 }

src/test/actions/authActions/__snapshots__/index.spec.js.snap

@@ -72,10 +72,28 @@ Array [
 ]
 `;
 
+exports[`async actions update verified state 1`] = `
+Array [
+  Object {
+    "isVerified": true,
+    "type": "VERIFY_USER",
+  },
+]
+`;
+
 exports[`async actions updates loading to true in state 1`] = `
 Array [
   Object {
     "type": "LOADING",
   },
 ]
 `;
+
+exports[`async actions verifies user 1`] = `
+Array [
+  Object {
+    "isVerified": false,
+    "type": "VERIFY_USER",
+  },
+]
+`;

src/test/actions/authActions/index.spec.js

@@ -12,6 +12,7 @@ import {
   passwordChangeSuccess,
   passwordChangeError,
 } from '../../../../store/actions/authActions/changePassword';
+import { verifyAuthUser, verifyUser } from '../../../../store/actions/authActions';
 
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
@@ -53,6 +54,19 @@ describe('async actions', () => {
     });
   });
 
+  it('verifies user', () => {
+    nock('https://freyja-ah-backend.herokuapp.com').get('api/user/verify/jdkkdkkd').reply(200, {});
+
+    return store.dispatch(verifyAuthUser('dnsanda')).then(() => {
+      expect(store.getActions()).toMatchSnapshot();
+    });
+  });
+
+  it('update verified state', () => {
+    store.dispatch(verifyUser(true));
+    expect(store.getActions()).toMatchSnapshot();
+  });
+
   it('creates CHANGE_PASSWORD_SUCCESS when change password action is successful', () => {
     store.dispatch(passwordChangeSuccess('password successfully update'));
     expect(store.getActions()).toMatchSnapshot();

src/test/components/__snapshots__/verifyUser.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test verify user component should test verify 1`] = `ShallowWrapper {}`;

src/test/components/verifyUser.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { VerifyUser } from '../../components/VerifyUser/VerifyUser';
+import store from '../../../store';
+
+describe('test verify user component', () => {
+  const prop = {
+    verifyAuth: () => {},
+    location: {
+      search: {
+        token: 'ddjfj',
+      },
+    },
+  };
+  const verify = shallow(<VerifyUser {...prop} store={store} />);
+
+  it('should test verify', () => {
+    expect(verify).toMatchSnapshot();
+  });
+});

src/test/views/__snapshots__/verifyUser.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test verify user page should test verify user page 1`] = `ShallowWrapper {}`;

src/test/views/verifyUser.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import VerifyUser from '../../views/VerifyUser/verifyUser';
+
+describe('test verify user page', () => {
+  const verify = shallow(<VerifyUser />);
+
+  it('should test verify user page', () => {
+    expect(verify).toMatchSnapshot();
+  });
+});

store/actions/authActions.js

@@ -76,24 +76,20 @@ export const loginUser = payload => async dispatch => {
 };
 
 export const verifyAuthUser = (token, history) => async dispatch => {
-  console.log('get jere');
-
   try {
-    const response = await axios(`https://freyja-ah-backend.herokuapp.com/api/user/verify/${token}`, {
+    await axios(`https://freyja-ah-backend.herokuapp.com/api/user/verify/${token}`, {
       method: 'GET',
       headers: {
         accept: 'application/json',
         'Content-type': 'application/json; charset=UTF-8',
       },
     });
-    // await dispatch(verifyUser(true));
-    console.log(response);
+    await dispatch(verifyUser(true));
 
     setTimeout(() => {
       history.push('/profile');
     }, 3000);
   } catch (error) {
-    // dispatch(verifyUser(false));
-    console.log(error.response);
+    dispatch(verifyUser(false));
   }
 };