Adding user login option.

feature/appm-store/pbac
sinthuja 7 years ago
parent f01f150a37
commit 362a2d1d32

@ -87,7 +87,7 @@ body {
.btn-header { .btn-header {
margin-top: 15px; margin-top: 15px;
margin-right: 20px; margin-right: 100px;
color: white; color: white;
} }

@ -63,6 +63,7 @@ class Base extends Component {
} }
render() { render() {
console.log('came here/////');
if (this.state.user !== null) { if (this.state.user !== null) {
return ( return (
<div> <div>

@ -36,6 +36,7 @@ class Configuration {
let thisObject = this; let thisObject = this;
axios.get(thisObject.hostConstants.baseURL + '/' + thisObject.hostConstants.appContext + "/config.json"). axios.get(thisObject.hostConstants.baseURL + '/' + thisObject.hostConstants.appContext + "/config.json").
then(function (response) { then(function (response) {
console.log('succesfully loadedd....');
thisObject.serverConfig = response.data.config; thisObject.serverConfig = response.data.config;
thisObject.themeConfig = response.data.theme; thisObject.themeConfig = response.data.theme;
Constants.load(); Constants.load();

@ -36,10 +36,12 @@ class BaseLayout extends Component {
this.state = { this.state = {
notifications: 0, notifications: 0,
user: 'Admin', user: 'Admin',
openModal: false openModal: false,
userOptions : false
}; };
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
this.closeModal = this.closeModal.bind(this); this.closeModal = this.closeModal.bind(this);
this.handleUserOptionsOnClick = this.handleUserOptionsOnClick.bind(this);
} }
handleApplicationClick() { handleApplicationClick() {
@ -62,6 +64,10 @@ class BaseLayout extends Component {
this.setState({openModal: false}); this.setState({openModal: false});
} }
handleUserOptionsOnClick() {
this.setState({userOptions : true});
}
render() { render() {
return ( return (
<Container noGutters fluid id="container"> <Container noGutters fluid id="container">
@ -72,8 +78,8 @@ class BaseLayout extends Component {
</span> </span>
<div id="header-btn-container"> <div id="header-btn-container">
<i className="fw fw-notification btn-header"></i> <i className="fw fw-notification btn-header"></i>
<i className="fw fw-user btn-header"> <i className="fw fw-user btn-header" onClick={this.handleUserOptionsOnClick}>
<UserOptions/> <UserOptions userOptions={this.state.userOptions}/>
</i> </i>
</div> </div>
<div id="search-box"> <div id="search-box">

@ -238,6 +238,7 @@ class ApplicationListing extends Component {
} }
render() { render() {
console.log('render app listing');
return ( return (
<div id="application-list" style={this.state.appListStyle}> <div id="application-list" style={this.state.appListStyle}>
<Row> <Row>

@ -17,37 +17,42 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import Theme from '../../../theme'; import './user-options.css';
import AuthHandler from '../../../api/authHandler';
class UserOptions extends Component { class UserOptions extends Component {
constructor() { constructor() {
super(); super();
this.scriptId = "userOptions"; this.state = {};
} }
componentWillMount() { componentWillMount() {
/** let user = AuthHandler.getUser();
*Loading the theme files based on the the user-preference. if (user) {
*/ if (!AuthHandler.isTokenExpired()) {
Theme.insertThemingScripts(this.scriptId); this.setState({user: user});
} } else {
this.setState({user: null});
componentWillUnmount() { }
Theme.removeThemingScripts(this.scriptId); }
} }
render() { render() {
const {height, width} = this.props; var displayOptions = this.props.userOptions ? "block" : "none";
return ( if (this.state.user) {
<div class="dropdown"> return (
<ul class="dropdown-menu"> <div id='user-options-drop-down' className="dropdown-content" style={{display: displayOptions}}>
<li><a href="#">HTML</a></li> <a href="#">Logout</a>
<li><a href="#">CSS</a></li> </div>
<li><a href="#">JavaScript</a></li> );
</ul> } else {
</div> return (
) <div id='user-options-drop-down' className="dropdown-content" style={{display: displayOptions}}>
<a href="/store/login">Login</a>
</div>
);
}
} }
} }

@ -0,0 +1,45 @@
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

@ -46,7 +46,7 @@ function loadStore() {
}).catch(error => { }).catch(error => {
addLocaleData(require('react-intl/locale-data/en')); addLocaleData(require('react-intl/locale-data/en'));
let defaultLocale = Axios.create({ let defaultLocale = Axios.create({
baseURL: Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales" baseURL: Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales/"
+ Constants.defaultLocale + ".json" + Constants.defaultLocale + ".json"
}).get(); }).get();
defaultLocale.then(response => { defaultLocale.then(response => {

@ -64,7 +64,6 @@ const config = {
] ]
}, },
resolve: { resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['.jsx', '.js', '.ttf', '.woff', '.woff2', '.svg'] extensions: ['.jsx', '.js', '.ttf', '.woff', '.woff2', '.svg']
} }

Loading…
Cancel
Save