Merge branch 'ngforward' of softwarepublico.gov.br:noosfero-themes/angular-theme into ngforward

Victor Costa
2 parents f5a45d92 a3e051be
Showing 261 changed files with 3984 additions and 3345 deletions Show diff stats
.vscode/settings.json
dev-scripts/fix-jqlite.ts
package.json
src/app/admin/index.ts
src/app/article/article-default-view-component.spec.ts
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/article.scss
src/app/article/basic-editor.component.spec.ts
src/app/article/basic-editor.component.ts
src/app/article/basic-editor.html
src/app/article/content-viewer/content-viewer-actions.component.spec.ts
src/app/article/content-viewer/content-viewer-actions.component.ts
src/app/article/content-viewer/content-viewer.component.spec.ts
src/app/article/content-viewer/content-viewer.component.ts
src/app/article/content-viewer/index.ts
src/app/article/content-viewer/navbar-actions.html
src/app/article/content-viewer/page.html
src/app/article/index.ts
src/app/article/types/blog/blog.component.spec.ts
@@ -3,7 +3,9 @@
     "files.exclude": {
         "**/.git": true,
         "**/.DS_Store": true,
-        "src/app/*.js": false
+        "src/**/*.js": true,
+        "src/**/*.js.map": true,
+        "coverage": true
     },
     "editor.fontSize": 14,
     "typescript.useCodeSnippetsOnMethodSuggest": true
@@ -0,0 +1,13 @@
+let replace = require("replace");
+
+import * as path from "path";
+
+let wrong_jqlite_d_ts_file = path.join(__dirname, "../node_modules/ng-forward/cjs/util/jqlite-extensions.d.ts");
+
+replace({
+    regex: /import JQuery from \".\/\";/,
+    replacement: "",
+    paths: [wrong_jqlite_d_ts_file],
+    sillent: false
+});
+
@@ -4,21 +4,23 @@
   "dependencies": {
     "angular": "^1.5.0",
     "angular-mock": "^1.0.0",
-    "moment": "^2.11.2"    
+    "moment": "^2.11.2",
+    "ng-forward": "0.0.1-alpha.12"
   },
   "scripts": {
     "build": "webpack; gulp build",
     "webpack": "webpack",
+    "karma": "concurrently \"webpack -w\" \"karma start\"",
     "docs": "gulp ngdocs; static-server docs",
-    "karma": "karma",
     "coverage": "karma start --single-run; npm run remap-coverage",
     "remap-coverage": "ts-node --project ./dev-scripts ./dev-scripts/remapCoverage.ts",
     "test-single": "karma start --single-run",
     "test-and-coverage": "karma start & npm run remap-coverage",
     "test": "webpack -w --test",
-    "postinstall": "npm install -g bower && bower install && typings install && cd dev-scripts && typings install",
+    "postinstall": "npm install -g bower; bower install; typings install; npm run fix-jqlite; cd dev-scripts; typings install",
     "start": "concurrently \"webpack -w\" \"gulp serve\"",
-    "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts"
+    "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
+    "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
   },
   "devDependencies": {
     "browser-sync": "~2.9.11",
@@ -71,7 +73,6 @@
     "karma-webpack": "^1.7.0",
     "lodash": "~3.10.1",
     "main-bower-files": "~2.9.0",
-    "ng-forward": "0.0.1-alpha.12",
     "on-build-webpack": "^0.1.0",
     "phantomjs": "~1.9.18",
     "phantomjs-polyfill": "0.0.2",
@@ -0,0 +1 @@
+/* Module Index Entry - generated using the script npm run generate-index */
@@ -0,0 +1,108 @@
+
+import {Input, provide, Component} from 'ng-forward';
+import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
+
+import {createComponentFromClass, quickCreateComponent} from "../../spec/helpers";
+
+// 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("Components", () => {
+
+    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: [ArticleViewComponent] })
+            class ArticleContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            createComponentFromClass(ArticleContainerComponent).then((fixture) => {
+                // and here we can inspect and run the test assertions
+
+                // gets the children component of ArticleContainerComponent 
+                let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+                // and checks if the article View rendered was the Default Article View
+                expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.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: [ArticleViewComponent] })
+            class ArticleContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            createComponentFromClass(ArticleContainerComponent).then((fixture) => {
+                // and here we can inspect and run the test assertions 
+                let articleView: ArticleViewComponent = 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: [ArticleViewComponent, TinyMceArticleView] })
+            class CustomArticleType {
+                article = { type: 'TinyMceArticle' };
+                profile = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+            createComponentFromClass(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,57 @@
+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
+import {ArticleBlogComponent} from "./types/blog/blog.component";
+
+/**
+ * @ngdoc controller
+ * @name ArticleDefaultView
+ * @description
+ *  A default view for Noosfero Articles. If the specific article view is
+ * not implemented, then this view is used.
+ */
+@Component({
+    selector: 'noosfero-default-article',
+    templateUrl: 'app/article/article.html'
+})
+export class ArticleDefaultViewComponent {
+
+    @Input() article: noosfero.Article;
+    @Input() profile: noosfero.Profile;
+
+}
+
+/**
+ * @ngdoc controller
+ * @name ArticleView
+ * @description
+ *  A dynamic view for articles. It uses the article type to replace
+ * the default template with the custom article directive.
+ */
+@Component({
+    selector: 'noosfero-article',
+    template: 'not-used',
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent]
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleViewComponent {
+
+    @Input() article: noosfero.Article;
+    @Input() profile: noosfero.Profile;
+    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,23 @@
+<div class="article">
+  <div class="page-header">
+    <h3 ng-bind="ctrl.article.title"></h3>
+  </div>
+
+  <div class="sub-header clearfix">
+    <div class="page-info pull-right small text-muted">
+      <span class="time">
+        <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at | dateFormat"></span>
+      </span>
+      <span class="author" ng-if="ctrl.article.author">
+        <i class="fa fa-user"></i>
+        <a ui-sref="main.profile.home({profile: ctrl.article.author.identifier})">
+          <span class="author-name" ng-bind="ctrl.article.author.name"></span>
+        </a>
+      </span>
+    </div>
+  </div>
+
+  <div class="page-body">
+    <div ng-bind-html="ctrl.article.body"></div>
+  </div>
+</div>
@@ -0,0 +1,17 @@
+.article {
+  .page-info {
+    .author {
+      a {
+        color: #b4bcc2;
+      }
+    }
+  }
+
+  .page-header {
+      margin-bottom: 5px;
+  }
+
+  .sub-header {
+    margin-bottom: 20px;
+  }
+}
@@ -0,0 +1,55 @@
+import {quickCreateComponent} from "../../spec/helpers";
+import {BasicEditorComponent} from "./basic-editor.component";
+
+
+describe("Article BasicEditor", () => {
+
+    let $rootScope: ng.IRootScopeService;
+    let $q: ng.IQService;
+    let articleServiceMock: any;
+    let profileServiceMock: any;
+    let $state: any;
+    let profile = { id: 1 };
+    let notification: any;
+
+
+    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+        $rootScope = _$rootScope_;
+        $q = _$q_;
+    }));
+
+    beforeEach(() => {
+        $state = jasmine.createSpyObj("$state", ["transitionTo"]);
+        notification = jasmine.createSpyObj("notification", ["success"]);
+        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile"]);
+        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInProfile"]);
+
+        let getCurrentProfileResponse = $q.defer();
+        getCurrentProfileResponse.resolve(profile);
+
+        let articleCreate = $q.defer();
+        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
+
+        profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
+        articleServiceMock.createInProfile = jasmine.createSpy("createInProfile").and.returnValue(articleCreate.promise);
+    });
+
+    it("create an article in the current profile when save", done => {
+        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
+        component.save();
+        $rootScope.$apply();
+        expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
+        expect(articleServiceMock.createInProfile).toHaveBeenCalledWith(profile, component.article);
+        done();
+    });
+
+    it("got to the new article page and display an alert when saving sucessfully", done => {
+        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
+        component.save();
+        $rootScope.$apply();
+        expect($state.transitionTo).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
+        expect(notification.success).toHaveBeenCalled();
+        done();
+    });
+
+});
@@ -0,0 +1,35 @@
+import {StateConfig, Component, Inject, provide} from 'ng-forward';
+import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
+import {NotificationService} from "../shared/services/notification.service.ts";
+
+@Component({
+    selector: 'article-basic-editor',
+    templateUrl: "app/article/basic-editor.html",
+    providers: [
+        provide('articleService', { useClass: ArticleService }),
+        provide('profileService', { useClass: ProfileService }),
+        provide('notification', { useClass: NotificationService })
+    ]
+})
+@Inject(ArticleService, ProfileService, "$state", NotificationService)
+export class BasicEditorComponent {
+
+    article: noosfero.Article = <noosfero.Article>{};
+
+    constructor(private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $state: ng.ui.IStateService,
+        private notification: NotificationService) { }
+
+    save() {
+        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            return this.articleService.createInProfile(profile, this.article);
+        }).then((response: noosfero.RestResult<noosfero.Article>) => {
+            let article = (<noosfero.Article>response.data);
+            this.$state.transitionTo('main.profile.page', { page: article.path, profile: article.profile.identifier });
+            this.notification.success("Good job!", "Article saved!");
+        });
+    }
+
+}
@@ -0,0 +1,11 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">Title</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="title" ng-model="vm.article.name">
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">Text</label>
+    <textarea class="form-control" id="bodyInput" rows="10" ng-model="vm.article.body"></textarea>
+  </div>
+  <button type="submit" class="btn btn-default" ng-click="vm.save()">Save</button>
+</form>
@@ -0,0 +1,67 @@
+import {providers} from 'ng-forward/cjs/testing/providers';
+
+import {Input, Component, provide} from 'ng-forward';
+
+import * as helpers from "../../../spec/helpers";
+
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {ContentViewerActions} from './content-viewer-actions.component';
+
+// this htmlTemplate will be re-used between the container components in this spec file
+const htmlTemplate: string = '<content-viewer-actions [article]="ctrl.article" [profile]="ctrl.profile"></content-viewer-actions>';
+
+describe('Content Viewer Actions Component', () => {
+
+    beforeEach(() => {
+
+        angular.mock.module("templates");
+
+        providers((provide: any) => {
+            return <any>[
+                provide('ProfileService', {
+                    useValue: helpers.mocks.profileService
+                })
+            ];
+        });
+    });
+
+    let buildComponent = (): Promise<ComponentFixture> => {
+        return helpers.quickCreateComponent({
+            providers: [
+                helpers.provideEmptyObjects('Restangular'),
+                helpers.provideFilters('translateFilter')
+            ],
+            directives: [ContentViewerActions],
+            template: htmlTemplate
+        });
+    };
+
+    it('renders content viewer actions directive', (done: Function) => {
+        buildComponent().then((fixture: ComponentFixture) => {
+            expect(fixture.debugElement.query('content-viewer-actions').length).toEqual(1);
+
+            done();
+        });
+    });
+
+    it('check if profile was loaded', (done: Function) => {
+        let profile: any = {
+            id: 1,
+            identifier: 'the-profile-test',
+            type: 'Person'
+        };
+
+        helpers.mocks.profileService.getCurrentProfile = () => {
+            return helpers.mocks.promiseResultTemplate(profile);
+        };
+
+        buildComponent().then((fixture: ComponentFixture) => {
+            let contentViewerComp: ContentViewerActions = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            expect(contentViewerComp.profile).toEqual(jasmine.objectContaining(profile));
+
+            done();
+        });
+    });
+
+});
@@ -0,0 +1,20 @@
+import {Component, Inject, provide} from "ng-forward";
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "content-viewer-actions",
+    templateUrl: "app/article/content-viewer/navbar-actions.html",
+    providers: [provide('profileService', { useClass: ProfileService })]
+})
+@Inject(ProfileService)
+export class ContentViewerActions {
+
+    article: noosfero.Article;
+    profile: noosfero.Profile;
+
+    constructor(profileService: ProfileService) {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+        });
+    }
+}
@@ -0,0 +1,88 @@
+import {providers} from 'ng-forward/cjs/testing/providers';
+
+import {Input, Component, provide} from 'ng-forward';
+
+import * as helpers from "../../../spec/helpers";
+
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {ContentViewerComponent} from './content-viewer.component';
+
+// this htmlTemplate will be re-used between the container components in this spec file
+const htmlTemplate: string = '<content-viewer [article]="ctrl.article" [profile]="ctrl.profile"></content-viewer>';
+
+describe('Content Viewer Component', () => {
+
+    let stateParamsService: any;
+
+    // loading the templates
+    beforeEach(() => {
+        angular.mock.module("templates");
+
+        stateParamsService = { page: 1 };
+
+        providers((provide: any) => {
+            return <any>[
+                provide('ArticleService', {
+                    useValue: helpers.mocks.articleService
+                }),
+                provide('ProfileService', {
+                    useValue: helpers.mocks.profileService
+                }),
+                // TODO: Como criar um mock do atributo "page" de stateParams
+                provide('$stateParams', {
+                    useValue: stateParamsService
+                })
+            ];
+        });
+    });
+
+    let buildComponent = (): Promise<ComponentFixture> => {
+        return helpers.quickCreateComponent({
+            providers: [
+                helpers.provideEmptyObjects('Restangular')
+            ],
+            directives: [ContentViewerComponent],
+            template: htmlTemplate
+        });
+    };
+
+    it('renders content viewer directive', (done: Function) => {
+        buildComponent().then((fixture: ComponentFixture) => {
+            expect(fixture.debugElement.query('content-viewer').length).toEqual(1);
+
+            done();
+        });
+    });
+
+    it('check if article was loaded', (done: Function) => {
+        let article: any = {
+            id: 1,
+            title: 'The article test'
+        };
+        let profile: any = {
+            id: 1,
+            identifier: 'the-profile-test',
+            type: 'Person'
+        };
+
+        helpers.mocks.profileService.getCurrentProfile = () => {
+            return helpers.mocks.promiseResultTemplate(profile);
+        };
+
+        helpers.mocks.articleService.getArticleByProfileAndPath = (profile: noosfero.Profile, path: string) => {
+            return helpers.mocks.promiseResultTemplate({
+                data:  article
+            });
+        };
+
+
+        buildComponent().then((fixture: ComponentFixture) => {
+            let contentViewerComp: ContentViewerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            expect(contentViewerComp.profile).toEqual(profile);
+            expect(contentViewerComp.article).toEqual(article);
+
+            done();
+        });
+    });
+});
@@ -0,0 +1,38 @@
+import {ArticleViewComponent} from "./../article-default-view.component";
+import {Input, Component, StateConfig, Inject, provide} from "ng-forward";
+
+import {ArticleBlogComponent} from "./../types/blog/blog.component";
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "content-viewer",
+    templateUrl: "app/article/content-viewer/page.html",
+    directives: [ArticleBlogComponent, ArticleViewComponent],
+    providers: [
+        provide('articleService', { useClass: ArticleService }),
+        provide('profileService', { useClass: ProfileService })
+    ]
+})
+@Inject(ArticleService, ProfileService, "$log", "$stateParams")
+export class ContentViewerComponent {
+
+    @Input()
+    article: noosfero.Article = null;
+
+    @Input()
+    profile: noosfero.Profile = null;
+
+    constructor(private articleService: ArticleService, private profileService: ProfileService, private $log: ng.ILogService, private $stateParams: angular.ui.IStateParamsService) {
+        this.activate();
+    }
+
+    activate() {
+       this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+            return this.articleService.getArticleByProfileAndPath(this.profile, this.$stateParams["page"]);
+        }).then((result: noosfero.RestResult<any>) => {
+            this.article = <noosfero.Article>result.data;
+        });
+    }
+}
@@ -0,0 +1,3 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./content-viewer-actions.component";
+export * from "./content-viewer.component";
@@ -0,0 +1,7 @@
+<ul class="nav navbar-nav">
+  <li ng-show="vm.profile">
+    <a href="#" role="button" ui-sref="main.profile.cms({profile: vm.profile.identifier})">
+      <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
+    </a>
+  </li>
+</ul>
@@ -0,0 +1 @@
+<noosfero-article ng-if="vm.article" [article]="vm.article" [profile]="vm.profile"></noosfero-article>
@@ -0,0 +1,3 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./article-default-view.component";
+export * from "./basic-editor.component";
@@ -0,0 +1,129 @@
+import {
+providers
+} from 'ng-forward/cjs/testing/providers';
+
+import {
+Input,
+Component
+} from 'ng-forward';
+import {
+ArticleBlogComponent
+} from './blog.component';
+
+import {
+createComponentFromClass,
+quickCreateComponent,
+provideEmptyObjects,
+createProviderToValue,
+provideFilters
+} from "../../../../spec/helpers.ts";
+
+// this htmlTemplate will be re-used between the container components in this spec file
+const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';
+
+describe("Blog Component", () => {
+
+    function promiseResultTemplate(response?: {}) {
+        let thenFuncEmpty = (func: Function) => {
+            // does nothing
+        };
+        if (response) {
+            return {
+                then: (func: (response: any) => void) => {
+                    func(response);
+                }
+            };
+        } else {
+            return {
+                then: (func: (response: any) => void) => {
+                    // does nothing
+                }
+            };
+        }
+    }
+
+    let articleService = {
+        getChildren: (article_id: number, filters: {}) => {
+            return promiseResultTemplate(null);
+        }
+    };
+
+    @Component({
+        selector: 'test-container-component',
+        template: htmlTemplate,
+        directives: [ArticleBlogComponent],
+        providers: [
+            provideEmptyObjects('Restangular'),
+            createProviderToValue('ArticleService', articleService),
+            provideFilters('truncateFilter')
+        ]
+    })
+    class BlogContainerComponent {
+        article = {
+            type: 'anyArticleType'
+        };
+        profile = {
+            name: 'profile-name'
+        };
+    }
+
+    beforeEach(() => {
+
+        // 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
+        angular.mock.module("templates");
+
+        providers((provide: any) => {
+            return <any>[
+                provide('ArticleService', {
+                    useValue: articleService
+                })
+            ];
+        });
+    });
+
+    it("renders the blog content", (done: Function) => {
+
+        createComponentFromClass(BlogContainerComponent).then((fixture) => {
+
+            expect(fixture.debugElement.query('div.blog').length).toEqual(1);
+
+            done();
+        });
+    });
+
+    it("verify the blog data", (done: Function) => {
+
+        let articles = [{
+            id: 1,
+            title: 'The article test'
+        }];
+
+        let result = { data: articles, headers: (name: string) => { return 1; } };
+
+        // defining a mock result to articleService.getChildren method
+        articleService.getChildren = (article_id: number, filters: {}) => {
+            return promiseResultTemplate(result);
+        };
+
+        createComponentFromClass(BlogContainerComponent).then((fixture) => {
+
+            // gets the children component of BlogContainerComponent
+            let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // check if the component property are the provided by the mocked articleService
+            let post = {
+                id: 1,
+                title: 'The article test'
+            };
+            expect((<any>articleBlog)["posts"][0]).toEqual(jasmine.objectContaining(post));
+            expect((<any>articleBlog)["totalPosts"]).toEqual(1);
+
+            done();
+        });
+
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,47 @@
+import {Component, Input, Inject} from "ng-forward";
+
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+/**
+ * @ngdoc controller
+ * @name ArticleBlog
+ * @description
+ *  An specific {@link ArticleView} for Blog articles.
+ */
+@Component({
+    selector: "noosfero-blog",
+    templateUrl: "app/article/types/blog/blog.html"
+})
+@Inject(ArticleService)
+export class ArticleBlogComponent {
+
+    @Input() article: noosfero.Article;
+    @Input() profile: noosfero.Profile;
+
+    private posts: noosfero.Article[];
+    private perPage: number = 3;
+    private currentPage: number;
+    private totalPosts: number = 0;
+
+    constructor(private articleService: ArticleService) { }
+
+    ngOnInit() {
+        this.loadPage();
+    }
+
+    loadPage() {
+        let filters = {
+            content_type: "TinyMceArticle",
+            per_page: this.perPage,
+            page: this.currentPage
+        };
+
+        this.articleService
+            .getChildren(this.article, filters)
+            .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                this.totalPosts = <number>result.headers("total");
+                this.posts = result.data;
+            });
+    }
+
+}
@@ -0,0 +1,24 @@
+<div class="blog">
+  <div class="blog-cover" ng-show="ctrl.article.image">
+    <img ng-src="{{ctrl.article.image.url}}" class="img-responsive">
+    <h3 ng-bind="ctrl.article.title"></h3>
+  </div>
+
+  <div class="page-header" ng-show="!ctrl.article.image">
+    <h3 ng-bind="ctrl.article.title"></h3>
+  </div>
+
+  <div>
+    <div ng-repeat="child in ctrl.posts | orderBy: 'created_at':true">
+      <div class="page-header">
+        <a class="title" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: child.path})"><h4 ng-bind="child.title"></h4></a>
+        <div class="post-lead" ng-bind-html="child.body | truncate: 500: '...': true"></div>
+      </div>
+    </div>
+  </div>
+
+  <pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
+    boundary-links="true" items-per-page="ctrl.perPage" ng-change="ctrl.loadPage()"
+    first-text="«" last-text="»" previous-text="‹" next-text="›">
+  </pagination>
+</div>
@@ -0,0 +1,15 @@
+.blog {
+  .blog-cover {
+    margin: -15px;
+    position: relative;
+    h3 {
+      position: absolute;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      color: white;
+      padding: 10px 15px;
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./blog.component";
@@ -0,0 +1 @@
+/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,54 +0,0 @@
-import {quickCreateComponent} from "../../spec/helpers";
-import {Cms} from "./cms.component";
-
-describe("Components", () => {
-    describe("Cms Component", () => {
-
-        let $rootScope: ng.IRootScopeService;
-        let $q: ng.IQService;
-        let articleServiceMock: any;
-        let profileServiceMock: any;
-        let $state: any;
-        let notification: any;
-
-        beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
-            $rootScope = _$rootScope_;
-            $q = _$q_;
-        }));
-
-        beforeEach(() => {
-            $state = jasmine.createSpyObj("$state", ["transitionTo"]);
-            notification = jasmine.createSpyObj("notification", ["success"]);
-            profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile"]);
-            articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["create"]);
-
-            let getCurrentProfileResponse = $q.defer();
-            getCurrentProfileResponse.resolve({ id: 1 });
-
-            let articleCreate = $q.defer();
-            articleCreate.resolve({ data: { article: { path: "path", profile: { identifier: "profile" } } } });
-
-            profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
-            articleServiceMock.create = jasmine.createSpy("create").and.returnValue(articleCreate.promise);
-        });
-
-        it("create an article in the current profile when save", done => {
-            let component: Cms = new Cms(articleServiceMock, profileServiceMock, $state, notification);
-            component.save();
-            $rootScope.$apply();
-            expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
-            expect(articleServiceMock.create).toHaveBeenCalledWith(1, component.article);
-            done();
-        });
-
-        it("got to the new article page and display an alert when saving sucessfully", done => {
-            let component: Cms = new Cms(articleServiceMock, profileServiceMock, $state, notification);
-            component.save();
-            $rootScope.$apply();
-            expect($state.transitionTo).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
-            expect(notification.success).toHaveBeenCalled();
-            done();
-        });
-
-    });
-});
@@ -1,35 +0,0 @@
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-import {Profile} from "./../models/interfaces";
-import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-import {Notification} from "../components/notification/notification.component";
-
-@Component({
-    selector: 'cms',
-    templateUrl: "app/cms/cms.html",
-    providers: [
-        provide('articleService', { useClass: ArticleService }),
-        provide('profileService', { useClass: ProfileService }),
-        provide('notification', { useClass: Notification })
-    ]
-})
-@Inject(ArticleService, ProfileService, "$state", Notification)
-export class Cms {
-
-    article: any = {};
-
-    constructor(private articleService: ArticleService,
-        private profileService: ProfileService,
-        private $state: ng.ui.IStateService,
-        private notification: Notification) { }
-
-    save() {
-        this.profileService.getCurrentProfile().then((profile: Profile) => {
-            return this.articleService.create(profile.id, this.article);
-        }).then((response: restangular.IResponse) => {
-            this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
-            this.notification.success("Good job!", "Article saved!");
-        });
-    }
-
-}
@@ -1,11 +0,0 @@
-<form>
-  <div class="form-group">
-    <label for="titleInput">Title</label>
-    <input type="text" class="form-control" id="titleInput" placeholder="title" ng-model="vm.article.name">
-  </div>
-  <div class="form-group">
-    <label for="bodyInput">Text</label>
-    <textarea class="form-control" id="bodyInput" rows="10" ng-model="vm.article.body"></textarea>
-  </div>
-  <button type="submit" class="btn btn-default" ng-click="vm.save()">Save</button>
-</form>
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./cms.component";
@@ -1,33 +0,0 @@
-import {AuthController} from "./auth_controller";
-import {AuthService} from "./auth_service";
-
-describe("Controllers", () => {
-
-
-    describe("AuthController", () => {
-
-        it("calls authenticate on AuthService when login called", () => {
-
-            // creating a Mock AuthService
-            let AuthServiceMock: AuthService = jasmine.createSpyObj("AuthService", ["login"]);
-
-            // pass AuthServiceMock into the constructor
-            let authController = new AuthController(null, null, AuthServiceMock);
-
-            // setup of authController -> set the credentials instance property
-            let credentials = { username: "username", password: "password" };
-
-            authController.credentials = credentials;
-
-            // calls the authController login method
-            authController.login();
-
-            // checks if the method login of the injected AuthService has been called
-            expect(AuthServiceMock.login).toHaveBeenCalledWith(credentials);
-
-        });
-
-
-
-    });
-});
@@ -1,21 +0,0 @@
-import {Credentials} from "./../../models/interfaces";
-import {AuthService} from "./auth_service";
-
-export class AuthController {
-
-    static $inject = ["$log", "$stateParams", "AuthService"];
-
-    constructor(
-        private $log: ng.ILogService,
-        private $stateParams: any,
-        private AuthService: AuthService
-    ) {
-
-    }
-
-    credentials: Credentials;
-
-    login() {
-        this.AuthService.login(this.credentials);
-    }
-}
@@ -1,11 +0,0 @@
-export interface IAuthEvents {
-    loginSuccess: string;
-    loginFailed: string;
-    logoutSuccess: string;
-}
-
-export const AUTH_EVENTS: IAuthEvents = {
-    loginSuccess: "auth-login-success",
-    loginFailed: "auth-login-failed",
-    logoutSuccess: "auth-logout-success"
-};
 \ No newline at end of file
