Merge faa95a4 into 9950d49

src/components/Card/Card.js

@@ -1,29 +1,20 @@
-import React, { PureComponent } from 'react';
-import {
-  Card,
-} from 'reactstrap';
+import React from 'react';
+import { Card as ReactStrapCard } from 'reactstrap';
 import propTypes from 'prop-types';
 import './card.scss';
 
-class CardComponent extends PureComponent {
-  render() {
-    const {
-      children, cardStyle,
-    } = this.props;
-    return (
-      <Card className={cardStyle}>
-        {children}
-      </Card>
-    );
-  }
-}
+const Card = ({ children, cardStyle }) => (
+  <ReactStrapCard className={cardStyle}>
+    {children}
+  </ReactStrapCard>
+);
 
-CardComponent.propTypes = {
+Card.propTypes = {
   children: propTypes.element,
   cardStyle: propTypes.string,
 };
-CardComponent.defaultProps = {
-  cardStyle: '',
-};
 
-export default CardComponent;
+Card.defaultProps = {
+  cardStyle: 'c-card',
+};
+export default Card;

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

@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react';
+import queryString from 'query-string';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+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 {
+  state = {
+    verify: 'verifying, ...',
+  };
+
+  componentDidMount() {
+    const verifyUsers = async () => {
+      const { verifyAuth, history, location } = this.props;
+      const { token } = queryString.parse(location.search);
+
+      await verifyAuth(token, history);
+      const { verified } = this.props;
+      this.setState({
+        verify: verified,
+      });
+    };
+
+    verifyUsers();
+  }
+
+  render() {
+    const { verify } = this.state;
+    const top = verify.split(',')[0];
+    const buttom = verify.split(',')[1];
+    return (
+      <div className="containers">
+        <div className="bg-image" />
+        <Header />
+        <Card>
+          <CardBody className="verified">
+            <Heading title={top} />
+            <CardText>{buttom}</CardText>
+          </CardBody>
+        </Card>
+        <Footer />
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  verified: state.auth.verified,
+  loading: state.auth.isLoading,
+});
+
+const mapDispatchToProps = {
+  verifyAuth: actions.verifyAuthUser,
+};
+
+VerifyUser.propTypes = {
+  history: propTypes.shape({ push: propTypes.func }),
+  verifyAuth: propTypes.func,
+  location: propTypes.shape({ search: propTypes.string }),
+  verified: propTypes.string,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(VerifyUser));

src/components/VerifyUser/VerifyUser.scss

@@ -0,0 +1,48 @@
+$error-color: #ff0000;
+$bg-color: #ffffff;
+$text-color: #ccc;
+$form-color: #f3994a;
+$success-color: #008000;
+
+.containers {
+  align-content: center;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh);
+  justify-content: center;
+  padding: 0;
+  width: 100%;
+  z-index: 1000;
+
+  .verified {
+    padding: 3rem;
+    height: 140px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    max-width: 2140px;
+    padding: 0;
+  }
+
+  .bg-image {
+    background: url("../../assets/images/background.jpg") center center no-repeat;
+    background-size: cover;
+    display: block;
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -o-filter: blur(5px);
+    -ms-filter: blur(5px);
+    filter: blur(5px);
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: -1000;
+  }
+
+  .card-text {
+    color: $text-color;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+}

src/routes/routes.js

@@ -8,6 +8,7 @@ import NotFound from '../views/NotFound';
 import signUpPage from '../views/Signup/SignUp';
 import ResetPassword from '../views/ResetPassword/ResetPassword';
 import changePassword from '../views/ChangePassword/changePassword';
+import VerifyUserPage from '../views/VerifyUser/verifyUser';
 
 import About from '../views/AboutUs/AboutUs';
 
@@ -22,6 +23,7 @@ const Routes = () => (
     <Route path="/signup" component={signUpPage} />
     <Route path="/change-password" component={changePassword} />
     <Route path="/dashboard" component={Dashboard} />
+    <Route path="/verify" component={VerifyUserPage} />
     <Route component={NotFound} />
   </Switch>
 );

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": "Couldn't verify you, Please chcek the link sent to your email again.",
+    "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,19 @@
+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: '',
+    },
+    verified: 'hello, mobolaji',
+  };
+  const verify = shallow(<VerifyUser {...prop} store={store} />);
+
+  it('should test verify', () => {
+    expect(verify).toMatchSnapshot();
+  });
+});

src/test/reducers/__snapshots__/resetPassword.spec.js.snap

@@ -10,6 +10,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -23,6 +24,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -36,6 +38,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -49,6 +52,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -62,6 +66,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -75,6 +80,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -88,6 +94,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -101,6 +108,7 @@ Object {
   "passwordResetError": "invalid email",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -114,6 +122,7 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "Please check your email",
   "user": Object {},
+  "verified": "",
 }
 `;
 
@@ -127,5 +136,6 @@ Object {
   "passwordResetError": "",
   "passwordResetSuccess": "",
   "user": Object {},
+  "verified": "",
 }
 `;

src/test/reducers/authReducer.spec.js

@@ -13,6 +13,7 @@ const initialState = {
   isAuthenticated: false,
   user: {},
   errors: {},
+  verified: '',
 };
 
 const newUser = {
@@ -35,6 +36,7 @@ describe('Auth Reducer', () => {
       isAuthenticated: false,
       user: {},
       errors: {},
+      verified: '',
     });
   });
   it('should handle action type SET_CURRENT_USER', () => {

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();
+  });
+});