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/4] 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/4] 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/4] 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/4] 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>