@@ -1,82 +0,0 @@
-
-
-import {AuthService, AUTH_EVENTS} from "./";
-import {User, Credentials} from "./../../models/interfaces";
-
-describe("Services", () => {
-
-
-    describe("Auth Service", () => {
-
-        let $httpBackend: ng.IHttpBackendService;
-        let authService: AuthService;
-        let credentials: Credentials;
-        let $rootScope: ng.IRootScopeService;
-        let user: User;
-
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
-            $translateProvider.translations('en', {});
-        }));
-
-        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _$rootScope_: ng.IRootScopeService, _AuthService_: AuthService) => {
-            $httpBackend = _$httpBackend_;
-            authService = _AuthService_;
-            $rootScope = _$rootScope_;
-
-            user = <User>{
-                id: 1,
-                login: "user"
-            };
-        }));
-
-
-        describe("Succesffull login", () => {
-
-            beforeEach(() => {
-                credentials = { username: "user", password: "password" };
-
-                $httpBackend.expectPOST("/api/v1/login", "login=user&password=password").respond(200, { user: user });
-            });
-
-            it("should return loggedUser", (done) => {
-                authService.login(credentials).then((loggedUser) => {
-                    expect(loggedUser).toBeDefined();
-                    done();
-                });
-                $httpBackend.flush();
-                expect($httpBackend.verifyNoOutstandingRequest());
-            });
-
-
-            it("should emit event loggin successful with user logged data", () => {
-
-                authService.login(credentials);
-
-                let eventEmmited: boolean = false;
-                $rootScope.$on(AUTH_EVENTS.loginSuccess, (event: ng.IAngularEvent, userThroughEvent: User) => {
-                    eventEmmited = true;
-                    expect(userThroughEvent).toEqual(user)
-                });
-
-                $httpBackend.flush();
-
-                expect(eventEmmited).toBeTruthy(AUTH_EVENTS.loginSuccess + " was not emmited!");
-            });
-
-            it("should return the current logged in user", () => {
-                authService.login(credentials);
-                $httpBackend.flush();
-                let actual: User = authService.currentUser();
-                expect(actual).toEqual(user, "The returned user must be present");
-            });
-
-            it("should not return the current user after logout", () => {
-                authService.logout();
-                let actual: any = authService.currentUser();
-                expect(actual).toEqual(undefined, "The returned user must not be defined");
-            });
-        });
-
-
-    });
-});
@@ -1,69 +0,0 @@
-import {Injectable, Inject} from "ng-forward";
-
-import {Credentials, NoosferoRootScope, User, UserResponse} from "./../../models/interfaces";
-import {Session} from "./session";
-
-import {AUTH_EVENTS, IAuthEvents} from "./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 $log: ng.ILogService,
-        private auth_events: IAuthEvents) {
-
-    }
-
-    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: User = this.session.create(response.data);
-        this.$rootScope.currentUser = currentUser;
-        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
-        return currentUser;
-    }
-
-    login(credentials: Credentials): ng.IPromise<User> {
-        let url = '/api/v1/login';
-        let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
-        return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
-    }
-
-    private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
-        this.$log.debug('AuthService.login [FAIL] response', response);
-        this.$rootScope.$broadcast(this.auth_events.loginFailed);
-        // return $q.reject(response);
-        return null;
-    }
-
-    public logout() {
-        this.session.destroy();
-        this.$rootScope.currentUser = undefined;
-        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.currentUser();
-    }
-
-    public currentUser(): User {
-        return this.session.currentUser();
-    }
-
-    public isAuthorized(authorizedRoles: string | string[]) {
-        if (!angular.isArray(authorizedRoles)) {
-            authorizedRoles = [<string>authorizedRoles];
-        }
-        return (this.isAuthenticated() && authorizedRoles.indexOf(this.session.currentUser().userRole) !== -1);
-    }
-}
 \ No newline at end of file
@@ -1,5 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./auth_controller";
-export * from "./auth_events";
-export * from "./auth_service";
-export * from "./session";
@@ -1,16 +0,0 @@
-<div class="modal-header">
-  <h3 class="modal-title">{{"auth.title" | translate}}</h3>
-</div>
-<div class="modal-body">
-  <form>
-    <div class="form-group">
-      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
-      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
-    </div>
-    <div class="form-group">
-      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
-      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
-    </div>
-    <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
-  </form>
-</div>
@@ -1,27 +0,0 @@
-import {Injectable, Inject} from "ng-forward";
-import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
-
-@Injectable()
-@Inject("$localStorage", "$log")
-export class Session {
-
-    constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
-
-    }
-
-    create(data: UserResponse): User {
-        this.$localStorage.currentUser = data.user;
-        this.$log.debug('User session created.', this.$localStorage.currentUser);
-        return this.$localStorage.currentUser;
-    };
-
-    destroy() {
-        delete this.$localStorage.currentUser;
-        this.$log.debug('User session destroyed.');
-    };
-
-    currentUser(): User {
-        return this.$localStorage.currentUser;
-    };
-
-}
 \ No newline at end of file
@@ -1,49 +0,0 @@
-import {Component} from "ng-forward";
-import {Session} from "./";
-import {fixtures, createComponentFromClass, createProviderToValue} from "./../../../spec/helpers";
-import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
-
-
-describe("Services", () => {
-
-
-    describe("Session Service", () => {
-
-        let $localStorage: INoosferoLocalStorage = null;
-        let $log: any;
-
-        beforeEach(() => {
-            $localStorage = <INoosferoLocalStorage>{ currentUser: null };
-            $log = jasmine.createSpyObj('$log', ['debug']);
-        });
-
-        it("method 'create()' saves the current user on $localstorage service", () => {
-            let session = new Session($localStorage, $log);
-            let userResponse = <UserResponse>{
-                user: fixtures.user
-            };
-            session.create(userResponse);
-            expect($localStorage.currentUser).toEqual(userResponse.user);
-        });
-
-        it("method 'destroy()' clean the currentUser on $localstorage", () => {
-            let session = new Session($localStorage, $log);
-            let userResponse = <UserResponse>{
-                user: fixtures.user
-            };
-            $localStorage.currentUser = fixtures.user;
-            session.destroy();
-            expect($localStorage.currentUser).toBeUndefined();
-        });
-
-        it("method 'currentUser()' returns the user recorded on $localstorage service", () => {
-            let session = new Session($localStorage, $log);
-            let userResponse = <UserResponse>{
-                user: fixtures.user
-            };
-            $localStorage.currentUser = fixtures.user;
-            expect(session.currentUser()).toEqual($localStorage.currentUser);
-        });
-    });
-
-});
 \ No newline at end of file
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,46 +0,0 @@
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {provide} from 'ng-forward';
-
-import {LanguageSelector} from './language-selector.component';
-
-import * as helpers from "../../../spec/helpers";
-
-describe("Components", () => {
-
-    describe("Language Selector Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        let translatorService: any;
-
-        let buildComponent = (): Promise<ComponentFixture> => {
-            translatorService = jasmine.createSpyObj("translatorService", ["availableLanguages", "currentLanguage"])
-            return helpers.quickCreateComponent({
-                template: "<language-selector></language-selector>",
-                directives: [LanguageSelector],
-                providers: [
-                    provide('TranslatorService', {
-                        useValue: translatorService
-                    })
-                ].concat(helpers.provideFilters("translateFilter"))
-            });
-        }
-
-        it("display language options", (done) => {
-            buildComponent().then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$apply();
-                expect(fixture.debugElement.queryAll('li.language').length).toEqual(2);
-                done();
-            });
-        });
-
-        it("call the translator service when change the language", (done) => {
-            let translatorService = jasmine.createSpyObj("translatorService", ["changeLanguage"]);
-            let languageSelector = new LanguageSelector(<any>translatorService);
-            languageSelector.changeLanguage("en");
-            expect(translatorService.changeLanguage).toHaveBeenCalledWith("en");
-            done();
-        });
-
-    });
-});
@@ -1,24 +0,0 @@
-import {Component, Inject} from "ng-forward";
-import {TranslatorService} from "../translator/translator.service";
-
-@Component({
-    selector: "language-selector",
-    templateUrl: "app/components/language-selector/language-selector.html"
-})
-@Inject(TranslatorService)
-export class LanguageSelector {
-
-    constructor(private translatorService: TranslatorService) { }
-
-    currentLanguage() {
-        return this.translatorService.currentLanguage();
-    }
-
-    changeLanguage(language: string) {
-        this.translatorService.changeLanguage(language);
-    }
-
-    availableLanguages() {
-        return this.translatorService.availableLanguages;
-    }
-}
@@ -1,13 +0,0 @@
-<li class="dropdown profile-menu" dropdown>
-  <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
-    <span>{{"language.selector" | translate}}</span> <b class="caret"></b>
-  </a>
-  <ul class="dropdown-menu" dropdown-menu>
-    <li ng-repeat="(language, description) in ctrl.availableLanguages()"
-      class="language language-{{language}}" ng-class="{'active': language==ctrl.currentLanguage()}">
-      <a href="#" ng-click="ctrl.changeLanguage(language)">
-        {{description}}
-      </a>
-    </li>
-  </ul>
-</li>
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./navbar";
@@ -1,45 +0,0 @@
-(function() {
-  'use strict';
-
-  describe('directive navbar', function() {
-    var vm;
-    var el;
-    var AUTH_EVENTS;
-    var $state;
-
-    beforeEach(module('angular'));
-    beforeEach(inject(function($compile, $rootScope, $httpBackend, _AUTH_EVENTS_, _$state_) {
-      $state = _$state_;
-      AUTH_EVENTS = _AUTH_EVENTS_;
-      $httpBackend.when('POST','/api/v1/login_from_cookie').respond({});
-
-      el = angular.element('<acme-navbar></acme-navbar>');
-
-      $compile(el)($rootScope.$new());
-      $rootScope.$digest();
-      vm = el.isolateScope().vm;
-    }));
-
-    it('should be compiled', function() {
-      expect(el.html()).not.toEqual(null);
-    });
-
-    it('should have isolate scope object with instanciate members', function() {
-      expect(vm).toEqual(jasmine.any(Object));
-      expect(vm.currentUser).toEqual(undefined);
-    });
-
-    it('should reload current state after login', function() {
-      spyOn($state, 'go');
-      el.isolateScope().$broadcast(AUTH_EVENTS.loginSuccess, {});
-      expect($state.go).toHaveBeenCalled();
-    });
-
-    it('should open login when not logged in', function() {
-      spyOn(vm, 'openLogin');
-      vm.activate();
-      expect(vm.openLogin).toHaveBeenCalled();
-    });
-
-  });
-})();
@@ -1,49 +0,0 @@
-<nav class="navbar navbar-static-top navbar-inverse">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
-        <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" ui-sref="main">
-        <span class="noosfero-logo"><img src="assets/images/logo-noosfero.png"></span> {{"noosfero.name" | translate}}
-      </a>
-    </div>
-
-    <div class="collapse navbar-collapse" id="navbar-collapse" collapse="isCollapsed">
-      <ul class="nav navbar-nav">
-      </ul>
-
-      <ul class="nav navbar-nav navbar-right">
-        <li ng-show="!ctrl.currentUser">
-          <a ng-href="#" ng-click="ctrl.openLogin()">{{"navbar.login" | translate}}</a>
-        </li>
-
-        <li class="dropdown profile-menu" ng-show="ctrl.currentUser" dropdown>
-          <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
-            <noosfero-profile-image [profile]="ctrl.currentUser.person" class="profile-image"></noosfero-profile-image>
-            <span ng-bind="ctrl.currentUser.person.name"></span> <b class="caret"></b>
-          </a>
-          <ul class="dropdown-menu" dropdown-menu>
-              <li>
-                  <a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> {{"navbar.profile" | translate}}</a>
-              </li>
-              <li>
-                  <a target="_self" ui-sref="main.profile.settings({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-gear"></i> {{"navbar.settings" | translate}}</a>
-              </li>
-              <li class="divider"></li>
-              <li>
-                  <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
-              </li>
-          </ul>
-        </li>
-      </ul>
-      <ul class="nav navbar-nav navbar-right">
-        <language-selector class="nav navbar-nav navbar-right"></language-selector>
-      </ul>
-      <div ui-view="actions"></div>
-    </div>
-  </div>
-</nav>
@@ -1,31 +0,0 @@
-.navbar {
-
-  .container-fluid {
-    padding-right: 12%;
-    padding-left: 12%;
-    @media (max-width: 978px) {
-      padding-right: 2%;
-      padding-left: 2%;
-    }
-
-    .navbar-brand {
-      .noosfero-logo img {
-        height: 35px;
-      }
-    }
-
-    .navbar-nav {
-      .profile-menu .profile-image {
-        img {
-          height: 30px;
-          width: 30px;
-          display: inline-block;
-          @extend .img-circle;
-        }
-        i {
-          font-size: 1.7em;
-        }
-      }
-    }
-  }
-}
@@ -1,188 +0,0 @@
-import * as helpers from "./../../../spec/helpers";
-import {Navbar} from "./navbar";
-import {AUTH_EVENTS} from "./../auth";
-import {User} from "./../../models/interfaces";
-import {Injectable, Provider, provide} from "ng-forward";
-
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-
-import {Session, AuthService, AuthController, IAuthEvents} from "./../auth";
-
-
-describe("Components", () => {
-
-    describe("Navbar Component", () => {
-
-        let user: User = null;
-        let scope: any;
-        let $rootScope: ng.IRootScopeService;
-
-        let modalInstance: any;
-        let $modal: any;
-        let authService: any;
-        let stateService: any;
-        let sessionService: Session;
-
-        let provideFunc = provide;
-
-        // before Each -> loading mocks on locals variables 
-        beforeEach(() => {
-            user = <User>{
-                id: 1,
-                login: "user"
-            };
-            scope = helpers.mocks.scopeWithEvents;
-            modalInstance = helpers.mocks.modalInstance;
-            $modal = helpers.mocks.$modal;
-            authService = helpers.mocks.authService;
-            stateService = jasmine.createSpyObj("$state", ["go"]);
-            sessionService = <any>helpers.mocks.sessionWithCurrentUser(user);
-        });
-
-
-        // loading the templates
-        beforeEach(angular.mock.module("templates"));
-
-
-        // this function allow build the fixture of the container component
-        // and is reused in each test
-        // The main idea behing not prebuild it on a general beforeEach block is
-        // to allow tests configure the mock services accordilly their own needs   
-        let buildComponent = (): Promise<ComponentFixture> => {
-            return helpers.quickCreateComponent({
-                providers: [
-                    provide('$modal', {
-                        useValue: $modal
-                    }),
-                    provide('AuthService', {
-                        useValue: authService
-                    }),
-                    helpers.provideEmptyObjects('moment'),
-                    provide('$state', {
-                        useValue: stateService
-                    }),
-                    provide("$scope", {
-                        useValue: scope
-                    }),
-                    provide('Session', {
-                        useValue: sessionService
-                    }),
-                    provide('AUTH_EVENTS', {
-                        useValue: {
-                            AUTH_EVENTS
-                        }
-                    }),
-                    provide('TranslatorService', {
-                        useValue: helpers.mocks.translatorService
-                    })
-                ].concat(helpers.provideFilters("translateFilter")),
-                directives: [Navbar],
-                template: '<acme-navbar></acme-navbar>'
-            });
-        }
-
-
-        it('should get the loggedIn user', (done: Function) => {
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarInstance: Navbar = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(navbarInstance).toBeDefined();
-                expect(navbarInstance["currentUser"]).toEqual(user);
-                done();
-            });
-        });
-
-        it('should open on click', (done: Function) => {
-            spyOn($modal, "open");
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                navbarComp.openLogin();
-                expect($modal.open).toHaveBeenCalled();
-                expect($modal.open).toHaveBeenCalledWith({
-                    templateUrl: 'app/components/auth/login.html',
-                    controller: AuthController,
-                    controllerAs: 'vm',
-                    bindToController: true
-                });
-                done();
-            });
-        });
-
-        it('should logout', (done: Function) => {
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                spyOn(authService, "logout");
-                try {
-                    navbarComp.logout();
-                    expect(authService.logout).toHaveBeenCalled();
-                    done();
-                } catch (e) {
-                    console.error(e);
-                    fail(e.message);
-                    done();
-                }
-            });
-        });
-
-
-        it('should not activate user when logged in', (done: Function) => {
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                spyOn(navbarComp, "openLogin");
-                navbarComp.activate();
-                expect((<any>navbarComp.openLogin).calls.count()).toBe(0);
-                done();
-            });
-        });
-
-        it('should activate when user not logged in', (done: Function) => {
-            spyOn(sessionService, 'currentUser').and.returnValue(null);
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                spyOn(navbarComp, "openLogin");
-                navbarComp.activate();
-                expect(navbarComp.openLogin).toHaveBeenCalled();
-                done();
-            });
-        });
-
-
-        it('closes the modal after login', (done: Function) => {
-            modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
-            modalInstance.close = jasmine.createSpy("close");
-
-            $modal.open = () => {
-                return modalInstance;
-            };
-
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                let localScope: ng.IScope = navbarComp["$scope"];
-
-                navbarComp.openLogin();
-                localScope.$emit(AUTH_EVENTS.loginSuccess);
-                expect(modalInstance.close).toHaveBeenCalled();
-                done();
-            });
-        });
-
-        it('updates current user on logout', (done: Function) => {
-            buildComponent().then((fixture: ComponentFixture) => {
-                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                let localScope: ng.IScope = navbarComp["$scope"];
-
-                // init navbar  currentUser with some user
-                navbarComp["currentUser"] = user;
-
-                // changes the current User to return null,
-                // and emmit the 'logoutSuccess' event
-                // just what happens when user logsout
-                sessionService.currentUser = () => { return null; };
-                localScope.$emit(AUTH_EVENTS.logoutSuccess);
-                expect(navbarComp["currentUser"]).toBeNull();
-                done();
-            });
-        });
-
-
-    });
-});
@@ -1,67 +0,0 @@
-import {Component, Inject} from "ng-forward";
-import {LanguageSelector} from "../language-selector/language-selector.component";
-
-
-import {Session, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../auth";
-import {User} from "./../../models/interfaces";
-
-@Component({
-    selector: "acme-navbar",
-    templateUrl: "app/components/navbar/navbar.html",
-    directives: [LanguageSelector],
-    providers: [AuthService, Session]
-})
-@Inject("$modal", AuthService, "Session", "$scope", "$state")
-export class Navbar {
-
-    private currentUser: User;
-    private modalInstance: any = null;
-    /**
-     *
-     */
-    constructor(
-        private $modal: any,
-        private authService: AuthService,
-        private session: Session,
-        private $scope: ng.IScope,
-        private $state: ng.ui.IStateService
-    ) {
-        this.currentUser = this.session.currentUser();
-
-        this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
-            if (this.modalInstance) {
-                this.modalInstance.close();
-                this.modalInstance = null;
-            }
-
-            this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
-        });
-
-        this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
-            this.currentUser = this.session.currentUser();
-        });
-    }
-
-    openLogin() {
-        this.modalInstance = this.$modal.open({
-            templateUrl: 'app/components/auth/login.html',
-            controller: AuthController,
-            controllerAs: 'vm',
-            bindToController: true
-        });
-    };
-
-    logout() {
-        this.authService.logout();
-        this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
-    };
-
-
-
-    activate() {
-        if (!this.currentUser) {
-            this.openLogin();
-        }
-    }
-
-}
@@ -1,36 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../spec/helpers';
-
-import {NoosferoActivities} from './activities.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
-
-
-describe("Components", () => {
-
-    describe("Noosfero Activities", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        @Component({
-            selector: 'test-container-component',
-            template: htmlTemplate,
-            directives: [NoosferoActivities],
-            providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
-        })
-        class BlockContainerComponent {
-            activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
-        }
-
-        it("render a noosfero activity tag for each activity", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
-                done();
-            });
-        });
-    });
-
-});
@@ -1,27 +0,0 @@
-import {Component, Input} from "ng-forward";
-import {NoosferoActivity} from "./activity/activity.component";
-import {Activity} from "../../models/interfaces";
-
-/**
- * @ngdoc controller
- * @name NoosferoActivities
- * @description
- *  The controller responsible to retreive profile activities.
- */
-
-@Component({
-    selector: "noosfero-activities",
-    templateUrl: 'app/components/noosfero-activities/activities.html',
-    directives: [NoosferoActivity]
-})
-export class NoosferoActivities {
-
-    /**
-     * @ngdoc property
-     * @propertyOf NoosferoActivities
-     * @name activities
-     * @returns {Activity[]} An array of {@link Activity}.
-     */
-    @Input() activities: Activity[];
-
-}
@@ -1,5 +0,0 @@
-<timeline>
-  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
-    <noosfero-activity [activity]="activity"></noosfero-activity>
-  </timeline-event>
-</timeline>
@@ -1,11 +0,0 @@
-.comma-separated {
-  .separated-item {
-    &:after {
-      content: ", ";
-      margin-left: -3px;
-    }
-    &:last-child:after {
-      content: "";
-    }
-  }
-}
@@ -1,38 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../../spec/helpers';
-
-import {NoosferoActivity} from './activity.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
-
-
-describe("Components", () => {
-
-    describe("Noosfero Activity", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        @Component({
-            selector: 'test-container-component',
-            template: htmlTemplate,
-            directives: [NoosferoActivity],
-            providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
-        })
-        class BlockContainerComponent {
-            activity = { name: "activity1", verb: "create_article" };
-        }
-
-        it("render the specific template for an activity verb", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let component: NoosferoActivity = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(component.getActivityTemplate()).toEqual('app/components/noosfero-activities/activity/create_article.html');
-                expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
-                done();
-            });
-        });
-    });
-
-});
@@ -1,16 +0,0 @@
-import {Component, Input} from "ng-forward";
-import {Activity} from "../../../models/interfaces";
-
-@Component({
-    selector: "noosfero-activity",
-    templateUrl: 'app/components/noosfero-activities/activity/activity.html'
-})
-export class NoosferoActivity {
-
-    @Input() activity: Activity;
-
-    getActivityTemplate() {
-        return 'app/components/noosfero-activities/activity/' + this.activity.verb + '.html';
-    }
-
-}
@@ -1,3 +0,0 @@
-<div class="activity {{ctrl.activity.verb}}">
-  <ng-include src="ctrl.getActivityTemplate()"></ng-include>
-</div>
@@ -1,13 +0,0 @@
-<timeline-badge class="info">
-  <i class="fa fa-user-plus"></i>
-</timeline-badge>
-<timeline-panel>
-  <timeline-heading>
-    <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
-      <span> {{"activities.add_member_in_community.description" | translate}}</span>
-    </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
-  </timeline-heading>
-  <div class="timeline-body"></div>
-</timeline-panel>
@@ -1,26 +0,0 @@
-<timeline-badge class="success">
-  <i class="fa fa-file-text"></i>
-</timeline-badge>
-<timeline-panel>
-  <timeline-heading>
-    <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
-      <span> {{"activities.create_article.description" | translate}} </span>
-      <a ui-sref="main.profile.info({profile: ctrl.activity.target.article.profile.identifier})">
-        <strong ng-bind="ctrl.activity.target.article.profile.name"></strong></span>
-      </a>
-    </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
-  </timeline-heading>
-  <div class="timeline-body">
-    <div class="article">
-      <div class="title">
-        <a ui-sref="main.profile.page({profile: ctrl.activity.target.article.profile.identifier, page: ctrl.activity.target.article.path})"
-           ng-bind="ctrl.activity.target.article.title"></a>
-      </div>
-      <div class="lead small">
-        <div ng-bind-html="ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
-      </div>
-    </div>
-  </div>
-</timeline-panel>
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,18 +0,0 @@
-<timeline-badge class="info">
-  <i class="fa fa-user-plus"></i>
-</timeline-badge>
-<timeline-panel>
-  <timeline-heading>
-    <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
-      <span> {{"activities.new_friendship.description" | translate:{friends: ctrl.activity.params.friend_name.length}:"messageformat" }} </span>
-      <span class="comma-separated">
-        <a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
-          <strong ng-bind="friend"></strong>
-        </a>
-      </span>
-    </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
-  </timeline-heading>
-  <div class="timeline-body"></div>
-</timeline-panel>
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,23 +0,0 @@
-<div class="article">
-  <div class="page-header">
-    <h3 ng-bind="ctrl.article.title"></h3>
-  </div>
-
-  <div class="sub-header clearfix">
-    <div class="page-info pull-right small text-muted">
-      <span class="time">
-        <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at | dateFormat"></span>
-      </span>
-      <span class="author" ng-if="ctrl.article.author">
-        <i class="fa fa-user"></i>
-        <a ui-sref="main.profile.home({profile: ctrl.article.author.identifier})">
-          <span class="author-name" ng-bind="ctrl.article.author.name"></span>
-        </a>
-      </span>
-    </div>
-  </div>
-
-  <div class="page-body">
-    <div ng-bind-html="ctrl.article.body"></div>
-  </div>
-</div>
@@ -1,17 +0,0 @@
-.article {
-  .page-info {
-    .author {
-      a {
-        color: #b4bcc2;
-      }
-    }
-  }
-
-  .page-header {
-      margin-bottom: 5px;
-  }
-
-  .sub-header {
-    margin-bottom: 20px;
-  }
-}
@@ -1,108 +0,0 @@
-
-import {Input, provide, Component} from 'ng-forward';
-import {ArticleView, ArticleDefaultView} from './article_view';
-
-import {createComponentFromClass, quickCreateComponent} from "../../../../spec/helpers";
-
-// 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("Components", () => {
-
-    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() {
-                }
-            }
-
-            createComponentFromClass(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
-            createComponentFromClass(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() {
-                }
-            }
-            createComponentFromClass(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,57 +0,0 @@
-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
-import {ArticleBlog} from "../blog/blog.component";
-
-/**
- * @ngdoc controller
- * @name ArticleDefaultView
- * @description
- *  A default view for Noosfero Articles. If the specific article view is
- * not implemented, then this view is used.
- */
-@Component({
-    selector: 'noosfero-default-article',
-    templateUrl: 'app/components/noosfero-articles/article/article.html'
-})
-export class ArticleDefaultView {
-
-    @Input() article: any;
-    @Input() profile: any;
-
-}
-
-/**
- * @ngdoc controller
- * @name ArticleView
- * @description
- *  A dynamic view for articles. It uses the article type to replace
- * the default template with the custom article directive.
- */
-@Component({
-    selector: 'noosfero-article',
-    template: 'not-used',
-    directives: [ArticleDefaultView, ArticleBlog]
-})
-@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) {
-
-    }
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./article_view";
@@ -1,132 +0,0 @@
-import {
-    providers
-} from 'ng-forward/cjs/testing/providers';
-
-import {
-    Input,
-    Component
-} from 'ng-forward';
-import {
-    ArticleBlog
-} from './blog.component';
-
-import {
-    createComponentFromClass,
-    quickCreateComponent,
-    provideEmptyObjects,
-    createProviderToValue,
-    provideFilters
-} from "../../../../spec/helpers.ts";
-
-// this htmlTemplate will be re-used between the container components in this spec file
-const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';
-
-describe("Blog Component", () => {
-
-    function promiseResultTemplate(response ? : {}) {
-        let thenFuncEmpty = (func: Function) => {
-            // does nothing
-        };
-        if (response) {
-            return {
-                then: (func: (response: any) => void) => {
-                    func(response);
-                }
-            };
-        } else {
-            return {
-                then: (func: (response: any) => void) => {
-                    // does nothing
-                }
-            };
-        }
-    }
-
-    let articleService = {
-        getChildren: (article_id: number, filters: {}) => {
-            return promiseResultTemplate(null);
-        }
-    };
-
-    @Component({
-        selector: 'test-container-component',
-        template: htmlTemplate,
-        directives: [ArticleBlog],
-        providers: [
-            provideEmptyObjects('Restangular'),
-            createProviderToValue('ArticleService', articleService),
-            provideFilters('truncateFilter')
-        ]
-    })
-    class BlogContainerComponent {
-        article = {
-            type: 'anyArticleType'
-        };
-        profile = {
-            name: 'profile-name'
-        };
-    }
-
-    beforeEach(() => {
-
-        // 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
-        angular.mock.module("templates")
-
-        providers((provide: any) => {
-            return <any > [
-                provide('ArticleService', {
-                    useValue: articleService
-                })
-            ]
-        });
-    });
-
-    it("renders the blog content", (done: Function) => {
-
-        createComponentFromClass(BlogContainerComponent).then((fixture) => {
-
-            expect(fixture.debugElement.query('div.blog').length).toEqual(1);
-
-            done();
-        });
-    });
-
-    it("verify the blog data", (done: Function) => {
-
-        // defining a mock result to articleService.getChildren method
-        articleService.getChildren = (article_id: number, filters: {}) => {
-            return promiseResultTemplate({
-                headers: (headerName: string) => {
-                    return 1;
-                },
-                data: < any > {
-                    articles: [{
-                        id: 1,
-                        title: 'The article test'
-                    }]
-                }
-            });
-        };
-
-        createComponentFromClass(BlogContainerComponent).then((fixture) => {
-
-            // gets the children component of BlogContainerComponent
-            let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            // check if the component property are the provided by the mocked articleService
-            let post = {
-                id: 1,
-                title: 'The article test'
-            };
-            expect(( < any > articleBlog)["posts"][0]).toEqual(jasmine.objectContaining(post));
-            expect(( < any > articleBlog)["totalPosts"]).toEqual(1);
-
-            done();
-        });
-
-    });
-
-});
 \ No newline at end of file
@@ -1,48 +0,0 @@
-import {Component, Input, Inject} from "ng-forward";
-
-import {Article, Profile} from "./../../../models/interfaces";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
-
-/**
- * @ngdoc controller
- * @name ArticleBlog
- * @description
- *  An specific {@link ArticleView} for Blog articles.
- */
-@Component({
-    selector: "noosfero-blog",
-    templateUrl: "app/components/noosfero-articles/blog/blog.html"
-})
-@Inject(ArticleService)
-export class ArticleBlog {
-
-    @Input() article: Article;
-    @Input() profile: Profile;
-
-    private posts: any[];
-    private perPage: number = 3;
-    private currentPage: number;
-    private totalPosts: number = 0;
-
-    constructor(private articleService: ArticleService) { }
-
-    ngOnInit() {
-        this.loadPage();
-    }
-
-    loadPage() {
-        let filters = {
-            content_type: "TinyMceArticle",
-            per_page: this.perPage,
-            page: this.currentPage
-        };
-
-        this.articleService
-            .getChildren(this.article.id, filters)
-            .then((response: restangular.IResponse) => {
-                this.totalPosts = <number>(<any>response.headers("total"));
-                this.posts = response.data.articles;
-            });
-    }
-
-}
@@ -1,24 +0,0 @@
-<div class="blog">
-  <div class="blog-cover" ng-show="ctrl.article.image">
-    <img ng-src="{{ctrl.article.image.url}}" class="img-responsive">
-    <h3 ng-bind="ctrl.article.title"></h3>
-  </div>
-
-  <div class="page-header" ng-show="!ctrl.article.image">
-    <h3 ng-bind="ctrl.article.title"></h3>
-  </div>
-
-  <div>
-    <div ng-repeat="child in ctrl.posts | orderBy: 'created_at':true">
-      <div class="page-header">
-        <a class="title" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: child.path})"><h4 ng-bind="child.title"></h4></a>
-        <div class="post-lead" ng-bind-html="child.body | truncate: 500: '...': true"></div>
-      </div>
-    </div>
-  </div>
-
-  <pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
-    boundary-links="true" items-per-page="ctrl.perPage" ng-change="ctrl.loadPage()"
-    first-text="«" last-text="»" previous-text="‹" next-text="›">
-  </pagination>
-</div>
@@ -1,15 +0,0 @@
-.blog {
-  .blog-cover {
-    margin: -15px;
-    position: relative;
-    h3 {
-      position: absolute;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.4);
-      color: white;
-      padding: 10px 15px;
-      margin: 0;
-      width: 100%;
-    }
-  }
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./blog.component";
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,91 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component} from 'ng-forward';
-
-import {Block} from './block.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block>';
-
-describe("Components", () => {
-    describe("Block 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 Block will be load on our tests
-        beforeEach(angular.mock.module("templates"));
-
-        it("receives the block and the owner as inputs", done => {
-
-            // Creating a container component (BlockContainerComponent) to include 
-            // the component under test (Block)  
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block] })
-            class BlockContainerComponent {
-                block = { type: 'Block' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            tcb
-                .createAsync(BlockContainerComponent).then(fixture => {
-                    // and here we can inspect and run the test assertions 
-                    let myComponent: Block = fixture.componentInstance;
-
-                    // assure the block object inside the Block matches
-                    // the provided through the parent component
-                    expect(myComponent.block.type).toEqual("Block");
-                    expect(myComponent.owner.name).toEqual("profile-name");
-                    done();
-                });
-        });
-
-
-        it("renders a component which matches to the block type", done => {
-            // CustomBlock component created to check if it will be used
-            // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
-            // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
-            @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
-            class CustomBlock {
-                @Input() block: any;
-                @Input() owner: any;
-            }
-
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block, CustomBlock] })
-            class CustomBlockType {
-                block = { type: 'CustomBlock' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-            tcb
-                .createAsync(CustomBlockType).then(fixture => {
-                    let myComponent: CustomBlockType = fixture.componentInstance;
-                    expect(myComponent.block.type).toEqual("CustomBlock");
-                    expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
-                    done();
-                });
-        });
-
-
-        it("renders the default block when hasn't defined a block type", done => {
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block] })
-            class CustomBlockType {
-                block: any = { type: null };
-                owner: any = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-            tcb
-                .createAsync(CustomBlockType).then(fixture => {
-                    let myComponent: CustomBlockType = fixture.componentInstance;
-                    expect(myComponent.block.type).toBeNull();
-                    expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
-                    done();
-                });
-        });
-
-    });
-});
 \ No newline at end of file
