From bc2847375d616a540f830ba69e5b6a8c6dfd6e06 Mon Sep 17 00:00:00 2001 From: nipunnadeen Date: Thu, 15 Aug 2019 15:49:46 +0530 Subject: [PATCH] Add the logout feature to APPM ui --- .../react-app/public/conf/config.json | 1 + .../react-app/src/App.css | 5 ++ .../src/pages/dashboard/Dashboard.js | 16 +++- .../src/pages/dashboard/logout/Logout.js | 80 +++++++++++++++++++ .../react-app/public/conf/config.json | 1 + .../react-app/src/App.css | 5 ++ .../src/pages/dashboard/Dashboard.js | 18 ++++- .../src/pages/dashboard/logout/Logout.js | 80 +++++++++++++++++++ 8 files changed, 203 insertions(+), 3 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/logout/Logout.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/logout/Logout.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json index 88a2caa2102..61464fb6f4b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json @@ -16,6 +16,7 @@ "deviceMgt": "/device-mgt/v1.0" }, "loginUri": "/publisher-ui-request-handler/login", + "logoutUri": "/publisher-ui-request-handler/logout", "platform": "publisher" }, "defaultPlatformIcons": { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css index 5b105745cf5..d393e9ad689 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css @@ -55,6 +55,11 @@ min-height: 780px } +.profile{ + float:right; + margin-right: 2%; +} + @media only screen and (min-width: 768px) { .main-container{ padding: 24px; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js index fc071642583..3639c4e4f70 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -17,12 +17,13 @@ */ import React from "react"; -import {Layout, Menu, Icon, Breadcrumb} from 'antd'; +import {Layout, Menu, Icon} from 'antd'; import {Switch, Link} from "react-router-dom"; import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import {Redirect} from 'react-router' import "../../App.css"; import {withConfigContext} from "../../context/ConfigContext"; +import Logout from "./logout/Logout"; const {Header, Content, Footer} = Layout; const {SubMenu} = Menu; @@ -69,7 +70,20 @@ class Dashboard extends React.Component { Manage + + + + Profile + + } + > + + + + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/logout/Logout.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/logout/Logout.js new file mode 100644 index 00000000000..1c3fbcf50a3 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/logout/Logout.js @@ -0,0 +1,80 @@ +/* + * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. 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. + */ + +import React from "react"; +import {notification, Menu, Icon} from 'antd'; +import axios from 'axios'; +import {withConfigContext} from "../../../context/ConfigContext"; + +/* +This class for call the logout api by sending request + */ +class Logout extends React.Component { + + constructor(props) { + super(props); + this.state = { + inValid: false, + loading: false + }; + } + /* + This function call the logout api when the request is success + */ + handleSubmit = () => { + + const thisForm = this; + const config = this.props.context; + + thisForm.setState({ + inValid: false + }); + + axios.post(window.location.origin + config.serverConfig.logoutUri + ).then(res => { + //if the api call status is correct then user will logout and then it goes to login page + if (res.status === 200) { + window.location = window.location.origin + "/publisher/login"; + } + }).catch(function (error) { + + if (error.hasOwnProperty("response") && error.response.status === 400) { + thisForm.setState({ + inValid: true + }); + } else { + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to logout.", + }); + } + }); + }; + + render() { + return ( + + Logout + + ); + } +} + +export default withConfigContext(Logout); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json index 062ac0df964..0d1b5d86f46 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json @@ -15,6 +15,7 @@ "deviceMgt" : "/device-mgt/v1.0" }, "loginUri": "/store-ui-request-handler/login", + "logoutUri": "/store-ui-request-handler/logout", "platform": "store" }, "defaultPlatformIcons": { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css index 5b105745cf5..d393e9ad689 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css @@ -55,6 +55,11 @@ min-height: 780px } +.profile{ + float:right; + margin-right: 2%; +} + @media only screen and (min-width: 768px) { .main-container{ padding: 24px; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js index 32fe96f960a..c7b8c475751 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js @@ -26,6 +26,9 @@ import {Switch} from 'react-router'; import axios from "axios"; import "../../App.css"; import {withConfigContext} from "../../context/ConfigContext"; +import Logout from "./logout/Logout"; + +const {SubMenu} = Menu; class Dashboard extends React.Component { constructor(props) { @@ -96,7 +99,7 @@ class Dashboard extends React.Component { style={{lineHeight: '64px'}} > { - deviceTypes.map((deviceType)=>{ + deviceTypes.map((deviceType) => { const platform = deviceType.name; const defaultPlatformIcons = config.defaultPlatformIcons; let icon = defaultPlatformIcons.default.icon; @@ -107,7 +110,7 @@ class Dashboard extends React.Component { } return ( - + {platform} @@ -117,6 +120,17 @@ class Dashboard extends React.Component { } Web Clips + + + + Profile + + } + > + + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/logout/Logout.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/logout/Logout.js new file mode 100644 index 00000000000..35068cc581b --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/logout/Logout.js @@ -0,0 +1,80 @@ +/* + * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. 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. + */ + +import React from "react"; +import {notification, Menu, Icon} from 'antd'; +import axios from 'axios'; +import {withConfigContext} from "../../../context/ConfigContext"; + +/* +This class for call the logout api by sending request + */ +class Logout extends React.Component { + + constructor(props) { + super(props); + this.state = { + inValid: false, + loading: false + }; + } + /* + This function call the logout api when the request is success + */ + handleSubmit = () => { + + const thisForm = this; + const config = this.props.context; + + thisForm.setState({ + inValid: false + }); + + axios.post(window.location.origin + config.serverConfig.logoutUri + ).then(res => { + //if the api call status is correct then user will logout and then it goes to login page + if (res.status === 200) { + window.location = window.location.origin + "/store/login"; + } + }).catch(function (error) { + + if (error.hasOwnProperty("response") && error.response.status === 400) { + thisForm.setState({ + inValid: true + }); + } else { + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to logout.", + }); + } + }); + }; + + render() { + return ( + + Logout + + ); + } +} + +export default withConfigContext(Logout);