From 591962c2fde8d8b90a7588d972abf5b8d6f5cd57 Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Thu, 14 Sep 2017 12:10:31 +0530
Subject: [PATCH 1/8] Adding the first cut of base UI.

---
 .../pom.xml                                   |   2 +-
 .../src/main/resources/store/package.json     |  49 ++++++
 .../src/main/resources/store/src/App.jsx      | 105 +++++++++++
 .../store/src/components/BaseLayout.jsx       | 165 ++++++++++++++++++
 .../resources/store/src/components/Login.jsx  | 153 ++++++++++++++++
 .../store/src/components/NotFound.jsx         |  38 ++++
 .../src/main/resources/store/src/config.json  |   7 +
 .../src/main/resources/store/src/index.css    |  51 ++++++
 .../src/main/resources/store/src/index.js     |   9 +
 .../store/src/themes/custom-theme.js          |   0
 .../main/resources/store/webpack.config.js    |  72 ++++++++
 11 files changed, 650 insertions(+), 1 deletion(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/package.json
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/NotFound.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/config.json
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/themes/custom-theme.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
index 1a4ce146e9..47c656c2bc 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
@@ -86,7 +86,7 @@
                         </goals>
                         <phase>compile</phase>
                         <configuration>
-                            <workingDirectory>${basedir}/src/main/resources/publisher</workingDirectory>
+                            <workingDirectory>${basedir}/src/main/resources/store</workingDirectory>
                             <executable>${npm.executable}</executable>
                             <arguments>
                                 <argument>run</argument>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/package.json
new file mode 100644
index 0000000000..7f183349b1
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "store",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.16.2",
+    "flux": "^3.1.3",
+    "history": "^4.6.3",
+    "latest-version": "^3.1.0",
+    "material-ui": "^0.19.0",
+    "prop-types": "^15.5.10",
+    "qs": "^6.5.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-dropzone": "^4.1.0",
+    "react-images-uploader": "^1.1.0",
+    "react-material-ui-form-validator": "^0.5.0",
+    "react-modal": "^2.2.2",
+    "react-router": "^4.1.2",
+    "react-router-dom": "^4.1.2",
+    "react-scripts": "1.0.10",
+    "react-sliding-pane": "^1.2.3",
+    "react-tap-event-plugin": "^2.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.24.1",
+    "chai": "^4.0.2",
+    "css-loader": "^0.28.7",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.4",
+    "mocha": "^3.4.1",
+    "mock-local-storage": "^1.0.2",
+    "style-loader": "^0.18.1",
+    "webpack": "^2.7.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "build_prod": "NODE_ENV=production webpack -p --progress --colors --config webpack.config.js",
+    "build_dev": "NODE_ENV=development webpack -d --config webpack.config.js --watch "
+  }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
new file mode 100644
index 0000000000..b953a199c0
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
@@ -0,0 +1,105 @@
+/*
+ * 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 createHistory from 'history/createBrowserHistory';
+import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import Login from './components/Login';
+import BaseLayout from './components/BaseLayout';
+import NotFound from './components/NotFound';
+
+const history = createHistory({basename: '/store'});
+
+/**
+ * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ */
+const theme = require("./config.json").theme;
+//
+let muiTheme = null;
+if (theme.current === "default") {
+    let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
+    muiTheme = getMuiTheme(defaultTheme.default);
+} else {
+    let customTheme = require("./themes/" + theme.custom);
+    muiTheme = getMuiTheme(customTheme.default);
+}
+
+/**
+ * This component defines the layout and the routes for the app.
+ * All the content will be loaded inside the Base component.
+ * The base component includes the Core layout and the routers according to which the content will be displayed.
+ *
+ * The Router and Route components.
+ *     The Router and Route is used for navigation.
+ *     We specify the component which needs to be rendered for an URL.
+ *     Ex: When navigate to publisher/overview, the overview component will be rendered inside the main layout.
+ *
+ * HashRouter is used because the other router types need the server to serve those urls. In hashRouter, server does
+ * not want to serve the URL.
+ * */
+class Base extends Component {
+    constructor() {
+        super();
+        this.state = {
+            user: "admin"
+        }
+    }
+
+    render() {
+        if (this.state.user) {
+            return (
+                <div className="container">
+                    <BaseLayout>
+                        <Switch>
+                            <Route component={NotFound}/>
+                        </Switch>
+                    </BaseLayout>
+                </div>
+            )
+        }
+        return (<Redirect to={"/login"}/>)
+    }
+}
+
+/**
+ * This component is referred by the index.js to initiate the application.
+ * TODO: Currently the URL shows like https://localhost:9443/publisher/#/publisher/assets/apps/create. this needs to
+ * be fixed as https://localhost:9443/publisher/#/assets/apps/create
+ *
+ * */
+class Store extends Component {
+    render() {
+        return (
+            <div className="App">
+                <MuiThemeProvider muiTheme={muiTheme}>
+                <Router basename="publisher" history={history}>
+                    <Switch>
+                        <Route path="/login" component={Login}/>
+                        <Route path="/logout" component={Login}/>
+                        <Route component={Base}/>
+                    </Switch>
+                </Router>
+                </MuiThemeProvider>
+            </div>
+        );
+    }
+}
+
+export default Store;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
new file mode 100644
index 0000000000..2e9c2f8c17
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
@@ -0,0 +1,165 @@
+/*
+ * 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 PropTypes from 'prop-types';
+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 {List, ListItem} from 'material-ui/List';
+import Apps from 'material-ui/svg-icons/navigation/apps';
+import Add from 'material-ui/svg-icons/content/add-circle';
+import Feedback from 'material-ui/svg-icons/action/feedback';
+import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
+import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
+import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+
+/**
+ * Base Layout:
+ * App bar
+ * Left Navigation
+ * Middle content.
+ * */
+class BaseLayout extends Component {
+
+    constructor() {
+        super();
+        this.state = {
+            notifications: 0,
+            user: 'Admin'
+        }
+    }
+
+    componentWillMount() {
+
+    }
+
+    handleApplicationClick() {
+        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() {
+        return (
+            <div>
+                <AppBar title="App Publisher"
+                        iconElementRight={
+                            <div>
+                                <Badge
+                                    badgeContent={this.state.notifications}
+                                    secondary={true}
+                                    badgeStyle={{top: 12, right: 12}}
+                                >
+                                    <IconButton tooltip="Notifications">
+                                        <NotificationsIcon/>
+                                    </IconButton>
+                                </Badge>
+                                <IconButton onClick={() => {
+                                    console.log("Clicked")
+                                }}>
+                                    <ActionAccountCircle/>
+                                </IconButton>
+                            </div>
+                        }
+                />
+                <div>
+                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
+                        <List>
+                           <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=
+                         {
+                             {
+                                 height: 'calc(100% - 64px)',
+                                 marginLeft: '16%',
+                                 width: 'calc(100%-15%)',
+                                 top: 64,
+                                 left: "-100px"
+                             }
+                         }>
+                    {this.props.children}
+                </div>
+            </div>);
+    }
+
+}
+
+BaseLayout.propTypes = {
+    children: PropTypes.element
+};
+
+export default BaseLayout;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
new file mode 100644
index 0000000000..72255be8dd
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
@@ -0,0 +1,153 @@
+/*
+ * 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 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.
+
+
+/**
+ * The Login Component.
+ *
+ * This component contains the Login form and methods to handle field change events.
+ * The user name and password will be set to the state and sent to the api.
+ *
+ * If the user is already logged in, it will redirect to the last point where the user was.
+ * */
+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) {
+        event.preventDefault();
+    }
+
+    /**
+     * Handles the username field change event.
+     * */
+    onUserNameChange(event) {
+        this.setState(
+            {
+                userName: event.target.value
+            }
+        );
+    }
+
+    /**
+     * Handles the password field change event.
+     * */
+    onPasswordChange(event) {
+        this.setState(
+            {
+                password: event.target.value
+            }
+        );
+    }
+
+    /**
+     * Handles the remember me check.
+     * */
+    handleRememberMe() {
+        this.setState(
+            {
+                rememberMe: !this.state.rememberMe
+            }
+        );
+    }
+
+    render() {
+
+        if (!this.state.isLoggedIn) {
+            return (
+                <div>
+
+                    {/*TODO: Style the components.*/}
+
+                    <Card>
+                        <CardTitle title="WSO2 IoT App Publisher"/>
+                        <CardActions>
+                            <ValidatorForm
+                                ref="form"
+                                onSubmit={this.handleLogin.bind(this)}
+                                onError={errors => console.log(errors)}>
+                                <TextValidator
+                                    floatingLabelText="User Name"
+                                    floatingLabelFixed={true}
+                                    onChange={this.onUserNameChange.bind(this)}
+                                    name="userName"
+                                    validators={['required']}
+                                    errorMessages={['User Name is required']}
+                                    value={this.state.userName}
+                                />
+                                <br/>
+                                <TextValidator
+                                    floatingLabelText="Password"
+                                    floatingLabelFixed={true}
+                                    onChange={this.onPasswordChange.bind(this)}
+                                    name="password"
+                                    type="password"
+                                    value={this.state.password}
+                                    validators={['required']}
+                                    errorMessages={['Password is required']}
+                                />
+                                <br/>
+                                <Checkbox label="Remember me."
+                                          onCheck={this.handleRememberMe.bind(this)}
+                                          checked={this.state.rememberMe}/>
+                                <br/>
+                                <RaisedButton type="submit" label="Login"/>
+                            </ValidatorForm>
+                        </CardActions>
+                    </Card>
+                </div>);
+        } else {
+            return (
+                <Switch>
+                    <Redirect to={this.state.referrer}/>
+                </Switch>
+            );
+        }
+    }
+}
+
+export default Login;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/NotFound.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/NotFound.jsx
new file mode 100644
index 0000000000..81a1b0320b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/NotFound.jsx
@@ -0,0 +1,38 @@
+/*
+ * 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';
+
+/**
+ * Error page.
+ * */
+class Error extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                404 not found
+            </div>
+        );
+    }
+}
+
+export default Error;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/config.json
new file mode 100644
index 0000000000..cb7ead56b1
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/config.json
@@ -0,0 +1,7 @@
+{
+  "theme" : {
+    "current" : "default",
+    "default" : "lightBaseTheme",
+    "custom" : "custom-theme"
+  }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css
new file mode 100644
index 0000000000..79d5feec51
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css
@@ -0,0 +1,51 @@
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.square:focus {
+  outline: none;
+}
+
+.kbd-navigation .square:focus {
+  background: #ddd;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
new file mode 100644
index 0000000000..6c459661b6
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Store from './App';
+import './index.css';
+
+
+ReactDOM.render(<Store />, document.getElementById('root'));
+console.log('Hello World!');
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/themes/custom-theme.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js
new file mode 100644
index 0000000000..97c4b98444
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/webpack.config.js
@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+var webpack = require('webpack');
+var path = require('path');
+
+var BUILD_DIR = path.resolve(__dirname, 'public/dist');
+var APP_DIR = path.resolve(__dirname, 'src');
+
+const config = {
+    entry: {
+        index: APP_DIR+ '/index.js'
+    },
+    output: {
+        path: path.resolve(__dirname, BUILD_DIR),
+        filename: 'index.js'
+    },
+    resolve: {
+        extensions: ['*', '.jsx', '.js']
+    },
+    devtool: "source-map",
+    plugins: [],
+    watch: false,
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                include: APP_DIR,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['es2015', 'react'],
+                            plugins: ['transform-class-properties']
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.less$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader" // translates CSS into CommonJS
+                }, {
+                    loader: "less-loader" // compiles Less to CSS
+                }]
+            }
+        ]
+    }
+};
+
+module.exports = config;

