mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Added the stepper and App creation first step.
This commit is contained in:
Menaka Jayawardena
parent
c7c0f62ca2
commit
d2705b1427
@ -15,6 +15,7 @@
|
||||
"latest-version": "^3.1.0",
|
||||
"material-ui": "^0.19.0",
|
||||
"material-ui-datatables": "^0.18.2",
|
||||
"qs": "^6.5.0",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-images-uploader": "^1.1.0",
|
||||
|
||||
@ -16,20 +16,19 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
|
||||
import './App.css'
|
||||
import {BaseLayout, Create, Login, NotFound} from './components'
|
||||
import createHistory from 'history/createBrowserHistory';
|
||||
import React, {Component} from 'react';
|
||||
import createHistory from 'history/createHashHistory';
|
||||
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
|
||||
import {BaseLayout, Create, Login, NotFound, PublisherOverview} from './components'
|
||||
|
||||
const history = createHistory({basename: '/publisher'});
|
||||
|
||||
|
||||
class Base extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
user: "m"
|
||||
user: "s"
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,15 +38,15 @@ class Base extends Component {
|
||||
<div className="container">
|
||||
<BaseLayout>
|
||||
<Switch>
|
||||
<Redirect exact path={"/"} to={"/assets"}/>
|
||||
<Route exact path={"/assets"} component={NotFound}/>
|
||||
<Route path={"/assets/apps"} component={Create}/>
|
||||
<Route path={"/assets/apps/:app"}/>
|
||||
<Route path={"/assets/apps/create"}/>
|
||||
<Route path={"/assets/apps/edit"}/>
|
||||
<Route path={"/assets/platform/:platform"}/>
|
||||
<Route path={"/assets/platform/create"}/>
|
||||
<Route path={"/assets/platform/edit"}/>
|
||||
<Redirect exact path={"/"} to={"/overview"}/>
|
||||
<Route exact path={"/overview"} component={PublisherOverview}/>
|
||||
{/*<Route path={"/assets/apps"} component={}/>*/}
|
||||
{/*<Route path={"/assets/apps/:app"} component={}/>*/}
|
||||
<Route path={"/assets/apps/create"} component={Create}/>
|
||||
{/*<Route path={"/assets/apps/edit/:app"} component="app edit"/>*/}
|
||||
<Route path={"/assets/platforms/:platform"}/>
|
||||
<Route path={"/assets/platforms/create"}/>
|
||||
<Route path={"/assets/platforms/edit/:platform"}/>
|
||||
<Route path={"/assets/reviews"}/>
|
||||
<Route path={"/assets/reviews/:review"}/>
|
||||
<Route component={NotFound}/>
|
||||
|
||||
@ -15,3 +15,171 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import {Step1, Step2, Step3} from './Forms';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
|
||||
|
||||
class Create extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.setStepData.bind(this);
|
||||
this.removeStepData.bind(this);
|
||||
this.handleSubmit.bind(this);
|
||||
this.handleCancel.bind(this);
|
||||
this.handleYes.bind(this);
|
||||
this.handleNo.bind(this);
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
stepData: [],
|
||||
isDialogOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
handleNext = () => {
|
||||
const {stepIndex} = this.state;
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex >= 2,
|
||||
});
|
||||
};
|
||||
|
||||
handleSubmit = () => {
|
||||
console.log(this.state.stepData);
|
||||
};
|
||||
|
||||
handleCancel = () => {
|
||||
this.setState({isDialogOpen: true});
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.removeStepData();
|
||||
this.setState({stepIndex: stepIndex - 1});
|
||||
}
|
||||
};
|
||||
|
||||
setStepData = (step, data) => {
|
||||
console.log(step, data, this.state.stepData);
|
||||
let tmpStepData = this.state.stepData;
|
||||
tmpStepData.push({step: step, data: data});
|
||||
|
||||
this.setState({stepData: tmpStepData})
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove the last data point
|
||||
* */
|
||||
removeStepData = () => {
|
||||
let tempData = this.state.stepData;
|
||||
tempData.pop();
|
||||
this.setState({stepData: tempData});
|
||||
};
|
||||
|
||||
handleYes = () => {
|
||||
this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false});
|
||||
};
|
||||
|
||||
handleNo = () => {
|
||||
this.setState({isDialogOpen: false});
|
||||
};
|
||||
|
||||
getStepContent(stepIndex) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return <Step1 handleNext={this.handleNext}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}/>;
|
||||
case 1:
|
||||
return <Step2 handleNext={this.handleNext}
|
||||
handlePrev={this.handlePrev}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}/>;
|
||||
case 2:
|
||||
return <Step3 handleFinish={this.handleNext}
|
||||
handlePrev={this.handlePrev}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}/>;
|
||||
default:
|
||||
return 'You\'re a long way from home sonny jim!';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const {finished, stepIndex} = this.state;
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Yes"
|
||||
primary={true}
|
||||
onClick={this.handleYes}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="No"
|
||||
secondary={true}
|
||||
onClick={this.handleNo}
|
||||
/>,
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
|
||||
<Card>
|
||||
<CardTitle title="Create Application"/>
|
||||
|
||||
{/**
|
||||
* The stepper goes here.
|
||||
*/}
|
||||
<CardActions>
|
||||
<div style={{width: '100%', margin: 'auto'}}>
|
||||
<Stepper activeStep={stepIndex}>
|
||||
<Step>
|
||||
<StepLabel>Select Application Platform</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>Enter Application Details</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>Release</StepLabel>
|
||||
</Step>
|
||||
</Stepper>
|
||||
<div style={contentStyle}>
|
||||
{finished ? (
|
||||
<div>
|
||||
<p>Create App?</p>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<RaisedButton primary={true} label="Create" onClick={this.handleSubmit}/>
|
||||
<FlatButton label="Cancel" onClick={this.handleCancel}/>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{this.getStepContent(stepIndex)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</Card>
|
||||
<Dialog
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.isDialogOpen}
|
||||
onRequestClose={this.handleNo}
|
||||
>
|
||||
Do you really want to cancel?
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Create);
|
||||
|
||||
@ -0,0 +1,117 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. 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, {Component} from 'react';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
|
||||
class Step1 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
store: 1,
|
||||
platform: 1,
|
||||
stepData: []
|
||||
};
|
||||
}
|
||||
|
||||
handleNext = () => {
|
||||
this.props.handleNext();
|
||||
};
|
||||
|
||||
setStepData() {
|
||||
this.props.setData("step1", {step:"Dfds"});
|
||||
this.handleNext.bind(this);
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.setStepData();
|
||||
this.handleNext();
|
||||
}
|
||||
|
||||
handlePrev() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
onChangePlatform = (event, index, value) => {
|
||||
this.setState({platform: value});
|
||||
};
|
||||
|
||||
onChangeStore = (event, index, value) => {
|
||||
this.setState({store: value});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {finished, stepIndex} = this.state;
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
return (
|
||||
<div>
|
||||
<div style={contentStyle}>
|
||||
<div>
|
||||
<div>
|
||||
<TextField
|
||||
hintText="Enter a title for your application."
|
||||
floatingLabelText="Title*"
|
||||
floatingLabelFixed={true}
|
||||
/><br />
|
||||
<SelectField
|
||||
floatingLabelText="Store Type*"
|
||||
value={this.state.store}
|
||||
floatingLabelFixed={true}
|
||||
onChange={this.onChangeStore.bind(this)}
|
||||
>
|
||||
<MenuItem value={1} primaryText="Enterprise" />
|
||||
<MenuItem value={2} primaryText="Public" />
|
||||
</SelectField> <br />
|
||||
<SelectField
|
||||
floatingLabelText="Platform*"
|
||||
value={this.state.platform}
|
||||
floatingLabelFixed={true}
|
||||
onChange={this.onChangePlatform.bind(this)}
|
||||
>
|
||||
<MenuItem value={1} primaryText="Android" />
|
||||
<MenuItem value={2} primaryText="iOS" />
|
||||
<MenuItem value={3} primaryText="Web" />
|
||||
</SelectField>
|
||||
</div>
|
||||
<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label="< Back"
|
||||
disabled= {true}
|
||||
onClick={this.handlePrev.bind(this)}
|
||||
style={{marginRight: 12}}
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Next >"
|
||||
primary={true}
|
||||
onClick={this.handleClick.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Step1;
|
||||
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. 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, {Component} from 'react';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
|
||||
class Step2 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
handleNext() {
|
||||
this.props.handleNext();
|
||||
}
|
||||
|
||||
handlePrev() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
render() {
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
return (
|
||||
<div style={contentStyle}>
|
||||
Step2
|
||||
<div>
|
||||
<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label="< Back"
|
||||
disabled= {false}
|
||||
onClick={this.handlePrev.bind(this)}
|
||||
style={{marginRight: 12}}
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Next >"
|
||||
primary={true}
|
||||
onClick={this.handleNext.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Step2;
|
||||
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. 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, {Component} from 'react';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
|
||||
class Step3 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
handleFinish() {
|
||||
this.props.handleFinish();
|
||||
}
|
||||
|
||||
handlePrev() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
render() {
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
return (
|
||||
<div style={contentStyle}>
|
||||
Step3
|
||||
<div>
|
||||
<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label="< Back"
|
||||
disabled= {false}
|
||||
onClick={this.handlePrev.bind(this)}
|
||||
style={{marginRight: 12}}
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Finish"
|
||||
primary={true}
|
||||
onClick={this.handleFinish.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Step3;
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. 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 Step1 from './Step1';
|
||||
import Step2 from './Step2';
|
||||
import Step3 from './Step3';
|
||||
|
||||
export {Step1, Step2, Step3};
|
||||
@ -19,12 +19,17 @@
|
||||
import React, {Component} from 'react';
|
||||
import AppBar from 'material-ui/AppBar';
|
||||
import Drawer from 'material-ui/Drawer';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Menu from 'material-ui/Menu';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Notifications from 'material-ui/svg-icons/social/notifications';
|
||||
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
|
||||
import Apps from 'material-ui/svg-icons/navigation/apps';
|
||||
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
|
||||
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
|
||||
import Dashboard from 'material-ui/svg-icons/action/dashboard';
|
||||
import Add from 'material-ui/svg-icons/content/add-circle';
|
||||
import Feedback from 'material-ui/svg-icons/action/feedback';
|
||||
import {withRouter} from 'react-router-dom'
|
||||
import Badge from 'material-ui/Badge';
|
||||
import {List, ListItem} from 'material-ui/List';
|
||||
|
||||
|
||||
/**
|
||||
@ -35,9 +40,48 @@ import {withRouter} from 'react-router-dom'
|
||||
* */
|
||||
class BaseLayout extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
notifications: 0,
|
||||
user: 'Admin'
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
handleApplicationClick() {
|
||||
console.log("Application");
|
||||
window.location = '/publisher/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.
|
||||
* to: The URL to route.
|
||||
* */
|
||||
handleHistory(to) {
|
||||
this.props.history.push(to);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -46,9 +90,15 @@ class BaseLayout extends Component {
|
||||
<AppBar title="App Publisher"
|
||||
iconElementRight={
|
||||
<div>
|
||||
<IconButton>
|
||||
<Notifications/>
|
||||
<Badge
|
||||
badgeContent={this.state.notifications}
|
||||
secondary={true}
|
||||
badgeStyle={{top: 12, right: 12}}
|
||||
>
|
||||
<IconButton tooltip="Notifications">
|
||||
<NotificationsIcon/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
<IconButton onClick={() => {
|
||||
console.log("Clicked")
|
||||
}}>
|
||||
@ -58,12 +108,41 @@ class BaseLayout extends Component {
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: 64}} open={true}>
|
||||
<Menu>
|
||||
<MenuItem onClick={this.handleApplicationClick.bind(this)}>Applications</MenuItem>
|
||||
<MenuItem>Platforms</MenuItem>
|
||||
<MenuItem>Reviews</MenuItem>
|
||||
</Menu>
|
||||
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
|
||||
<List>
|
||||
<ListItem primaryText="Overview"
|
||||
onClick={this.handleOverviewClick.bind(this)}
|
||||
leftIcon={<Dashboard/>}/>
|
||||
<ListItem primaryText="Applications"
|
||||
leftIcon={<Apps/>}
|
||||
initiallyOpen={false}
|
||||
primaryTogglesNestedList={true}
|
||||
onClick={this.handleApplicationClick.bind(this)}
|
||||
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/>}
|
||||
/>]}
|
||||
/>
|
||||
<ListItem primaryText="Reviews"
|
||||
onClick={this.handleReviewClick.bind(this)}
|
||||
leftIcon={<Feedback/>}/>
|
||||
</List>
|
||||
</Drawer>
|
||||
</div>
|
||||
<div style=
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. 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, {Component} from 'react';
|
||||
|
||||
class PublisherOverview extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
console.log("In Crate")
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
Overview
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PublisherOverview;
|
||||
@ -17,26 +17,39 @@
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import {Card, CardTitle, CardActions, CardMedia} from 'material-ui/Card';
|
||||
import {Redirect, Switch} from 'react-router-dom';
|
||||
import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
|
||||
import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import qs from 'qs';
|
||||
|
||||
//todo: remove the {TextValidator, ValidatorForm} and implement it manually.
|
||||
|
||||
class Login extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
isLoggedIn: true,
|
||||
referrer: "/",
|
||||
userName: "",
|
||||
password: "",
|
||||
rememberMe: true
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let queryString = this.props.location.search;
|
||||
console.log(queryString);
|
||||
queryString = queryString.replace(/^\?/, '');
|
||||
/* With QS version up we can directly use {ignoreQueryPrefix: true} option */
|
||||
let params = qs.parse(queryString);
|
||||
if (params.referrer) {
|
||||
this.setState({referrer: params.referrer});
|
||||
}
|
||||
}
|
||||
|
||||
handleLogin(event) {
|
||||
console.log(this.state);
|
||||
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -65,6 +78,8 @@ class Login extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
if (!this.state.isLoggedIn) {
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -73,9 +88,6 @@ class Login extends Component {
|
||||
<Card>
|
||||
<CardTitle title="WSO2 IoT App Publisher"/>
|
||||
|
||||
<CardMedia>
|
||||
</CardMedia>
|
||||
|
||||
<CardActions>
|
||||
<ValidatorForm
|
||||
ref="form"
|
||||
@ -113,8 +125,15 @@ class Login extends Component {
|
||||
</CardActions>
|
||||
</Card>
|
||||
</div>);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Switch>
|
||||
<Redirect to={this.state.referrer}/>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default Login;
|
||||
@ -20,9 +20,10 @@ import Login from './User/Login/Login'
|
||||
import BaseLayout from './Base/BaseLayout'
|
||||
import Create from './Application/Create'
|
||||
import NotFound from './Error/NotFound'
|
||||
import PublisherOverview from './Overview/PublisherOverview'
|
||||
|
||||
/**
|
||||
* Contains all UI components related to Application, Login and Platform
|
||||
*/
|
||||
|
||||
export {Login, BaseLayout, Create, NotFound};
|
||||
export {Login, BaseLayout, Create, NotFound, PublisherOverview};
|
||||
Loading…
Reference in New Issue
Block a user