@@ -1,20 +0,0 @@
-import { Input, Inject, Component } from 'ng-forward';
-
-@Component({
-    selector: 'noosfero-block',
-    template: '<div></div>'
-})
-@Inject("$element", "$scope", "$injector", "$compile")
-export class Block {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    ngOnInit() {
-        let blockName = (this.block && this.block.type) ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
-        this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
-    }
-
-    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
-    }
-}
@@ -1,10 +0,0 @@
-.block {
-  .panel-title {
-    font-size: 15px;
-    font-weight: bold;
-  }
-  .panel-heading {
-    background-color: transparent;
-    border: 0;
-  }
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./block.component";
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./link-list.component";
@@ -1,65 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../../spec/helpers';
-
-import {LinkListBlock} from './link-list.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>';
-
-
-describe("Components", () => {
-
-    describe("Link List Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        it("receives the block and the owner as inputs", done => {
-
-            // Creating a container component (BlockContainerComponent) to include
-            // the component under test (Block)
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlock] })
-            class BlockContainerComponent {
-                block = { type: 'Block' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            //.overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] })
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions
-                let myComponent: LinkListBlock = fixture.componentInstance;
-
-                // assure the block object inside the Block matches
-                // the provided through the parent component
-                expect(myComponent.block.type).toEqual("Block");
-                expect(myComponent.owner.name).toEqual("profile-name");
-                done();
-            });
-        });
-
-
-        it("display links stored in block settings", done => {
-
-            @Component({
-                selector: 'test-container-component',
-                template: htmlTemplate,
-                directives: [LinkListBlock],
-                providers: provideFilters("noosferoTemplateFilter")
-            })
-            class CustomBlockType {
-                block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } };
-                owner: any = { name: 'profile-name' };
-            }
-            tcb.createAsync(CustomBlockType).then(fixture => {
-                expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2);
-                done();
-            });
-        });
-
-    });
-
-});
 \ No newline at end of file
@@ -1,20 +0,0 @@
-import {Component, Input} from "ng-forward";
-
-@Component({
-    selector: "noosfero-link-list-block",
-    templateUrl: "app/components/noosfero-blocks/link-list/link-list.html"
-})
-export class LinkListBlock {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    links: any;
-
-    ngOnInit() {
-        if (this.block && this.block.settings) {
-            this.links = this.block.settings.links;
-        }
-    }
-
-}
@@ -1,7 +0,0 @@
-<div class="link-list-block">
-  <div ng-repeat="link in ctrl.links">
-    <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
-      <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
-    </a>
-  </div>
-</div>
@@ -1,34 +0,0 @@
-.icon-event {
-  @extend .fa-calendar;
-}
-.icon-photos {
-  @extend .fa-photo;
-}
-.icon-edit {
-  @extend .fa-edit;
-}
-.icon-ok {
-  @extend .fa-check;
-}
-.icon-send {
-  @extend .fa-send-o;
-}
-.icon-menu-people {
-  @extend .fa-user;
-}
-.icon-forum {
-  @extend .fa-users;
-}
-.icon-new {
-  @extend .fa-file-o;
-}
-.icon-save {
-  @extend .fa-save;
-}
-
-.link-list-block {
-  a i {
-    line-height: 25px;
-    color: #949494;
-  }
-}
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,41 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component, StateConfig} from 'ng-forward';
-
-import {MainBlock} from './main-block.component';
-import {NoosferoApp} from '../../../index.module';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
-
-describe("Components", () => {
-    describe("Main Block 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 Block will be load on our tests
-        beforeEach(angular.mock.module("templates"));
-
-        it("check if the main block has a tag with ui-view attribute", done => {
-
-            // Creating a container component (BlockContainerComponent) to include
-            // the component under test (Block)
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlock] })
-            class BlockContainerComponent {
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions
-                //let myComponent: MainBlock = fixture.componentInstance;
-
-                // assure the block object inside the Block matches
-                // the provided through the parent component
-                expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1)
-                done();
-            });
-        });
-        
-    });
-});
 \ No newline at end of file
@@ -1,10 +0,0 @@
-import {Component, Input} from 'ng-forward'
-import {Block} from '../block.component';
-
-@Component({
-    selector: 'noosfero-main-block',
-    templateUrl: 'app/components/noosfero-blocks/main-block/main-block.html'
-})
-export class MainBlock {
-
-}
@@ -1 +0,0 @@
-<div ui-view="mainBlockContent" autoscroll></div>
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,53 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-
-import {MembersBlock} from './members-block.component';
-
-const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Members Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        let state = jasmine.createSpyObj("state", ["go"]);
-        let providers = [
-            new Provider('truncateFilter', { useValue: () => { } }),
-            new Provider('stripTagsFilter', { useValue: () => { } }),
-            new Provider('$state', { useValue: state }),
-            new Provider('ProfileService', {
-                useValue: {
-                    getProfileMembers: (profileId: number, filters: any): any => {
-                        return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
-                    }
-                }
-            }),
-        ];
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MembersBlock], providers: providers })
-        class BlockContainerComponent {
-            block = { type: 'Block', settings: {} };
-            owner = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        it("get members of the block owner", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let block: MembersBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(block.members).toEqual([{ identifier: "person1" }]);
-                done();
-            });
-        });
-
-        it("render the profile image for each member", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$apply();
-                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
-                done();
-            });
-        });
-
-    });
-});
 \ No newline at end of file
@@ -1,25 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: "noosfero-members-block",
-    templateUrl: 'app/components/noosfero-blocks/members-block/members-block.html',
-})
-@Inject(ProfileService)
-export class MembersBlock {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    members: any = [];
-
-    constructor(private profileService: ProfileService) {
-
-    }
-
-    ngOnInit() {
-        this.profileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
-            this.members = response.data.people;
-        });
-    }
-}
@@ -1,5 +0,0 @@
-<div class="members-block">
-  <a ng-repeat="member in ctrl.members" ui-sref="main.profile.home({profile: member.identifier})" class="member">
-    <noosfero-profile-image [profile]="member"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,17 +0,0 @@
-.members-block {
-  .member {
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        background-color: #889DB1;
-        color: #F1F1F1;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -1,46 +0,0 @@
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-
-import {ProfileImageBlock} from './profile-image-block.component';
-
-import * as helpers from "./../../../../spec/helpers";
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-profile-image-block  [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-image-block>';
-
-describe("Components", () => {
-
-    describe("Profile Image Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        @Component({
-            selector: 'test-container-component',
-            template: htmlTemplate,
-            directives: [ProfileImageBlock],
-            providers: helpers.provideFilters("translateFilter")
-        })
-        class BlockContainerComponent {
-            block = { type: 'Block' };
-            owner = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        it("show image if present", () => {
-            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
-                var elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('div.profile-image-block').length).toEqual(1);
-            });
-        });
-
-        it("has link to the profile", () => {
-            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
-                var elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('a.settings-link').length).toEqual(1);
-            });
-        });
-
-    });
-});
@@ -1,14 +0,0 @@
-import {Inject, Input, Component} from "ng-forward";
-import {ProfileImage} from "./../../../components/noosfero/profile-image/profile-image.component";
-
-@Component({
-    selector: "noosfero-profile-image-block",
-    templateUrl: 'app/components/noosfero-blocks/profile-image-block/profile-image-block.html',
-    directives: [ProfileImage]
-})
-export class ProfileImageBlock {
-
-    @Input() block: any;
-    @Input() owner: any;
-    
-}
@@ -1,6 +0,0 @@
-<div class="center-block text-center profile-image-block">
-  <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
-    <noosfero-profile-image [profile]="ctrl.owner"></noosfero-profile-image>
-  </a>
-  <a class="settings-link" target="_self" ui-sref="main.profile.settings({profile: ctrl.owner.identifier})">{{"blocks.profile_image.control_panel" | translate}}</a>
-</div>
@@ -1,5 +0,0 @@
-.profile-image-block {
-  .settings-link {
-    display: block;
-  }
-}
@@ -1,36 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Component} from 'ng-forward';
-
-import {RawHTMLBlock} from './raw-html.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-raw-htmlblock [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-raw-htmlblock>';
-
-describe("Components", () => {
-
-    describe("Raw Html Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-        beforeEach(angular.mock.module("ngSanitize"));
-
-        it("display html stored in block settings", done => {
-
-            @Component({
-                selector: 'test-container-component',
-                template: htmlTemplate,
-                directives: [RawHTMLBlock],
-            })
-            class CustomBlockType {
-                block: any = { settings: { html: '<em>block content</em>' } };
-                owner: any = { name: 'profile-name' };
-            }
-            tcb.createAsync(CustomBlockType).then(fixture => {
-                expect(fixture.debugElement.query(".raw-html-block em").text().trim()).toEqual('block content');
-                done();
-            });
-        });
-
-    });
-
-});
@@ -1,18 +0,0 @@
-import {Component, Input} from "ng-forward";
-
-@Component({
-    selector: "noosfero-raw-htmlblock",
-    templateUrl: 'app/components/noosfero-blocks/raw-html/raw-html.html'
-})
-
-export class RawHTMLBlock {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    html: string;
-
-    ngOnInit() {
-        this.html = this.block.settings.html;
-    }
-}
@@ -1,2 +0,0 @@
-<div class="raw-html-block" ng-bind-html="ctrl.html">
-</div>
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,53 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../../spec/helpers';
-import {RecentDocumentsBlock} from './recent-documents.component';
-
-const htmlTemplate: string = '<noosfero-recent-documents-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-documents-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Recent Documents Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        let state = jasmine.createSpyObj("state", ["go"]);
-        let providers = [
-            new Provider('$state', { useValue: state }),
-            new Provider('ArticleService', {
-                useValue: {
-                    getByProfile: (profileId: number, filters: any): any => {
-                        return Promise.resolve({ data: { articles: [{ name: "article1" }] } });
-                    }
-                }
-            }),
-        ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
-
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentDocumentsBlock], providers: providers })
-        class BlockContainerComponent {
-            block = { type: 'Block', settings: {} };
-            owner = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        it("get recent documents from the article service", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
-                done();
-            });
-        });
-
-        it("go to article page when open a document", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
-                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
-                expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
-                done();
-            });
-        });
-
-    });
-});
 \ No newline at end of file
@@ -1,38 +0,0 @@
-import {Component, Inject, Input} from "ng-forward";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
-
-@Component({
-    selector: "noosfero-recent-documents-block",
-    templateUrl: 'app/components/noosfero-blocks/recent-documents/recent-documents.html'
-})
-@Inject(ArticleService, "$state")
-export class RecentDocumentsBlock {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    profile: any;
-    documents: any;
-
-    documentsLoaded: boolean = false;
-
-    constructor(private articleService: ArticleService, private $state: any) {
-    }
-
-    ngOnInit() {
-        this.profile = this.owner;
-        this.documents = [];
-
-        var limit = (this.block && this.block.settings) ? this.block.settings.limit : null || 5;
-        //FIXME get all text articles
-        this.articleService.getByProfile(this.profile.id, { content_type: 'TinyMceArticle', per_page: limit }).then((response: any) => {
-            this.documents = response.data.articles;
-            this.documentsLoaded = true;
-        });
-    }
-
-    openDocument(article: any) {
-        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
-    }
-
-}
@@ -1,18 +0,0 @@
-<div deckgrid source="ctrl.documents" class="deckgrid">
-  <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
-      <div class="author media-left" ng-show="card.author.image">
-        <img ng-src="{{card.author.image.url}}" class="img-circle">
-      </div>
-      <div class="header media-body">
-        <h5 class="title media-heading" ng-bind="card.title"></h5>
-
-        <div class="subheader">
-          <span class="time">
-            <i class="fa fa-clock-o"></i> <span am-time-ago="card.created_at | dateFormat"></span>
-          </span>
-        </div>
-      </div>
-      <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
-      <div class="post-lead" ng-bind-html="card.body | stripTags | truncate: 100: '...': true"></div>
-  </div>
-</div>
@@ -1,65 +0,0 @@
-.block.recentdocumentsblock {
-  .deckgrid[deckgrid]::before {
-    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
-    visibility: hidden;
-  }
-  .author {
-    img {
-      width: 30px;
-      height: 30px;
-    }
-  }
-  .header {
-    .subheader {
-      color: #C1C1C1;
-      font-size: 10px;
-    }
-  }
-  .post-lead {
-    color: #8E8E8E;
-    font-size: 14px;
-  }
-  .article-image {
-    margin: 10px 0;
-  }
-}
-
-.col-md-2-5 {
-  .deckgrid[deckgrid]::before {
-    content: '1 .deck-column';
-  }
-}
-
-.col-md-7 {
-  .block.recentdocumentsblock {
-    background-color: transparent;
-    border: 0;
-
-    .deckgrid[deckgrid]::before {
-        content: '3 .deck-column';
-    }
-
-    .panel-heading {
-      display: none;
-    }
-    .panel-body {
-      padding: 0;
-    }
-
-    .deckgrid {
-      .column {
-        float: left;
-      }
-
-      .deck-column {
-        @extend .col-md-4;
-        padding: 0;
-
-        .a-card {
-          padding: 10px;
-          margin: 3px;
-        }
-      }
-    }
-  }
-}
@@ -1,10 +0,0 @@
-<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <div ng-repeat="block in box.blocks | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" >
-    <div class="panel-heading" ng-show="block.title">
-      <h3 class="panel-title">{{block.title}}</h3>
-    </div>
-    <div class="panel-body">
-      <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
-    </div>
-  </div>
-</div>
@@ -1,67 +0,0 @@
-import {Component} from 'ng-forward';
-
-import {Box, Profile} from "../../models/interfaces";
-import {Boxes} from './boxes.component';
-
-import {
-    createComponentFromClass,
-    quickCreateComponent,
-    provideEmptyObjects,
-    createProviderToValue,
-    getAngularServiceFactory,
-    provideFilters
-} from "../../../spec/helpers";
-
-// this htmlTemplate will be re-used between the container components in this spec file
-const htmlTemplate: string = '<noosfero-boxes [boxes]="ctrl.boxes" [owner]="ctrl.profile"></noosfero-blog>';
-
-
-describe("Boxes Component", () => {
-
-    beforeEach(() => {
-        angular.mock.module("templates")
-    })
-
-    @Component({
-        selector: 'test-container-component',
-        template: htmlTemplate,
-        directives: [Boxes],
-        providers: []
-    })
-    class BoxesContainerComponent {
-        boxes: Box[] = [
-            { id: 1, position: 1 },
-            { id: 2, position: 2 }
-        ];
-
-        owner: Profile = {
-            id: 1,
-            identifier: 'profile-name',
-            type: 'Person'
-        };
-    }
-
-    it("renders boxes into a container", (done: Function) => {
-        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
-
-            var boxesHtml = fixture.debugElement;
-            expect(boxesHtml.query('div.col-md-7').length).toEqual(1);
-            expect(boxesHtml.query('div.col-md-2-5').length).toEqual(1);
-
-            done();
-        });
-    });
-
-    it("check the boxes order", (done: Function) => {
-        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
-
-            let boxesComponent: Boxes = fixture.debugElement.componentViewChildren[0].componentInstance;
-            let boxesContainer: BoxesContainerComponent = fixture.componentInstance;
-
-            expect(boxesComponent.boxesOrder(boxesContainer.boxes[0])).toEqual(1);
-            expect(boxesComponent.boxesOrder(boxesContainer.boxes[1])).toEqual(0);
-
-            done();
-        });
-    });
-});
@@ -1,17 +0,0 @@
-import {Input, Inject, Component} from 'ng-forward';
-import {Box, Profile} from "./../../models/interfaces";
-
-@Component({
-    selector: "noosfero-boxes",
-    templateUrl: "app/components/noosfero-boxes/boxes.html"
-})
-export class Boxes {
-
-    @Input() boxes: Box[];
-    @Input() owner: Profile;
-
-    boxesOrder(box: Box) {
-        if (box.position === 2) return 0;
-        return box.position;
-    }
-}
@@ -1 +0,0 @@
-<ng-include ng-repeat="box in ctrl.boxes | orderBy: ctrl.boxesOrder" src="'app/components/noosfero-boxes/box.html'"></ng-include>
@@ -1,6 +0,0 @@
-.col-md-2-5 {
-  @extend .col-md-3;
-  @media (min-width: 920px) {
-    width: 20.83%;
-  }
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./boxes.component";
@@ -1,20 +0,0 @@
-import {quickCreateComponent} from "../../../../spec/helpers";
-import {DateFormat} from './date-format.filter';
-
-describe("Filters", () => {
-    describe("Date Format Filter", () => {
-
-        beforeEach(angular.mock.module("templates"));
-        beforeEach(angular.mock.module("angularMoment"));
-
-        it("convert date from the format returned by noosfero api to an ISO format", done => {
-            let date = "2016/03/10 10:46:47";
-            let htmlTemplate = `{{ '${date}' | dateFormat }}`;
-            quickCreateComponent({ providers: [DateFormat], template: htmlTemplate }).then(fixture => {
-                expect(fixture.debugElement.text()).toEqual('2016-03-10T13:46:47.000Z');
-                done();
-            });
-        });
-
-    });
-});
@@ -1,13 +0,0 @@
-import {Pipe, Inject} from "ng-forward";
-
-@Pipe("dateFormat")
-@Inject("amParseFilter")
-export class DateFormat {
-
-    constructor(private amParseFilter: any) { }
-
-    transform(date: string, options: any) {
-        return this.amParseFilter(date, "YYYY/MM/DD HH:mm:ss").toISOString();
-    }
-
-}
@@ -1 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,19 +0,0 @@
-import {quickCreateComponent} from "../../../spec/helpers";
-import {NoosferoTemplate} from './noosfero-template.filter';
-
-describe("Filters", () => {
-    describe("Noosfero Template Filter", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        it("replace the options in text with the values passed on options", done => {
-            let text = 'profile: {profile}, other: {other}';
-            let htmlTemplate = `{{ '${text}' | noosferoTemplate: {profile: 'profile1', other: 'other value'} }}`;
-            quickCreateComponent({ providers: [NoosferoTemplate], template: htmlTemplate }).then(fixture => {
-                expect(fixture.debugElement.text()).toEqual("profile: profile1, other: other value");
-                done();
-            });
-        });
-
-    });
-});
@@ -1,13 +0,0 @@
-import {Pipe} from "ng-forward";
-
-@Pipe("noosferoTemplate")
-export class NoosferoTemplate {
-
-    transform(text: string, options: any) {
-        for (var option in options) {
-            text = text.replace('{' + option + '}', options[option]);
-        }
-        return text;
-    }
-
-}
@@ -1,5 +0,0 @@
-/**
- * Module for the image component in the Noosfero Angular Theme
- * @namespace components.noosfero.profile-image
- */
-/* Module Index Entry - generated using the script npm run generate-index */
@@ -1,51 +0,0 @@
-/**
- * @ngdoc overview
- * @name components.noosfero.profile-image.ProfileImageSpec
- * @description
- *  This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
- */
-
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-
-import * as helpers from "./../../../../spec/helpers";
-
-import {ProfileImage} from "./profile-image.component"
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-        
-    describe("Profile Image Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-        
-        it("show community users image if profile is not Person", done => {
-            helpers.tcb.createAsync(ProfileImage).then(fixture => {
-                let profileImageComponent : ProfileImage = fixture.componentInstance
-                let profile = { id: 1, identifier: "myprofile", type: "Community" }
-                profileImageComponent.profile = profile
-                profileImageComponent.ngOnInit();
-
-                // Check the attribute
-                expect(profileImageComponent.defaultIcon).toBe("fa-users", "The default icon should be community users");
-                //var elProfile = fixture.debugElement.componentViewChildren[0];
-                //expect(elProfile.query('div.profile-image-block').length).toEqual(1);
-                done();
-            });
-        });
-        
-        it("show Person image if profile is Person", done => {
-            tcb.createAsync(ProfileImage).then(fixture => {
-                let profileImageComponent : ProfileImage = fixture.componentInstance
-                let profile = { id: 1, identifier: "myprofile", type: "Person" }
-                profileImageComponent.profile = profile
-                profileImageComponent.ngOnInit();
-                // Check the attribute
-                expect(profileImageComponent.defaultIcon).toEqual("fa-user", "The default icon should be person user");
-                done();
-            });
-        });
-                        
-    });
-});
 \ No newline at end of file
