migrated auth_service, session and auth controller to typescript. renamed articl…

…edirective to articleView. fixed articleView test.

migrated auth_service, session and auth controller to typescript. renamed articl…
…edirective to articleView. fixed articleView test.
ABNER SILVA DE OLIVEIRA
1 parent 807f6df6
Showing 30 changed files with 320 additions and 241 deletions Show diff stats
.vscode/settings.json
src/app/cms/cms.component.ts
src/app/components/auth/auth.controller.js
src/app/components/auth/auth_controller.ts
src/app/components/auth/auth_events.ts
src/app/components/auth/auth_service.ts
src/app/components/auth/noosfero_root_scope.ts
src/app/components/auth/session.ts
src/app/components/noosfero-articles/article/article.directive.spec.ts
src/app/components/noosfero-articles/article/article.directive.ts
src/app/components/noosfero-articles/article/article_view.spec.ts
src/app/components/noosfero-articles/article/article_view.ts
src/app/components/noosfero-articles/blog/blog.component.ts
src/app/components/noosfero-boxes/boxes.component.ts
src/app/content-viewer/content-viewer-actions.component.ts
src/app/content-viewer/content-viewer.component.ts
src/app/index.config.ts
src/app/index.module.ts
src/app/index.route.ts
src/app/index.run.ts
@@ -4,5 +4,7 @@
         "**/.git": true,
         "**/.DS_Store": true,
         "src/app/*.js": false
-    }
+    },
+    "editor.fontSize": 14,
+    "typescript.useCodeSnippetsOnMethodSuggest": true
 }
 \ No newline at end of file
 import {StateConfig, Component, Inject} from 'ng-forward';
