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. * not want to serve the URL.
* */ * */
class Base extends Component { class Base extends Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {};
user: "admin"
}
} }
render() { render() {
this.setState();
if (this.state.user) { if (this.state.user) {
return ( return (
<div className="container"> <div className="container">
<BaseLayout> <BaseLayout state={this.state}>
<Switch> <Switch>
<Route component={NotFound}/> <Route component={NotFound}/>
</Switch> </Switch>
@ -76,6 +76,14 @@ class Base extends Component {
} }
return (<Redirect to={"/login"}/>) 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 { class Store extends Component {
constructor() {
super();
}
render() { render() {
return ( return (
<div className="App"> <div className="App">
<MuiThemeProvider muiTheme={muiTheme}> <MuiThemeProvider muiTheme={muiTheme}>
<Router basename="publisher" history={history}> <Router basename="store" history={history}>
<Switch> <Switch>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
<Route path="/logout" 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 DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle'; import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import FlatButton from 'material-ui/FlatButton';
/** /**
* Base Layout: * Base Layout:
@ -39,12 +40,9 @@ import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
* */ * */
class BaseLayout extends Component { class BaseLayout extends Component {
constructor() { constructor(props) {
super(); super(props);
this.state = { this.state = this.props.state;
notifications: 0,
user: 'Admin'
}
} }
componentWillMount() { componentWillMount() {
@ -55,25 +53,6 @@ class BaseLayout extends Component {
this.handleHistory('/assets/apps'); 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. * The method to update the history.
@ -83,31 +62,49 @@ class BaseLayout extends Component {
this.props.history.push(to); 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 ( return (
<div>
<AppBar title="App Publisher"
iconElementRight={
<div>
<Badge <Badge
badgeContent={this.state.notifications} badgeContent={this.state.notifications}
secondary={true} secondary={true}
badgeStyle={{top: 12, right: 12}} badgeStyle={{top: 12, right: 12}} >
>
<IconButton tooltip="Notifications"> <IconButton tooltip="Notifications">
<NotificationsIcon/> <NotificationsIcon/>
</IconButton> </IconButton>
</Badge> </Badge>
<IconButton onClick={() => { );
console.log("Clicked") }
}}> }
<ActionAccountCircle/>
</IconButton> render() {
return (
<div>
<AppBar title="App Store"
iconElementRight={
<div>
{this.handleNotification()}
{this.handleUserLogin()}
</div> </div>
} }
/> />
<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> <List>
<ListItem primaryText="Applications" <ListItem primaryText="Applications"
leftIcon={<Apps/>} leftIcon={<Apps/>}
@ -117,27 +114,10 @@ class BaseLayout extends Component {
nestedItems={[ nestedItems={[
<ListItem <ListItem
key={1} key={1}
primaryText="Create" primaryText="Business" //TODO: categoryies ...
onClick={this.handleApplicationCreateClick.bind(this)} leftIcon={<List/>}
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/>}
/>]} />]}
/> />
<ListItem primaryText="Reviews"
onClick={this.handleReviewClick.bind(this)}
leftIcon={<Feedback/>}/>
</List> </List>
</Drawer> </Drawer>
</div> </div>
@ -158,8 +138,11 @@ class BaseLayout extends Component {
} }
BaseLayout.propTypes = { BaseLayout
.propTypes = {
children: PropTypes.element children: PropTypes.element
}; };
export default BaseLayout; export
default
BaseLayout;

@ -19,10 +19,12 @@
import qs from 'qs'; import qs from 'qs';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox'; 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 RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card'; import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator'; import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
import Store from '../App';
//todo: remove the {TextValidator, ValidatorForm} and implement it manually. //todo: remove the {TextValidator, ValidatorForm} and implement it manually.
@ -39,10 +41,9 @@ class Login extends Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
isLoggedIn: true, isLoggedIn: false,
referrer: "/", referrer: "/",
userName: "", userName: "",
password: "",
rememberMe: true rememberMe: true
} }
} }
@ -60,6 +61,15 @@ class Login extends Component {
handleLogin(event) { handleLogin(event) {
event.preventDefault(); 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 ( return (
<div> <div>
{/*TODO: Style the components.*/} {/*TODO: Style the components.*/}
<Card> <Card>
<CardTitle title="WSO2 IoT App Publisher"/> <CardTitle title="WSO2 IoT App Store"/>
<CardActions> <CardActions>
<ValidatorForm <ValidatorForm
ref="form" ref="form"
@ -141,11 +156,7 @@ class Login extends Component {
</Card> </Card>
</div>); </div>);
} else { } else {
return ( this.handleSuccessfulLogin();
<Switch>
<Redirect to={this.state.referrer}/>
</Switch>
);
} }
} }
} }

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

Loading…
Cancel
Save