@@ -1,50 +0,0 @@
-import {Inject, Input, Component} from "ng-forward";
-import {Profile} from "./../../../models/interfaces";
-
-
-/**
- * @ngdoc controller
- * @name components.noosfero.profile-image.ProfileImage
- * @description The component responsible for rendering the profile image
- * @exports ProfileImage
- */
-@Component({
-    selector: "noosfero-profile-image",
-    templateUrl: 'app/components/noosfero/profile-image/profile-image.html',
-})
-export class ProfileImage {
-
-    
-    /**
-     * @ngdoc property
-     * @name profile
-     * @propertyOf components.noosfero.profile-image.ProfileImage
-     * @description 
-     *  The Noosfero {@link models.Profile} holding the image.
-     */
-    @Input() profile: Profile;
-    /**
-     * @ngdoc property
-     * @name defaultIcon
-     * @propertyOf components.noosfero.profile-image.ProfileImage
-     * @descritpion
-     *  The default icon used by this profile
-     */    
-    defaultIcon: string;
-    
-    
-    /**
-     * @ngdoc method
-     * @name ngOnInit
-     * @methodOf components.noosfero.profile-image.ProfileImage
-     * @description 
-     *  Initializes the icon names to their corresponding values depending on the profile type passed to the controller 
-     */
-    ngOnInit() {
-        this.defaultIcon = 'fa-users';
-        if (this.profile && this.profile.type === 'Person') {
-            this.defaultIcon = 'fa-user';
-        }
-    }
-}
-
@@ -1,4 +0,0 @@
-<span title="{{ctrl.profile.name}}">
-  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
-  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
-</span>
@@ -1,3 +0,0 @@
-i.profile-image {
-  color: rgb(44, 62, 80);  
-}
@@ -1,80 +0,0 @@
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-
-import * as helpers from "../../../spec/helpers";
-
-import {Notification} from "./notification.component";
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-
-    describe("Profile Image Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        it("display an error message when notify an error", done => {
-            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
-            sweetAlert.swal = jasmine.createSpy("swal");
-
-            let component: Notification = new Notification(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
-            component.error("message", "title");
-            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
-                text: "message",
-                title: "title",
-                type: "error"
-            }));
-            done();
-        });
-
-        it("use the default message when call notification component without a message", done => {
-            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
-            sweetAlert.swal = jasmine.createSpy("swal");
-
-            let component: Notification = new Notification(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
-            component.error();
-            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
-                text: Notification.DEFAULT_ERROR_MESSAGE,
-                type: "error"
-            }));
-            done();
-        });
-
-        it("display a success message when call notification success", done => {
-            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
-            sweetAlert.swal = jasmine.createSpy("swal");
-
-            let component: Notification = new Notification(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
-            component.success("title", "message", 1000);
-            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
-                type: "success"
-            }));
-            done();
-        });
-
-        it("display a message relative to the http error code", done => {
-            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
-            sweetAlert.swal = jasmine.createSpy("swal");
-
-            let component: Notification = new Notification(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
-            component.httpError(500, {});
-            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
-                text: "notification.http_error.500.message"
-            }));
-            done();
-        });
-
-        it("set the default timer in success messages", done => {
-            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
-            sweetAlert.swal = jasmine.createSpy("swal");
-
-            let component: Notification = new Notification(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
-            component.success("title", "message");
-            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
-                type: "success",
-                timer: Notification.DEFAULT_SUCCESS_TIMER
-            }));
-            done();
-        });
-    });
-});
@@ -1,41 +0,0 @@
-import {Injectable, Inject} from "ng-forward";
-import {TranslatorService} from "../translator/translator.service";
-
-@Injectable()
-@Inject("$log", "SweetAlert", TranslatorService)
-export class Notification {
-
-    constructor(
-        private $log: ng.ILogService,
-        private SweetAlert: any,
-        private translatorService: TranslatorService
-    ) { }
-
-    public static DEFAULT_ERROR_TITLE = "notification.error.default.title";
-    public static DEFAULT_ERROR_MESSAGE = "notification.error.default.message";
-    public static DEFAULT_SUCCESS_TIMER = 1000;
-
-    error(message: string = Notification.DEFAULT_ERROR_MESSAGE, title: string = Notification.DEFAULT_ERROR_TITLE) {
-        this.$log.debug("Notification error:", title, message, this.translatorService.currentLanguage());
-        this.SweetAlert.swal({
-            title: this.translatorService.translate(title),
-            text: this.translatorService.translate(message),
-            type: "error"
-        });
-    }
-
-    httpError(status: number, data: any): boolean {
-        this.error(`notification.http_error.${status}.message`);
-        return true; // return true to indicate that the error was already handled
-    }
-
-    success(title: string, text: string, timer: number = Notification.DEFAULT_SUCCESS_TIMER) {
-        this.SweetAlert.swal({
-            title: title,
-            text: text,
-            type: "success",
-            timer: timer
-        });
-    }
-
-}
@@ -1,116 +0,0 @@
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {provide} from 'ng-forward';
-
-import {TranslatorService} from './translator.service';
-
-import * as helpers from "../../../spec/helpers";
-
-describe("Services", () => {
-
-    describe("Translator Service", () => {
-
-        let $rootScope: ng.IScope;
-        let $q: ng.IQService;
-
-        beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
-            $rootScope = _$rootScope_;
-            $q = _$q_;
-        }));
-
-        function createComponent() {
-            return new TranslatorService(
-                <any>helpers.mocks.$translate,
-                <any>helpers.mocks.tmhDynamicLocale,
-                <any>helpers.mocks.amMoment,
-                <any>helpers.mocks.angularLoad,
-                $rootScope
-            );
-        }
-
-        it("set available languages when change language", (done) => {
-            let component: TranslatorService = createComponent();
-            component.availableLanguages = null;
-            expect(component.availableLanguages).toBeNull();
-            $rootScope.$emit("$translateChangeSuccess");
-            expect(component.availableLanguages).not.toBeNull();
-            done();
-        });
-
-        it("change the language", (done) => {
-            let component: TranslatorService = createComponent();
-            let loadScripPromise = $q.defer();
-            loadScripPromise.resolve();
-            component["angularLoad"].loadScript = jasmine.createSpy("loadScript").and.returnValue(loadScripPromise.promise);
-            component["tmhDynamicLocale"].set = jasmine.createSpy("set");
-            component["tmhDynamicLocale"].get = jasmine.createSpy("get").and.returnValue("en");
-            component["$translate"].use = jasmine.createSpy("use");
-
-            component.changeLanguage('pt');
-            $rootScope.$digest();
-
-            expect(component["angularLoad"].loadScript).toHaveBeenCalledWith("/bower_components/moment/locale/pt.js");
-            expect(component["angularLoad"].loadScript).toHaveBeenCalledWith("/bower_components/messageformat/locale/pt.js");
-            expect(component["tmhDynamicLocale"].set).toHaveBeenCalledWith("pt");
-            expect(component["$translate"].use).toHaveBeenCalledWith("pt");
-            done();
-        });
-
-        it("do not load moment locale when change the language to english", (done) => {
-            let component: TranslatorService = createComponent();
-            component["angularLoad"].loadScript = jasmine.createSpy("loadScript").and.returnValue($q.defer().promise);
-            component.changeLanguage('en');
-            expect(component["angularLoad"].loadScript).not.toHaveBeenCalledWith("/bower_components/moment/locale/pt.js");
-            done();
-        });
-
-        it("do nothing when call change language with null", (done) => {
-            let component: TranslatorService = createComponent();
-            component["angularLoad"].loadScript = jasmine.createSpy("loadScript");
-            component["tmhDynamicLocale"].set = jasmine.createSpy("set");
-            component["$translate"].use = jasmine.createSpy("use");
-
-            component.changeLanguage(null);
-
-            expect(component["angularLoad"].loadScript).not.toHaveBeenCalled();
-            expect(component["tmhDynamicLocale"].set).not.toHaveBeenCalled();
-            expect(component["$translate"].use).not.toHaveBeenCalled();
-            done();
-        });
-
-        it("return the current language used by the translator", (done) => {
-            let component: TranslatorService = createComponent();
-            component["$translate"].use = jasmine.createSpy("use").and.returnValue("en");
-            expect(component.currentLanguage()).toEqual("en");
-            expect(component["$translate"].use).toHaveBeenCalled();
-            done();
-        });
-
-        it("call translate service when translate a text", (done) => {
-            let component: TranslatorService = createComponent();
-            component["$translate"].instant = jasmine.createSpy("instant");
-            component.translate("text");
-            expect(component["$translate"].instant).toHaveBeenCalledWith("text");
-            done();
-        });
-
-        it("change the language when receive an event", (done) => {
-            let component: TranslatorService = createComponent();
-            component.changeLanguage = jasmine.createSpy("changeLanguage");
-            $rootScope.$emit("$localeChangeSuccess");
-            expect(component.changeLanguage).toHaveBeenCalled();
-            done();
-        });
-
-        it("use the translate language when receive a change language event and there is no language previously selected", (done) => {
-            let component: TranslatorService = createComponent();
-            component.changeLanguage = jasmine.createSpy("changeLanguage");
-            component["tmhDynamicLocale"].get = jasmine.createSpy("get").and.returnValue(null);
-            component["$translate"].use = jasmine.createSpy("use").and.returnValue("en");
-
-            $rootScope.$emit("$localeChangeSuccess");
-            expect(component["$translate"].use).toHaveBeenCalled();
-            expect(component.changeLanguage).toHaveBeenCalledWith("en");
-            done();
-        });
-    });
-});
@@ -1,59 +0,0 @@
-import {Injectable, Inject} from "ng-forward";
-
-@Injectable()
-@Inject("$translate", "tmhDynamicLocale", "amMoment", "angularLoad", "$rootScope")
-export class TranslatorService {
-
-    availableLanguages: any;
-
-    constructor(private $translate: angular.translate.ITranslateService,
-        private tmhDynamicLocale: angular.dynamicLocale.tmhDynamicLocaleService,
-        private amMoment: any,
-        private angularLoad: any,
-        private $rootScope: any) {
-
-        this.$rootScope.$on("$localeChangeSuccess", () => {
-            this.changeLanguage(tmhDynamicLocale.get() || $translate.use());
-        });
-        this.$rootScope.$on("$translateChangeSuccess", () => {
-            this.configAvailableLanguages();
-        });
-    }
-
-    currentLanguage() {
-        return this.$translate.use();
-    }
-
-    changeLanguage(language: string) {
-        if (!language) {
-            console.log("WARN: language undefined");
-            return;
-        }
-        this.changeMomentLocale(language);
-        this.tmhDynamicLocale.set(language);
-        this.angularLoad.loadScript(`/bower_components/messageformat/locale/${language}.js`).then(() => {
-            return this.$translate.use(language);
-        });
-    }
-
-    translate(text: string) {
-        return this.$translate.instant(text);
-    }
-
-    private configAvailableLanguages() {
-        this.availableLanguages = {
-            "en": this.$translate.instant("language.en"),
-            "pt": this.$translate.instant("language.pt")
-        };
-    }
-
-    private changeMomentLocale(language: string) {
-        let localePromise = Promise.resolve();
-        if (language != "en") {
-            localePromise = this.angularLoad.loadScript(`/bower_components/moment/locale/${language}.js`);
-        }
-        localePromise.then(() => {
-            this.amMoment.changeLocale(language);
-        });
-    }
-}
@@ -1,67 +0,0 @@
-import {providers} from 'ng-forward/cjs/testing/providers';
-
-import {Input, Component, provide} from 'ng-forward';
-
-import * as helpers from "../../spec/helpers";
-
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {ContentViewerActions} from './content-viewer-actions.component';
-
-// this htmlTemplate will be re-used between the container components in this spec file
-const htmlTemplate: string = '<content-viewer-actions [article]="ctrl.article" [profile]="ctrl.profile"></content-viewer-actions>';
-
-describe('Content Viewer Actions Component', () => {
-
-    beforeEach(() => {
-
-        angular.mock.module("templates");
-
-        providers((provide: any) => {
-            return <any>[
-                provide('ProfileService', {
-                    useValue: helpers.mocks.profileService
-                })
-            ];
-        });
-    });
-
-    let buildComponent = (): Promise<ComponentFixture> => {
-        return helpers.quickCreateComponent({
-            providers: [
-                helpers.provideEmptyObjects('Restangular'),
-                helpers.provideFilters('translateFilter')
-            ],
-            directives: [ContentViewerActions],
-            template: htmlTemplate
-        });
-    };
-
-    it('renders content viewer actions directive', (done: Function) => {
-        buildComponent().then((fixture: ComponentFixture) => {
-            expect(fixture.debugElement.query('content-viewer-actions').length).toEqual(1);
-
-            done();
-        });
-    });
-
-    it('check if profile was loaded', (done: Function) => {
-        let profile: any = {
-            id: 1,
-            identifier: 'the-profile-test',
-            type: 'Person'
-        };
-
-        helpers.mocks.profileService.getCurrentProfile = () => {
-            return helpers.mocks.promiseResultTemplate(profile);
-        };
-
-        buildComponent().then((fixture: ComponentFixture) => {
-            let contentViewerComp: ContentViewerActions = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            expect(contentViewerComp.profile).toEqual(jasmine.objectContaining(profile));
-
-            done();
-        });
-    });
-
-});
@@ -1,22 +0,0 @@
-import {Component, Inject, provide} from "ng-forward";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-
-import {Profile} from "./../models/interfaces";
-
-@Component({
-    selector: "content-viewer-actions",
-    templateUrl: "app/content-viewer/navbar-actions.html",
-    providers: [provide('profileService', { useClass: ProfileService })]
-})
-@Inject(ProfileService)
-export class ContentViewerActions {
-
-    article: any;
-    profile: any;
-
-    constructor(profileService: ProfileService) {
-        profileService.getCurrentProfile().then((profile: Profile) => {
-            this.profile = profile;
-        });
-    }
-}
@@ -1,90 +0,0 @@
-import {providers} from 'ng-forward/cjs/testing/providers';
-
-import {Input, Component, provide} from 'ng-forward';
-
-import * as helpers from "../../spec/helpers";
-
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {ContentViewer} from './content-viewer.component';
-
-// this htmlTemplate will be re-used between the container components in this spec file
-const htmlTemplate: string = '<content-viewer [article]="ctrl.article" [profile]="ctrl.profile"></content-viewer>';
-
-describe('Content Viewer Component', () => {
-
-    let stateParamsService: any;
-
-    //loading the templates
-    beforeEach(() => {
-        angular.mock.module("templates");
-
-        stateParamsService = { page: 1 };
-
-        providers((provide: any) => {
-            return <any>[
-                provide('ArticleService', {
-                    useValue: helpers.mocks.articleService
-                }),
-                provide('ProfileService', {
-                    useValue: helpers.mocks.profileService
-                }),
-                // TODO: Como criar um mock do atributo "page" de stateParams
-                provide('$stateParams', {
-                    useValue: stateParamsService
-                })
-            ]
-        });
-    });
-
-    let buildComponent = (): Promise<ComponentFixture> => {
-        return helpers.quickCreateComponent({
-            providers: [
-                helpers.provideEmptyObjects('Restangular')
-            ],
-            directives: [ContentViewer],
-            template: htmlTemplate
-        });
-    };
-
-    it('renders content viewer directive', (done: Function) => {
-        buildComponent().then((fixture: ComponentFixture) => {
-            expect(fixture.debugElement.query('content-viewer').length).toEqual(1);
-
-            done();
-        })
-    });
-
-    it('check if article was loaded', (done: Function) => {
-        var article: any = {
-            id: 1,
-            title: 'The article test'
-        };
-        var profile: any = {
-            id: 1,
-            identifier: 'the-profile-test',
-            type: 'Person'
-        };
-
-        helpers.mocks.profileService.getCurrentProfile = () => {
-            return helpers.mocks.promiseResultTemplate(profile);
-        };
-
-        helpers.mocks.articleService.getByProfile = (id: number, params: any) => {
-            return helpers.mocks.promiseResultTemplate({
-                data: {
-                    article: article
-                }
-            });
-        };
-
-
-        buildComponent().then((fixture: ComponentFixture) => {
-            let contentViewerComp: ContentViewer = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            expect(contentViewerComp.profile).toEqual(jasmine.objectContaining(profile));
-            expect(contentViewerComp.article).toEqual(jasmine.objectContaining(article));
-
-            done();
-        });
-    });
-});
@@ -1,37 +0,0 @@
-import * as noosfero from "../models/interfaces";
-
-
-import {ArticleView} from "../components/noosfero-articles/article/article_view";
-import {Input, Component, StateConfig, Inject, provide} from "ng-forward";
-
-import {ArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
-import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: "content-viewer",
-    templateUrl: "app/content-viewer/page.html",
-    directives: [ArticleBlog, ArticleView],
-    providers: [
-        provide('articleService', { useClass: ArticleService }),
-        provide('profileService', { useClass: ProfileService })
-    ]
-})
-@Inject(ArticleService, ProfileService, "$log", "$stateParams")
-export class ContentViewer {
-
-    @Input()
-    article: noosfero.Article = null;
-
-    @Input()
-    profile: noosfero.Profile = null;
-
-    constructor(private articleService: ArticleService, private profileService: ProfileService, private $log: ng.ILogService, private $stateParams: angular.ui.IStateParamsService) {
-        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
-            this.profile = profile;
-            return this.articleService.getByProfile(this.profile.id, { path: this.$stateParams["page"] });
-        }).then((response: restangular.IResponse) => {
-            this.article = response.data.article;
-        });
-    }
-}
@@ -1,3 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./content-viewer-actions.component";
-export * from "./content-viewer.component";
@@ -1,7 +0,0 @@
-<ul class="nav navbar-nav">
-  <li ng-show="vm.profile">
-    <a href="#" role="button" ui-sref="main.profile.cms({profile: vm.profile.identifier})">
-      <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
-    </a>
-  </li>
-</ul>
@@ -1 +0,0 @@
-<noosfero-article ng-if="vm.article" [article]="vm.article" [profile]="vm.profile"></noosfero-article>
@@ -15,13 +15,13 @@ export class NoosferoApp {
      * @returns {string} the name of this application ('noosferoApp')
      */
     static appName: string = "noosferoApp";
-    
+
     /**
      * @ngdoc property
      * @name angularModule
      * @propertyOf NoosferoApp
      * @returns {any} all the modules installed for this application
-     */    
+     */
     static angularModule: any;
  
     /**
-import {Session} from "./components/auth/session";
-import {Notification} from "./components/notification/notification.component";
+import {SessionService} from "./login";
+import {NotificationService} from "./shared/services/notification.service";
  
 /** @ngInject */
 export function noosferoAngularRunBlock(
     $log: ng.ILogService,
     Restangular: restangular.IService,
-    Session: Session,
-    Notification: Notification
+    SessionService: SessionService,
+    NotificationService: NotificationService
 ) {
  
     Restangular.addFullRequestInterceptor((element: any, operation: string, route: string, url: string, headers: string) => {
-        if (Session.currentUser()) {
-            (<any>headers)["Private-Token"] = Session.currentUser().private_token;
+        if (SessionService.currentUser()) {
+            (<any>headers)["Private-Token"] = SessionService.currentUser().private_token;
         }
         return <any>{ headers: <any>headers };
     });
     Restangular.setErrorInterceptor((response: restangular.IResponse, deferred: ng.IDeferred<any>) => {
         // return false to break the promise chain and don't call catch
-        return !Notification.httpError(response.status, response.data);
+        return !NotificationService.httpError(response.status, response.data);
     });
 }
@@ -5,10 +5,10 @@ import {noosferoAngularRunBlock} from &quot;./index.run&quot;;
 import {Main} from "./main/main.component";
 import {bootstrap, bundle} from "ng-forward";
  
-import {AUTH_EVENTS} from "./components/auth/auth_events";
-import {AuthController} from "./components/auth/auth_controller";
+import {AUTH_EVENTS} from "./login/auth-events";
+import {AuthController} from "./login/auth.controller";
  
-import {Navbar} from "./components/navbar/navbar";
+import {Navbar} from "./layout/navbar/navbar";
  
 declare var moment: any;
  
@@ -0,0 +1,91 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component} from 'ng-forward';
+
+import {BlockComponent} from './block.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block>';
+
+describe("Components", () => {
+    describe("Block 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 Block will be load on our tests
+        beforeEach(angular.mock.module("templates"));
+
+        it("receives the block and the owner as inputs", done => {
+
+            // Creating a container component (BlockContainerComponent) to include 
+            // the component under test (Block)  
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] })
+            class BlockContainerComponent {
+                block = { type: 'Block' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            tcb
+                .createAsync(BlockContainerComponent).then(fixture => {
+                    // and here we can inspect and run the test assertions 
+                    let myComponent: BlockComponent = fixture.componentInstance;
+
+                    // assure the block object inside the Block matches
+                    // the provided through the parent component
+                    expect(myComponent.block.type).toEqual("Block");
+                    expect(myComponent.owner.name).toEqual("profile-name");
+                    done();
+                });
+        });
+
+
+        it("renders a component which matches to the block type", done => {
+            // CustomBlock component created to check if it will be used
+            // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
+            // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
+            @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
+            class CustomBlock {
+                @Input() block: any;
+                @Input() owner: any;
+            }
+
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent, CustomBlock] })
+            class CustomBlockType {
+                block = { type: 'CustomBlock' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+            tcb
+                .createAsync(CustomBlockType).then(fixture => {
+                    let myComponent: CustomBlockType = fixture.componentInstance;
+                    expect(myComponent.block.type).toEqual("CustomBlock");
+                    expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
+                    done();
+                });
+        });
+
+
+        it("renders the default block when hasn't defined a block type", done => {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] })
+            class CustomBlockType {
+                block: any = { type: null };
+                owner: any = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+            tcb
+                .createAsync(CustomBlockType).then(fixture => {
+                    let myComponent: CustomBlockType = fixture.componentInstance;
+                    expect(myComponent.block.type).toBeNull();
+                    expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
+                    done();
+                });
+        });
+
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,20 @@
+import { Input, Inject, Component } from 'ng-forward';
+
+@Component({
+    selector: 'noosfero-block',
+    template: '<div></div>'
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class BlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    ngOnInit() {
+        let blockName = (this.block && this.block.type) ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
+        this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+    }
+}
@@ -0,0 +1,10 @@
+.block {
+  .panel-title {
+    font-size: 15px;
+    font-weight: bold;
+  }
+  .panel-heading {
+    background-color: transparent;
+    border: 0;
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./block.component";
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./link-list.component";
@@ -0,0 +1,65 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {LinkListBlockComponent} from './link-list.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>';
+
+
+describe("Components", () => {
+
+    describe("Link List Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        it("receives the block and the owner as inputs", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] })
+            class BlockContainerComponent {
+                block = { type: 'Block' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] })
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                // and here we can inspect and run the test assertions
+                let myComponent: LinkListBlockComponent = fixture.componentInstance;
+
+                // assure the block object inside the Block matches
+                // the provided through the parent component
+                expect(myComponent.block.type).toEqual("Block");
+                expect(myComponent.owner.name).toEqual("profile-name");
+                done();
+            });
+        });
+
+
+        it("display links stored in block settings", done => {
+
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [LinkListBlockComponent],
+                providers: provideFilters("noosferoTemplateFilter")
+            })
+            class CustomBlockType {
+                block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } };
+                owner: any = { name: 'profile-name' };
+            }
+            tcb.createAsync(CustomBlockType).then(fixture => {
+                expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2);
+                done();
+            });
+        });
+
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,20 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-link-list-block",
+    templateUrl: "app/layout/blocks/link-list/link-list.html"
+})
+export class LinkListBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    links: any;
+
+    ngOnInit() {
+        if (this.block && this.block.settings) {
+            this.links = this.block.settings.links;
+        }
+    }
+
+}
@@ -0,0 +1,7 @@
+<div class="link-list-block">
+  <div ng-repeat="link in ctrl.links">
+    <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
+      <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
+    </a>
+  </div>
+</div>
@@ -0,0 +1,34 @@
+.icon-event {
+  @extend .fa-calendar;
+}
+.icon-photos {
+  @extend .fa-photo;
+}
+.icon-edit {
+  @extend .fa-edit;
+}
+.icon-ok {
+  @extend .fa-check;
+}
+.icon-send {
+  @extend .fa-send-o;
+}
+.icon-menu-people {
+  @extend .fa-user;
+}
+.icon-forum {
+  @extend .fa-users;
+}
+.icon-new {
+  @extend .fa-file-o;
+}
+.icon-save {
+  @extend .fa-save;
+}
+
+.link-list-block {
+  a i {
+    line-height: 25px;
+    color: #949494;
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./main-block.component";
@@ -0,0 +1,40 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component, StateConfig} from 'ng-forward';
+
+import {MainBlockComponent} from './main-block.component';
+import {NoosferoApp} from '../../../index.module';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
+
+describe("Components", () => {
+    describe("Main Block 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 Block will be load on our tests
+        beforeEach(angular.mock.module("templates"));
+
+        it("check if the main block has a tag with ui-view attribute", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlockComponent] })
+            class BlockContainerComponent {
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                // and here we can inspect and run the test assertions
+                // let myComponent: MainBlockComponent = fixture.componentInstance;
+
+                // assure the block object inside the Block matches
+                // the provided through the parent component
+                expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1);
+                done();
+            });
+        });
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+import {BlockComponent} from '../block.component';
+
+@Component({
+    selector: 'noosfero-main-block',
+    templateUrl: 'app/layout/blocks/main-block/main-block.html'
+})
+export class MainBlockComponent {
+
+}
@@ -0,0 +1 @@
+<div ui-view="mainBlockContent" autoscroll></div>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./members-block.component";
@@ -0,0 +1,53 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+
+import {MembersBlockComponent} from './members-block.component';
+
+const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Members Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+        let providers = [
+            new Provider('truncateFilter', { useValue: () => { } }),
+            new Provider('stripTagsFilter', { useValue: () => { } }),
+            new Provider('$state', { useValue: state }),
+            new Provider('ProfileService', {
+                useValue: {
+                    getProfileMembers: (profileId: number, filters: any): any => {
+                        return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
+                    }
+                }
+            }),
+        ];
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MembersBlockComponent], providers: providers })
+        class BlockContainerComponent {
+            block = { type: 'Block', settings: {} };
+            owner = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        it("get members of the block owner", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let block: MembersBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(block.members).toEqual([{ identifier: "person1" }]);
+                done();
+            });
+        });
+
+        it("render the profile image for each member", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                fixture.debugElement.getLocal("$rootScope").$apply();
+                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
+                done();
+            });
+        });
+
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,25 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "noosfero-members-block",
+    templateUrl: 'app/layout/blocks/members-block/members-block.html',
+})
+@Inject(ProfileService)
+export class MembersBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    members: any = [];
+
+    constructor(private profileService: ProfileService) {
+
+    }
+
+    ngOnInit() {
+        this.profileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
+            this.members = response.data.people;
+        });
+    }
+}
@@ -0,0 +1,5 @@
+<div class="members-block">
+  <a ng-repeat="member in ctrl.members" ui-sref="main.profile.home({profile: member.identifier})" class="member">
+    <noosfero-profile-image [profile]="member"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./profile-image-block.component";
@@ -0,0 +1,46 @@
+import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+
+import {ProfileImageBlockComponent} from './profile-image-block.component';
+
+import * as helpers from "./../../../../spec/helpers";
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-profile-image-block  [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-image-block>';
+
+describe("Components", () => {
+
+    describe("Profile Image Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ProfileImageBlockComponent],
+            providers: helpers.provideFilters("translateFilter")
+        })
+        class BlockContainerComponent {
+            block = { type: 'Block' };
+            owner = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        it("show image if present", () => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                expect(elProfile.query('div.profile-image-block').length).toEqual(1);
+            });
+        });
+
+        it("has link to the profile", () => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                expect(elProfile.query('a.settings-link').length).toEqual(1);
+            });
+        });
+
+    });
+});
@@ -0,0 +1,14 @@
+import {Inject, Input, Component} from "ng-forward";
+import {ProfileImageComponent} from "./../../../profile/image/image.component";
+
+@Component({
+    selector: "noosfero-profile-image-block",
+    templateUrl: 'app/layout/blocks/profile-image-block/profile-image-block.html',
+    directives: [ProfileImageComponent]
+})
+export class ProfileImageBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+}
@@ -0,0 +1,6 @@
+<div class="center-block text-center profile-image-block">
+  <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
+    <noosfero-profile-image [profile]="ctrl.owner"></noosfero-profile-image>
+  </a>
+  <a class="settings-link" target="_self" ui-sref="main.profile.settings({profile: ctrl.owner.identifier})">{{"blocks.profile_image.control_panel" | translate}}</a>
+</div>
@@ -0,0 +1,5 @@
+.profile-image-block {
+  .settings-link {
+    display: block;
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./raw-html.component";
@@ -0,0 +1,36 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Component} from 'ng-forward';
+
+import {RawHTMLBlockComponent} from './raw-html.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-raw-htmlblock [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-raw-htmlblock>';
+
+describe("Components", () => {
+
+    describe("Raw Html Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+        beforeEach(angular.mock.module("ngSanitize"));
+
+        it("display html stored in block settings", done => {
+
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [RawHTMLBlockComponent],
+            })
+            class CustomBlockType {
+                block: any = { settings: { html: '<em>block content</em>' } };
+                owner: any = { name: 'profile-name' };
+            }
+            tcb.createAsync(CustomBlockType).then(fixture => {
+                expect(fixture.debugElement.query(".raw-html-block em").text().trim()).toEqual('block content');
+                done();
+            });
+        });
+
+    });
+
+});
@@ -0,0 +1,18 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-raw-htmlblock",
+    templateUrl: 'app/layout/blocks/raw-html/raw-html.html'
+})
+
+export class RawHTMLBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    html: string;
+
+    ngOnInit() {
+        this.html = this.block.settings.html;
+    }
+}
@@ -0,0 +1,2 @@
+<div class="raw-html-block" ng-bind-html="ctrl.html">
+</div>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./recent-documents.component";
@@ -0,0 +1,80 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {RecentDocumentsBlockComponent} from './recent-documents.component';
+
+const htmlTemplate: string = '<noosfero-recent-documents-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-documents-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Recent Documents Block Component", () => {
+
+        let settingsObj = {};
+        let mockedArticleService = {
+            getByProfile: (profile: noosfero.Profile, filters: any): any => {
+                return Promise.resolve({ data: [{ name: "article1" }], headers: (name: string) => { return name; } });
+            }
+        };
+        let profile = { name: 'profile-name' };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('ArticleService', {
+                    useValue: mockedArticleService
+                }),
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentDocumentsBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = profile;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+
+        it("get recent documents from the article service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
+                done();
+            });
+        });
+
+        it("go to article page when open a document", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
+                expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
+                done();
+            });
+        });
+
+        it("it uses default limit 5 if not defined on block", done => {
+            settingsObj = null;
+            mockedArticleService = jasmine.createSpyObj("mockedArticleService", ["getByProfile"]);
+            (<any>mockedArticleService).mocked = true;
+            let thenMocked = jasmine.createSpy("then");
+            mockedArticleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue({then: thenMocked});
+            let getByProfileFunct = mockedArticleService.getByProfile;
+            tcb.createAsync(getComponent()).then(fixture => {
+                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
+                expect(getByProfileFunct).toHaveBeenCalledWith(profile, { content_type: 'TinyMceArticle', per_page: 5 });
+                done();
+            });
+        });
+
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,41 @@
+import {Component, Inject, Input} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-recent-documents-block",
+    templateUrl: 'app/layout/blocks/recent-documents/recent-documents.html'
+})
+@Inject(ArticleService, "$state")
+export class RecentDocumentsBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    documents: any;
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, private $state: any) {
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.documents = [];
+
+        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        // FIXME get all text articles
+        // FIXME make the getByProfile a generic method where we tell the type passing a class TinyMceArticle
+        //       and the promise should be of type TinyMceArticle[], per example
+        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
+        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+            this.documents = <noosfero.Article[]>result.data;
+            this.documentsLoaded = true;
+        });
+    }
+
+    openDocument(article: any) {
+        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
+    }
+
+}
@@ -0,0 +1,18 @@
+<div deckgrid source="ctrl.documents" class="deckgrid">
+  <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
+      <div class="author media-left" ng-show="card.author.image">
+        <img ng-src="{{card.author.image.url}}" class="img-circle">
+      </div>
+      <div class="header media-body">
+        <h5 class="title media-heading" ng-bind="card.title"></h5>
+
+        <div class="subheader">
+          <span class="time">
+            <i class="fa fa-clock-o"></i> <span am-time-ago="card.created_at | dateFormat"></span>
+          </span>
+        </div>
+      </div>
+      <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
+      <div class="post-lead" ng-bind-html="card.body | stripTags | truncate: 100: '...': true"></div>
+  </div>
+</div>
@@ -0,0 +1,65 @@
+.block.recentdocumentsblock {
+  .deckgrid[deckgrid]::before {
+    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
+    visibility: hidden;
+  }
+  .author {
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .header {
+    .subheader {
+      color: #C1C1C1;
+      font-size: 10px;
+    }
+  }
+  .post-lead {
+    color: #8E8E8E;
+    font-size: 14px;
+  }
+  .article-image {
+    margin: 10px 0;
+  }
+}
+
+.col-md-2-5 {
+  .deckgrid[deckgrid]::before {
+    content: '1 .deck-column';
+  }
+}
+
+.col-md-7 {
+  .block.recentdocumentsblock {
+    background-color: transparent;
+    border: 0;
+
+    .deckgrid[deckgrid]::before {
+        content: '3 .deck-column';
+    }
+
+    .panel-heading {
+      display: none;
+    }
+    .panel-body {
+      padding: 0;
+    }
+
+    .deckgrid {
+      .column {
+        float: left;
+      }
+
+      .deck-column {
+        @extend .col-md-4;
+        padding: 0;
+
+        .a-card {
+          padding: 10px;
+          margin: 3px;
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,10 @@
+<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
+  <div ng-repeat="block in box.blocks | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" >
+    <div class="panel-heading" ng-show="block.title">
+      <h3 class="panel-title">{{block.title}}</h3>
+    </div>
+    <div class="panel-body">
+      <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,65 @@
+import {Component} from 'ng-forward';
+
+import {BoxesComponent} from './boxes.component';
+
+import {
+    createComponentFromClass,
+    quickCreateComponent,
+    provideEmptyObjects,
+    createProviderToValue,
+    getAngularServiceFactory,
+    provideFilters
+} from "../../../spec/helpers";
+
+// this htmlTemplate will be re-used between the container components in this spec file
+const htmlTemplate: string = '<noosfero-boxes [boxes]="ctrl.boxes" [owner]="ctrl.profile"></noosfero-blog>';
+
+
+describe("Boxes Component", () => {
+
+    beforeEach(() => {
+        angular.mock.module("templates");
+    });
+
+    @Component({
+        selector: 'test-container-component',
+        template: htmlTemplate,
+        directives: [BoxesComponent],
+        providers: []
+    })
+    class BoxesContainerComponent {
+        boxes: noosfero.Box[] = [
+            { id: 1, position: 1 },
+            { id: 2, position: 2 }
+        ];
+
+        owner: noosfero.Profile =  <noosfero.Profile> {
+            id: 1,
+            identifier: 'profile-name',
+            type: 'Person'
+        };
+    }
+
+    it("renders boxes into a container", (done: Function) => {
+        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
+            let boxesHtml = fixture.debugElement;
+            expect(boxesHtml.query('div.col-md-7').length).toEqual(1);
+            expect(boxesHtml.query('div.col-md-2-5').length).toEqual(1);
+
+            done();
+        });
+    });
+
+    it("check the boxes order", (done: Function) => {
+        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
+
+            let boxesComponent: BoxesComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+            let boxesContainer: BoxesContainerComponent = fixture.componentInstance;
+
+            expect(boxesComponent.boxesOrder(boxesContainer.boxes[0])).toEqual(1);
+            expect(boxesComponent.boxesOrder(boxesContainer.boxes[1])).toEqual(0);
+
+            done();
+        });
+    });
+});
@@ -0,0 +1,16 @@
+import {Input, Inject, Component} from 'ng-forward';
+
+@Component({
+    selector: "noosfero-boxes",
+    templateUrl: "app/layout/boxes/boxes.html"
+})
+export class BoxesComponent {
+
+    @Input() boxes: noosfero.Box[];
+    @Input() owner: noosfero.Profile;
+
+    boxesOrder(box: noosfero.Box) {
+        if (box.position === 2) return 0;
+        return box.position;
+    }
+}
@@ -0,0 +1 @@
+<ng-include ng-repeat="box in ctrl.boxes | orderBy: ctrl.boxesOrder" src="'app/layout/boxes/box.html'"></ng-include>
@@ -0,0 +1,6 @@
+.col-md-2-5 {
+  @extend .col-md-3;
+  @media (min-width: 920px) {
+    width: 20.83%;
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./boxes.component";
@@ -0,0 +1 @@
+/* Module Index Entry - generated using the script npm run generate-index */
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./language-selector.component";
@@ -0,0 +1,46 @@
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {provide} from 'ng-forward';
+
+import {LanguageSelectorService} from './language-selector.component';
+
+import * as helpers from "../../../spec/helpers";
+
+describe("Components", () => {
+
+    describe("Language Selector Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        let translatorService: any;
+
+        let buildComponent = (): Promise<ComponentFixture> => {
+            translatorService = jasmine.createSpyObj("translatorService", ["availableLanguages", "currentLanguage"]);
+            return helpers.quickCreateComponent({
+                template: "<language-selector></language-selector>",
+                directives: [LanguageSelectorService],
+                providers: [
+                    provide('TranslatorService', {
+                        useValue: translatorService
+                    })
+                ].concat(helpers.provideFilters("translateFilter"))
+            });
+        };
+
+        it("display language options", (done) => {
+            buildComponent().then(fixture => {
+                fixture.debugElement.getLocal("$rootScope").$apply();
+                expect(fixture.debugElement.queryAll('li.language').length).toEqual(2);
+                done();
+            });
+        });
+
+        it("call the translator service when change the language", (done) => {
+            let translatorService = jasmine.createSpyObj("translatorService", ["changeLanguage"]);
+            let languageSelector = new LanguageSelectorService(<any>translatorService);
+            languageSelector.changeLanguage("en");
+            expect(translatorService.changeLanguage).toHaveBeenCalledWith("en");
+            done();
+        });
+
+    });
+});
@@ -0,0 +1,24 @@
+import {Component, Inject} from "ng-forward";
+import {TranslatorService} from "../../shared/services/translator.service";
+
+@Component({
+    selector: "language-selector",
+    templateUrl: "app/layout/language-selector/language-selector.html"
+})
+@Inject(TranslatorService)
+export class LanguageSelectorService {
+
+    constructor(private translatorService: TranslatorService) { }
+
+    currentLanguage() {
+        return this.translatorService.currentLanguage();
+    }
+
+    changeLanguage(language: string) {
+        this.translatorService.changeLanguage(language);
+    }
+
+    availableLanguages() {
+        return this.translatorService.availableLanguages;
+    }
+}
@@ -0,0 +1,13 @@
+<li class="dropdown profile-menu" dropdown>
+  <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
+    <span>{{"language.selector" | translate}}</span> <b class="caret"></b>
+  </a>
+  <ul class="dropdown-menu" dropdown-menu>
+    <li ng-repeat="(language, description) in ctrl.availableLanguages()"
+      class="language language-{{language}}" ng-class="{'active': language==ctrl.currentLanguage()}">
+      <a href="#" ng-click="ctrl.changeLanguage(language)">
+        {{description}}
+      </a>
+    </li>
+  </ul>
+</li>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./navbar";
@@ -0,0 +1,45 @@
+(function() {
+  'use strict';
+
+  describe('directive navbar', function() {
+    var vm;
+    var el;
+    var AUTH_EVENTS;
+    var $state;
+
+    beforeEach(module('angular'));
+    beforeEach(inject(function($compile, $rootScope, $httpBackend, _AUTH_EVENTS_, _$state_) {
+      $state = _$state_;
+      AUTH_EVENTS = _AUTH_EVENTS_;
+      $httpBackend.when('POST','/api/v1/login_from_cookie').respond({});
+
+      el = angular.element('<acme-navbar></acme-navbar>');
+
+      $compile(el)($rootScope.$new());
+      $rootScope.$digest();
+      vm = el.isolateScope().vm;
+    }));
+
+    it('should be compiled', function() {
+      expect(el.html()).not.toEqual(null);
+    });
+
+    it('should have isolate scope object with instanciate members', function() {
+      expect(vm).toEqual(jasmine.any(Object));
+      expect(vm.currentUser).toEqual(undefined);
+    });
+
+    it('should reload current state after login', function() {
+      spyOn($state, 'go');
+      el.isolateScope().$broadcast(AUTH_EVENTS.loginSuccess, {});
+      expect($state.go).toHaveBeenCalled();
+    });
+
+    it('should open login when not logged in', function() {
+      spyOn(vm, 'openLogin');
+      vm.activate();
+      expect(vm.openLogin).toHaveBeenCalled();
+    });
+
+  });
+})();
@@ -0,0 +1,49 @@
+<nav class="navbar navbar-static-top navbar-inverse">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
+        <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" ui-sref="main">
+        <span class="noosfero-logo"><img src="assets/images/logo-noosfero.png"></span> {{"noosfero.name" | translate}}
+      </a>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbar-collapse" collapse="isCollapsed">
+      <ul class="nav navbar-nav">
+      </ul>
+
+      <ul class="nav navbar-nav navbar-right">
+        <li ng-show="!ctrl.currentUser">
+          <a ng-href="#" ng-click="ctrl.openLogin()">{{"navbar.login" | translate}}</a>
+        </li>
+
+        <li class="dropdown profile-menu" ng-show="ctrl.currentUser" dropdown>
+          <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
+            <noosfero-profile-image [profile]="ctrl.currentUser.person" class="profile-image"></noosfero-profile-image>
+            <span ng-bind="ctrl.currentUser.person.name"></span> <b class="caret"></b>
+          </a>
+          <ul class="dropdown-menu" dropdown-menu>
+              <li>
+                  <a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> {{"navbar.profile" | translate}}</a>
+              </li>
+              <li>
+                  <a target="_self" ui-sref="main.profile.settings({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-gear"></i> {{"navbar.settings" | translate}}</a>
+              </li>
+              <li class="divider"></li>
+              <li>
+                  <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+              </li>
+          </ul>
+        </li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <language-selector class="nav navbar-nav navbar-right"></language-selector>
+      </ul>
+      <div ui-view="actions"></div>
+    </div>
+  </div>
+</nav>
@@ -0,0 +1,31 @@
+.navbar {
+
+  .container-fluid {
+    padding-right: 12%;
+    padding-left: 12%;
+    @media (max-width: 978px) {
+      padding-right: 2%;
+      padding-left: 2%;
+    }
+
+    .navbar-brand {
+      .noosfero-logo img {
+        height: 35px;
+      }
+    }
+
+    .navbar-nav {
+      .profile-menu .profile-image {
+        img {
+          height: 30px;
+          width: 30px;
+          display: inline-block;
+          @extend .img-circle;
+        }
+        i {
+          font-size: 1.7em;
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,187 @@
+import * as helpers from "./../../../spec/helpers";
+import {Navbar} from "./navbar";
+
+import {Injectable, Provider, provide} from "ng-forward";
+
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+
+
+describe("Components", () => {
+
+    describe("Navbar Component", () => {
+
+        let user: noosfero.User = null;
+        let scope: any;
+        let $rootScope: ng.IRootScopeService;
+
+        let modalInstance: any;
+        let $modal: any;
+        let authService: any;
+        let stateService: any;
+        let sessionService: SessionService;
+
+        let provideFunc = provide;
+
+        // before Each -> loading mocks on locals variables 
+        beforeEach(() => {
+            user = <noosfero.User>{
+                id: 1,
+                login: "user"
+            };
+            scope = helpers.mocks.scopeWithEvents;
+            modalInstance = helpers.mocks.modalInstance;
+            $modal = helpers.mocks.$modal;
+            authService = helpers.mocks.authService;
+            stateService = jasmine.createSpyObj("$state", ["go"]);
+            sessionService = <any>helpers.mocks.sessionWithCurrentUser(user);
+        });
+
+
+        // loading the templates
+        beforeEach(angular.mock.module("templates"));
+
+
+        // this function allow build the fixture of the container component
+        // and is reused in each test
+        // The main idea behing not prebuild it on a general beforeEach block is
+        // to allow tests configure the mock services accordilly their own needs   
+        let buildComponent = (): Promise<ComponentFixture> => {
+            return helpers.quickCreateComponent({
+                providers: [
+                    provide('$modal', {
+                        useValue: $modal
+                    }),
+                    provide('AuthService', {
+                        useValue: authService
+                    }),
+                    helpers.provideEmptyObjects('moment'),
+                    provide('$state', {
+                        useValue: stateService
+                    }),
+                    provide("$scope", {
+                        useValue: scope
+                    }),
+                    provide('SessionService', {
+                        useValue: sessionService
+                    }),
+                    provide('AUTH_EVENTS', {
+                        useValue: {
+                            AUTH_EVENTS
+                        }
+                    }),
+                    provide('TranslatorService', {
+                        useValue: helpers.mocks.translatorService
+                    })
+                ].concat(helpers.provideFilters("translateFilter")),
+                directives: [Navbar],
+                template: '<acme-navbar></acme-navbar>'
+            });
+        };
+
+
+        it('should get the loggedIn user', (done: Function) => {
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarInstance: Navbar = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(navbarInstance).toBeDefined();
+                expect(navbarInstance["currentUser"]).toEqual(user);
+                done();
+            });
+        });
+
+        it('should open on click', (done: Function) => {
+            spyOn($modal, "open");
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
+                navbarComp.openLogin();
+                expect($modal.open).toHaveBeenCalled();
+                expect($modal.open).toHaveBeenCalledWith({
+                    templateUrl: 'app/components/auth/login.html',
+                    controller: AuthController,
+                    controllerAs: 'vm',
+                    bindToController: true
+                });
+                done();
+            });
+        });
+
+        it('should logout', (done: Function) => {
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
+                spyOn(authService, "logout");
+                try {
+                    navbarComp.logout();
+                    expect(authService.logout).toHaveBeenCalled();
+                    done();
+                } catch (e) {
+                    console.error(e);
+                    fail(e.message);
+                    done();
+                }
+            });
+        });
+
+
+        it('should not activate user when logged in', (done: Function) => {
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
+                spyOn(navbarComp, "openLogin");
+                navbarComp.activate();
+                expect((<any>navbarComp.openLogin).calls.count()).toBe(0);
+                done();
+            });
+        });
+
+        it('should activate when user not logged in', (done: Function) => {
+            spyOn(sessionService, 'currentUser').and.returnValue(null);
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
+                spyOn(navbarComp, "openLogin");
+                navbarComp.activate();
+                expect(navbarComp.openLogin).toHaveBeenCalled();
+                done();
+            });
+        });
+
+
+        it('closes the modal after login', (done: Function) => {
+            modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
+            modalInstance.close = jasmine.createSpy("close");
+
+            $modal.open = () => {
+                return modalInstance;
+            };
+
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
+                let localScope: ng.IScope = navbarComp["$scope"];
+
+                navbarComp.openLogin();
+                localScope.$emit(AUTH_EVENTS.loginSuccess);
+                expect(modalInstance.close).toHaveBeenCalled();
+                done();
+            });
+        });
+
+        it('updates current user on logout', (done: Function) => {
+            buildComponent().then((fixture: ComponentFixture) => {
+                let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
+                let localScope: ng.IScope = navbarComp["$scope"];
+
+                // init navbar  currentUser with some user
+                navbarComp["currentUser"] = user;
+
+                // changes the current User to return null,
+                // and emmit the 'logoutSuccess' event
+                // just what happens when user logsout
+                sessionService.currentUser = () => { return null; };
+                localScope.$emit(AUTH_EVENTS.logoutSuccess);
+                expect(navbarComp["currentUser"]).toBeNull();
+                done();
+            });
+        });
+
+
+    });
+});
@@ -0,0 +1,66 @@
+import {Component, Inject} from "ng-forward";
+import {LanguageSelectorService} from "../language-selector/language-selector.component";
+
+
+import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+
+@Component({
+    selector: "acme-navbar",
+    templateUrl: "app/layout/navbar/navbar.html",
+    directives: [LanguageSelectorService],
+    providers: [AuthService, SessionService]
+})
+@Inject("$modal", AuthService, "SessionService", "$scope", "$state")
+export class Navbar {
+
+    private currentUser: noosfero.User;
+    private modalInstance: any = null;
+    /**
+     *
+     */
+    constructor(
+        private $modal: any,
+        private authService: AuthService,
+        private session: SessionService,
+        private $scope: ng.IScope,
+        private $state: ng.ui.IStateService
+    ) {
+        this.currentUser = this.session.currentUser();
+
+        this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
+            if (this.modalInstance) {
+                this.modalInstance.close();
+                this.modalInstance = null;
+            }
+
+            this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
+        });
+
+        this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
+            this.currentUser = this.session.currentUser();
+        });
+    }
+
+    openLogin() {
+        this.modalInstance = this.$modal.open({
+            templateUrl: 'app/components/auth/login.html',
+            controller: AuthController,
+            controllerAs: 'vm',
+            bindToController: true
+        });
+    };
+
+    logout() {
+        this.authService.logout();
+        this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
+    };
+
+
+
+    activate() {
+        if (!this.currentUser) {
+            this.openLogin();
+        }
+    }
+
+}
@@ -0,0 +1,11 @@
+export interface IAuthEvents {
+    loginSuccess: string;
+    loginFailed: string;
+    logoutSuccess: string;
+}
+
+export const AUTH_EVENTS: IAuthEvents = {
+    loginSuccess: "auth-login-success",
+    loginFailed: "auth-login-failed",
+    logoutSuccess: "auth-logout-success"
+};
 \ No newline at end of file
