Merge branch 'application-mgt-new' into 'application-mgt-new'

Add login

See merge request tcdlpds/carbon-device-mgt!3

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -18,7 +18,8 @@
     "react-highlight-words": "^0.16.0",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
-    "react-scripts": "2.1.8"
+    "react-scripts": "2.1.8",
+    "react-router": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js

@@ -13,19 +13,19 @@ import {Provider} from "react-redux";
 
 const routes = [
     {
-        path: '/publisher/Login',
+        path: '/publisher/login',
         component: Login
     },
     {
-        path: '/publisher/dashboard',
+        path: '/publisher',
         component: Dashboard,
         routes: [
             {
-                path: '/publisher/dashboard/apps',
+                path: '/publisher/apps',
                 component: Apps
             },
             {
-                path: '/publisher/dashboard/new-app',
+                path: '/publisher/new-app',
                 component: AddNewApp
             }
         ]

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js

@@ -1,9 +1,10 @@
 import React from "react";
-import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox,} from 'antd';
+import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
 import styles from './Login.less';
 import axios from 'axios';
 
 const {Title} = Typography;
+const {Text} = Typography;
 
 class Login extends React.Component {
     render() {
@@ -35,17 +36,41 @@ class Login extends React.Component {
 }
 
 class NormalLoginForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            inValid: false,
+            loading : false
+        };
+    }
+
     handleSubmit = (e) => {
+        const thisForm = this;
         e.preventDefault();
         this.props.form.validateFields((err, values) => {
+            thisForm.setState({
+                inValid: false
+            });
             if (!err) {
+                thisForm.setState({
+                    loading: true
+                });
                 console.log('Received values of form: ', values);
-                let data = "username="+values.username+"&password="+values.password+"&platform=publisher";
+                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);
-                    })
+                ).then(res => {
+                    if (res.status === 200) {
+                        window.location = res.data.url;
+                    }
+                }).catch(function (error) {
+                    if (error.response.status === 400) {
+                        thisForm.setState({
+                            inValid: true,
+                            loading: false
+                        });
+                    }
+                });
             }
 
         });
@@ -53,6 +78,14 @@ class NormalLoginForm extends React.Component {
 
     render() {
         const {getFieldDecorator} = this.props.form;
+        let errorMsg = "";
+        if (this.state.inValid) {
+            errorMsg = <Text type="danger">Invalid Login Details</Text>;
+        }
+        let loading = "";
+        if (this.state.loading) {
+            loading = <Text type="secondary">Loading..</Text>;
+        }
         return (
             <Form onSubmit={this.handleSubmit} className="login-form">
                 <Form.Item>
@@ -72,13 +105,16 @@ class NormalLoginForm extends React.Component {
                                placeholder="Password"/>
                     )}
                 </Form.Item>
+                {loading}
+                {errorMsg}
                 <Form.Item>
                     {getFieldDecorator('remember', {
                         valuePropName: 'checked',
                         initialValue: true,
                     })(
-                        <Checkbox>Remember me....</Checkbox>
+                        <Checkbox>Remember me</Checkbox>
                     )}
+                    <br/>
                     <a className="login-form-forgot" href="">Forgot password</a>
                     <Button block type="primary" htmlType="submit" className="login-form-button">
                         Log in

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -1,19 +1,20 @@
 import React from "react";
-import { Layout, Menu, Icon } from 'antd';
+import {Layout, Menu, Icon} from 'antd';
 
-const { Header, Content, Footer } = Layout;
+const {Header, Content, Footer} = Layout;
 
 import styles from './Dashboard.less';
 import Logo from "../../../public/images/logo.svg";
 import {Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
+import { Switch, Redirect } from 'react-router'
 
 
 class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            routes : props.routes
+            routes: props.routes
         }
     }
 
@@ -28,20 +29,24 @@ class Dashboard extends React.Component {
                         theme="light"
                         mode="horizontal"
                         defaultSelectedKeys={['2']}
-                        style={{ lineHeight: '64px' }}
+                        style={{lineHeight: '64px'}}
                     >
-                        <Menu.Item key="1"><Link to="apps"><Icon type="appstore" />Apps</Link></Menu.Item>
-                        <Menu.Item key="2"><Link to="apps"><Icon type="line-chart" />Apps</Link></Menu.Item>
-                        <Menu.Item key="3"><Link to="new-app"><Icon type="upload" />Add New App</Link></Menu.Item>
+                        <Menu.Item key="1"><Link to="apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
+                        <Menu.Item key="2"><Link to="apps"><Icon type="line-chart"/>Apps</Link></Menu.Item>
+                        <Menu.Item key="3"><Link to="new-app"><Icon type="upload"/>Add New App</Link></Menu.Item>
                     </Menu>
                 </Header>
-                <Content style={{ padding: '0 0' }}>
-                    {this.state.routes.map((route) => (
-                        <RouteWithSubRoutes key={route.path} {...route} />
-                    ))}
+                <Content style={{padding: '0 0'}}>
+                    <Switch>
+                        <Redirect exact from="/publisher" to="/publisher/apps"/>
+                        {this.state.routes.map((route) => (
+                            <RouteWithSubRoutes key={route.path} {...route} />
+                        ))}
+
+                    </Switch>
 
                 </Content>
-                <Footer style={{ textAlign: 'center' }}>
+                <Footer style={{textAlign: 'center'}}>
                     ©2019 entgra.io
                 </Footer>
             </Layout>