[UI] Add loading indicator

Closes #64

client/components/login/login.js

@@ -5,21 +5,23 @@ import axios from "axios";
 import PropTypes from "prop-types";
 import qs from "qs";
 import React from "react";
-import {Link, Route} from "react-router-dom";
-import {toast} from 'react-toastify';
+import { Link, Route } from "react-router-dom";
+import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-import {loginApiUrl, loginError, loginSuccess, mainToastId} from "../../constants";
+import { loginApiUrl, loginError, loginSuccess, mainToastId } from "../../constants";
 import getAssetPath from "../../utils/get-asset-path";
 import getErrorText from "../../utils/get-error-text";
 import getParameterByName from "../../utils/get-parameter-by-name";
 import getText from "../../utils/get-text";
+import LoadingContext from "../../utils/loading-context";
 import logError from "../../utils/log-error";
 import renderAdditionalInfo from "../../utils/render-additional-info";
 import Contact from "../contact-box";
 import Modal from "../modal";
 
 export default class Login extends React.Component {
+
   constructor(props) {
     super(props);
     this.state = {
@@ -48,17 +50,19 @@ export default class Login extends React.Component {
   }
 
   handleChange(event) {
-    this.setState({[event.target.name]: event.target.value});
+    this.setState({ [event.target.name]: event.target.value });
   }
 
   handleSubmit(event) {
+    const { setLoading } = this.context;
     if (event) event.preventDefault();
-    const {orgSlug, authenticate} = this.props;
-    const {email, password, errors} = this.state;
+    const { orgSlug, authenticate } = this.props;
+    const { email, password, errors } = this.state;
     const url = loginApiUrl.replace("{orgSlug}", orgSlug);
     this.setState({
       errors: {},
     });
+    setLoading(true);
     return axios({
       method: "post",
       headers: {
@@ -75,24 +79,26 @@ export default class Login extends React.Component {
         toast.success(loginSuccess, {
           toastId: mainToastId
         });
+        setLoading(false);
       })
       .catch(error => {
-        const {data} = error.response;
+        const { data } = error.response;
         const errorText = getErrorText(error, loginError);
         logError(error, errorText);
         toast.error(errorText);
         this.setState({
           errors: {
             ...errors,
-            ...(data.email ? {email: data.email.toString()} : {email: ""}),
-            ...(data.password ? {password: data.password} : {password: ""}),
+            ...(data.email ? { email: data.email.toString() } : { email: "" }),
+            ...(data.password ? { password: data.password } : { password: "" }),
           },
         });
+        setLoading(false);
       });
   }
 
   render() {
-    const {errors, email, password} = this.state;
+    const { errors, email, password } = this.state;
     const {
       language,
       loginForm,
@@ -195,9 +201,9 @@ export default class Login extends React.Component {
                         title={
                           input_fields.email.pattern_description
                             ? getText(
-                                input_fields.email.pattern_description,
-                                language,
-                              )
+                              input_fields.email.pattern_description,
+                              language,
+                            )
                             : undefined
                         }
                       />
@@ -242,9 +248,9 @@ export default class Login extends React.Component {
                         title={
                           input_fields.password.pattern_description
                             ? getText(
-                                input_fields.password.pattern_description,
-                                language,
-                              )
+                              input_fields.password.pattern_description,
+                              language,
+                            )
                             : undefined
                         }
                       />
@@ -343,6 +349,7 @@ export default class Login extends React.Component {
   }
 }
 
+Login.contextType = LoadingContext;
 Login.propTypes = {
   loginForm: PropTypes.shape({
     social_login: PropTypes.shape({

client/components/login/login.test.js

@@ -1,9 +1,11 @@
 /* eslint-disable prefer-promise-reject-errors */
 import axios from "axios";
-import {shallow} from "enzyme";
+import { shallow } from "enzyme";
 import React from "react";
 import ShallowRenderer from "react-test-renderer/shallow";
-import {toast} from 'react-toastify';
+import { toast } from 'react-toastify';
+import PropTypes from "prop-types";
+import { loadingContextValue } from "../../utils/loading-context";
 
 import getConfig from "../../utils/get-config";
 import Login from "./login";
@@ -74,19 +76,23 @@ describe("<Login /> interactions", () => {
       lastConsoleOutuput = data;
     };
     props = createTestProps();
-    wrapper = shallow(<Login {...props} />);
+    Login.contextTypes = {
+      setLoading: PropTypes.func,
+      getLoading: PropTypes.func
+    };
+    wrapper = shallow(<Login {...props} />, { context: loadingContextValue });
   });
   afterEach(() => {
     console.error = originalError;
   });
   it("should change state values when handleChange function is invoked", () => {
     wrapper
       .find("#owisp-login-email")
-      .simulate("change", {target: {value: "test email", name: "email"}});
+      .simulate("change", { target: { value: "test email", name: "email" } });
     expect(wrapper.state("email")).toEqual("test email");
     wrapper
       .find("#owisp-login-password")
-      .simulate("change", {target: {value: "test password", name: "password"}});
+      .simulate("change", { target: { value: "test password", name: "password" } });
     expect(wrapper.state("password")).toEqual("test password");
   });
   it("should execute handleSubmit correctly when form is submitted", () => {
@@ -109,7 +115,7 @@ describe("<Login /> interactions", () => {
           statusText: "Internal server error",
           response: {
             data: {
-              detail:	"Internal server error",
+              detail: "Internal server error",
             }
           }
         });
@@ -126,7 +132,7 @@ describe("<Login /> interactions", () => {
       .mockImplementationOnce(() => {
         return Promise.resolve();
       });
-    const event = {preventDefault: () => {}};
+    const event = { preventDefault: () => { } };
     const spyToast = jest.spyOn(toast, 'error');
     return wrapper
       .instance()

client/components/organization-wrapper/index.css

@@ -7,6 +7,10 @@
   min-height: 100vh;
   min-width: min-content;
 }
+.owisp-app-container.no-scroll {
+  height: 100vh;
+  overflow: hidden;
+}
 .owisp-middle {
   flex-grow: 1;
 }
@@ -18,6 +22,18 @@
   justify-content: center;
   align-items: center;
 }
+.owisp-full-page-loader-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 1);
+}
 .owisp-loader {
   border: 8px solid #f3f3f3;
   border-top: 8px solid #2b3a42;