@@ -0,0 +1,33 @@
+import {AuthController} from "./auth.controller";
+import {AuthService} from "./auth.service";
+
+describe("Controllers", () => {
+
+
+    describe("AuthController", () => {
+
+        it("calls authenticate on AuthService when login called", () => {
+
+            // creating a Mock AuthService
+            let AuthServiceMock: AuthService = jasmine.createSpyObj("AuthService", ["login"]);
+
+            // pass AuthServiceMock into the constructor
+            let authController = new AuthController(null, null, AuthServiceMock);
+
+            // setup of authController -> set the credentials instance property
+            let credentials = { username: "username", password: "password" };
+
+            authController.credentials = credentials;
+
+            // calls the authController login method
+            authController.login();
+
+            // checks if the method login of the injected AuthService has been called
+            expect(AuthServiceMock.login).toHaveBeenCalledWith(credentials);
+
+        });
+
+
+
+    });
+});
@@ -0,0 +1,20 @@
+import {AuthService} from "./auth.service";
+
+export class AuthController {
+
+    static $inject = ["$log", "$stateParams", "AuthService"];
+
+    constructor(
+        private $log: ng.ILogService,
+        private $stateParams: any,
+        private AuthService: AuthService
+    ) {
+
+    }
+
+    credentials: noosfero.Credentials;
+
+    login() {
+        this.AuthService.login(this.credentials);
+    }
+}
@@ -0,0 +1,81 @@
+
+
+import {AuthService, AUTH_EVENTS} from "./";
+
+describe("Services", () => {
+
+
+    describe("Auth Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let authService: AuthService;
+        let credentials: noosfero.Credentials;
+        let $rootScope: ng.IRootScopeService;
+        let user: noosfero.User;
+
+        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _$rootScope_: ng.IRootScopeService, _AuthService_: AuthService) => {
+            $httpBackend = _$httpBackend_;
+            authService = _AuthService_;
+            $rootScope = _$rootScope_;
+
+            user = <noosfero.User>{
+                id: 1,
+                login: "user"
+            };
+        }));
+
+
+        describe("Succesffull login", () => {
+
+            beforeEach(() => {
+                credentials = { username: "user", password: "password" };
+
+                $httpBackend.expectPOST("/api/v1/login", "login=user&password=password").respond(200, { user: user });
+            });
+
+            it("should return loggedUser", (done) => {
+                authService.login(credentials).then((loggedUser) => {
+                    expect(loggedUser).toBeDefined();
+                    done();
+                });
+                $httpBackend.flush();
+                expect($httpBackend.verifyNoOutstandingRequest());
+            });
+
+
+            it("should emit event loggin successful with user logged data", () => {
+
+                authService.login(credentials);
+
+                let eventEmmited: boolean = false;
+                $rootScope.$on(AUTH_EVENTS.loginSuccess, (event: ng.IAngularEvent, userThroughEvent: noosfero.User) => {
+                    eventEmmited = true;
+                    expect(userThroughEvent).toEqual(user);
+                });
+
+                $httpBackend.flush();
+
+                expect(eventEmmited).toBeTruthy(AUTH_EVENTS.loginSuccess + " was not emmited!");
+            });
+
+            it("should return the current logged in user", () => {
+                authService.login(credentials);
+                $httpBackend.flush();
+                let actual: noosfero.User = authService.currentUser();
+                expect(actual).toEqual(user, "The returned user must be present");
+            });
+
+            it("should not return the current user after logout", () => {
+                authService.logout();
+                let actual: any = authService.currentUser();
+                expect(actual).toEqual(undefined, "The returned user must not be defined");
+            });
+        });
+
+
+    });
+});
@@ -0,0 +1,69 @@
+import {Injectable, Inject} from "ng-forward";
+
+import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
+import {SessionService} from "./session.service";
+
+import {AUTH_EVENTS, IAuthEvents} from "./auth-events";
+
+@Injectable()
+@Inject("$q", "$http", "$rootScope", "SessionService", "$log", "AUTH_EVENTS")
+export class AuthService {
+
+    constructor(private $q: ng.IQService,
+        private $http: ng.IHttpService,
+        private $rootScope: NoosferoRootScope,
+        private sessionService: SessionService,
+        private $log: ng.ILogService,
+        private auth_events: IAuthEvents) {
+
+    }
+
+    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: noosfero.User = this.sessionService.create(response.data);
+        this.$rootScope.currentUser = currentUser;
+        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
+        return currentUser;
+    }
+
+    login(credentials: noosfero.Credentials): ng.IPromise<noosfero.User> {
+        let url = '/api/v1/login';
+        let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
+        return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
+    }
+
+    private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
+        this.$log.debug('AuthService.login [FAIL] response', response);
+        this.$rootScope.$broadcast(this.auth_events.loginFailed);
+        // return $q.reject(response);
+        return null;
+    }
+
+    public logout() {
+        this.sessionService.destroy();
+        this.$rootScope.currentUser = undefined;
+        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+        this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
+    }
+
+    public isAuthenticated() {
+        return !!this.sessionService.currentUser();
+    }
+
+    public currentUser(): noosfero.User {
+        return this.sessionService.currentUser();
+    }
+
+    public isAuthorized(authorizedRoles: string | string[]) {
+        if (!angular.isArray(authorizedRoles)) {
+            authorizedRoles = [<string>authorizedRoles];
+        }
+        return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1);
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,5 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./auth-events";
+export * from "./auth.controller";
+export * from "./auth.service";
+export * from "./session.service";
@@ -0,0 +1,16 @@
+<div class="modal-header">
+  <h3 class="modal-title">{{"auth.title" | translate}}</h3>
+</div>
+<div class="modal-body">
+  <form>
+    <div class="form-group">
+      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
+    </div>
+    <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
+  </form>
+</div>
@@ -0,0 +1,49 @@
+import {Component} from "ng-forward";
+import {SessionService} from "./session.service";
+import {fixtures, createComponentFromClass, createProviderToValue} from "./../../spec/helpers";
+import {UserResponse, INoosferoLocalStorage} from "./../shared/models/interfaces";
+
+
+describe("Services", () => {
+
+
+    describe("Session Service", () => {
+
+        let $localStorage: INoosferoLocalStorage = null;
+        let $log: any;
+
+        beforeEach(() => {
+            $localStorage = <INoosferoLocalStorage>{ currentUser: null };
+            $log = jasmine.createSpyObj('$log', ['debug']);
+        });
+
+        it("method 'create()' saves the current user on $localstorage service", () => {
+            let session = new SessionService($localStorage, $log);
+            let userResponse = <UserResponse>{
+                user: fixtures.user
+            };
+            session.create(userResponse);
+            expect($localStorage.currentUser).toEqual(userResponse.user);
+        });
+
+        it("method 'destroy()' clean the currentUser on $localstorage", () => {
+            let session = new SessionService($localStorage, $log);
+            let userResponse = <UserResponse>{
+                user: fixtures.user
+            };
+            $localStorage.currentUser = fixtures.user;
+            session.destroy();
+            expect($localStorage.currentUser).toBeUndefined();
+        });
+
+        it("method 'currentUser()' returns the user recorded on $localstorage service", () => {
+            let session = new SessionService($localStorage, $log);
+            let userResponse = <UserResponse>{
+                user: fixtures.user
+            };
+            $localStorage.currentUser = fixtures.user;
+            expect(session.currentUser()).toEqual($localStorage.currentUser);
+        });
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,27 @@
+import {Injectable, Inject} from "ng-forward";
+import {UserResponse, INoosferoLocalStorage} from "./../shared/models/interfaces";
+
+@Injectable()
+@Inject("$localStorage", "$log")
+export class SessionService {
+
+    constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
+
+    }
+
+    create(data: UserResponse): noosfero.User {
+        this.$localStorage.currentUser = data.user;
+        this.$log.debug('User session created.', this.$localStorage.currentUser);
+        return this.$localStorage.currentUser;
+    };
+
+    destroy() {
+        delete this.$localStorage.currentUser;
+        this.$log.debug('User session destroyed.');
+    };
+
+    currentUser(): noosfero.User {
+        return this.$localStorage.currentUser;
+    };
+
+}
 \ No newline at end of file
 import {bundle, Component, StateConfig} from "ng-forward";
-import {ArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
+import {ArticleBlogComponent} from "./../article/types/blog/blog.component";
  
-import {ArticleView} from "../components/noosfero-articles/article/article_view";
+import {ArticleViewComponent} from "./../article/article-default-view.component";
  
-import {Profile} from "../profile/profile.component";
-import {Boxes} from "../components/noosfero-boxes/boxes.component";
-import {Block} from "../components/noosfero-blocks/block.component";
-import {LinkListBlock} from "../components/noosfero-blocks/link-list/link-list.component";
-import {RecentDocumentsBlock} from "../components/noosfero-blocks/recent-documents/recent-documents.component";
-import {ProfileImageBlock} from "../components/noosfero-blocks/profile-image-block/profile-image-block.component";
-import {RawHTMLBlock} from "../components/noosfero-blocks/raw-html/raw-html.component";
+import {ProfileComponent} from "../profile/profile.component";
+import {BoxesComponent} from "../layout/boxes/boxes.component";
+import {BlockComponent} from "../layout/blocks/block.component";
+import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list.component";
+import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents.component";
+import {ProfileImageBlockComponent} from "../layout/blocks/profile-image-block/profile-image-block.component";
+import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html.component";
  
-import {MembersBlock} from "../components/noosfero-blocks/members-block/members-block.component";
-import {NoosferoTemplate} from "../components/noosfero/noosfero-template.filter";
-import {DateFormat} from "../components/noosfero/date-format/date-format.filter";
+import {MembersBlockComponent} from "./../layout/blocks/members-block/members-block.component";
+import {NoosferoTemplate} from "../shared/pipes/noosfero-template.filter";
+import {DateFormat} from "../shared/pipes/date-format.filter";
  
-import {AuthService} from "./../components/auth/auth_service";
-import {Session} from "./../components/auth/session";
-import {Notification} from "./../components/notification/notification.component";
+import {AuthService} from "../login/auth.service";
+import {SessionService} from "../login/session.service";
  
+import {NotificationService} from "../shared/services/notification.service";
  
-import {Navbar} from "../components/navbar/navbar";
  
-import {MainBlock} from "../components/noosfero-blocks/main-block/main-block.component";
+import {Navbar} from "../layout/navbar/navbar";
+
+import {MainBlockComponent} from "../layout/blocks/main-block/main-block.component";
  
  
 /**
@@ -38,7 +39,7 @@ import {MainBlock} from &quot;../components/noosfero-blocks/main-block/main-block.com
 @Component({
     selector: 'main-content',
     templateUrl: "app/main/main.html",
-    providers: [AuthService, Session]
+    providers: [AuthService, SessionService]
 })
 export class MainContent {
  
@@ -62,11 +63,11 @@ export class MainContent {
     selector: 'main',
     template: '<div ng-view></div>',
     directives: [
-        ArticleBlog, ArticleView, Boxes, Block, LinkListBlock,
-        MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock,
-        MembersBlock, NoosferoTemplate, DateFormat, RawHTMLBlock
+        ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent, LinkListBlockComponent,
+        MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent,
+        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
     ],
-    providers: [AuthService, Session, Notification]
+    providers: [AuthService, SessionService, NotificationService]
 })
 @StateConfig([
     {
@@ -77,12 +78,12 @@ export class MainContent {
     {
         url: "^/:profile",
         abstract: true,
-        component: Profile,
+        component: ProfileComponent,
         name: 'main.profile',
         views: {
             "content": {
                 templateUrl: "app/profile/profile.html",
-                controller: Profile,
+                controller: ProfileComponent,
                 controllerAs: "vm"
             }
         }
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./interfaces";
@@ -1,113 +0,0 @@
-export interface NoosferoRootScope extends ng.IScope {
-    currentUser: User;
-}
-
-export interface Event extends Article {
-    id: number;
-}
-
-export interface Article {
-    id: number;
-}
-
-/**
- * @ngdoc interface
- * @name models.Profile
- * @description
- *  A representation of a Noosfero Profile.
- */
-export interface Profile {
-    
-    /**
-     * @ngdoc property
-     * @name id
-     * @propertyOf models.Profile
-     * @returns {number} The Profile id
-     */
-    id: number;
-    
-    /**
-     * @ngdoc property
-     * @name identifier
-     * @propertyOf models.Profile
-     * @returns {string} The unque identifier for the Profile
-     */
-    identifier: string;
-    
-    /**
-     * @ngdoc property
-     * @name type
-     * @propertyOf models.Profile
-     * @returns {string} The Profile type (e.g.: "Person", etc.)
-     */    
-    type: string;
-}
-
-
-/**
- * @ngdoc interface
- * @name models.Person
- * @description
- *  A representation of a Person in Noosfero.
- */
-export interface Person extends Profile {
-    /**
-     * @ngdoc property
-     * @name id
-     * @propertyOf models.Person
-     * @returns {number} The Person id
-     */
-    id: number;
-}
-
-export interface TynyMceArticle extends Article {
-    id: number;
-}
-
-export interface Blog extends Article {
-    id: number;
-}
-
-export interface Credentials {
-    username: string;
-    password: string;
-}
-
-export interface User {
-    id: number;
-    login: string;
-    email: string;
-    person: Person;
-    private_token: string;
-    userRole: string;
-}
-
-export interface UserResponse {
-    user: User;
-}
-
-
-export interface Box {
-    id: number;
-    position: number;
-}
-
-/**
- * @ngdoc interface
- * @name models.Activity
- * @description
- *  A representation of a {@link models.Profile} activity in Noosfero.
- */
-export interface Activity {
-    /**
-     * @ngdoc property
-     * @name verb
-     * @propertyOf models.Activity
-     * @returns {string} The activity verb.
-     */    
-    verb: string;
-}
-
-export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
-    currentUser: User;
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./profile-info.component";
@@ -1,40 +0,0 @@
-import {quickCreateComponent} from "../../spec/helpers";
-import {ProfileInfo} from "./profile-info.component";
-
-describe("Components", () => {
-    describe("Profile Info Component", () => {
-
-        let $rootScope: ng.IRootScopeService;
-        let $q: ng.IQService;
-        let profileServiceMock: any;
-        let $stateParams: any;
-
-        beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
-            $rootScope = _$rootScope_;
-            $q = _$q_;
-        }));
-
-        beforeEach(() => {
-            $stateParams = jasmine.createSpyObj("$stateParams", ["profile"]);
-            profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile", "getActivities"]);
-
-            let getCurrentProfileResponse = $q.defer();
-            getCurrentProfileResponse.resolve({ id: 1 });
-
-            let getActivitiesResponse = $q.defer();
-            getActivitiesResponse.resolve({ data: { activities: [{ id: 1 }, { id: 2 }] } });
-
-            profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
-            profileServiceMock.getActivities = jasmine.createSpy("getActivities").and.returnValue(getActivitiesResponse.promise);
-        });
-
-        it("get the profile activities", done => {
-            let component: ProfileInfo = new ProfileInfo(profileServiceMock);
-            $rootScope.$apply();
-            expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
-            expect(profileServiceMock.getActivities).toHaveBeenCalled();
-            expect(component.activities).toEqual([{ id: 1 }, { id: 2 }]);
-            done();
-        });
-    });
-});
@@ -1,29 +0,0 @@
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-
-import {Profile} from "./../models/interfaces";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: 'profile',
-    templateUrl: "app/profile-info/profile-info.html",
-    providers: [provide('profileService', { useClass: ProfileService })]
-})
-@Inject(ProfileService)
-export class ProfileInfo {
-
-    activities: any
-    profile: any
-
-    constructor(private profileService: ProfileService) {
-        this.activate();
-    }
-
-    activate() {
-        this.profileService.getCurrentProfile().then((profile: Profile) => {
-            this.profile = profile;
-            return this.profileService.getActivities(this.profile.id);
-        }).then((response: restangular.IResponse) => {
-            this.activities = response.data.activities;
-        });
-    }
-}
@@ -1,6 +0,0 @@
-<h3>{{vm.profile.name}}</h3>
-
-<div class="profile-wall">
-  <h4>{{"profile.wall" | translate}}</h4>
-  <noosfero-activities [activities]="vm.activities"></noosfero-activities>
-</div>
@@ -0,0 +1,36 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../spec/helpers';
+
+import {ActivitiesComponent} from './activities.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activities", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ActivitiesComponent],
+            providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
+        })
+        class BlockContainerComponent {
+            activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
+        }
+
+        it("render a noosfero activity tag for each activity", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
+                done();
+            });
+        });
+    });
+
+});
@@ -0,0 +1,27 @@
+import {Component, Input} from "ng-forward";
+import {ActivityComponent} from "./activity/activity.component";
+
+/**
+ * @ngdoc controller
+ * @name NoosferoActivities
+ * @description
+ *  The controller responsible to retreive profile activities.
+ */
+
+@Component({
+    selector: "noosfero-activities",
+    templateUrl: 'app/profile/activities/activities.html',
+    directives: [ActivityComponent]
+})
+export class ActivitiesComponent {
+
+    /**
+     * @ngdoc property
+     * @propertyOf NoosferoActivities
+     * @name activities
+     * @returns {Activity[]} An array of {@link Activity}.
+     */
+    @Input() activities: noosfero.Activity[];
+
+
+}
@@ -0,0 +1,5 @@
+<timeline>
+  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
+    <noosfero-activity [activity]="activity"></noosfero-activity>
+  </timeline-event>
+</timeline>
@@ -0,0 +1,11 @@
+.comma-separated {
+  .separated-item {
+    &:after {
+      content: ", ";
+      margin-left: -3px;
+    }
+    &:last-child:after {
+      content: "";
+    }
+  }
+}
@@ -0,0 +1,38 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {ActivityComponent} from './activity.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activity", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ActivityComponent],
+            providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
+        })
+        class BlockContainerComponent {
+            activity = { name: "activity1", verb: "create_article" };
+        }
+
+        it("render the specific template for an activity verb", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(component.getActivityTemplate()).toEqual('app/profile/activities/activity/create_article.html');
+                expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
+                done();
+            });
+        });
+    });
+
+});
@@ -0,0 +1,15 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-activity",
+    templateUrl: 'app/profile/activities/activity/activity.html'
+})
+export class ActivityComponent {
+
+    @Input() activity: noosfero.Activity;
+
+    getActivityTemplate() {
+        return 'app/profile/activities/activity/' + this.activity.verb + '.html';
+    }
+
+}
@@ -0,0 +1,3 @@
+<div class="activity {{ctrl.activity.verb}}">
+  <ng-include src="ctrl.getActivityTemplate()"></ng-include>
+</div>
@@ -0,0 +1,13 @@
+<timeline-badge class="info">
+  <i class="fa fa-user-plus"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.add_member_in_community.description" | translate}}</span>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body"></div>
+</timeline-panel>
@@ -0,0 +1,26 @@
+<timeline-badge class="success">
+  <i class="fa fa-file-text"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.create_article.description" | translate}} </span>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.target.article.profile.identifier})">
+        <strong ng-bind="ctrl.activity.target.article.profile.name"></strong></span>
+      </a>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body">
+    <div class="article">
+      <div class="title">
+        <a ui-sref="main.profile.page({profile: ctrl.activity.target.article.profile.identifier, page: ctrl.activity.target.article.path})"
+           ng-bind="ctrl.activity.target.article.title"></a>
+      </div>
+      <div class="lead small">
+        <div ng-bind-html="ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
+      </div>
+    </div>
+  </div>
+</timeline-panel>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./activity.component";
@@ -0,0 +1,18 @@
+<timeline-badge class="info">
+  <i class="fa fa-user-plus"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.new_friendship.description" | translate:{friends: ctrl.activity.params.friend_name.length}:"messageformat" }} </span>
+      <span class="comma-separated">
+        <a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
+          <strong ng-bind="friend"></strong>
+        </a>
+      </span>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body"></div>
+</timeline-panel>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./activities.component";
@@ -0,0 +1,51 @@
+/**
+ * @ngdoc overview
+ * @name components.noosfero.profile-image.ProfileImageSpec
+ * @description
+ *  This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
+ */
+
+import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+
+import * as helpers from "../../../spec/helpers";
+
+import {ProfileImageComponent} from "./image.component";
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+
+    describe("Profile Image Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        it("show community users image if profile is not Person", done => {
+            helpers.tcb.createAsync(ProfileImageComponent).then(fixture => {
+                let profileImageComponent: ProfileImageComponent = fixture.componentInstance;
+                let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
+                profileImageComponent.profile = profile;
+                profileImageComponent.ngOnInit();
+
+                // Check the attribute
+                expect(profileImageComponent.defaultIcon).toBe("fa-users", "The default icon should be community users");
+                // var elProfile = fixture.debugElement.componentViewChildren[0];
+                // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("show Person image if profile is Person", done => {
+            tcb.createAsync(ProfileImageComponent).then(fixture => {
+                let profileImageComponent: ProfileImageComponent = fixture.componentInstance;
+                let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
+                profileImageComponent.profile = profile;
+                profileImageComponent.ngOnInit();
+                // Check the attribute
+                expect(profileImageComponent.defaultIcon).toEqual("fa-user", "The default icon should be person user");
+                done();
+            });
+        });
+
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,47 @@
+import {Inject, Input, Component} from "ng-forward";
+
+
+/**
+ * @ngdoc controller
+ * @name components.noosfero.profile-image.ProfileImage
+ * @description The component responsible for rendering the profile image
+ * @exports ProfileImage
+ */
+@Component({
+    selector: "noosfero-profile-image",
+    templateUrl: 'app/profile/image/image.html',
+})
+export class ProfileImageComponent {
+
+    /**
+     * @ngdoc property
+     * @name profile
+     * @propertyOf components.noosfero.profile-image.ProfileImage
+     * @description 
+     *  The Noosfero {@link models.Profile} holding the image.
+     */
+    @Input() profile: noosfero.Profile;
+    /**
+     * @ngdoc property
+     * @name defaultIcon
+     * @propertyOf components.noosfero.profile-image.ProfileImage
+     * @descritpion
+     *  The default icon used by this profile
+     */
+    defaultIcon: string;
+
+    /**
+     * @ngdoc method
+     * @name ngOnInit
+     * @methodOf components.noosfero.profile-image.ProfileImage
+     * @description 
+     *  Initializes the icon names to their corresponding values depending on the profile type passed to the controller 
+     */
+    ngOnInit() {
+        this.defaultIcon = 'fa-users';
+        if (this.profile && this.profile.type === 'Person') {
+            this.defaultIcon = 'fa-user';
+        }
+    }
+}
+
@@ -0,0 +1,4 @@
+<span title="{{ctrl.profile.name}}">
+  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
+  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
+</span>
@@ -0,0 +1,3 @@
+i.profile-image {
+  color: rgb(44, 62, 80);  
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./image.component";
 /* Module Index Entry - generated using the script npm run generate-index */
+export * from "./myprofile.component";
 export * from "./profile-home.component";
 export * from "./profile.component";
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./profile-info.component";
@@ -0,0 +1,40 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {ProfileInfoComponent} from "./profile-info.component";
+
+describe("Components", () => {
+    describe("Profile Info Component", () => {
+
+        let $rootScope: ng.IRootScopeService;
+        let $q: ng.IQService;
+        let profileServiceMock: any;
+        let $stateParams: any;
+
+        beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+            $rootScope = _$rootScope_;
+            $q = _$q_;
+        }));
+
+        beforeEach(() => {
+            $stateParams = jasmine.createSpyObj("$stateParams", ["profile"]);
+            profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile", "getActivities"]);
+
+            let getCurrentProfileResponse = $q.defer();
+            getCurrentProfileResponse.resolve({ id: 1 });
+
+            let getActivitiesResponse = $q.defer();
+            getActivitiesResponse.resolve({ data: { activities: [{ id: 1 }, { id: 2 }] } });
+
+            profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
+            profileServiceMock.getActivities = jasmine.createSpy("getActivities").and.returnValue(getActivitiesResponse.promise);
+        });
+
+        it("get the profile activities", done => {
+            let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock);
+            $rootScope.$apply();
+            expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
+            expect(profileServiceMock.getActivities).toHaveBeenCalled();
+            expect(component.activities).toEqual([{ id: 1 }, { id: 2 }]);
+            done();
+        });
+    });
+});
@@ -0,0 +1,27 @@
+import {StateConfig, Component, Inject, provide} from 'ng-forward';
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: 'profile',
+    templateUrl: "app/profile/info/profile-info.html",
+    providers: [provide('profileService', { useClass: ProfileService })]
+})
+@Inject(ProfileService)
+export class ProfileInfoComponent {
+
+    activities: any;
+    profile: noosfero.Profile;
+
+    constructor(private profileService: ProfileService) {
+        this.activate();
+    }
+
+    activate() {
+        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+            return this.profileService.getActivities(<number>this.profile.id);
+        }).then((response: restangular.IResponse) => {
+            this.activities = response.data.activities;
+        });
+    }
+}
@@ -0,0 +1,6 @@
+<h3>{{vm.profile.name}}</h3>
+
+<div class="profile-wall">
+  <h4>{{"profile.wall" | translate}}</h4>
+  <noosfero-activities [activities]="vm.activities"></noosfero-activities>
+</div>
 import {StateConfig, Component, Inject, provide} from 'ng-forward';
  
