Created the Step 2 and 3 basic forms. Code Formatting.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js

@@ -17,11 +17,11 @@
  */
 
 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';
+import TextField from 'material-ui/TextField';
+import FlatButton from 'material-ui/FlatButton';
+import SelectField from 'material-ui/SelectField';
+import RaisedButton from 'material-ui/RaisedButton';
 
 class Step1 extends Component {
     constructor() {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js

@@ -16,13 +16,48 @@
  * under the License.
  */
 
+import Chip from 'material-ui/Chip';
 import React, {Component} from 'react';
-import RaisedButton from 'material-ui/RaisedButton';
+import MenuItem from 'material-ui/MenuItem';
+import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
+import SelectField from 'material-ui/SelectField';
+import RaisedButton from 'material-ui/RaisedButton';
 
 class Step2 extends Component {
     constructor() {
         super();
+        this.state = {
+            tags: [],
+            defValue: "",
+            category: 1
+        };
+
+        this.styles = {
+            chip: {
+                margin: 4,
+            },
+            wrapper: {
+                display: 'flex',
+                flexWrap: 'wrap',
+            },
+        };
+
+    }
+
+    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: ""}, console.log(this.state.tags));
+        }
+    }
+
+    handleTagChange(event) {
+        let defaultValue = this.state.defValue;
+        defaultValue = event.target.value;
+        this.setState({defValue: defaultValue})
     }
 
     handleNext() {
@@ -33,12 +68,83 @@ class Step2 extends Component {
         this.props.handlePrev();
     }
 
+
+    handleRequestDelete = (key) => {
+        if (key === 3) {
+            alert('Why would you want to delete React?! :)');
+            return;
+        }
+
+        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});
+    };
+
+    renderChip(data) {
+        console.log(data);
+        return (
+            <Chip
+                key={data.key}
+                onRequestDelete={() => this.handleRequestDelete(data.key)}
+                style={this.styles.chip}
+            >
+                {data.value}
+            </Chip>
+        );
+    }
+
     render() {
         const contentStyle = {margin: '0 16px'};
         return (
             <div style={contentStyle}>
-                    Step2
                 <div>
+                    <div>
+                        <TextField
+                            hintText="Enter a title for your application."
+                            floatingLabelText="Title*"
+                            floatingLabelFixed={true}
+                        /><br/>
+                        <TextField
+                            hintText="Enter a short description for your application."
+                            floatingLabelText="Short Description*"
+                            floatingLabelFixed={true}
+                            multiLine={true}
+                            rows={2}
+                        /><br/>
+                        <TextField
+                            hintText="Enter the description."
+                            floatingLabelText="Description*"
+                            floatingLabelFixed={true}
+                            multiLine={true}
+                            rows={4}
+                        /><br/>
+                        <TextField
+                            hintText="Select the application visibility"
+                            floatingLabelText="Visibility*"
+                            floatingLabelFixed={true}
+                        /><br/>
+                        <TextField
+                            hintText="Enter application tags.."
+                            floatingLabelText="Tags*"
+                            floatingLabelFixed={true}
+                            value={this.state.defValue}
+                            onChange={this.handleTagChange.bind(this)}
+                            onKeyPress={this.addTags.bind(this)}
+                        /><br/>
+                        <div style={this.styles.wrapper}>
+                            {this.state.tags.map(this.renderChip, this)}
+                        </div>
+                        <br/>
+                        <SelectField
+                            floatingLabelText="Category*"
+                            value={this.state.category}
+                            floatingLabelFixed={true}
+                        >
+                            <MenuItem value={1} primaryText="Business"/>
+                        </SelectField> <br/>
+                    </div>
+
                     <div style={{marginTop: 12}}>
                         <FlatButton
                             label="< Back"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js

@@ -17,12 +17,20 @@
  */
 
 import React, {Component} from 'react';
-import RaisedButton from 'material-ui/RaisedButton';
+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 SelectField from 'material-ui/SelectField';
+import RaisedButton from 'material-ui/RaisedButton';
 
 class Step3 extends Component {
     constructor() {
         super();
+        this.state = {
+            showForm: false,
+            releaseChannel: 1
+        }
     }
 
     handleFinish() {
@@ -33,12 +41,42 @@ class Step3 extends Component {
         this.props.handlePrev();
     }
 
+    handleToggle() {
+        let hide = this.state.showForm;
+        this.setState({showForm: !hide});
+    }
+
+
     render() {
         const contentStyle = {margin: '0 16px'};
         return (
             <div style={contentStyle}>
-                    Step3
                 <div>
+                    <Toggle
+                        label="Release the Application"
+                        labelPosition="right"
+                        onToggle={this.handleToggle.bind(this)}
+                        defaultToggled={this.state.showForm}
+                    />
+
+                    {/*If toggle is true, the release form will be shown.*/}
+                    {!this.state.showForm ? <div></div> : <div>
+                        <SelectField
+                            floatingLabelText="Select Release Channel*"
+                            value={this.state.releaseChannel}
+                            floatingLabelFixed={true}
+                        >
+                            <MenuItem value={1} primaryText="Alpha"/>
+                            <MenuItem value={2} primaryText="Beta"/>
+                            <MenuItem value={3} primaryText="GA"/>
+                        </SelectField> <br/>
+                        <TextField
+                            hintText="1.0.0"
+                            floatingLabelText="Version*"
+                            floatingLabelFixed={true}
+                        /><br/>
+                    </div>}
+
                     <div style={{marginTop: 12}}>
                         <FlatButton
                             label="< Back"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js

@@ -16,20 +16,20 @@
  * under the License.
  */
 
+import Badge from 'material-ui/Badge';
 import React, {Component} from 'react';
 import AppBar from 'material-ui/AppBar';
 import Drawer from 'material-ui/Drawer';
+import {withRouter} from 'react-router-dom';
 import IconButton from 'material-ui/IconButton';
-import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
+import {List, ListItem} from 'material-ui/List';
 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';
+import Dashboard from 'material-ui/svg-icons/action/dashboard';
+import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
+import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
+import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
 
 
 /**

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.js

@@ -16,13 +16,13 @@
  * under the License.
  */
 
-import React, {Component} from 'react';
-import {Redirect, Switch} from 'react-router-dom';
-import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card';
-import RaisedButton from 'material-ui/RaisedButton';
-import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
-import Checkbox from 'material-ui/Checkbox';
 import qs from 'qs';
+import React, {Component} from 'react';
+import Checkbox from 'material-ui/Checkbox';
+import {Redirect, Switch} from 'react-router-dom';
+import RaisedButton from 'material-ui/RaisedButton';
+import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
 
 //todo: remove the {TextValidator, ValidatorForm} and implement it manually.