Merge pull request #46 from Fairshots/lvc

PAssword reset functionality

index.js

@@ -5,11 +5,11 @@ import { Provider } from "react-redux";
 import { createStore, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
 import rootReducer from "./src/reducers";
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "bootstrap-css-only/css/bootstrap.min.css";
-import "mdbreact/dist/css/mdb.css";
 import App from "./src/app";
+
+import "mdbreact/dist/css/mdb.css";
 import "./node_modules/bootstrap/dist/css/bootstrap.min.css";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 

package.json

@@ -38,7 +38,7 @@
         "redux": "^4.0.0",
         "redux-form": "^7.4.2",
         "redux-thunk": "^2.3.0",
-        "sha1": "^1.1.1"
+        "@fortawesome/fontawesome-free": "^5.7.2"
     },
     "devDependencies": {
         "@babel/core": "^7.3.3",

src/actions/login.js

@@ -14,14 +14,16 @@ export function login(formProps) {
         };
         try {
             const res = await fetch(`${FAIRSHOTS_API}login`, config);
-            const usertoSave = await res.json();
-            console.log(usertoSave);
-            localStorage.setItem("user", JSON.stringify(usertoSave));
-            dispatch({
-                type: "AUTH_SUCCESS",
-                payload: usertoSave
-            });
-            dispatch(toggleLoading());
+            if (res.ok) {
+                const usertoSave = await res.json();
+                console.log(usertoSave);
+                localStorage.setItem("user", JSON.stringify(usertoSave));
+                dispatch({
+                    type: "AUTH_SUCCESS",
+                    payload: usertoSave
+                });
+                dispatch(toggleLoading());
+            } else throw res;
         } catch (e) {
             dispatch({
                 type: "AUTH_ERROR",
@@ -37,3 +39,64 @@ export function logout() {
         type: "AUTH_LOGOUT"
     };
 }
+
+export function forgotPw(formProps) {
+    return async dispatch => {
+        dispatch(toggleLoading());
+        const config = {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ Email: formProps.email })
+        };
+        try {
+            const res = await fetch(`${FAIRSHOTS_API}login/forgot`, config);
+            if (res.ok) {
+                const info = await res.json();
+                console.log(info);
+                dispatch({
+                    type: "AUTH_FORGOT",
+                    payload: info
+                });
+                dispatch(toggleLoading());
+            } else throw await res.text();
+        } catch (e) {
+            console.log(e);
+            dispatch({
+                type: "AUTH_ERROR",
+                payload: e
+            });
+            dispatch(toggleLoading());
+        }
+    };
+}
+
+export function resetPw(formProps) {
+    console.log(formProps);
+    const token = formProps.token.replace(/&/g, ".");
+    return async dispatch => {
+        dispatch(toggleLoading());
+        const config = {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ Password: formProps.password })
+        };
+        try {
+            const res = await fetch(`${FAIRSHOTS_API}login/pwreset/${token}`, config);
+            if (res.ok) {
+                const info = await res.json();
+                console.log(info);
+                dispatch({
+                    type: "AUTH_RESETPASSWORD",
+                    payload: info
+                });
+                dispatch(toggleLoading());
+            } else throw await res.text();
+        } catch (e) {
+            dispatch({
+                type: "AUTH_ERROR",
+                payload: e
+            });
+            dispatch(toggleLoading());
+        }
+    };
+}

src/app.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { hot } from "react-hot-loader";
+import { hot, setConfig } from "react-hot-loader";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { Footer, Navbar, DonutSpin } from "./components/UI";
@@ -24,5 +24,5 @@ const mapStateToProps = state => ({
     isAuthenticated: state.auth.isAuthenticated,
     userType: state.auth.user.userType
 });
-
+setConfig({ pureSFC: true });
 export default hot(module)(withRouter(connect(mapStateToProps)(App)));

src/components/UI/multipartForm/multipartForm.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import "./form.scss";
-import InputType from "./inputType";
 import { Link } from "react-router-dom";
 import { MDBBtn, MDBRow, MDBIcon } from "mdbreact";
+import InputType from "./inputType";
 
 class MultipartForm extends Component {
     state = {
@@ -106,7 +106,7 @@ class MultipartForm extends Component {
                                     </MDBBtn>
                                 )}
                                 <MDBBtn id="nextBtn" onClick={this.nextStepHandler}>
-                                    {activeTab === 6 ? `Submit` : `Next step`}
+                                    {activeTab === 6 ? "Submit" : "Next step"}
                                 </MDBBtn>
                             </MDBRow>
                         </fieldset>

src/components/UI/protectedRoute/index.js

@@ -7,19 +7,17 @@ const ProtectedRoute = ({
     allowOnly,
     component: Component,
     ...props
-}) => {
-    return (
-        <Route
-            {...props}
-            render={props =>
-                isAuthenticated === true && userType === allowOnly ? (
-                    <Component {...props} />
-                ) : (
-                    <Redirect to="/" />
-                )
-            }
-        />
-    );
-};
+}) => (
+    <Route
+        {...props}
+        render={() =>
+            isAuthenticated === true && userType === allowOnly ? (
+                <Component {...props} />
+            ) : (
+                <Redirect to="/" />
+            )
+        }
+    />
+);
 
 export default ProtectedRoute;

src/components/home/sofarbanner.js

