Add the logout feature to APPM ui

feature/appm-store/pbac
nipunnadeen 5 years ago
parent 7316553076
commit bc2847375d

@ -16,6 +16,7 @@
"deviceMgt": "/device-mgt/v1.0"
},
"loginUri": "/publisher-ui-request-handler/login",
"logoutUri": "/publisher-ui-request-handler/logout",
"platform": "publisher"
},
"defaultPlatformIcons": {

@ -55,6 +55,11 @@
min-height: 780px
}
.profile{
float:right;
margin-right: 2%;
}
@media only screen and (min-width: 768px) {
.main-container{
padding: 24px;

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

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

@ -15,6 +15,7 @@
"deviceMgt" : "/device-mgt/v1.0"
},
"loginUri": "/store-ui-request-handler/login",
"logoutUri": "/store-ui-request-handler/logout",
"platform": "store"
},
"defaultPlatformIcons": {

@ -55,6 +55,11 @@
min-height: 780px
}
.profile{
float:right;
margin-right: 2%;
}
@media only screen and (min-width: 768px) {
.main-container{
padding: 24px;

@ -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 (
<Menu.Item key={platform}>
<Link to={"/store/"+platform}>
<Link to={"/store/" + platform}>
<Icon type={icon} theme={theme}/>
{platform}
</Link>
@ -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>

@ -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);
Loading…
Cancel
Save