Add the logout feature to APPM ui

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

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;

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 {
                             </SubMenu>
                             <Menu.Item key="2"><Link to="/publisher/manage"><Icon
                                 type="control"/>Manage</Link></Menu.Item>
+
+                            <SubMenu className="profile"
+                                     title={
+                                         <span className="submenu-title-wrapper">
+                                     <Icon type="user"/>
+                                         Profile
+                                     </span>
+                                     }
+                            >
+                                <Logout/>
+                            </SubMenu>
+
                         </Menu>
+
                     </Header>
                 </Layout>
                 <Layout>

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 (
+            <Menu>
+                <Menu.Item key="1" onClick={this.handleSubmit}><Icon type="logout"/>Logout</Menu.Item>
+            </Menu>
+        );
+    }
+}
+
+export default withConfigContext(Logout);

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

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;

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) {
@@ -117,6 +120,17 @@ class Dashboard extends React.Component {
                             }
                             <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
                                 Clips</Link></Menu.Item>
+
+                            <SubMenu className="profile"
+                                     title={
+                                         <span className="submenu-title-wrapper">
+                                     <Icon type="user"/>
+                                         Profile
+                                     </span>
+                                     }
+                            >
+                                <Logout/>
+                            </SubMenu>
                         </Menu>
                     </Header>
                 </Layout>

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 (
+            <Menu>
+                <Menu.Item key="1" onClick={this.handleSubmit}><Icon type="logout"/>Logout</Menu.Item>
+            </Menu>
+        );
+    }
+}
+
+export default withConfigContext(Logout);