Add minor UI fixes to APPM UI

The following changes are with this commit
- Display wrong credentials error in Login form
- Display tags and categories in APPM store release view

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

@@ -107,10 +107,22 @@ class NormalLoginForm extends React.Component {
                         window.location = redirectUrl;
                     }
                 }).catch(function (error) {
-                    handleApiError(error, "Error occurred while trying to login.");
+                    if (error.hasOwnProperty("response") && error.response.status === 401) {
                         thisForm.setState({
-                        loading: false
+                            loading: false,
+                            inValid: true
+                        });
+                    } else {
+                        notification["error"]({
+                            message: "There was a problem",
+                            duration: 10,
+                            description: message,
+                        });
+                        thisForm.setState({
+                            loading: false,
+                            inValid: false
                         });
+                    }
                 });
             }
 
@@ -149,14 +161,6 @@ class NormalLoginForm extends React.Component {
                 {loading}
                 {errorMsg}
                 <Form.Item>
-                    {getFieldDecorator('remember', {
-                        valuePropName: 'checked',
-                        initialValue: true,
-                    })(
-                        <Checkbox>Remember me</Checkbox>
-                    )}
-                    <br/>
-                    <a className="login-form-forgot" href="">Forgot password</a>
                     <Button loading={this.state.loading} block type="primary" htmlType="submit" className="login-form-button">
                         Log in
                     </Button>

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

@@ -31,7 +31,7 @@
     "react-twemoji": "^0.2.3",
     "react-virtualized": "^9.21.1",
     "reqwest": "^2.0.5",
-    "storm-react-diagrams": "^5.2.1"
+    "shade-blend-color": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -17,11 +17,12 @@
  */
 
 import React from "react";
-import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon, Spin, Tabs} from "antd";
+import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon, Spin, Tabs, Tag} from "antd";
 import "../../../App.css";
 import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
 import axios from "axios";
+import pSBC from "shade-blend-color";
 import AppInstallModal from "./install/AppInstallModal";
 import AppUninstallModal from "./install/AppUninstallModal";
 import {withConfigContext} from "../../../context/ConfigContext";
@@ -122,6 +123,7 @@ class ReleaseView extends React.Component {
 
     render() {
         const {app, deviceType} = this.props;
+        const config = this.props.context;
         const release = app.applicationReleases[0];
 
         let metaData = [];
@@ -199,7 +201,35 @@ class ReleaseView extends React.Component {
                                 {release.description}
                             </Paragraph>
                             <Divider/>
+                            <Text>CATEGORIES</Text>
+                            <div style={{marginTop: 8}}>
+                                {
+                                    app.categories.map(category => {
+                                        return (
+                                            <Tag color={pSBC(0.30, config.theme.primaryColor)} key={category}
+                                                 style={{marginBottom: 5}}>
+                                                {category}
+                                            </Tag>
+                                        );
+                                    })
+                                }
+                            </div>
+                            <Divider/>
+                            <Text>TAGS</Text>
+                            <div style={{marginTop: 8}}>
+                                {
+                                    app.tags.map(tag => {
+                                        return (
+                                            <Tag color="#34495e" key={tag} style={{marginBottom: 5}}>
+                                                {tag}
+                                            </Tag>
+                                        );
+                                    })
+                                }
+                            </div>
+                            <Divider/>
                             <Text>META DATA</Text>
+
                             <Row>
                                 {
                                     metaData.map((data, index) => {

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

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
+import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox, notification} from 'antd';
 import './Login.css';
 import axios from 'axios';
 import {withConfigContext} from "../context/ConfigContext";
@@ -109,11 +109,20 @@ class NormalLoginForm extends React.Component {
                         window.location = redirectUrl;
                     }
                 }).catch(function (error) {
-                    handleApiError(error, "Error occurred while trying to load groups.");
+                    if (error.hasOwnProperty("response") && error.response.status === 401) {
-                    if (error.hasOwnProperty("response") && error.response.status === 400) {
                         thisForm.setState({
-                            inValid: true,
+                            loading: false,
-                            loading: false
+                            inValid: true
+                        });
+                    } else {
+                        notification["error"]({
+                            message: "There was a problem",
+                            duration: 10,
+                            description: message,
+                        });
+                        thisForm.setState({
+                            loading: false,
+                            inValid: false
                         });
                     }
                 });