-import {Profile} from "./../models/interfaces";
 import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
  
 @Component({
@@ -11,12 +10,12 @@ import {ProfileService} from &quot;../../lib/ng-noosfero-api/http/profile.service&quot;;
 @Inject(ProfileService, "$state")
 export class ProfileHome {
  
-    profile: Profile;
+    profile: noosfero.Profile;
  
     constructor(profileService: ProfileService, $state: ng.ui.IStateService) {
-        profileService.getCurrentProfile().then((profile: Profile) => {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
-            return profileService.getHomePage(this.profile.id, { fields: 'path' });
+            return profileService.getHomePage(<number>this.profile.id, { fields: 'path' });
         }).then((response: restangular.IResponse) => {
             if (response.data.article) {
                 $state.transitionTo('main.profile.page', { page: response.data.article.path, profile: this.profile.identifier }, { location: false });
 import {quickCreateComponent} from "../../spec/helpers";
-import {Profile} from "./profile.component";
+import {ProfileComponent} from "./profile.component";
  
 describe("Components", () => {
     describe("Profile Component", () => {
@@ -30,7 +30,7 @@ describe(&quot;Components&quot;, () =&gt; {
         });
  
         it("get the profile and store in profile service", done => {
-            let component: Profile = new Profile(profileServiceMock, $stateParams, notificationMock);
+            let component: ProfileComponent = new ProfileComponent(profileServiceMock, $stateParams, notificationMock);
             $rootScope.$apply();
             expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
             expect(component.profile).toEqual({ id: 1 });
@@ -38,7 +38,7 @@ describe(&quot;Components&quot;, () =&gt; {
         });
  
         it("get the profile boxes", done => {
-            let component: Profile = new Profile(profileServiceMock, $stateParams, notificationMock);
+            let component: ProfileComponent = new ProfileComponent(profileServiceMock, $stateParams, notificationMock);
             $rootScope.$apply();
             expect(profileServiceMock.getBoxes).toHaveBeenCalled();
             expect(component.boxes).toEqual([{ id: 2 }]);
@@ -50,7 +50,7 @@ describe(&quot;Components&quot;, () =&gt; {
             profileResponse.reject();
             profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(profileResponse.promise);
  
-            let component: Profile = new Profile(profileServiceMock, $stateParams, notificationMock);
+            let component: ProfileComponent = new ProfileComponent(profileServiceMock, $stateParams, notificationMock);
             $rootScope.$apply();
  
             expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
 import {StateConfig, Component, Inject, provide} 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 {ContentViewer} from "../content-viewer/content-viewer.component";
-import {ContentViewerActions} from "../content-viewer/content-viewer-actions.component";
-import {NoosferoActivities} from "../components/noosfero-activities/activities.component";
+import {ProfileInfoComponent} from './info/profile-info.component';
+import {ProfileHome} from './profile-home.component';
+import {BasicEditorComponent} from '../article/basic-editor.component';
+import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
+import {ContentViewerActions} from "../article/content-viewer/content-viewer-actions.component";
+import {ActivitiesComponent} from "./activities/activities.component";
 import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-import {Notification} from "../components/notification/notification.component";
+import {NotificationService} from "../shared/services/notification.service";
 import {MyProfile} from "./myprofile.component";
  
-import * as noosferoModels from "./../models/interfaces";
  
 /**
  * @ngdoc controller
@@ -17,24 +16,25 @@ import * as noosferoModels from &quot;./../models/interfaces&quot;;
  * @description
  *  This is the profile controller. It provide routes to supported Noosfero Profiles.
  */
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/profile.html",
-    directives: [NoosferoActivities],
+    directives: [ActivitiesComponent],
     providers: [
         provide('profileService', { useClass: ProfileService }),
-        provide('notification', { useClass: Notification })
+        provide('notificationService', { useClass: NotificationService })
     ]
 })
 @StateConfig([
     {
         name: 'main.profile.info',
         url: "^/profile/:profile",
-        component: ProfileInfo,
+        component: ProfileInfoComponent,
         views: {
             "mainBlockContent": {
-                templateUrl: "app/profile-info/profile-info.html",
-                controller: ProfileInfo,
+                templateUrl: "app/profile/info/profile-info.html",
+                controller: ProfileInfoComponent,
                 controllerAs: "vm"
             }
         }
@@ -47,11 +47,11 @@ import * as noosferoModels from &quot;./../models/interfaces&quot;;
     {
         name: 'main.profile.cms',
         url: "^/myprofile/:profile/cms",
-        component: Cms,
+        component: BasicEditorComponent,
         views: {
             "mainBlockContent": {
-                templateUrl: "app/cms/cms.html",
-                controller: Cms,
+                templateUrl: "app/article/basic-editor.html",
+                controller: BasicEditorComponent,
                 controllerAs: "vm"
             }
         }
@@ -70,15 +70,15 @@ import * as noosferoModels from &quot;./../models/interfaces&quot;;
     {
         name: 'main.profile.page',
         url: "/{page:any}",
-        component: ContentViewer,
+        component: ContentViewerComponent,
         views: {
             "mainBlockContent": {
-                templateUrl: "app/content-viewer/page.html",
-                controller: ContentViewer,
+                templateUrl: "app/article/content-viewer/page.html",
+                controller: ContentViewerComponent,
                 controllerAs: "vm"
             },
             "actions@main": {
-                templateUrl: "app/content-viewer/navbar-actions.html",
+                templateUrl: "app/article/content-viewer/navbar-actions.html",
                 controller: ContentViewerActions,
                 controllerAs: "vm"
             }
@@ -86,19 +86,19 @@ import * as noosferoModels from &quot;./../models/interfaces&quot;;
     }
 ])
 @Inject(ProfileService, "$stateParams")
-export class Profile {
+export class ProfileComponent {
  
-    boxes: noosferoModels.Box[];
-    profile: noosferoModels.Profile;
+    boxes: noosfero.Box[];
+    profile: noosfero.Profile;
  
-    constructor(profileService: ProfileService, $stateParams: ng.ui.IStateParamsService, notification: Notification) {
-        profileService.setCurrentProfileByIdentifier($stateParams["profile"]).then((profile: noosferoModels.Profile) => {
+    constructor(profileService: ProfileService, $stateParams: ng.ui.IStateParamsService, notificationService: NotificationService) {
+        profileService.setCurrentProfileByIdentifier($stateParams["profile"]).then((profile: noosfero.Profile) => {
             this.profile = profile;
-            return profileService.getBoxes(this.profile.id);
+            return profileService.getBoxes(<number>this.profile.id);
         }).then((response: restangular.IResponse) => {
             this.boxes = response.data.boxes;
         }).catch(() => {
-            notification.error("notification.profile.not_found");
+            notificationService.error("notification.profile.not_found");
         });
     }
 }
 .profile-container {
   @extend .container-fluid;
-  padding: 0 12%;
+  padding: 0 1%;
   @media (max-width: 978px) {
     padding: 0 2%;
   }
@@ -0,0 +1 @@
+/* Module Index Entry - generated using the script npm run generate-index */
@@ -0,0 +1 @@
+/* Module Index Entry - generated using the script npm run generate-index */
@@ -0,0 +1 @@
+/* Module Index Entry - generated using the script npm run generate-index */
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./interfaces";
@@ -0,0 +1,12 @@
+export interface NoosferoRootScope extends ng.IScope {
+    currentUser: noosfero.User;
+}
+
+export interface UserResponse {
+    user: noosfero.User;
+}
+
+
+export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
+    currentUser: noosfero.User;
+}
@@ -0,0 +1,20 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {DateFormat} from './date-format.filter';
+
+describe("Filters", () => {
+    describe("Date Format Filter", () => {
+
+        beforeEach(angular.mock.module("templates"));
+        beforeEach(angular.mock.module("angularMoment"));
+
+        it("convert date from the format returned by noosfero api to an ISO format", done => {
+            let date = "2016/03/10 10:46:47";
+            let htmlTemplate = `{{ '${date}' | dateFormat }}`;
+            quickCreateComponent({ providers: [DateFormat], template: htmlTemplate }).then(fixture => {
+                expect(fixture.debugElement.text()).toEqual('2016-03-10T13:46:47.000Z');
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,13 @@
+import {Pipe, Inject} from "ng-forward";
+
+@Pipe("dateFormat")
+@Inject("amParseFilter")
+export class DateFormat {
+
+    constructor(private amParseFilter: any) { }
+
+    transform(date: string, options: any) {
+        return this.amParseFilter(date, "YYYY/MM/DD HH:mm:ss").toISOString();
+    }
+
+}
@@ -0,0 +1,3 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./date-format.filter";
+export * from "./noosfero-template.filter";
@@ -0,0 +1,19 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {NoosferoTemplate} from './noosfero-template.filter';
+
+describe("Filters", () => {
+    describe("Noosfero Template Filter", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        it("replace the options in text with the values passed on options", done => {
+            let text = 'profile: {profile}, other: {other}';
+            let htmlTemplate = `{{ '${text}' | noosferoTemplate: {profile: 'profile1', other: 'other value'} }}`;
+            quickCreateComponent({ providers: [NoosferoTemplate], template: htmlTemplate }).then(fixture => {
+                expect(fixture.debugElement.text()).toEqual("profile: profile1, other: other value");
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,13 @@
+import {Pipe} from "ng-forward";
+
+@Pipe("noosferoTemplate")
+export class NoosferoTemplate {
+
+    transform(text: string, options: any) {
+        for (let option in options) {
+            text = text.replace('{' + option + '}', options[option]);
+        }
+        return text;
+    }
+
+}
@@ -0,0 +1,3 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./notification.service";
+export * from "./translator.service";
@@ -0,0 +1,80 @@
+import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+
+import * as helpers from "../../../spec/helpers";
+
+import {NotificationService} from "./notification.service";
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+
+    describe("Profile Image Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        it("display an error message when notify an error", done => {
+            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
+            sweetAlert.swal = jasmine.createSpy("swal");
+
+            let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
+            component.error("message", "title");
+            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
+                text: "message",
+                title: "title",
+                type: "error"
+            }));
+            done();
+        });
+
+        it("use the default message when call notification component without a message", done => {
+            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
+            sweetAlert.swal = jasmine.createSpy("swal");
+
+            let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
+            component.error();
+            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
+                text: NotificationService.DEFAULT_ERROR_MESSAGE,
+                type: "error"
+            }));
+            done();
+        });
+
+        it("display a success message when call notification success", done => {
+            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
+            sweetAlert.swal = jasmine.createSpy("swal");
+
+            let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
+            component.success("title", "message", 1000);
+            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
+                type: "success"
+            }));
+            done();
+        });
+
+        it("display a message relative to the http error code", done => {
+            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
+            sweetAlert.swal = jasmine.createSpy("swal");
+
+            let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
+            component.httpError(500, {});
+            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
+                text: "notification.http_error.500.message"
+            }));
+            done();
+        });
+
+        it("set the default timer in success messages", done => {
+            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
+            sweetAlert.swal = jasmine.createSpy("swal");
+
+            let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
+            component.success("title", "message");
+            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
+                type: "success",
+                timer: NotificationService.DEFAULT_SUCCESS_TIMER
+            }));
+            done();
+        });
+    });
+});
@@ -0,0 +1,41 @@
+import {Injectable, Inject} from "ng-forward";
+import {TranslatorService} from "./translator.service";
+
+@Injectable()
+@Inject("$log", "SweetAlert", TranslatorService)
+export class NotificationService {
+
+    constructor(
+        private $log: ng.ILogService,
+        private SweetAlert: any,
+        private translatorService: TranslatorService
+    ) { }
+
+    public static DEFAULT_ERROR_TITLE = "notification.error.default.title";
+    public static DEFAULT_ERROR_MESSAGE = "notification.error.default.message";
+    public static DEFAULT_SUCCESS_TIMER = 1000;
+
+    error(message: string = NotificationService.DEFAULT_ERROR_MESSAGE, title: string = NotificationService.DEFAULT_ERROR_TITLE) {
+        this.$log.debug("Notification error:", title, message, this.translatorService.currentLanguage());
+        this.SweetAlert.swal({
+            title: this.translatorService.translate(title),
+            text: this.translatorService.translate(message),
+            type: "error"
+        });
+    }
+
+    httpError(status: number, data: any): boolean {
+        this.error(`notification.http_error.${status}.message`);
+        return true; // return true to indicate that the error was already handled
+    }
+
+    success(title: string, text: string, timer: number = NotificationService.DEFAULT_SUCCESS_TIMER) {
+        this.SweetAlert.swal({
+            title: title,
+            text: text,
+            type: "success",
+            timer: timer
+        });
+    }
+
+}
@@ -0,0 +1,116 @@
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {provide} from 'ng-forward';
+
+import {TranslatorService} from './translator.service';
+
+import * as helpers from "../../../spec/helpers";
+
+describe("Services", () => {
+
+    describe("Translator Service", () => {
+
+        let $rootScope: ng.IScope;
+        let $q: ng.IQService;
+
+        beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+            $rootScope = _$rootScope_;
+            $q = _$q_;
+        }));
+
+        function createComponent() {
+            return new TranslatorService(
+                <any>helpers.mocks.$translate,
+                <any>helpers.mocks.tmhDynamicLocale,
+                <any>helpers.mocks.amMoment,
+                <any>helpers.mocks.angularLoad,
+                $rootScope
+            );
+        }
+
+        it("set available languages when change language", (done) => {
+            let component: TranslatorService = createComponent();
+            component.availableLanguages = null;
+            expect(component.availableLanguages).toBeNull();
+            $rootScope.$emit("$translateChangeSuccess");
+            expect(component.availableLanguages).not.toBeNull();
+            done();
+        });
+
+        it("change the language", (done) => {
+            let component: TranslatorService = createComponent();
+            let loadScripPromise = $q.defer();
+            loadScripPromise.resolve();
+            component["angularLoad"].loadScript = jasmine.createSpy("loadScript").and.returnValue(loadScripPromise.promise);
+            component["tmhDynamicLocale"].set = jasmine.createSpy("set");
+            component["tmhDynamicLocale"].get = jasmine.createSpy("get").and.returnValue("en");
+            component["$translate"].use = jasmine.createSpy("use");
+
+            component.changeLanguage('pt');
+            $rootScope.$digest();
+
+            expect(component["angularLoad"].loadScript).toHaveBeenCalledWith("/bower_components/moment/locale/pt.js");
+            expect(component["angularLoad"].loadScript).toHaveBeenCalledWith("/bower_components/messageformat/locale/pt.js");
+            expect(component["tmhDynamicLocale"].set).toHaveBeenCalledWith("pt");
+            expect(component["$translate"].use).toHaveBeenCalledWith("pt");
+            done();
+        });
+
+        it("do not load moment locale when change the language to english", (done) => {
+            let component: TranslatorService = createComponent();
+            component["angularLoad"].loadScript = jasmine.createSpy("loadScript").and.returnValue($q.defer().promise);
+            component.changeLanguage('en');
+            expect(component["angularLoad"].loadScript).not.toHaveBeenCalledWith("/bower_components/moment/locale/pt.js");
+            done();
+        });
+
+        it("do nothing when call change language with null", (done) => {
+            let component: TranslatorService = createComponent();
+            component["angularLoad"].loadScript = jasmine.createSpy("loadScript");
+            component["tmhDynamicLocale"].set = jasmine.createSpy("set");
+            component["$translate"].use = jasmine.createSpy("use");
+
+            component.changeLanguage(null);
+
+            expect(component["angularLoad"].loadScript).not.toHaveBeenCalled();
+            expect(component["tmhDynamicLocale"].set).not.toHaveBeenCalled();
+            expect(component["$translate"].use).not.toHaveBeenCalled();
+            done();
+        });
+
+        it("return the current language used by the translator", (done) => {
+            let component: TranslatorService = createComponent();
+            component["$translate"].use = jasmine.createSpy("use").and.returnValue("en");
+            expect(component.currentLanguage()).toEqual("en");
+            expect(component["$translate"].use).toHaveBeenCalled();
+            done();
+        });
+
+        it("call translate service when translate a text", (done) => {
+            let component: TranslatorService = createComponent();
+            component["$translate"].instant = jasmine.createSpy("instant");
+            component.translate("text");
+            expect(component["$translate"].instant).toHaveBeenCalledWith("text");
+            done();
+        });
+
+        it("change the language when receive an event", (done) => {
+            let component: TranslatorService = createComponent();
+            component.changeLanguage = jasmine.createSpy("changeLanguage");
+            $rootScope.$emit("$localeChangeSuccess");
+            expect(component.changeLanguage).toHaveBeenCalled();
+            done();
+        });
+
+        it("use the translate language when receive a change language event and there is no language previously selected", (done) => {
+            let component: TranslatorService = createComponent();
+            component.changeLanguage = jasmine.createSpy("changeLanguage");
+            component["tmhDynamicLocale"].get = jasmine.createSpy("get").and.returnValue(null);
+            component["$translate"].use = jasmine.createSpy("use").and.returnValue("en");
+
+            $rootScope.$emit("$localeChangeSuccess");
+            expect(component["$translate"].use).toHaveBeenCalled();
+            expect(component.changeLanguage).toHaveBeenCalledWith("en");
+            done();
+        });
+    });
+});
@@ -0,0 +1,59 @@
+import {Injectable, Inject} from "ng-forward";
+
+@Injectable()
+@Inject("$translate", "tmhDynamicLocale", "amMoment", "angularLoad", "$rootScope")
+export class TranslatorService {
+
+    availableLanguages: any;
+
+    constructor(private $translate: angular.translate.ITranslateService,
+        private tmhDynamicLocale: angular.dynamicLocale.tmhDynamicLocaleService,
+        private amMoment: any,
+        private angularLoad: any,
+        private $rootScope: any) {
+
+        this.$rootScope.$on("$localeChangeSuccess", () => {
+            this.changeLanguage(tmhDynamicLocale.get() || $translate.use());
+        });
+        this.$rootScope.$on("$translateChangeSuccess", () => {
+            this.configAvailableLanguages();
+        });
+    }
+
+    currentLanguage() {
+        return this.$translate.use();
+    }
+
+    changeLanguage(language: string) {
+        if (!language) {
+            console.log("WARN: language undefined");
+            return;
+        }
+        this.changeMomentLocale(language);
+        this.tmhDynamicLocale.set(language);
+        this.angularLoad.loadScript(`/bower_components/messageformat/locale/${language}.js`).then(() => {
+            return this.$translate.use(language);
+        });
+    }
+
+    translate(text: string) {
+        return this.$translate.instant(text);
+    }
+
+    private configAvailableLanguages() {
+        this.availableLanguages = {
+            "en": this.$translate.instant("language.en"),
+            "pt": this.$translate.instant("language.pt")
+        };
+    }
+
+    private changeMomentLocale(language: string) {
+        let localePromise = Promise.resolve();
+        if (language !== "en") {
+            localePromise = this.angularLoad.loadScript(`/bower_components/moment/locale/${language}.js`);
+        }
+        localePromise.then(() => {
+            this.amMoment.changeLocale(language);
+        });
+    }
+}
-import {Article} from "../../../app/models/interfaces";
 import {ArticleService} from "./article.service";
  
  
@@ -24,8 +23,8 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should return article children", (done) => {
                 let articleId = 1;
                 $httpBackend.expectGET(`/api/v1/articles/${articleId}/children`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getChildren(articleId).then((response: restangular.IResponse) => {
-                    expect(response.data.articles).toEqual([{ name: "article1" }]);
+                articleService.getChildren(<noosfero.Article>{id: articleId}).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                    expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
                 $httpBackend.flush();
@@ -34,8 +33,8 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should get articles by profile", (done) => {
                 let profileId = 1;
                 $httpBackend.expectGET(`/api/v1/profiles/${profileId}/articles`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getByProfile(profileId).then((response: restangular.IResponse) => {
-                    expect(response.data.articles).toEqual([{ name: "article1" }]);
+                articleService.getByProfile(<noosfero.Profile>{id: profileId}).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                    expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
                 $httpBackend.flush();
@@ -44,8 +43,8 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should get articles by profile with additional filters", (done) => {
                 let profileId = 1;
                 $httpBackend.expectGET(`/api/v1/profiles/${profileId}/articles?path=test`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getByProfile(profileId, { path: 'test' }).then((response: restangular.IResponse) => {
-                    expect(response.data.articles).toEqual([{ name: "article1" }]);
+                articleService.getByProfile(<noosfero.Profile>{id: profileId}, { path: 'test' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                    expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
                 $httpBackend.flush();
@@ -54,8 +53,8 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should get article children with additional filters", (done) => {
                 let articleId = 1;
                 $httpBackend.expectGET(`/api/v1/articles/${articleId}/children?path=test`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getChildren(articleId, { path: 'test' }).then((response: restangular.IResponse) => {
-                    expect(response.data.articles).toEqual([{ name: "article1" }]);
+                articleService.getChildren(<noosfero.Article>{id: articleId}, { path: 'test' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                    expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
                 $httpBackend.flush();
@@ -63,10 +62,10 @@ describe(&quot;Services&quot;, () =&gt; {
  
             it("should create an article in a profile", (done) => {
                 let profileId = 1;
-                let article: Article = { id: null };
-                $httpBackend.expectPOST(`/api/v1/profiles/${profileId}/articles`, { article: article }).respond(200, { articles: [{ id: 2 }] });
-                articleService.create(profileId, article).then((response: restangular.IResponse) => {
-                    expect(response.data.articles).toEqual([{ id: 2 }]);
+                let article: noosfero.Article = <any>{ id: null};
+                $httpBackend.expectPOST(`/api/v1/profiles/${profileId}/articles`, { article: article }).respond(200, {article: {  id: 2  }});
+                articleService.createInProfile(<noosfero.Profile>{id:  profileId}, article).then((result: noosfero.RestResult<noosfero.Article>) => {
+                    expect(result.data).toEqual({ id: 2 });
                     done();
                 });
                 $httpBackend.flush();
 import { Injectable, Inject } from "ng-forward";
-import {Article} from "../../../app/models/interfaces";
+import {RestangularService} from "./restangular_service";
+import {ProfileService} from "./profile.service";
  
 @Injectable()
-@Inject("Restangular")
-export class ArticleService {
+@Inject("Restangular", "$q", "$log", ProfileService)
  
-    constructor(private Restangular: any) { }
+export class ArticleService extends RestangularService<noosfero.Article> {
  
-    create(profileId: number, article: Article) {
-        return this.Restangular.one('profiles', profileId).customPOST(
-            { article: article },
-            'articles',
-            {},
-            { 'Content-Type': 'application/json' }
-        );
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected profileService: ProfileService) {
+        super(Restangular, $q, $log);
     }
  
-    getByProfile(profileId: number, params?: any) {
-        return this.Restangular.one('profiles', profileId).customGET('articles', params);
+    getResourcePath() {
+        return "articles";
     }
  
-    getChildren(articleId: number, params?: any) {
-        return this.get(articleId).customGET('children', params);
+    getDataKeys() {
+        return {
+            singular: 'article',
+            plural: 'articles'
+        };
     }
  
-    private get(articleId: number) {
-        return this.Restangular.one('articles', articleId);
+
+    createInProfile(profile: noosfero.Profile, article: noosfero.Article): ng.IPromise<noosfero.RestResult<noosfero.Article>> {
+        let profileElement = this.profileService.get(<number>profile.id);
+        (<any>profileElement).id = profile.id;
+        let headers = {
+            'Content-Type': 'application/json'
+        };
+        return this.create(article, <noosfero.RestModel>profileElement, null, headers);
+    }
+
+
+    getAsCollectionChildrenOf<C>(rootElement: noosfero.Environment | noosfero.Article | noosfero.Profile, path: string, queryParams?: any, headers?: any): restangular.ICollectionPromise<C> {
+        return rootElement.getList<C>(path, queryParams, headers);
+    }
+
+    getAsElementChildrenOf<C>(rootElement: noosfero.Environment | noosfero.Article | noosfero.Profile, path: string, id: number, queryParams?: any, headers?: any) {
+        return rootElement.one(path, id).get<C>(queryParams, headers);
     }
  
+    getByProfile<T>(profile: noosfero.Profile, params?: any): ng.IPromise<noosfero.RestResult<noosfero.Article[]>> {
+        let profileElement = this.profileService.get(<number>profile.id);
+        return this.list(profileElement, params);
+    }
+
+    getArticleByProfileAndPath(profile: noosfero.Profile, path: string): ng.IPromise<noosfero.RestResult<noosfero.Article>> {
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Article>>();
+        let profileElement = this.profileService.get(<number>profile.id);
+
+        let restRequest: ng.IPromise<any>;
+
+        let params = { path: path };
+
+        restRequest = profileElement.customGET(this.getResourcePath(), params);
+
+
+        restRequest
+            .then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+
+        return deferred.promise;
+    }
+
+    getOneByProfile<T>(profile: noosfero.Profile, params?: any): ng.IPromise<noosfero.RestResult<noosfero.Article>> {
+        let profileElement = this.profileService.get(<number>profile.id);
+        return this.getSub(profileElement, params);
+    }
+
+    getChildren<T>(article: noosfero.Article, params?: any): ng.IPromise<noosfero.RestResult<noosfero.Article[]>> {
+        let articleElement = this.getElement(article.id);
+        articleElement.id = article.id;
+        return this.listSubElements(<noosfero.Article>articleElement, "children", params);
+    }
+
+
+
 }
@@ -1,11 +0,0 @@
-namespace NgNoosferoAPI {
-    export class NoosferoHttpClient {
-        static $inject = ['$http', '$q'];
-
-        constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
-
-        }
-    }
-
-    NgNoosferoAPI.ngModule.service(NoosferoHttpClient);
-}
 \ No newline at end of file
-import {Profile} from "../../../app/models/interfaces";
 import {ProfileService} from "./profile.service";
  
 describe("Services", () => {
@@ -24,7 +23,7 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should return profile by its identifier", (done) => {
                 let identifier = 'profile1';
                 $httpBackend.expectGET(`/api/v1/profiles?identifier=${identifier}`).respond(200, [{ name: "profile1" }]);
-                profileService.getByIdentifier(identifier).then((profile: Profile) => {
+                profileService.getByIdentifier(identifier).then((profile: noosfero.Profile) => {
                     expect(profile).toEqual({ name: "profile1" });
                     done();
                 });
@@ -72,11 +71,11 @@ describe(&quot;Services&quot;, () =&gt; {
  
             it("should resolve the current profile", (done) => {
                 let profile = { id: 1, identifier: "profile1" };
-                profileService.getCurrentProfile().then((currentProfile: Profile) => {
+                profileService.getCurrentProfile().then((currentProfile: noosfero.Profile) => {
                     expect(currentProfile).toEqual(currentProfile);
                     done();
                 });
-                profileService.setCurrentProfile(<Profile>profile);
+                profileService.setCurrentProfile(<any>profile);
                 $rootScope.$apply();
             });
  
@@ -93,9 +92,9 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should find the profile by identifier, set and resolve the current profile", (done) => {
                 let identifier = 'profile1';
                 $httpBackend.expectGET(`/api/v1/profiles?identifier=${identifier}`).respond(200, [{ name: "profile1" }]);
-                profileService.setCurrentProfileByIdentifier(identifier).then((profile: Profile) => {
+                profileService.setCurrentProfileByIdentifier(identifier).then((profile: noosfero.Profile) => {
                     expect(profile).toEqual({ name: "profile1" });
-                    profileService.getCurrentProfile().then((profile: Profile) => {
+                    profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
                         expect(profile).toEqual({ name: "profile1" });
                         done();
                     });
 import { Injectable, Inject } from "ng-forward";
-import {Profile} from "../../../app/models/interfaces";
  
 @Injectable()
 @Inject("Restangular", "$q")
 export class ProfileService {
  
-    private _currentProfilePromise: ng.IDeferred<Profile>;
+    private _currentProfilePromise: ng.IDeferred<noosfero.Profile>;
  
     constructor(private restangular: restangular.IService, private $q: ng.IQService) {
         this.resetCurrentProfile();
@@ -15,17 +14,17 @@ export class ProfileService {
         this._currentProfilePromise = this.$q.defer();
     }
  
-    getCurrentProfile(): ng.IPromise<Profile> {
+    getCurrentProfile(): ng.IPromise<noosfero.Profile> {
         return this._currentProfilePromise.promise;
     }
  
-    setCurrentProfile(profile: Profile) {
+    setCurrentProfile(profile: noosfero.Profile) {
         this._currentProfilePromise.resolve(profile);
     }
  
     setCurrentProfileByIdentifier(identifier: string) {
         this.resetCurrentProfile();
-        return this.getByIdentifier(identifier).then((profile: Profile) => {
+        return this.getByIdentifier(identifier).then((profile: noosfero.Profile) => {
             this.setCurrentProfile(profile);
             return this.getCurrentProfile();
         });
@@ -35,10 +34,10 @@ export class ProfileService {
         return this.get(profileId).customGET("home_page", params);
     }
  
-    getByIdentifier(identifier: string): ng.IPromise<any> {
+    getByIdentifier(identifier: string): ng.IPromise<noosfero.Profile> {
         let p = this.restangular.one('profiles').get({ identifier: identifier });
         return p.then((response: restangular.IResponse) => {
-            if (response.data.length == 0) {
+            if (response.data.length === 0) {
                 return this.$q.reject(p);
             }
             return response.data[0];
@@ -0,0 +1,16 @@
+namespace noosfero.http {
+    export function Rest(config: {
+        path: string
+    }
+    ): Function {
+        let path = config.path;
+        return (t: Function) => {
+            if (!path) {
+                throw new Error(`Rest decorator error in ${(<any>t).name}. Rest path should be provided`);
+            }
+            t.prototype.getPath = function() {
+                return path;
+            };
+        };
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,210 @@
+import {RestangularService} from "./restangular_service";
+
+interface ObjectModel extends noosfero.RestModel {
+}
+
+interface RootObjectModel extends noosfero.RestModel {
+
+}
+
+describe("Restangular Service - base Class", () => {
+
+    class ObjectRestService extends RestangularService<ObjectModel> {
+        public getDataKeys() {
+            return {
+                singular: "object",
+                plural: "objects"
+            };
+        }
+
+        public getResourcePath() {
+            return "objects";
+        }
+    }
+
+    class RootObjectRestService extends RestangularService<ObjectModel> {
+        public getDataKeys() {
+            return {
+                singular: "rootObject",
+                plural: "rootObjects"
+            };
+        }
+
+        public getResourcePath() {
+            return "rootObjects";
+        }
+    }
+
+    let restangularService: restangular.IService;
+    let $httpBackend: ng.IHttpBackendService;
+    let objectRestService: ObjectRestService;
+    let rootObjectRestService: RootObjectRestService;
+
+    beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        $translateProvider.translations('en', {});
+    }));
+
+    beforeEach(inject((_Restangular_: restangular.IService, _$q_: ng.IQService, _$httpBackend_: ng.IHttpBackendService) => {
+        restangularService = _Restangular_;
+        objectRestService = new ObjectRestService(_Restangular_, _$q_, null);
+        rootObjectRestService = new RootObjectRestService(_Restangular_, _$q_, null);
+        $httpBackend = _$httpBackend_;
+    }));
+
+    it("list() calls GET /objects", (done) => {
+        $httpBackend.expectGET("/api/v1/objects").respond(200, { objects: [{ id: 1 }, { id: 2 }] });
+
+        objectRestService.list().then((result: noosfero.RestResult<ObjectModel[]>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel[]>result.data).length).toEqual(2);
+            done();
+        });
+
+        $httpBackend.flush();
+
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+    it("list(rootObject) calls GET /rootObjects/1/objects", (done) => {
+
+        $httpBackend.expectGET("/api/v1/rootObjects/1/objects").respond(200, { objects: [{ id: 1 }, { id: 2 }] });
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+
+        objectRestService.list(rootObj).then((result: noosfero.RestResult<ObjectModel[]>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel[]>result.data).length).toEqual(2);
+            done();
+        });
+
+        $httpBackend.flush();
+
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+    it("get(1) calls GET /objects/1", (done) => {
+        $httpBackend.expectGET("/api/v1/objects/1").respond(200, { object: { id: 1 } });
+
+        objectRestService.get(1).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel>result.data).id).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+    it("objectService.get(1, rootObject) calls GET /rootObjects/1/objects/1", (done) => {
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+        $httpBackend.expectGET("/api/v1/rootObjects/1/objects/1").respond(200, { object: { id: 1 } });
+
+        objectRestService.get(1, rootObj).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel>result.data).id).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+    it("remove(object) calls DELETE /objects/1", (done) => {
+        $httpBackend.expectGET("/api/v1/objects/1").respond(200, { object: { id: 1 } });
+        objectRestService.get(1).then((result: noosfero.RestResult<ObjectModel>) => {
+            let object: ObjectModel = <ObjectModel>result.data;
+
+            $httpBackend.expectDELETE("/api/v1/objects/1").respond(204, { object: { id: 1 } });
+
+            objectRestService.remove(object).then((result: noosfero.RestResult<ObjectModel>) => {
+                expect(result.data).toBeDefined();
+                expect((<ObjectModel>result.data).id).toEqual(1);
+                done();
+            });
+        });
+
+        $httpBackend.flush();
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+
+    it("remove(object, rootObject) calls DELETE /rootObjects/1/objects/1", (done) => {
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+
+        let obj: ObjectModel = objectRestService.getElement(1, rootObj);
+
+        $httpBackend.expectDELETE("/api/v1/rootObjects/1/objects/1").respond(204, { object: { id: 1, rootId: 1 } });
+
+        objectRestService.remove(obj, rootObj).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel>result.data).id).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+
+    it("update(object) calls PUT /objects/1", (done) => {
+        $httpBackend.expectPUT("/api/v1/objects/1").respond(200, { object: { id: 1 } });
+
+        let object: ObjectModel = objectRestService.getElement(1);
+
+        objectRestService.update(object).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel>result.data).id).toEqual(1);
+            done();
+        });
+
+        $httpBackend.flush();
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+
+    it("update(object, rootObject) calls PUT /rootObjects/1/objects/1", (done) => {
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+
+        let obj: ObjectModel = objectRestService.getElement(1, rootObj);
+
+        $httpBackend.expectPUT("/api/v1/rootObjects/1/objects/1").respond(200, { object: { id: 1, rootId: 1 } });
+
+        objectRestService.update(obj, rootObj).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<ObjectModel>result.data).id).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+
+    it("save(object) calls POST /objects", (done) => {
+        $httpBackend.expectPOST("/api/v1/objects").respond(201, { object: { attr: 1 } });
+
+        let object: ObjectModel = objectRestService.getElement(1);
+
+        objectRestService.create(object).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<any>result.data).attr).toEqual(1);
+            done();
+        });
+
+        $httpBackend.flush();
+        $httpBackend.verifyNoOutstandingExpectation();
+    });
+
+
+    it("save(object, rootObject) calls POST /rootObjects/1/objects", (done) => {
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+
+        let obj: ObjectModel = objectRestService.getElement(1, rootObj);
+
+        $httpBackend.expectPOST("/api/v1/rootObjects/1/objects").respond(201, { object: { attr: 1, rootId: 1 } });
+
+        objectRestService.create(obj, rootObj).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<any>result.data).attr).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,297 @@
+/**
+ * @name RestangularService
+ * Base class to be extended by classes which will provide access
+ * to te Noosfero REST API
+ * 
+ * @export RestangularService
+ * @abstract
+ * @class RestangularService
+ * @template T
+ */
+export abstract class RestangularService<T extends noosfero.RestModel> {
+
+    private baseResource: restangular.IElement;
+    /**
+     * Creates an instance of RestangularService.
+     * 
+     * @param {restangular.IService} Restangular (description)
+     * @param {ng.IQService} $q (description)
+     * @param {ng.ILogService} $log (description)
+     */
+    constructor(protected restangularService: restangular.IService, protected $q: ng.IQService, protected $log: ng.ILogService) {
+        this.baseResource = restangularService.all(this.getResourcePath());
+        // TODO 
+        // this.restangularService.setResponseInterceptor((data, operation, what, url, response, deferred) => {
+        //     let transformedData: any = data;
+        //     if (operation === "getList" && url.endsWith("/" + this.getDataKeys().plural)) {
+        //         transformedData = data[this.getDataKeys()["plural"]];
+        //         return transformedData;
+        //     } else {
+        //         return data;
+        //     }
+        // });
+    }
+
+    protected extractData(response: restangular.IResponse): noosfero.RestResult<T> {
+        let dataKey: string;
+        if (response.data && this.getDataKeys()) {
+            if ((<Object>response.data).hasOwnProperty(this.getDataKeys().singular)) {
+                dataKey = this.getDataKeys().singular;
+            } else if ((<Object>response.data).hasOwnProperty(this.getDataKeys().plural)) {
+                dataKey = this.getDataKeys().plural;
+            }
+        }
+        return {
+            data: response.data[dataKey],
+            headers: response.headers
+        };
+    };
+
+    protected buildResult(response: restangular.IResponse): noosfero.RestResult<T> {
+        return {
+            data: response.data,
+            headers: response.headers
+        };
+    };
+    /**
+     * Abstract getPath() method is used to mount the url 
+     * on REST Operations
+     * @protected
+     * @abstract
+     * @returns {string} The path of the REST endpoint
+     */
+    public abstract getResourcePath(): string;
+
+    /**
+     * Abstract getDataKeys()
+     * 
+     * Should be implemented into the child classes and 
+     * returns the singular and plural names of the represented resource
+     * 
+     * @protected
+     * @abstract
+     * @returns {{ singular: string, plural: string }} (description)
+     */
+    protected abstract getDataKeys(): { singular: string, plural: string };
+
+    /**
+     * Do a HTTP GET call to the resource represented using the id provided
+     * 
+     * @protected
+     * @param {number} id The resource id
+     * @returns {ng.IPromise<T>} Returns a Promise to the Generic Type 
+     */
+    public get(id: number, rootElement?: restangular.IElement, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+
+        let restRequest: ng.IPromise<noosfero.RestResult<T>>;
+
+        if (rootElement) {
+            restRequest = rootElement.one(this.getResourcePath(), id).get(queryParams, headers);
+        } else {
+            restRequest = this.restangularService.one(this.getResourcePath(), id).get(queryParams, headers);
+        }
+
+        restRequest.then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+
+        return deferred.promise;
+    }
+
+    /**
+     * Do a HTTP GET call to the resource collection represented
+     * 
+     * @protected
+     * @param {number} id (description)
+     * @returns {ng.IPromise<T>} Returns a Promise to the Generic Type 
+     */
+    public list(rootElement?: restangular.IElement, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T[]>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T[]>>();
+
+        let restRequest: ng.IPromise<any>;
+
+        if (rootElement) {
+            restRequest = rootElement.customGET(this.getResourcePath(), queryParams, headers);
+        } else {
+            restRequest = this.baseResource.customGET("", queryParams, headers);
+        }
+
+
+        restRequest
+            .then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+
+        return deferred.promise;
+    }
+
+    /**
+     * Do a HTTP GET call to the resource collection represented
+     * 
+     * @protected
+     * @param {number} id (description)
+     * @returns {ng.IPromise<T>} Returns a Promise to the Generic Type 
+     */
+    public getSub(rootElement?: restangular.IElement, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+
+        let restRequest: ng.IPromise<any>;
+
+        if (rootElement) {
+            restRequest = rootElement.customGET(this.getResourcePath(), queryParams, headers);
+        } else {
+            restRequest = this.baseResource.customGET("", queryParams, headers);
+        }
+
+
+        restRequest
+            .then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+
+        return deferred.promise;
+    }
+
+    public listSubElements<C>(obj: T, subElement: string, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<C>> {
+        let deferred = this.$q.defer<noosfero.RestResult<C>>();
+        let restRequest: ng.IPromise<noosfero.RestResult<T>>;
+        let objElement = this.getElement(obj.id);
+        objElement.id = obj.id;
+        restRequest = objElement.customGET(subElement, queryParams, headers);
+        restRequest.then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
+
+    /**
+     * Removes the object provided from the resource collection,
+     * calls DELETE /resourcepath/:resourceId
+     */
+    public remove(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let restangularObj: restangular.IElement;
+
+
+
+        if (rootElement) {
+            restangularObj = rootElement.one(this.getResourcePath(), obj.id);
+        } else {
+            restangularObj = this.restangularService.one(this.getResourcePath(), obj.id);
+        }
+
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+
+        let restRequest: ng.IPromise<noosfero.RestResult<T>>;
+
+        restRequest = restangularObj.remove(queryParams, headers);
+
+        restRequest
+            .then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+        return deferred.promise;
+    }
+
+    /**
+     * Updates the object into the resource collection
+     * calls PUT /resourcePath/:resourceId   {object}
+     */
+    public update(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+
+        let restRequest: ng.IPromise<noosfero.RestResult<T>>;
+
+        let restangularObj: restangular.IElement;
+
+        if (rootElement) {
+            restangularObj = rootElement.one(this.getResourcePath(), obj.id);
+        } else {
+            restangularObj = this.restangularService.one(this.getResourcePath(), obj.id);
+        }
+
+        restRequest = restangularObj.put(queryParams, headers);
+
+        restRequest.then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+        return deferred.promise;
+    }
+
+    /**
+     * Creates a new Resource into the resource collection
+     * calls POST /resourcePath
+     */
+    public create(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+
+        let restRequest: ng.IPromise<noosfero.RestResult<T>>;
+
+        let data = <any>{ };
+        data[this.getDataKeys().singular] = obj;
+
+        if (rootElement) {
+            restRequest = rootElement.all(this.getResourcePath()).post(data, queryParams, headers);
+        } else {
+            restRequest = this.baseResource.post(data, queryParams, headers);
+        }
+
+        restRequest.then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+
+        return deferred.promise;
+    }
+
+    /**
+     * Returns a Restangular IElement representing the 
+     */
+    public getElement(id: number, rootElement?: noosfero.RestModel): noosfero.RestModel {
+        if (rootElement) {
+            return <noosfero.RestModel>rootElement.one(this.getResourcePath(), id);
+        } else {
+            return <noosfero.RestModel>this.restangularService.one(this.getResourcePath(), id);
+        }
+    }
+
+    /** HANDLERS */
+    protected getHandleSuccessFunction<C>(deferred: ng.IDeferred<noosfero.RestResult<C | T | any>>, responseKey?: string): (response: restangular.IResponse) => void {
+        let self = this;
+
+        /**
+         * (description)
+         * 
+         * @param {restangular.IResponse} response (description)
+         */
+        let successFunction = (response: restangular.IResponse): void => {
+            if (self.$log) {
+                self.$log.debug("Request successfull executed", response.data, self, response);
+            }
+            deferred.resolve(<any>this.extractData(response));
+        };
+        return successFunction;
+    }
+
+    /**
+     * (description)
+     * 
+     * @template T
+     * @param {ng.IDeferred<T>} deferred (description)
+     * @returns {(response: restangular.IResponse) => void} (description)
+     */
+    getHandleErrorFunction<T>(deferred: ng.IDeferred<T>): (response: restangular.IResponse) => void {
+        let self = this;
+        /**
+         * (description)
+         * 
+         * @param {restangular.IResponse} response (description)
+         */
+        let successFunction = (response: restangular.IResponse): void => {
+            if (self.$log) {
+                self.$log.error("Error executing request", self, response);
+            }
+            deferred.reject(response);
+        };
+        return successFunction;
+    }
+    /** END HANDLERS */
+
+}
@@ -0,0 +1,17 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noofero.Activity
+     * @description
+     *  A representation of a {@link noosfero.Profile} activity in Noosfero.
+     */
+    export interface Activity {
+        /**
+         * @ngdoc property
+         * @name verb
+         * @propertyOf noofero.Activity
+         * @returns {string} The activity verb.
+         */
+        verb: string;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,8 @@
+
+namespace noosfero {
+    export interface Article  extends RestModel {
+        path: string;
+        profile: Profile;
+        type: string;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,5 @@
+namespace noosfero {
+    export interface Block {
+        id: number;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,4 @@
+namespace noosfero {
+    export interface Blog extends Article {
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,6 @@
+namespace noosfero {
+    export interface Box {
+        id: number;
+        position: number;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,6 @@
+namespace noosfero {
+    export interface Credentials {
+        username: string;
+        password: string;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,5 @@
+
+namespace noosfero {
+    export interface Environment extends RestModel {
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,4 @@
+namespace noosfero {
+    interface Event extends Article {
+    }
+}
@@ -0,0 +1,11 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Person
+     * @description
+     *  A representation of a Person in Noosfero.
+     */
+    export interface Person extends Profile {
+
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,36 @@
+
+namespace noosfero {
+    /**
+ * @ngdoc interface
+ * @name noofero.Profile
+ * @description
+ *  A representation of a Noosfero Profile.
+ */
+    export interface Profile extends RestModel {
+        /**
+         * @ngdoc property
+         * @name id
+         * @propertyOf noofero.Profile
+         * @returns {number} The Profile id
+         */
+        id: number;
+
+        /**
+         * @ngdoc property
+         * @name identifier
+         * @propertyOf noofero.Profile
+         * @returns {string} The unque identifier for the Profile
+         */
+        identifier: string;
+
+        /**
+         * @ngdoc property
+         * @name type
+         * @propertyOf noofero.Profile
+         * @returns {string} The Profile type (e.g.: "Person", etc.)
+         */
+        type: string;
+
+        name: string;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,5 @@
+namespace noosfero {
+    export interface RestModel extends restangular.IElement {
+        id: number;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,7 @@
+
+namespace noosfero {
+    export interface RestResult<T> {
+        data: T;
+        headers: Function;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,4 @@
+namespace noosfero {
+    export interface TynyMceArticle extends Article {
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,10 @@
+namespace noosfero {
+    export interface User {
+        id: number;
+        login: string;
+        email: string;
+        person: Person;
+        private_token: string;
+        userRole: string;
+    }
+}
 \ No newline at end of file
@@ -2,7 +2,6 @@
 import {ngClass, TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
 import {providers} from  'ng-forward/cjs/testing/providers';
 import {Injectable, Inject, Provider, Input, provide, Component} from 'ng-forward';
-import {User, Person} from "./../app/models/interfaces";
  
  
 export var ngforward = {
@@ -101,7 +100,7 @@ export var fixtures = {
         id: 1,
         login: 'user',
         email: 'user@company.com',
-        person: <Person>{
+        person: <noosfero.Person>{
             id: 1,
             identifier: 'user'
         },
@@ -48,6 +48,17 @@ export var mocks = {
                 }
             };
         },
+        getArticleByProfileAndPath: (profile: noosfero.Profile, path: string) => {
+            return {
+                then: (func?: Function) => {
+                    if (func) func({
+                        data: {
+                            article: null
+                        }
+                    });
+                }
+            };
+        },
         getChildren: (articleId: number, params?: any) => {
             return {
                 then: (func?: Function) => { if (func) func(); }
@@ -71,7 +82,7 @@ export var mocks = {
         use: (lang?: string) => {
             return lang ? Promise.resolve(lang) : "en";
         },
-        instant: (text: string) => { return text }
+        instant: (text: string) => { return text; }
     },
     tmhDynamicLocale: {
         get: () => { },
@@ -99,6 +110,6 @@ export var mocks = {
     translatorService: {
         currentLanguage: () => { },
         changeLanguage: (lang: string) => { },
-        translate: (text: string) => { return text }
+        translate: (text: string) => { return text; }
     }
 };
...	...	@@ -3,7 +3,9 @@
3	3	"files.exclude": {
4	4	"**/.git": true,
5	5	"**/.DS_Store": true,
6		- "src/app/*.js": false
	6	+ "src/*/.js": true,
	7	+ "src/*/.js.map": true,
	8	+ "coverage": true
7	9	},
8	10	"editor.fontSize": 14,
9	11	"typescript.useCodeSnippetsOnMethodSuggest": true
...	...
...	...	@@ -0,0 +1,13 @@
	1	+let replace = require("replace");
	2	+
	3	+import * as path from "path";
	4	+
	5	+let wrong_jqlite_d_ts_file = path.join(__dirname, "../node_modules/ng-forward/cjs/util/jqlite-extensions.d.ts");
	6	+
	7	+replace({
	8	+ regex: /import JQuery from \".\/\";/,
	9	+ replacement: "",
	10	+ paths: [wrong_jqlite_d_ts_file],
	11	+ sillent: false
	12	+});
	13	+
...	...
...	...	@@ -4,21 +4,23 @@
4	4	"dependencies": {
5	5	"angular": "^1.5.0",
6	6	"angular-mock": "^1.0.0",
7		- "moment": "^2.11.2"
	7	+ "moment": "^2.11.2",
	8	+ "ng-forward": "0.0.1-alpha.12"
8	9	},
9	10	"scripts": {
10	11	"build": "webpack; gulp build",
11	12	"webpack": "webpack",
	13	+ "karma": "concurrently \"webpack -w\" \"karma start\"",
12	14	"docs": "gulp ngdocs; static-server docs",
13		- "karma": "karma",
14	15	"coverage": "karma start --single-run; npm run remap-coverage",
15	16	"remap-coverage": "ts-node --project ./dev-scripts ./dev-scripts/remapCoverage.ts",
16	17	"test-single": "karma start --single-run",
17	18	"test-and-coverage": "karma start & npm run remap-coverage",
18	19	"test": "webpack -w --test",
19		- "postinstall": "npm install -g bower && bower install && typings install && cd dev-scripts && typings install",
	20	+ "postinstall": "npm install -g bower; bower install; typings install; npm run fix-jqlite; cd dev-scripts; typings install",
20	21	"start": "concurrently \"webpack -w\" \"gulp serve\"",
21		- "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts"
	22	+ "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
	23	+ "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
22	24	},
23	25	"devDependencies": {
24	26	"browser-sync": "~2.9.11",
...	...	@@ -71,7 +73,6 @@
71	73	"karma-webpack": "^1.7.0",
72	74	"lodash": "~3.10.1",
73	75	"main-bower-files": "~2.9.0",
74		- "ng-forward": "0.0.1-alpha.12",
75	76	"on-build-webpack": "^0.1.0",
76	77	"phantomjs": "~1.9.18",
77	78	"phantomjs-polyfill": "0.0.2",
...	...
...	...	@@ -0,0 +1 @@
	1	+/* Module Index Entry - generated using the script npm run generate-index */
...	...
...	...	@@ -0,0 +1,108 @@
	1	+
	2	+import {Input, provide, Component} from 'ng-forward';
	3	+import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
	4	+
	5	+import {createComponentFromClass, quickCreateComponent} from "../../spec/helpers";
	6	+
	7	+// this htmlTemplate will be re-used between the container components in this spec file
	8	+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
	9	+
	10	+
	11	+describe("Components", () => {
	12	+
	13	+ describe("ArticleView Component", () => {
	14	+
	15	+ // the karma preprocessor html2js transform the templates html into js files which put
	16	+ // the templates to the templateCache into the module templates
	17	+ // we need to load the module templates here as the template for the
	18	+ // component Noosfero ArtileView will be load on our tests
	19	+ beforeEach(angular.mock.module("templates"));
	20	+
	21	+ it("renders the default component when no specific component is found", (done: Function) => {
	22	+ // Creating a container component (ArticleContainerComponent) to include
	23	+ // the component under test (ArticleView)
	24	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent] })
	25	+ class ArticleContainerComponent {
	26	+ article = { type: 'anyArticleType' };
	27	+ profile = { name: 'profile-name' };
	28	+ constructor() {
	29	+ }
	30	+ }
	31	+
	32	+ createComponentFromClass(ArticleContainerComponent).then((fixture) => {
	33	+ // and here we can inspect and run the test assertions
	34	+
	35	+ // gets the children component of ArticleContainerComponent
	36	+ let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	37	+
	38	+ // and checks if the article View rendered was the Default Article View
	39	+ expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
	40	+
	41	+ // done needs to be called (it isn't really needed, as we can read in
	42	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	43	+ // because createAsync in ng-forward is not really async, but as the intention
	44	+ // here is write tests in angular 2 ways, this is recommended
	45	+ done();
	46	+ });
	47	+
	48	+ });
	49	+
	50	+ it("receives the article and profile as inputs", (done: Function) => {
	51	+
	52	+ // Creating a container component (ArticleContainerComponent) to include
	53	+ // the component under test (ArticleView)
	54	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent] })
	55	+ class ArticleContainerComponent {
	56	+ article = { type: 'anyArticleType' };
	57	+ profile = { name: 'profile-name' };
	58	+ constructor() {
	59	+ }
	60	+ }
	61	+
	62	+ // uses the TestComponentBuilder instance to initialize the component
	63	+ createComponentFromClass(ArticleContainerComponent).then((fixture) => {
	64	+ // and here we can inspect and run the test assertions
	65	+ let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	66	+
	67	+ // assure the article object inside the ArticleView matches
	68	+ // the provided through the parent component
	69	+ expect(articleView.article.type).toEqual("anyArticleType");
	70	+ expect(articleView.profile.name).toEqual("profile-name");
	71	+
	72	+ // done needs to be called (it isn't really needed, as we can read in
	73	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	74	+ // because createAsync in ng-forward is not really async, but as the intention
	75	+ // here is write tests in angular 2 ways, this is recommended
	76	+ done();
	77	+ });
	78	+ });
	79	+
	80	+
	81	+ it("renders a article view which matches to the article type", done => {
	82	+ // NoosferoTinyMceArticle component created to check if it will be used
	83	+ // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
	84	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
	85	+ @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
	86	+ class TinyMceArticleView {
	87	+ @Input() article: any;
	88	+ @Input() profile: any;
	89	+ }
	90	+
	91	+ // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
	92	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
	93	+ class CustomArticleType {
	94	+ article = { type: 'TinyMceArticle' };
	95	+ profile = { name: 'profile-name' };
	96	+ constructor() {
	97	+ }
	98	+ }
	99	+ createComponentFromClass(CustomArticleType).then(fixture => {
	100	+ let myComponent: CustomArticleType = fixture.componentInstance;
	101	+ expect(myComponent.article.type).toEqual("TinyMceArticle");
	102	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
	103	+ done();
	104	+ });
	105	+ });
	106	+
	107	+ });
	108	+});
0	109	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,57 @@
	1	+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
	2	+import {ArticleBlogComponent} from "./types/blog/blog.component";
	3	+
	4	+/**
	5	+ * @ngdoc controller
	6	+ * @name ArticleDefaultView
	7	+ * @description
	8	+ * A default view for Noosfero Articles. If the specific article view is
	9	+ * not implemented, then this view is used.
	10	+ */
	11	+@Component({
	12	+ selector: 'noosfero-default-article',
	13	+ templateUrl: 'app/article/article.html'
	14	+})
	15	+export class ArticleDefaultViewComponent {
	16	+
	17	+ @Input() article: noosfero.Article;
	18	+ @Input() profile: noosfero.Profile;
	19	+
	20	+}
	21	+
	22	+/**
	23	+ * @ngdoc controller
	24	+ * @name ArticleView
	25	+ * @description
	26	+ * A dynamic view for articles. It uses the article type to replace
	27	+ * the default template with the custom article directive.
	28	+ */
	29	+@Component({
	30	+ selector: 'noosfero-article',
	31	+ template: 'not-used',
	32	+ directives: [ArticleDefaultViewComponent, ArticleBlogComponent]
	33	+})
	34	+@Inject("$element", "$scope", "$injector", "$compile")
	35	+export class ArticleViewComponent {
	36	+
	37	+ @Input() article: noosfero.Article;
	38	+ @Input() profile: noosfero.Profile;
	39	+ directiveName: string;
	40	+
	41	+ ngOnInit() {
	42	+ let specificDirective = 'noosfero' + this.article.type;
	43	+ this.directiveName = "noosfero-default-article";
	44	+ if (this.$injector.has(specificDirective + 'Directive')) {
	45	+ this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	46	+ }
	47	+ this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
	48	+ }
	49	+
	50	+ constructor(
	51	+ private $element: any,
	52	+ private $scope: ng.IScope,
	53	+ private $injector: ng.auto.IInjectorService,
	54	+ private $compile: ng.ICompileService) {
	55	+
	56	+ }
	57	+}
...	...
...	...	@@ -0,0 +1,23 @@
	1	+<div class="article">
	2	+ <div class="page-header">
	3	+ <h3 ng-bind="ctrl.article.title"></h3>
	4	+ </div>
	5	+
	6	+ <div class="sub-header clearfix">
	7	+ <div class="page-info pull-right small text-muted">
	8	+ <span class="time">
	9	+ <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at \| dateFormat"></span>
	10	+ </span>
	11	+ <span class="author" ng-if="ctrl.article.author">
	12	+ <i class="fa fa-user"></i>
	13	+ <a ui-sref="main.profile.home({profile: ctrl.article.author.identifier})">
	14	+ <span class="author-name" ng-bind="ctrl.article.author.name"></span>
	15	+ </a>
	16	+ </span>
	17	+ </div>
	18	+ </div>
	19	+
	20	+ <div class="page-body">
	21	+ <div ng-bind-html="ctrl.article.body"></div>
	22	+ </div>
	23	+</div>
...	...
...	...	@@ -0,0 +1,17 @@
	1	+.article {
	2	+ .page-info {
	3	+ .author {
	4	+ a {
	5	+ color: #b4bcc2;
	6	+ }
	7	+ }
	8	+ }
	9	+
	10	+ .page-header {
	11	+ margin-bottom: 5px;
	12	+ }
	13	+
	14	+ .sub-header {
	15	+ margin-bottom: 20px;
	16	+ }
	17	+}
...	...
...	...	@@ -0,0 +1,55 @@
	1	+import {quickCreateComponent} from "../../spec/helpers";
	2	+import {BasicEditorComponent} from "./basic-editor.component";
	3	+
	4	+
	5	+describe("Article BasicEditor", () => {
	6	+
	7	+ let $rootScope: ng.IRootScopeService;
	8	+ let $q: ng.IQService;
	9	+ let articleServiceMock: any;
	10	+ let profileServiceMock: any;
	11	+ let $state: any;
	12	+ let profile = { id: 1 };
	13	+ let notification: any;
	14	+
	15	+
	16	+ beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
	17	+ $rootScope = _$rootScope_;
	18	+ $q = _$q_;
	19	+ }));
	20	+
	21	+ beforeEach(() => {
	22	+ $state = jasmine.createSpyObj("$state", ["transitionTo"]);
	23	+ notification = jasmine.createSpyObj("notification", ["success"]);
	24	+ profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile"]);
	25	+ articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInProfile"]);
	26	+
	27	+ let getCurrentProfileResponse = $q.defer();
	28	+ getCurrentProfileResponse.resolve(profile);
	29	+
	30	+ let articleCreate = $q.defer();
	31	+ articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
	32	+
	33	+ profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
	34	+ articleServiceMock.createInProfile = jasmine.createSpy("createInProfile").and.returnValue(articleCreate.promise);
	35	+ });
	36	+
	37	+ it("create an article in the current profile when save", done => {
	38	+ let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
	39	+ component.save();
	40	+ $rootScope.$apply();
	41	+ expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
	42	+ expect(articleServiceMock.createInProfile).toHaveBeenCalledWith(profile, component.article);
	43	+ done();
	44	+ });
	45	+
	46	+ it("got to the new article page and display an alert when saving sucessfully", done => {
	47	+ let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
	48	+ component.save();
	49	+ $rootScope.$apply();
	50	+ expect($state.transitionTo).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
	51	+ expect(notification.success).toHaveBeenCalled();
	52	+ done();
	53	+ });
	54	+
	55	+});
...	...
...	...	@@ -0,0 +1,35 @@
	1	+import {StateConfig, Component, Inject, provide} from 'ng-forward';
	2	+import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
	3	+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
	4	+import {NotificationService} from "../shared/services/notification.service.ts";
	5	+
	6	+@Component({
	7	+ selector: 'article-basic-editor',
	8	+ templateUrl: "app/article/basic-editor.html",
	9	+ providers: [
	10	+ provide('articleService', { useClass: ArticleService }),
	11	+ provide('profileService', { useClass: ProfileService }),
	12	+ provide('notification', { useClass: NotificationService })
	13	+ ]
	14	+})
	15	+@Inject(ArticleService, ProfileService, "$state", NotificationService)
	16	+export class BasicEditorComponent {
	17	+
	18	+ article: noosfero.Article = <noosfero.Article>{};
	19	+
	20	+ constructor(private articleService: ArticleService,
	21	+ private profileService: ProfileService,
	22	+ private $state: ng.ui.IStateService,
	23	+ private notification: NotificationService) { }
	24	+
	25	+ save() {
	26	+ this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
	27	+ return this.articleService.createInProfile(profile, this.article);
	28	+ }).then((response: noosfero.RestResult<noosfero.Article>) => {
	29	+ let article = (<noosfero.Article>response.data);
	30	+ this.$state.transitionTo('main.profile.page', { page: article.path, profile: article.profile.identifier });
	31	+ this.notification.success("Good job!", "Article saved!");
	32	+ });
	33	+ }
	34	+
	35	+}
...	...