)
+ }
+}
+
+/**
+ * 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 (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+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 (
+
+
+
+
+
+
+
+ {
+ console.log("Clicked")
+ }}>
+
+
+
+
+
+ }
+ initiallyOpen={false}
+ primaryTogglesNestedList={true}
+ onClick={this.handleApplicationClick.bind(this)}
+ nestedItems={[
+ }
+ />]}
+ />
+ }
+ initiallyOpen={false}
+ primaryTogglesNestedList={true}
+ onClick={this.handlePlatformClick.bind(this)}
+ nestedItems={[
+ }
+ />]}
+ />
+ }/>
+
+
+
+
+ {this.props.children}
+
+ );
+ }
+
+}
+
+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 (
+
+
+ {/*TODO: Style the components.*/}
+
+
+
+
+ console.log(errors)}>
+
+
+
+
+
+
+
+
+
+
+
);
+ } else {
+ return (
+
+
+
+ );
+ }
+ }
+}
+
+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 (
+
+ 404 not found
+
+ );
+ }
+}
+
+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(, 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;