From 362a2d1d3229eba0385d92fe9197ea2c84e67a4c Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Fri, 6 Oct 2017 15:21:49 +0530
Subject: [PATCH] Adding user login option.

---
 .../public/themes/default/default-theme.css   |  2 +-
 .../src/main/resources/store/src/App.jsx      |  1 +
 .../store/src/common/configuration.js         |  1 +
 .../components/AppStoreBase/BaseLayout.jsx    | 12 +++--
 .../Application/ApplicationListing.jsx        |  1 +
 .../UIComponents/UserOptions/UserOptions.jsx  | 45 ++++++++++---------
 .../UIComponents/UserOptions/user-options.css | 45 +++++++++++++++++++
 .../src/main/resources/store/src/index.js     |  2 +-
 .../main/resources/store/webpack.config.js    |  1 -
 9 files changed, 84 insertions(+), 26 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/user-options.css

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/themes/default/default-theme.css
index 0afbb7ba5f8..2b7f80bffaa 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/themes/default/default-theme.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/themes/default/default-theme.css
@@ -87,7 +87,7 @@ body {
 
 .btn-header {
     margin-top: 15px;
-    margin-right: 20px;
+    margin-right: 100px;
     color: white;
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
index f1084e1993b..e00894e3eb0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
@@ -63,6 +63,7 @@ class Base extends Component {
     }
 
     render() {
+        console.log('came here/////');
         if (this.state.user !== null) {
             return (
                 <div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/common/configuration.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/common/configuration.js
index 61adb30f010..77d90dc444e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/common/configuration.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/common/configuration.js
@@ -36,6 +36,7 @@ class Configuration {
         let thisObject = this;
         axios.get(thisObject.hostConstants.baseURL + '/' + thisObject.hostConstants.appContext + "/config.json").
         then(function (response) {
+            console.log('succesfully loadedd....');
             thisObject.serverConfig = response.data.config;
             thisObject.themeConfig = response.data.theme;
             Constants.load();
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/AppStoreBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/AppStoreBase/BaseLayout.jsx
index de64011fe00..6e46e5fda8c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/AppStoreBase/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/AppStoreBase/BaseLayout.jsx
@@ -36,10 +36,12 @@ class BaseLayout extends Component {
         this.state = {
             notifications: 0,
             user: 'Admin',
-            openModal: false
+            openModal: false,
+            userOptions : false
         };
         this.logout = this.logout.bind(this);
         this.closeModal = this.closeModal.bind(this);
+        this.handleUserOptionsOnClick = this.handleUserOptionsOnClick.bind(this);
     }
 
     handleApplicationClick() {
@@ -62,6 +64,10 @@ class BaseLayout extends Component {
         this.setState({openModal: false});
     }
 
+    handleUserOptionsOnClick() {
+        this.setState({userOptions : true});
+    }
+
     render() {
         return (
             <Container noGutters fluid id="container">
@@ -72,8 +78,8 @@ class BaseLayout extends Component {
                         </span>
                         <div id="header-btn-container">
                             <i className="fw fw-notification btn-header"></i>
-                            <i className="fw fw-user btn-header">
-                                <UserOptions/>
+                            <i className="fw fw-user btn-header" onClick={this.handleUserOptionsOnClick}>
+                                <UserOptions userOptions={this.state.userOptions}/>
                             </i>
                         </div>
                         <div id="search-box">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Application/ApplicationListing.jsx
index 299e0a15137..39786db9326 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Application/ApplicationListing.jsx
@@ -238,6 +238,7 @@ class ApplicationListing extends Component {
     }
 
     render() {
+        console.log('render app listing');
         return (
             <div id="application-list" style={this.state.appListStyle}>
                 <Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/UserOptions.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/UserOptions.jsx
index d9c2fa86a63..76f42c3d3a3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/UserOptions.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/UserOptions.jsx
@@ -17,37 +17,42 @@
  */
 
 import React, {Component} from 'react';
-import Theme from '../../../theme';
+import './user-options.css';
+import AuthHandler from '../../../api/authHandler';
 
 class UserOptions extends Component {
 
     constructor() {
         super();
-        this.scriptId = "userOptions";
+        this.state = {};
     }
 
     componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
+        let user = AuthHandler.getUser();
+        if (user) {
+            if (!AuthHandler.isTokenExpired()) {
+                this.setState({user: user});
+            } else {
+                this.setState({user: null});
+            }
+        }
     }
 
     render() {
-        const {height, width} = this.props;
-        return (
-            <div class="dropdown">
-                <ul class="dropdown-menu">
-                    <li><a href="#">HTML</a></li>
-                    <li><a href="#">CSS</a></li>
-                    <li><a href="#">JavaScript</a></li>
-                </ul>
-            </div>
-        )
+        var displayOptions = this.props.userOptions ? "block" : "none";
+        if (this.state.user) {
+            return (
+                <div id='user-options-drop-down' className="dropdown-content" style={{display: displayOptions}}>
+                    <a href="#">Logout</a>
+                </div>
+            );
+        } else {
+            return (
+                <div id='user-options-drop-down' className="dropdown-content" style={{display: displayOptions}}>
+                    <a href="/store/login">Login</a>
+                </div>
+            );
+        }
     }
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/user-options.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/user-options.css
new file mode 100644
index 00000000000..8ac391a3165
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/UIComponents/UserOptions/user-options.css
@@ -0,0 +1,45 @@
+
+.dropbtn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+    background-color: #3e8e41;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
index b9bc86bba4c..04e93185f8c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
@@ -46,7 +46,7 @@ function loadStore() {
     }).catch(error => {
         addLocaleData(require('react-intl/locale-data/en'));
         let defaultLocale = Axios.create({
-            baseURL: Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales"
+            baseURL: Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales/"
             + Constants.defaultLocale + ".json"
         }).get();
         defaultLocale.then(response => {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js
index 8b9124b3f24..00f2d7dc437 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js
@@ -64,7 +64,6 @@ const config = {
         ]
     },
     resolve: {
-        // you can now require('file') instead of require('file.coffee')
         extensions: ['.jsx', '.js', '.ttf', '.woff', '.woff2', '.svg']
     }