From b3d2abf99eaa1a0cf1f93643f42acaa02ef68fd1 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Mon, 11 Sep 2017 13:20:18 +0530
Subject: [PATCH 1/8] Added tags to platform create page and basic backend
 integration api implementation.

---
 .../src/main/resources/publisher/package.json |  28 ++---
 .../src/main/resources/publisher/src/App.css  |   0
 .../src/main/resources/publisher/src/App.jsx  |  22 +++-
 .../src/main/resources/publisher/src/App.scss |   5 +
 .../publisher/src/api/AuthHandler.js          |  28 +++++
 .../resources/publisher/src/api/Endpoints.js  | 103 +++++++++++++++++-
 .../src/api/helpers/AppMgtApiHelpers.js       |  49 +++++++++
 .../publisher/src/common/constants.js         |  14 +++
 .../Application/ApplicationCreate.jsx         |   7 +-
 .../Application/CreateSteps/Step2.jsx         |  21 ++--
 .../components/Platform/PlatformCreate.jsx    |  72 ++++++++++++
 .../components/Platform/PlatformListing.jsx   |   4 +-
 .../src/components/User/Login/Login.jsx       |  98 ++++++++++-------
 13 files changed, 376 insertions(+), 75 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.scss
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
index 5e5fd515b50..445560ff204 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
@@ -11,38 +11,40 @@
   "dependencies": {
     "axios": "^0.16.2",
     "flux": "^3.1.3",
-    "history": "^4.6.3",
+    "history": "^4.7.2",
     "latest-version": "^3.1.0",
-    "material-ui": "^0.19.0",
+    "material-ui": "^0.19.1",
     "prop-types": "^15.5.10",
     "qs": "^6.5.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-dropzone": "^4.1.0",
+    "react-dropzone": "^4.1.2",
     "react-images-uploader": "^1.1.0",
-    "react-material-ui-form-validator": "^0.5.0",
-    "react-modal": "^2.2.2",
-    "react-router": "^4.1.2",
-    "react-router-dom": "^4.1.2",
+    "react-material-ui-form-validator": "^0.5.1",
+    "react-modal": "^2.3.2",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.10",
     "react-sliding-pane": "^1.2.3",
     "react-tap-event-plugin": "^2.0.1"
   },
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
-    "chai": "^4.0.2",
     "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "css-loader": "^0.28.2",
+    "babel-register": "^6.26.0",
+    "chai": "^4.1.2",
+    "css-loader": "^0.28.7",
     "less": "^2.7.2",
     "less-loader": "^4.0.4",
     "mocha": "^3.4.1",
     "mock-local-storage": "^1.0.2",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
     "style-loader": "^0.18.1",
-    "webpack": "^2.5.0"
+    "webpack": "^2.7.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 9dac4fa9c29..24dcb2848ae 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import './App.css';
+import './App.scss';
 import React, {Component} from 'react';
 import createHistory from 'history/createBrowserHistory';
 import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
