Adding some fixes with login page.

feature/appm-store/pbac
sinthuja 7 years ago
parent 591962c2fd
commit 9f759f8aee

@ -55,18 +55,18 @@ if (theme.current === "default") {
* not want to serve the URL.
* */
class Base extends Component {
constructor() {
super();
this.state = {
user: "admin"
}
this.state = {};
}
render() {
this.setState();
if (this.state.user) {
return (
<div className="container">
<BaseLayout>
<BaseLayout state={this.state}>
<Switch>
<Route component={NotFound}/>
</Switch>
@ -76,6 +76,14 @@ class Base extends Component {
}
return (<Redirect to={"/login"}/>)
}
setState() {
if (this.props.location.state){
this.state = this.props.location.state;
} else {
this.state = {};
}
}
}
/**
@ -85,11 +93,16 @@ class Base extends Component {
*
* */
class Store extends Component {
constructor() {
super();
}
render() {
return (
<div className="App">
<MuiThemeProvider muiTheme={muiTheme}>
<Router basename="publisher" history={history}>
<Router basename="store" history={history}>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/logout" component={Login}/>

@ -30,6 +30,7 @@ import Feedback from 'material-ui/svg-icons/action/feedback';
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import FlatButton from 'material-ui/FlatButton';
/**
* Base Layout:
@ -39,12 +40,9 @@ import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
* */
class BaseLayout extends Component {
constructor() {
super();
this.state = {
notifications: 0,
user: 'Admin'
}
constructor(props) {
super(props);
this.state = this.props.state;
}
componentWillMount() {
@ -55,25 +53,6 @@ class BaseLayout extends Component {
this.handleHistory('/assets/apps');
}
handleOverviewClick() {
this.handleHistory('/overview');
}
handleApplicationCreateClick() {
this.handleHistory('/assets/apps/create');
}
handlePlatformClick() {
this.handleHistory('/assets/platforms');
}
handlePlatformCreateClick() {
this.handleHistory('/assets/platforms/create');
}
handleReviewClick() {
this.handleHistory('/assets/reviews');
}
/**
* The method to update the history.
@ -83,31 +62,49 @@ class BaseLayout extends Component {
this.props.history.push(to);
}
render() {
handleUserLogin() {
if (this.state.user) {
return (
<IconButton tooltip={this.state.user}>
<ActionAccountCircle/>
</IconButton>
);
} else {
return (
<FlatButton label="Login"/>
);
}
}
handleNotification() {
if (this.state.user) {
return (
<div>
<AppBar title="App Publisher"
iconElementRight={
<div>
<Badge
badgeContent={this.state.notifications}
secondary={true}
badgeStyle={{top: 12, right: 12}}
>
badgeStyle={{top: 12, right: 12}} >
<IconButton tooltip="Notifications">
<NotificationsIcon/>
</IconButton>
</Badge>
<IconButton onClick={() => {
console.log("Clicked")
}}>
<ActionAccountCircle/>
</IconButton>
);
}
}
render() {
return (
<div>
<AppBar title="App Store"
iconElementRight={
<div>
{this.handleNotification()}
{this.handleUserLogin()}
</div>
}
/>
<div>
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '13%', left: '1%'}}
open={true}>
<List>
<ListItem primaryText="Applications"
leftIcon={<Apps/>}
@ -117,27 +114,10 @@ class BaseLayout extends Component {
nestedItems={[
<ListItem
key={1}
primaryText="Create"
onClick={this.handleApplicationCreateClick.bind(this)}
leftIcon={<Add/>}
/>]}
/>
<ListItem primaryText="Platforms"
leftIcon={<DevicesOther/>}
initiallyOpen={false}
primaryTogglesNestedList={true}
onClick={this.handlePlatformClick.bind(this)}
nestedItems={[
<ListItem
key={1}
primaryText="Create"
onClick={this.handlePlatformCreateClick.bind(this)}
leftIcon={<Add/>}
primaryText="Business" //TODO: categoryies ...
leftIcon={<List/>}
/>]}
/>
<ListItem primaryText="Reviews"
onClick={this.handleReviewClick.bind(this)}
leftIcon={<Feedback/>}/>
</List>
</Drawer>
</div>
@ -158,8 +138,11 @@ class BaseLayout extends Component {
}
BaseLayout.propTypes = {
BaseLayout
.propTypes = {
children: PropTypes.element
};
export default BaseLayout;
export
default
BaseLayout;

@ -19,10 +19,12 @@
import qs from 'qs';
import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox';
import {Redirect, Switch} from 'react-router-dom';
import {Redirect, Route} from 'react-router-dom';
import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
import Store from '../App';
//todo: remove the {TextValidator, ValidatorForm} and implement it manually.
@ -39,10 +41,9 @@ class Login extends Component {
constructor() {
super();
this.state = {
isLoggedIn: true,
isLoggedIn: false,
referrer: "/",
userName: "",
password: "",
rememberMe: true
}
}
@ -60,6 +61,15 @@ class Login extends Component {
handleLogin(event) {
event.preventDefault();
//TODO: send authentication request.
let location = {
pathname: this.state.referrer,
state: {
notifications: 0,
user: this.state.userName
}
};
this.props.history.push(location);
}
/**
@ -95,16 +105,21 @@ class Login extends Component {
);
}
render() {
handleSuccessfulLogin() {
return (
<Redirect to='/store'/>
);
}
if (!this.state.isLoggedIn) {
render() {
if (!(this.state.isLoggedIn && this.state.userName)) {
return (
<div>
{/*TODO: Style the components.*/}
<Card>
<CardTitle title="WSO2 IoT App Publisher"/>
<CardTitle title="WSO2 IoT App Store"/>
<CardActions>
<ValidatorForm
ref="form"
@ -141,11 +156,7 @@ class Login extends Component {
</Card>
</div>);
} else {
return (
<Switch>
<Redirect to={this.state.referrer}/>
</Switch>
);
this.handleSuccessfulLogin();
}
}
}

@ -5,5 +5,4 @@ import './index.css';
ReactDOM.render(<Store />, document.getElementById('root'));
console.log('Hello World!');

Loading…
Cancel
Save