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 a5e7d491a91..3aa97aca334 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 @@ -12,6 +12,7 @@ "dependencies": { "acorn": "^6.1.1", "antd": "^3.15.0", + "axios": "^0.18.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-highlight-words": "^0.16.0", @@ -49,6 +50,7 @@ "react": "^15.6.2", "react-dom": "^15.6.2", "react-intl": "^2.4.0", + "react-redux": "^7.0.2", "redux": "^4.0.1", "sass-loader": "^6.0.7", "style-loader": "^0.18.2", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css index b41d297cab1..4fea44459f7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css @@ -31,3 +31,7 @@ transform: rotate(360deg); } } + +.ant-upload.ant-upload-drag { + height: 170px; +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js index 166528a210c..734182829b7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js @@ -7,7 +7,8 @@ import Dashboard from "./pages/dashboard/Dashboard"; import Apps from "./pages/dashboard/apps/Apps"; import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp"; import './index.css'; - +import store from "./js/store/index"; +import {Provider} from "react-redux"; const routes = [ @@ -29,11 +30,14 @@ const routes = [ } ] } -] - +]; -ReactDOM.render( , document.getElementById('root')); +ReactDOM.render( + + + , + document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js new file mode 100644 index 00000000000..2cd535bbc21 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/action-types.js @@ -0,0 +1 @@ +export const LOGIN = "LOGIN"; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js new file mode 100644 index 00000000000..08eb66ed6da --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js @@ -0,0 +1,9 @@ +const initialState = { + +}; + +function rootReducer(state = initialState, action) { + return state; +} + +export default rootReducer; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js new file mode 100644 index 00000000000..7209a4b021e --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/store/index.js @@ -0,0 +1,4 @@ +import { createStore } from "redux"; +import rootReducer from "../reducers/index"; +const store = createStore(rootReducer); +export default store; \ No newline at end of file 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 index f4faa2a3489..d6b1b3fa15f 100644 --- 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 @@ -1,6 +1,8 @@ import React from "react"; import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox,} from 'antd'; import styles from './Login.less'; +import axios from 'axios'; + const {Title} = Typography; class Login extends React.Component { @@ -38,26 +40,36 @@ class NormalLoginForm extends React.Component { this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); + let data = "username="+values.username+"&password="+values.password+"&platform=publisher"; + axios.post('https://localhost:9443/api/application-mgt-handler/v1.0/login', data + ).then(res => { + console.log(res); + console.log(res.data); + }) } + }); - } + }; render() { - const { getFieldDecorator } = this.props.form; + const {getFieldDecorator} = this.props.form; return (
- {getFieldDecorator('userName', { - rules: [{ required: true, message: 'Please input your username!' }], + {getFieldDecorator('username', { + rules: [{required: true, message: 'Please input your username!'}], })( - } placeholder="Username" /> + } + placeholder="Username"/> )} {getFieldDecorator('password', { - rules: [{ required: true, message: 'Please input your Password!' }], + rules: [{required: true, message: 'Please input your Password!'}], })( - } type="password" placeholder="Password" /> + } type="password" + placeholder="Password"/> )} @@ -65,19 +77,18 @@ class NormalLoginForm extends React.Component { valuePropName: 'checked', initialValue: true, })( - Remember me + Remember me.... )} Forgot password - Or register now!
); } } -const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm); +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/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js index 49283784f92..3965c506c63 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js @@ -1,12 +1,33 @@ import React from "react"; import "antd/dist/antd.css"; -import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd"; -import Step1 from "./Step1" -import Step2 from "./Step2" -import Step3 from "./Step3" +import { + PageHeader, + Typography, + Card, + Steps, + Button, + message, + Row, + Col, + Tag, + Tooltip, + Input, + Icon, + Select, + Switch, + Form, + Upload, + Divider +} from "antd"; +import Step1 from "./Step1"; +import Step2 from "./Step2"; +import Step3 from "./Step3"; +import styles from "./Style.less"; +import IconImage from "./IconImg"; +import UploadScreenshots from "./UploadScreenshots"; const Paragraph = Typography; - +const Dragger = Upload.Dragger; const routes = [ { path: 'index', @@ -22,6 +43,23 @@ const routes = [ }, ]; +const props = { + name: 'file', + multiple: false, + action: '//jsonplaceholder.typicode.com/posts/', + onChange(info) { + const status = info.file.status; + if (status !== 'uploading') { + console.log(info.file, info.fileList); + } + if (status === 'done') { + message.success(`${info.file.name} file uploaded successfully.`); + } else if (status === 'error') { + message.error(`${info.file.name} file upload failed.`); + } + }, +}; + const Step = Steps.Step; const steps = [{ @@ -36,6 +74,96 @@ const steps = [{ }]; +const {Option} = Select; +const {TextArea} = Input; +const InputGroup = Input.Group; + +const formItemLayout = { + labelCol: { + span: 4, + }, + wrapperCol: { + span: 20, + }, +}; + + + +class EditableTagGroup extends React.Component { + state = { + tags: [], + inputVisible: false, + inputValue: '', + }; + + handleClose = (removedTag) => { + const tags = this.state.tags.filter(tag => tag !== removedTag); + console.log(tags); + this.setState({tags}); + } + + showInput = () => { + this.setState({inputVisible: true}, () => this.input.focus()); + } + + handleInputChange = (e) => { + this.setState({inputValue: e.target.value}); + } + + handleInputConfirm = () => { + const {inputValue} = this.state; + let {tags} = this.state; + if (inputValue && tags.indexOf(inputValue) === -1) { + tags = [...tags, inputValue]; + } + console.log(tags); + this.setState({ + tags, + inputVisible: false, + inputValue: '', + }); + } + + saveInputRef = input => this.input = input + + render() { + const {tags, inputVisible, inputValue} = this.state; + return ( +
+ {tags.map((tag, index) => { + const isLongTag = tag.length > 20; + const tagElem = ( + this.handleClose(tag)}> + {isLongTag ? `${tag.slice(0, 20)}...` : tag} + + ); + return isLongTag ? {tagElem} : tagElem; + })} + {inputVisible && ( + + )} + {!inputVisible && ( + + New Tag + + )} +
+ ); + } +} + class AddNewApp extends React.Component { constructor(props) { @@ -45,6 +173,12 @@ class AddNewApp extends React.Component { }; } + tags = []; + + addTag(key, value){ + this.tags.push(); + } + next() { const current = this.state.current + 1; this.setState({current}); @@ -59,6 +193,8 @@ class AddNewApp extends React.Component { render() { const {current} = this.state; const Content = steps[current].content; + this.addTag('1','Lorem'); + this.addTag('2','Ipsum'); return (
- + -
- - {steps.map(item => )} - - -
- { - current < steps.length - 1 - && - } - { - current === steps.length - 1 - && - } - { - current > 0 - && ( - - ) - } -
-
+ + +
+
+ + + + + + + + + + +