@@ -54,12 +54,21 @@ class Base extends Component {
     constructor() {
         super();
         this.state = {
-            user: "admin"
+            user: "s"
         }
     }
 
+    componentWillMount() {
+
+    }
+
+    componentDidMount() {
+
+    }
+
     render() {
         if (this.state.user) {
+            console.log("Have User.");
             return (
                 <div className="container">
                     <BaseLayout>
@@ -69,8 +78,8 @@ class Base extends Component {
                             <Route exact path={"/assets/apps/create"} component={ApplicationCreate}/>
                             <Route exact path={"/assets/platforms"} component={PlatformListing}/>
                             <Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
-                            <Route exact path={"/assets/apps/:app"} />
-                            <Route exact path={"/assets/apps/:app/edit"} />
+                            <Route exact path={"/assets/apps/:app"}/>
+                            <Route exact path={"/assets/apps/:app/edit"}/>
                             <Route exact path={"/assets/platforms/:platform"}/>
                             <Route exact path={"/assets/platforms/:platform/edit"}/>
                             <Route exact path={"/assets/reviews"}/>
@@ -80,8 +89,11 @@ class Base extends Component {
                     </BaseLayout>
                 </div>
             )
+        } else {
+            console.log("No user");
+            return (<Redirect to={"/login"}/>)
         }
-        return (<Redirect to={"/login"}/>)
+
     }
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.scss b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.scss
new file mode 100644
index 00000000000..3f4bc89fefb
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.scss
@@ -0,0 +1,5 @@
+.middle-content {
+    width: 95%;
+    height: 100%;
+    margin: 1% 0 0 0;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js
index 9eb827eb700..62604f68a36 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js
@@ -15,3 +15,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+'use strict';
+
+import Axios from 'axios';
+
+/**
+ * Handles all tasks related to Authentication and Authorization.
+ * Generate access tokens, verify the user has necessary permissions etc.
+ * */
+class AuthHandler {
+
+    /**
+     * Generate client id and client secret to generate access tokens.
+     * */
+    login(userName, password) {
+        Axios.post("https://localhost:9443/auth/application-mgt/v1.0/auth/tokens?userName=admin&password=admin").then()
+    }
+
+    isLoggedIn() {
+
+    }
+
+    getloggedInUser() {
+
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js
index e3e76b69c23..0f6ab3bd140 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js
@@ -15,7 +15,106 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+'use strict';
+
+import Helper from './helpers/AppMgtApiHelpers';
 
 /**
- * Defines the list of App Manager APIs.
- * */
\ No newline at end of file
+ * Application related apis
+ * */
+export default class Endpoint{
+
+    /**
+     * Api for create an application.
+     * @param: applicationData: The application data object. This contains an object array of each step data from
+     * application creation wizard.
+     *
+     * From that data array, the proper application object is created and send it to the api.
+     * */
+    static createApplication(applicationData) {
+
+        console.log("In application create application", applicationData);
+        Helper.buildApplication(applicationData);
+
+    }
+
+    /**
+     * Method to handle application release process.
+     * */
+    static releaseApplication() {
+
+    }
+
+    /**
+     * Edit created application.
+     * @param applicationData: The modified application data.
+     * */
+    static editApplication(applicationData) {
+
+    }
+
+    /**
+     * Get all the created applications for the user.
+     * */
+    static getApplications() {
+
+    }
+
+    /**
+     * Get specific application.
+     * @param appId : The application Id.
+     * */
+    static getApplication(appId) {
+
+    }
+
+    /**
+     * Delete specified application.
+     * @param appId: The id of the application which is to be deleted.
+     * */
+    static deleteApplication(appId) {
+
+    }
+
+
+    /**
+     * Platform related apis
+     * */
+    /**
+     * Create a new Platform
+     * @param platformData: The platform data object.
+     * */
+    static createPlatform(platformData) {
+        // /api/application-mgt/v1.0/platforms/1.0.0/
+        // {
+        //     identifier: "${platform_identifier}",
+        //     name: "New Platform",
+        //     description : "New Platform"
+        // }
+    }
+
+    /**
+     * Get available platforms
+     * */
+    static getPlatforms() {
+
+    }
+
+    /**
+     * Get the user specified platform
+     * @param platformId: The identifier of the platform
+     * */
+    static getPlatform(platformId) {
+
+    }
+
+    /**
+     * Delete specified platform
+     * @param platformId: The id of the platform which is to be deleted.
+     * */
+    static deletePlatform(platformId) {
+
+    }
+
+
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js
new file mode 100644
index 00000000000..c52d9ed6cde
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use strict';
+
+/**
+ * Helper methods for app publisher.
+ * */
+export default class Helper {
+
+    /**
+     * Generate application object from form data passed.
+     * @param appData: Application data from the application creation form.
+     * */
+    static buildApplication(appData) {
+
+        let application = {};
+        let images = {};
+
+        for (var step in appData) {
+            let tmpData = appData[step].data.step;
+            for (var prop in tmpData) {
+                if (prop === 'banner' || prop === 'screenshots' || prop === 'icon') {
+                    images[prop] = tmpData[prop];
+                } else {
+                    application[prop] = tmpData[prop];
+                }
+            }
+        }
+
+        console.log(application, images);
+    }
+
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
index 9eb827eb700..405042531c5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
@@ -15,3 +15,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
+    ' perm:application:delete perm:platform:add perm:platform:remove perm:roles:view perm:devices:view';
+
+TOKEN_ENDPOINT = '/token';
+DYNAMIC_CLIENT_REGISTER_ENDPOINT = '/api-application-registration/register';
+
+appManagerEndpoints = {
+  GET_ALL_APPS: '/api/application-mgt/v1.0/applications/1.0.0/',
+  CREATE_APP: '/api/application-mgt/v1.0/applications/1.0.0/',
+  UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
+};
+
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 870ed0cdb9f..2542eaa5f7a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -18,6 +18,7 @@
 
 import React, {Component} from 'react';
 import Dialog from 'material-ui/Dialog';
+import Endpoint from '../../api/Endpoints';
 import {withRouter} from 'react-router-dom';
 import FlatButton from 'material-ui/FlatButton';
 import {Step1, Step2, Step3} from './CreateSteps';
@@ -80,6 +81,8 @@ class ApplicationCreate extends Component {
      * */
     handleSubmit = () => {
         console.log(this.state.stepData);
+        Endpoint.createApplication(this.state.stepData);
+
     };
 
     /**
@@ -164,11 +167,10 @@ class ApplicationCreate extends Component {
                               setData={this.setStepData}
                               removeData={this.removeStepData}/>;
             default:
-                return 'You\'re a long way from home sonny jim!';
+                return <div></div>;
         }
     }
 
-
     render() {
         const {finished, stepIndex} = this.state;
         const contentStyle = {margin: '0 16px'};
@@ -189,7 +191,6 @@ class ApplicationCreate extends Component {
             />,
         ];
 
-
         return (
             <div className="middle createapplicationmiddle">
                 <Card className="creataapplicationcard">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 198055a0925..24c0b906305 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -56,16 +56,16 @@ class Step2 extends Component {
         super();
         this.state = {
             tags: [],
+            icon: [],
+            title: "",
+            errors: {},
+            banner: [],
             defValue: "",
             category: 0,
             visibility: 0,
-            errors: {},
-            title: "",
-            shortDescription: "",
             description: "",
-            banner: [],
             screenshots: [],
-            icon: []
+            shortDescription: ""
         };
         this.scriptId = "application-create-step2";
     }
@@ -243,13 +243,14 @@ class Step2 extends Component {
      * */
     _setStepData() {
         let stepData = {
-            title: this.state.title,
-            description: this.state.description,
-            shortDescription: this.state.shortDescription,
             tags: this.state.tags,
+            icon: this.state.icon,
+            title: this.state.title,
             banner: this.state.banner,
+            category: this.state.category,
             screenshots: this.state.screenshots,
-            icon: this.state.icon
+            description: this.state.description,
+            shortDescription: this.state.shortDescription
         };
 
         this.props.setData("step2", {step: stepData});
@@ -346,7 +347,7 @@ class Step2 extends Component {
                         <TextField
                             id="tags"
                             errorText={this.state.errors["tags"]}
-                            hintText="Enter application tags.."
+                            hintText="Enter Application tags.."
                             floatingLabelText="Tags*"
                             floatingLabelFixed={true}
                             value={this.state.defValue}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index 3c9c8acabf9..d5faa900e08 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -17,6 +17,8 @@
  */
 
 import PropTypes from 'prop-types';
+import Axios from 'axios';
+import Chip from 'material-ui/Chip';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
 import Toggle from 'material-ui/Toggle';
@@ -48,6 +50,8 @@ class PlatformCreate extends Component {
     constructor() {
         super();
         this.state = {
+            tags: [],
+            defValue: "",
             enabled: true,
             allTenants: false,
             files: [],
@@ -104,6 +108,55 @@ class PlatformCreate extends Component {
         this.setState({selectedProperty: value});
     };
 
+    /**
+     * Handles Chip delete function.
+     * Removes the tag from state.tags
+     * */
+    _handleTagDelete = (key) => {
+        this.chipData = this.state.tags;
+        const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
+        this.chipData.splice(chipToDelete, 1);
+        this.setState({tags: this.chipData});
+    };
+
+    /**
+     * Create a tag on Enter key press and set it to the state.
+     * Clears the tags text field.
+     * Chip gets two parameters: Key and value.
+     * */
+    _addTags(event) {
+        let tags = this.state.tags;
+        if (event.charCode === 13) {
+            event.preventDefault();
+            tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
+            this.setState({tags, defValue: ""});
+        }
+    }
+
+    /**
+     * Creates Chip array from state.tags.
+     * */
+    _renderChip(data) {
+        return (
+            <Chip
+                key={data.key}
+                onRequestDelete={() => this._handleTagDelete(data.key)}
+                style={this.styles.chip}
+            >
+                {data.value}
+            </Chip>
+        );
+    }
+
+    /**
+     * Set the value for tag.
+     * */
+    _handleTagChange(event) {
+        let defaultValue = this.state.defValue;
+        defaultValue = event.target.value;
+        this.setState({defValue: defaultValue})
+    }
+
     /**
      * Remove the selected property from the property list.
      * */
@@ -161,6 +214,10 @@ class PlatformCreate extends Component {
     };
 
     _onCreatePlatform() {
+        //Call the platform create api.
+        let platform = {};
+
+
 
     }
 
@@ -193,6 +250,8 @@ class PlatformCreate extends Component {
             selectedProperty,
             propertyTypes,
             name,
+            tags,
+            defValue,
             description,
             property} = this.state;
 
@@ -236,6 +295,19 @@ class PlatformCreate extends Component {
                                     onToggle={this._handleToggle.bind(this)}
                                     toggled={enabled}
                                 /> <br/>
+                                <TextField
+                                    id="tags"
+                                    hintText="Enter Platform tags.."
+                                    floatingLabelText="Tags*"
+                                    floatingLabelFixed={true}
+                                    value={defValue}
+                                    onChange={this._handleTagChange.bind(this)}
+                                    onKeyPress={this._addTags.bind(this)}
+                                /><br/>
+                                <div style={this.styles.wrapper}>
+                                    {tags.map(this._renderChip, this)}
+                                </div>
+                                <br/>
                                 <div>
                                     <p className="createplatformproperties">Platform Properties</p>
                                     <div id="property-container">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 34387fca7ea..0f994eb417d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -97,8 +97,8 @@ class PlatformListing extends Component {
                                handleRowClick={this._onRowClick.bind(this)}
                                noDataMessage={{type: 'button', text: 'Create Platform'}}/>
                 </Card>
-
-            </div>);
+            </div>
+        );
     }
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
index 3b93e9e1b4c..5987730bab1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
@@ -20,10 +20,10 @@ import qs from 'qs';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Checkbox from 'material-ui/Checkbox';
+import TextField from 'material-ui/TextField';
 import {Redirect, Switch} from 'react-router-dom';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
 
 //todo: remove the {TextValidator, ValidatorForm} and implement it manually.
 
@@ -40,36 +40,43 @@ class Login extends Component {
     constructor() {
         super();
         this.state = {
-            isLoggedIn: true,
+            isLoggedIn: false,
             referrer: "/",
             userName: "",
             password: "",
-            rememberMe: true
+            rememberMe: true,
+            errors: {}
         }
     }
 
+    componentWillMount() {
+        console.log("IN Login")
+    }
+
     componentDidMount() {
-        let queryString = this.props.location.search;
-        console.log(queryString);
-        queryString = queryString.replace(/^\?/, '');
-        /* With QS version up we can directly use {ignoreQueryPrefix: true} option */
-        let params = qs.parse(queryString);
-        if (params.referrer) {
-            this.setState({referrer: params.referrer});
-        }
+        console.log("in Login")
+        // let queryString = this.props.location.search;
+        // console.log(queryString);
+        // queryString = queryString.replace(/^\?/, '');
+        // /* With QS version up we can directly use {ignoreQueryPrefix: true} option */
+        // let params = qs.parse(queryString);
+        // if (params.referrer) {
+        //     this.setState({referrer: params.referrer});
+        // }
     }
 
-    handleLogin(event) {
+    _handleLogin(event) {
         event.preventDefault();
+        this._validateForm();
     }
 
     /**
      * Handles the username field change event.
      * */
-    onUserNameChange(event) {
+    _onUserNameChange(event, value) {
         this.setState(
             {
-                userName: event.target.value
+                userName: value
             }
         );
     }
@@ -77,10 +84,10 @@ class Login extends Component {
     /**
      * Handles the password field change event.
      * */
-    onPasswordChange(event) {
+    _onPasswordChange(event, value) {
         this.setState(
             {
-                password: event.target.value
+                password: value
             }
         );
     }
@@ -88,7 +95,7 @@ class Login extends Component {
     /**
      * Handles the remember me check.
      * */
-    handleRememberMe() {
+    _handleRememberMe() {
         this.setState(
             {
                 rememberMe: !this.state.rememberMe
@@ -96,6 +103,22 @@ class Login extends Component {
         );
     }
 
+    /**
+     * Validate the login form.
+     * */
+    _validateForm() {
+        let errors = {};
+        if (!this.state.password) {
+            errors["passwordError"] = "Password is Required";
+        }
+
+        if (!this.state.userName) {
+            errors["userNameError"] = "User Name is Required";
+        }
+
+        this.setState({errors: errors}, console.log(errors));
+    }
+
     render() {
 
         if (!this.state.isLoggedIn) {
@@ -107,37 +130,32 @@ class Login extends Component {
                     <Card>
                         <CardTitle title="WSO2 IoT App Publisher"/>
                         <CardActions>
-                            <ValidatorForm
-                                ref="form"
-                                onSubmit={this.handleLogin.bind(this)}
-                                onError={errors => console.log(errors)}>
-                                <TextValidator
-                                    floatingLabelText="User Name"
+                            <form onSubmit={this._handleLogin.bind(this)}>
+                                <TextField
+                                    hintText="Enter the User Name."
+                                    id="username"
+                                    errorText={this.state.errors["userNameError"]}
+                                    floatingLabelText="User Name*"
                                     floatingLabelFixed={true}
-                                    onChange={this.onUserNameChange.bind(this)}
-                                    name="userName"
-                                    validators={['required']}
-                                    errorMessages={['User Name is required']}
                                     value={this.state.userName}
-                                />
-                                <br/>
-                                <TextValidator
-                                    floatingLabelText="Password"
-                                    floatingLabelFixed={true}
-                                    onChange={this.onPasswordChange.bind(this)}
-                                    name="password"
+                                    onChange={this._onUserNameChange.bind(this)}
+                                /><br/>
+                                <TextField
+                                    hintText="Enter the Password."
+                                    id="password"
                                     type="password"
+                                    errorText={this.state.errors["passwordError"]}
+                                    floatingLabelText="Password*"
+                                    floatingLabelFixed={true}
                                     value={this.state.password}
-                                    validators={['required']}
-                                    errorMessages={['Password is required']}
-                                />
-                                <br/>
+                                    onChange={this._onPasswordChange.bind(this)}
+                                /><br/>
                                 <Checkbox label="Remember me."
-                                          onCheck={this.handleRememberMe.bind(this)}
+                                          onCheck={this._handleRememberMe.bind(this)}
                                           checked={this.state.rememberMe}/>
                                 <br/>
                                 <RaisedButton type="submit" label="Login"/>
-                            </ValidatorForm>
+                            </form>
                         </CardActions>
                     </Card>
                 </div>);

From 7ff5823e6d239a8b967ec0030c66a9b69f157dc0 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Tue, 12 Sep 2017 20:16:30 +0530
Subject: [PATCH 2/8] Authentication handling initial impl and code formatting
 according to
 https://github.com/airbnb/javascript/tree/master/react#basic-rules.

---
 .../src/main/resources/publisher/src/App.jsx  |  12 +-
 .../publisher/src/api/AuthHandler.js          |  45 ----
 .../resources/publisher/src/api/Endpoints.js  | 120 ---------
 .../publisher/src/api/authHandler.js          | 106 ++++++++
 .../resources/publisher/src/api/data/user.js  | 112 +++++++++
 .../resources/publisher/src/api/data/utils.js |  94 +++++++
 .../resources/publisher/src/api/endpoints.js  | 183 ++++++++++++++
 ...ppMgtApiHelpers.js => appMgtApiHelpers.js} |  19 +-
 .../publisher/src/common/constants.js         |  32 ++-
 .../Application/ApplicationCreate.jsx         |  48 ++--
 .../Application/ApplicationListing.jsx        |  91 +++----
 .../Application/CreateSteps/Step1.jsx         |  47 ++--
 .../Application/CreateSteps/Step2.jsx         | 234 ++++++++++--------
 .../Application/CreateSteps/Step3.jsx         |  58 +++--
 .../src/components/Base/BaseLayout.jsx        | 101 ++++----
 .../components/Platform/PlatformCreate.jsx    | 164 +++++++-----
 .../components/Platform/PlatformListing.jsx   |  23 +-
 .../src/components/UIComponents/DataTable.jsx |  29 ++-
 .../UIComponents/DataTableHeader.jsx          |  12 +-
 .../components/UIComponents/DataTableRow.jsx  |  32 ++-
 .../src/components/User/Login/Login.jsx       |  51 ++--
 .../publisher/src/components/index.js         |   4 +-
 22 files changed, 1057 insertions(+), 560 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/{AppMgtApiHelpers.js => appMgtApiHelpers.js} (69%)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 24dcb2848ae..4b55d0e77df 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -18,6 +18,7 @@
 
 import './App.scss';
 import React, {Component} from 'react';
+import AuthHandler from './api/authHandler';
 import createHistory from 'history/createBrowserHistory';
 import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
@@ -54,12 +55,19 @@ class Base extends Component {
     constructor() {
         super();
         this.state = {
-            user: "s"
+            user: null
+
         }
     }
 
     componentWillMount() {
+        let user = AuthHandler.getUser();
 
+        if (user) {
+            if (!AuthHandler.isTokenExpired()) {
+                this.setState({user: user});
+            }
+        }
     }
 
     componentDidMount() {
@@ -67,7 +75,7 @@ class Base extends Component {
     }
 
     render() {
-        if (this.state.user) {
+        if (this.state.user !== null) {
             console.log("Have User.");
             return (
                 <div className="container">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js
deleted file mode 100644
index 62604f68a36..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/AuthHandler.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-
-import Axios from 'axios';
-
-/**
- * Handles all tasks related to Authentication and Authorization.
- * Generate access tokens, verify the user has necessary permissions etc.
- * */
-class AuthHandler {
-
-    /**
-     * Generate client id and client secret to generate access tokens.
-     * */
-    login(userName, password) {
-        Axios.post("https://localhost:9443/auth/application-mgt/v1.0/auth/tokens?userName=admin&password=admin").then()
-    }
-
-    isLoggedIn() {
-
-    }
-
-    getloggedInUser() {
-
-    }
-
-
-
-}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js
deleted file mode 100644
index 0f6ab3bd140..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/Endpoints.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-
-import Helper from './helpers/AppMgtApiHelpers';
-
-/**
- * Application related apis
- * */
-export default class Endpoint{
-
-    /**
-     * Api for create an application.
-     * @param: applicationData: The application data object. This contains an object array of each step data from
-     * application creation wizard.
-     *
-     * From that data array, the proper application object is created and send it to the api.
-     * */
-    static createApplication(applicationData) {
-
-        console.log("In application create application", applicationData);
-        Helper.buildApplication(applicationData);
-
-    }
-
-    /**
-     * Method to handle application release process.
-     * */
-    static releaseApplication() {
-
-    }
-
-    /**
-     * Edit created application.
-     * @param applicationData: The modified application data.
-     * */
-    static editApplication(applicationData) {
-
-    }
-
-    /**
-     * Get all the created applications for the user.
-     * */
-    static getApplications() {
-
-    }
-
-    /**
-     * Get specific application.
-     * @param appId : The application Id.
-     * */
-    static getApplication(appId) {
-
-    }
-
-    /**
-     * Delete specified application.
-     * @param appId: The id of the application which is to be deleted.
-     * */
-    static deleteApplication(appId) {
-
-    }
-
-
-    /**
-     * Platform related apis
-     * */
-    /**
-     * Create a new Platform
-     * @param platformData: The platform data object.
-     * */
-    static createPlatform(platformData) {
-        // /api/application-mgt/v1.0/platforms/1.0.0/
-        // {
-        //     identifier: "${platform_identifier}",
-        //     name: "New Platform",
-        //     description : "New Platform"
-        // }
-    }
-
-    /**
-     * Get available platforms
-     * */
-    static getPlatforms() {
-
-    }
-
-    /**
-     * Get the user specified platform
-     * @param platformId: The identifier of the platform
-     * */
-    static getPlatform(platformId) {
-
-    }
-
-    /**
-     * Delete specified platform
-     * @param platformId: The id of the platform which is to be deleted.
-     * */
-    static deletePlatform(platformId) {
-
-    }
-
-
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
new file mode 100644
index 00000000000..e7f9e60fc0f
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+
+import Axios from 'axios';
+import User from './data/user';
+import Utils from './data/utils';
+import Constants from "../common/constants";
+
+/**
+ * Handles all tasks related to Authentication and Authorization.
+ * Generate access tokens, verify the user has necessary permissions etc.
+ * */
+class AuthHandler {
+
+    /**
+     * Sends a request to the auth handler endpoint (auth/application-mgt/v1.0/auth/login) and generate token pair.
+     * @param userName: The user name of the user.
+     * @param password: The user password.
+     * @return Object: The response object from the axios post.
+     * */
+    static login(userName, password) {
+        const headers = {"Content-type": "application/json"};
+        let login_promise = Axios.post("https://localhost:9443/auth/application-mgt/v1.0/auth/login?userName=admin&password=admin",
+            null, {headers: headers});
+
+        login_promise.then(response => {
+                console.log(response);
+                const userName = response.data.userName;
+                const validityPeriod = response.data.expires_in; // In seconds
+                const WSO2_IOT_TOKEN = response.data.access_token;
+                const refreshToken = response.data.refresh_token;
+                const clientId = response.data.application_info[0].consumerKey;
+                const clientSecret = response.data.application_info[0].consumerSecret;
+
+                const user = new User(userName, clientId, clientSecret, validityPeriod);
+                console.log(user);
+                user.setAuthToken(WSO2_IOT_TOKEN, validityPeriod);
+                AuthHandler.setUser(user);
+            }
+        );
+
+
+        return login_promise;
+    };
+
+    /**
+     * Persists the user object in browser's local storage.
+     * @param user: The user object.
+     * */
+    static setUser(user) {
+        if (!user instanceof User) {
+            throw "Invalid user object";
+        }
+        localStorage.setItem(Constants.userConstants.WSO2_USER, JSON.stringify(user.toJson()));
+        /* TODO: IMHO it's better to get this key (`wso2_user`) from configs */
+    }
+
+    /**
+     * Get the logged in user.
+     * @return User: The logged in user object.
+     * */
+    static getUser() {
+        const userData = localStorage.getItem(Constants.userConstants.WSO2_USER);
+        const partialToken = Utils.getCookie(Constants.userConstants.PARTIAL_TOKEN);
+
+        if (!(userData && partialToken)) {
+            return null;
+        }
+        return User.fromJson(JSON.parse(userData));
+    }
+
+    isLoggedIn() {
+
+    }
+
+    logout() {
+
+    }
+
+    /**
+     * Checks whether the access token is expired.
+     * @return boolean: True if expired. False otherwise.
+     * */
+    static isTokenExpired() {
+        const userData = AuthHandler.getUser().getAuthToken();
+        return (Date.now() - userData._createdTime) > userData._expires;
+    }
+}
+
+export default AuthHandler;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js
new file mode 100644
index 00000000000..c9363a82edb
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+"use strict";
+
+import Utils from './utils'
+import Constants  from '../../common/constants';
+/**
+ * Represent an user logged in to the application, There will be allays one user per session and
+ * this user details will be persist in browser localstorage.
+ */
+export default class User {
+    constructor(name, clientId, clientSecret, validityPeriod) {
+        if (User._instance) {
+            return User._instance;
+        }
+
+        this._userName = name;
+        this._clientId = clientId;
+        this._clientSecret = clientSecret;
+        this._expires = validityPeriod;
+        this._createdTime = Date.now();
+        User._instance = this;
+    }
+
+    /**
+     * OAuth scopes which are available for use by this user
+     * @returns {Array} : An array of scopes
+     */
+    get scopes() {
+        return this._scopes;
+    }
+
+    /**
+     * Set OAuth scopes available to be used by this user
+     * @param {Array} newScopes :  An array of scopes
+     */
+    set scopes(newScopes) {
+        Object.assign(this.scopes, newScopes);
+    }
+
+    /**
+     * Get the JS accessible access token fragment from cookie storage.
+     * @returns {String|null}
+     */
+    getAuthToken() {
+        return Utils.getCookie(Constants.userConstants.PARTIAL_TOKEN);
+    }
+
+    /**
+     * Store the JavaScript accessible access token segment in cookie storage
+     * @param {String} newToken : Part of the access token which needs when accessing REST API
+     * @param {Number} validityPeriod : Validity period of the cookie in seconds
+     */
+    setAuthToken(newToken, validityPeriod) {
+        Utils.delete_cookie(Constants.userConstants.PARTIAL_TOKEN);
+        Utils.setCookie(Constants.userConstants.PARTIAL_TOKEN, newToken, validityPeriod);
+    }
+
+    /**
+     *
+     * @param type
+     */
+    checkPermission(type) {
+        throw ("Not implemented!");
+    }
+
+    /**
+     * Provide user data in JSON structure.
+     * @returns {JSON} : JSON representation of the user object
+     */
+    toJson() {
+        return {
+            name: this._userName,
+            clientId: this._clientId,
+            clientSecret: this._clientSecret,
+            expires: this._expires
+        };
+    }
+
+    /**
+     * User utility method to create an user from JSON object.
+     * @param {JSON} userJson : Need to provide user information in JSON structure to create an user object
+     * @returns {User} : An instance of User(this) class.
+     */
+    static fromJson(userJson) {
+
+        const _user = new User(userJson.name);
+        _user._clientId = userJson.clientId;
+        _user._clientSecret = userJson.clientSecret;
+        _user._expires = userJson.expires;
+
+        console.log(_user);
+        return _user;
+    }
+}
+
+User._instance = null; // A private class variable to preserve the single instance of a swaggerClient
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js
new file mode 100644
index 00000000000..28a654816eb
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Utility class for Publisher application
+ */
+class PublisherUtils {
+
+    /**
+     * TODO: Remove this method one the initial phase is done, This is used to continue the API class until the login page is create
+     * @returns {promise}
+     */
+    // static autoLogin() {
+    //     let auth = new AuthManager();
+    //     return auth.authenticateUser('admin', 'admin');
+    // }
+
+    /**
+     * Get JavaScript accessible cookies saved in browser, by giving the cooke name.
+     * @param {String} name : Name of the cookie which need to be retrived
+     * @returns {String|null} : If found a cookie with given name , return its value,Else null value is returned
+     */
+    static getCookie(name) {
+        let pairs = document.cookie.split(";");
+        let cookie = null;
+        for (let pair of pairs) {
+            pair = pair.split("=");
+            let cookie_name = pair[0].trim();
+            let value = encodeURIComponent(pair[1]);
+            if (cookie_name === name) {
+                cookie = value;
+                break;
+            }
+        }
+        return cookie;
+    }
+
+    /**
+     * Delete a browser cookie given its name
+     * @param {String} name : Name of the cookie which need to be deleted
+     */
+    static delete_cookie(name) {
+        document.cookie = name + '=; Path=' + "/" + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    }
+
+    /**
+     * Set a cookie with given name and value assigned to it. Cookies can be only set to the same origin,
+     * which the script is running
+     * @param {String} name : Name of the cookie which need to be set
+     * @param {String} value : Value of the cookie, expect it to be URLEncoded
+     * @param {number} validityPeriod :  (Optional) Validity period of the cookie in seconds
+     * @param {String} path : Path which needs to set the given cookie
+     * @param {boolean} secured : secured parameter is set
+     */
+    static setCookie(name, value, validityPeriod, path = "/", secured = true) {
+        let expires = "";
+        const securedDirective = secured ? "; Secure" : "";
+        if (validityPeriod) {
+            const date = new Date();
+            date.setTime(date.getTime() + validityPeriod * 1000);
+            expires = "; expires=" + date.toUTCString();
+        }
+
+        document.cookie = name + "=" + value + expires + "; path=" + path + securedDirective + validityPeriod
+    }
+
+    /**
+     * Given an object returns whether the object is empty or not
+     * @param {Object} object : Any JSON object
+     * @returns {boolean}
+     */
+    static isEmptyObject(object) {
+        return Object.keys(object).length === 0 && object.constructor === Object
+    }
+
+
+}
+
+export default PublisherUtils;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
new file mode 100644
index 00000000000..fd32fbed20f
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
@@ -0,0 +1,183 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+
+import Axios from 'axios';
+import AuthHandler from './authHandler';
+import Constants from '../common/constants';
+import Helper from './helpers/appMgtApiHelpers';
+
+
+
+export default class Endpoint {
+
+    /* =================================================================
+     * Application related apis
+     * */
+
+    /**
+     * Api for create an application.
+     * @param: applicationData: The application data object. This contains an object array of each step data from
+     * application creation wizard.
+     *
+     * From applicationData, the proper application object will be created and send it to the api.
+     * */
+    static createApplication(applicationData) {
+
+        let app = Helper.buildApplication(applicationData).application;
+        let user = AuthHandler.getUser();
+        console.log(user.idToken);
+        const headers = {
+            "Authorization": 'Bearer ' + user.getAuthToken(),
+            "Content-Type": "application/json",
+        };
+
+        Axios.post(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers}).then(
+            function (response) {
+                console.log(response);
+            }
+        ).catch(function (err) {
+            console.log(err);
+        });
+
+    }
+
+    /**
+     * Method to handle application release process.
+     * */
+    static releaseApplication() {
+
+    }
+
+    /**
+     * Promote the current state of the application.
+     * @param appId: The uuid of the application which the state should be updated.
+     * */
+    static updateState(appId) {
+
+    }
+
+    /**
+     * Get the next possible state, which the application can be promoted to.
+     * @param appId: The application uuid.
+     */
+    static getNextState(appId) {
+
+    }
+
+    /**
+     * Edit created application.
+     * @param applicationData: The modified application data.
+     * */
+    static editApplication(applicationData) {
+
+    }
+
+    /**
+     * Get all the created applications for the user.
+     * @return Object: The response object from the axios post.
+     * */
+    static getApplications() {
+        let user = AuthHandler.getUser();
+        console.log("Get all applications", user.getAuthToken());
+        const headers = {
+            "Authorization": 'Bearer ' + user.getAuthToken(),
+            'Accept': 'application/json',
+            "Content-Type": "application/json",
+        };
+
+        return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS, {headers: headers});
+    }
+
+    /**
+     * Get specific application.
+     * @param appId: The application Id.
+     * */
+    static getApplication(appId) {
+
+    }
+
+    /**
+     * Delete specified application.
+     * @param appId: The id of the application which is to be deleted.
+     * */
+    static deleteApplication(appId) {
+
+    }
+
+    /*
+     *              End of Application management apis.
+     * =================================================================
+     * */
+
+    /*
+     * =================================================================
+     * Platform related apis
+     * */
+
+    /**
+     * Create a new Platform
+     * @param platformData: The platform data object.
+     * */
+    static createPlatform(platformData) {
+
+        const headers = {
+            "Authorization": 'Bearer ' + AuthHandler.getUser().getAuthToken(),
+            'Accept': 'application/json',
+            "Content-Type": "application/json",
+        };
+
+        Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then(
+            function (response) {
+                console.log(response);
+            }
+        ).catch(function (err) {
+            console.log(err);
+        });
+
+    }
+
+    /**
+     * Get available platforms
+     * */
+    static getPlatforms() {
+
+    }
+
+    /**
+     * Get the user specified platform
+     * @param platformId: The identifier of the platform
+     * */
+    static getPlatform(platformId) {
+
+    }
+
+    /**
+     * Delete specified platform
+     * @param platformId: The id of the platform which is to be deleted.
+     * */
+    static deletePlatform(platformId) {
+
+    }
+
+    /*
+    * End of Platform management apis.
+    * =================================================================
+    * */
+
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
similarity index 69%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
index c52d9ed6cde..00629cec4f9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/AppMgtApiHelpers.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
@@ -26,24 +26,31 @@ export default class Helper {
     /**
      * Generate application object from form data passed.
      * @param appData: Application data from the application creation form.
+     * @return {Object, Object}: The application object and the set of images related to the application.
      * */
     static buildApplication(appData) {
 
         let application = {};
         let images = {};
 
-        for (var step in appData) {
+        for (let step in appData) {
             let tmpData = appData[step].data.step;
-            for (var prop in tmpData) {
+            for (let prop in tmpData) {
                 if (prop === 'banner' || prop === 'screenshots' || prop === 'icon') {
                     images[prop] = tmpData[prop];
+                } else if(prop === 'tags') {
+                    let tags = [];
+                    let tagsFromStep = tmpData[prop];
+                    for (let tag in tagsFromStep) {
+                        console.log(tag);
+                        tags.push(tagsFromStep[tag].value);
+                    }
+                    application[prop] = tags;
                 } else {
                     application[prop] = tmpData[prop];
                 }
             }
         }
-
-        console.log(application, images);
+        return {application, images};
     }
-
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
index 405042531c5..cc38f4a9280 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
@@ -16,16 +16,30 @@
  * under the License.
  */
 
-scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
-    ' perm:application:delete perm:platform:add perm:platform:remove perm:roles:view perm:devices:view';
+export default class Constants {
 
-TOKEN_ENDPOINT = '/token';
-DYNAMIC_CLIENT_REGISTER_ENDPOINT = '/api-application-registration/register';
+    static scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
+        ' perm:application:delete perm:platform:add perm:platform:remove perm:roles:view perm:devices:view';
+
+    static TOKEN_ENDPOINT = '/token';
+    static DYNAMIC_CLIENT_REGISTER_ENDPOINT = '/api-application-registration/register';
+
+    static appManagerEndpoints = {
+        GET_ALL_APPS: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
+        CREATE_APP: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
+        UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
+    };
+
+    static platformManagerEndpoints = {
+        CREATE_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0/'
+    }
+
+    static userConstants = {
+        WSO2_USER: 'wso2_user',
+        PARTIAL_TOKEN: 'WSO2_IOT_TOKEN'
+    }
+
+}
 
-appManagerEndpoints = {
-  GET_ALL_APPS: '/api/application-mgt/v1.0/applications/1.0.0/',
-  CREATE_APP: '/api/application-mgt/v1.0/applications/1.0.0/',
-  UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
-};
 
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 2542eaa5f7a..c2c53d7e7d2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -18,7 +18,7 @@
 
 import React, {Component} from 'react';
 import Dialog from 'material-ui/Dialog';
-import Endpoint from '../../api/Endpoints';
+import Endpoint from '../../api/endpoints';
 import {withRouter} from 'react-router-dom';
 import FlatButton from 'material-ui/FlatButton';
 import {Step1, Step2, Step3} from './CreateSteps';
@@ -67,7 +67,7 @@ class ApplicationCreate extends Component {
     /**
      * Handles next button click event.
      * */
-    handleNext = () => {
+    handleNext() {
         console.log("Handle Next");
         const {stepIndex} = this.state;
         this.setState({
@@ -79,7 +79,7 @@ class ApplicationCreate extends Component {
     /**
      * Handles form submit.
      * */
-    handleSubmit = () => {
+    handleSubmit() {
         console.log(this.state.stepData);
         Endpoint.createApplication(this.state.stepData);
 
@@ -89,7 +89,7 @@ class ApplicationCreate extends Component {
      * Handles cancel button click event.
      * This will show a confirmation dialog to cancel the application creation process.
      * */
-    handleCancel = () => {
+    handleCancel() {
         this.setState({isDialogOpen: true});
     };
 
@@ -97,7 +97,7 @@ class ApplicationCreate extends Component {
      * Handled [ < Prev ] button click.
      * This clears the data in the current step and returns to the previous step.
      * */
-    handlePrev = () => {
+    handlePrev() {
         const {stepIndex} = this.state;
         if (stepIndex > 0) {
             this.removeStepData();
@@ -108,7 +108,7 @@ class ApplicationCreate extends Component {
     /**
      * Saves form data in each step in to the state.
      * */
-    setStepData = (step, data) => {
+    setStepData(step, data) {
         console.log(step, data, this.state.stepData);
         let tmpStepData = this.state.stepData;
         tmpStepData.push({step: step, data: data});
@@ -119,7 +119,7 @@ class ApplicationCreate extends Component {
     /**
      * Remove the last data point
      * */
-    removeStepData = () => {
+    removeStepData() {
         let tempData = this.state.stepData;
         tempData.pop();
         this.setState({stepData: tempData});
@@ -129,7 +129,7 @@ class ApplicationCreate extends Component {
      * Handles the Yes button in app creation cancellation dialog.
      * Clears all the form data and reset the wizard.
      * */
-    handleYes = () => {
+    handleYes() {
         this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false});
     };
 
@@ -137,7 +137,7 @@ class ApplicationCreate extends Component {
      * Handles No button in app creation cancellation dialog.
      * Returns to the same step.
      * */
-    handleNo = () => {
+    handleNo() {
         this.setState({isDialogOpen: false});
     };
 
@@ -153,21 +153,27 @@ class ApplicationCreate extends Component {
     getStepContent(stepIndex) {
         switch (stepIndex) {
             case 0:
-                return <Step1 handleNext={this.handleNext}
-                              setData={this.setStepData}
-                              removeData={this.removeStepData}/>;
+                return <Step1
+                    handleNext={this.handleNext}
+                    setData={this.setStepData}
+                    removeData={this.removeStepData}
+                />;
             case 1:
-                return <Step2 handleNext={this.handleNext}
-                              handlePrev={this.handlePrev}
-                              setData={this.setStepData}
-                              removeData={this.removeStepData}/>;
+                return <Step2
+                    handleNext={this.handleNext}
+                    handlePrev={this.handlePrev}
+                    setData={this.setStepData}
+                    removeData={this.removeStepData}
+                />;
             case 2:
-                return <Step3 handleFinish={this.handleNext}
-                              handlePrev={this.handlePrev}
-                              setData={this.setStepData}
-                              removeData={this.removeStepData}/>;
+                return <Step3
+                    handleFinish={this.handleNext}
+                    handlePrev={this.handlePrev}
+                    setData={this.setStepData}
+                    removeData={this.removeStepData}
+                />;
             default:
-                return <div></div>;
+                return <div/>;
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index fcceb20ca5b..3d815bb74d7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -17,6 +17,7 @@
  */
 
 import React, {Component} from 'react';
+import EndPoint from '../../api/endpoints';
 import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
@@ -44,37 +45,37 @@ class ApplicationListing extends Component {
     data = [
         {
             id: Math.random(),
-            applicationName:"Cne",
-            platform:'Android',
-            category:"Public",
+            applicationName: "Cne",
+            platform: 'Android',
+            category: "Public",
             status: "Created"
         },
         {
             id: Math.random(),
-            applicationName:"Gone",
-            platform:'IOS',
-            category:"Public",
+            applicationName: "Gone",
+            platform: 'IOS',
+            category: "Public",
             status: "Created"
         },
         {
             id: Math.random(),
-            applicationName:"Ane",
-            platform:'Android',
-            category:"Public",
+            applicationName: "Ane",
+            platform: 'Android',
+            category: "Public",
             status: "Created"
         },
         {
             id: Math.random(),
-            applicationName:"one",
-            platform:'Android',
-            category:"Public",
+            applicationName: "one",
+            platform: 'Android',
+            category: "Public",
             status: "Created"
         },
         {
             id: Math.random(),
-            applicationName:"one",
-            platform:'Android',
-            category:"Public",
+            applicationName: "one",
+            platform: 'Android',
+            category: "Public",
             status: "Created"
         },
     ];
@@ -84,19 +85,21 @@ class ApplicationListing extends Component {
             data_id: "image",
             data_type: "image",
             sortable: false,
-            label: ""},
+            label: ""
+        },
         {
             data_id: "applicationName",
             data_type: "string",
             sortable: true,
             label: "Application Name",
-            sort: this._sortData.bind(this)
+            sort: this.sortData.bind(this)
         },
         {
             data_id: "platform",
             data_type: "image_array",
             sortable: false,
-            label: "Platform"},
+            label: "Platform"
+        },
         {
             data_id: "category",
             data_type: "string",
@@ -125,36 +128,41 @@ class ApplicationListing extends Component {
         Theme.removeThemingScripts(this.scriptId);
     }
 
+    componentDidMount() {
+        let getApps = EndPoint.getApplications();
+        getApps.then(response => {
+            console.log(response);
+        })
+    }
 
     /**
      * Handles the search action.
      * When typing in the search bar, this method will be invoked.
      * */
-    _searchApplications(event, word) {
+    searchApplications(event, word) {
         let searchedData;
-            if (word){
-                searchedData = this.data.filter((dataItem) => {
-                        return dataItem.applicationName.includes(word);
-                    });
-            } else {
-                searchedData = this.data;
-            }
+        if (word) {
+            searchedData = this.data.filter((dataItem) => {
+                return dataItem.applicationName.includes(word);
+            });
+        } else {
+            searchedData = this.data;
+        }
 
         this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
-
     }
 
     /**
      * Handles sort data function and toggles the asc state.
      * asc: true : sort in ascending order.
      * */
-    _sortData() {
+    sortData() {
         let isAsc = this.state.asc;
-        let datas = isAsc?this.data.sort(this._compare):this.data.reverse();
+        let datas = isAsc ? this.data.sort(this.compare) : this.data.reverse();
         this.setState({data: datas, asc: !isAsc});
     }
 
-    _compare(a, b) {
+    compare(a, b) {
         if (a.applicationName < b.applicationName)
             return -1;
         if (a.applicationName > b.applicationName)
@@ -162,8 +170,8 @@ class ApplicationListing extends Component {
         return 0;
     }
 
-    _onRowClick(id) {
-        this.props.history.push("apps/"+id);
+    onRowClick(id) {
+        this.props.history.push("apps/" + id);
     }
 
     render() {
@@ -171,18 +179,17 @@ class ApplicationListing extends Component {
             <div className="middle applicationListingMiddle">
                 <Card className="applicationListingCard">
                     <TextField hintText="Search" className="applicationListingSearch"
-                               onChange={this._searchApplications.bind(this)}/>
+                               onChange={this.searchApplications.bind(this)}/>
                     <CardTitle title="Applications" className="applicationListTitle"/>
-                    <CardActions>
-
-                    </CardActions>
-                    <DataTable headers={this.headers}
-                               data={this.state.data}
-                               handleRowClick={this._onRowClick.bind(this)}
-                               noDataMessage={{type: 'button', text: 'Create Application'}}/>
+                    <DataTable
+                        headers={this.headers}
+                        data={this.state.data}
+                        handleRowClick={this.onRowClick.bind(this)}
+                        noDataMessage={{type: 'button', text: 'Create Application'}}
+                    />
                 </Card>
-
-            </div>);
+            </div>
+        );
     }
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index f414a8c278c..ee1c2aaccf3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -39,11 +39,13 @@ import Theme from '../../../theme';
 class Step1 extends Component {
     constructor() {
         super();
+        this.platforms = [{identifier: 1}, {identifier: 2}, {identifier: 3}];
+        this.stores = [{identifier: 5}, {identifier: 2}, {identifier: 3}];
         this.state = {
             finished: false,
             stepIndex: 0,
             store: 1,
-            platform: 1,
+            platform: 0,
             stepData: [],
             title: "",
             titleError: ""
@@ -65,17 +67,17 @@ class Step1 extends Component {
     /**
      * Invokes the handleNext function in Create component.
      * */
-    _handleNext = () => {
+    handleNext() {
         this.props.handleNext();
     };
 
     /**
      * Persist the current form data to the state.
      * */
-    _setStepData() {
-        var step = {
+    setStepData() {
+        let step = {
             store: this.state.store,
-            platform: this.state.platform
+            platform: this.platforms[this.state.platform]
         };
         this.props.setData("step1", {step: step});
     }
@@ -86,14 +88,14 @@ class Step1 extends Component {
      *  Sets the data to the state.
      *  Invokes the handleNext method of Create component.
      * */
-    _handleClick() {
-        this._setStepData();
+    handleClick() {
+        this.setStepData();
     }
 
     /**
      * Triggers when changing the Platform selection.
      * */
-    _onChangePlatform = (event, index, value) => {
+    onChangePlatform(event, index, value) {
         console.log(value);
         this.setState({platform: value});
     };
@@ -101,17 +103,10 @@ class Step1 extends Component {
     /**
      * Triggers when changing the Store selection.
      * */
-    _onChangeStore = (event, index, value) => {
+    onChangeStore(event, index, value) {
         this.setState({store: value});
     };
 
-    /**
-     * Triggers when user types on Title text field.
-     * */
-    _onChangeTitle = (event, value) => {
-        this.setState({title: value});
-    };
-
     render() {
         return (
             <div>
@@ -122,30 +117,30 @@ class Step1 extends Component {
                                 floatingLabelText="Store Type*"
                                 value={this.state.store}
                                 floatingLabelFixed={true}
-                                onChange={this._onChangeStore.bind(this)}
+                                onChange={this.onChangeStore.bind(this)}
                             >
-                                <MenuItem value={1} primaryText="Enterprise"/>
-                                <MenuItem value={2} primaryText="Public"/>
-                            </SelectField> <br/>
+                                <MenuItem value={0} primaryText="Enterprise"/>
+                                <MenuItem value={1} primaryText="Public"/>
+                            </SelectField>
+                            <br/>
                             <SelectField
                                 floatingLabelText="Platform*"
                                 value={this.state.platform}
                                 floatingLabelFixed={true}
-                                onChange={this._onChangePlatform.bind(this)}
+                                onChange={this.onChangePlatform.bind(this)}
                             >
-                                <MenuItem value={1} primaryText="Android"/>
-                                <MenuItem value={2} primaryText="iOS"/>
-                                <MenuItem value={{name: "Web", id:3}} primaryText="Web"/>
+                                <MenuItem value={0} primaryText="Android"/>
+                                <MenuItem value={1} primaryText="iOS"/>
+                                <MenuItem value={2} primaryText="Web"/>
                             </SelectField>
                         </div>
-
                         <br/>
                         <br/>
                         <div className="nextButton">
                             <RaisedButton
                                 label="Next >"
                                 primary={true}
-                                onClick={this._handleClick.bind(this)}
+                                onClick={this.handleClick.bind(this)}
                             />
                         </div>
                     </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 24c0b906305..ebf3daf4a5c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -65,6 +65,7 @@ class Step2 extends Component {
             visibility: 0,
             description: "",
             screenshots: [],
+            identifier: "",
             shortDescription: ""
         };
         this.scriptId = "application-create-step2";
@@ -86,19 +87,19 @@ class Step2 extends Component {
      * Clears the tags text field.
      * Chip gets two parameters: Key and value.
      * */
-    _addTags(event) {
+    addTags(event) {
         let tags = this.state.tags;
         if (event.charCode === 13) {
             event.preventDefault();
             tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
-            this.setState({tags, defValue: ""});
+            this.setState({tags, defValue: ""}, console.log(tags));
         }
     }
 
     /**
      * Set the value for tag.
      * */
-    _handleTagChange(event) {
+    handleTagChange(event) {
         let defaultValue = this.state.defValue;
         defaultValue = event.target.value;
         this.setState({defValue: defaultValue})
@@ -107,21 +108,21 @@ class Step2 extends Component {
     /**
      * Invokes the handleNext function in Create component.
      * */
-    _handleNext() {
+    handleNext() {
         let fields = [{name: "Title", value: this.state.title},
             {name: "Short Description", value: this.state.shortDescription},
             {name: "Description", value: this.state.description},
             {name: "Banner", value: this.state.banner},
             {name: "Screenshots", value: this.state.screenshots},
+            {name: "Identifier", value: this.state.identifier},
             {name: "Icon", value: this.state.icon}];
-        this._validate(fields);
-        // this.props.handleNext();
+        this.validate(fields);
     }
 
     /**
      * Invokes the handlePrev function in Create component.
      * */
-    _handlePrev() {
+    handlePrev() {
         this.props.handlePrev();
     }
 
@@ -129,7 +130,7 @@ class Step2 extends Component {
      * Handles Chip delete function.
      * Removes the tag from state.tags
      * */
-    _handleRequestDelete = (key) => {
+    handleRequestDelete(key) {
         this.chipData = this.state.tags;
         const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
         this.chipData.splice(chipToDelete, 1);
@@ -139,18 +140,18 @@ class Step2 extends Component {
     /**
      * Creates Chip array from state.tags.
      * */
-    _renderChip(data) {
+    renderChip(data) {
         return (
             <Chip
                 key={data.key}
-                onRequestDelete={() => this._handleRequestDelete(data.key)}
+                onRequestDelete={() => this.handleRequestDelete(data.key)}
                 className="applicationCreateChip">
                 {data.value}
             </Chip>
         );
     }
 
-    _onVisibilitySelect = (event, index, value) => {
+    onVisibilitySelect(event, index, value) {
         console.log(value);
         let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
             <MenuItem value={1} primaryText="Roles"/>
@@ -167,7 +168,7 @@ class Step2 extends Component {
     /**
      * Validate the form.
      * */
-    _validate(fields) {
+    validate(fields) {
         let errors = {};
         let errorsPresent = false;
         fields.forEach(function (field) {
@@ -181,6 +182,15 @@ class Step2 extends Component {
                     }
                     break;
                 }
+                case 'Identifier': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
                 case 'Short Description': {
                     if (field.value === "") {
                         errors[field.name] = field.name + " is required!";
@@ -219,7 +229,7 @@ class Step2 extends Component {
                 }
                 case 'Screenshots': {
                     if (field.value.length < 3) {
-                        errors[field.name] = "3 " +field.name + " are required!";
+                        errors[field.name] = "3 " + field.name + " are required!";
                         errorsPresent = true;
                     } else {
                         errorsPresent = false;
@@ -229,41 +239,40 @@ class Step2 extends Component {
             }
         });
 
-        console.log(errorsPresent);
         if (!errorsPresent) {
-            this._setStepData();
+            this.setStepData();
         } else {
             this.setState({errors: errors}, console.log(errors));
         }
-
     }
 
     /**
      * Creates an object with the current step data and persist in the parent.
      * */
-    _setStepData() {
+    setStepData() {
         let stepData = {
-            tags: this.state.tags,
             icon: this.state.icon,
-            title: this.state.title,
+            name: this.state.name,
+            tags: this.state.tags,
             banner: this.state.banner,
-            category: this.state.category,
+            category: this.categories[this.state.category],
+            identifier: this.state.identifier,
             screenshots: this.state.screenshots,
             description: this.state.description,
             shortDescription: this.state.shortDescription
         };
 
         this.props.setData("step2", {step: stepData});
-    }
+    };
 
     /**
      * Set text field values to state.
      * */
-    _onTextFieldChange(event, value) {
+    onTextFieldChange(event, value) {
         let field = event.target.id;
         switch (field) {
-            case "title": {
-                this.setState({title: value});
+            case "name": {
+                this.setState({name: value});
                 break;
             }
             case "shortDescription": {
@@ -274,30 +283,34 @@ class Step2 extends Component {
                 this.setState({description: value});
                 break;
             }
+            case "identifier": {
+                this.setState({identifier: value});
+                break;
+            }
         }
-    }
+    };
 
     /**
      * Removed user uploaded banner.
      * */
-    _removeBanner(event, d) {
+    removeBanner(event, d) {
         console.log(event, d);
         this.setState({banner: []});
-    }
+    };
 
     /**
      * Removes uploaded icon.
      * */
-    _removeIcon(event) {
+    removeIcon(event) {
         this.setState({icon: []});
-    }
+    };
 
     /**
      * Removes selected screenshot.
      * */
-    _removeScreenshot(event) {
+    removeScreenshot(event) {
         console.log(event.target)
-    }
+    };
 
     render() {
         console.log(this.state.visibilityComponent);
@@ -306,13 +319,23 @@ class Step2 extends Component {
                 <div>
                     <div>
                         <TextField
-                            id="title"
-                            hintText="Enter a title for your application."
+                            id="name"
+                            hintText="Enter a name for your application."
                             errorText={this.state.errors["Title"]}
-                            floatingLabelText="Title*"
+                            floatingLabelText="Name*"
+                            floatingLabelFixed={true}
+                            onChange={this.onTextFieldChange.bind(this)}
+                        />
+                        <br/>
+                        <TextField
+                            id="identifier"
+                            hintText="Unique Identifier for Application."
+                            errorText={this.state.errors["Identifier"]}
+                            floatingLabelText="Identifier*"
                             floatingLabelFixed={true}
-                            onChange={this._onTextFieldChange.bind(this)}
-                        /><br/>
+                            onChange={this.onTextFieldChange.bind(this)}
+                        />
+                        <br/>
                         <TextField
                             id="shortDescription"
                             hintText="Enter a short description for your application."
@@ -321,9 +344,9 @@ class Step2 extends Component {
                             floatingLabelFixed={true}
                             multiLine={true}
                             rows={2}
-                            onChange={this._onTextFieldChange.bind(this)}
-
-                        /><br/>
+                            onChange={this.onTextFieldChange.bind(this)}
+                        />
+                        <br/>
                         <TextField
                             id="description"
                             errorText={this.state.errors["Description"]}
@@ -332,18 +355,20 @@ class Step2 extends Component {
                             floatingLabelFixed={true}
                             multiLine={true}
                             rows={4}
-                            onChange={this._onTextFieldChange.bind(this)}
-                        /><br/>
+                            onChange={this.onTextFieldChange.bind(this)}
+                        />
+                        <br/>
                         <SelectField
                             floatingLabelText="Visibility*"
                             value={this.state.visibility}
                             floatingLabelFixed={true}
-                            onChange={this._onVisibilitySelect.bind(this)}
+                            onChange={this.onVisibilitySelect.bind(this)}
                         >
                             <MenuItem value={0} primaryText="Public"/>
                             <MenuItem value={1} primaryText="Roles"/>
                             <MenuItem value={2} primaryText="Devices"/>
-                        </SelectField><br/>
+                        </SelectField>
+                        <br/>
                         <TextField
                             id="tags"
                             errorText={this.state.errors["tags"]}
@@ -351,11 +376,12 @@ class Step2 extends Component {
                             floatingLabelText="Tags*"
                             floatingLabelFixed={true}
                             value={this.state.defValue}
-                            onChange={this._handleTagChange.bind(this)}
-                            onKeyPress={this._addTags.bind(this)}
-                        /><br/>
-                        <div className="applicationCreateWrapper">
-                            {this.state.tags.map(this._renderChip, this)}
+                            onChange={this.handleTagChange.bind(this)}
+                            onKeyPress={this.addTags.bind(this)}
+                        />
+                        <br/>
+                        <div style={this.styles.wrapper}>
+                            {this.state.tags.map(this.renderChip, this)}
                         </div>
                         <br/>
                         <SelectField
@@ -364,7 +390,8 @@ class Step2 extends Component {
                             floatingLabelFixed={true}
                         >
                             <MenuItem value={0} primaryText="Business"/>
-                        </SelectField> <br/>
+                        </SelectField>
+                        <br/>
                         {/*Platform Specific Properties.*/}
                         <div className="platformSpecificPropertyDiv">
                             <p className="platformSpecificPropertyP">Platform Specific Properties</p>
@@ -375,50 +402,58 @@ class Step2 extends Component {
                             <p className="applicationCreateBannerTitle">Banner*:</p>
                             <GridList className="applicationCreateGrid" cols={1.1}>
                                 {this.state.banner.map((tile) => (
-                                    <GridTile key={Math.floor(Math.random() * 1000)}
-                                              title={tile.name}
-                                              actionIcon={
-                                                  <IconButton onClick={this._removeBanner.bind(this)}>
-                                                        <Clear />
-                                                  </IconButton>}>
-                                        <img src={tile.preview}/></GridTile>
+                                    <GridTile
+                                        key={Math.floor(Math.random() * 1000)}
+                                        title={tile.name}
+                                        actionIcon={
+                                            <IconButton onClick={this.removeBanner.bind(this)}>
+                                                <Clear/>
+                                            </IconButton>}>
+                                        <img src={tile.preview}/>
+                                    </GridTile>
                                 ))}
                                 {this.state.banner.length === 0 ?
-                                    <Dropzone className="applicationCreateBannerDropZone" accept="image/jpeg, image/png"
-                                              onDrop={(banner, rejected) => {
-                                                  this.setState({banner, rejected});
-                                              }}>
-                                    <p className="applicationCreateBannerp">+</p>
-                                </Dropzone> : <div />}
-
+                                    <Dropzone
+                                        className="applicationCreateBannerDropZone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(banner, rejected) => {
+                                            this.setState({banner, rejected});
+                                        }}
+                                    >
+                                        <p className="applicationCreateBannerp">+</p>
+                                    </Dropzone> : <div/>
+                                }
                             </GridList>
-
                         </div>
                         <br/>
                         <div>
                             <p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
                             <p className="applicationCreateScreenshotTitle">Screenshots*:</p>
-                            <GridList className = "applicationCreateScreenshotGrid" cols={1.1}>
+                            <GridList className="applicationCreateScreenshotGrid" cols={1.1}>
                                 {this.state.screenshots.map((file) => (
-                                    <GridTile key={Math.floor(Math.random() * 1000)}
-                                              title={file[0].name}
-                                              actionIcon={
-                                                  <IconButton onClick={this._removeScreenshot.bind(this)}>
-                                                      <Clear/>
-                                                  </IconButton>}>
+                                    <GridTile
+                                        key={Math.floor(Math.random() * 1000)}
+                                        title={file[0].name}
+                                        actionIcon={
+                                            <IconButton onClick={this.removeScreenshot.bind(this)}>
+                                                <Clear/>
+                                            </IconButton>}>
                                         <img src={file[0].preview}/></GridTile>
                                 ))}
                                 {this.state.screenshots.length < 3 ?
-                                    <Dropzone className="applicationCreateScreenshotDropZone"
-                                              accept="image/jpeg, image/png"
-                                              onDrop={(screenshots, rejected) => {
-                                                  let tmpScreenshots = this.state.screenshots;
-                                                  tmpScreenshots.push(screenshots);
-                                                  this.setState({
-                                                      screenshots: tmpScreenshots});
-                                              }}>
-                                    <p className="applicationCreateScreenshotp">+</p>
-                                </Dropzone> : <div />}
+                                    <Dropzone
+                                        className="applicationCreateScreenshotDropZone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(screenshots, rejected) => {
+                                            let tmpScreenshots = this.state.screenshots;
+                                            tmpScreenshots.push(screenshots);
+                                            this.setState({
+                                                screenshots: tmpScreenshots
+                                            });
+                                        }}
+                                    >
+                                        <p className="applicationCreateScreenshotp">+</p>
+                                    </Dropzone> : <div/>}
                             </GridList>
                         </div>
                         <br/>
@@ -427,38 +462,43 @@ class Step2 extends Component {
                             <p className="applicationCreateIconTitle">Icon*:</p>
                             <GridList className="applicationCreateIconGrid" cols={1.1}>
                                 {this.state.icon.map((tile) => (
-                                    <GridTile key={Math.floor(Math.random() * 1000)}
-                                              title={tile.name}
-                                              actionIcon={
-                                                  <IconButton onClick={this._removeIcon.bind(this)}>
-                                                      <Clear />
-                                                  </IconButton>}>
-                                        <img src={tile.preview}/></GridTile>
+                                    <GridTile
+                                        key={Math.floor(Math.random() * 1000)}
+                                        title={tile.name}
+                                        actionIcon={
+                                            <IconButton onClick={this.removeIcon.bind(this)}>
+                                                <Clear/>
+                                            </IconButton>}>
+                                        <img src={tile.preview}/>
+                                    </GridTile>
                                 ))}
                                 {this.state.icon.length === 0 ?
-                                    <Dropzone className="applicationCreateIconDropZone"
-                                              accept="image/jpeg, image/png"
-                                              onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
-                                    <p className="applicationCreateIconp">+</p>
-                                </Dropzone> : <div />}
+                                    <Dropzone
+                                        className="applicationCreateIconDropZone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(icon, rejected) => {
+                                            this.setState({icon, rejected});
+                                        }}
+                                    >
+                                        <p className="applicationCreateIconp">+</p>
+                                    </Dropzone> : <div/>}
                             </GridList>
                         </div>
                         <br/>
                     </div>
-
                     <br/>
                     <br/>
                     <div className="applicationCreateBackAndNext">
                         <FlatButton
                             label="< Back"
                             disabled={false}
-                            onClick={this._handlePrev.bind(this)}
-                            className="applicationCreateBack"
+                            onClick={this.handlePrev.bind(this)}
+                            style={{marginRight: 12}}
                         />
                         <RaisedButton
                             label="Next >"
                             primary={true}
-                            onClick={this._handleNext.bind(this)}
+                            onClick={this.handleNext.bind(this)}
                         />
                     </div>
                 </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index 1245d1df3c1..d0c053578e7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -63,7 +63,7 @@ class Step3 extends Component {
         /**
          *Loading the theme files based on the the user-preference.
          */
-       Theme.insertThemingScripts(this.scriptId);
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
@@ -74,21 +74,21 @@ class Step3 extends Component {
      * Handles finish button click.
      * This invokes handleNext function in parent component.
      * */
-    _handleFinish() {
+    handleFinish() {
         this.props.handleFinish();
     }
 
     /**
      * Invokes Prev button click.
      * */
-    _handlePrev() {
+    handlePrev() {
         this.props.handlePrev();
     }
 
     /**
      * Handles release application selection.
      * */
-    _handleToggle() {
+    handleToggle() {
         let hide = this.state.showForm;
         this.setState({showForm: !hide});
     }
@@ -100,36 +100,42 @@ class Step3 extends Component {
                     <Toggle
                         label="Release the Application"
                         labelPosition="right"
-                        onToggle={this._handleToggle.bind(this)}
+                        onToggle={this.handleToggle.bind(this)}
                         defaultToggled={this.state.showForm}
                     />
                     {/*If toggle is true, the release form will be shown.*/}
-                    {!this.state.showForm ? <div/> : <div>
-                        <SelectField
-                            floatingLabelText="Select Release Channel*"
-                            value={this.state.releaseChannel}
-                            floatingLabelFixed={true}
-                        >
-                            <MenuItem value={1} primaryText="Alpha"/>
-                            <MenuItem value={2} primaryText="Beta"/>
-                            <MenuItem value={3} primaryText="GA"/>
-                        </SelectField> <br/>
-                        <TextField
-                            hintText="1.0.0"
-                            floatingLabelText="Version*"
-                            errorText={this.state.errors["title"]}
-                            floatingLabelFixed={true}
-                        /><br/>
-                    </div>}
-
+                    {!this.state.showForm ? <div/> :
+                        <div>
+                            <SelectField
+                                floatingLabelText="Select Release Channel*"
+                                value={this.state.releaseChannel}
+                                floatingLabelFixed={true}
+                            >
+                                <MenuItem value={1} primaryText="Alpha"/>
+                                <MenuItem value={2} primaryText="Beta"/>
+                                <MenuItem value={3} primaryText="GA"/>
+                            </SelectField>
+                            <br/>
+                            <TextField
+                                hintText="1.0.0"
+                                floatingLabelText="Version*"
+                                errorText={this.state.errors["title"]}
+                                floatingLabelFixed={true}
+                            /><br/>
+                        </div>}
                     <div className="applicationCreateBackAndFinish">
-                        <FlatButton label="< Back" disabled={false} onClick={this._handlePrev.bind(this)}
-                                    className="applicationCreateFinish"/>
+                        <FlatButton
+                            label="< Back"
+                            disabled={false}
+                            onClick={this.handlePrev.bind(this)}
+                            className="applicationCreateFinish"/>
+
                         <RaisedButton
                             label="Finish"
                             primary={true}
-                            onClick={this._handleFinish.bind(this)}
+                            onClick={this.handleFinish.bind(this)}
                         />
+
                     </div>
                 </div>
             </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index da98a075c52..a1f2f013a75 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -97,67 +97,74 @@ class BaseLayout extends Component {
         return (
 
             <div>
-                <AppBar title="App Publisher"
-                        iconElementRight={
-                            <div>
-                                <Badge
-                                    badgeContent={this.state.notifications}
-                                    secondary={true}
-                                    badgeStyle={{top: 12, right: 12}}
-                                >
-                                    <IconButton tooltip="Notifications">
-                                        <NotificationsIcon/>
-                                    </IconButton>
-                                </Badge>
-                                <IconButton onClick={() => {
-                                    console.log("Clicked")
-                                }}>
-                                    <ActionAccountCircle/>
+                <AppBar
+                    title="App Publisher"
+                    iconElementRight={
+                        <div>
+                            <Badge
+                                badgeContent={this.state.notifications}
+                                secondary={true}
+                                badgeStyle={{top: 12, right: 12}}
+                            >
+                                <IconButton tooltip="Notifications">
+                                    <NotificationsIcon/>
                                 </IconButton>
-                            </div>
-                        }
+                            </Badge>
+                            <IconButton onClick={() => {
+                                console.log("Clicked")
+                            }}>
+                                <ActionAccountCircle/>
+                            </IconButton>
+                        </div>
+                    }
                 />
                 <div>
                     <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
                         <List>
-                           <ListItem primaryText="Applications"
-                                      leftIcon={<Apps/>}
-                                      initiallyOpen={false}
-                                      primaryTogglesNestedList={true}
-                                      onClick={this.handleApplicationClick.bind(this)}
-                                      nestedItems={[
-                                          <ListItem
-                                              key={1}
-                                              primaryText="Create"
-                                              onClick={this.handleApplicationCreateClick.bind(this)}
-                                              leftIcon={<Add/>}
-                                          />]}
+                            <ListItem
+                                primaryText="Applications"
+                                leftIcon={<Apps/>}
+                                initiallyOpen={false}
+                                primaryTogglesNestedList={true}
+                                onClick={this.handleApplicationClick.bind(this)}
+                                nestedItems={[
+                                    <ListItem
+                                        key={1}
+                                        primaryText="Create"
+                                        onClick={this.handleApplicationCreateClick.bind(this)}
+                                        leftIcon={<Add/>}
+                                    />
+                                ]}
                             />
-                            <ListItem primaryText="Platforms"
-                                      leftIcon={<DevicesOther/>}
-                                      initiallyOpen={false}
-                                      primaryTogglesNestedList={true}
-                                      onClick={this.handlePlatformClick.bind(this)}
-                                      nestedItems={[
-                                          <ListItem
-                                              key={1}
-                                              primaryText="Create"
-                                              onClick={this.handlePlatformCreateClick.bind(this)}
-                                              leftIcon={<Add/>}
-                                          />]}
+                            <ListItem
+                                primaryText="Platforms"
+                                leftIcon={<DevicesOther/>}
+                                initiallyOpen={false}
+                                primaryTogglesNestedList={true}
+                                onClick={this.handlePlatformClick.bind(this)}
+                                nestedItems={[
+                                    <ListItem
+                                        key={1}
+                                        primaryText="Create"
+                                        onClick={this.handlePlatformCreateClick.bind(this)}
+                                        leftIcon={<Add/>}
+                                    />
+                                ]}
+                            />
+                            <ListItem
+                                primaryText="Reviews"
+                                onClick={this.handleReviewClick.bind(this)}
+                                leftIcon={<Feedback/>}
                             />
-                            <ListItem primaryText="Reviews"
-                                      onClick={this.handleReviewClick.bind(this)}
-                                      leftIcon={<Feedback/>}/>
                         </List>
                     </Drawer>
                 </div>
                 <div className="basicLayoutDiv">
                     {this.props.children}
                 </div>
-            </div>);
+            </div>
+        );
     }
-
 }
 
 BaseLayout.propTypes = {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index d5faa900e08..59166ef2cfd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import Axios from 'axios';
 import Chip from 'material-ui/Chip';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
@@ -34,6 +33,7 @@ import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
 import Theme from '../../theme';
+import Endpoint from '../../api/endpoints';
 
 /**
  * Platform Create component.
@@ -61,6 +61,7 @@ class PlatformCreate extends Component {
             description: "",
             property: "",
             icon: [],
+            identifier: "",
             propertyTypes: [
                 {key: 0, value: 'String'},
                 {key: 1, value: 'Number'},
@@ -74,7 +75,7 @@ class PlatformCreate extends Component {
         /**
          *Loading the theme files based on the the user-preference.
          */
-       Theme.insertThemingScripts(this.scriptId);
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
@@ -85,7 +86,7 @@ class PlatformCreate extends Component {
      * Handles toggle button actions.
      * One method is used for all the toggle buttons and, each toggle is identified by the id.
      * */
-    _handleToggle(event) {
+    handleToggle(event) {
         switch (event.target.id) {
             case "enabled" : {
                 let enabled = this.state.enabled;
@@ -103,28 +104,28 @@ class PlatformCreate extends Component {
     /**
      * Triggers the onChange action on property type selection.
      * */
-    _onPropertySelect = (event, index, value) => {
+    onPropertySelect(event, index, value) {
         console.log(this.state.propertyTypes[value]);
         this.setState({selectedProperty: value});
-    };
+    }
 
     /**
      * Handles Chip delete function.
      * Removes the tag from state.tags
      * */
-    _handleTagDelete = (key) => {
+    handleTagDelete(key) {
         this.chipData = this.state.tags;
         const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
         this.chipData.splice(chipToDelete, 1);
         this.setState({tags: this.chipData});
-    };
+    }
 
     /**
      * Create a tag on Enter key press and set it to the state.
      * Clears the tags text field.
      * Chip gets two parameters: Key and value.
      * */
-    _addTags(event) {
+    addTags(event) {
         let tags = this.state.tags;
         if (event.charCode === 13) {
             event.preventDefault();
@@ -136,11 +137,11 @@ class PlatformCreate extends Component {
     /**
      * Creates Chip array from state.tags.
      * */
-    _renderChip(data) {
+    renderChip(data) {
         return (
             <Chip
                 key={data.key}
-                onRequestDelete={() => this._handleTagDelete(data.key)}
+                onRequestDelete={() => this.handleTagDelete(data.key)}
                 style={this.styles.chip}
             >
                 {data.value}
@@ -151,7 +152,7 @@ class PlatformCreate extends Component {
     /**
      * Set the value for tag.
      * */
-    _handleTagChange(event) {
+    handleTagChange(event) {
         let defaultValue = this.state.defValue;
         defaultValue = event.target.value;
         this.setState({defValue: defaultValue})
@@ -160,7 +161,7 @@ class PlatformCreate extends Component {
     /**
      * Remove the selected property from the property list.
      * */
-    _removeProperty(property) {
+    removeProperty(property) {
         let properties = this.state.platformProperties;
         properties.splice(properties.indexOf(property), 1);
         this.setState({platformProperties: properties});
@@ -169,28 +170,31 @@ class PlatformCreate extends Component {
     /**
      * Add a new platform property.
      * */
-    _addProperty() {
+    addProperty() {
         let property = this.state.property;
         let selected = this.state.selectedProperty;
 
-        this.setState({platformProperties:
-            this.state.platformProperties.concat([
-                {
-                    key: property,
-                    value: this.state.propertyTypes[selected].value
-                }]),
+        this.setState({
+            platformProperties:
+                this.state.platformProperties.concat([
+                    {
+                        key: property,
+                        value: this.state.propertyTypes[selected].value
+                    }]),
             property: "",
-            selectedProperty: 0});
+            selectedProperty: 0
+        });
     }
 
     /**
      * Triggers in onChange event of text fields.
      * Text fields are identified by their ids and the value will be persisted in the component state.
      * */
-    _onTextChange = (event, value) => {
+    onTextChange(event, value) {
         let property = this.state.property;
         let name = this.state.name;
         let description = this.state.description;
+        let identifier = this.state.identifier;
 
         switch (event.target.id) {
             case "name": {
@@ -210,13 +214,26 @@ class PlatformCreate extends Component {
                 this.setState({property: property});
                 break;
             }
+            case "identifier": {
+                identifier = value;
+                this.setState({identifier: identifier});
+            }
         }
     };
 
-    _onCreatePlatform() {
+    onCreatePlatform() {
         //Call the platform create api.
         let platform = {};
+        platform.identifier = this.state.identifier;
+        platform.name = this.state.name;
+        platform.description = this.state.description;
+        platform.tags = this.state.tags;
+        platform.properties = this.state.platformProperties;
+        platform.icon = this.state.icon;
+        platform.enabled = this.state.enabled;
+        platform.allTenants = this.state.allTenants;
 
+        Endpoint.createPlatform(platform);
 
 
     }
@@ -224,22 +241,24 @@ class PlatformCreate extends Component {
     /**
      * Remove the uploaded icon.
      * */
-    _removeIcon(event) {
+    removeIcon(event) {
         this.setState({icon: []});
     }
 
     /**
      * Clears the user entered values in the form.
      * */
-    _clearForm() {
-        this.setState({enabled: true,
+    clearForm() {
+        this.setState({
+            enabled: true,
             allTenants: false,
             files: [],
             platformProperties: [],
             selectedProperty: 0,
             name: "",
             description: "",
-            property: "",})
+            property: "",
+        })
     }
 
     render() {
@@ -253,24 +272,35 @@ class PlatformCreate extends Component {
             tags,
             defValue,
             description,
-            property} = this.state;
+            identifier,
+            property
+        } = this.state;
 
         return (
             <div className="middle createplatformmiddle">
                 <Card>
                     <CardTitle title="Create Platform"/>
-
                     <CardActions>
                         <div className="createplatformcardaction">
                             <form>
+                                <TextField
+                                    hintText="Unique Identifier for Platform."
+                                    id="identifier"
+                                    floatingLabelText="Identifier*"
+                                    floatingLabelFixed={true}
+                                    value={identifier}
+                                    onChange={this.onTextChange.bind(this)}
+                                />
+                                <br/>
                                 <TextField
                                     hintText="Enter the Platform Name."
                                     id="name"
                                     floatingLabelText="Name*"
                                     floatingLabelFixed={true}
                                     value={name}
-                                    onChange={this._onTextChange.bind(this)}
-                                /><br/>
+                                    onChange={this.onTextChange.bind(this)}
+                                />
+                                <br/>
                                 <TextField
                                     id="description"
                                     hintText="Enter the Platform Description."
@@ -279,33 +309,38 @@ class PlatformCreate extends Component {
                                     multiLine={true}
                                     rows={2}
                                     value={description}
-                                    onChange={this._onTextChange.bind(this)}
-                                /><br/><br/>
+                                    onChange={this.onTextChange.bind(this)}
+                                />
+                                <br/>
+                                <br/>
                                 <Toggle
                                     id="tenant"
                                     label="Shared with all Tenants"
                                     labelPosition="right"
-                                    onToggle={this._handleToggle.bind(this)}
+                                    onToggle={this.handleToggle.bind(this)}
                                     toggled={allTenants}
-                                /> <br/>
+                                />
+                                <br/>
                                 <Toggle
                                     id="enabled"
                                     label="Enabled"
                                     labelPosition="right"
-                                    onToggle={this._handleToggle.bind(this)}
+                                    onToggle={this.handleToggle.bind(this)}
                                     toggled={enabled}
-                                /> <br/>
+                                />
+                                <br/>
                                 <TextField
                                     id="tags"
                                     hintText="Enter Platform tags.."
                                     floatingLabelText="Tags*"
                                     floatingLabelFixed={true}
                                     value={defValue}
-                                    onChange={this._handleTagChange.bind(this)}
-                                    onKeyPress={this._addTags.bind(this)}
-                                /><br/>
+                                    onChange={this.handleTagChange.bind(this)}
+                                    onKeyPress={this.addTags.bind(this)}
+                                />
+                                <br/>
                                 <div style={this.styles.wrapper}>
-                                    {tags.map(this._renderChip, this)}
+                                    {tags.map(this.renderChip, this)}
                                 </div>
                                 <br/>
                                 <div>
@@ -313,7 +348,7 @@ class PlatformCreate extends Component {
                                     <div id="property-container">
                                         {platformProperties.map((p) => {
                                             return <div key={p.key}>{p.key} : {p.value}
-                                                <IconButton onClick={this._removeProperty.bind(this, p)}>
+                                                <IconButton onClick={this.removeProperty.bind(this, p)}>
                                                     <Close className="createplatformpropertyclose"/>
                                                 </IconButton>
                                             </div>
@@ -326,21 +361,21 @@ class PlatformCreate extends Component {
                                             floatingLabelText="Platform Property*"
                                             floatingLabelFixed={true}
                                             value={this.state.property}
-                                            onChange={this._onTextChange.bind(this)}
+                                            onChange={this.onTextChange.bind(this)}
                                         /> <em/>
                                         <SelectField
                                             className="createplatformpropertyselect"
                                             floatingLabelText="Property Type"
                                             value={selectedProperty}
                                             floatingLabelFixed={true}
-                                            onChange={this._onPropertySelect.bind(this)}>
+                                            onChange={this.onPropertySelect.bind(this)}>
                                             {propertyTypes.map((type) => {
-                                                return  <MenuItem key={type.key}
-                                                                  value={type.key}
-                                                                  primaryText={type.value}/>
+                                                return <MenuItem key={type.key}
+                                                                 value={type.key}
+                                                                 primaryText={type.value}/>
                                             })}
                                         </SelectField>
-                                        <IconButton onClick={this._addProperty.bind(this)}>
+                                        <IconButton onClick={this.addProperty.bind(this)}>
                                             <AddCircleOutline/>
                                         </IconButton>
                                         <br/>
@@ -350,27 +385,33 @@ class PlatformCreate extends Component {
                                     <p className="createplatformiconp">Platform Icon*:</p>
                                     <GridList className="createplatformicon" cols={1.1}>
                                         {this.state.icon.map((tile) => (
-                                            <GridTile key={Math.floor(Math.random() * 1000)}
-                                                      title={tile.name}
-                                                      actionIcon={
-                                                          <IconButton onClick={this._removeIcon.bind(this)}>
-                                                              <Clear />
-                                                          </IconButton>}>
+                                            <GridTile
+                                                key={Math.floor(Math.random() * 1000)}
+                                                title={tile.name}
+                                                actionIcon={
+                                                    <IconButton onClick={this.removeIcon.bind(this)}>
+                                                        <Clear/>
+                                                    </IconButton>}>
                                                 <img src={tile.preview}/>
                                             </GridTile>
                                         ))}
                                         {this.state.icon.length === 0 ?
-                                            <Dropzone className="createplatformdropzone"
-                                                      accept="image/jpeg, image/png"
-                                                      onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
+                                            <Dropzone
+                                                className="createplatformdropzone"
+                                                accept="image/jpeg, image/png"
+                                                onDrop={(icon, rejected) => {
+                                                    this.setState({icon, rejected})
+                                                }}
+                                            >
                                                 <p className="createplatformdropzonep">+</p>
-                                            </Dropzone> : <div />}
+                                            </Dropzone> : <div/>}
                                     </GridList>
                                 </div>
                                 <br/>
-                                <RaisedButton primary={true} label="Create"
-                                              onClick={this._onCreatePlatform.bind(this)}/>
-                                <FlatButton label="Cancel" onClick={this._clearForm.bind(this)}/>
+                                <RaisedButton
+                                    primary={true} label="Create"
+                                    onClick={this.onCreatePlatform.bind(this)}/>
+                                <FlatButton label="Cancel" onClick={this.clearForm.bind(this)}/>
                             </form>
                         </div>
                     </CardActions>
@@ -380,7 +421,6 @@ class PlatformCreate extends Component {
     }
 }
 
-PlatformCreate.prototypes = {
-};
+PlatformCreate.prototypes = {};
 
 export default PlatformCreate;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 0f994eb417d..b0ac709c514 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -56,7 +56,7 @@ class PlatformListing extends Component {
      * Handles the search action.
      * When typing in the search bar, this method will be invoked.
      * */
-    _searchApplications(word) {
+    searchApplications(word) {
         let searchedData = [];
     }
 
@@ -64,13 +64,13 @@ class PlatformListing extends Component {
      * Handles sort data function and toggles the asc state.
      * asc: true : sort in ascending order.
      * */
-    _sortData() {
+    sortData() {
         let isAsc = this.state.asc;
-        let datas = isAsc?this.data.sort(this._compare):this.data.reverse();
+        let datas = isAsc ? this.data.sort(this.compare) : this.data.reverse();
         this.setState({data: datas, asc: !isAsc});
     }
 
-    _compare(a, b) {
+    compare(a, b) {
         if (a.applicationName < b.applicationName)
             return -1;
         if (a.applicationName > b.applicationName)
@@ -78,24 +78,25 @@ class PlatformListing extends Component {
         return 0;
     }
 
-    _onRowClick(id) {
+    onRowClick(id) {
         console.log(id)
     }
 
     render() {
         return (
-            <div className= 'middle listingplatformmiddle'>
+            <div className='middle listingplatformmiddle'>
                 <Card className='listingplatformcard'>
-                    <TextField hintText="Search" onChange={this._searchApplications.bind(this)}
+                    <TextField hintText="Search" onChange={this.searchApplications.bind(this)}
                                className='listingplatformsearch'/>
                     <CardTitle title="Platforms" className='listingplatformTitle'/>
                     <CardActions>
 
                     </CardActions>
-                    <DataTable headers={this.headers}
-                               data={this.data}
-                               handleRowClick={this._onRowClick.bind(this)}
-                               noDataMessage={{type: 'button', text: 'Create Platform'}}/>
+                    <DataTable
+                        headers={this.headers}
+                        data={this.data}
+                        handleRowClick={this.onRowClick.bind(this)}
+                        noDataMessage={{type: 'button', text: 'Create Platform'}}/>
                 </Card>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index beb6086b58d..f0624ded4be 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -83,7 +83,7 @@ class DataTable extends Component {
      * Triggers when user click on table row.
      * This method invokes the parent method handleRowClick, which is passed via props.
      * */
-    _handleRowClick(id) {
+    handleRowClick(id) {
         this.props.handleRowClick(id);
     }
 
@@ -100,22 +100,29 @@ class DataTable extends Component {
 
         if (data) {
             return (<Table
-                selectable={ false }>
-                <TableHeader displaySelectAll={ false }
-                             adjustForCheckbox={ false }>
+                selectable={false}>
+                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                     <TableRow>
                         {headers.map((header) => {
-                                return (<DataTableHeader key={header.data_id} className="datatableRowColumn"
-                                                         header={header}/>)
-                            }
+                                return (
+                                    <DataTableHeader
+                                        key={header.data_id}
+                                        className="datatableRowColumn"
+                                        header={header}
+                                    />
+                                )}
                         )}
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    {data.map((dataItem) =>{
-                        return (<DataTableRow key={dataItem.id}
-                                              dataItem={dataItem}
-                                              handleClick={this._handleRowClick.bind(this)}/>)
+                    {data.map((dataItem) => {
+                        return (
+                            <DataTableRow
+                                key={dataItem.id}
+                                dataItem={dataItem}
+                                handleClick={this.handleRowClick.bind(this)}
+                            />
+                        )
                     })}
                 </TableBody>
             </Table>)
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 8d655c66179..45df39b72a7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -48,7 +48,7 @@ class DataTableHeader extends Component {
      * The onClick function of the table header.
      * Invokes the function passed in the header object.
      * */
-    _tableHeaderClick() {
+    tableHeaderClick() {
         this.props.header.sort();
     }
 
@@ -60,14 +60,18 @@ class DataTableHeader extends Component {
          * else create a span element with label as the table header.
          * */
         if (this.props.header.sortable) {
-            headerCell = <FlatButton label={this.props.header.label}
-                                    onClick={this._tableHeaderClick.bind(this)} className="sortableHeaderCell"/>;
+            headerCell =
+                <FlatButton
+                    label={this.props.header.label}
+                    onClick={this.tableHeaderClick.bind(this)}
+                    className="sortableHeaderCell"
+                />;
         } else {
             headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
         }
 
         return (
-            <TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn" >
+            <TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn">
                 {headerCell}
             </TableHeaderColumn>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 292f0e4eab6..52550234f79 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -41,7 +41,7 @@ class DataTableRow extends Component {
         /**
          *Loading the theme files based on the the user-preference.
          */
-       Theme.insertThemingScripts(this.scriptId);
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
@@ -51,24 +51,32 @@ class DataTableRow extends Component {
     /**
      * Triggers the click event on the data table row.
      * */
-    _handleClick() {
+    handleClick() {
         this.props.handleClick(this.state.dataItem.id);
     }
 
     render() {
         const {dataItem} = this.state;
         return (
-                <TableRow key={this.props.key} onClick={this._handleClick.bind(this)} >
-                    {Object.keys(dataItem).map((key) => {
-                        if (key !== 'id') {
-                            return <TableRowColumn className = "datatableRowColumn"
-                                                   key={key}>{dataItem[key]}</TableRowColumn>
-                        } else {
-                            return <TableRowColumn key={key}/>
-                        }
+            <TableRow
+                key={this.props.key}
+                onClick={this.handleClick.bind(this)}
+            >
+                {Object.keys(dataItem).map((key) => {
+                    if (key !== 'id') {
+                        return (
+                            <TableRowColumn
+                                className="datatableRowColumn"
+                                key={key}
+                            >
+                                {dataItem[key]}
+                            </TableRowColumn>)
+                    } else {
+                        return <TableRowColumn key={key}/>
+                    }
 
-                    } )}
-                </TableRow>
+                })}
+            </TableRow>
         );
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
index 5987730bab1..89f326b0a33 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
@@ -22,6 +22,7 @@ import React, {Component} from 'react';
 import Checkbox from 'material-ui/Checkbox';
 import TextField from 'material-ui/TextField';
 import {Redirect, Switch} from 'react-router-dom';
+import AuthHandler from '../../../api/authHandler';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 
@@ -65,15 +66,15 @@ class Login extends Component {
         // }
     }
 
-    _handleLogin(event) {
+    handleLogin(event) {
         event.preventDefault();
-        this._validateForm();
+        this.validateForm();
     }
 
     /**
      * Handles the username field change event.
      * */
-    _onUserNameChange(event, value) {
+    onUserNameChange(event, value) {
         this.setState(
             {
                 userName: value
@@ -84,7 +85,7 @@ class Login extends Component {
     /**
      * Handles the password field change event.
      * */
-    _onPasswordChange(event, value) {
+    onPasswordChange(event, value) {
         this.setState(
             {
                 password: value
@@ -95,7 +96,7 @@ class Login extends Component {
     /**
      * Handles the remember me check.
      * */
-    _handleRememberMe() {
+    handleRememberMe() {
         this.setState(
             {
                 rememberMe: !this.state.rememberMe
@@ -106,17 +107,32 @@ class Login extends Component {
     /**
      * Validate the login form.
      * */
-    _validateForm() {
+    validateForm() {
         let errors = {};
+        let validationFailed = true;
         if (!this.state.password) {
             errors["passwordError"] = "Password is Required";
+            validationFailed = true;
+        } else {
+            validationFailed = false;
         }
 
         if (!this.state.userName) {
             errors["userNameError"] = "User Name is Required";
+            validationFailed = true;
+        } else {
+            validationFailed = false;
         }
 
-        this.setState({errors: errors}, console.log(errors));
+        if (validationFailed) {
+            this.setState({errors: errors}, console.log(errors));
+        } else {
+            let loginPromis = AuthHandler.login(this.state.userName, this.state.password);
+            loginPromis.then(response => {
+                console.log(AuthHandler.getUser());
+                this.setState({isLoggedIn: AuthHandler.getUser()});
+            })
+        }
     }
 
     render() {
@@ -124,13 +140,12 @@ class Login extends Component {
         if (!this.state.isLoggedIn) {
             return (
                 <div>
-
                     {/*TODO: Style the components.*/}
 
                     <Card>
                         <CardTitle title="WSO2 IoT App Publisher"/>
                         <CardActions>
-                            <form onSubmit={this._handleLogin.bind(this)}>
+                            <form onSubmit={this.handleLogin.bind(this)}>
                                 <TextField
                                     hintText="Enter the User Name."
                                     id="username"
@@ -138,8 +153,9 @@ class Login extends Component {
                                     floatingLabelText="User Name*"
                                     floatingLabelFixed={true}
                                     value={this.state.userName}
-                                    onChange={this._onUserNameChange.bind(this)}
-                                /><br/>
+                                    onChange={this.onUserNameChange.bind(this)}
+                                />
+                                <br/>
                                 <TextField
                                     hintText="Enter the Password."
                                     id="password"
@@ -148,11 +164,14 @@ class Login extends Component {
                                     floatingLabelText="Password*"
                                     floatingLabelFixed={true}
                                     value={this.state.password}
-                                    onChange={this._onPasswordChange.bind(this)}
-                                /><br/>
-                                <Checkbox label="Remember me."
-                                          onCheck={this._handleRememberMe.bind(this)}
-                                          checked={this.state.rememberMe}/>
+                                    onChange={this.onPasswordChange.bind(this)}
+                                />
+                                <br/>
+                                <Checkbox
+                                    label="Remember me."
+                                    onCheck={this.handleRememberMe.bind(this)}
+                                    checked={this.state.rememberMe}
+                                />
                                 <br/>
                                 <RaisedButton type="submit" label="Login"/>
                             </form>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js
index a26e3415c02..788eb973da9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js
@@ -21,7 +21,6 @@ import NotFound from './Error/NotFound';
 import BaseLayout from './Base/BaseLayout';
 import PlatformCreate from './Platform/PlatformCreate';
 import PlatformListing from './Platform/PlatformListing';
-import PublisherOverview from './Overview/PublisherOverview';
 import ApplicationCreate from './Application/ApplicationCreate';
 import ApplicationListing from './Application/ApplicationListing';
 
@@ -29,5 +28,4 @@ import ApplicationListing from './Application/ApplicationListing';
  * Contains all UI components related to Application, Login and Platform
  */
 
-export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PublisherOverview,
-    PlatformCreate};
+export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PlatformCreate};

From a4e342ed08f2b6530d4414a6d95b6427bc182dc1 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Wed, 13 Sep 2017 20:17:58 +0530
Subject: [PATCH 3/8] Created Authentication Handler API for Application
 Management.

---
 .../pom.xml                                   | 192 ++++++++++++++++++
 .../handler/service/AuthHandlerService.java   |  52 +++++
 .../service/impl/AuthHandlerServiceImpl.java  | 162 +++++++++++++++
 .../mgt/auth/handler/util/Constants.java      |  34 ++++
 .../handler/util/dto/AccessTokenInfo.java     |  83 ++++++++
 .../handler/util/dto/ApiApplicationKey.java   |  49 +++++
 .../ApiApplicationRegistrationService.java    |  43 ++++
 .../util/dto/ApiRegistrationProfile.java      |  82 ++++++++
 .../util/dto/OAuthRequestInterceptor.java     |  47 +++++
 .../handler/util/dto/RegistrationProfile.java |  83 ++++++++
 .../handler/util/dto/TokenIssuerService.java  |  42 ++++
 .../handler/util/dto/TokenRevokeService.java} |  40 ++--
 .../src/main/webapp/META-INF/permissions.xml  |  35 ++++
 .../webapp/META-INF/webapp-classloading.xml   |  35 ++++
 .../src/main/webapp/WEB-INF/cxf-servlet.xml   |  38 ++++
 .../src/main/webapp/WEB-INF/web.xml           | 115 +++++++++++
 components/application-mgt/pom.xml            |   1 +
 .../pom.xml                                   | 120 +++++++++++
 .../src/main/resources/build.properties       |   1 +
 .../src/main/resources/p2.inf                 |   3 +
 .../pom.xml                                   |   2 +-
 features/application-mgt/pom.xml              |   1 +
 22 files changed, 1232 insertions(+), 28 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/pom.xml
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java
 create mode 100755 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java
 create mode 100755 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationRegistrationService.java
 create mode 100755 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiRegistrationProfile.java
 create mode 100755 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/OAuthRequestInterceptor.java
 create mode 100755 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/RegistrationProfile.java
 create mode 100755 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenIssuerService.java
 rename components/application-mgt/{org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.jsx => org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenRevokeService.java} (52%)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/permissions.xml
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/webapp-classloading.xml
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/cxf-servlet.xml
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/web.xml
 create mode 100644 features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/pom.xml
 create mode 100644 features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/build.properties
 create mode 100644 features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/p2.inf

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/pom.xml
new file mode 100644
index 00000000000..7dfdd93df4e
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/pom.xml
@@ -0,0 +1,192 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+~ Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+~
+~ WSO2 Inc. licenses this file to you under the Apache License,
+~ Version 2.0 (the "License"); you may not use this file except
+~ in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~    http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing,
+~ software distributed under the License is distributed on an
+~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+~ KIND, either express or implied.  See the License for the
+~ specific language governing permissions and limitations
+~ under the License.
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.wso2.carbon.devicemgt</groupId>
+        <artifactId>application-mgt</artifactId>
+        <version>3.0.46-SNAPSHOT</version>
+    </parent>
+
+    <artifactId>org.wso2.carbon.device.application.mgt.authhandler</artifactId>
+    <version>3.0.46-SNAPSHOT</version>
+    <packaging>war</packaging>
+    <name>WSO2 Carbon - Application Management Authentication Handler API</name>
+    <description>Proxy Service for Authentication Handling in WSO2 App Manager.</description>
+    <url>http://wso2.org</url>
+
+    <build>
+        <plugins>
+            <plugin>
+                <artifactId>maven-war-plugin</artifactId>
+                <configuration>
+                    <packagingExcludes>WEB-INF/lib/*cxf*.jar</packagingExcludes>
+                    <warName>auth#application-mgt#v1.0</warName>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+
+    <profiles>
+        <profile>
+            <id>deploy</id>
+            <build>
+                <defaultGoal>compile</defaultGoal>
+                <plugins>
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-antrun-plugin</artifactId>
+                        <version>1.7</version>
+                        <executions>
+                            <execution>
+                                <phase>compile</phase>
+                                <goals>
+                                    <goal>run</goal>
+                                </goals>
+                                <configuration>
+                                    <tasks>
+                                        <copy todir="${basedir}/../../../repository/deployment/server/webapps" overwrite="true">
+                                            <fileset dir="${basedir}/target">
+                                                <include name="auth#application-mgt#v1.0.war" />
+                                            </fileset>
+                                        </copy>
+                                    </tasks>
+                                </configuration>
+                            </execution>
+                        </executions>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+        <profile>
+            <id>client</id>
+            <build>
+                <defaultGoal>test</defaultGoal>
+                <plugins>
+                    <plugin>
+                        <groupId>org.codehaus.mojo</groupId>
+                        <artifactId>exec-maven-plugin</artifactId>
+                        <version>1.2.1</version>
+                        <executions>
+                            <execution>
+                                <phase>test</phase>
+                                <goals>
+                                    <goal>java</goal>
+                                </goals>
+                            </execution>
+                        </executions>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+    </profiles>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.apache.cxf</groupId>
+            <artifactId>cxf-rt-frontend-jaxws</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cxf</groupId>
+            <artifactId>cxf-rt-frontend-jaxrs</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cxf</groupId>
+            <artifactId>cxf-rt-transports-http</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.codehaus.jackson</groupId>
+            <artifactId>jackson-jaxrs</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.codehaus.jackson</groupId>
+            <artifactId>jackson-core-asl</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>javax.ws.rs</groupId>
+            <artifactId>jsr311-api</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.wso2.carbon</groupId>
+            <artifactId>org.wso2.carbon.utils</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.wso2.carbon</groupId>
+            <artifactId>org.wso2.carbon.logging</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.json.wso2</groupId>
+            <artifactId>json</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>commons-codec.wso2</groupId>
+            <artifactId>commons-codec</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <!-- https://mvnrepository.com/artifact/io.github.openfeign/feign-core -->
+        <dependency>
+            <groupId>io.github.openfeign</groupId>
+            <artifactId>feign-core</artifactId>
+            <version>9.5.0</version>
+        </dependency>
+        <!-- https://mvnrepository.com/artifact/io.github.openfeign/feign-jackson -->
+        <dependency>
+            <groupId>io.github.openfeign</groupId>
+            <artifactId>feign-jackson</artifactId>
+            <version>9.5.0</version>
+        </dependency>
+        <!-- https://mvnrepository.com/artifact/io.github.openfeign/feign-jackson -->
+        <dependency>
+            <groupId>io.github.openfeign</groupId>
+            <artifactId>feign-jaxrs</artifactId>
+            <version>9.5.0</version>
+        </dependency>
+        <dependency>
+            <groupId>javax.servlet</groupId>
+            <artifactId>servlet-api</artifactId>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.wso2.orbit.com.fasterxml.jackson.core</groupId>
+            <artifactId>jackson-annotations</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.hibernate</groupId>
+            <artifactId>hibernate-validator</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>javax.ws.rs</groupId>
+            <artifactId>javax.ws.rs-api</artifactId>
+        </dependency>
+    </dependencies>
+</project>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java
new file mode 100644
index 00000000000..5e4e9314d0a
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.wso2.carbon.device.application.mgt.auth.handler.service;
+
+import javax.ws.rs.Consumes;
+import javax.ws.rs.POST;
+import javax.ws.rs.Path;
+import javax.ws.rs.Produces;
+import javax.ws.rs.QueryParam;
+import javax.ws.rs.core.MediaType;
+import javax.ws.rs.core.Response;
+
+@Path("/auth")
+@Produces(MediaType.APPLICATION_JSON)
+@Consumes(MediaType.APPLICATION_JSON)
+public interface AuthHandlerService {
+
+    @POST
+    @Path("/login")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Consumes(MediaType.APPLICATION_JSON)
+    Response login(@QueryParam("userName") String userName, @QueryParam("password") String password);
+
+    @POST
+    @Path("/refresh")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Consumes(MediaType.APPLICATION_JSON)
+    Response refresh(@QueryParam("refresh_token") String refresh_token, @QueryParam("clientId") String clientId,
+                     @QueryParam("clientSecret") String clientSecret);
+
+    @POST
+    @Path("/logout")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Consumes(MediaType.APPLICATION_JSON)
+    Response logout(@QueryParam("token") String token, @QueryParam("clientId") String clientId,
+                    @QueryParam("clientSecret") String clientSecret);
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java
new file mode 100644
index 00000000000..cbb7846b94b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java
@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.wso2.carbon.device.application.mgt.auth.handler.service.impl;
+
+import feign.Client;
+import feign.Feign;
+import feign.auth.BasicAuthRequestInterceptor;
+import feign.jackson.JacksonDecoder;
+import feign.jackson.JacksonEncoder;
+import feign.jaxrs.JAXRSContract;
+import org.json.JSONObject;
+import org.wso2.carbon.device.application.mgt.auth.handler.service.AuthHandlerService;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.Constants;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.dto.AccessTokenInfo;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.dto.ApiApplicationKey;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.dto.ApiApplicationRegistrationService;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.dto.ApiRegistrationProfile;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.dto.TokenIssuerService;
+import org.wso2.carbon.device.application.mgt.auth.handler.util.dto.TokenRevokeService;
+
+import javax.net.ssl.HostnameVerifier;
+import javax.net.ssl.SSLContext;
+import javax.net.ssl.SSLSession;
+import javax.net.ssl.SSLSocketFactory;
+import javax.net.ssl.TrustManager;
+import javax.net.ssl.X509TrustManager;
+import javax.ws.rs.POST;
+import javax.ws.rs.Path;
+import javax.ws.rs.Produces;
+import javax.ws.rs.QueryParam;
+import javax.ws.rs.core.MediaType;
+import javax.ws.rs.core.Response;
+import java.security.KeyManagementException;
+import java.security.NoSuchAlgorithmException;
+
+@Path("/auth")
+public class AuthHandlerServiceImpl implements AuthHandlerService {
+
+    private TrustManager[] trustAllCerts = new TrustManager[]{
+            new X509TrustManager() {
+                public java.security.cert.X509Certificate[] getAcceptedIssuers() {
+                    return null;
+                }
+
+                public void checkClientTrusted(
+                        java.security.cert.X509Certificate[] certs, String authType) {
+                }
+
+                public void checkServerTrusted(
+                        java.security.cert.X509Certificate[] certs, String authType) {
+                }
+            }
+    };
+
+    private Client disableHostnameVerification = new Client.Default(getTrustedSSLSocketFactory(), new HostnameVerifier() {
+        @Override
+        public boolean verify(String s, SSLSession sslSession) {
+            return true;
+        }
+    });
+
+    @POST
+    @Path("/login")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Override
+    public Response login(@QueryParam("userName") String userName, @QueryParam("password") String password) {
+
+        try {
+            ApiApplicationRegistrationService apiApplicationRegistrationService = Feign.builder()
+                    .client(disableHostnameVerification)
+                    .requestInterceptor(new BasicAuthRequestInterceptor(userName, password))
+                    .contract(new JAXRSContract()).encoder(new JacksonEncoder()).decoder(new JacksonDecoder())
+                    .target(ApiApplicationRegistrationService.class, Constants.API_APPLICATION_ENDPOINT);
+            ApiRegistrationProfile apiRegistrationProfile = new ApiRegistrationProfile();
+            apiRegistrationProfile.setApplicationName(Constants.APPLICATION_NAME);
+            apiRegistrationProfile.setIsAllowedToAllDomains(false);
+            apiRegistrationProfile.setIsMappingAnExistingOAuthApp(false);
+            apiRegistrationProfile.setTags(Constants.TAGS);
+            ApiApplicationKey apiApplicationKey = apiApplicationRegistrationService.register(apiRegistrationProfile);
+
+            //PasswordGrantType
+            TokenIssuerService tokenIssuerService = Feign.builder().client(disableHostnameVerification)
+                    .requestInterceptor(new BasicAuthRequestInterceptor(apiApplicationKey.getConsumerKey(),
+                            apiApplicationKey.getConsumerSecret()))
+                    .contract(new JAXRSContract()).encoder(new JacksonEncoder()).decoder(new JacksonDecoder())
+                    .target(TokenIssuerService.class, Constants.TOKEN_ENDPOINT);
+            AccessTokenInfo accessTokenInfo = tokenIssuerService.getToken(Constants.PASSWORD_GRANT_TYPE,
+                    userName, password, Constants.SCOPES);
+            JSONObject loginInfo = new JSONObject(accessTokenInfo);
+            loginInfo.append(Constants.USER_NAME, userName);
+            loginInfo.append(Constants.APPLICATION_INFO, new JSONObject(apiApplicationKey));
+            System.out.println(loginInfo);
+            return Response.status(200).entity(loginInfo.toString()).build();
+        } catch (Exception e) {
+            //return Response.status(500).build();
+        }
+        return Response.status(200).build();
+    }
+
+    @POST
+    @Path("/refresh")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Override
+    public Response refresh(@QueryParam("refresh_token") String refresh_token, @QueryParam("clientId") String clientId,
+                            @QueryParam("clientSecret") String clientSecret) {
+        try {
+            TokenIssuerService tokenIssuerService = Feign.builder().client(disableHostnameVerification)
+                    .requestInterceptor(new BasicAuthRequestInterceptor(clientId, clientSecret))
+                    .contract(new JAXRSContract()).encoder(new JacksonEncoder()).decoder(new JacksonDecoder())
+                    .target(TokenIssuerService.class, Constants.TOKEN_ENDPOINT);
+            AccessTokenInfo accessTokenInfo = tokenIssuerService.getRefreshToken(Constants.REFRESH_GRANT_TYPE, refresh_token);
+            return Response.status(200).entity(new JSONObject(accessTokenInfo)).build();
+        } catch (Exception e) {
+            return Response.status(500).build();
+        }
+    }
+
+
+
+    @POST
+    @Path("/logout")
+    @Override
+    public Response logout(@QueryParam("token") String token, @QueryParam("clientId") String clientId,
+                           @QueryParam("clientSecret") String clientSecret) {
+        try {
+            TokenRevokeService tokenRevokeService = Feign.builder().client(disableHostnameVerification)
+                    .requestInterceptor(new BasicAuthRequestInterceptor(clientId, clientSecret))
+                    .contract(new JAXRSContract()).encoder(new JacksonEncoder()).decoder(new JacksonDecoder())
+                    .target(TokenRevokeService.class, Constants.TOKEN_ENDPOINT);
+            tokenRevokeService.revoke(token);
+
+            return Response.status(200).build();
+        } catch (Exception e) {
+            return Response.status(500).build();
+        }
+    }
+
+    private SSLSocketFactory getTrustedSSLSocketFactory() {
+        try {
+            SSLContext sc = SSLContext.getInstance("SSL");
+            sc.init(null, trustAllCerts, new java.security.SecureRandom());
+            return sc.getSocketFactory();
+        } catch (KeyManagementException | NoSuchAlgorithmException e) {
+            return null;
+        }
+    }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java
new file mode 100644
index 00000000000..9cb64b83fcf
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util;
+
+public class Constants {
+    public static String SCOPES = "perm:application:get perm:application:create perm:application:update " +
+            "perm:application-mgt:login perm:application:delete perm:platform:add perm:platform:remove " +
+            "perm:roles:view perm:devices:view perm:platform:get";
+
+    public static String[] TAGS = {"device_management"};
+    public static String USER_NAME = "userName";
+    public static String APPLICATION_NAME = "applicationmgt_publisher";
+    public static String TOKEN_ENDPOINT = "https://localhost:8243";
+    public static String PASSWORD_GRANT_TYPE = "password";
+    public static String REFRESH_GRANT_TYPE = "refresh_token";
+    public static String API_APPLICATION_ENDPOINT = "https://localhost:9443/api-application-registration/";
+    public static String APPLICATION_INFO = "application_info";
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java
new file mode 100755
index 00000000000..6f750d7cb9a
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
+
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlRootElement;
+
+/**
+ * This hold access token info that returned from the api call
+ */
+@XmlRootElement(name = "AccessTokenInfo")
+@JsonIgnoreProperties(ignoreUnknown = true)
+public class AccessTokenInfo {
+
+    @XmlElement(required = true, name = "token_type")
+    private String token_type;
+
+    @XmlElement(required = true, name = "expires_in")
+    private String expires_in;
+
+    @XmlElement(required = true, name = "refresh_token")
+    private String refresh_token;
+
+    @XmlElement(required = true, name = "access_token")
+    private String access_token;
+
+    public AccessTokenInfo() {}
+
+    public String getToken_type() {
+        return token_type;
+    }
+
+    public void setToken_type(String token_type) {
+        this.token_type = token_type;
+    }
+
+    public String getExpires_in() {
+        return expires_in;
+    }
+
+    public void setExpires_in(String expires_in) {
+        this.expires_in = expires_in;
+    }
+
+    public String getRefresh_token() {
+        return refresh_token;
+    }
+
+    public void setRefresh_token(String refresh_token) {
+        this.refresh_token = refresh_token;
+    }
+
+    public String getAccess_token() {
+        return access_token;
+    }
+
+    public void setAccess_token(String access_token) {
+        this.access_token = access_token;
+    }
+
+    @Override
+    public String toString() {
+        return access_token + " " + token_type + " " + refresh_token + " ";
+    }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java
new file mode 100644
index 00000000000..d66b4691fb8
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlRootElement;
+
+/**
+ * This holds api application consumer key and secret.
+ */
+@XmlRootElement
+public class ApiApplicationKey {
+    @XmlElement
+    private String client_id;
+    @XmlElement
+    private String client_secret;
+
+    public String getConsumerKey() {
+        return this.client_id;
+    }
+
+    public void setClient_id(String consumerKey) {
+        this.client_id = consumerKey;
+    }
+
+    public String getConsumerSecret() {
+        return this.client_secret;
+    }
+
+    public void setClient_secret(String consumerSecret) {
+        this.client_secret = consumerSecret;
+    }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationRegistrationService.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationRegistrationService.java
new file mode 100755
index 00000000000..913e0e51c92
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationRegistrationService.java
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+import javax.ws.rs.Consumes;
+import javax.ws.rs.POST;
+import javax.ws.rs.Path;
+import javax.ws.rs.Produces;
+import javax.ws.rs.core.MediaType;
+
+/**
+ * This is the application registration service that exposed for apimApplicationRegistration
+ */
+
+@Path("/register")
+public interface ApiApplicationRegistrationService {
+
+    /**
+     * This method is used to register api application
+     *
+     * @param registrationProfile contains the necessary attributes that are needed in order to register an app.
+     */
+    @POST
+    @Produces(MediaType.APPLICATION_JSON)
+    @Consumes(MediaType.APPLICATION_JSON)
+    ApiApplicationKey register(ApiRegistrationProfile registrationProfile);
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiRegistrationProfile.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiRegistrationProfile.java
new file mode 100755
index 00000000000..cbe488dbb80
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiRegistrationProfile.java
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+
+/**
+ * This class represents the data that are required to register
+ * the oauth application.
+ */
+public class ApiRegistrationProfile {
+
+    public String applicationName;
+    public String tags[];
+    public boolean isAllowedToAllDomains;
+    public String consumerKey;
+    public String consumerSecret;
+    public boolean isMappingAnExistingOAuthApp;
+
+    public String getApplicationName() {
+        return applicationName;
+    }
+
+    public void setApplicationName(String applicationName) {
+        this.applicationName = applicationName;
+    }
+
+    public String[] getTags() {
+        return tags;
+    }
+
+    public void setTags(String[] tags) {
+        this.tags = tags;
+    }
+
+    public boolean isAllowedToAllDomains() {
+        return isAllowedToAllDomains;
+    }
+
+    public void setIsAllowedToAllDomains(boolean isAllowedToAllDomains) {
+        this.isAllowedToAllDomains = isAllowedToAllDomains;
+    }
+
+    public boolean isMappingAnExistingOAuthApp() {
+        return isMappingAnExistingOAuthApp;
+    }
+
+    public void setIsMappingAnExistingOAuthApp(boolean isMappingAnExistingOAuthApp) {
+        this.isMappingAnExistingOAuthApp = isMappingAnExistingOAuthApp;
+    }
+
+    public String getConsumerKey() {
+        return consumerKey;
+    }
+
+    public void setConsumerKey(String consumerKey) {
+        this.consumerKey = consumerKey;
+    }
+
+    public String getConsumerSecret() {
+        return consumerSecret;
+    }
+
+    public void setConsumerSecret(String consumerSecret) {
+        this.consumerSecret = consumerSecret;
+    }
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/OAuthRequestInterceptor.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/OAuthRequestInterceptor.java
new file mode 100755
index 00000000000..c99a738b7b6
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/OAuthRequestInterceptor.java
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+
+import feign.RequestInterceptor;
+import feign.RequestTemplate;
+
+import static feign.Util.checkNotNull;
+
+/**
+ * This is a request interceptor to add oauth token header.
+ */
+public class OAuthRequestInterceptor implements RequestInterceptor {
+
+    private final String headerValue;
+
+    /**
+     * Creates an interceptor that authenticates all requests with the specified OAUTH token
+     *
+     * @param token the access token to use for authentication
+     */
+    public OAuthRequestInterceptor(String token) {
+        checkNotNull(token, "access_token");
+        headerValue = "Bearer " + token;
+    }
+    @Override
+    public void apply(RequestTemplate template) {
+        template.header("Authorization", headerValue);
+    }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/RegistrationProfile.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/RegistrationProfile.java
new file mode 100755
index 00000000000..d1893280998
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/RegistrationProfile.java
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+/**
+ * This class represents the data that are required to register
+ * the oauth application.
+ */
+public class RegistrationProfile {
+
+    public String callbackUrl;
+    public String clientName;
+    public String tokenScope;
+    public String owner;
+    public String grantType;
+    public String applicationType;
+
+    private static final String TAG = RegistrationProfile.class.getSimpleName();
+
+    public String getCallbackUrl() {
+        return callbackUrl;
+    }
+
+    public void setCallbackUrl(String callBackUrl) {
+        this.callbackUrl = callBackUrl;
+    }
+
+    public String getClientName() {
+        return clientName;
+    }
+
+    public void setClientName(String clientName) {
+        this.clientName = clientName;
+    }
+
+    public String getTokenScope() {
+        return tokenScope;
+    }
+
+    public void setTokenScope(String tokenScope) {
+        this.tokenScope = tokenScope;
+    }
+
+    public String getOwner() {
+        return owner;
+    }
+
+    public void setOwner(String owner) {
+        this.owner = owner;
+    }
+
+    public String getGrantType() {
+        return grantType;
+    }
+
+    public void setGrantType(String grantType) {
+        this.grantType = grantType;
+    }
+
+    public String getApplicationType() {
+        return applicationType;
+    }
+
+    public void setApplicationType(String applicationType) {
+        this.applicationType = applicationType;
+    }
+
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenIssuerService.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenIssuerService.java
new file mode 100755
index 00000000000..86eae76471c
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenIssuerService.java
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
+
+import javax.ws.rs.POST;
+import javax.ws.rs.Path;
+import javax.ws.rs.Produces;
+import javax.ws.rs.QueryParam;
+import javax.ws.rs.core.MediaType;
+
+/**
+ * This hold the api definition that is used as a contract with netflix feign.
+ */
+@Path("/token")
+public interface TokenIssuerService {
+
+    @POST
+    @Produces(MediaType.APPLICATION_JSON)
+    AccessTokenInfo getToken(@QueryParam("grant_type") String grant, @QueryParam("username") String username,
+                             @QueryParam("password") String password, @QueryParam("scope") String scope);
+
+    @POST
+    @Produces(MediaType.APPLICATION_JSON)
+    AccessTokenInfo getRefreshToken(@QueryParam("grant_type") String grantType,
+                                    @QueryParam("refreshToken") String refreshToken);
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenRevokeService.java
similarity index 52%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.jsx
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenRevokeService.java
index c5ba536d067..331d24d333a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/TokenRevokeService.java
@@ -11,39 +11,25 @@
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
+ * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {Component} from 'react';
-import DataTable from '../UIComponents/DataTable';
 
-/**
- *
- * ***NEW***
- * The Publisher overview component.
- * This component could be used to view app analytics.
- * i.e number of overall downloads, ratings ect.
- * */
-class PublisherOverview extends Component {
-
-    constructor() {
-        super();
-    }
+package org.wso2.carbon.device.application.mgt.auth.handler.util.dto;
 
-    componentWillMount() {
-    }
+import javax.ws.rs.POST;
+import javax.ws.rs.Path;
+import javax.ws.rs.QueryParam;
+import javax.ws.rs.core.Response;
 
-    render() {
-
-        return (
+/**
+ * Api definition for token revoke that will be used as Feign contract.
+ * */
+@Path("/revoke")
+public interface TokenRevokeService {
 
-            <div>
-                Overview
+    @POST
+    Response revoke(@QueryParam("token")String accessToken);
 
-            </div>
-        );
-    }
 }
-
-export default PublisherOverview;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/permissions.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/permissions.xml
new file mode 100644
index 00000000000..4fe224af469
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/permissions.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+  ~
+  ~ WSO2 Inc. licenses this file to you under the Apache License,
+  ~ Version 2.0 (the "License"); you may not use this file except
+  ~ in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied. See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<!-- This file contains the list of permissions that are associated with URL end points
+    of the web app. Each permission should contain the name, permission path ,API path
+    (URL) , HTTP method and OAUTH2 authorization scope (not-required).
+    When defining dynamic paths for APIs, path variables are denoted by '*' notation.
+    For ex:
+    Actual API endpoint: devicemgt_admin/1.0.0/devices/{device-id}
+    URL to be represented here: /devices/*
+    NOTE: All the endpoints of the web app should be available in this file. Otherwise
+    it will result 403 error at the runtime.
+-->
+<PermissionConfiguration>
+    <APIVersion></APIVersion>
+
+    <!-- Application related permissions -->
+
+</PermissionConfiguration>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/webapp-classloading.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/webapp-classloading.xml
new file mode 100644
index 00000000000..ed2ed216247
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/META-INF/webapp-classloading.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+
+<!--
+  ~ Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+  ~
+  ~ WSO2 Inc. licenses this file to you under the Apache License,
+  ~ Version 2.0 (the "License"); you may not use this file except
+  ~ in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<!--
+    This file defines class loading policy of the whole container. But this behaviour can be overridden by individual webapps by putting this file into the META-INF/ directory.   
+-->
+<Classloading xmlns="http://wso2.org/projects/as/classloading">
+
+    <!-- Parent-first or child-first. Default behaviour is child-first.-->
+    <ParentFirst>false</ParentFirst>
+
+    <!-- 
+	Default environments that contains provides to all the webapps. This can be overridden by individual webapps by specifing required environments 
+	Tomcat environment is the default and every webapps gets it even if they didn't specify it.
+	e.g. If a webapps requires CXF, they will get both Tomcat and CXF.
+     -->
+    <Environments>CXF,Carbon</Environments>
+</Classloading>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/cxf-servlet.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/cxf-servlet.xml
new file mode 100644
index 00000000000..64efa8991d9
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/cxf-servlet.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+  ~
+  ~ WSO2 Inc. licenses this file to you under the Apache License,
+  ~ Version 2.0 (the "License"); you may not use this file except
+  ~ in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied. See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<beans xmlns="http://www.springframework.org/schema/beans"
+       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xmlns:jaxrs="http://cxf.apache.org/jaxrs"
+       xsi:schemaLocation="
+http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
+http://cxf.apache.org/jaxrs http://cxf.apache.org/schemas/jaxrs.xsd">
+
+    <jaxrs:server id="applicationMgtAuthService" address="/">
+        <jaxrs:serviceBeans>
+            <ref bean="applicationMgtAuthServiceBean"/>
+        </jaxrs:serviceBeans>
+    </jaxrs:server>
+
+    <bean id="applicationMgtAuthServiceBean"
+          class="org.wso2.carbon.device.application.mgt.auth.handler.service.impl.AuthHandlerServiceImpl"/>
+
+
+</beans>
+
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/web.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/web.xml
new file mode 100644
index 00000000000..52559eead94
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/webapp/WEB-INF/web.xml
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+  ~
+  ~ WSO2 Inc. licenses this file to you under the Apache License,
+  ~ Version 2.0 (the "License"); you may not use this file except
+  ~ in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied. See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
+         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
+         version="2.5">
+    <display-name>Application Management Auth Webapp</display-name>
+    <servlet>
+        <description>JAX-WS/JAX-RS Application Management Endpoint</description>
+        <display-name>JAX-WS/JAX-RS Servlet</display-name>
+        <servlet-name>CXFServlet</servlet-name>
+        <servlet-class>
+            org.apache.cxf.transport.servlet.CXFServlet
+        </servlet-class>
+     </servlet>
+    <servlet-mapping>
+        <servlet-name>CXFServlet</servlet-name>
+        <url-pattern>/*</url-pattern>
+    </servlet-mapping>
+    <session-config>
+        <session-timeout>60</session-timeout>
+    </session-config>
+    <context-param>
+        <param-name>doAuthentication</param-name>
+        <param-value>false</param-value>
+    </context-param>
+
+    <!--publish to apim-->
+    <context-param>
+        <param-name>managed-api-enabled</param-name>
+        <param-value>false</param-value>
+    </context-param>
+    <context-param>
+        <param-name>managed-api-owner</param-name>
+        <param-value>admin</param-value>
+    </context-param>
+    <context-param>
+        <param-name>isSharedWithAllTenants</param-name>
+        <param-value>true</param-value>
+    </context-param>
+
+    <filter>
+        <filter-name>CorsFilter</filter-name>
+        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
+        <init-param>
+            <param-name>cors.allowed.origins</param-name>
+            <param-value>*</param-value>
+        </init-param>
+        <init-param>
+            <param-name>cors.allowed.methods</param-name>
+            <param-value>GET,POST,DELETE,PUT</param-value>
+        </init-param>
+        <init-param>
+            <param-name>cors.allowed.headers</param-name>
+            <param-value>Content-Type</param-value>
+        </init-param>
+    </filter>
+
+    <filter>
+        <filter-name>HttpHeaderSecurityFilter</filter-name>
+        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
+        <init-param>
+            <param-name>hstsEnabled</param-name>
+            <param-value>false</param-value>
+        </init-param>
+    </filter>
+
+    <filter>
+        <filter-name>ContentTypeBasedCachePreventionFilter</filter-name>
+        <filter-class>org.wso2.carbon.ui.filters.cache.ContentTypeBasedCachePreventionFilter</filter-class>
+        <init-param>
+            <param-name>patterns</param-name>
+            <param-value>text/html" ,application/json" ,text/plain</param-value>
+        </init-param>
+        <init-param>
+            <param-name>filterAction</param-name>
+            <param-value>enforce</param-value>
+        </init-param>
+        <init-param>
+            <param-name>httpHeaders</param-name>
+            <param-value>Cache-Control: no-store, no-cache, must-revalidate, private</param-value>
+        </init-param>
+    </filter>
+
+    <filter-mapping>
+        <filter-name>HttpHeaderSecurityFilter</filter-name>
+        <url-pattern>/*</url-pattern>
+    </filter-mapping>
+
+    <filter-mapping>
+        <filter-name>ContentTypeBasedCachePreventionFilter</filter-name>
+        <url-pattern>/*</url-pattern>
+    </filter-mapping>
+
+    <filter-mapping>
+        <filter-name>CorsFilter</filter-name>
+        <url-pattern>/*</url-pattern>
+    </filter-mapping>
+
+</web-app>
\ No newline at end of file
diff --git a/components/application-mgt/pom.xml b/components/application-mgt/pom.xml
index 61523a4ba9f..5b7f9cad9d9 100644
--- a/components/application-mgt/pom.xml
+++ b/components/application-mgt/pom.xml
@@ -38,6 +38,7 @@
         <module>org.wso2.carbon.device.application.mgt.common</module>
         <module>org.wso2.carbon.device.application.mgt.api</module>
         <module>org.wso2.carbon.device.application.mgt.publisher.ui</module>
+        <module>org.wso2.carbon.device.application.mgt.authhandler</module>
     </modules>
 
     <build>
diff --git a/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/pom.xml b/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/pom.xml
new file mode 100644
index 00000000000..06e460a5911
--- /dev/null
+++ b/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/pom.xml
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+~ Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+~
+~ WSO2 Inc. licenses this file to you under the Apache License,
+~ Version 2.0 (the "License"); you may not use this file except
+~ in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~    http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing,
+~ software distributed under the License is distributed on an
+~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+~ KIND, either express or implied.  See the License for the
+~ specific language governing permissions and limitations
+~ under the License.
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <parent>
+        <groupId>org.wso2.carbon.devicemgt</groupId>
+        <artifactId>application-mgt-feature</artifactId>
+        <version>3.0.46-SNAPSHOT</version>
+    </parent>
+
+    <modelVersion>4.0.0</modelVersion>
+    <artifactId>org.wso2.carbon.device.application.mgt.auth.handler.feature</artifactId>
+    <version>3.0.46-SNAPSHOT</version>
+    <packaging>pom</packaging>
+    <name>WSO2 Carbon - Application Management Authentication Handler Feature</name>
+    <description>This feature contains the Authentication Handler implementation for Publisher and Store.</description>
+    <url>http://wso2.org</url>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-dependency-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>copy</id>
+                        <phase>package</phase>
+                        <goals>
+                            <goal>copy</goal>
+                        </goals>
+                        <configuration>
+                            <artifactItems>
+                                <artifactItem>
+                                    <groupId>org.wso2.carbon.devicemgt</groupId>
+                                    <artifactId>org.wso2.carbon.device.application.mgt.authhandler
+                                    </artifactId>
+                                    <version>${project.version}</version>
+                                    <type>war</type>
+                                    <overWrite>true</overWrite>
+                                    <outputDirectory>
+                                        ${project.build.directory}/maven-shared-archive-resources/webapps
+                                    </outputDirectory>
+                                    <destFileName>auth#application-mgt#v1.0.war</destFileName>
+                                </artifactItem>
+                            </artifactItems>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-resources-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>copy-resources</id>
+                        <phase>generate-resources</phase>
+                        <goals>
+                            <goal>copy-resources</goal>
+                        </goals>
+                        <configuration>
+                            <outputDirectory>src/main/resources</outputDirectory>
+                            <resources>
+                                <resource>
+                                    <directory>resources</directory>
+                                    <includes>
+                                        <include>build.properties</include>
+                                        <include>p2.inf</include>
+                                    </includes>
+                                </resource>
+                            </resources>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>org.wso2.maven</groupId>
+                <artifactId>carbon-p2-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>p2-feature-generation</id>
+                        <phase>package</phase>
+                        <goals>
+                            <goal>p2-feature-gen</goal>
+                        </goals>
+                        <configuration>
+                            <id>org.wso2.carbon.device.application.mgt.auth.handler</id>
+                            <propertiesFile>../../../features/etc/feature.properties
+                            </propertiesFile>
+                            <adviceFile>
+                                <properties>
+                                    <propertyDef>org.wso2.carbon.p2.category.type:server
+                                    </propertyDef>
+                                    <propertyDef>org.eclipse.equinox.p2.type.group:false
+                                    </propertyDef>
+                                </properties>
+                            </adviceFile>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+</project>
diff --git a/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/build.properties b/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/build.properties
new file mode 100644
index 00000000000..9c86577d768
--- /dev/null
+++ b/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/build.properties
@@ -0,0 +1 @@
+custom = true
diff --git a/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/p2.inf b/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/p2.inf
new file mode 100644
index 00000000000..8cc8bbdfd5e
--- /dev/null
+++ b/features/application-mgt/org.wso2.carbon.device.application.mgt.auth.handler.feature/src/main/resources/p2.inf
@@ -0,0 +1,3 @@
+instructions.configure = \
+org.eclipse.equinox.p2.touchpoint.natives.mkdir(path:${installFolder}/../../deployment/server/webapps/);\
+org.eclipse.equinox.p2.touchpoint.natives.copy(source:${installFolder}/../features/org.wso2.carbon.device.application.mgt.auth.handler_${feature.version}/webapps/auth#application-mgt#v1.0.war,target:${installFolder}/../../deployment/server/webapps/auth#application-mgt#v1.0.war,overwrite:true);\
\ No newline at end of file
diff --git a/features/application-mgt/org.wso2.carbon.device.application.mgt.feature/pom.xml b/features/application-mgt/org.wso2.carbon.device.application.mgt.feature/pom.xml
index 913e58579a5..76e3387876e 100644
--- a/features/application-mgt/org.wso2.carbon.device.application.mgt.feature/pom.xml
+++ b/features/application-mgt/org.wso2.carbon.device.application.mgt.feature/pom.xml
@@ -42,7 +42,7 @@
         </dependency>
         <dependency>
             <groupId>org.wso2.carbon.devicemgt</groupId>
-            <artifactId>org.wso2.carbon.device.application.mgt.ui.feature</artifactId>
+            <artifactId>org.wso2.carbon.device.application.mgt.publisher.ui.feature</artifactId>
             <type>zip</type>
         </dependency>
         <dependency>
diff --git a/features/application-mgt/pom.xml b/features/application-mgt/pom.xml
index f70cb75863b..878b9f5a0cd 100644
--- a/features/application-mgt/pom.xml
+++ b/features/application-mgt/pom.xml
@@ -35,6 +35,7 @@
 
     <modules>
         <module>org.wso2.carbon.device.application.mgt.api.feature</module>
+        <module>org.wso2.carbon.device.application.mgt.auth.handler.feature</module>
         <!--<module>org.wso2.carbon.device.application.mgt.ui.feature</module>-->
         <module>org.wso2.carbon.device.application.mgt.feature</module>
         <!--<module>org.wso2.carbon.device.application.mgt.extensions.feature</module>-->

From 2b6f9a9e2c6276c54c367a211fe76ded241963b7 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Wed, 13 Sep 2017 20:32:28 +0530
Subject: [PATCH 4/8] Api integration stage 2: Create and retrieve apps and
 platforms.

---
 .../pom.xml                                   |   8 +-
 .../src/main/resources/publisher/src/App.jsx  |   7 +-
 .../publisher/src/api/authHandler.js          |  54 +++++-
 .../resources/publisher/src/api/data/user.js  |  20 ++-
 .../resources/publisher/src/api/data/utils.js |   2 -
 .../resources/publisher/src/api/endpoints.js  |  81 ++++-----
 .../src/api/helpers/appMgtApiHelpers.js       |  19 ++-
 .../publisher/src/common/constants.js         |  19 +--
 .../Application/ApplicationCreate.jsx         |  70 +++++---
 .../Application/ApplicationListing.jsx        | 158 ++++++++++++------
 .../Application/CreateSteps/Step1.jsx         |  56 +++++--
 .../Application/CreateSteps/Step3.jsx         |  14 +-
 .../src/components/Base/BaseLayout.jsx        |  30 +++-
 .../components/Platform/PlatformCreate.jsx    |   1 +
 .../src/components/UIComponents/DataTable.jsx |   3 +-
 .../UIComponents/DataTableHeader.jsx          |   6 +-
 16 files changed, 362 insertions(+), 186 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
index a95ca6c8ddd..962be6a3df2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
@@ -19,15 +19,19 @@
 <project xmlns="http://maven.apache.org/POM/4.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-    <modelVersion>4.0.0</modelVersion>
-
     <parent>
         <groupId>org.wso2.carbon.devicemgt</groupId>
         <artifactId>application-mgt</artifactId>
         <version>3.0.46-SNAPSHOT</version>
     </parent>
+
+    <modelVersion>4.0.0</modelVersion>
     <artifactId>org.wso2.carbon.device.application.mgt.publisher.ui</artifactId>
     <version>3.0.46-SNAPSHOT</version>
+    <packaging>war</packaging>
+    <name>WSO2 Carbon - Application Management Publisher UI</name>
+    <description>WSO2 Carbon - Application Management Publisher UI React Application</description>
+    <url>http://wso2.org</url>
 
     <build>
         <plugins>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 4b55d0e77df..3198738e6da 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -56,16 +56,17 @@ class Base extends Component {
         super();
         this.state = {
             user: null
-
         }
     }
 
     componentWillMount() {
         let user = AuthHandler.getUser();
-
         if (user) {
             if (!AuthHandler.isTokenExpired()) {
                 this.setState({user: user});
+            } else {
+                console.log("expired!");
+                this.setState({user: null});
             }
         }
     }
@@ -79,7 +80,7 @@ class Base extends Component {
             console.log("Have User.");
             return (
                 <div className="container">
-                    <BaseLayout>
+                    <BaseLayout user={this.state.user}>
                         <Switch>
                             <Redirect exact path={"/"} to={"/assets/apps"}/>
                             <Route exact path={"/assets/apps"} component={ApplicationListing}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
index e7f9e60fc0f..ffd94269185 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
@@ -36,8 +36,9 @@ class AuthHandler {
      * */
     static login(userName, password) {
         const headers = {"Content-type": "application/json"};
-        let login_promise = Axios.post("https://localhost:9443/auth/application-mgt/v1.0/auth/login?userName=admin&password=admin",
-            null, {headers: headers});
+        let login_promise =
+                Axios.post(Constants.userConstants.LOGIN_URL+"?userName=" + userName+ "&password=" + password,
+                null, {headers: headers});
 
         login_promise.then(response => {
                 console.log(response);
@@ -51,6 +52,8 @@ class AuthHandler {
                 const user = new User(userName, clientId, clientSecret, validityPeriod);
                 console.log(user);
                 user.setAuthToken(WSO2_IOT_TOKEN, validityPeriod);
+                let expiresIn = Date.now() + (validityPeriod * 1000);
+                localStorage.setItem("expiresIn", expiresIn);
                 AuthHandler.setUser(user);
             }
         );
@@ -67,10 +70,24 @@ class AuthHandler {
         if (!user instanceof User) {
             throw "Invalid user object";
         }
+        user.created = Date.now();
         localStorage.setItem(Constants.userConstants.WSO2_USER, JSON.stringify(user.toJson()));
         /* TODO: IMHO it's better to get this key (`wso2_user`) from configs */
     }
 
+    static unauthorizedErrorHandler(error_response) {
+        if (error_response.status !== 401) { /* Skip unrelated response code to handle in unauthorizedErrorHandler*/
+            throw error_response;
+            /* re throwing the error since we don't handle it here and propagate to downstream error handlers in catch chain*/
+        }
+        let message = "The session has expired" + ".<br/> You will be redirect to the login page ...";
+        if (true) {
+            alert(message);
+        } else {
+            throw error_response;
+        }
+    }
+
     /**
      * Get the logged in user.
      * @return User: The logged in user object.
@@ -89,8 +106,27 @@ class AuthHandler {
 
     }
 
-    logout() {
+    static logout() {
+        const user = AuthHandler.getUser();
+        const clientId = user.getClientId();
+        const clientSecret = user.getClientSecret();
+        const token = user.getAuthToken();
+        const headers = {"Content-type": "application/json"};
 
+        let login_promise = Axios.post(Constants.userConstants.LOGOUT_URL+"?token=" + token + "&clientId=" + clientId
+            + "&clientSecret=" + clientSecret,
+            null, {headers: headers});
+        login_promise.then(
+            (response) => {
+                Utils.delete_cookie(Constants.userConstants.PARTIAL_TOKEN);
+                localStorage.removeItem(Constants.userConstants.WSO2_USER);
+                window.location = "/";
+            }
+        ).catch(
+            (err) => {
+                AuthHandler.unauthorizedErrorHandler(err);
+            }
+        )
     }
 
     /**
@@ -98,9 +134,17 @@ class AuthHandler {
      * @return boolean: True if expired. False otherwise.
      * */
     static isTokenExpired() {
-        const userData = AuthHandler.getUser().getAuthToken();
-        return (Date.now() - userData._createdTime) > userData._expires;
+        const expiresIn = localStorage.getItem("expiresIn");
+        return (expiresIn < Date.now());
     }
+
+    static createAuthenticationHeaders(contentType) {
+        return {
+            "Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
+            "Content-Type": contentType,
+        };
+
+    };
 }
 
 export default AuthHandler;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js
index c9363a82edb..dd6e79b9179 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js
@@ -33,7 +33,6 @@ export default class User {
         this._clientId = clientId;
         this._clientSecret = clientSecret;
         this._expires = validityPeriod;
-        this._createdTime = Date.now();
         User._instance = this;
     }
 
@@ -61,6 +60,14 @@ export default class User {
         return Utils.getCookie(Constants.userConstants.PARTIAL_TOKEN);
     }
 
+    getClientId() {
+        return this._clientId;
+    }
+
+    getClientSecret() {
+        return this._clientSecret;
+    }
+
     /**
      * Store the JavaScript accessible access token segment in cookie storage
      * @param {String} newToken : Part of the access token which needs when accessing REST API
@@ -72,11 +79,11 @@ export default class User {
     }
 
     /**
-     *
-     * @param type
-     */
-    checkPermission(type) {
-        throw ("Not implemented!");
+     * Get the user name of logged in user.
+     * @return String: User name
+     * */
+    getUserName() {
+        return this._userName;
     }
 
     /**
@@ -98,7 +105,6 @@ export default class User {
      * @returns {User} : An instance of User(this) class.
      */
     static fromJson(userJson) {
-
         const _user = new User(userJson.name);
         _user._clientId = userJson.clientId;
         _user._clientSecret = userJson.clientSecret;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js
index 28a654816eb..815c05b796b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js
@@ -87,8 +87,6 @@ class PublisherUtils {
     static isEmptyObject(object) {
         return Object.keys(object).length === 0 && object.constructor === Object
     }
-
-
 }
 
 export default PublisherUtils;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
index fd32fbed20f..1491d2363b1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
@@ -27,7 +27,7 @@ import Helper from './helpers/appMgtApiHelpers';
 export default class Endpoint {
 
     /* =================================================================
-     * Application related apis
+     *               Application related apis
      * */
 
     /**
@@ -38,37 +38,33 @@ export default class Endpoint {
      * From applicationData, the proper application object will be created and send it to the api.
      * */
     static createApplication(applicationData) {
-
         let app = Helper.buildApplication(applicationData).application;
-        let user = AuthHandler.getUser();
-        console.log(user.idToken);
-        const headers = {
-            "Authorization": 'Bearer ' + user.getAuthToken(),
-            "Content-Type": "application/json",
-        };
-
-        Axios.post(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers}).then(
-            function (response) {
-                console.log(response);
-            }
-        ).catch(function (err) {
-            console.log(err);
-        });
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.post(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
+    }
 
+    /**
+     * Upload the image artifacts (banner, icon, screenshots) related to the application.
+     * @param appId: The application uuid of the application which the images should be uploaded to.
+     * */
+    static uploadImageArtifacts(appId) {
+        let user = AuthHandler.getUser();
+        const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
+        return Axios.post(Constants.appManagerEndpoints.UPLOAD_IMAGES + appId, appId, {headers: headers});
     }
 
     /**
      * Method to handle application release process.
      * */
-    static releaseApplication() {
+    static releaseApplication(appId) {
 
     }
 
     /**
-     * Promote the current state of the application.
+     * Promote the current life cycle state of the application.
      * @param appId: The uuid of the application which the state should be updated.
      * */
-    static updateState(appId) {
+    static updateLifeCycleState(appId) {
 
     }
 
@@ -76,7 +72,7 @@ export default class Endpoint {
      * Get the next possible state, which the application can be promoted to.
      * @param appId: The application uuid.
      */
-    static getNextState(appId) {
+    static getNextLifeCycleState(appId) {
 
     }
 
@@ -85,7 +81,14 @@ export default class Endpoint {
      * @param applicationData: The modified application data.
      * */
     static editApplication(applicationData) {
+        let app = Helper.buildApplication(applicationData).application;
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.put(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
+    }
 
+    static editApplicationArtofacts(appId) {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.put(Constants.appManagerEndpoints.CREATE_APP, appId, {headers: headers});
     }
 
     /**
@@ -95,12 +98,7 @@ export default class Endpoint {
     static getApplications() {
         let user = AuthHandler.getUser();
         console.log("Get all applications", user.getAuthToken());
-        const headers = {
-            "Authorization": 'Bearer ' + user.getAuthToken(),
-            'Accept': 'application/json',
-            "Content-Type": "application/json",
-        };
-
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
         return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS, {headers: headers});
     }
 
@@ -109,7 +107,10 @@ export default class Endpoint {
      * @param appId: The application Id.
      * */
     static getApplication(appId) {
-
+        let user = AuthHandler.getUser();
+        console.log("Get Application",appId, user.getAuthToken());
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS + appId, {headers: headers});
     }
 
     /**
@@ -123,11 +124,8 @@ export default class Endpoint {
     /*
      *              End of Application management apis.
      * =================================================================
-     * */
-
-    /*
      * =================================================================
-     * Platform related apis
+     *                   Platform related apis
      * */
 
     /**
@@ -135,13 +133,7 @@ export default class Endpoint {
      * @param platformData: The platform data object.
      * */
     static createPlatform(platformData) {
-
-        const headers = {
-            "Authorization": 'Bearer ' + AuthHandler.getUser().getAuthToken(),
-            'Accept': 'application/json',
-            "Content-Type": "application/json",
-        };
-
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
         Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then(
             function (response) {
                 console.log(response);
@@ -149,14 +141,14 @@ export default class Endpoint {
         ).catch(function (err) {
             console.log(err);
         });
-
     }
 
     /**
      * Get available platforms
      * */
     static getPlatforms() {
-
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.get(Constants.platformManagerEndpoints.GET_ENABLED_PLATFORMS, {headers: headers});
     }
 
     /**
@@ -164,7 +156,8 @@ export default class Endpoint {
      * @param platformId: The identifier of the platform
      * */
     static getPlatform(platformId) {
-
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.get(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
     }
 
     /**
@@ -172,12 +165,12 @@ export default class Endpoint {
      * @param platformId: The id of the platform which is to be deleted.
      * */
     static deletePlatform(platformId) {
-
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.delete(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
     }
 
     /*
-    * End of Platform management apis.
+    *              End of Platform management apis.
     * =================================================================
     * */
-
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
index 00629cec4f9..acf3d27815a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
@@ -39,13 +39,7 @@ export default class Helper {
                 if (prop === 'banner' || prop === 'screenshots' || prop === 'icon') {
                     images[prop] = tmpData[prop];
                 } else if(prop === 'tags') {
-                    let tags = [];
-                    let tagsFromStep = tmpData[prop];
-                    for (let tag in tagsFromStep) {
-                        console.log(tag);
-                        tags.push(tagsFromStep[tag].value);
-                    }
-                    application[prop] = tags;
+                    application[prop] = Helper.stringifyTags(tmpData[prop]);
                 } else {
                     application[prop] = tmpData[prop];
                 }
@@ -53,4 +47,15 @@ export default class Helper {
         }
         return {application, images};
     }
+
+    static stringifyTags(tags) {
+        let tmpTags = [];
+        for (let tag in tags) {
+            console.log(tag);
+            tmpTags.push(tags[tag].value);
+        }
+
+        return tmpTags;
+    }
+
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
index cc38f4a9280..1f0270e03e7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
@@ -16,30 +16,29 @@
  * under the License.
  */
 
+'use strict';
 export default class Constants {
 
     static scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
         ' perm:application:delete perm:platform:add perm:platform:remove perm:roles:view perm:devices:view';
 
-    static TOKEN_ENDPOINT = '/token';
-    static DYNAMIC_CLIENT_REGISTER_ENDPOINT = '/api-application-registration/register';
-
     static appManagerEndpoints = {
         GET_ALL_APPS: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
         CREATE_APP: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
-        UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
+        UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-artifacts/', //+appId
     };
 
     static platformManagerEndpoints = {
-        CREATE_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0/'
-    }
+        CREATE_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0',
+        GET_ENABLED_PLATFORMS: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0?status=ENABLED',
+        GET_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0/'
+    };
 
     static userConstants = {
+        LOGIN_URL:"https://localhost:9443/auth/application-mgt/v1.0/auth/login",
+        LOGOUT_URL: "https://localhost:9443/auth/application-mgt/v1.0/auth/logout",
+        REFRESH_TOKEN_URL: "",
         WSO2_USER: 'wso2_user',
         PARTIAL_TOKEN: 'WSO2_IOT_TOKEN'
     }
-
 }
-
-
-
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index c2c53d7e7d2..8f813300223 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -39,12 +39,14 @@ class ApplicationCreate extends Component {
     constructor() {
         super();
         this.scriptId = "application-create";
-        this.setStepData.bind(this);
-        this.removeStepData.bind(this);
-        this.handleSubmit.bind(this);
-        this.handleCancel.bind(this);
-        this.handleYes.bind(this);
-        this.handleNo.bind(this);
+        this.setStepData = this.setStepData.bind(this);
+        this.removeStepData = this.removeStepData.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleYes = this.handleYes.bind(this);
+        this.handleNo = this.handleNo.bind(this);
+        this.handlePrev = this.handlePrev.bind(this);
+        this.handleNext = this.handleNext.bind(this);
         this.state = {
             finished: false,
             stepIndex: 0,
@@ -80,8 +82,18 @@ class ApplicationCreate extends Component {
      * Handles form submit.
      * */
     handleSubmit() {
-        console.log(this.state.stepData);
-        Endpoint.createApplication(this.state.stepData);
+        let stepData = this.state.stepData;
+        let applicationCreationPromise = Endpoint.createApplication(stepData);
+        applicationCreationPromise.then(response => {
+                console.log(response);
+                let uploadArtifactsPromise = Endpoint.uploadImageArtifacts(response.data.uuid);
+                this.handleYes();
+            }
+        ).catch(
+            function (err) {
+                console.log(err);
+            }
+        );
 
     };
 
@@ -107,6 +119,8 @@ class ApplicationCreate extends Component {
 
     /**
      * Saves form data in each step in to the state.
+     * @param step: The step number of the step data.
+     * @param data: The form data of the step.
      * */
     setStepData(step, data) {
         console.log(step, data, this.state.stepData);
@@ -153,25 +167,31 @@ class ApplicationCreate extends Component {
     getStepContent(stepIndex) {
         switch (stepIndex) {
             case 0:
-                return <Step1
-                    handleNext={this.handleNext}
-                    setData={this.setStepData}
-                    removeData={this.removeStepData}
-                />;
+                return (
+                    <Step1
+                        handleNext={this.handleNext}
+                        setData={this.setStepData}
+                        removeData={this.removeStepData}
+                    />
+                );
             case 1:
-                return <Step2
-                    handleNext={this.handleNext}
-                    handlePrev={this.handlePrev}
-                    setData={this.setStepData}
-                    removeData={this.removeStepData}
-                />;
+                return (
+                    <Step2
+                        handleNext={this.handleNext}
+                        handlePrev={this.handlePrev}
+                        setData={this.setStepData}
+                        removeData={this.removeStepData}
+                    />
+                );
             case 2:
-                return <Step3
-                    handleFinish={this.handleNext}
-                    handlePrev={this.handlePrev}
-                    setData={this.setStepData}
-                    removeData={this.removeStepData}
-                />;
+                return (
+                    <Step3
+                        handleFinish={this.handleNext}
+                        handlePrev={this.handlePrev}
+                        setData={this.setStepData}
+                        removeData={this.removeStepData}
+                    />
+                );
             default:
                 return <div/>;
         }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 3d815bb74d7..5c712952f02 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -23,6 +23,7 @@ import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import Theme from '../../theme';
+import AuthHandler from "../../api/authHandler";
 
 /**
  * The App Create Component.
@@ -35,51 +36,21 @@ import Theme from '../../theme';
 class ApplicationListing extends Component {
     constructor() {
         super();
+        this.searchApplications = this.searchApplications.bind(this);
+        this.onRowClick = this.onRowClick.bind(this);
+        this.setData = this.setData.bind(this);
+        this.sortData = this.sortData.bind(this);
+        this.compare = this.compare.bind(this);
         this.state = {
-            data: [],
+            searchedApplications: [],
+            applications: [],
             asc: true
         };
         this.scriptId = "application-listing";
     }
 
-    data = [
-        {
-            id: Math.random(),
-            applicationName: "Cne",
-            platform: 'Android',
-            category: "Public",
-            status: "Created"
-        },
-        {
-            id: Math.random(),
-            applicationName: "Gone",
-            platform: 'IOS',
-            category: "Public",
-            status: "Created"
-        },
-        {
-            id: Math.random(),
-            applicationName: "Ane",
-            platform: 'Android',
-            category: "Public",
-            status: "Created"
-        },
-        {
-            id: Math.random(),
-            applicationName: "one",
-            platform: 'Android',
-            category: "Public",
-            status: "Created"
-        },
-        {
-            id: Math.random(),
-            applicationName: "one",
-            platform: 'Android',
-            category: "Public",
-            status: "Created"
-        },
-    ];
-
+    data = [];
+    //
     headers = [
         {
             data_id: "image",
@@ -92,7 +63,7 @@ class ApplicationListing extends Component {
             data_type: "string",
             sortable: true,
             label: "Application Name",
-            sort: this.sortData.bind(this)
+            sort: this.sortData
         },
         {
             data_id: "platform",
@@ -126,30 +97,99 @@ class ApplicationListing extends Component {
 
     componentWillUnmount() {
         Theme.removeThemingScripts(this.scriptId);
+        // this.setState({data: this.data});
     }
 
     componentDidMount() {
         let getApps = EndPoint.getApplications();
         getApps.then(response => {
-            console.log(response);
-        })
+            let apps = this.setData(response.data.applications);
+            console.log(apps);
+            this.setState({searchedApplications: apps});
+            // console.log(this.setState({data: response.data}), console.log(this.state));
+        }).catch(err => {
+            AuthHandler.unauthorizedErrorHandler(err);
+        });
+    }
+
+    setData(applications) {
+        // {
+        //     id: Math.random(),
+        //         applicationName: "one",
+        //     platform: 'Android',
+        //     category: "Public",
+        //     status: "Created"
+        // }
+
+        //
+        //     "uuid":"f59ca462-7fa0-4cef-8536-96c17905e587",
+        //         "name":"sdkfsdkf",
+        //         "shortDescription":"shdkfhsd[f sfs;df dsf","description":"khsdkhfkjdss hfdsff\nsdf\ndsf",
+        //         "tags":["dsfds","f","dsfs"],
+        //         "platform":{
+        //         "name":"jdslkjfljs",
+        //             "description":"ljlksdjlfjdsljf",
+        //             "identifier":"sdjflsjdfjlkj",
+        //             "fileBased":false,
+        //             "shared":false,
+        //             "enabled":false,
+        //             "defaultTenantMapping":false
+        //     },
+        //
+        //     "category":{
+        //         "id":1
+        //     },
+        //
+        //     "createdAt":"Tue, 12 Sep 2017 18:53:54 IST",
+        //         "modifiedAt":"Tue, 12 Sep 2017 18:53:54 IST",
+        //         "currentLifecycle":{
+        //         "lifecycleState":{
+        //             "id":1,
+        //                 "name":"CREATED",
+        //                 "identifier":"CREATED",
+        //                 "description":"Application creation initial state"
+        //         },
+        //
+        //         "lifecycleStateModifiedAt":"Tue, 12 Sep 2017 18:53:54 IST",
+        //             "getLifecycleStateModifiedBy":"admin"},
+        //     "screenShotCount":0,
+        //         "user":{
+        //         "userName":"admin",
+        //             "tenantId":-1234
+        //     }
+        // }
+
+        let apps = [];
+        for (let app in applications) {
+            let application = {};
+            application.id = applications[app].uuid;
+            application.applicationName = applications[app].name;
+            application.platform = applications[app].platform.name;
+            application.category = applications[app].category.id;
+            application.status = applications[app].currentLifecycle.lifecycleState.name;
+            apps.push(application);
+        }
+
+        this.setState({searchedApplications: apps});
     }
 
     /**
      * Handles the search action.
      * When typing in the search bar, this method will be invoked.
+     * @param event: The event triggered from typing in the search box.
+     * @param searchText: The text that typed in the search box.
      * */
-    searchApplications(event, word) {
+    searchApplications(event, searchText) {
         let searchedData;
-        if (word) {
-            searchedData = this.data.filter((dataItem) => {
-                return dataItem.applicationName.includes(word);
+        if (searchText) {
+            searchedData = this.state.applications.filter((dataItem) => {
+                return dataItem.applicationName.includes(searchText);
             });
         } else {
-            searchedData = this.data;
+            searchedData = this.state.applications;
         }
 
-        this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
+        this.setState({searchedApplications: searchedData}, console.log("Searched data ", this.state.searchedApplications));
     }
 
     /**
@@ -157,9 +197,10 @@ class ApplicationListing extends Component {
      * asc: true : sort in ascending order.
      * */
     sortData() {
+        console.log(this.state);
         let isAsc = this.state.asc;
-        let datas = isAsc ? this.data.sort(this.compare) : this.data.reverse();
-        this.setState({data: datas, asc: !isAsc});
+        let sortedData = isAsc ? this.state.searchedApplications.sort(this.compare) : this.data.reverse();
+        this.setState({searchedApplications: sortedData, asc: !isAsc});
     }
 
     compare(a, b) {
@@ -171,20 +212,27 @@ class ApplicationListing extends Component {
     }
 
     onRowClick(id) {
-        this.props.history.push("apps/" + id);
+        EndPoint.getApplication(id).then(response => {
+            console.log(response);
+        }).catch(err => {
+            console.log(err)
+        });
+        // this.props.history.push("apps/" + id);
     }
 
     render() {
         return (
             <div className="middle applicationListingMiddle">
                 <Card className="applicationListingCard">
-                    <TextField hintText="Search" className="applicationListingSearch"
-                               onChange={this.searchApplications.bind(this)}/>
+                    <TextField
+                        hintText="Search"
+                        className="applicationListingSearch"
+                        onChange={this.searchApplications}/>
                     <CardTitle title="Applications" className="applicationListTitle"/>
                     <DataTable
                         headers={this.headers}
-                        data={this.state.data}
-                        handleRowClick={this.onRowClick.bind(this)}
+                        data={this.state.searchedApplications}
+                        handleRowClick={this.onRowClick}
                         noDataMessage={{type: 'button', text: 'Create Application'}}
                     />
                 </Card>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index ee1c2aaccf3..3c256e750ee 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -22,6 +22,8 @@ import MenuItem from 'material-ui/MenuItem';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Theme from '../../../theme';
+import Endpoint from "../../../api/endpoints";
+import AuthHandler from "../../../api/authHandler";
 
 /**
  * The first step of the application creation wizard.
@@ -39,13 +41,15 @@ import Theme from '../../../theme';
 class Step1 extends Component {
     constructor() {
         super();
-        this.platforms = [{identifier: 1}, {identifier: 2}, {identifier: 3}];
-        this.stores = [{identifier: 5}, {identifier: 2}, {identifier: 3}];
+        this.setPlatforms = this.setPlatforms.bind(this);
+        this.platforms = [];
         this.state = {
             finished: false,
             stepIndex: 0,
             store: 1,
-            platform: 0,
+            platformSelectedIndex: 0,
+            platform: "",
+            platforms: [],
             stepData: [],
             title: "",
             titleError: ""
@@ -63,22 +67,40 @@ class Step1 extends Component {
     componentWillUnmount() {
         Theme.removeThemingScripts(this.scriptId);
     }
+    componentDidMount() {
+        //Get the list of available platforms and set to the state.
+        Endpoint.getPlatforms().then(response => {
+            console.log(response);
+            this.setPlatforms(response.data);
+        }).catch(err => {
+            AuthHandler.unauthorizedErrorHandler(err);
+        })
+    }
 
     /**
-     * Invokes the handleNext function in Create component.
+     * Extract the platforms from the response data and populate the state.
+     * @param platforms: The array returned as the response.
      * */
-    handleNext() {
-        this.props.handleNext();
-    };
+    setPlatforms(platforms) {
+        let tmpPlatforms = [];
+        for (let index in platforms) {
+            let platform = {};
+            platform = platforms[index];
+            tmpPlatforms.push(platform);
+        }
+        this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].identifier})
+    }
 
     /**
      * Persist the current form data to the state.
      * */
     setStepData() {
+        console.log(this.state.platforms);
         let step = {
             store: this.state.store,
-            platform: this.platforms[this.state.platform]
+            platform: this.state.platforms[this.state.platformSelectedIndex]
         };
+        console.log(step);
         this.props.setData("step1", {step: step});
     }
 
@@ -96,8 +118,8 @@ class Step1 extends Component {
      * Triggers when changing the Platform selection.
      * */
     onChangePlatform(event, index, value) {
-        console.log(value);
-        this.setState({platform: value});
+        console.log(this.state.platforms[index]);
+        this.setState({platform: this.state.platforms[index].identifier, platformSelectedIndex: index});
     };
 
     /**
@@ -129,9 +151,17 @@ class Step1 extends Component {
                                 floatingLabelFixed={true}
                                 onChange={this.onChangePlatform.bind(this)}
                             >
-                                <MenuItem value={0} primaryText="Android"/>
-                                <MenuItem value={1} primaryText="iOS"/>
-                                <MenuItem value={2} primaryText="Web"/>
+                                {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
+                                    return (
+                                        <MenuItem
+                                            key={Math.random()}
+                                            value={platform.identifier}
+                                            primaryText={platform.name}
+                                        />
+                                    )
+                                }) : <div/>}
+
+
                             </SelectField>
                         </div>
                         <br/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index d0c053578e7..2f77d3ab1d8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -51,6 +51,10 @@ import Theme from '../../../theme';
 class Step3 extends Component {
     constructor() {
         super();
+        this.handleToggle = this.handleToggle.bind(this);
+        this.handlePrev = this.handlePrev.bind(this);
+        this.handleToggle = this.handleToggle.bind(this);
+        this.handleFinish = this.handleFinish.bind(this);
         this.state = {
             showForm: false,
             releaseChannel: 1,
@@ -100,7 +104,7 @@ class Step3 extends Component {
                     <Toggle
                         label="Release the Application"
                         labelPosition="right"
-                        onToggle={this.handleToggle.bind(this)}
+                        onToggle={this.handleToggle}
                         defaultToggled={this.state.showForm}
                     />
                     {/*If toggle is true, the release form will be shown.*/}
@@ -127,13 +131,13 @@ class Step3 extends Component {
                         <FlatButton
                             label="< Back"
                             disabled={false}
-                            onClick={this.handlePrev.bind(this)}
-                            className="applicationCreateFinish"/>
-
+                            onClick={this.handlePrev}
+                            className="applicationCreateFinish"
+                        />
                         <RaisedButton
                             label="Finish"
                             primary={true}
-                            onClick={this.handleFinish.bind(this)}
+                            onClick={this.handleFinish}
                         />
 
                     </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index a1f2f013a75..e338fd280d2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -21,7 +21,11 @@ import Badge from 'material-ui/Badge';
 import React, {Component} from 'react';
 import AppBar from 'material-ui/AppBar';
 import Drawer from 'material-ui/Drawer';
+import IconMenu from 'material-ui/IconMenu';
+import MenuItem from 'material-ui/MenuItem';
 import {withRouter} from 'react-router-dom';
+import AuthHandler from "../../api/authHandler";
+import FlatButton from 'material-ui/FlatButton';
 import IconButton from 'material-ui/IconButton';
 import {List, ListItem} from 'material-ui/List';
 import Apps from 'material-ui/svg-icons/navigation/apps';
@@ -48,6 +52,7 @@ class BaseLayout extends Component {
             user: 'Admin'
         };
         this.scriptId = "basic-layout";
+        this.logout = this.logout.bind(this);
     }
 
     componentWillMount() {
@@ -93,6 +98,10 @@ class BaseLayout extends Component {
         this.props.history.push(to);
     }
 
+    logout(event, index, value) {
+        AuthHandler.logout();
+    }
+
     render() {
         return (
 
@@ -110,11 +119,22 @@ class BaseLayout extends Component {
                                     <NotificationsIcon/>
                                 </IconButton>
                             </Badge>
-                            <IconButton onClick={() => {
-                                console.log("Clicked")
-                            }}>
-                                <ActionAccountCircle/>
-                            </IconButton>
+                            <IconMenu
+                                iconButtonElement={<FlatButton
+                                    icon={<ActionAccountCircle/>}
+                                    label="sdfdsf"
+                                />}
+                                anchorOrigin={{horizontal: 'left', vertical: 'top'}}
+                                targetOrigin={{horizontal: 'left', vertical: 'top'}}
+                                onChange={this.logout}
+                            >
+                                <MenuItem value={0} primaryText="Logout" />
+                            </IconMenu>
+                            {/*<FlatButton*/}
+                                {/*icon={<ActionAccountCircle/>}*/}
+                                {/*onClick={() => {console.log("Clicked")}}*/}
+                                {/*label={this.props.user.getUserName()}*/}
+                            {/*/>*/}
                         </div>
                     }
                 />
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index 59166ef2cfd..70de1bcf075 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -232,6 +232,7 @@ class PlatformCreate extends Component {
         platform.icon = this.state.icon;
         platform.enabled = this.state.enabled;
         platform.allTenants = this.state.allTenants;
+        platform.defaultTenantMapping = true;
 
         Endpoint.createPlatform(platform);
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index f0624ded4be..7c3849cc5d9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -53,6 +53,7 @@ class DataTable extends Component {
 
     constructor() {
         super();
+        this.handleRowClick = this.handleRowClick.bind(this);
         this.state = {
             data: [],
             headers: [],
@@ -120,7 +121,7 @@ class DataTable extends Component {
                             <DataTableRow
                                 key={dataItem.id}
                                 dataItem={dataItem}
-                                handleClick={this.handleRowClick.bind(this)}
+                                handleClick={this.handleRowClick}
                             />
                         )
                     })}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 45df39b72a7..562cdb341f1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -30,6 +30,7 @@ class DataTableHeader extends Component {
 
     constructor() {
         super();
+        this.tableHeaderClick = this.tableHeaderClick.bind(this);
         this.scriptId = "data-table";
     }
 
@@ -42,6 +43,7 @@ class DataTableHeader extends Component {
 
     componentWillUnmount() {
         Theme.removeThemingScripts(this.scriptId);
+
     }
 
     /**
@@ -63,9 +65,9 @@ class DataTableHeader extends Component {
             headerCell =
                 <FlatButton
                     label={this.props.header.label}
-                    onClick={this.tableHeaderClick.bind(this)}
+                    onClick={this.tableHeaderClick}
                     className="sortableHeaderCell"
-                />;
+                />
         } else {
             headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
         }

From 4bbfa335349ea9ae7d935e7b7f891278de2521d3 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Thu, 14 Sep 2017 21:50:52 +0530
Subject: [PATCH 5/8] Api integration stage 3: Defined apis for application and
 platform.

---
 .../{endpoints.js => applicationMgtApi.js}    | 108 ++++++------------
 .../publisher/src/api/authHandler.js          |   2 -
 .../publisher/src/api/platformMgtApi.js       |  68 +++++++++++
 .../publisher/src/common/constants.js         |   5 +-
 .../Application/ApplicationCreate.jsx         |   8 +-
 .../Application/ApplicationListing.jsx        |  59 +---------
 .../Application/CreateSteps/Step1.jsx         |   6 +-
 .../components/Platform/PlatformCreate.jsx    |   8 +-
 8 files changed, 124 insertions(+), 140 deletions(-)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/{endpoints.js => applicationMgtApi.js} (58%)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js
similarity index 58%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js
index 1491d2363b1..11d7d58e866 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js
@@ -22,13 +22,11 @@ import AuthHandler from './authHandler';
 import Constants from '../common/constants';
 import Helper from './helpers/appMgtApiHelpers';
 
-
-
-export default class Endpoint {
-
-    /* =================================================================
-     *               Application related apis
-     * */
+/**
+ * Api definitions related to application management.
+ * TODO: Work to be done on Application release.
+ * */
+export default class ApplicationMgtApi {
 
     /**
      * Api for create an application.
@@ -38,19 +36,26 @@ export default class Endpoint {
      * From applicationData, the proper application object will be created and send it to the api.
      * */
     static createApplication(applicationData) {
-        let app = Helper.buildApplication(applicationData).application;
+        let {application, images} = Helper.buildApplication(applicationData);
         const headers = AuthHandler.createAuthenticationHeaders("application/json");
-        return Axios.post(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
+        console.log(application);
+        console.log(images);
+        Axios.post(Constants.appManagerEndpoints.CREATE_APP, application, {headers: headers});
     }
 
     /**
      * Upload the image artifacts (banner, icon, screenshots) related to the application.
      * @param appId: The application uuid of the application which the images should be uploaded to.
+     * @param images: The images object. This contains icon, banner and screenshots.
      * */
-    static uploadImageArtifacts(appId) {
-        let user = AuthHandler.getUser();
+    static uploadImageArtifacts(appId, images) {
+        let formData = new FormData();
+        formData.append('icon', images.icon);
+        formData.append('banner', images.banner);
+        formData.append('screenshot', images.screenshots);
+        console.log("Image", formData);
         const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
-        return Axios.post(Constants.appManagerEndpoints.UPLOAD_IMAGES + appId, appId, {headers: headers});
+        return Axios.post(Constants.appManagerEndpoints.UPLOAD_IMAGE_ARTIFACTS + appId, formData, {headers: headers});
     }
 
     /**
@@ -63,8 +68,11 @@ export default class Endpoint {
     /**
      * Promote the current life cycle state of the application.
      * @param appId: The uuid of the application which the state should be updated.
+     * @param nextState: The next lifecycle state that the application can be updated to.
+     *
+     * URL Pattern : /application/1.0/
      * */
-    static updateLifeCycleState(appId) {
+    static updateLifeCycleState(appId, nextState) {
 
     }
 
@@ -86,9 +94,19 @@ export default class Endpoint {
         return Axios.put(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
     }
 
-    static editApplicationArtofacts(appId) {
+    static getApplicationArtifacts(appId, artifactName) {
+        const headers = AuthHandler.createAuthenticationHeaders("image/png");
+        return Axios.get(Constants.appManagerEndpoints.GET_IMAGE_ARTIFACTS + appId + "?name=" + artifactName,
+            {headers: headers});
+    }
+
+    static editApplicationArtifacts(appId, images) {
+        let formData = new FormData();
+        formData.append('icon', images.icon);
+        formData.append('banner', images.banner);
+        formData.append('screenshot', images.screenshots);
         const headers = AuthHandler.createAuthenticationHeaders("application/json");
-        return Axios.put(Constants.appManagerEndpoints.CREATE_APP, appId, {headers: headers});
+        return Axios.put(Constants.appManagerEndpoints.UPLOAD_IMAGE_ARTIFACTS + appId, formData, {headers: headers});
     }
 
     /**
@@ -96,8 +114,6 @@ export default class Endpoint {
      * @return Object: The response object from the axios post.
      * */
     static getApplications() {
-        let user = AuthHandler.getUser();
-        console.log("Get all applications", user.getAuthToken());
         const headers = AuthHandler.createAuthenticationHeaders("application/json");
         return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS, {headers: headers});
     }
@@ -107,8 +123,6 @@ export default class Endpoint {
      * @param appId: The application Id.
      * */
     static getApplication(appId) {
-        let user = AuthHandler.getUser();
-        console.log("Get Application",appId, user.getAuthToken());
         const headers = AuthHandler.createAuthenticationHeaders("application/json");
         return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS + appId, {headers: headers});
     }
@@ -118,59 +132,7 @@ export default class Endpoint {
      * @param appId: The id of the application which is to be deleted.
      * */
     static deleteApplication(appId) {
-
-    }
-
-    /*
-     *              End of Application management apis.
-     * =================================================================
-     * =================================================================
-     *                   Platform related apis
-     * */
-
-    /**
-     * Create a new Platform
-     * @param platformData: The platform data object.
-     * */
-    static createPlatform(platformData) {
         const headers = AuthHandler.createAuthenticationHeaders("application/json");
-        Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then(
-            function (response) {
-                console.log(response);
-            }
-        ).catch(function (err) {
-            console.log(err);
-        });
+        return Axios.delete(Constants.appManagerEndpoints.GET_ALL_APPS + appId, {headers: headers});
     }
-
-    /**
-     * Get available platforms
-     * */
-    static getPlatforms() {
-        const headers = AuthHandler.createAuthenticationHeaders("application/json");
-        return Axios.get(Constants.platformManagerEndpoints.GET_ENABLED_PLATFORMS, {headers: headers});
-    }
-
-    /**
-     * Get the user specified platform
-     * @param platformId: The identifier of the platform
-     * */
-    static getPlatform(platformId) {
-        const headers = AuthHandler.createAuthenticationHeaders("application/json");
-        return Axios.get(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
-    }
-
-    /**
-     * Delete specified platform
-     * @param platformId: The id of the platform which is to be deleted.
-     * */
-    static deletePlatform(platformId) {
-        const headers = AuthHandler.createAuthenticationHeaders("application/json");
-        return Axios.delete(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
-    }
-
-    /*
-    *              End of Platform management apis.
-    * =================================================================
-    * */
-}
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
index ffd94269185..f5941423d46 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
@@ -57,8 +57,6 @@ class AuthHandler {
                 AuthHandler.setUser(user);
             }
         );
-
-
         return login_promise;
     };
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js
new file mode 100644
index 00000000000..709343b3d34
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+
+import Axios from 'axios';
+import AuthHandler from './authHandler';
+import Constants from '../common/constants';
+
+/**
+ * Api definitions for Platform management.
+ * */
+export default class PlatformMgtApi{
+    /**
+     * Create a new Platform
+     * @param platformData: The platform data object.
+     * */
+    static createPlatform(platformData) {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then(
+            function (response) {
+                console.log(response);
+            }
+        ).catch(function (err) {
+            console.log(err);
+        });
+    }
+
+    /**
+     * Get available platforms
+     * */
+    static getPlatforms() {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.get(Constants.platformManagerEndpoints.GET_ENABLED_PLATFORMS, {headers: headers});
+    }
+
+    /**
+     * Get the user specified platform
+     * @param platformId: The identifier of the platform
+     * */
+    static getPlatform(platformId) {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.get(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
+    }
+
+    /**
+     * Delete specified platform
+     * @param platformId: The id of the platform which is to be deleted.
+     * */
+    static deletePlatform(platformId) {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.delete(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
+    }
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
index 1f0270e03e7..336b122e7b0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
@@ -17,6 +17,8 @@
  */
 
 'use strict';
+
+//TODO: Replace the server address with response from auth endpoint and remove hardcoded ids etc.
 export default class Constants {
 
     static scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
@@ -25,7 +27,8 @@ export default class Constants {
     static appManagerEndpoints = {
         GET_ALL_APPS: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
         CREATE_APP: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
-        UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-artifacts/', //+appId
+        UPLOAD_IMAGE_ARTIFACTS: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
+        GET_IMAGE_ARTIFACTS: "https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/image-artifacts/"
     };
 
     static platformManagerEndpoints = {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 8f813300223..f466db36085 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -18,7 +18,7 @@
 
 import React, {Component} from 'react';
 import Dialog from 'material-ui/Dialog';
-import Endpoint from '../../api/endpoints';
+import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {withRouter} from 'react-router-dom';
 import FlatButton from 'material-ui/FlatButton';
 import {Step1, Step2, Step3} from './CreateSteps';
@@ -83,10 +83,8 @@ class ApplicationCreate extends Component {
      * */
     handleSubmit() {
         let stepData = this.state.stepData;
-        let applicationCreationPromise = Endpoint.createApplication(stepData);
-        applicationCreationPromise.then(response => {
-                console.log(response);
-                let uploadArtifactsPromise = Endpoint.uploadImageArtifacts(response.data.uuid);
+        let applicationCreationPromise = ApplicationMgtApi.createApplication(stepData);
+        applicationCreationPromise.then( response => {
                 this.handleYes();
             }
         ).catch(
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 5c712952f02..e34c6d31f39 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -17,7 +17,7 @@
  */
 
 import React, {Component} from 'react';
-import EndPoint from '../../api/endpoints';
+import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
@@ -49,8 +49,6 @@ class ApplicationListing extends Component {
         this.scriptId = "application-listing";
     }
 
-    data = [];
-    //
     headers = [
         {
             data_id: "image",
@@ -86,8 +84,6 @@ class ApplicationListing extends Component {
     ];
 
     componentWillMount() {
-        //Fetch all the applications from backend and create application objects.
-        this.setState({data: this.data});
 
         /**
          *Loading the theme files based on the the user-preference.
@@ -101,7 +97,7 @@ class ApplicationListing extends Component {
     }
 
     componentDidMount() {
-        let getApps = EndPoint.getApplications();
+        let getApps = ApplicationMgtApi.getApplications();
         getApps.then(response => {
             let apps = this.setData(response.data.applications);
             console.log(apps);
@@ -112,53 +108,10 @@ class ApplicationListing extends Component {
         });
     }
 
+    /**
+     * Extract application from application list and update the state.
+     * */
     setData(applications) {
-        // {
-        //     id: Math.random(),
-        //         applicationName: "one",
-        //     platform: 'Android',
-        //     category: "Public",
-        //     status: "Created"
-        // }
-
-        //
-        //     "uuid":"f59ca462-7fa0-4cef-8536-96c17905e587",
-        //         "name":"sdkfsdkf",
-        //         "shortDescription":"shdkfhsd[f sfs;df dsf","description":"khsdkhfkjdss hfdsff\nsdf\ndsf",
-        //         "tags":["dsfds","f","dsfs"],
-        //         "platform":{
-        //         "name":"jdslkjfljs",
-        //             "description":"ljlksdjlfjdsljf",
-        //             "identifier":"sdjflsjdfjlkj",
-        //             "fileBased":false,
-        //             "shared":false,
-        //             "enabled":false,
-        //             "defaultTenantMapping":false
-        //     },
-        //
-        //     "category":{
-        //         "id":1
-        //     },
-        //
-        //     "createdAt":"Tue, 12 Sep 2017 18:53:54 IST",
-        //         "modifiedAt":"Tue, 12 Sep 2017 18:53:54 IST",
-        //         "currentLifecycle":{
-        //         "lifecycleState":{
-        //             "id":1,
-        //                 "name":"CREATED",
-        //                 "identifier":"CREATED",
-        //                 "description":"Application creation initial state"
-        //         },
-        //
-        //         "lifecycleStateModifiedAt":"Tue, 12 Sep 2017 18:53:54 IST",
-        //             "getLifecycleStateModifiedBy":"admin"},
-        //     "screenShotCount":0,
-        //         "user":{
-        //         "userName":"admin",
-        //             "tenantId":-1234
-        //     }
-        // }
-
         let apps = [];
         for (let app in applications) {
             let application = {};
@@ -212,7 +165,7 @@ class ApplicationListing extends Component {
     }
 
     onRowClick(id) {
-        EndPoint.getApplication(id).then(response => {
+        ApplicationMgtApi.getApplication(id).then(response => {
             console.log(response);
         }).catch(err => {
             console.log(err)
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 3c256e750ee..7f35eb5bf1d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -22,7 +22,7 @@ import MenuItem from 'material-ui/MenuItem';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Theme from '../../../theme';
-import Endpoint from "../../../api/endpoints";
+import PlatformMgtApi from "../../../api/platformMgtApi";
 import AuthHandler from "../../../api/authHandler";
 
 /**
@@ -69,7 +69,7 @@ class Step1 extends Component {
     }
     componentDidMount() {
         //Get the list of available platforms and set to the state.
-        Endpoint.getPlatforms().then(response => {
+        PlatformMgtApi.getPlatforms().then(response => {
             console.log(response);
             this.setPlatforms(response.data);
         }).catch(err => {
@@ -95,7 +95,7 @@ class Step1 extends Component {
      * Persist the current form data to the state.
      * */
     setStepData() {
-        console.log(this.state.platforms);
+        console.log("Platforms",this.state.platforms);
         let step = {
             store: this.state.store,
             platform: this.state.platforms[this.state.platformSelectedIndex]
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index 70de1bcf075..ae13f541c72 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -27,13 +27,13 @@ import FlatButton from 'material-ui/FlatButton';
 import IconButton from 'material-ui/IconButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import PlatformMgtApi from '../../api/platformMgtApi';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
 import Theme from '../../theme';
-import Endpoint from '../../api/endpoints';
 
 /**
  * Platform Create component.
@@ -221,6 +221,9 @@ class PlatformCreate extends Component {
         }
     };
 
+    /**
+     * Create platform object and call the create platform api.
+     * */
     onCreatePlatform() {
         //Call the platform create api.
         let platform = {};
@@ -234,8 +237,7 @@ class PlatformCreate extends Component {
         platform.allTenants = this.state.allTenants;
         platform.defaultTenantMapping = true;
 
-        Endpoint.createPlatform(platform);
-
+        PlatformMgtApi.createPlatform(platform);
 
     }
 

From 133dc55a237c01e279a5575f6c5388f0a22f51d2 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 15 Sep 2017 12:17:41 +0530
Subject: [PATCH 6/8] Code reformatting and styling.

---
 .../src/main/resources/publisher/src/App.jsx    | 17 ++++++++---------
 .../Application/ApplicationCreate.jsx           |  4 ++--
 .../Application/ApplicationListing.jsx          |  6 +++---
 .../Application/CreateSteps/Step1.jsx           |  4 ++--
 .../Application/CreateSteps/Step2.jsx           |  2 +-
 .../src/components/Base/BaseLayout.jsx          |  2 +-
 .../src/components/Platform/PlatformCreate.jsx  |  2 +-
 .../src/components/Platform/PlatformListing.jsx |  2 +-
 .../src/components/UIComponents/DataTable.jsx   |  2 +-
 .../components/UIComponents/DataTableHeader.jsx |  2 +-
 .../components/UIComponents/DataTableRow.jsx    |  2 +-
 .../src/components/User/Login/Login.jsx         |  3 ---
 .../src/main/resources/publisher/src/theme.js   |  8 ++++----
 13 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 3198738e6da..d045d345f99 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -17,6 +17,7 @@
  */
 
 import './App.scss';
+import Theme from './theme';
 import React, {Component} from 'react';
 import AuthHandler from './api/authHandler';
 import createHistory from 'history/createBrowserHistory';
@@ -24,20 +25,18 @@ import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import {
-    ApplicationCreate,
-    ApplicationListing,
-    BaseLayout,
-    Login,
-    NotFound,
-    PlatformCreate,
-    PlatformListing
+ApplicationCreate,
+ApplicationListing,
+BaseLayout,
+Login,
+NotFound,
+PlatformCreate,
+PlatformListing
 } from './components';
-import Theme from './theme';
 
 
 const history = createHistory({basename: '/publisher'});
 
-
 /**
  * This component defines the layout and the routes for the app.
  * All the content will be loaded inside the Base component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index f466db36085..89f84278d60 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -16,16 +16,16 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import React, {Component} from 'react';
 import Dialog from 'material-ui/Dialog';
-import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {withRouter} from 'react-router-dom';
 import FlatButton from 'material-ui/FlatButton';
 import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
+import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-import Theme from '../../theme';
 
 /**
  * The App Create Component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index e34c6d31f39..15b3fd06801 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -16,14 +16,14 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import React, {Component} from 'react';
-import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
+import AuthHandler from "../../api/authHandler";
 import DataTable from '../UIComponents/DataTable';
+import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import Theme from '../../theme';
-import AuthHandler from "../../api/authHandler";
 
 /**
  * The App Create Component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 7f35eb5bf1d..87ac4875dc4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -16,14 +16,14 @@
  * under the License.
  */
 
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import SelectField from 'material-ui/SelectField';
+import AuthHandler from "../../../api/authHandler";
 import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../theme';
 import PlatformMgtApi from "../../../api/platformMgtApi";
-import AuthHandler from "../../../api/authHandler";
 
 /**
  * The first step of the application creation wizard.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index ebf3daf4a5c..974fd55f455 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -17,6 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
+import Theme from '../../../theme';
 import Chip from 'material-ui/Chip';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
@@ -28,7 +29,6 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
-import Theme from '../../../theme';
 
 /**
  * The Second step of application create wizard.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index e338fd280d2..a18813994a4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import PropTypes from 'prop-types';
 import Badge from 'material-ui/Badge';
 import React, {Component} from 'react';
@@ -34,7 +35,6 @@ import Feedback from 'material-ui/svg-icons/action/feedback';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import Theme from '../../theme';
 
 
 /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index ae13f541c72..6d3706190af 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import PropTypes from 'prop-types';
 import Chip from 'material-ui/Chip';
 import Dropzone from 'react-dropzone';
@@ -33,7 +34,6 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
-import Theme from '../../theme';
 
 /**
  * Platform Create component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index b0ac709c514..97fc560f2a4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -16,12 +16,12 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import Theme from '../../theme';
 
 /**
  * The App Create Component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index 7c3849cc5d9..2b02a91af74 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -16,13 +16,13 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
-import Theme from '../../theme';
 
 /**
  * The Custom Table Component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 562cdb341f1..5d078ba59a8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -16,11 +16,11 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
-import Theme from '../../theme';
 
 /**
  * Data Table header component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 52550234f79..7c9f8ea32f3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -16,10 +16,10 @@
  * under the License.
  */
 
+import Theme from '../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
-import Theme from '../../theme';
 
 /**
  * Data table row component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
index 89f326b0a33..bdfb0c517ca 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
@@ -26,9 +26,6 @@ import AuthHandler from '../../../api/authHandler';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 
-//todo: remove the {TextValidator, ValidatorForm} and implement it manually.
-
-
 /**
  * The Login Component.
  *
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
index 9243f7713e1..45127271fd2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -35,10 +35,10 @@ class Theme {
         //TODO Need to get the app context properly when the server is ready
         this.baseURL = window.location.origin;
         this.appContext = window.location.pathname.split("/")[1];
-        this.loadThemeConfigs.bind(this);
-        this.loadThemeFiles.bind(this);
-        this.insertThemingScripts.bind(this);
-        this.removeThemingScripts.bind(this);
+        this.loadThemeConfigs = this.loadThemeConfigs.bind(this);
+        this.loadThemeFiles = this.loadThemeFiles.bind(this);
+        this.insertThemingScripts =  this.insertThemingScripts.bind(this);
+        this.removeThemingScripts = this.removeThemingScripts.bind(this);
     }
 
     /**

From 9619371cab6e561e55c3035898c97e1bf7855e2d Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 15 Sep 2017 12:54:17 +0530
Subject: [PATCH 7/8] Removed inline styling and fixed multiple form submit.

---
 .../public/themes/default/platform-create.css |  5 ++
 .../Application/ApplicationCreate.jsx         |  2 -
 .../Application/CreateSteps/Step2.jsx         |  2 +-
 .../components/Platform/PlatformCreate.jsx    | 46 ++++++++++++-------
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
index 483cdedbffa..36993707e2f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
@@ -66,3 +66,8 @@
 .createplatformdropzonep {
     margin: 70px 40px 70px 70px
 }
+
+.createPlatformTagWrapper {
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 89f84278d60..49cd06abf6e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -92,7 +92,6 @@ class ApplicationCreate extends Component {
                 console.log(err);
             }
         );
-
     };
 
     /**
@@ -197,7 +196,6 @@ class ApplicationCreate extends Component {
 
     render() {
         const {finished, stepIndex} = this.state;
-        const contentStyle = {margin: '0 16px'};
 
         /**
          * Defines the dialog box actions. [Yes][No]
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 974fd55f455..fbfc9b8f574 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -380,7 +380,7 @@ class Step2 extends Component {
                             onKeyPress={this.addTags.bind(this)}
                         />
                         <br/>
-                        <div style={this.styles.wrapper}>
+                        <div className="applicationCreateWrapper">
                             {this.state.tags.map(this.renderChip, this)}
                         </div>
                         <br/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index 6d3706190af..e1fd2f8f3a9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -49,6 +49,17 @@ class PlatformCreate extends Component {
 
     constructor() {
         super();
+        this.onCreatePlatform = this.onCreatePlatform.bind(this);
+        this.handleToggle = this.handleToggle.bind(this);
+        this.addProperty = this.addProperty.bind(this);
+        this.addTags = this.addTags.bind(this);
+        this.clearForm = this.clearForm.bind(this);
+        this.onPropertySelect = this.onPropertySelect.bind(this);
+        this.handleTagChange = this.handleTagChange.bind(this);
+        this.removeIcon = this.removeIcon.bind(this);
+        this.onTextChange = this.onTextChange.bind(this);
+        this.renderChip = this.renderChip.bind(this);
+        this.removeProperty = this.removeProperty.bind(this);
         this.state = {
             tags: [],
             defValue: "",
@@ -224,8 +235,9 @@ class PlatformCreate extends Component {
     /**
      * Create platform object and call the create platform api.
      * */
-    onCreatePlatform() {
+    onCreatePlatform(event) {
         //Call the platform create api.
+        event.preventDefault();
         let platform = {};
         platform.identifier = this.state.identifier;
         platform.name = this.state.name;
@@ -245,13 +257,15 @@ class PlatformCreate extends Component {
      * Remove the uploaded icon.
      * */
     removeIcon(event) {
+        event.preventDefault();
         this.setState({icon: []});
     }
 
     /**
      * Clears the user entered values in the form.
      * */
-    clearForm() {
+    clearForm(event) {
+        event.preventDefault();
         this.setState({
             enabled: true,
             allTenants: false,
@@ -292,7 +306,7 @@ class PlatformCreate extends Component {
                                     floatingLabelText="Identifier*"
                                     floatingLabelFixed={true}
                                     value={identifier}
-                                    onChange={this.onTextChange.bind(this)}
+                                    onChange={this.onTextChange}
                                 />
                                 <br/>
                                 <TextField
@@ -301,7 +315,7 @@ class PlatformCreate extends Component {
                                     floatingLabelText="Name*"
                                     floatingLabelFixed={true}
                                     value={name}
-                                    onChange={this.onTextChange.bind(this)}
+                                    onChange={this.onTextChange}
                                 />
                                 <br/>
                                 <TextField
@@ -312,7 +326,7 @@ class PlatformCreate extends Component {
                                     multiLine={true}
                                     rows={2}
                                     value={description}
-                                    onChange={this.onTextChange.bind(this)}
+                                    onChange={this.onTextChange}
                                 />
                                 <br/>
                                 <br/>
@@ -320,7 +334,7 @@ class PlatformCreate extends Component {
                                     id="tenant"
                                     label="Shared with all Tenants"
                                     labelPosition="right"
-                                    onToggle={this.handleToggle.bind(this)}
+                                    onToggle={this.handleToggle}
                                     toggled={allTenants}
                                 />
                                 <br/>
@@ -328,7 +342,7 @@ class PlatformCreate extends Component {
                                     id="enabled"
                                     label="Enabled"
                                     labelPosition="right"
-                                    onToggle={this.handleToggle.bind(this)}
+                                    onToggle={this.handleToggle}
                                     toggled={enabled}
                                 />
                                 <br/>
@@ -338,11 +352,11 @@ class PlatformCreate extends Component {
                                     floatingLabelText="Tags*"
                                     floatingLabelFixed={true}
                                     value={defValue}
-                                    onChange={this.handleTagChange.bind(this)}
-                                    onKeyPress={this.addTags.bind(this)}
+                                    onChange={this.handleTagChange}
+                                    onKeyPress={this.addTags}
                                 />
                                 <br/>
-                                <div style={this.styles.wrapper}>
+                                <div className="createPlatformTagWrapper">
                                     {tags.map(this.renderChip, this)}
                                 </div>
                                 <br/>
@@ -364,21 +378,21 @@ class PlatformCreate extends Component {
                                             floatingLabelText="Platform Property*"
                                             floatingLabelFixed={true}
                                             value={this.state.property}
-                                            onChange={this.onTextChange.bind(this)}
+                                            onChange={this.onTextChange}
                                         /> <em/>
                                         <SelectField
                                             className="createplatformpropertyselect"
                                             floatingLabelText="Property Type"
                                             value={selectedProperty}
                                             floatingLabelFixed={true}
-                                            onChange={this.onPropertySelect.bind(this)}>
+                                            onChange={this.onPropertySelect}>
                                             {propertyTypes.map((type) => {
                                                 return <MenuItem key={type.key}
                                                                  value={type.key}
                                                                  primaryText={type.value}/>
                                             })}
                                         </SelectField>
-                                        <IconButton onClick={this.addProperty.bind(this)}>
+                                        <IconButton onClick={this.addProperty}>
                                             <AddCircleOutline/>
                                         </IconButton>
                                         <br/>
@@ -392,7 +406,7 @@ class PlatformCreate extends Component {
                                                 key={Math.floor(Math.random() * 1000)}
                                                 title={tile.name}
                                                 actionIcon={
-                                                    <IconButton onClick={this.removeIcon.bind(this)}>
+                                                    <IconButton onClick={this.removeIcon}>
                                                         <Clear/>
                                                     </IconButton>}>
                                                 <img src={tile.preview}/>
@@ -413,8 +427,8 @@ class PlatformCreate extends Component {
                                 <br/>
                                 <RaisedButton
                                     primary={true} label="Create"
-                                    onClick={this.onCreatePlatform.bind(this)}/>
-                                <FlatButton label="Cancel" onClick={this.clearForm.bind(this)}/>
+                                    onClick={this.onCreatePlatform}/>
+                                <FlatButton label="Cancel" onClick={this.clearForm}/>
                             </form>
                         </div>
                     </CardActions>

From a582997c80cb7b256763bafe914bbf30d05e5e1d Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 15 Sep 2017 13:12:41 +0530
Subject: [PATCH 8/8] Changed to camel case text.

---
 .../handler/service/AuthHandlerService.java   |  2 +-
 .../service/impl/AuthHandlerServiceImpl.java  | 20 ++++----
 .../mgt/auth/handler/util/Constants.java      |  1 +
 .../handler/util/dto/AccessTokenInfo.java     | 50 +++++++++----------
 .../handler/util/dto/ApiApplicationKey.java   | 16 +++---
 .../publisher/src/api/authHandler.js          |  6 +--
 6 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java
index 5e4e9314d0a..2f0a83228e5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/AuthHandlerService.java
@@ -40,7 +40,7 @@ public interface AuthHandlerService {
     @Path("/refresh")
     @Produces(MediaType.APPLICATION_JSON)
     @Consumes(MediaType.APPLICATION_JSON)
-    Response refresh(@QueryParam("refresh_token") String refresh_token, @QueryParam("clientId") String clientId,
+    Response refresh(@QueryParam("refreshToken") String refreshToken, @QueryParam("clientId") String clientId,
                      @QueryParam("clientSecret") String clientSecret);
 
     @POST
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java
index cbb7846b94b..4c51e39ad5f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/service/impl/AuthHandlerServiceImpl.java
@@ -67,12 +67,14 @@ public class AuthHandlerServiceImpl implements AuthHandlerService {
             }
     };
 
-    private Client disableHostnameVerification = new Client.Default(getTrustedSSLSocketFactory(), new HostnameVerifier() {
-        @Override
-        public boolean verify(String s, SSLSession sslSession) {
-            return true;
-        }
-    });
+    private Client disableHostnameVerification = new Client.Default(getTrustedSSLSocketFactory(),
+            new HostnameVerifier() {
+                @Override
+                public boolean verify(String s, SSLSession sslSession) {
+                    return true;
+                }
+            }
+    );
 
     @POST
     @Path("/login")
@@ -116,14 +118,15 @@ public class AuthHandlerServiceImpl implements AuthHandlerService {
     @Path("/refresh")
     @Produces(MediaType.APPLICATION_JSON)
     @Override
-    public Response refresh(@QueryParam("refresh_token") String refresh_token, @QueryParam("clientId") String clientId,
+    public Response refresh(@QueryParam("refreshToken") String refreshToken, @QueryParam("clientId") String clientId,
                             @QueryParam("clientSecret") String clientSecret) {
         try {
             TokenIssuerService tokenIssuerService = Feign.builder().client(disableHostnameVerification)
                     .requestInterceptor(new BasicAuthRequestInterceptor(clientId, clientSecret))
                     .contract(new JAXRSContract()).encoder(new JacksonEncoder()).decoder(new JacksonDecoder())
                     .target(TokenIssuerService.class, Constants.TOKEN_ENDPOINT);
-            AccessTokenInfo accessTokenInfo = tokenIssuerService.getRefreshToken(Constants.REFRESH_GRANT_TYPE, refresh_token);
+            AccessTokenInfo accessTokenInfo = tokenIssuerService.getRefreshToken(Constants.REFRESH_GRANT_TYPE,
+                    refreshToken);
             return Response.status(200).entity(new JSONObject(accessTokenInfo)).build();
         } catch (Exception e) {
             return Response.status(500).build();
@@ -131,7 +134,6 @@ public class AuthHandlerServiceImpl implements AuthHandlerService {
     }
 
 
-
     @POST
     @Path("/logout")
     @Override
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java
index 9cb64b83fcf..5837fd2d689 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/Constants.java
@@ -18,6 +18,7 @@
 
 package org.wso2.carbon.device.application.mgt.auth.handler.util;
 
+//TODO: Remove hardcoded localhost and ports
 public class Constants {
     public static String SCOPES = "perm:application:get perm:application:create perm:application:update " +
             "perm:application-mgt:login perm:application:delete perm:platform:add perm:platform:remove " +
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java
index 6f750d7cb9a..3421aff3af2 100755
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/AccessTokenInfo.java
@@ -30,54 +30,54 @@ import javax.xml.bind.annotation.XmlRootElement;
 @JsonIgnoreProperties(ignoreUnknown = true)
 public class AccessTokenInfo {
 
-    @XmlElement(required = true, name = "token_type")
-    private String token_type;
+    @XmlElement(required = true, name = "tokenType")
+    private String tokenType;
 
-    @XmlElement(required = true, name = "expires_in")
-    private String expires_in;
+    @XmlElement(required = true, name = "expiresIn")
+    private String expiresIn;
 
-    @XmlElement(required = true, name = "refresh_token")
-    private String refresh_token;
+    @XmlElement(required = true, name = "refreshToken")
+    private String refreshToken;
 
-    @XmlElement(required = true, name = "access_token")
-    private String access_token;
+    @XmlElement(required = true, name = "accessToken")
+    private String accessToken;
 
     public AccessTokenInfo() {}
 
-    public String getToken_type() {
-        return token_type;
+    public String getTokenType() {
+        return tokenType;
     }
 
-    public void setToken_type(String token_type) {
-        this.token_type = token_type;
+    public void setTokenType(String tokenType) {
+        this.tokenType = tokenType;
     }
 
-    public String getExpires_in() {
-        return expires_in;
+    public String getExpiresIn() {
+        return expiresIn;
     }
 
-    public void setExpires_in(String expires_in) {
-        this.expires_in = expires_in;
+    public void setExpiresIn(String expiresIn) {
+        this.expiresIn = expiresIn;
     }
 
-    public String getRefresh_token() {
-        return refresh_token;
+    public String getRefreshToken() {
+        return refreshToken;
     }
 
-    public void setRefresh_token(String refresh_token) {
-        this.refresh_token = refresh_token;
+    public void setRefreshToken(String refreshToken) {
+        this.refreshToken = refreshToken;
     }
 
-    public String getAccess_token() {
-        return access_token;
+    public String getAccessToken() {
+        return accessToken;
     }
 
-    public void setAccess_token(String access_token) {
-        this.access_token = access_token;
+    public void setAccessToken(String accessToken) {
+        this.accessToken = accessToken;
     }
 
     @Override
     public String toString() {
-        return access_token + " " + token_type + " " + refresh_token + " ";
+        return accessToken + " " + tokenType + " " + refreshToken + " ";
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java
index d66b4691fb8..7a00854a890 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.authhandler/src/main/java/org/wso2/carbon/device/application/mgt/auth/handler/util/dto/ApiApplicationKey.java
@@ -27,23 +27,23 @@ import javax.xml.bind.annotation.XmlRootElement;
 @XmlRootElement
 public class ApiApplicationKey {
     @XmlElement
-    private String client_id;
+    private String clientId;
     @XmlElement
-    private String client_secret;
+    private String clientSecret;
 
     public String getConsumerKey() {
-        return this.client_id;
+        return this.clientId;
     }
 
-    public void setClient_id(String consumerKey) {
-        this.client_id = consumerKey;
+    public void setClientId(String consumerKey) {
+        this.clientId = consumerKey;
     }
 
     public String getConsumerSecret() {
-        return this.client_secret;
+        return this.clientSecret;
     }
 
-    public void setClient_secret(String consumerSecret) {
-        this.client_secret = consumerSecret;
+    public void setClientSecret(String consumerSecret) {
+        this.clientSecret = consumerSecret;
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
index f5941423d46..111027a2dc5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js
@@ -43,9 +43,9 @@ class AuthHandler {
         login_promise.then(response => {
                 console.log(response);
                 const userName = response.data.userName;
-                const validityPeriod = response.data.expires_in; // In seconds
-                const WSO2_IOT_TOKEN = response.data.access_token;
-                const refreshToken = response.data.refresh_token;
+                const validityPeriod = response.data.expiresIn; // In seconds
+                const WSO2_IOT_TOKEN = response.data.accessToken;
+                const refreshToken = response.data.refreshToken;
                 const clientId = response.data.application_info[0].consumerKey;
                 const clientSecret = response.data.application_info[0].consumerSecret;