mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Api integration: Application Create steps.
This commit is contained in:
Menaka Jayawardena
parent
4cdb1fc4c9
commit
7fa3c886fb
@ -10,18 +10,18 @@
|
||||
"license": "Apache License 2.0",
|
||||
"dependencies": {
|
||||
"axios": "^0.16.2",
|
||||
"bootstrap": "^4.0.0-alpha.6",
|
||||
"bootstrap": "^4.0.0-beta",
|
||||
"flux": "^3.1.3",
|
||||
"history": "^4.7.2",
|
||||
"latest-version": "^3.1.0",
|
||||
"material-ui": "^0.19.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"qs": "^6.5.0",
|
||||
"react": "^15.6.1",
|
||||
"react-addons-css-transition-group": "^15.6.0",
|
||||
"react-addons-transition-group": "^15.6.0",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-dropzone": "^4.1.2",
|
||||
"material-ui": "^0.19.3",
|
||||
"prop-types": "^15.6.0",
|
||||
"qs": "^6.5.1",
|
||||
"react": "^15.6.2",
|
||||
"react-addons-css-transition-group": "^15.6.2",
|
||||
"react-addons-transition-group": "^15.6.2",
|
||||
"react-dom": "^15.6.2",
|
||||
"react-dropzone": "^4.1.3",
|
||||
"react-images-uploader": "^1.1.0",
|
||||
"react-material-ui-form-validator": "^0.5.1",
|
||||
"react-modal": "^2.3.2",
|
||||
@ -43,8 +43,8 @@
|
||||
"css-loader": "^0.28.7",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.4",
|
||||
"mocha": "^3.4.1",
|
||||
"mock-local-storage": "^1.0.2",
|
||||
"mocha": "^3.5.3",
|
||||
"mock-local-storage": "^1.0.5",
|
||||
"node-sass": "^4.5.3",
|
||||
"react-intl": "^2.4.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
|
||||
@ -39,13 +39,16 @@ body {
|
||||
}
|
||||
|
||||
#login-container {
|
||||
width: 50%;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
#login-card {
|
||||
width: 20%;
|
||||
height: 50%;
|
||||
margin: 10% auto;
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
background-color: #BaBaBa;
|
||||
background-color: #ffffff;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
/* Base layout container */
|
||||
@ -130,7 +133,7 @@ body {
|
||||
float: right;
|
||||
top: 75px;
|
||||
left: 150px;
|
||||
margin-right: 16px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
#search {
|
||||
@ -148,14 +151,13 @@ body {
|
||||
/* Application Add button */
|
||||
#add-btn-container {
|
||||
position: absolute;
|
||||
left: 12%;
|
||||
left: 11%;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
#app-main-content {
|
||||
height: 100%;
|
||||
position: inherit;
|
||||
top: 125px;
|
||||
margin-top: 140px;
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
/* Holds the app publisher pages. */
|
||||
@ -163,8 +165,8 @@ body {
|
||||
height: auto;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
padding: 10px 10px 10px 10px;
|
||||
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.stepper-header {
|
||||
@ -183,10 +185,17 @@ body {
|
||||
}
|
||||
|
||||
#application-list {
|
||||
margin-top: 20px;
|
||||
transition: margin-right .5s;
|
||||
}
|
||||
|
||||
.app-list-table-header {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#app-visibility-default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-image-screenshot {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
@ -207,7 +216,6 @@ body {
|
||||
height: 150px;
|
||||
border-radius: 5%;
|
||||
position: relative;
|
||||
background-color: rgba(157, 159, 157, 0.53);
|
||||
border: dashed #888888 2px;
|
||||
}
|
||||
|
||||
@ -223,7 +231,6 @@ body {
|
||||
margin: 0 5px 0 5px;
|
||||
border-radius: 10%;
|
||||
position: relative;
|
||||
background-color: rgba(157, 159, 157, 0.53);
|
||||
border: dashed #888888 2px;
|
||||
}
|
||||
|
||||
@ -238,7 +245,6 @@ body {
|
||||
height: 150px;
|
||||
border-radius: 10%;
|
||||
position: relative;
|
||||
background-color: rgba(157, 159, 157, 0.53);
|
||||
border: dashed #888888 2px;
|
||||
}
|
||||
|
||||
@ -249,6 +255,7 @@ body {
|
||||
}
|
||||
|
||||
#screenshot-container {
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
height: 200px;
|
||||
@ -266,12 +273,13 @@ body {
|
||||
|
||||
#secondary-button {
|
||||
float: right;
|
||||
color: #979797;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#secondary-button:hover {
|
||||
background-color: #e9e9e9;
|
||||
background-color: #d8d8d8;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -327,12 +335,12 @@ body {
|
||||
}
|
||||
|
||||
/* Application View */
|
||||
|
||||
#application-view-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#application-view-row {
|
||||
margin: 10px 10px 20px 20px;
|
||||
margin: 10px 10px 0 20px;
|
||||
}
|
||||
|
||||
#app-icon {
|
||||
@ -366,14 +374,14 @@ body {
|
||||
}
|
||||
|
||||
/* Application Edit Base Layout */
|
||||
#application-edit-header {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
border-bottom: solid 1px #d8d8d8;
|
||||
}
|
||||
|
||||
#application-edit-header {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 25px;
|
||||
}
|
||||
.application-header-text {
|
||||
margin: 10px 0px 0px 10px;
|
||||
}
|
||||
@ -399,13 +407,14 @@ body {
|
||||
}
|
||||
|
||||
/*Tab styling*/
|
||||
|
||||
div.tab {
|
||||
float: left;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Style the tab buttons */
|
||||
|
||||
div.tab button {
|
||||
display: block;
|
||||
background-color: inherit;
|
||||
@ -418,24 +427,23 @@ div.tab button {
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
|
||||
div.tab button:hover {
|
||||
background-color: #ddd6d7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Create an active/current "tab button" class */
|
||||
|
||||
div.tab button.active {
|
||||
background-color: #1b3bcc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#application-edit-main-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
#application-edit-outer-content {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
@ -453,13 +461,13 @@ div.tab button.active {
|
||||
|
||||
.back-to-app {
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.back-to-app i {
|
||||
padding: 10px 10px 10px 10px;
|
||||
padding: 12px 10px 10px 12px;
|
||||
}
|
||||
|
||||
.back-to-app:hover {
|
||||
@ -469,11 +477,11 @@ div.tab button.active {
|
||||
}
|
||||
|
||||
/* Create Release and Release management */
|
||||
|
||||
.release-header {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.release-create {
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
@ -523,12 +531,39 @@ div.tab button.active {
|
||||
}
|
||||
|
||||
/* Application Edit General Info */
|
||||
|
||||
.app-edit-general-info {
|
||||
margin-top: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.save-info {
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Platform Specific Styles. */
|
||||
#platform-listing {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.create-platform {
|
||||
padding-left: 90%;
|
||||
}
|
||||
|
||||
#platform-list {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
#platform-content {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
margin: 10px;
|
||||
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
#platform-content:hover {
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ class BaseLayout extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid id="container">
|
||||
<div>
|
||||
<div id="header-content">
|
||||
<div id="header">
|
||||
<span id="header-text">
|
||||
@ -104,10 +104,12 @@ class BaseLayout extends Component {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Container fluid>
|
||||
<div id="app-main-content" style={this.state.style}>
|
||||
<Row>
|
||||
<div className="platform-link-placeholder">
|
||||
<Button id="secondary-button" onClick={this.onClickPlatforms}><i className="fw fw-settings"></i> Platforms</Button>
|
||||
<Button id="secondary-button" onClick={this.onClickPlatforms}>
|
||||
<i className="fw fw-settings"></i> Platforms</Button>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
@ -120,8 +122,9 @@ class BaseLayout extends Component {
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
|
||||
</Container>
|
||||
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,8 @@ import {Button, Col, Row, Table} from 'reactstrap';
|
||||
import Drawer from '../UIComponents/Drawer/Drawer';
|
||||
import ApplicationView from './View/ApplicationView';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import ApplicationMgtApi from "../../api/applicationMgtApi";
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
@ -36,10 +38,10 @@ class ApplicationListing extends Component {
|
||||
super();
|
||||
this.searchApplications = this.searchApplications.bind(this);
|
||||
this.onRowClick = this.onRowClick.bind(this);
|
||||
this.setData = this.setData.bind(this);
|
||||
this.sortData = this.sortData.bind(this);
|
||||
this.compare = this.compare.bind(this);
|
||||
this.handleButtonClick = this.handleButtonClick.bind(this);
|
||||
this.onAppEditClick = this.onAppEditClick.bind(this);
|
||||
this.getSelectedApplication = this.getSelectedApplication.bind(this);
|
||||
this.state = {
|
||||
searchedApplications: [],
|
||||
applications: [],
|
||||
@ -57,7 +59,6 @@ class ApplicationListing extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
applications = [
|
||||
{
|
||||
id: "3242342ffww3423",
|
||||
@ -84,35 +85,57 @@ class ApplicationListing extends Component {
|
||||
},
|
||||
];
|
||||
|
||||
headers = [
|
||||
{
|
||||
data_id: "image",
|
||||
data_type: "image",
|
||||
sortable: false,
|
||||
label: ""
|
||||
},
|
||||
{
|
||||
data_id: "applicationName",
|
||||
data_type: "string",
|
||||
sortable: true,
|
||||
label: "Application Name",
|
||||
sort: this.sortData
|
||||
},
|
||||
{
|
||||
data_id: "platform",
|
||||
data_type: "image_array",
|
||||
sortable: false,
|
||||
label: "Platform"
|
||||
},
|
||||
{
|
||||
data_id: "category",
|
||||
data_type: "string",
|
||||
sortable: false,
|
||||
label: "Category"
|
||||
},
|
||||
{
|
||||
data_id: "status",
|
||||
data_type: "string",
|
||||
sortable: false,
|
||||
label: "Status"
|
||||
},
|
||||
{
|
||||
data_id: "edit",
|
||||
data_type: "button",
|
||||
sortable: false,
|
||||
label: ""
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
// let getApps = ApplicationMgtApi.getApplications();
|
||||
// getApps.then(response => {
|
||||
// let apps = this.setData(response.data.applications);
|
||||
// console.log(apps); //TODO: Remove this.
|
||||
// this.setState({searchedApplications: apps});
|
||||
// // console.log(this.setState({data: response.data}), console.log(this.state));
|
||||
// }).catch(err => {
|
||||
// AuthHandler.unauthorizedErrorHandler(err);
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract application from application list and update the state.
|
||||
* */
|
||||
setData(applications) {
|
||||
let apps = [];
|
||||
for (let app in applications) {
|
||||
let application = {};
|
||||
application.id = applications[app].uuid;
|
||||
application.applicationName = applications[app].name;
|
||||
application.platform = applications[app].platform.name;
|
||||
application.category = applications[app].category.id;
|
||||
application.status = applications[app].currentLifecycle.lifecycleState.name;
|
||||
apps.push(application);
|
||||
}
|
||||
|
||||
this.setState({searchedApplications: apps});
|
||||
let getApps = ApplicationMgtApi.getApplications();
|
||||
getApps.then(response => {
|
||||
console.log(response.data.applications);
|
||||
this.setState({searchedApplications: response.data.applications});
|
||||
// console.log(this.setState({data: response.data}), console.log(this.state));
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -154,34 +177,22 @@ class ApplicationListing extends Component {
|
||||
return 0;
|
||||
}
|
||||
|
||||
onRowClick() {
|
||||
onRowClick(uuid) {
|
||||
let selectedApp = this.getSelectedApplication(uuid);
|
||||
let style = {
|
||||
width: '500px',
|
||||
marginLeft: '500px'
|
||||
width: '550px',
|
||||
marginLeft: '550px'
|
||||
};
|
||||
|
||||
let appListStyle = {
|
||||
marginRight: '500px',
|
||||
marginRight: '550px',
|
||||
};
|
||||
|
||||
this.setState({drawer: style, appListStyle: appListStyle});
|
||||
this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]});
|
||||
}
|
||||
|
||||
handleButtonClick() {
|
||||
console.log("Application Listing");
|
||||
this.props.history.push("apps/edit/fdsfdsf343");
|
||||
}
|
||||
|
||||
remove(imageId) {
|
||||
let tmp = this.state.image;
|
||||
|
||||
console.log(imageId);
|
||||
|
||||
let rem = tmp.filter((image) => {
|
||||
return image.id !== imageId
|
||||
|
||||
});
|
||||
this.setState({image: rem});
|
||||
onAppEditClick(uuid) {
|
||||
this.props.history.push("apps/edit/" + uuid);
|
||||
}
|
||||
|
||||
closeDrawer() {
|
||||
@ -196,6 +207,12 @@ class ApplicationListing extends Component {
|
||||
this.setState({drawer: style, appListStyle: appListStyle});
|
||||
}
|
||||
|
||||
getSelectedApplication(uuid) {
|
||||
return this.state.searchedApplications.filter(application => {
|
||||
return application.uuid === uuid;
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
@ -213,7 +230,7 @@ class ApplicationListing extends Component {
|
||||
<Col>
|
||||
<Table striped hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<tr className="app-list-table-header">
|
||||
<th></th>
|
||||
{/* TODO: Remove console.log and add sort method. */}
|
||||
<th onClick={() => {
|
||||
@ -228,25 +245,24 @@ class ApplicationListing extends Component {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.applications.map(
|
||||
{this.state.searchedApplications.map(
|
||||
(application) => {
|
||||
return (
|
||||
<tr key={application.id} onClick={this.onRowClick}>
|
||||
<td>
|
||||
<tr key={application.uuid} onClick={() => this.onRowClick(application.uuid)}>
|
||||
<td data={application.uuid}>
|
||||
{/* TODO: Move this styles to css. */}
|
||||
<img
|
||||
src={application.icon}
|
||||
height='50px'
|
||||
width='50px'
|
||||
style={{border: 'solid 1px black', borderRadius: "100%"}}
|
||||
/>
|
||||
</td>
|
||||
<td>{application.applicationName}</td>
|
||||
<td>{application.category}</td>
|
||||
<td>{application.platform}</td>
|
||||
<td>{application.status}</td>
|
||||
<td>{application.name}</td>
|
||||
<td>{application.category.name}</td>
|
||||
<td>{application.platform.name}</td>
|
||||
<td>{application.currentLifecycle.lifecycleState.name}</td>
|
||||
<td>
|
||||
<Button id="secondary-button" onClick={this.handleButtonClick}>
|
||||
<Button id="secondary-button" onClick={() => this.onAppEditClick(application.uuid)}>
|
||||
<i className="fw fw-edit"></i>
|
||||
</Button>
|
||||
</td>
|
||||
@ -259,7 +275,7 @@ class ApplicationListing extends Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
|
||||
<ApplicationView/>
|
||||
<ApplicationView application={this.state.application}/>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -21,7 +21,7 @@ import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
|
||||
import ApplicationMgtApi from '../../../api/applicationMgtApi';
|
||||
import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from 'reactstrap';
|
||||
import {Col, Modal, ModalBody, ModalHeader, Row} from 'reactstrap';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
/**
|
||||
@ -49,7 +49,11 @@ class ApplicationCreate extends Component {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
stepData: [],
|
||||
isDialogOpen: false
|
||||
isDialogOpen: false,
|
||||
generalInfo: {},
|
||||
platform: {},
|
||||
screenshots: {},
|
||||
release: {}
|
||||
};
|
||||
}
|
||||
|
||||
@ -61,10 +65,11 @@ class ApplicationCreate extends Component {
|
||||
this.setState({open: this.props.open});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Resets the form and closes the modal.
|
||||
* */
|
||||
onClose() {
|
||||
this.setState({stepIndex: 0}, this.props.close());
|
||||
|
||||
this.setState({stepIndex: 0, generalInfo: {}, platform: {}, screenshots: {}, release: {}}, this.props.close());
|
||||
}
|
||||
|
||||
/**
|
||||
@ -111,7 +116,6 @@ class ApplicationCreate extends Component {
|
||||
console.log(this.state.stepIndex);
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.removeStepData();
|
||||
this.setState({stepIndex: stepIndex - 1, finished: false});
|
||||
}
|
||||
};
|
||||
@ -123,10 +127,24 @@ class ApplicationCreate extends Component {
|
||||
* */
|
||||
setStepData(step, data) {
|
||||
console.log(step, data, this.state.stepData); //TODO: Remove this
|
||||
let tmpStepData = this.state.stepData;
|
||||
tmpStepData.push({step: step, data: data});
|
||||
|
||||
this.setState({stepData: tmpStepData}, this.onNextClick())
|
||||
switch (step) {
|
||||
case "generalInfo": {
|
||||
this.setState({generalInfo: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "platform": {
|
||||
this.setState({platform: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "screenshots": {
|
||||
this.setState({screenshots: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "release": {
|
||||
this.setState({release: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -135,9 +153,10 @@ class ApplicationCreate extends Component {
|
||||
removeStepData() {
|
||||
let tempData = this.state.stepData;
|
||||
tempData.pop();
|
||||
this.setState({stepData: tempData});
|
||||
this.setState({stepData: tempData, stepIndex: 0});
|
||||
};
|
||||
|
||||
/* ----------------- Deprecated ----------------- */
|
||||
/**
|
||||
* Handles the Yes button in app creation cancellation dialog.
|
||||
* Clears all the form data and reset the wizard.
|
||||
@ -154,6 +173,8 @@ class ApplicationCreate extends Component {
|
||||
this.setState({isDialogOpen: false});
|
||||
};
|
||||
|
||||
/* ---------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Defines all the Steps in the stepper. (Wizard)
|
||||
*
|
||||
@ -168,35 +189,36 @@ class ApplicationCreate extends Component {
|
||||
case 0:
|
||||
return (
|
||||
<Step1
|
||||
handleNext={this.onNextClick}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
defaultData={this.state.generalInfo}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<Step2
|
||||
handleNext={this.onNextClick}
|
||||
defaultData={this.state.platform}
|
||||
handlePrev={this.onPrevClick}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Step3
|
||||
handleFinish={this.onNextClick}
|
||||
defaultData={this.state.screenshots}
|
||||
handlePrev={this.onPrevClick}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 3: {
|
||||
return (
|
||||
<Step4
|
||||
handleNext={this.onNextClick}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
defaultData={this.state.release}
|
||||
handlePrev={this.onPrevClick}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -252,22 +274,6 @@ class ApplicationCreate extends Component {
|
||||
</Col>
|
||||
</Row>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{stepIndex === 0 ? <div/> :
|
||||
<Button color="primary" onClick={this.onPrevClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>}
|
||||
<Button color="secondary" onClick={this.onClose}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
{finished ?
|
||||
<Button color="primary" onClick={this.onSubmit}>
|
||||
<FormattedMessage id="Finish" defaultMessage="Finish" />
|
||||
</Button> :
|
||||
<Button color="primary" onClick={this.onNextClick}>
|
||||
<FormattedMessage id="Continue" defaultMessage="Continue"/>
|
||||
</Button>}
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>);
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import {Badge, FormGroup, Input, Label} from 'reactstrap';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import {Badge, Button, Form, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
|
||||
|
||||
/**
|
||||
* The Second step of application create wizard.
|
||||
@ -42,22 +43,32 @@ import {FormattedMessage} from 'react-intl';
|
||||
class Step1 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onTextFieldChange = this.onTextFieldChange.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onVisibilityChange = this.onVisibilityChange.bind(this);
|
||||
this.onVisibilityItemSelect = this.onVisibilityItemSelect.bind(this);
|
||||
this.handleRequestDelete = this.handleRequestDelete.bind(this);
|
||||
this.state = {
|
||||
tags: [],
|
||||
icon: [],
|
||||
title: "",
|
||||
name: "",
|
||||
errors: {},
|
||||
banner: [],
|
||||
defValue: "",
|
||||
category: 0,
|
||||
visibility: 0,
|
||||
description: "",
|
||||
screenshots: [],
|
||||
identifier: "",
|
||||
shortDescription: ""
|
||||
visibility: "",
|
||||
description: ""
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const defaultVals = this.props.defaultData;
|
||||
|
||||
if(defaultVals) {
|
||||
this.setState(defaultVals);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
@ -85,48 +96,101 @@ class Step1 extends Component {
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
handleRequestDelete(event) {
|
||||
this.chipData = this.state.tags;
|
||||
console.log(event.target);
|
||||
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
|
||||
this.chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: this.chipData});
|
||||
handleRequestDelete(key) {
|
||||
let chipData = this.state.tags;
|
||||
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
|
||||
chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: chipData});
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an object with the current step data and persist in the parent.
|
||||
* */
|
||||
setStepData() {
|
||||
let stepData = {};
|
||||
this.props.setData("step1", {step: stepData});
|
||||
const {name, description, tags, visibility} = this.state;
|
||||
let stepData = {
|
||||
name: name,
|
||||
description: description,
|
||||
tags: tags,
|
||||
visibility: visibility
|
||||
};
|
||||
this.props.setStepData("generalInfo", stepData);
|
||||
};
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set text field values to state.
|
||||
* */
|
||||
onTextFieldChange(event, value) {
|
||||
let field = event.target.id;
|
||||
onTextFieldChange(event) {
|
||||
let field = event.target.name;
|
||||
console.log(field, event.target.value);
|
||||
switch (field) {
|
||||
case "name": {
|
||||
this.setState({name: value});
|
||||
case "appName": {
|
||||
this.setState({name: event.target.value});
|
||||
break;
|
||||
}
|
||||
case "shortDescription": {
|
||||
this.setState({shortDescription: value});
|
||||
break;
|
||||
}
|
||||
case "description": {
|
||||
this.setState({description: value});
|
||||
break;
|
||||
}
|
||||
case "identifier": {
|
||||
this.setState({identifier: value});
|
||||
case "appDescription": {
|
||||
this.setState({description: event.target.value});
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onVisibilityChange(event) {
|
||||
console.log(event.target.value);
|
||||
this.setState({visibility: event.target.value});
|
||||
}
|
||||
|
||||
onVisibilityItemSelect(event) {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const {visibility} = this.state;
|
||||
|
||||
let visibilityItem = () => {
|
||||
switch (visibility) {
|
||||
case("public"): {
|
||||
return <div/>
|
||||
}
|
||||
case("roles"): {
|
||||
return <FormGroup>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility-item"
|
||||
id="app-visibility-item"
|
||||
onChange={this.onVisibilityItemSelect}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the Roles.</option>
|
||||
<option><Input type="checkbox" />Role1</option>
|
||||
<option>Role2</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
}
|
||||
case ("groups"): {
|
||||
return <FormGroup>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility-item"
|
||||
id="app-visibility-item"
|
||||
onChange={this.onVisibilityItemSelect}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the Groups.</option>
|
||||
<option>Group1</option>
|
||||
<option>Group2</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
}
|
||||
default: {
|
||||
return <div/>
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="createStep2Content">
|
||||
<div>
|
||||
@ -135,13 +199,27 @@ class Step1 extends Component {
|
||||
<Label for="app-title">
|
||||
<FormattedMessage id='Title' defaultMessage='Title'/>*
|
||||
</Label>
|
||||
<Input required type="text" name="appName" id="app-title"/>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
name="appName"
|
||||
id="app-title"
|
||||
value={this.state.name}
|
||||
onChange={this.onTextFieldChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-description">
|
||||
<FormattedMessage id='Description' defaultMessage='Description'/>*
|
||||
</Label>
|
||||
<Input required type="textarea" name="appDescription" id="app-description"/>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
name="appDescription"
|
||||
id="app-description"
|
||||
value={this.state.description}
|
||||
onChange={this.onTextFieldChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-category">
|
||||
@ -155,12 +233,25 @@ class Step1 extends Component {
|
||||
<Label for="app-visibility">
|
||||
<FormattedMessage id='Visibility' defaultMessage='Visibility'/>
|
||||
</Label>
|
||||
<Input type="select" name="visibility" id="app-visibility">
|
||||
<option><FormattedMessage id='Devices' defaultMessage='Devices'/></option>
|
||||
<option><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
|
||||
<option><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility"
|
||||
id="app-visibility"
|
||||
onChange={this.onVisibilityChange}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the App Visibility
|
||||
Option.
|
||||
</option>
|
||||
<option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/></option>
|
||||
<option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
|
||||
<option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
{visibilityItem()}
|
||||
</Form>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
|
||||
<Input
|
||||
@ -176,9 +267,10 @@ class Step1 extends Component {
|
||||
{this.state.tags.map(tag => {
|
||||
return (
|
||||
<Badge
|
||||
style={{margin: '0 2px 0 2px'}}
|
||||
value={tag.value}
|
||||
onClick={this.handleRequestDelete.bind(this)}
|
||||
style={{margin: '0 2px 0 2px', backgroundColor: 'blue', height: '20px'}}
|
||||
value={tag.key}
|
||||
key={tag.key}
|
||||
onClick={() => this.handleRequestDelete(tag.key)}
|
||||
>
|
||||
{tag.value}
|
||||
</Badge>
|
||||
@ -189,6 +281,10 @@ class Step1 extends Component {
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<ModalFooter>
|
||||
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
|
||||
<Button color="primary" onClick={this.setStepData}>Continue</Button>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import AuthHandler from "../../../../api/authHandler";
|
||||
import PlatformMgtApi from "../../../../api/platformMgtApi";
|
||||
import {FormGroup, Input, Label} from 'reactstrap';
|
||||
import {Button, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
/**
|
||||
@ -41,24 +41,28 @@ class Step2 extends Component {
|
||||
super();
|
||||
this.setPlatforms = this.setPlatforms.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.platforms = [];
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
store: 1,
|
||||
platformSelectedIndex: 0,
|
||||
platform: "",
|
||||
platforms: [],
|
||||
stepData: [],
|
||||
title: "",
|
||||
titleError: ""
|
||||
platforms: []
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const {defaultData} = this.props;
|
||||
|
||||
if (defaultData) {
|
||||
this.setState(defaultData);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//Get the list of available platforms and set to the state.
|
||||
PlatformMgtApi.getPlatforms().then(response => {
|
||||
console.log(response);
|
||||
this.setPlatforms(response.data);
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
@ -83,18 +87,26 @@ class Step2 extends Component {
|
||||
* Persist the current form data to the state.
|
||||
* */
|
||||
setStepData() {
|
||||
let step = {
|
||||
store: this.state.store,
|
||||
platform: this.state.platforms[this.state.platformSelectedIndex]
|
||||
const {store, platform} = this.state;
|
||||
let data = {
|
||||
store: store,
|
||||
platform: platform[0]
|
||||
};
|
||||
this.props.setData("step2", {step: step});
|
||||
this.props.setStepData("platform", data);
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers when changing the Platform selection.
|
||||
* */
|
||||
onChangePlatform(event) {
|
||||
console.log(event.target.value, this.state.platforms);
|
||||
let id = event.target.value;
|
||||
let selectedPlatform = this.state.platforms.filter((platform) => {
|
||||
return platform.identifier === id;
|
||||
@ -122,16 +134,27 @@ class Step2 extends Component {
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
|
||||
<Input type="select" name="store" onChange={this.onChangePlatform.bind(this)}>
|
||||
<Input
|
||||
required
|
||||
type="select"
|
||||
name="store"
|
||||
onChange={this.onChangePlatform.bind(this)}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the Application Platform</option>
|
||||
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
|
||||
return (
|
||||
<option value={platform.identifier}>
|
||||
<option value={platform.identifier} key={platform.identifier}>
|
||||
{platform.name}
|
||||
</option>
|
||||
)
|
||||
}) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<ModalFooter>
|
||||
<Button color="primary" onClick={this.onBackClick}>Back</Button>
|
||||
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
|
||||
<Button color="primary" onClick={this.setStepData}>Continue</Button>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import React, {Component} from 'react';
|
||||
import {FormGroup, Label} from 'reactstrap';
|
||||
import {Button, FormGroup, Label, ModalFooter} from 'reactstrap';
|
||||
import AppImage from "../../../UIComponents/AppImage/AppImage";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
@ -40,22 +40,23 @@ import {FormattedMessage} from 'react-intl';
|
||||
class Step3 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.state = {
|
||||
tags: [],
|
||||
icon: [],
|
||||
title: "",
|
||||
errors: {},
|
||||
banner: [],
|
||||
defValue: "",
|
||||
category: 0,
|
||||
visibility: 0,
|
||||
description: "",
|
||||
screenshots: [],
|
||||
identifier: "",
|
||||
shortDescription: ""
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const {defaultData} = this.props;
|
||||
|
||||
this.setState(defaultData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
@ -72,15 +73,26 @@ class Step3 extends Component {
|
||||
* Creates an object with the current step data and persist in the parent.
|
||||
* */
|
||||
setStepData() {
|
||||
|
||||
const {icon, banner, screenshots} = this.state;
|
||||
|
||||
let stepData = {
|
||||
icon: this.state.icon,
|
||||
banner: this.state.banner,
|
||||
screenshots: this.state.screenshots
|
||||
icon: icon,
|
||||
banner: banner,
|
||||
screenshots: screenshots
|
||||
};
|
||||
|
||||
this.props.setData("step2", {step: stepData});
|
||||
this.props.setStepData("screenshots", stepData);
|
||||
};
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
/**
|
||||
* Removed user uploaded banner.
|
||||
* */
|
||||
@ -126,7 +138,6 @@ class Step3 extends Component {
|
||||
onDrop={(screenshots, rejected) => {
|
||||
let tmpScreenshots = this.state.screenshots;
|
||||
tmpScreenshots.push(screenshots);
|
||||
console.log(screenshots); //TODO: Remove this
|
||||
this.setState({
|
||||
screenshots: tmpScreenshots
|
||||
});
|
||||
@ -191,6 +202,11 @@ class Step3 extends Component {
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<ModalFooter>
|
||||
<Button color="primary" onClick={this.onBackClick}>Back</Button>
|
||||
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
|
||||
<Button color="primary" onClick={this.setStepData}>Continue</Button>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import {Collapse, FormGroup, Input, Label, FormText} from 'reactstrap';
|
||||
import {Button, Collapse, FormGroup, FormText, Input, Label, ModalFooter} from 'reactstrap';
|
||||
import Switch from '../../../UIComponents/Switch/Switch'
|
||||
|
||||
/**
|
||||
@ -47,8 +47,8 @@ class Step4 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.handlePrev = this.handlePrev.bind(this);
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.handleFinish = this.handleFinish.bind(this);
|
||||
this.state = {
|
||||
showForm: false,
|
||||
@ -66,13 +66,18 @@ class Step4 extends Component {
|
||||
this.props.handleFinish();
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes Prev button click.
|
||||
* */
|
||||
handlePrev() {
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles release application selection.
|
||||
* */
|
||||
@ -140,6 +145,11 @@ class Step4 extends Component {
|
||||
</FormGroup>
|
||||
</Collapse>
|
||||
</div>
|
||||
<ModalFooter>
|
||||
<Button color="primary" onClick={this.onBackClick}>Back</Button>
|
||||
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
|
||||
<Button color="primary" onClick={this.onSubmit}>Finish</Button>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -89,6 +89,7 @@ class ApplicationEdit extends Component {
|
||||
<FormattedMessage id="Application.Name" defaultMessage="Application Name"/>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr/>
|
||||
<Row id="application-edit-main-container">
|
||||
<Col xs="3">
|
||||
<div className="tab">
|
||||
|
||||
@ -47,24 +47,25 @@ class ApplicationView extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const platform = this.state.application;
|
||||
console.log(platform);
|
||||
|
||||
if (this.state.application.length === 0) {
|
||||
return <div/>
|
||||
} else {
|
||||
const app = this.state.application;
|
||||
console.log(app);
|
||||
return (
|
||||
<div id="application-view-content">
|
||||
<div id="application-view-row">
|
||||
<Row>
|
||||
<Col>
|
||||
<div id="app-icon">
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<Row>
|
||||
<span><strong>Facebook</strong></span>
|
||||
<span><strong>{app.name}</strong></span>
|
||||
</Row>
|
||||
<Row>
|
||||
<span className="app-updated-date">Last updated on 2017-09-23</span>
|
||||
<span className="app-updated-date">Last updated on {app.modifiedAt}</span>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
@ -83,7 +84,7 @@ class ApplicationView extends Component {
|
||||
<i className="fw fw-star"></i>
|
||||
</Col>
|
||||
<Col>
|
||||
<a href="#">View in Store</a>
|
||||
<p><a href="#">View in Store</a></p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
@ -96,7 +97,7 @@ class ApplicationView extends Component {
|
||||
</strong></span>
|
||||
</Col>
|
||||
<Col>
|
||||
<p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
|
||||
<p>{app.description}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
@ -131,7 +132,10 @@ class ApplicationView extends Component {
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,21 +18,28 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
/**
|
||||
* Platform view component.
|
||||
* Platform component.
|
||||
* In Platform listing, this component will be displayed as cards.
|
||||
* */
|
||||
class PlatformView extends Component {
|
||||
class Platform extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {platform} = this.props;
|
||||
console.log(platform);
|
||||
return (
|
||||
<div>
|
||||
Platform View
|
||||
<div id="platform-content">
|
||||
<ul>
|
||||
<li>Name: {platform.name}</li>
|
||||
<li>Description: {platform.description}</li>
|
||||
<li>Status: {platform.enabled}</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlatformView;
|
||||
export default Platform;
|
||||
@ -15,416 +15,58 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import Chip from 'material-ui/Chip';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import React, {Component} from 'react';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import PlatformMgtApi from '../../api/platformMgtApi';
|
||||
import Clear from 'material-ui/svg-icons/content/clear';
|
||||
import {GridList, GridTile} from 'material-ui/GridList';
|
||||
import Close from 'material-ui/svg-icons/navigation/close';
|
||||
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||
import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
|
||||
import {Button, FormGroup, Label, Modal, ModalBody, ModalFooter, ModalHeader, Input} from "reactstrap";
|
||||
|
||||
/**
|
||||
* Platform Create component.
|
||||
* Contains following components:
|
||||
* * Platform Name
|
||||
* * Platform Description
|
||||
* * Platform Icon
|
||||
* * Whether the platform needs an app to be installed.
|
||||
* * Whether the platform is enabled by default.
|
||||
* * Whether the platform is shared with tenants.
|
||||
* Platform view component.
|
||||
* */
|
||||
class PlatformCreate extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onCreatePlatform = this.onCreatePlatform.bind(this);
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.addProperty = this.addProperty.bind(this);
|
||||
this.addTags = this.addTags.bind(this);
|
||||
this.clearForm = this.clearForm.bind(this);
|
||||
this.onPropertySelect = this.onPropertySelect.bind(this);
|
||||
this.handleTagChange = this.handleTagChange.bind(this);
|
||||
this.removeIcon = this.removeIcon.bind(this);
|
||||
this.onTextChange = this.onTextChange.bind(this);
|
||||
this.renderChip = this.renderChip.bind(this);
|
||||
this.removeProperty = this.removeProperty.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.state = {
|
||||
tags: [],
|
||||
defValue: "",
|
||||
enabled: true,
|
||||
allTenants: false,
|
||||
files: [],
|
||||
platformProperties: [],
|
||||
selectedProperty: 0,
|
||||
name: "",
|
||||
description: "",
|
||||
property: "",
|
||||
icon: [],
|
||||
identifier: "",
|
||||
propertyTypes: [
|
||||
{key: 0, value: 'String'},
|
||||
{key: 1, value: 'Number'},
|
||||
{key: 2, value: 'Boolean'},
|
||||
{key: 3, value: 'File'}]
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles toggle button actions.
|
||||
* One method is used for all the toggle buttons and, each toggle is identified by the id.
|
||||
* */
|
||||
handleToggle(event) {
|
||||
switch (event.target.id) {
|
||||
case "enabled" : {
|
||||
let enabled = this.state.enabled;
|
||||
this.setState({enabled: !enabled});
|
||||
break;
|
||||
}
|
||||
case "tenant" : {
|
||||
let allTenants = this.state.allTenants;
|
||||
this.setState({allTenants: !allTenants});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers the onChange action on property type selection.
|
||||
* */
|
||||
onPropertySelect(event, index, value) {
|
||||
console.log(this.state.propertyTypes[value]);
|
||||
this.setState({selectedProperty: value});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
handleTagDelete(key) {
|
||||
this.chipData = this.state.tags;
|
||||
const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
|
||||
this.chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: this.chipData});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""});
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates Chip array from state.tags.
|
||||
* */
|
||||
renderChip(data) {
|
||||
return (
|
||||
<Chip
|
||||
key={data.key}
|
||||
onRequestDelete={() => this.handleTagDelete(data.key)}
|
||||
style={this.styles.chip}
|
||||
>
|
||||
{data.value}
|
||||
</Chip>
|
||||
);
|
||||
|
||||
componentWillReceiveProps(props, nextprops) {
|
||||
this.setState({open: props.open})
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
componentWillMount() {
|
||||
this.setState({open: this.props.open});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the selected property from the property list.
|
||||
* */
|
||||
removeProperty(property) {
|
||||
let properties = this.state.platformProperties;
|
||||
properties.splice(properties.indexOf(property), 1);
|
||||
this.setState({platformProperties: properties});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new platform property.
|
||||
* */
|
||||
addProperty() {
|
||||
let property = this.state.property;
|
||||
let selected = this.state.selectedProperty;
|
||||
|
||||
this.setState({
|
||||
platformProperties:
|
||||
this.state.platformProperties.concat([
|
||||
{
|
||||
key: property,
|
||||
value: this.state.propertyTypes[selected].value
|
||||
}]),
|
||||
property: "",
|
||||
selectedProperty: 0
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers in onChange event of text fields.
|
||||
* Text fields are identified by their ids and the value will be persisted in the component state.
|
||||
* */
|
||||
onTextChange(event, value) {
|
||||
let property = this.state.property;
|
||||
let name = this.state.name;
|
||||
let description = this.state.description;
|
||||
let identifier = this.state.identifier;
|
||||
|
||||
switch (event.target.id) {
|
||||
case "name": {
|
||||
name = value;
|
||||
this.setState({name: name});
|
||||
break;
|
||||
}
|
||||
|
||||
case "description": {
|
||||
description = value;
|
||||
this.setState({description: description});
|
||||
break;
|
||||
}
|
||||
|
||||
case "property": {
|
||||
property = value;
|
||||
this.setState({property: property});
|
||||
break;
|
||||
}
|
||||
case "identifier": {
|
||||
identifier = value;
|
||||
this.setState({identifier: identifier});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Create platform object and call the create platform api.
|
||||
* */
|
||||
onCreatePlatform(event) {
|
||||
//Call the platform create api.
|
||||
event.preventDefault();
|
||||
let platform = {};
|
||||
platform.identifier = this.state.identifier;
|
||||
platform.name = this.state.name;
|
||||
platform.description = this.state.description;
|
||||
platform.tags = this.state.tags;
|
||||
platform.properties = this.state.platformProperties;
|
||||
platform.icon = this.state.icon;
|
||||
platform.enabled = this.state.enabled;
|
||||
platform.allTenants = this.state.allTenants;
|
||||
platform.defaultTenantMapping = true;
|
||||
|
||||
PlatformMgtApi.createPlatform(platform);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the uploaded icon.
|
||||
* */
|
||||
removeIcon(event) {
|
||||
event.preventDefault();
|
||||
this.setState({icon: []});
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears the user entered values in the form.
|
||||
* */
|
||||
clearForm(event) {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
enabled: true,
|
||||
allTenants: false,
|
||||
files: [],
|
||||
platformProperties: [],
|
||||
selectedProperty: 0,
|
||||
name: "",
|
||||
description: "",
|
||||
property: "",
|
||||
})
|
||||
onCancelClick() {
|
||||
this.setState({open: false})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
platformProperties,
|
||||
allTenants,
|
||||
enabled,
|
||||
selectedProperty,
|
||||
propertyTypes,
|
||||
name,
|
||||
tags,
|
||||
defValue,
|
||||
description,
|
||||
identifier,
|
||||
property
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className="middle createplatformmiddle">
|
||||
<Card>
|
||||
<CardTitle title="Create Platform"/>
|
||||
<CardActions>
|
||||
<div className="createplatformcardaction">
|
||||
<form>
|
||||
<TextField
|
||||
hintText="Unique Identifier for Platform."
|
||||
id="identifier"
|
||||
floatingLabelText="Identifier*"
|
||||
floatingLabelFixed={true}
|
||||
value={identifier}
|
||||
onChange={this.onTextChange}
|
||||
/>
|
||||
<br/>
|
||||
<TextField
|
||||
hintText="Enter the Platform Name."
|
||||
id="name"
|
||||
floatingLabelText="Name*"
|
||||
floatingLabelFixed={true}
|
||||
value={name}
|
||||
onChange={this.onTextChange}
|
||||
/>
|
||||
<br/>
|
||||
<TextField
|
||||
id="description"
|
||||
hintText="Enter the Platform Description."
|
||||
floatingLabelText="Description*"
|
||||
floatingLabelFixed={true}
|
||||
multiLine={true}
|
||||
rows={2}
|
||||
value={description}
|
||||
onChange={this.onTextChange}
|
||||
/>
|
||||
<br/>
|
||||
<br/>
|
||||
<Toggle
|
||||
id="tenant"
|
||||
label="Shared with all Tenants"
|
||||
labelPosition="right"
|
||||
onToggle={this.handleToggle}
|
||||
toggled={allTenants}
|
||||
/>
|
||||
<br/>
|
||||
<Toggle
|
||||
id="enabled"
|
||||
label="Enabled"
|
||||
labelPosition="right"
|
||||
onToggle={this.handleToggle}
|
||||
toggled={enabled}
|
||||
/>
|
||||
<br/>
|
||||
<TextField
|
||||
id="tags"
|
||||
hintText="Enter Platform tags.."
|
||||
floatingLabelText="Tags*"
|
||||
floatingLabelFixed={true}
|
||||
value={defValue}
|
||||
onChange={this.handleTagChange}
|
||||
onKeyPress={this.addTags}
|
||||
/>
|
||||
<br/>
|
||||
<div className="createPlatformTagWrapper">
|
||||
{tags.map(this.renderChip, this)}
|
||||
</div>
|
||||
<br/>
|
||||
<div>
|
||||
<p className="createplatformproperties">Platform Properties</p>
|
||||
<div id="property-container">
|
||||
{platformProperties.map((p) => {
|
||||
return <div key={p.key}>{p.key} : {p.value}
|
||||
<IconButton onClick={this.removeProperty.bind(this, p)}>
|
||||
<Close className="createplatformpropertyclose"/>
|
||||
</IconButton>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<div className="createplatformproperty">
|
||||
<TextField
|
||||
id="property"
|
||||
hintText="Property Name"
|
||||
floatingLabelText="Platform Property*"
|
||||
floatingLabelFixed={true}
|
||||
value={this.state.property}
|
||||
onChange={this.onTextChange}
|
||||
/> <em/>
|
||||
<SelectField
|
||||
className="createplatformpropertyselect"
|
||||
floatingLabelText="Property Type"
|
||||
value={selectedProperty}
|
||||
floatingLabelFixed={true}
|
||||
onChange={this.onPropertySelect}>
|
||||
{propertyTypes.map((type) => {
|
||||
return <MenuItem key={type.key}
|
||||
value={type.key}
|
||||
primaryText={type.value}/>
|
||||
})}
|
||||
</SelectField>
|
||||
<IconButton onClick={this.addProperty}>
|
||||
<AddCircleOutline/>
|
||||
</IconButton>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="createplatformiconp">Platform Icon*:</p>
|
||||
<GridList className="createplatformicon" cols={1.1}>
|
||||
{this.state.icon.map((tile) => (
|
||||
<GridTile
|
||||
key={Math.floor(Math.random() * 1000)}
|
||||
title={tile.name}
|
||||
actionIcon={
|
||||
<IconButton onClick={this.removeIcon}>
|
||||
<Clear/>
|
||||
</IconButton>}>
|
||||
<img src={tile.preview}/>
|
||||
</GridTile>
|
||||
))}
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone
|
||||
className="createplatformdropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {
|
||||
this.setState({icon, rejected})
|
||||
}}
|
||||
>
|
||||
<p className="createplatformdropzonep">+</p>
|
||||
</Dropzone> : <div/>}
|
||||
</GridList>
|
||||
</div>
|
||||
<br/>
|
||||
<RaisedButton
|
||||
primary={true} label="Create"
|
||||
onClick={this.onCreatePlatform}/>
|
||||
<FlatButton label="Cancel" onClick={this.clearForm}/>
|
||||
</form>
|
||||
</div>
|
||||
</CardActions>
|
||||
</Card>
|
||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="platform-create-modal" backdrop={'static'}>
|
||||
<ModalHeader>Create Platform</ModalHeader>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<Label for="platform-name">Name*</Label>
|
||||
<Input required type="text" name="appName" id="platform-name"/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="platform-description">Description*</Label>
|
||||
<Input required type="textarea" name="appName" id="platform-description"/>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button onClick={this.onCancelClick}>Cancel</Button>
|
||||
<Button color="primary">Create</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PlatformCreate.prototypes = {};
|
||||
|
||||
export default PlatformCreate;
|
||||
|
||||
@ -15,145 +15,61 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import DataTable from '../UIComponents/DataTable/DataTable';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
import Platform from "./Platform";
|
||||
import PlatformMgtApi from "../../api/platformMgtApi";
|
||||
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import PlatformCreate from "./PlatformCreate";
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
*
|
||||
* Application creation is handled through a Wizard. (We use Material UI Stepper.)
|
||||
*
|
||||
* In each step, data will be set to the state separately.
|
||||
* When the wizard is completed, data will be arranged and sent to the api.
|
||||
* Platform view component.
|
||||
* */
|
||||
class PlatformListing extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.setPlatforms = this.setPlatforms.bind(this);
|
||||
this.onPlatformCreateClick = this.onPlatformCreateClick.bind(this);
|
||||
this.state = {
|
||||
platforms: [],
|
||||
asc: true
|
||||
};
|
||||
openModal: false
|
||||
}
|
||||
}
|
||||
|
||||
headers = [
|
||||
{
|
||||
data_id: "image",
|
||||
data_type: "image",
|
||||
sortable: false,
|
||||
label: ""
|
||||
},
|
||||
{
|
||||
data_id: "platformName",
|
||||
data_type: String,
|
||||
sortable: true,
|
||||
label: "Platform Name",
|
||||
sort: this.sortData
|
||||
},
|
||||
{
|
||||
data_id: "enabled",
|
||||
data_type: String,
|
||||
sortable: false,
|
||||
label: "Enabled"
|
||||
},
|
||||
{
|
||||
data_id: "fileBased",
|
||||
data_type: String,
|
||||
sortable: false,
|
||||
label: "File Based"
|
||||
}
|
||||
];
|
||||
|
||||
componentDidMount() {
|
||||
let platformsPromise = PlatformMgtApi.getPlatforms();
|
||||
platformsPromise.then(
|
||||
response => {
|
||||
let platforms = this.setPlatforms(response.data);
|
||||
this.setState({platforms: platforms});
|
||||
}
|
||||
).catch(
|
||||
err => {
|
||||
componentWillMount() {
|
||||
PlatformMgtApi.getPlatforms().then(response => {
|
||||
console.log(response);
|
||||
this.setState({platforms: response.data});
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Create platform objects from the response which can be displayed in the table.
|
||||
* */
|
||||
setPlatforms(platforms) {
|
||||
let tmpPlatforms = [];
|
||||
|
||||
for (let index in platforms) {
|
||||
let platform = {};
|
||||
platform.id = platforms[index].identifier;
|
||||
platform.platformName = platforms[index].name;
|
||||
platform.enabled = platforms[index].enabled.toString();
|
||||
platform.fileBased = platforms[index].fileBased.toString();
|
||||
tmpPlatforms.push(platform)
|
||||
}
|
||||
|
||||
return tmpPlatforms;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the search action.
|
||||
* When typing in the search bar, this method will be invoked.
|
||||
* */
|
||||
searchApplications(word) {
|
||||
let searchedData = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles sort data function and toggles the asc state.
|
||||
* asc: true : sort in ascending order.
|
||||
* */
|
||||
sortData() {
|
||||
let isAsc = this.state.asc;
|
||||
let datas = isAsc ? this.data.sort(this.compare) : this.data.reverse();
|
||||
this.setState({data: datas, asc: !isAsc});
|
||||
}
|
||||
|
||||
compare(a, b) {
|
||||
if (a.applicationName < b.applicationName)
|
||||
return -1;
|
||||
if (a.applicationName > b.applicationName)
|
||||
return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
onRowClick(id) {
|
||||
//TODO: Remove this
|
||||
console.log(id)
|
||||
onPlatformCreateClick() {
|
||||
this.setState({openModal: true});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='middle listingplatformmiddle'>
|
||||
<Card className='listingplatformcard'>
|
||||
<TextField hintText="Search" onChange={this.searchApplications.bind(this)}
|
||||
className='listingplatformsearch'/>
|
||||
<CardTitle title="Platforms" className='listingplatformTitle'/>
|
||||
<CardActions>
|
||||
|
||||
</CardActions>
|
||||
<DataTable
|
||||
headers={this.headers}
|
||||
data={this.state.platforms}
|
||||
handleRowClick={this.onRowClick.bind(this)}
|
||||
noDataMessage={{type: 'button', text: 'Create Platform'}}/>
|
||||
</Card>
|
||||
<div id="platform-listing">
|
||||
<Row>
|
||||
<div className="create-platform">
|
||||
<Button id="create-platform-btn" onClick={this.onPlatformCreateClick}>Create Platform</Button>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div id="platform-list">
|
||||
{this.state.platforms.map(platform => {
|
||||
return (
|
||||
<Platform key={platform.identifier} platform={platform}/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Row>
|
||||
<PlatformCreate open={this.state.openModal}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PlatformListing.propTypes = {};
|
||||
|
||||
export default withRouter(PlatformListing);
|
||||
export default PlatformListing;
|
||||
|
||||
@ -93,7 +93,7 @@ class DataTable extends Component {
|
||||
}
|
||||
|
||||
handleBtnClick(id) {
|
||||
this.props.handleButtonClick(id);
|
||||
this.props.onAppEditClick(id);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -63,7 +63,7 @@ class DataTableRow extends Component {
|
||||
handleBtnClick(event) {
|
||||
event.stopPropagation();
|
||||
console.log(event.target['id'])
|
||||
this.props.handleButtonClick(event.target['id']);
|
||||
this.props.onAppEditClick(event.target['id']);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -20,7 +20,7 @@ import qs from 'qs';
|
||||
import React, {Component} from 'react';
|
||||
import {Redirect, Switch} from 'react-router-dom';
|
||||
import AuthHandler from '../../../api/authHandler';
|
||||
import {Button, Card, CardBlock, CardTitle, Col, Form, FormGroup, Input, Label} from 'reactstrap';
|
||||
import {Button, Card, CardBlock, CardTitle, Form, FormGroup, Input, Label} from 'reactstrap';
|
||||
|
||||
/**
|
||||
* The Login Component.
|
||||
@ -132,27 +132,32 @@ class Login extends Component {
|
||||
{/*TODO: Style the components.*/}
|
||||
<Card id="login-card">
|
||||
<CardBlock>
|
||||
<CardTitle>WSO2 IoT APP Publisher</CardTitle>
|
||||
<CardTitle>
|
||||
WSO2 IoT APP Publisher
|
||||
</CardTitle>
|
||||
<hr/>
|
||||
<Form onSubmit={this.handleLogin.bind(this)}>
|
||||
<FormGroup row>
|
||||
<Label for="userName" sm={2}>User Name:</Label>
|
||||
<Col sm={10}>
|
||||
<Input type="text" name="userName" id="userName" placeholder="User Name"
|
||||
<FormGroup>
|
||||
<Label for="userName">User Name:</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="userName"
|
||||
id="userName"
|
||||
placeholder="User Name"
|
||||
onChange={this.onUserNameChange.bind(this)}/>
|
||||
</Col>
|
||||
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<Label for="password" sm={2}>Password:</Label>
|
||||
<Col sm={10}>
|
||||
<Input type="password" name="text" id="password" placeholder="Password"
|
||||
<FormGroup>
|
||||
<Label for="password">Password:</Label>
|
||||
<Input
|
||||
valid={false}
|
||||
type="password"
|
||||
name="text"
|
||||
id="password"
|
||||
placeholder="Password"
|
||||
onChange={this.onPasswordChange.bind(this)}/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<FormGroup check row>
|
||||
<Col sm={{size: 10, offset: 2}}>
|
||||
<FormGroup>
|
||||
<Button type="submit" id="login-btn">Login</Button>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</CardBlock>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user