Adding some fixes with login page.

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx

@@ -55,18 +55,18 @@ if (theme.current === "default") {
  * not want to serve the URL.
  * */
 class Base extends Component {
+
     constructor() {
         super();
-        this.state = {
+        this.state = {};
-            user: "admin"
-        }
     }
 
     render() {
+        this.setState();
         if (this.state.user) {
             return (
                 <div className="container">
-                    <BaseLayout>
+                    <BaseLayout state={this.state}>
                         <Switch>
                             <Route component={NotFound}/>
                         </Switch>
@@ -76,6 +76,14 @@ class Base extends Component {
         }
         return (<Redirect to={"/login"}/>)
     }
+
+    setState() {
+        if (this.props.location.state){
+            this.state = this.props.location.state;
+        } else {
+            this.state = {};
+        }
+    }
 }
 
 /**
@@ -85,17 +93,22 @@ class Base extends Component {
  *
  * */
 class Store extends Component {
+
+    constructor() {
+        super();
+    }
+
     render() {
         return (
             <div className="App">
                 <MuiThemeProvider muiTheme={muiTheme}>
-                <Router basename="publisher" history={history}>
+                    <Router basename="store" history={history}>
-                    <Switch>
+                        <Switch>
-                        <Route path="/login" component={Login}/>
+                            <Route path="/login" component={Login}/>
-                        <Route path="/logout" component={Login}/>
+                            <Route path="/logout" component={Login}/>
-                        <Route component={Base}/>
+                            <Route component={Base}/>
-                    </Switch>
+                        </Switch>
-                </Router>
+                    </Router>
                 </MuiThemeProvider>
             </div>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx

@@ -30,6 +30,7 @@ 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';
+import FlatButton from 'material-ui/FlatButton';
 
 /**
  * Base Layout:
@@ -39,12 +40,9 @@ import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
  * */
 class BaseLayout extends Component {
 
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
-        this.state = {
+        this.state = this.props.state;
-            notifications: 0,
-            user: 'Admin'
-        }
     }
 
     componentWillMount() {
@@ -55,25 +53,6 @@ class BaseLayout extends Component {
         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.
@@ -83,33 +62,51 @@ class BaseLayout extends Component {
         this.props.history.push(to);
     }
 
+    handleUserLogin() {
+        if (this.state.user) {
+            return (
+                <IconButton tooltip={this.state.user}>
+                    <ActionAccountCircle/>
+                </IconButton>
+            );
+        } else {
+            return (
+                <FlatButton label="Login"/>
+            );
+        }
+    }
+
+    handleNotification() {
+        if (this.state.user) {
+            return (
+                <Badge
+                    badgeContent={this.state.notifications}
+                    secondary={true}
+                    badgeStyle={{top: 12, right: 12}} >
+                    <IconButton tooltip="Notifications">
+                        <NotificationsIcon/>
+                    </IconButton>
+                </Badge>
+            );
+        }
+    }
+
     render() {
         return (
             <div>
-                <AppBar title="App Publisher"
+                <AppBar title="App Store"
                         iconElementRight={
                             <div>
-                                <Badge
+                                {this.handleNotification()}
-                                    badgeContent={this.state.notifications}
+                                {this.handleUserLogin()}
-                                    secondary={true}
-                                    badgeStyle={{top: 12, right: 12}}
-                                >
-                                    <IconButton tooltip="Notifications">
-                                        <NotificationsIcon/>
-                                    </IconButton>
-                                </Badge>
-                                <IconButton onClick={() => {
-                                    console.log("Clicked")
-                                }}>
-                                    <ActionAccountCircle/>
-                                </IconButton>
                             </div>
                         }
                 />
                 <div>
-                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
+                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '13%', left: '1%'}}
+                            open={true}>
                         <List>
-                           <ListItem primaryText="Applications"
+                            <ListItem primaryText="Applications"
                                       leftIcon={<Apps/>}
                                       initiallyOpen={false}
                                       primaryTogglesNestedList={true}
@@ -117,27 +114,10 @@ class BaseLayout extends Component {
                                       nestedItems={[
                                           <ListItem
                                               key={1}
-                                              primaryText="Create"
+                                              primaryText="Business" //TODO: categoryies ...
-                                              onClick={this.handleApplicationCreateClick.bind(this)}
+                                              leftIcon={<List/>}
-                                              leftIcon={<Add/>}
-                                          />]}
-                            />
-                            <ListItem primaryText="Platforms"
-                                      leftIcon={<DevicesOther/>}
-                                      initiallyOpen={false}
-                                      primaryTogglesNestedList={true}
-                                      onClick={this.handlePlatformClick.bind(this)}
-                                      nestedItems={[
-                                          <ListItem
-                                              key={1}
-                                              primaryText="Create"
-                                              onClick={this.handlePlatformCreateClick.bind(this)}
-                                              leftIcon={<Add/>}
                                           />]}
                             />
-                            <ListItem primaryText="Reviews"
-                                      onClick={this.handleReviewClick.bind(this)}
-                                      leftIcon={<Feedback/>}/>
                         </List>
                     </Drawer>
                 </div>
@@ -158,8 +138,11 @@ class BaseLayout extends Component {
 
 }
 
-BaseLayout.propTypes = {
+BaseLayout
+    .propTypes = {
     children: PropTypes.element
 };
 
-export default BaseLayout;
+export
+default
+BaseLayout;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx

@@ -19,10 +19,12 @@
 import qs from 'qs';
 import React, {Component} from 'react';
 import Checkbox from 'material-ui/Checkbox';
-import {Redirect, Switch} from 'react-router-dom';
+import {Redirect, Route} 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';
+import Store from '../App';
+
 
 //todo: remove the {TextValidator, ValidatorForm} and implement it manually.
 
@@ -39,10 +41,9 @@ class Login extends Component {
     constructor() {
         super();
         this.state = {
-            isLoggedIn: true,
+            isLoggedIn: false,
             referrer: "/",
             userName: "",
-            password: "",
             rememberMe: true
         }
     }
@@ -60,6 +61,15 @@ class Login extends Component {
 
     handleLogin(event) {
         event.preventDefault();
+        //TODO: send authentication request.
+        let location = {
+            pathname: this.state.referrer,
+            state: {
+                notifications: 0,
+                user: this.state.userName
+            }
+        };
+        this.props.history.push(location);
     }
 
     /**
@@ -95,16 +105,21 @@ class Login extends Component {
         );
     }
 
-    render() {
+    handleSuccessfulLogin() {
+        return (
+            <Redirect to='/store'/>
+        );
+    }
 
-        if (!this.state.isLoggedIn) {
+    render() {
+        if (!(this.state.isLoggedIn && this.state.userName)) {
             return (
                 <div>
 
                     {/*TODO: Style the components.*/}
 
                     <Card>
-                        <CardTitle title="WSO2 IoT App Publisher"/>
+                        <CardTitle title="WSO2 IoT App Store"/>
                         <CardActions>
                             <ValidatorForm
                                 ref="form"
@@ -141,11 +156,7 @@ class Login extends Component {
                     </Card>
                 </div>);
         } else {
-            return (
+            this.handleSuccessfulLogin();
-                <Switch>
-                    <Redirect to={this.state.referrer}/>
-                </Switch>
-            );
         }
     }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/index.js

@@ -5,5 +5,4 @@ import './index.css';
 
 
 ReactDOM.render(<Store />, document.getElementById('root'));
-console.log('Hello World!');