From 9f759f8aeea5ad67cb9c0100b884227689c6b566 Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Thu, 14 Sep 2017 15:53:32 +0530
Subject: [PATCH 2/8] Adding some fixes with login page.

---
 .../src/main/resources/store/src/App.jsx      |  35 ++++--
 .../store/src/components/BaseLayout.jsx       | 109 ++++++++----------
 .../resources/store/src/components/Login.jsx  |  33 ++++--
 .../src/main/resources/store/src/index.js     |   1 -
 4 files changed, 92 insertions(+), 86 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
index b953a199c0..336b85a7bd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
@@ -55,18 +55,18 @@ if (theme.current === "default") {
  * not want to serve the URL.
  * */
 class Base extends Component {
+
     constructor() {
         super();
-        this.state = {
-            user: "admin"
-        }
+        this.state = {};
     }
 
     render() {
+        this.setState();
         if (this.state.user) {
             return (
                 <div className="container">
-                    <BaseLayout>
+                    <BaseLayout state={this.state}>
                         <Switch>
                             <Route component={NotFound}/>
                         </Switch>
@@ -76,6 +76,14 @@ class Base extends Component {
         }
         return (<Redirect to={"/login"}/>)
     }
+
+    setState() {
+        if (this.props.location.state){
+            this.state = this.props.location.state;
+        } else {
+            this.state = {};
+        }
+    }
 }
 
 /**
@@ -85,17 +93,22 @@ class Base extends Component {
  *
  * */
 class Store extends Component {
+
+    constructor() {
+        super();
+    }
+
     render() {
         return (
             <div className="App">
                 <MuiThemeProvider muiTheme={muiTheme}>
-                <Router basename="publisher" history={history}>
-                    <Switch>
-                        <Route path="/login" component={Login}/>
-                        <Route path="/logout" component={Login}/>
-                        <Route component={Base}/>
-                    </Switch>
-                </Router>
+                    <Router basename="store" history={history}>
+                        <Switch>
+                            <Route path="/login" component={Login}/>
+                            <Route path="/logout" component={Login}/>
+                            <Route component={Base}/>
+                        </Switch>
+                    </Router>
                 </MuiThemeProvider>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
index 2e9c2f8c17..fea7f5e03b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
@@ -30,6 +30,7 @@ import Feedback from 'material-ui/svg-icons/action/feedback';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+import FlatButton from 'material-ui/FlatButton';
 
 /**
  * Base Layout:
@@ -39,12 +40,9 @@ import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
  * */
 class BaseLayout extends Component {
 
-    constructor() {
-        super();
-        this.state = {
-            notifications: 0,
-            user: 'Admin'
-        }
+    constructor(props) {
+        super(props);
+        this.state = this.props.state;
     }
 
     componentWillMount() {
@@ -55,25 +53,6 @@ class BaseLayout extends Component {
         this.handleHistory('/assets/apps');
     }
 
-    handleOverviewClick() {
-        this.handleHistory('/overview');
-    }
-
-    handleApplicationCreateClick() {
-        this.handleHistory('/assets/apps/create');
-    }
-
-    handlePlatformClick() {
-        this.handleHistory('/assets/platforms');
-    }
-
-    handlePlatformCreateClick() {
-        this.handleHistory('/assets/platforms/create');
-    }
-
-    handleReviewClick() {
-        this.handleHistory('/assets/reviews');
-    }
 
     /**
      * The method to update the history.
@@ -83,33 +62,51 @@ class BaseLayout extends Component {
         this.props.history.push(to);
     }
 
+    handleUserLogin() {
+        if (this.state.user) {
+            return (
+                <IconButton tooltip={this.state.user}>
+                    <ActionAccountCircle/>
+                </IconButton>
+            );
+        } else {
+            return (
+                <FlatButton label="Login"/>
+            );
+        }
+    }
+
+    handleNotification() {
+        if (this.state.user) {
+            return (
+                <Badge
+                    badgeContent={this.state.notifications}
+                    secondary={true}
+                    badgeStyle={{top: 12, right: 12}} >
+                    <IconButton tooltip="Notifications">
+                        <NotificationsIcon/>
+                    </IconButton>
+                </Badge>
+            );
+        }
+    }
+
     render() {
         return (
             <div>
-                <AppBar title="App Publisher"
+                <AppBar title="App Store"
                         iconElementRight={
                             <div>
-                                <Badge
-                                    badgeContent={this.state.notifications}
-                                    secondary={true}
-                                    badgeStyle={{top: 12, right: 12}}
-                                >
-                                    <IconButton tooltip="Notifications">
-                                        <NotificationsIcon/>
-                                    </IconButton>
-                                </Badge>
-                                <IconButton onClick={() => {
-                                    console.log("Clicked")
-                                }}>
-                                    <ActionAccountCircle/>
-                                </IconButton>
+                                {this.handleNotification()}
+                                {this.handleUserLogin()}
                             </div>
                         }
                 />
                 <div>
-                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
+                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '13%', left: '1%'}}
+                            open={true}>
                         <List>
-                           <ListItem primaryText="Applications"
+                            <ListItem primaryText="Applications"
                                       leftIcon={<Apps/>}
                                       initiallyOpen={false}
                                       primaryTogglesNestedList={true}
@@ -117,27 +114,10 @@ class BaseLayout extends Component {
                                       nestedItems={[
                                           <ListItem
                                               key={1}
-                                              primaryText="Create"
-                                              onClick={this.handleApplicationCreateClick.bind(this)}
-                                              leftIcon={<Add/>}
-                                          />]}
-                            />
-                            <ListItem primaryText="Platforms"
-                                      leftIcon={<DevicesOther/>}
-                                      initiallyOpen={false}
-                                      primaryTogglesNestedList={true}
-                                      onClick={this.handlePlatformClick.bind(this)}
-                                      nestedItems={[
-                                          <ListItem
-                                              key={1}
-                                              primaryText="Create"
-                                              onClick={this.handlePlatformCreateClick.bind(this)}
-                                              leftIcon={<Add/>}
+                                              primaryText="Business" //TODO: categoryies ...
+                                              leftIcon={<List/>}
                                           />]}
                             />
-                            <ListItem primaryText="Reviews"
-                                      onClick={this.handleReviewClick.bind(this)}
-                                      leftIcon={<Feedback/>}/>
                         </List>
                     </Drawer>
                 </div>
@@ -158,8 +138,11 @@ class BaseLayout extends Component {
 
 }
 
-BaseLayout.propTypes = {
+BaseLayout
+    .propTypes = {
     children: PropTypes.element
 };
 
-export default BaseLayout;
+export
+default
+BaseLayout;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
index 72255be8dd..31d3404d39 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
@@ -19,10 +19,12 @@
 import qs from 'qs';
 import React, {Component} from 'react';
 import Checkbox from 'material-ui/Checkbox';
-import {Redirect, Switch} from 'react-router-dom';
+import {Redirect, Route} from 'react-router-dom';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
+import Store from '../App';
+
 
 //todo: remove the {TextValidator, ValidatorForm} and implement it manually.
 
@@ -39,10 +41,9 @@ class Login extends Component {
     constructor() {
         super();
         this.state = {
-            isLoggedIn: true,
+            isLoggedIn: false,
             referrer: "/",
             userName: "",
-            password: "",
             rememberMe: true
         }
     }
@@ -60,6 +61,15 @@ class Login extends Component {
 
     handleLogin(event) {
         event.preventDefault();
+        //TODO: send authentication request.
+        let location = {
+            pathname: this.state.referrer,
+            state: {
+                notifications: 0,
+                user: this.state.userName
+            }
+        };
+        this.props.history.push(location);
     }
 
     /**
@@ -95,16 +105,21 @@ class Login extends Component {
         );
     }
 
-    render() {
+    handleSuccessfulLogin() {
+        return (
+            <Redirect to='/store'/>
+        );
+    }
 
-        if (!this.state.isLoggedIn) {
+    render() {
+        if (!(this.state.isLoggedIn && this.state.userName)) {
             return (
                 <div>
 
                     {/*TODO: Style the components.*/}
 
                     <Card>
-                        <CardTitle title="WSO2 IoT App Publisher"/>
+                        <CardTitle title="WSO2 IoT App Store"/>
                         <CardActions>
                             <ValidatorForm
                                 ref="form"
@@ -141,11 +156,7 @@ class Login extends Component {
                     </Card>
                 </div>);
         } else {
-            return (
-                <Switch>
-                    <Redirect to={this.state.referrer}/>
-                </Switch>
-            );
+            this.handleSuccessfulLogin();
         }
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
index 6c459661b6..12795d528e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
@@ -5,5 +5,4 @@ import './index.css';
 
 
 ReactDOM.render(<Store />, document.getElementById('root'));
-console.log('Hello World!');
 

From 4a880a97157d76d2428f9caf2649b7268577ac4d Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Thu, 14 Sep 2017 16:13:23 +0530
Subject: [PATCH 3/8] Adding login page redirection.

---
 .../src/main/resources/store/src/App.jsx      | 21 ++++++++-----------
 .../store/src/components/BaseLayout.jsx       | 10 +++------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
index 336b85a7bd..8325bbc957 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
@@ -63,18 +63,15 @@ class Base extends Component {
 
     render() {
         this.setState();
-        if (this.state.user) {
-            return (
-                <div className="container">
-                    <BaseLayout state={this.state}>
-                        <Switch>
-                            <Route component={NotFound}/>
-                        </Switch>
-                    </BaseLayout>
-                </div>
-            )
-        }
-        return (<Redirect to={"/login"}/>)
+        return (
+            <div className="container">
+                <BaseLayout state={this.state}>
+                    <Switch>
+                        <Route component={NotFound}/>
+                    </Switch>
+                </BaseLayout>
+            </div>
+        )
     }
 
     setState() {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
index fea7f5e03b..d446c7556d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
@@ -21,16 +21,12 @@ 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 {List, ListItem} from 'material-ui/List';
 import Apps from 'material-ui/svg-icons/navigation/apps';
-import Add from 'material-ui/svg-icons/content/add-circle';
-import Feedback from 'material-ui/svg-icons/action/feedback';
-import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import FlatButton from 'material-ui/FlatButton';
+import { Link } from 'react-router-dom';
 
 /**
  * Base Layout:
@@ -71,7 +67,7 @@ class BaseLayout extends Component {
             );
         } else {
             return (
-                <FlatButton label="Login"/>
+                <Link to='/login'> Login</Link>
             );
         }
     }
@@ -82,7 +78,7 @@ class BaseLayout extends Component {
                 <Badge
                     badgeContent={this.state.notifications}
                     secondary={true}
-                    badgeStyle={{top: 12, right: 12}} >
+                    badgeStyle={{top: 12, right: 12}}>
                     <IconButton tooltip="Notifications">
                         <NotificationsIcon/>
                     </IconButton>

From 3496c9c7b06152c81aaf61a05469fd9b40867d1c Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Thu, 14 Sep 2017 16:29:18 +0530
Subject: [PATCH 4/8] Removing the unnecessary feature zip bundling from
 component.

---
 .../pom.xml                                   | 26 -------------------
 1 file changed, 26 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
index 47c656c2bc..3ca7304232 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
@@ -34,32 +34,6 @@
 
     <build>
         <plugins>
-            <plugin>
-                <groupId>org.wso2.maven</groupId>
-                <artifactId>carbon-p2-plugin</artifactId>
-                <version>${carbon.p2.plugin.version}</version>
-                <executions>
-                    <execution>
-                        <id>4-p2-feature-generation</id>
-                        <phase>package</phase>
-                        <goals>
-                            <goal>p2-feature-gen</goal>
-                        </goals>
-                        <configuration>
-                            <id>org.wso2.carbon.device.application.mgt.store</id>
-                            <propertiesFile>../../etc/feature.properties</propertiesFile>
-                            <adviceFile>
-                                <properties>
-                                    <propertyDef>org.wso2.carbon.p2.category.type:server
-                                    </propertyDef>
-                                    <propertyDef>org.eclipse.equinox.p2.type.group:false
-                                    </propertyDef>
-                                </properties>
-                            </adviceFile>
-                        </configuration>
-                    </execution>
-                </executions>
-            </plugin>
             <plugin>
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>exec-maven-plugin</artifactId>

From 2f726c674dd26f9cd37be95e8b3ac155f40f79dd Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Fri, 15 Sep 2017 12:27:50 +0530
Subject: [PATCH 5/8] Updating to have the parent state only.

---
 .../src/main/resources/store/src/App.jsx      | 37 ++++++++++---------
 .../store/src/components/BaseLayout.jsx       | 26 ++++---------
 .../resources/store/src/components/Login.jsx  | 12 ++++--
 .../resources/store/src/components/index.js}  | 22 ++---------
 4 files changed, 39 insertions(+), 58 deletions(-)
 rename components/application-mgt/{org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js => org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/index.js} (58%)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
index 8325bbc957..5786ced341 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
@@ -56,16 +56,11 @@ if (theme.current === "default") {
  * */
 class Base extends Component {
 
-    constructor() {
-        super();
-        this.state = {};
-    }
 
     render() {
-        this.setState();
         return (
             <div className="container">
-                <BaseLayout state={this.state}>
+                <BaseLayout state={this.props.state} updateState={this.props.updateState}>
                     <Switch>
                         <Route component={NotFound}/>
                     </Switch>
@@ -73,16 +68,12 @@ class Base extends Component {
             </div>
         )
     }
-
-    setState() {
-        if (this.props.location.state){
-            this.state = this.props.location.state;
-        } else {
-            this.state = {};
-        }
-    }
 }
 
+Base.propTypes = {
+    updateState: React.PropTypes.func.isRequired
+};
+
 /**
  * This component is referred by the index.js to initiate the application.
  * TODO: Currently the URL shows like https://localhost:9443/publisher/#/publisher/assets/apps/create. this needs to
@@ -93,6 +84,11 @@ class Store extends Component {
 
     constructor() {
         super();
+        if (!this.state) {
+            this.state = {};
+            this.state.store = {};
+        }
+        this.updateState = this.updateState.bind(this);
     }
 
     render() {
@@ -101,15 +97,22 @@ class Store extends Component {
                 <MuiThemeProvider muiTheme={muiTheme}>
                     <Router basename="store" history={history}>
                         <Switch>
-                            <Route path="/login" component={Login}/>
-                            <Route path="/logout" component={Login}/>
-                            <Route component={Base}/>
+                            <Route path="/login"
+                                   render={routeProps => <Login {...routeProps} updateState={this.updateState} state={this.state}/>}/>
+                            <Route path="/logout"
+                                   render={routeProps => <Base {...routeProps} updateState={this.updateState} state={this.state}/>}/>
+                            <Route
+                                render={routeProps => <Base {...routeProps} updateState={this.updateState} state={this.state}/>}/>
                         </Switch>
                     </Router>
                 </MuiThemeProvider>
             </div>
         );
     }
+
+    updateState(data) {
+        this.setState(data);
+    }
 }
 
 export default Store;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
index d446c7556d..acaab4d88d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx
@@ -26,7 +26,7 @@ import {List, ListItem} from 'material-ui/List';
 import Apps from 'material-ui/svg-icons/navigation/apps';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import { Link } from 'react-router-dom';
+import {Link, withRouter} from 'react-router-dom';
 
 /**
  * Base Layout:
@@ -36,15 +36,6 @@ import { Link } from 'react-router-dom';
  * */
 class BaseLayout extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = this.props.state;
-    }
-
-    componentWillMount() {
-
-    }
-
     handleApplicationClick() {
         this.handleHistory('/assets/apps');
     }
@@ -59,9 +50,9 @@ class BaseLayout extends Component {
     }
 
     handleUserLogin() {
-        if (this.state.user) {
+        if (this.props.state.store.user) {
             return (
-                <IconButton tooltip={this.state.user}>
+                <IconButton tooltip={this.props.state.store.user}>
                     <ActionAccountCircle/>
                 </IconButton>
             );
@@ -73,10 +64,10 @@ class BaseLayout extends Component {
     }
 
     handleNotification() {
-        if (this.state.user) {
+        if (this.props.state.store.user) {
             return (
                 <Badge
-                    badgeContent={this.state.notifications}
+                    badgeContent={this.props.state.store.notifications}
                     secondary={true}
                     badgeStyle={{top: 12, right: 12}}>
                     <IconButton tooltip="Notifications">
@@ -134,11 +125,8 @@ class BaseLayout extends Component {
 
 }
 
-BaseLayout
-    .propTypes = {
+BaseLayout.propTypes = {
     children: PropTypes.element
 };
 
-export
-default
-BaseLayout;
+export default withRouter(BaseLayout);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
index 31d3404d39..f7938349a8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx
@@ -61,14 +61,18 @@ class Login extends Component {
 
     handleLogin(event) {
         event.preventDefault();
+        console.log(this.props);
         //TODO: send authentication request.
         let location = {
-            pathname: this.state.referrer,
-            state: {
-                notifications: 0,
-                user: this.state.userName
+            pathname: this.state.referrer
+        };
+        let storeState = {
+            store : {
+                user: this.state.userName,
+                notifications: 0
             }
         };
+        this.props.updateState(storeState);
         this.props.history.push(location);
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/index.js
similarity index 58%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/index.js
index f8cfdff1bf..de55ff9eed 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/index.js
@@ -16,24 +16,10 @@
  * under the License.
  */
 
+
+import BaseLayout from './BaseLayout';
 /**
- * This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
- * {
- *     "theme" : {
- *       "type" : "custom",
- *       "value" : "custom-theme"
- *     }
- *   }
+ * Contains all UI components related to Application, Login and Platform
  */
-import {
-    indigo500, indigo700, redA200,
-} from 'material-ui/styles/colors';
 
-export default {
-    palette: {
-        primary1Color: indigo500,
-        primary2Color: indigo700,
-        accent1Color: redA200,
-        pickerHeaderColor: indigo500,
-    },
-};
+export default {BaseLayout};

From acb74c5cb92cad57035a6609d578f4b632a5377b Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Fri, 15 Sep 2017 12:34:24 +0530
Subject: [PATCH 6/8] Adding missing files to the source.

---
 .../main/resources/store/public/favicon.ico   | Bin 0 -> 3870 bytes
 .../main/resources/store/public/index.html    |  40 ++++++++++++++
 .../main/resources/store/public/manifest.json |  15 ++++++
 .../src/main/resources/store/src/index.css    |  51 ------------------
 .../src/main/resources/store/src/index.js     |   2 -
 5 files changed, 55 insertions(+), 53 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/favicon.ico
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/index.html
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/manifest.json
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/favicon.ico b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a
GIT binary patch
literal 3870
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
baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@

literal 0
HcmV?d00001

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/index.html b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/index.html
new file mode 100644
index 0000000000..7bee027101
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/manifest.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/manifest.json
new file mode 100644
index 0000000000..be607e4177
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css
deleted file mode 100644
index 79d5feec51..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.css
+++ /dev/null
@@ -1,51 +0,0 @@
-body {
-  font: 14px "Century Gothic", Futura, sans-serif;
-  margin: 20px;
-}
-
-ol, ul {
-  padding-left: 30px;
-}
-
-.board-row:after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.status {
-  margin-bottom: 10px;
-}
-
-.square {
-  background: #fff;
-  border: 1px solid #999;
-  float: left;
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 34px;
-  height: 34px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  width: 34px;
-}
-
-.square:focus {
-  outline: none;
-}
-
-.kbd-navigation .square:focus {
-  background: #ddd;
-}
-
-.game {
-  display: flex;
-  flex-direction: row;
-}
-
-.game-info {
-  margin-left: 20px;
-}
-
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
index 12795d528e..4f0bad39fa 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Store from './App';
-import './index.css';
-
 
 ReactDOM.render(<Store />, document.getElementById('root'));
 

From 59d99732004852c18e052038d06ce2077f215e9a Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Fri, 15 Sep 2017 12:35:01 +0530
Subject: [PATCH 7/8] Removing the unnecessary file.

---
 .../src/main/resources/store/src/themes/custom-theme.js           | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/themes/custom-theme.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/themes/custom-theme.js
deleted file mode 100644
index e69de29bb2..0000000000

From d71e58b72327d9b199443a61328ba47c69ad1db2 Mon Sep 17 00:00:00 2001
From: sinthuja <sinthuja@wso2.com>
Date: Fri, 15 Sep 2017 12:47:36 +0530
Subject: [PATCH 8/8] Cleaning and removing the themes package usage.

---
 .../src/main/resources/store/src/App.jsx                   | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
index 5786ced341..16f66083d4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx
@@ -18,7 +18,7 @@
 
 import React, {Component} from 'react';
 import createHistory from 'history/createBrowserHistory';
-import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
+import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import Login from './components/Login';
@@ -36,9 +36,6 @@ let muiTheme = null;
 if (theme.current === "default") {
     let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
     muiTheme = getMuiTheme(defaultTheme.default);
-} else {
-    let customTheme = require("./themes/" + theme.custom);
-    muiTheme = getMuiTheme(customTheme.default);
 }
 
 /**
@@ -55,8 +52,6 @@ if (theme.current === "default") {
  * not want to serve the URL.
  * */
 class Base extends Component {
-
-
     render() {
         return (
             <div className="container">