Login organization (#206)

* login ctrl to angular 2

login fix

* organization

 regenerating bundle

app/app.module.ts

@@ -22,6 +22,7 @@ import { NetworkModule } from "./networks/network.module";
 import { ServicelbModule } from "./service_lbs/servicelb.module";
 import { OrganizationModule } from "./organizations/organization.module";
 import { NodesService } from "./components/utils/nodesservice";
+import {LoginComponent} from "./login/loginctrl";
 
 @NgModule({
     imports: [
@@ -35,7 +36,8 @@ import { NodesService } from "./components/utils/nodesservice";
         OrganizationModule
     ],
     declarations: [
-        DashboardComponent
+        DashboardComponent,
+        LoginComponent
     ],
     providers: [
         ApplicationGroupsModel,

app/dashboard/dashboardctrl.ts

@@ -1,7 +1,7 @@
 /**
  * Created by vjain3 on 3/11/16.
  */
-import { Component, OnDestroy } from '@angular/core';
+import {Component, OnDestroy, NgZone} from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { ApplicationGroupsModel } from "../components/models/applicationgroupsmodel";
@@ -20,43 +20,37 @@ export class DashboardComponent implements OnDestroy {
     groups: number = 0;
     networkpolicies: number = 0;
     storagepolicies: number = 0;
-    observable: Observable<any>;
     subscription: Subscription;
 
     constructor(private networksModel:NetworksModel,
                 private applicationGroupsModel:ApplicationGroupsModel,
-                private policiesModel:PoliciesModel) {
+                private policiesModel:PoliciesModel,
+                private ngZone:NgZone) {
         var dashboardComponent = this;
 
         function getDashboardInfo(reload) {
-            networksModel.get(reload)
-                .then(function (result) {
-                    dashboardComponent.networks = result.length;
-                });
-            applicationGroupsModel.get(reload)
-                .then(function (result) {
-                    dashboardComponent.groups = result.length;
-                });
-            policiesModel.get(reload)
-                .then(function (result) {
-                    dashboardComponent.networkpolicies = result.length;
-                });
+            ngZone.run(() => {
+                networksModel.get(reload)
+                    .then(function (result) {
+                        dashboardComponent.networks = result.length;
+                    });
+                applicationGroupsModel.get(reload)
+                    .then(function (result) {
+                        dashboardComponent.groups = result.length;
+                    });
+                policiesModel.get(reload)
+                    .then(function (result) {
+                        dashboardComponent.networkpolicies = result.length;
+                    });
+            })
         }
 
         //Load from cache for quick display initially
         getDashboardInfo(false);
 
-        dashboardComponent.observable = Observable.create(function subscribe(observer) {
-            var id = setInterval(() => {
-                observer.next();
-            }, 5000);
-            return function unsubscribe() {
-                clearInterval(id);
-            }
-        });
-        dashboardComponent.subscription = dashboardComponent.observable.subscribe(() => {
+        this.subscription = Observable.interval(5000).subscribe(() => {
             getDashboardInfo(true);
-        });
+        })
     }
 
     ngOnDestroy() {

app/login/login.css

@@ -0,0 +1,17 @@
+body{
+    /* This image will be displayed fullscreen */
+    background: url('../images/loginbackground.jpeg') no-repeat center center;
+
+    /* Workaround for some mobile browsers */
+    min-height: 100%;
+
+    background-size: cover;
+}
+
+.copyright {
+    max-width: 450px;
+}
+
+.login-seg {
+    margin-top: 600px;
+}

app/login/login.html

@@ -1,44 +1,25 @@
-<style>
-    body {
-        /* This image will be displayed fullscreen */
-        background: url('images/loginbackground.jpeg') no-repeat center center;
-
-        /* Workaround for some mobile browsers */
-        min-height: 100%;
-
-        background-size: cover;
-    }
-
-    .column {
-        max-width: 450px;
-    }
-
-    .segment {
-        margin-top: 600px;
-    }
-</style>
 <div class="ui middle aligned center aligned grid container">
-    <div class="column">
+    <div class="column copyright">
 
         <form id="loginForm" name="loginCtrl.form" class="ui form" role="form"
-              ng-submit="loginCtrl.login()" novalidate>
-            <div class="ui active inverted dimmer" ng-show="loginCtrl.showLoader">
+              (submit)="login()" novalidate #loginForm="ngForm">
+            <div class="ui active inverted dimmer" *ngIf="loginCtrl.showLoader">
                 <div class="ui loader"></div>
             </div>
 
-            <div class="ui stacked segment" style="margin-top: 180px">
+            <div class="ui stacked segment login-seg" style="margin-top: 180px">
                 <h1 class="header" style="margin-left:6px; margin-right:auto;">
                     <img class="ui image" src="images/loginlogo.svg" height="54" width="450">
                 </h1>
                 <div class="ui section divider"></div>
 
 
                 <div class="field">
-                    <input type="text" id="username" name="username" ng-model="loginCtrl.username"
+                    <input type="text" id="username" name="username" [(ngModel)]="loginCtrl.username"
                            placeholder="User Name">
                 </div>
                 <div class="field">
-                    <input type="password" id="password" name="password" ng-model="loginCtrl.password"
+                    <input type="password" id="password" name="password" [(ngModel)]="loginCtrl.password"
                            placeholder="Password">
                 </div>
 
@@ -47,7 +28,7 @@ <h1 class="header" style="margin-left:6px; margin-right:auto;">
                 </button>
                 <div class="ui section divider"></div>
                 <div class="ui center aligned grid">
-                    <div class="column">
+                    <div class="column copyright">
                         <h6 class="ui disabled header">
                             Copyright (c) 2016 Cisco Systems, Inc. All rights reserved.
                         </h6>

app/login/loginctrl.ts

@@ -1,30 +1,38 @@
-/**
- * Created by vjain3 on 5/19/16.
- */
-angular.module('contiv.login')
-    .config(['$stateProvider', function ($stateProvider) {
-        $stateProvider
-            .state('contiv.login', {
-                url: '/',
-                templateUrl: 'login/login.html',
-                controller: 'LoginCtrl as loginCtrl'
-            })
-        ;
-    }])
-    .controller('LoginCtrl', ['$state', 'CRUDHelperService',
-        function ($state, CRUDHelperService) {
-            var loginCtrl = this;
+import {Component, Inject, OnInit, ViewEncapsulation} from "@angular/core";
+import {StateService} from "angular-ui-router";
+import {CRUDHelperService} from "../components/utils/crudhelperservice";
+@Component({
+    selector: 'login',
+    templateUrl: 'login/login.html',
+    styles: [require('./login.css')],
+    encapsulation: ViewEncapsulation.None
+})
 
-            function returnToDashboard() {
-                $state.go('contiv.menu.dashboard', {username: loginCtrl.username});
-            }
+export class LoginComponent implements OnInit{
+    public showLoader: boolean;
+    public showServerError: boolean;
+    public serverErrorMessage: string;
+    private crudHelperService: CRUDHelperService;
+    public loginCtrl: any;
+    public username: string;
+    public password: string;
+    constructor(@Inject('$state') private $state: StateService,
+                crudHelperService: CRUDHelperService){
+        this.showLoader = true;
+        this.showServerError = false;
+        this.serverErrorMessage = '';
+        this.crudHelperService = crudHelperService;
+        this.username = '';
+        this.password = '';
+        this.loginCtrl = this;
+    }
 
-            function login() {
-                returnToDashboard();
-            }
+    ngOnInit(){
+        this.crudHelperService.stopLoader(this);
+        this.crudHelperService.hideServerError(this);
+    }
 
-            CRUDHelperService.stopLoader(loginCtrl);
-            CRUDHelperService.hideServerError(loginCtrl);
-            loginCtrl.login = login;
-
-        }]);
+    login(){
+        this.$state.go('contiv.menu.dashboard', {username: this.username});
+    }
+}

app/login/module.ts

@@ -1,4 +1,11 @@
 /**
  * Created by vjain3 on 5/19/16.
  */
-angular.module('contiv.login', ['contiv.utils']);
+angular.module('contiv.login', ['contiv.utils'])
+    .config(['$stateProvider', function ($stateProvider) {
+        $stateProvider
+            .state('contiv.login', {
+                url: '/',
+                component: 'login'
+            })
+    }]);

app/main.browser.ts

@@ -43,6 +43,10 @@ import {NetworkCreateComponent} from "./networks/networkcreatectrl";
 import {ServicelbCreateComponent} from "./service_lbs/servicelbcreatectrl";
 import {ServicelbDetailsComponent} from "./service_lbs/servicelbdetailsctrl";
 import {ClusterSettingsComponent} from "./settings/clustersettingctrl";
+import {LoginComponent} from "./login/loginctrl";
+import {OrganizationCreateComponent} from "./organizations/organizationcreatectrl";
+import {OrganizationDetailComponent} from "./organizations/organizationdetailsctrl";
+
 
 upgradeAdapter.upgradeNg1Provider('$state');
 upgradeAdapter.upgradeNg1Provider('$stateParams');
@@ -103,6 +107,11 @@ angular.module('contiv.servicelbs')
     .directive('servicelbDetails', upgradeAdapter.downgradeNg2Component(ServicelbDetailsComponent) as angular.IDirectiveFactory);
 
 angular.module('contiv.organizations')
-    .directive('organizationlist', upgradeAdapter.downgradeNg2Component(OrganizationListComponent) as angular.IDirectiveFactory);
+    .directive('organizationlist', upgradeAdapter.downgradeNg2Component(OrganizationListComponent) as angular.IDirectiveFactory)
+    .directive('organizationcreate', upgradeAdapter.downgradeNg2Component(OrganizationCreateComponent) as angular.IDirectiveFactory)
+    .directive('organizationdetails', upgradeAdapter.downgradeNg2Component(OrganizationDetailComponent) as angular.IDirectiveFactory);
+
+angular.module('contiv.login')
+    .directive('login', upgradeAdapter.downgradeNg2Component(LoginComponent) as angular.IDirectiveFactory);
 
 upgradeAdapter.bootstrap(document.documentElement, ['contivApp']);