diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index e35d486222..fbc0f2daf1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -14,7 +14,8 @@ "antd": "^3.15.0", "react": "^16.8.4", "react-dom": "^16.8.4", - "react-scripts": "2.1.8" + "react-scripts": "2.1.8", + "react-router-dom": "latest" }, "devDependencies": { "@babel/core": "^7.0.0", @@ -33,7 +34,7 @@ "html-webpack-plugin": "^3.2.0", "img-loader": "^3.0.1", "less": "^3.9.0", - "less-loader": "^4.0.4", + "less-loader": "^4.1.0", "mini-css-extract-plugin": "^0.5.0", "mocha": "^5.2.0", "mock-local-storage": "^1.0.5", @@ -48,7 +49,7 @@ "react-intl": "^2.4.0", "redux": "^4.0.1", "sass-loader": "^6.0.7", - "style-loader": "^0.18.1", + "style-loader": "^0.18.2", "url-loader": "^1.1.2", "webpack": "^4.27.1", "webpack-cli": "^3.1.2", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.png b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.png deleted file mode 100644 index 2cf18f9cfd..0000000000 Binary files a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.png and /dev/null differ diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.svg b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.svg new file mode 100644 index 0000000000..05742db887 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.svg @@ -0,0 +1,798 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js index 5c76e235ec..495a057468 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js @@ -1,17 +1,18 @@ import React from "react"; -import { version, Button } from 'antd'; import "antd/dist/antd.css"; -import "./index.css"; +import {BrowserRouter, Route, Switch} from 'react-router-dom'; +import Dashboard from "./pages/dashboard" +import Login from "./pages/Login" class App extends React.Component { render() { return ( -
-

Current antd version: {version}

-

Please fork this codesandbox to reproduce your issue.

-

请 fork 这个链接来重现你碰到的问题。

- -
+ + + + + + ); } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js new file mode 100644 index 0000000000..f4faa2a348 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js @@ -0,0 +1,83 @@ +import React from "react"; +import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox,} from 'antd'; +import styles from './Login.less'; +const {Title} = Typography; + +class Login extends React.Component { + render() { + return ( +
+
+ + + + + + + + Login + + + + + + + + + +
+
+ + ); + } +} + +class NormalLoginForm extends React.Component { + handleSubmit = (e) => { + e.preventDefault(); + this.props.form.validateFields((err, values) => { + if (!err) { + console.log('Received values of form: ', values); + } + }); + } + + render() { + const { getFieldDecorator } = this.props.form; + return ( +
+ + {getFieldDecorator('userName', { + rules: [{ required: true, message: 'Please input your username!' }], + })( + } placeholder="Username" /> + )} + + + {getFieldDecorator('password', { + rules: [{ required: true, message: 'Please input your Password!' }], + })( + } type="password" placeholder="Password" /> + )} + + + {getFieldDecorator('remember', { + valuePropName: 'checked', + initialValue: true, + })( + Remember me + )} + Forgot password + + Or register now! + +
+ ); + } +} + +const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm); + +export default Login; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less new file mode 100644 index 0000000000..f04eeb84c8 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less @@ -0,0 +1,34 @@ +@nice-blue: #5B83AD; +@light-blue: @nice-blue + #111; + +.header { + color: @nice-blue; +} + +.main{ + background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg'); + background-repeat: no-repeat; + background-position: center 110px; + background-size: 100%; + + .header { + color: @nice-blue; + } + + +} + +.content{ + padding-top: 128px; +} + +.logo{ + height: 44px; + margin: auto; + width: 100%; + +} + +input{ + min-height: 0; +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js new file mode 100644 index 0000000000..ac86a24b68 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js @@ -0,0 +1,19 @@ +import React from "react"; +import { version, Button } from 'antd'; +import {Link} from 'react-router-dom'; + +class Dashboard extends React.Component { + render() { + return ( +
+

Currentdddddd antd version: {version}

+

Please fork this codesandbox to reproduce your issue.

+

请 fork 这个链接来重现你碰到的问题。

+ login + +
+ ); + } +} + +export default Dashboard; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js index bf87b97763..dcb16b0f5e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js @@ -68,13 +68,22 @@ const config = { }, { 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 - }] + use: [ + { + loader: "style-loader" + }, + { + loader: "css-loader", + options: { + sourceMap: true, + modules: true, + localIdentName: "[local]___[hash:base64:5]" + } + }, + { + loader: "less-loader" + } + ] }, { test: /\.(woff|woff2|eot|ttf|svg)$/,