Adding user login option.

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;
 }
 

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>

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

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">

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>

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

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

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 => {

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']
     }