From 591962c2fde8d8b90a7588d972abf5b8d6f5cd57 Mon Sep 17 00:00:00 2001 From: sinthuja Date: Thu, 14 Sep 2017 12:10:31 +0530 Subject: [PATCH] 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 @@ compile - ${basedir}/src/main/resources/publisher + ${basedir}/src/main/resources/store ${npm.executable} run 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 ( +
+ + + + + +
+ ) + } + return () + } +} + +/** + * 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;