From 9c4539acfecd1ad484184ff95b63577c3683efa3 Mon Sep 17 00:00:00 2001
From: Nedim Uka <nedim@saburly.com>
Date: Mon, 24 Sep 2018 15:54:22 +0200
Subject: [PATCH 1/2] Replaced login screen with loader, wile validating access
 token

---
 frontend/src/App.js                          | 25 ++++++++++--------
 frontend/src/containers/LoaderContainer.jsx  | 27 ++++++++++++++++++++
 frontend/src/containers/loaderContainer.scss |  7 +++++
 frontend/src/containers/login/LogInForm.jsx  |  8 +-----
 4 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/containers/LoaderContainer.jsx
 create mode 100644 frontend/src/containers/loaderContainer.scss

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 935e4af..c9d37ee 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,34 +1,37 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import ContentContainer from './containers/ContentContainer.jsx';
 import LogInContainer from './containers/login/LogInContainer.jsx';
 import './App.css';
 import './mainComponents/box/WiaasBox.css';
 import NotificationBox from './mainComponents/notification/NotificationBox.jsx';
 import DialogBox from './mainComponents/dialog/DialogBox.jsx';
+import LoaderContainer from './containers/LoaderContainer';
 
 class App extends Component {
+
   render() {
-    const {isLoggedIn, updateMessages, isDialogOpen, dialogContent} = this.props;
+    const { isLoggedIn, updateMessages, isDialogOpen, dialogContent } = this.props;
+    let hasAccesToken = localStorage.accessToken;
 
     return (<div className="App">
 
       {
         !isLoggedIn
-          ? (<LogInContainer/>)
-          : (<ContentContainer className="content"/>)
+          ? hasAccesToken ? (<LoaderContainer />) : (<LogInContainer />)
+          : (<ContentContainer className="content" />)
       }
-      <NotificationBox messages={updateMessages}/>
-      <DialogBox isDialogOpen={isDialogOpen} dialogContent={dialogContent}/>
+      <NotificationBox messages={updateMessages} />
+      <DialogBox isDialogOpen={isDialogOpen} dialogContent={dialogContent} />
     </div>);
   }
 }
 
 const mapStateToProps = (state) => ({
-    isLoggedIn: state.auth.isLoggedIn,
-    updateMessages: state.notificationReducer.updateMessages,
-    isDialogOpen: state.dialogReducer.isDialogOpen,
-    dialogContent: state.dialogReducer.dialogContent
+  isLoggedIn: state.auth.isLoggedIn,
+  updateMessages: state.notificationReducer.updateMessages,
+  isDialogOpen: state.dialogReducer.isDialogOpen,
+  dialogContent: state.dialogReducer.dialogContent
 });
 
 export default connect(mapStateToProps)(App);
diff --git a/frontend/src/containers/LoaderContainer.jsx b/frontend/src/containers/LoaderContainer.jsx
new file mode 100644
index 0000000..6088518
--- /dev/null
+++ b/frontend/src/containers/LoaderContainer.jsx
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import './loaderContainer.css';
+import { validateAccessToken } from '../actions/login/authActions';
+import {
+    Col
+} from 'reactstrap';
+
+class LoaderContainer extends Component {
+
+    componentDidMount() {
+        if (localStorage.accessToken) {
+            this.props.dispatch(validateAccessToken());
+        }
+    }
+
+    render() {
+        return (
+            <Col xl="12" className="loader">
+                <i className="fa fa-spinner fa-spin fa-8x login-loader" aria-hidden="true"></i>
+            </Col>
+        )
+    }
+
+}
+
+export default connect()(LoaderContainer);
\ No newline at end of file
diff --git a/frontend/src/containers/loaderContainer.scss b/frontend/src/containers/loaderContainer.scss
new file mode 100644
index 0000000..9d5514a
--- /dev/null
+++ b/frontend/src/containers/loaderContainer.scss
@@ -0,0 +1,7 @@
+.fa-8x {
+    font-size: 8em;
+}
+
+.login-loader {
+    padding: 100px
+}
diff --git a/frontend/src/containers/login/LogInForm.jsx b/frontend/src/containers/login/LogInForm.jsx
index 7d69f4e..6da0db9 100644
--- a/frontend/src/containers/login/LogInForm.jsx
+++ b/frontend/src/containers/login/LogInForm.jsx
@@ -9,7 +9,7 @@ import {
     Button
 } from 'reactstrap';
 import './login.css';
-import {validateCredentials, validateAccessToken, generatePassword} from '../../actions/login/authActions';
+import {validateCredentials, generatePassword} from '../../actions/login/authActions';
 import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
 import {loginMessages, loginTexts} from '../../constants/authConstants';
 
@@ -53,12 +53,6 @@ class LogInForm extends Component {
         this.props.dispatch(generatePassword(currentDialogState.inputValue));
     }
 
-    componentDidMount() {
-        if (localStorage.accessToken) {
-            this.props.dispatch(validateAccessToken());
-        }
-    }
-
     setDialogParams(dialogContent) {
         this.props.dispatch(setDialogOpenFlag(true));
         this.props.dispatch(setDialogContent(dialogContent));

From eab040b13d8aeb3cdb5bda77e3bcf2461c9493e4 Mon Sep 17 00:00:00 2001
From: Nedim Uka <nedim@saburly.com>
Date: Tue, 25 Sep 2018 11:38:38 +0200
Subject: [PATCH 2/2] Reduced loader size

---
 frontend/src/containers/LoaderContainer.jsx  | 2 +-
 frontend/src/containers/loaderContainer.scss | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/containers/LoaderContainer.jsx b/frontend/src/containers/LoaderContainer.jsx
index 6088518..5b14039 100644
--- a/frontend/src/containers/LoaderContainer.jsx
+++ b/frontend/src/containers/LoaderContainer.jsx
@@ -17,7 +17,7 @@ class LoaderContainer extends Component {
     render() {
         return (
             <Col xl="12" className="loader">
-                <i className="fa fa-spinner fa-spin fa-8x login-loader" aria-hidden="true"></i>
+                <i className="fa fa-spinner fa-spin fa-4x login-loader" aria-hidden="true"></i>
             </Col>
         )
     }
diff --git a/frontend/src/containers/loaderContainer.scss b/frontend/src/containers/loaderContainer.scss
index 9d5514a..efd6a3b 100644
--- a/frontend/src/containers/loaderContainer.scss
+++ b/frontend/src/containers/loaderContainer.scss
@@ -1,7 +1,3 @@
-.fa-8x {
-    font-size: 8em;
-}
-
 .login-loader {
     padding: 100px
 }