From 7ff5823e6d239a8b967ec0030c66a9b69f157dc0 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Tue, 12 Sep 2017 20:16:30 +0530 Subject: [PATCH] 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 24dcb2848a..4b55d0e77d 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 (
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 62604f68a3..0000000000 --- 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 0f6ab3bd14..0000000000 --- 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 0000000000..e7f9e60fc0 --- /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 0000000000..c9363a82ed --- /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 0000000000..28a654816e --- /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 0000000000..fd32fbed20 --- /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 c52d9ed6cd..00629cec4f 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 405042531c..cc38f4a928 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 2542eaa5f7..c2c53d7e7d 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 ; + return ; case 1: - return ; + return ; case 2: - return ; + return ; default: - return
; + return
; } } 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 fcceb20ca5..3d815bb74d 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 {
+ onChange={this.searchApplications.bind(this)}/> - - - - + - -
); +
+ ); } } 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 f414a8c278..ee1c2aaccf 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 (
@@ -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)} > - - -
+ + + +
- - - + + +
-

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 24c0b90630..ebf3daf4a5 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 ( this._handleRequestDelete(data.key)} + onRequestDelete={() => this.handleRequestDelete(data.key)} className="applicationCreateChip"> {data.value} ); } - _onVisibilitySelect = (event, index, value) => { + onVisibilitySelect(event, index, value) { console.log(value); let comp = @@ -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 {
+
+
+ onChange={this.onTextFieldChange.bind(this)} + /> +

+ onChange={this.onTextFieldChange.bind(this)} + /> +

+ onChange={this.onTextFieldChange.bind(this)} + /> +
-
+ +

-
- {this.state.tags.map(this._renderChip, this)} + onChange={this.handleTagChange.bind(this)} + onKeyPress={this.addTags.bind(this)} + /> +
+
+ {this.state.tags.map(this.renderChip, this)}

-
+ +
{/*Platform Specific Properties.*/}

Platform Specific Properties

@@ -375,50 +402,58 @@ class Step2 extends Component {

Banner*:

{this.state.banner.map((tile) => ( - - - }> - + + + }> + + ))} {this.state.banner.length === 0 ? - { - this.setState({banner, rejected}); - }}> -

+

- :
} - + { + this.setState({banner, rejected}); + }} + > +

+

+ :
+ } -

{this.state.errors["Screenshots"]}

Screenshots*:

- + {this.state.screenshots.map((file) => ( - - - }> + + + }> ))} {this.state.screenshots.length < 3 ? - { - let tmpScreenshots = this.state.screenshots; - tmpScreenshots.push(screenshots); - this.setState({ - screenshots: tmpScreenshots}); - }}> -

+

- :
} + { + let tmpScreenshots = this.state.screenshots; + tmpScreenshots.push(screenshots); + this.setState({ + screenshots: tmpScreenshots + }); + }} + > +

+

+ :
}

@@ -427,38 +462,43 @@ class Step2 extends Component {

Icon*:

{this.state.icon.map((tile) => ( - - - }> - + + + }> + + ))} {this.state.icon.length === 0 ? - {this.setState({icon, rejected});}}> -

+

- :
} + { + this.setState({icon, rejected}); + }} + > +

+

+ :
}

-

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 1245d1df3c..d0c053578e 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 { {/*If toggle is true, the release form will be shown.*/} - {!this.state.showForm ?
:
- - - - -
-
-
} - + {!this.state.showForm ?
: +
+ + + + + +
+
+
}
- + + +
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 da98a075c5..a1f2f013a7 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 (
- - - - - - - { - console.log("Clicked") - }}> - + + + + -
- } + + { + console.log("Clicked") + }}> + + +
+ } />
- } - initiallyOpen={false} - primaryTogglesNestedList={true} - onClick={this.handleApplicationClick.bind(this)} - nestedItems={[ - } - />]} + } + initiallyOpen={false} + primaryTogglesNestedList={true} + onClick={this.handleApplicationClick.bind(this)} + nestedItems={[ + } + /> + ]} /> - } - initiallyOpen={false} - primaryTogglesNestedList={true} - onClick={this.handlePlatformClick.bind(this)} - nestedItems={[ - } - />]} + } + initiallyOpen={false} + primaryTogglesNestedList={true} + onClick={this.handlePlatformClick.bind(this)} + nestedItems={[ + } + /> + ]} + /> + } /> - }/>
{this.props.children}
-
); +
+ ); } - } 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 d5faa900e0..59166ef2cf 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 ( 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 (
-
+ +

+ onChange={this.onTextChange.bind(this)} + /> +


+ onChange={this.onTextChange.bind(this)} + /> +
+

+ /> +

+ /> +

+ onChange={this.handleTagChange.bind(this)} + onKeyPress={this.addTags.bind(this)} + /> +
- {tags.map(this._renderChip, this)} + {tags.map(this.renderChip, this)}

@@ -313,7 +348,7 @@ class PlatformCreate extends Component {
{platformProperties.map((p) => { return
{p.key} : {p.value} - +
@@ -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)} /> + onChange={this.onPropertySelect.bind(this)}> {propertyTypes.map((type) => { - return + return })} - +
@@ -350,27 +385,33 @@ class PlatformCreate extends Component {

Platform Icon*:

{this.state.icon.map((tile) => ( - - - }> + + + }> ))} {this.state.icon.length === 0 ? - {this.setState({icon, rejected})}}> + { + this.setState({icon, rejected}) + }} + >

+

- :
} + :
}

- - + +
@@ -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 0f994eb417..b0ac709c51 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 ( -
+
- - +
); 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 beb6086b58..f0624ded4b 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 ( - + selectable={false}> + {headers.map((header) => { - return () - } + return ( + + )} )} - {data.map((dataItem) =>{ - return () + {data.map((dataItem) => { + return ( + + ) })}
) 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 8d655c6617..45df39b72a 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 = ; + headerCell = + ; } else { headerCell = {this.props.header.label}; } return ( - + {headerCell} ); 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 292f0e4eab..52550234f7 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 ( - - {Object.keys(dataItem).map((key) => { - if (key !== 'id') { - return {dataItem[key]} - } else { - return - } + + {Object.keys(dataItem).map((key) => { + if (key !== 'id') { + return ( + + {dataItem[key]} + ) + } else { + return + } - } )} - + })} + ); } } 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 5987730bab..89f326b0a3 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 (
- {/*TODO: Style the components.*/} -
+
+ onChange={this.onUserNameChange.bind(this)} + /> +

- + onChange={this.onPasswordChange.bind(this)} + /> +
+
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 a26e3415c0..788eb973da 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};