-
+import {Profile} from "./../models/interfaces";
 @Component({
     selector: 'cms',
     templateUrl: "app/cms/cms.html"
@@ -10,19 +10,19 @@ export class Cms {
     article: any = {};
     profile: any;
  
-    constructor(private noosfero, private $stateParams, private $httpParamSerializer, private $state, private SweetAlert) {
+    constructor(private noosfero: any/* TODO convert noosferoService */, private $stateParams: ng.ui.IStateParamsService, private $httpParamSerializer: any, private $state: ng.ui.IStateService, private SweetAlert: any) {
  
     }
  
     save() {
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: Profile) => {
             return this.noosfero.profiles.one(profile.id).customPOST(
                 { article: this.article },
                 'articles',
                 {},
                 { 'Content-Type': 'application/json' }
             )
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
             this.SweetAlert.swal({
                 title: "Good job!",
@@ -1,17 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .controller('AuthController', AuthController);
-
-
-  /** @ngInject */
-  function AuthController(noosfero, $log, $stateParams, AuthService) {
-    var vm = this;
-    vm.credentials = {};
-    vm.login = function() {
-      AuthService.login(vm.credentials);
-    }
-  }
-})();
@@ -0,0 +1,22 @@
+import {Credentials} from "./../../models/interfaces";
+import {AuthService} from "./auth_service";
+
+export class AuthController {
+
+    static $inject = ["noosfero", "$log", "$stateParams", "AuthService"];
+
+    constructor(
+        private noosfero: any,
+        private $log: ng.ILogService,
+        private $stateParams: any,
+        private AuthService: AuthService
+    ) {
+
+    }
+
+    credentials: Credentials;
+
+    login() {
+        this.AuthService.login(this.credentials);
+    }
+}
 \ No newline at end of file
-
-
 export interface IAuthEvents {
     loginSuccess: string;
     loginFailed: string;
 import {Injectable, Inject} from "ng-forward";
  
-import {Credentials} from "./../../models/interfaces";
+import {Credentials, NoosferoRootScope, User, UserResponse} from "./../../models/interfaces";
 import {Session} from "./session";
-import {NoosferoRootScope} from "./noosfero_root_scope";
+
 import {AUTH_EVENTS, IAuthEvents} from "./auth_events";
  
-@Injectable
-@Inject("$q", "$http", "$rootScope", Session, "$log", "AUTH_EVENTS")
+@Injectable()
+@Inject("$q", "$http", "$rootScope", "Session", "$log", "AUTH_EVENTS")
 export class AuthService {
+
     constructor(private $q: ng.IQService,
         private $http: ng.IHttpService,
         private $rootScope: NoosferoRootScope,
-        private Session: Session,
+        private session: Session,
         private $log: ng.ILogService,
-        private AUTH_EVENTS: IAuthEvents) {
+        private auth_events: IAuthEvents) {
  
     }
  
-    private loginSuccessCallback(response) {
+    loginFromCookie() {
+        let url: string = '/api/v1/login_from_cookie';
+        return this.$http.post(url, null).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
+    }
+
+
+    private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
         this.$log.debug('AuthService.login [SUCCESS] response', response);
-        let currentUser = this.Session.create(response.data);
+        let currentUser: User = this.session.create(response.data);
         this.$rootScope.currentUser = currentUser;
-        this.$rootScope.$broadcast(this.AUTH_EVENTS.loginSuccess, currentUser);
+        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
         return currentUser;
     }
  
     login(credentials: Credentials) {
         let url = '/api/v1/login';
         let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
-        return this.$http.post(url, encodedData).then(this.loginSuccessCallback, this.loginFailedCallback);
+        return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
     }
  
-    private loginFailedCallback(response) {
+    private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
         this.$log.debug('AuthService.login [FAIL] response', response);
-        this.$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
+        this.$rootScope.$broadcast(this.auth_events.loginFailed);
         // return $q.reject(response);
         return null;
     }
  
     public logout() {
-        this.Session.destroy();
+        this.session.destroy();
         this.$rootScope.currentUser = undefined;
-        this.$rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
-        this.$http.jsonp('/account/logout'); //FIXME logout from noosfero to sync login state
+        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+        this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
     }
  
     public isAuthenticated() {
-        return !!this.Session.getCurrentUser();
+        return !!this.session.getCurrentUser();
     }
  
-    public isAuthorized(authorizedRoles) {
+    public isAuthorized(authorizedRoles: string | string[]) {
         if (!angular.isArray(authorizedRoles)) {
-            authorizedRoles = [authorizedRoles];
+            authorizedRoles = [<string>authorizedRoles];
         }
-        return (this.isAuthenticated() && authorizedRoles.indexOf(this.Session.getCurrentUser().userRole) !== -1);
+        return (this.isAuthenticated() && authorizedRoles.indexOf(this.session.getCurrentUser().userRole) !== -1);
     }
 }
 \ No newline at end of file
@@ -1,5 +0,0 @@
-import {User} from "./../../models/interfaces";
-
-export interface NoosferoRootScope extends ng.IScope {
-    currentUser: User;
-}
 \ No newline at end of file
 import {Injectable, Inject} from "ng-forward";
+import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
  
 @Injectable()
 @Inject("$localStorage", "$log")
 export class Session {
-    constructor(private $localStorage, $log) {
+
+    constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
  
     }
  
-    create = function(data) {
+    create(data: UserResponse): User {
         this.$localStorage.currentUser = data.user;
         this.$log.debug('User session created.', this.$localStorage.currentUser);
         return this.$localStorage.currentUser;
     };
  
-    destroy = function() {
+    destroy() {
         delete this.$localStorage.currentUser;
         this.$log.debug('User session destroyed.');
     };
  
-    getCurrentUser = function() {
+    getCurrentUser(): User {
         return this.$localStorage.currentUser;
     };
  
@@ -1,85 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component} from 'ng-forward';
-
-import {ArticleDirective} from './article.directive';
-
-// Instantiate the Builder, this part is different than ng2.
-// In ng2 you inject tcb.
-const tcb = new TestComponentBuilder();
-
-// this htmlTemplate will be re-used between the container components in this spec file 
-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
-
-
-describe("Article Directive", () => {
-    
-    
-    // the karma preprocessor html2js transform the templates html into js files which put
-    // the templates to the templateCache into the module templates
-    // we need to load the module templates here as the template for the 
-    // component NoosferoArtileDirective will be load on our tests
-    beforeEach(angular.mock.module("templates"));
-
-    it("receives the article and profile as inputs", done => {
-
-        // Creating a container component (ArticleContainerComponent) to include 
-        // the component under test (ArticleDirective)  
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] })
-        class ArticleContainerComponent {
-            article = { type: 'anyArticleType' };
-            profile = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        // uses the TestComponentBuilder instance to initialize the component
-        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
-            // and here we can inspect and run the test assertions 
-            let myComponent: ArticleContainerComponent = fixture.componentInstance;
-
-            console.log(myComponent);
-
-            // assure the article object inside the ArticleDirective matches
-            // the provided through the parent component
-            expect(myComponent.article.type).toEqual("anyArticleType");
-            expect(myComponent.profile.name).toEqual("profile-name");
-
-            myComponent.metodoAsync(() => {
-                done();
-            });
-            // done needs to be called (it isn't really needed, as we can read in
-            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
-            // because createAsync in ng-forward is not really async, but as the intention 
-            // here is write tests in angular 2 ways, this is recommended
-            done();
-        });
-    });
-
-
-    it("renders a directive which matches to the article type", done => {
-        // NoosferoTinyMceArticle component created to check if it will be used
-        // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective)
-        // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
-        @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
-        class NoosferoTinyMceArticle {
-            @Input() article: any;
-            @Input() profile: any;
-        }
-
-        // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] })
-        class CustomArticleType {
-            article = { type: 'TinyMceArticle' };
-            profile = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-        tcb.createAsync(CustomArticleType).then(fixture => {
-            let myComponent: CustomArticleType = fixture.componentInstance;
-            expect(myComponent.article.type).toEqual("TinyMceArticle");
-            expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
-            done();
-        });
-    });
-
-});
 \ No newline at end of file
@@ -1,43 +0,0 @@
-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
-import {NoosferoArticleBlog} from "../blog/blog.component";
-
-@Component({
-    selector: 'noosfero-default-article',
-    templateUrl: 'app/components/noosfero-articles/article/article.html'
-})
-export class ArticleView {
-
-    @Input() article: any;
-    @Input() profile: any;
-
-}
-
-@Component({
-    selector: 'noosfero-article',
-    template: 'not-used',
-    directives: [ArticleView, NoosferoArticleBlog]
-})
-@Inject("$element", "$scope", "$injector", "$compile")
-export class ArticleDirective {
-
-    @Input() article: any;
-    @Input() profile: any;
-    directiveName: string;
-
-    ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
-        this.directiveName = "noosfero-default-article";
-        if (this.$injector.has(specificDirective + 'Directive')) {
-            this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        }
-        this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
-    }
-
-    constructor(
-        private $element: any,
-        private $scope: ng.IScope,
-        private $injector: ng.auto.IInjectorService,
-        private $compile: ng.ICompileService) {
-
-    }
-}
@@ -0,0 +1,108 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component} from 'ng-forward';
+
+import {ArticleView, ArticleDefaultView} from './article_view';
+
+// Instantiate the Builder, this part is different than ng2.
+// In ng2 you inject tcb.
+const tcb = new TestComponentBuilder();
+
+// this htmlTemplate will be re-used between the container components in this spec file 
+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
+
+
+describe("ArticleView Component", () => {
+
+    // the karma preprocessor html2js transform the templates html into js files which put
+    // the templates to the templateCache into the module templates
+    // we need to load the module templates here as the template for the 
+    // component Noosfero ArtileView will be load on our tests
+    beforeEach(angular.mock.module("templates"));
+
+    it("renders the default component when no specific component is found", (done: Function) => {
+        // Creating a container component (ArticleContainerComponent) to include 
+        // the component under test (ArticleView)  
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
+        class ArticleContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        // uses the TestComponentBuilder instance to initialize the component
+        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
+            // and here we can inspect and run the test assertions
+
+            // gets the children component of ArticleContainerComponent 
+            let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // and checks if the article View rendered was the Default Article View
+            expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
+
+            // done needs to be called (it isn't really needed, as we can read in
+            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+            // because createAsync in ng-forward is not really async, but as the intention 
+            // here is write tests in angular 2 ways, this is recommended
+            done();
+        });
+    });
+
+    it("receives the article and profile as inputs", (done: Function) => {
+
+        // Creating a container component (ArticleContainerComponent) to include 
+        // the component under test (ArticleView)  
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
+        class ArticleContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        // uses the TestComponentBuilder instance to initialize the component
+        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
+            // and here we can inspect and run the test assertions 
+            let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // assure the article object inside the ArticleView matches
+            // the provided through the parent component
+            expect(articleView.article.type).toEqual("anyArticleType");
+            expect(articleView.profile.name).toEqual("profile-name");
+
+            // done needs to be called (it isn't really needed, as we can read in
+            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+            // because createAsync in ng-forward is not really async, but as the intention 
+            // here is write tests in angular 2 ways, this is recommended
+            done();
+        });
+    });
+
+
+    it("renders a article view which matches to the article type", done => {
+        // NoosferoTinyMceArticle component created to check if it will be used
+        // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
+        // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
+        @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
+        class TinyMceArticleView {
+            @Input() article: any;
+            @Input() profile: any;
+        }
+
+        // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView, TinyMceArticleView] })
+        class CustomArticleType {
+            article = { type: 'TinyMceArticle' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+        tcb.createAsync(CustomArticleType).then(fixture => {
+            let myComponent: CustomArticleType = fixture.componentInstance;
+            expect(myComponent.article.type).toEqual("TinyMceArticle");
+            expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
+            done();
+        });
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,43 @@
+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
+import {NoosferoArticleBlog} from "../blog/blog.component";
+
+@Component({
+    selector: 'noosfero-default-article',
+    templateUrl: 'app/components/noosfero-articles/article/article.html'
+})
+export class ArticleDefaultView {
+
+    @Input() article: any;
+    @Input() profile: any;
+
+}
+
+@Component({
+    selector: 'noosfero-article',
+    template: 'not-used',
+    directives: [ArticleDefaultView, NoosferoArticleBlog]
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleView {
+
+    @Input() article: any;
+    @Input() profile: any;
+    directiveName: string;
+
+    ngOnInit() {
+        let specificDirective = 'noosfero' + this.article.type;
+        this.directiveName = "noosfero-default-article";
+        if (this.$injector.has(specificDirective + 'Directive')) {
+            this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+        this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
+    }
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) {
+
+    }
+}
 import {Component, Input, Inject} from "ng-forward";
  
+import {Article, Profile} from "./../../../models/interfaces";
  
 @Component({
     selector: "noosfero-blog",
@@ -8,15 +9,15 @@ import {Component, Input, Inject} from &quot;ng-forward&quot;;
 @Inject("noosfero", "$scope")
 export class NoosferoArticleBlog {
  
-    @Input() article;
-    @Input() profile;
+    @Input() article: Article;
+    @Input() profile: Profile;
  
     private posts: any[];
     private perPage: number = 3;
     private currentPage: number;
     private totalPosts: number = 0;
  
-    constructor(private noosfero: any, private $scope) {
+    constructor(private noosfero: any, private $scope: ng.IScope) {
     }
  
     ngOnInit() {
@@ -28,8 +29,8 @@ export class NoosferoArticleBlog {
             content_type: "TinyMceArticle",
             per_page: this.perPage,
             page: this.currentPage
-        }).then((response) => {
-            this.totalPosts = response.headers("total");
+        }).then((response: restangular.IResponse) => {
+            this.totalPosts = <number>(<any>response.headers("total"));
             this.posts = response.data.articles;
         });
     }
 import { Input, Inject, Component } from 'ng-forward';
-
+import {Box} from "./../../models/interfaces";
 @Component({
     selector: "noosfero-boxes",
     templateUrl: "app/components/noosfero-boxes/boxes.html"
 })
 export class Boxes {
  
-    @Input() boxes: any
-    @Input() owner: any
+    @Input() boxes: any;
+    @Input() owner: any;
  
-    boxesOrder(box) {
-        if (box.position == 2) return 0;
+    boxesOrder(box: Box) {
+        if (box.position === 2) return 0;
         return box.position;
     }
 }
 import {Component, Inject} from "ng-forward";
  
+import {Profile} from "./../models/interfaces";
 @Component({
     selector: "content-viewer-actions",
     templateUrl: "app/content-viewer/navbar-actions.html",
@@ -10,8 +11,8 @@ export class ContentViewerActions {
     article: any;
     profile: any;
  
-    constructor(noosfero) {
-        noosfero.currentProfile.then((profile) => {
+    constructor(noosfero: any) {
+        noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
         });
     }
 import * as noosfero from "../models/interfaces";
  
-import {ArticleDirective, ArticleView} from "../components/noosfero-articles/article/article.directive";
+import {ArticleDefaultView, ArticleView} from "../components/noosfero-articles/article/article_view";
 import {Input, Component, StateConfig, Inject} from "ng-forward";
  
 import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
@@ -8,7 +8,7 @@ import {NoosferoArticleBlog} from &quot;./../components/noosfero-articles/blog/blog.c
 @Component({
     selector: "content-viewer",
     templateUrl: "app/content-viewer/page.html",
-    directives: [NoosferoArticleBlog, ArticleView, ArticleDirective]
+    directives: [NoosferoArticleBlog, ArticleView, ArticleDefaultView]
 })
 @Inject("noosfero", "$log", "$stateParams")
 export class ContentViewer {
@@ -24,11 +24,10 @@ export class ContentViewer {
     }
  
     activate() {
-        console.log("HERE CONTENT VIEWER");
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: noosfero.Profile) => {
             this.profile = profile;
             return this.noosfero.profiles.one(this.profile.id).one("articles").get({ path: this.$stateParams["page"] });
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.article = response.data.article;
         });
     }
  
 /** @ngInject */
-export function noosferoModuleConfig($logProvider, $locationProvider, RestangularProvider, $httpProvider, $provide) {
+export function noosferoModuleConfig($logProvider: ng.ILogProvider, $locationProvider: ng.ILocationProvider, RestangularProvider: restangular.IProvider, $httpProvider: ng.IHttpProvider, $provide: ng.auto.IProvideService) {
     $logProvider.debugEnabled(true);
     $locationProvider.html5Mode({ enabled: true });
     RestangularProvider.setBaseUrl("/api/v1");
     RestangularProvider.setFullResponse(true);
-    $httpProvider.defaults.headers.post = { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" };
  
-    $provide.decorator("$uiViewScroll", function($delegate, $document) {
-        return function(uiViewElement) {
+    (<any>$httpProvider.defaults.headers.post)["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
+
+
+    $provide.decorator("$uiViewScroll", function($delegate: any, $document: any) {
+        return function(uiViewElement: any) {
             $document.scrollToElementAnimated(uiViewElement);
         };
     });
@@ -2,14 +2,14 @@ export class NoosferoApp {
  
     static appName: string = "noosferoApp";
     static angularModule: any;
-    //static init(angularModule: any) {
-    //NoosferoApp.angularModule
+    // static init(angularModule: any) {
+    // NoosferoApp.angularModule
     // angular.module(NoosferoApp.appName, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     //     "ngSanitize", "ngMessages", "ngAria", "restangular",
     //     "ui.router", "ui.bootstrap", "toastr",
     //     "angularMoment", "angular.filter", "akoenig.deckgrid",
     //     "angular-timeline", "duScroll", "oitozero.ngSweetAlert"]);
-    //}
+    // }
  
     static addConfig(configFunc: Function) {
         NoosferoApp.angularModule.config(configFunc);
@@ -23,6 +23,10 @@ export class NoosferoApp {
         NoosferoApp.angularModule.service(serviceName, value);
     }
  
+    static addFactory(factoryName: string, value: any) {
+        NoosferoApp.angularModule.factory(factoryName, value);
+    }
+
     static addController(controllerName: string, value: any) {
         NoosferoApp.angularModule.controller(controllerName, value);
     }
  
  
 /** @ngInject */
-export function routeConfig($stateProvider, $urlRouterProvider) {
+export function routeConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
     $stateProvider
         .state("main.profile.settings", {
             url: "^/myprofile/:profile"
+import {Session} from "./components/auth/session";
  
 /** @ngInject */
-export function noosferoAngularRunBlock($log, Restangular, Session) {
-    Restangular.addFullRequestInterceptor(function(element, operation, route, url, headers) {
+export function noosferoAngularRunBlock($log: ng.ILogService, Restangular: restangular.IService, Session: Session) {
+    Restangular.addFullRequestInterceptor((element: any, operation: string, route: string, url: string, headers: string)  => {
         if (Session.getCurrentUser()) {
-            headers["Private-Token"] = Session.getCurrentUser().private_token;
+            (<any>headers)["Private-Token"] = Session.getCurrentUser().private_token;
         }
-        return { headers: headers };
+        return <any>{ headers: <any>headers };
     });
 }
  
@@ -17,6 +17,7 @@ import {Main} from &quot;./main/main.component&quot;;
 import {bootstrap, bundle} from "ng-forward";
  
 import {AUTH_EVENTS} from "./components/auth/auth_events";
+import {AuthController} from "./components/auth/auth_controller";
  
 declare var moment: any;
  
@@ -35,8 +36,11 @@ NoosferoApp.addConstants(&quot;AUTH_EVENTS&quot;, AUTH_EVENTS);
 NoosferoApp.addConfig(noosferoModuleConfig);
 NoosferoApp.run(noosferoAngularRunBlock);
  
-require("./components/auth/auth.controller.js");
-require("./components/auth/auth.service.js");
+// NoosferoApp.addService("Session", Session);
+// NoosferoApp.addService("AuthService", AuthService);
+NoosferoApp.addController("AuthController", AuthController);
+
+
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
 import {bundle, Component, StateConfig} from "ng-forward";
 import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component.ts";
-import {ArticleDirective} from "../components/noosfero-articles/article/article.directive.ts";
+import {ArticleView} from "../components/noosfero-articles/article/article_view.ts";
 import {Profile} from "../profile/profile.component";
 import {Boxes} from "../components/noosfero-boxes/boxes.component";
 import {Block} from "../components/noosfero-blocks/block.component";
  
+
+import {AuthService} from "./../components/auth/auth_service";
+import {Session} from "./../components/auth/session";
+
 @Component({
     selector: 'main-content',
     templateUrl: "app/main/main.html",
+    providers: [AuthService, Session]
 })
 export class MainContent {
  
@@ -15,8 +20,9 @@ export class MainContent {
  
 @Component({
     selector: 'main',
-    template: 'not-used',
-    directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]
+    template: '<div ng-view></div>',
+    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block],
+    providers: [AuthService, Session]
 })
 @StateConfig([
     {
@@ -24,7 +30,7 @@ export class MainContent {
         component: MainContent,
         name: 'main',
         resolve: {
-            currentUser: function(AuthService) {
+            currentUser: function(AuthService: AuthService) {
                 return AuthService.loginFromCookie();
             }
         }
+export interface NoosferoRootScope extends ng.IScope {
+    currentUser: User;
+}
+
 export interface Event extends Article {
     id: number;
 }
@@ -8,6 +12,7 @@ export interface Article {
  
 export interface Profile {
     id: number;
+    identifier: string;
 }
  
 export interface Person extends Profile {
@@ -32,4 +37,20 @@ export interface User {
     login: string;
     email: string;
     person: Person;
+    private_token: string;
+    userRole: string;
 }
+
+export interface UserResponse {
+    user: User;
+}
+
+
+export interface Box {
+    id: number;
+    position: number;
+}
+
+export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
+    currentUser: User;
+}
 \ No newline at end of file
 import {StateConfig, Component, Inject} from 'ng-forward';
  
+import {Profile} from "./../models/interfaces";
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile-info/profile-info.html"
@@ -10,15 +12,15 @@ export class ProfileInfo {
     activities: any
     profile: any
  
-    constructor(private noosfero) {
+    constructor(private noosfero: any) {
         this.activate();
     }
  
     activate() {
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
             return this.noosfero.profiles.one(this.profile.id).one('activities').get();
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.activities = response.data.activities;
         });
     }
 import {StateConfig, Component, Inject} from 'ng-forward';
  
+import {Profile} from "./../models/interfaces";
+
 @Component({
     selector: 'profile-home',
     template: "<div></div>"
@@ -7,13 +9,13 @@ import {StateConfig, Component, Inject} from &#39;ng-forward&#39;;
 @Inject("noosfero", "$log", "$stateParams", "$scope", "$state")
 export class ProfileHome {
  
-    profile: any;
+    profile: Profile;
  
-    constructor(noosfero, $log, $stateParams, $scope, $state) {
-        noosfero.currentProfile.then((profile) => {
+    constructor(noosfero: any, $log: ng.ILogService, $stateParams: ng.ui.IStateParamsService, $scope: ng.IScope, $state: ng.ui.IStateService) {
+        noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
             return noosfero.profile(this.profile.id).customGET('home_page', { fields: 'path' });
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             if (response.data.article) {
                 $state.transitionTo('main.profile.page', { page: response.data.article.path, profile: this.profile.identifier }, { location: false });
             } else {
 import {StateConfig, Component, Inject} from 'ng-forward';
-import {ProfileInfo} from '../profile-info/profile-info.component'
-import {ProfileHome} from '../profile/profile-home.component'
-import {Cms} from '../cms/cms.component'
+import {ProfileInfo} from '../profile-info/profile-info.component';
+import {ProfileHome} from '../profile/profile-home.component';
+import {Cms} from '../cms/cms.component';
 import {ContentViewer} from "../content-viewer/content-viewer.component";
  
+import * as noosferoModels from "./../models/interfaces";
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/profile.html"
@@ -65,15 +67,15 @@ import {ContentViewer} from &quot;../content-viewer/content-viewer.component&quot;;
 @Inject("noosfero", "$log", "$stateParams")
 export class Profile {
  
-    boxes: any
-    profile: any
+    boxes: noosferoModels.Box[];
+    profile: noosferoModels.Profile;
  
-    constructor(noosfero, $log, $stateParams) {
-        noosfero.profiles.one().get({ identifier: $stateParams.profile }).then((response) => {
+    constructor(noosfero: any, $log: ng.ILogService, $stateParams: ng.ui.IStateParamsService) {
+        noosfero.profiles.one().get({ identifier: $stateParams["profile"] }).then((response: restangular.IResponse) => {
             this.profile = response.data[0];
             noosfero.setCurrentProfile(this.profile);
             return noosfero.boxes(this.profile.id).one().get();
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.boxes = response.data.boxes;
         });
     }
@@ -0,0 +1,4 @@
+
+
+// TODO - see code generation using swagger resource declaration
+//        -> https://github.com/swagger-api/swagger-codegen
-module NgNoosferoAPI {
+namespace NgNoosferoAPI {
     export class NoosferoHttpClient {
         static $inject = ['$http', '$q'];
  
-        constructor(private $http, private $q) {
+        constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
  
         }
     }
  
     NgNoosferoAPI.ngModule.service(NoosferoHttpClient);
-}
-
+}
 \ No newline at end of file
-module NgNoosferoAPI {
-    
+namespace NgNoosferoAPI {
  
     // The following class represents the provider
     export class NoosferoHttpServiceConfigProvider implements ng.IServiceProvider {
@@ -12,19 +11,19 @@ module NgNoosferoAPI {
             contentTypeHeader: "application/json",
             textEncoding: "UTF-8"
         };
-    
- 
+
+
         // Configuration function
         public setConfig(config: NoosferoHttpServiceConfig) {
             this.config = config;
         }
- 
+
         // Provider's factory function
         public $get(): NoosferoHttpServiceConfig {
             return this.config;
         }
     }
-    
+
     ngModule.provider("NoosferoHttpServiceConfig", NoosferoHttpServiceConfigProvider);
  
 }
 \ No newline at end of file
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "target": "es5",
-        "noImplicitAny": false,
+        "noImplicitAny": true,
         "sourceMap": true,
         "experimentalDecorators": true
     },
...	...	@@ -4,5 +4,7 @@
4	4	"**/.git": true,
5	5	"**/.DS_Store": true,
6	6	"src/app/*.js": false
7		- }
	7	+ },
	8	+ "editor.fontSize": 14,
	9	+ "typescript.useCodeSnippetsOnMethodSuggest": true
8	10	}
9	11	\ No newline at end of file
...	...
1	1	import {StateConfig, Component, Inject} from 'ng-forward';
2		-
	2	+import {Profile} from "./../models/interfaces";
3	3	@Component({
4	4	selector: 'cms',
5	5	templateUrl: "app/cms/cms.html"
...	...	@@ -10,19 +10,19 @@ export class Cms {
10	10	article: any = {};
11	11	profile: any;
12	12
13		- constructor(private noosfero, private $stateParams, private $httpParamSerializer, private $state, private SweetAlert) {
	13	+ constructor(private noosfero: any/* TODO convert noosferoService */, private $stateParams: ng.ui.IStateParamsService, private $httpParamSerializer: any, private $state: ng.ui.IStateService, private SweetAlert: any) {
14	14
15	15	}
16	16
17	17	save() {
18		- this.noosfero.currentProfile.then((profile) => {
	18	+ this.noosfero.currentProfile.then((profile: Profile) => {
19	19	return this.noosfero.profiles.one(profile.id).customPOST(
20	20	{ article: this.article },
21	21	'articles',
22	22	{},
23	23	{ 'Content-Type': 'application/json' }
24	24	)
25		- }).then((response) => {
	25	+ }).then((response: restangular.IResponse) => {
26	26	this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
27	27	this.SweetAlert.swal({
28	28	title: "Good job!",
...	...
...	...	@@ -1,17 +0,0 @@
1		-(function() {
2		- 'use strict';
3		-
4		- angular
5		- .module('noosferoApp')
6		- .controller('AuthController', AuthController);
7		-
8		-
9		- /** @ngInject */
10		- function AuthController(noosfero, $log, $stateParams, AuthService) {
11		- var vm = this;
12		- vm.credentials = {};
13		- vm.login = function() {
14		- AuthService.login(vm.credentials);
15		- }
16		- }
17		-})();
...	...	@@ -0,0 +1,22 @@
	1	+import {Credentials} from "./../../models/interfaces";
	2	+import {AuthService} from "./auth_service";
	3	+
	4	+export class AuthController {
	5	+
	6	+ static $inject = ["noosfero", "$log", "$stateParams", "AuthService"];
	7	+
	8	+ constructor(
	9	+ private noosfero: any,
	10	+ private $log: ng.ILogService,
	11	+ private $stateParams: any,
	12	+ private AuthService: AuthService
	13	+ ) {
	14	+
	15	+ }
	16	+
	17	+ credentials: Credentials;
	18	+
	19	+ login() {
	20	+ this.AuthService.login(this.credentials);
	21	+ }
	22	+}
0	23	\ No newline at end of file
...	...
1		-
2		-
3	1	export interface IAuthEvents {
4	2	loginSuccess: string;
5	3	loginFailed: string;
...	...
1	1	import {Injectable, Inject} from "ng-forward";
2	2
3		-import {Credentials} from "./../../models/interfaces";
	3	+import {Credentials, NoosferoRootScope, User, UserResponse} from "./../../models/interfaces";
4	4	import {Session} from "./session";
5		-import {NoosferoRootScope} from "./noosfero_root_scope";
	5	+
6	6	import {AUTH_EVENTS, IAuthEvents} from "./auth_events";
7	7
8		-@Injectable
9		-@Inject("$q", "$http", "$rootScope", Session, "$log", "AUTH_EVENTS")
	8	+@Injectable()
	9	+@Inject("$q", "$http", "$rootScope", "Session", "$log", "AUTH_EVENTS")
10	10	export class AuthService {
	11	+
11	12	constructor(private $q: ng.IQService,
12	13	private $http: ng.IHttpService,
13	14	private $rootScope: NoosferoRootScope,
14		- private Session: Session,
	15	+ private session: Session,
15	16	private $log: ng.ILogService,
16		- private AUTH_EVENTS: IAuthEvents) {
	17	+ private auth_events: IAuthEvents) {
17	18
18	19	}
19	20
20		- private loginSuccessCallback(response) {
	21	+ loginFromCookie() {
	22	+ let url: string = '/api/v1/login_from_cookie';
	23	+ return this.$http.post(url, null).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
	24	+ }
	25	+
	26	+
	27	+ private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
21	28	this.$log.debug('AuthService.login [SUCCESS] response', response);
22		- let currentUser = this.Session.create(response.data);
	29	+ let currentUser: User = this.session.create(response.data);
23	30	this.$rootScope.currentUser = currentUser;
24		- this.$rootScope.$broadcast(this.AUTH_EVENTS.loginSuccess, currentUser);
	31	+ this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
25	32	return currentUser;
26	33	}
27	34
28	35	login(credentials: Credentials) {
29	36	let url = '/api/v1/login';
30	37	let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
31		- return this.$http.post(url, encodedData).then(this.loginSuccessCallback, this.loginFailedCallback);
	38	+ return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
32	39	}
33	40
34		- private loginFailedCallback(response) {
	41	+ private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
35	42	this.$log.debug('AuthService.login [FAIL] response', response);
36		- this.$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
	43	+ this.$rootScope.$broadcast(this.auth_events.loginFailed);
37	44	// return $q.reject(response);
38	45	return null;
39	46	}
40	47
41	48	public logout() {
42		- this.Session.destroy();
	49	+ this.session.destroy();
43	50	this.$rootScope.currentUser = undefined;
44		- this.$rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
45		- this.$http.jsonp('/account/logout'); //FIXME logout from noosfero to sync login state
	51	+ this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
	52	+ this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
46	53	}
47	54
48	55	public isAuthenticated() {
49		- return !!this.Session.getCurrentUser();
	56	+ return !!this.session.getCurrentUser();
50	57	}
51	58
52		- public isAuthorized(authorizedRoles) {
	59	+ public isAuthorized(authorizedRoles: string \| string[]) {
53	60	if (!angular.isArray(authorizedRoles)) {
54		- authorizedRoles = [authorizedRoles];
	61	+ authorizedRoles = [<string>authorizedRoles];
55	62	}
56		- return (this.isAuthenticated() && authorizedRoles.indexOf(this.Session.getCurrentUser().userRole) !== -1);
	63	+ return (this.isAuthenticated() && authorizedRoles.indexOf(this.session.getCurrentUser().userRole) !== -1);
57	64	}
58	65	}
59	66	\ No newline at end of file
...	...
...	...	@@ -1,5 +0,0 @@
1		-import {User} from "./../../models/interfaces";
2		-
3		-export interface NoosferoRootScope extends ng.IScope {
4		- currentUser: User;
5		-}
6	0	\ No newline at end of file
1	1	import {Injectable, Inject} from "ng-forward";
	2	+import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
2	3
3	4	@Injectable()
4	5	@Inject("$localStorage", "$log")
5	6	export class Session {
6		- constructor(private $localStorage, $log) {
	7	+
	8	+ constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
7	9
8	10	}
9	11
10		- create = function(data) {
	12	+ create(data: UserResponse): User {
11	13	this.$localStorage.currentUser = data.user;
12	14	this.$log.debug('User session created.', this.$localStorage.currentUser);
13	15	return this.$localStorage.currentUser;
14	16	};
15	17
16		- destroy = function() {
	18	+ destroy() {
17	19	delete this.$localStorage.currentUser;
18	20	this.$log.debug('User session destroyed.');
19	21	};
20	22
21		- getCurrentUser = function() {
	23	+ getCurrentUser(): User {
22	24	return this.$localStorage.currentUser;
23	25	};
24	26
...	...
...	...	@@ -1,85 +0,0 @@
1		-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2		-import {Input, provide, Component} from 'ng-forward';
3		-
4		-import {ArticleDirective} from './article.directive';
5		-
6		-// Instantiate the Builder, this part is different than ng2.
7		-// In ng2 you inject tcb.
8		-const tcb = new TestComponentBuilder();
9		-
10		-// this htmlTemplate will be re-used between the container components in this spec file
11		-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
12		-
13		-
14		-describe("Article Directive", () => {
15		-
16		-
17		- // the karma preprocessor html2js transform the templates html into js files which put
18		- // the templates to the templateCache into the module templates
19		- // we need to load the module templates here as the template for the
20		- // component NoosferoArtileDirective will be load on our tests
21		- beforeEach(angular.mock.module("templates"));
22		-
23		- it("receives the article and profile as inputs", done => {
24		-
25		- // Creating a container component (ArticleContainerComponent) to include
26		- // the component under test (ArticleDirective)
27		- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] })
28		- class ArticleContainerComponent {
29		- article = { type: 'anyArticleType' };
30		- profile = { name: 'profile-name' };
31		- constructor() {
32		- }
33		- }
34		-
35		- // uses the TestComponentBuilder instance to initialize the component
36		- tcb.createAsync(ArticleContainerComponent).then((fixture) => {
37		- // and here we can inspect and run the test assertions
38		- let myComponent: ArticleContainerComponent = fixture.componentInstance;
39		-
40		- console.log(myComponent);
41		-
42		- // assure the article object inside the ArticleDirective matches
43		- // the provided through the parent component
44		- expect(myComponent.article.type).toEqual("anyArticleType");
45		- expect(myComponent.profile.name).toEqual("profile-name");
46		-
47		- myComponent.metodoAsync(() => {
48		- done();
49		- });
50		- // done needs to be called (it isn't really needed, as we can read in
51		- // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
52		- // because createAsync in ng-forward is not really async, but as the intention
53		- // here is write tests in angular 2 ways, this is recommended
54		- done();
55		- });
56		- });
57		-
58		-
59		- it("renders a directive which matches to the article type", done => {
60		- // NoosferoTinyMceArticle component created to check if it will be used
61		- // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective)
62		- // * Important * - the selector is what ng-forward uses to define the name of the directive provider
63		- @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
64		- class NoosferoTinyMceArticle {
65		- @Input() article: any;
66		- @Input() profile: any;
67		- }
68		-
69		- // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
70		- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] })
71		- class CustomArticleType {
72		- article = { type: 'TinyMceArticle' };
73		- profile = { name: 'profile-name' };
74		- constructor() {
75		- }
76		- }
77		- tcb.createAsync(CustomArticleType).then(fixture => {
78		- let myComponent: CustomArticleType = fixture.componentInstance;
79		- expect(myComponent.article.type).toEqual("TinyMceArticle");
80		- expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
81		- done();
82		- });
83		- });
84		-
85		-});
86	0	\ No newline at end of file
...	...	@@ -1,43 +0,0 @@
1		-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2		-import {NoosferoArticleBlog} from "../blog/blog.component";
3		-
4		-@Component({
5		- selector: 'noosfero-default-article',
6		- templateUrl: 'app/components/noosfero-articles/article/article.html'
7		-})
8		-export class ArticleView {
9		-
10		- @Input() article: any;
11		- @Input() profile: any;
12		-
13		-}
14		-
15		-@Component({
16		- selector: 'noosfero-article',
17		- template: 'not-used',
18		- directives: [ArticleView, NoosferoArticleBlog]
19		-})
20		-@Inject("$element", "$scope", "$injector", "$compile")
21		-export class ArticleDirective {
22		-
23		- @Input() article: any;
24		- @Input() profile: any;
25		- directiveName: string;
26		-
27		- ngOnInit() {
28		- let specificDirective = 'noosfero' + this.article.type;
29		- this.directiveName = "noosfero-default-article";
30		- if (this.$injector.has(specificDirective + 'Directive')) {
31		- this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
32		- }
33		- this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
34		- }
35		-
36		- constructor(
37		- private $element: any,
38		- private $scope: ng.IScope,
39		- private $injector: ng.auto.IInjectorService,
40		- private $compile: ng.ICompileService) {
41		-
42		- }
43		-}