@@ -14,13 +14,7 @@ export default class SoFarBanner extends Component {
                             FAIRSHOTS is successfully CONNECting PHOTOGRAPHERS TO NGOS in:
                         </p>
                         <br />
-                        <div className="w-embed w-iframe d-flex align-items-center">
-                            <iframe
-                                src="https://www.google.com/maps/d/embed?mid=1BQH9E4jw_7jcauK7B4ubBwn5i-Y"
-                                width="680"
-                                height="480"
-                            />
-                        </div>
+                        <div className="w-embed w-iframe d-flex align-items-center" />
                     </div>
                 </div>
             </div>

src/components/loginModal/index.js

@@ -1,16 +1,19 @@
 import React from "react";
-import { Button, Input, Modal, ModalBody, Form, FormGroup, FormFeedback, Row } from "reactstrap";
+import { Input, Form, FormGroup, FormFeedback } from "reactstrap";
+import { Link } from "react-router-dom";
+import { MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBRow } from "mdbreact";
 
 export default function LoginModal(props) {
     return (
-        <Modal
+        <MDBModal
             name="loginModal"
             isOpen={props.showModal}
             toggle={() => props.showLoginModal("loginModal")}
         >
-            <ModalBody>
+            <MDBModalHeader toggle={() => props.showLoginModal("loginModal")} />
+            <MDBModalBody>
                 <Form onSubmit={props.handleSubmit}>
-                    <Row className="justify-content-center">
+                    <MDBRow className="justify-content-center">
                         <FormGroup className="mb-2 mr-sm-2 mb-sm-2">
                             <Input
                                 type="email"
@@ -22,26 +25,42 @@ export default function LoginModal(props) {
                                 invalid={props.errorMessage !== ""}
                             />
                         </FormGroup>
-                    </Row>
-                    <Row className="justify-content-center">
-                        <FormGroup className="mb-2 mr-sm-2 mb-sm-2">
-                            <Input
-                                type="password"
-                                name="password"
-                                id="Password"
-                                placeholder="password"
-                                value={props.password}
-                                onChange={props.handleChange}
-                                invalid={props.errorMessage !== ""}
-                            />
+                    </MDBRow>
+                    <MDBRow className="justify-content-center">
+                        <FormGroup className="form-group mb-2 mr-sm-2 mb-sm-2">
+                            {!props.forgotPass && (
+                                <Input
+                                    type="password"
+                                    name="password"
+                                    id="Password"
+                                    placeholder="password"
+                                    value={props.password}
+                                    onChange={props.handleChange}
+                                    invalid={props.errorMessage !== ""}
+                                />
+                            )}
                             <FormFeedback>{props.errorMessage}</FormFeedback>
                         </FormGroup>
-                    </Row>
-                    <Row className="justify-content-center">
-                        <Button>Login</Button>
-                    </Row>
+                    </MDBRow>
+                    <MDBRow className="justify-content-center">
+                        <a href="/#" className="general-paragraph" onClick={props.toggleForget}>
+                            {props.forgotPass ? "I know my password" : "Forgot my password"}
+                        </a>
+                    </MDBRow>
+                    <MDBRow className="justify-content-center">
+                        {props.forgotPass && (
+                            <p
+                                className={props.notification ? "text-success" : "text-danger"}
+                            >{`${props.notification || props.errorMessage}`}</p>
+                        )}
+                    </MDBRow>
+                    <MDBRow className="justify-content-center">
+                        <MDBBtn type="submit" color="dark-green">
+                            {props.forgotPass ? "Send me an e-mail" : "Login"}
+                        </MDBBtn>
+                    </MDBRow>
                 </Form>
-            </ModalBody>
-        </Modal>
+            </MDBModalBody>
+        </MDBModal>
     );
 }

src/components/main.js

@@ -9,7 +9,8 @@ import UserProfile from "../containers/userProfile";
 import AllOrgs from "../containers/allOrgs";
 import AllPhotographers from "../containers/allPhotographers";
 import CreateProject from "../containers/createProject";
-import { ProtectedRoute } from "./UI/";
+import PasswordReset from "../containers/passwordReset";
+import { ProtectedRoute } from "./UI";
 
 export default function Main(props) {
     return (
@@ -30,6 +31,7 @@ export default function Main(props) {
                     exact
                     component={CreateProject}
                 />
+                <Route path="/login/pwreset/:token" component={PasswordReset} />
                 <Route path="/:userType/:userId" component={UserProfile} />
             </Switch>
         </main>

src/containers/createProject/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import formConfiguration from "./formConfiguration.json";
-import { MultipartForm, DonutSpin } from "../../components/UI/";
+import { MultipartForm, DonutSpin } from "../../components/UI";
 
 class createProject extends Component {
     state = {
@@ -39,7 +39,7 @@ class createProject extends Component {
 
         const formData = {};
 
-        for (let inputIdentifier in this.state.form) {
+        for (const inputIdentifier in this.state.form) {
             formData[inputIdentifier] = this.state.form[inputIdentifier].config.value;
         }
 
@@ -50,7 +50,7 @@ class createProject extends Component {
     postData = formData => {
         // TODO: send data to the backend
         console.log(formData);
-        new Promise(function(resolve) {
+        new Promise(resolve => {
             setTimeout(resolve, 3000);
         }).then(() => this.setState({ loading: false, dataSend: true }));
     };
@@ -68,8 +68,8 @@ class createProject extends Component {
     };
 
     onBlur = inputIdentifier => e => {
-        const validationRules = this.state.form[inputIdentifier].config.validationRules;
-        const value = e.target.value;
+        const { validationRules } = this.state.form[inputIdentifier].config;
+        const { value } = e.target;
 
         const form = {
             ...this.state.form,
@@ -87,7 +87,7 @@ class createProject extends Component {
     };
 
     inputChangeHandler = inputIdentifier => e => {
-        const value = e.target.value;
+        const { value } = e.target;
 
         const form = {
             ...this.state.form,
@@ -105,7 +105,7 @@ class createProject extends Component {
 
     render() {
         const formElementsArray = [];
-        for (let key in this.state.form) {
+        for (const key in this.state.form) {
             formElementsArray.push({
                 id: key,
                 config: this.state.form[key]