Showing 304 changed files Show diff stats
bower.json
gulp/build.js
gulp/conf.js
gulp/languages.js
gulp/server.js
gulp/styles.js
gulp/watch.js
karma.conf.js
layouts/angular-layout.html.erb
package.json
src/app/article/article-default-view-component.spec.ts
src/app/article/article-default-view.component.ts
src/app/article/article-view-component.spec.ts
src/app/article/article.html
src/app/article/basic-editor.component.spec.ts
src/app/article/basic-editor.component.ts
src/app/article/basic-editor.html
src/app/article/cms/article-editor/article-editor.component.spec.ts
src/app/article/cms/article-editor/article-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.component.ts
@@ -34,12 +34,21 @@
     "angular-dynamic-locale": "^0.1.30",
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
-    "angular-translate-interpolation-messageformat": "^2.10.0"
+    "angular-translate-interpolation-messageformat": "^2.10.0",
+  	"angular-bind-html-compile": "^1.2.1",
+	  "angular-click-outside": "^2.7.1",
+	  "ng-ckeditor": "^0.2.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
   },
   "overrides": {
+    "ng-ckeditor": {
+      "main": [
+        "ng-ckeditor.js",
+        "libs/ckeditor/ckeditor.js"
+      ]
+    },
     "bootstrap-sass": {
       "main": [
         "assets/stylesheets/_bootstrap.scss",
@@ -6,6 +6,7 @@ var rename = require(&#39;gulp-rename&#39;);
 var insert = require('gulp-insert');
 var merge = require('merge-stream');
 var conf = require('./conf');
+var languages = require('./languages');
 var themeName = conf.paths.theme.replace('-', ' ');
 themeName = themeName.charAt(0).toUpperCase() + themeName.slice(1);
@@ -16,25 +17,32 @@ var $ = require(&#39;gulp-load-plugins&#39;)({
 });
 gulp.task('partials', function () {
-  var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
-  conf.paths.allSources.forEach(function(src) {
-    srcPaths.push(path.join(src, '/app/**/*.html'));
+  var merged = merge();
+  ['app', conf.paths.plugins].forEach(function(partialPath) {
+    var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
+    conf.paths.allSources.forEach(function(src) {
+      srcPaths.push(path.join(src, partialPath, '/**/*.html'));
+    });
+    merged.add(gulp.src(srcPaths)
+      .pipe($.minifyHtml({
+        empty: true,
+        spare: true,
+        quotes: true
+      }))
+      .pipe($.angularTemplatecache('templateCacheHtml-'+partialPath+'.js', {
+        module: 'noosfero.templates.' + partialPath,
+        standalone: true,
+        root: partialPath
+      }))
+      .pipe(gulp.dest(conf.paths.tmp + '/partials/')));
   });
-  return gulp.src(srcPaths)
-    .pipe($.minifyHtml({
-      empty: true,
-      spare: true,
-      quotes: true
-    }))
-    .pipe($.angularTemplatecache('templateCacheHtml.js', {
-      module: 'noosferoApp',
-      root: 'app'
-    }))
-    .pipe(gulp.dest(conf.paths.tmp + '/partials/'));
+  return merged;
 });
 gulp.task('html', ['inject', 'partials'], function () {
-  var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
+  var partialsInjectFile = gulp.src([
+    path.join(conf.paths.tmp, '/partials/templateCacheHtml-app.js'),
+    path.join(conf.paths.tmp, '/partials/templateCacheHtml-plugins.js')], { read: false });
   var partialsInjectOptions = {
     starttag: '<!-- inject:partials -->',
     ignorePath: path.join(conf.paths.tmp, '/partials'),
@@ -73,6 +81,7 @@ gulp.task(&#39;html&#39;, [&#39;inject&#39;, &#39;partials&#39;], function () {
     .pipe($.useref())
     .pipe($.revReplace({prefix: noosferoThemePrefix}))
     .pipe(htmlFilter)
+    .pipe($.replace('/bower_components/ng-ckeditor/libs/ckeditor/', noosferoThemePrefix + 'ng-ckeditor/libs/ckeditor/'))
     .pipe($.minifyHtml({
       empty: true,
       spare: true,
@@ -93,6 +102,11 @@ gulp.task(&#39;fonts&#39;, function () {
     .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
 });
+gulp.task('ckeditor', function () {
+  conf.wiredep.exclude.push(/bower_components\/ng-ckeditor\/libs\/ckeditor/); // exclude ckeditor from build to improve performance
+  return gulp.src(['bower_components/ng-ckeditor/**/*']).pipe(gulp.dest(path.join(conf.paths.dist, '/ng-ckeditor')));
+});
+
 gulp.task('locale', function () {
   return gulp.src([
     path.join("bower_components/angular-i18n", '*.js'),
@@ -124,6 +138,10 @@ gulp.task(&#39;clean-docs&#39;, [], function() {
     return $.del([path.join(conf.paths.docs, '/')]);
 });
+gulp.task('plugin-languages', ['locale'], function() {
+  return languages.pluginLanguages(conf.paths.dist);
+});
+
 gulp.task('noosfero', ['html'], function () {
     var layouts = gulp.src('layouts/**/*')
       .pipe(gulp.dest(path.join(conf.paths.dist, "layouts")));
@@ -136,4 +154,4 @@ gulp.task(&#39;noosfero&#39;, [&#39;html&#39;], function () {
     return merge(layouts, theme, index);
 });
-gulp.task('build', ['html', 'fonts', 'other', 'locale', 'noosfero']);
+gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero']);
@@ -15,11 +15,13 @@ var path = require(&#39;path&#39;);
  */
 exports.paths = {
   src: 'src',
+  plugins: 'plugins',
   dist: 'dist',
   tmp: '.tmp',
   e2e: 'e2e',
   docs: 'docs',
-  themes: 'themes'
+  themes: 'themes',
+  languages: 'languages'
 };
 exports.configTheme = function(theme) {
   exports.paths.theme = theme || "angular-default";
@@ -0,0 +1,29 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var merge = require('merge-stream');
+var conf = require('./conf');
+var mergeJson = require('gulp-merge-json');
+var glob = require("glob");
+
+exports.pluginLanguages = function(dest) {
+  var merged = merge();
+  glob(path.join(conf.paths.src, conf.paths.languages, "*.json"), function (er, files) {
+    files.forEach(function(file) {
+      merged.add(exports.pluginLanguage(file, dest));
+    });
+  });
+  return merged;
+}
+
+exports.pluginLanguage = function(file, dest) {
+  var language = file.split('/').pop().replace('\.json','');
+  return gulp.src(path.join(conf.paths.src, '**', conf.paths.languages, language+'.json'))
+    .pipe(mergeJson(path.join(conf.paths.languages, language+'.json')))
+    .pipe(gulp.dest(dest))
+}
+
+gulp.task('serve-languages', function() {
+  return exports.pluginLanguages(path.join(conf.paths.tmp, '/serve'));
+});
@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({
   selector: '[ng-app]'// Only needed for angular apps
 }));
-gulp.task('serve', ['watch'], function () {
+gulp.task('serve', ['serve-languages', 'watch'], function () {
   var srcPaths = [path.join(conf.paths.tmp, '/serve')];
   conf.paths.allSources.reverse().forEach(function(src) {
     srcPaths.push(src);
@@ -31,6 +31,7 @@ var buildStyles = function() {
   ];
   conf.paths.allSources.forEach(function(src) {
     srcPaths.push(path.join(src, '/app/**/*.scss'));
+    srcPaths.push(path.join(src, conf.paths.plugins, '/**/*.scss'));
   });
   var injectFiles = gulp.src(srcPaths, { read: false });
@@ -3,6 +3,7 @@
 var path = require('path');
 var gulp = require('gulp');
 var conf = require('./conf');
+var languages = require('./languages');
 var browserSync = require('browser-sync');
@@ -14,10 +15,13 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
   gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
-  gulp.watch([
-    path.join(conf.paths.src, '/app/**/*.css'),
-    path.join(conf.paths.src, '/app/**/*.scss')
-  ], function(event) {
+  var stylePaths = [path.join(conf.paths.src, conf.paths.plugins, '/**/*.scss')];
+  conf.paths.allSources.forEach(function(src) {
+    stylePaths.push(path.join(src, '/app/**/*.css'));
+    stylePaths.push(path.join(src, '/app/**/*.scss'));
+  });
+
+  gulp.watch(stylePaths, function(event) {
     if(isOnlyChange(event)) {
       gulp.start('styles-reload');
     } else {
@@ -33,9 +37,14 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
     }
   });
+  gulp.watch(path.join(conf.paths.src, '**', conf.paths.languages, '*.json'), function(event) {
+      languages.pluginLanguage(event.path, path.join(conf.paths.tmp, '/serve'));
+  });
+
   var watchPaths = [];
   conf.paths.allSources.forEach(function(src) {
     watchPaths.push(path.join(src, '/app/**/*.html'));
+    watchPaths.push(path.join(src, conf.paths.plugins, '/**/*.html'));
   });
   gulp.watch(watchPaths, function(event) {
     browserSync.reload(event.path);
@@ -49,7 +49,7 @@ var _ = require(&#39;lodash&#39;);
 var wiredep = require('wiredep');
 var pathSrcHtml = [
-    path.join('./src/app/**/*.html')
+    path.join('./src/**/*.html')
 ];
 var glob = require("glob");
@@ -126,6 +126,10 @@ module.exports = function (config) {
     };
+    if(config.grep) {
+      configuration.client = { args: ['--grep', config.grep] };
+    }
+
     if (coverage) {
         /*configuration.webpack = {
-<% if params[:angular_theme_old] || request.fullpath.start_with?('/myprofile') %>
+<% if params[:angular_theme_old] %>
   <%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>
 <% else %>
   <%= from_theme_include(current_theme, "index") %>
@@ -49,6 +49,7 @@
     "gulp-insert": "^0.5.0",
     "gulp-inject": "~3.0.0",
     "gulp-load-plugins": "~0.10.0",
+    "gulp-merge-json": "^0.4.0",
     "gulp-minify-css": "~1.2.1",
     "gulp-minify-html": "~1.0.4",
     "gulp-ng-annotate": "~1.1.0",
 import {Input, provide, Component} from 'ng-forward';
 import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
+import {ComponentTestHelper, createClass} from './../../spec/component-test-helper';
 import * as helpers from "../../spec/helpers";
@@ -9,111 +10,114 @@ const htmlTemplate: string = &#39;&lt;noosfero-article [article]=&quot;ctrl.article&quot; [profil
 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],
-                providers: [
-                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
-                    helpers.provideFilters("translateFilter"),
-                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
-                ]
-            })
-            class ArticleContainerComponent {
-                article = { type: 'anyArticleType' };
-                profile = { name: 'profile-name' };
+    // 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"));
+
+    describe("Article Default View Component", () => {
+        let helper: ComponentTestHelper<ArticleDefaultViewComponent>;
+        const defaultViewTemplate: string = '<noosfero-default-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-default-article>';
+        let notificationService = helpers.mocks.notificationService;
+        let articleService: any = helpers.mocks.articleService;
+        let article = <noosfero.Article>{
+            id: 1,
+            profile: {
+                identifier: "1"
             }
+        };
+        let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
+        let providers = [
+            provide('$state', { useValue: state }),
+            provide('ArticleService', { useValue: articleService }),
+            helpers.createProviderToValue('NotificationService', notificationService),
+        ].concat(helpers.provideFilters("translateFilter"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: defaultViewTemplate,
+                directives: [ArticleDefaultViewComponent],
+                providers: providers,
+                properties: {
+                    article: article
+                }
+            });
+            helper = new ComponentTestHelper<ArticleDefaultViewComponent>(cls, done);
+        });
-            helpers.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);
+        function getArticle() {
+            return this.article;
+        }
-                // 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("it should delete article when delete is activated", () => {
+            expect(helper.component.article).toEqual(article);
+            // Spy the state service
+            doDeleteArticle();
+            expect(state.transitionTo).toHaveBeenCalled();
+        });
+        it("hide button to delete article when user doesn't have permission", () => {
+            expect(helper.find(".article-toolbar .delete-article").attr('style')).toEqual("display: none; ");
         });
-        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],
-                providers: [
-                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
-                    helpers.provideFilters("translateFilter"),
-                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
-                ]
-            })
-            class ArticleContainerComponent {
-                article = { type: 'anyArticleType' };
-                profile = { name: 'profile-name' };
-            }
+        it("hide button to edit article when user doesn't have permission", () => {
+            expect(helper.find(".article-toolbar .edit-article").attr('style')).toEqual("display: none; ");
+        });
-            // uses the TestComponentBuilder instance to initialize the component
-            helpers.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("show button to edit article when user has permission", () => {
+            (<any>helper.component['article'])['permissions'] = ['allow_edit'];
+            helper.detectChanges();
+            expect(helper.find(".article-toolbar .edit-article").attr('style')).toEqual('');
         });
+        it("show button to delete article when user has permission", () => {
+            (<any>helper.component['article'])['permissions'] = ['allow_delete'];
+            helper.detectChanges();
+            expect(helper.find(".article-toolbar .delete-article").attr('style')).toEqual('');
+        });
-        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;
-            }
+        /**
+         * Execute the delete method on the target component
+         */
+        function doDeleteArticle() {
+            // Create a mock for the notification service confirmation
+            spyOn(helper.component.notificationService, 'confirmation').and.callFake(function(params: Function) {
-            // 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' };
-            }
-            helpers.createComponentFromClass(CustomArticleType).then(fixture => {
-                let myComponent: CustomArticleType = fixture.componentInstance;
-                expect(myComponent.article.type).toEqual("TinyMceArticle");
-                expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
-                done();
             });
-        });
+            // Create a mock for the ArticleService removeArticle method
+            spyOn(helper.component.articleService, 'remove').and.callFake(function(param: noosfero.Article) {
+                return {
+                    catch: () => { }
+                };
+            });
+            helper.component.delete();
+            expect(notificationService.confirmation).toHaveBeenCalled();
+            helper.component.doDelete();
+            expect(articleService.remove).toHaveBeenCalled();
+
+            // After the component delete method execution, fire the
+            // ArticleEvent.removed event
+            simulateRemovedEvent();
+        }
+
+        /**
+         * Simulate the Notification Service confirmation and ArticleService 
+         * notifyArticleRemovedListeners event
+         */
+        function simulateRemovedEvent() {
+            helper.component.notificationService["confirmation"]({ title: "Title", message: "Message" }, () => { });
+            helper.component.articleService["modelRemovedEventEmitter"].next(article);
+        }
     });
+
 });
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
 import {ArticleBlogComponent} from "./types/blog/blog.component";
 import {CommentsComponent} from "./comment/comments.component";
+import {MacroDirective} from "./macro/macro.directive";
+import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
+import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
+import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service";
+import { NotificationService } from "./../shared/services/notification.service";
+import {PermissionDirective} from '../shared/components/permission/permission.directive';
 /**
  * @ngdoc controller
@@ -11,13 +17,37 @@ import {CommentsComponent} from &quot;./comment/comments.component&quot;;
  */
 @Component({
     selector: 'noosfero-default-article',
-    templateUrl: 'app/article/article.html'
+    templateUrl: 'app/article/article.html',
+    directives: [PermissionDirective]
 })
+@Inject("$state", ArticleService, NotificationService)
 export class ArticleDefaultViewComponent {
     @Input() article: noosfero.Article;
     @Input() profile: noosfero.Profile;
+    constructor(private $state: ng.ui.IStateService, public articleService: ArticleService, public notificationService: NotificationService) {
+        // Subscribe to the Article Removed Event
+        this.articleService.subscribeToModelRemoved((article: noosfero.Article) => {
+            if (this.article.parent) {
+                this.$state.transitionTo('main.profile.page', { page: this.article.parent.path, profile: this.article.profile.identifier });
+            } else {
+                this.$state.transitionTo('main.profile.info', { profile: this.article.profile.identifier });
+            }
+            this.notificationService.success({ title: "article.remove.success.title", message: "article.remove.success.message" });
+        });
+    }
+
+    delete() {
+        this.notificationService.confirmation({ title: "article.remove.confirmation.title", message: "article.remove.confirmation.message" }, () => {
+            this.doDelete();
+        });
+
+    }
+
+    doDelete() {
+        this.articleService.remove(this.article);
+    }
 }
 /**
@@ -30,7 +60,9 @@ export class ArticleDefaultViewComponent {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent,
+        CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent,
+        ArticleContentHotspotComponent]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -40,7 +72,8 @@ export class ArticleViewComponent {
     directiveName: string;
     ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = 'noosfero' + articleType;
         this.directiveName = "noosfero-default-article";
         if (this.$injector.has(specificDirective + 'Directive')) {
             this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -53,6 +86,6 @@ export class ArticleViewComponent {
         private $scope: ng.IScope,
         private $injector: ng.auto.IInjectorService,
         private $compile: ng.ICompileService) {
-
     }
+
 }
@@ -0,0 +1,124 @@
+import {Input, provide, Component} from 'ng-forward';
+import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
+
+import * as helpers 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", () => {
+
+    // 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"));
+
+    describe("ArticleView Component", () => {
+        let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
+        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],
+                providers: [
+                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
+                    helpers.provideFilters("translateFilter"),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                    helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
+                    helpers.createProviderToValue('$state', state)
+                ]
+            })
+            class ArticleContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+            }
+
+            helpers.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],
+                providers: [
+                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
+                    helpers.provideFilters("translateFilter"),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                    helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
+                    helpers.createProviderToValue('$state', state)
+                ]
+            })
+            class ArticleContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            helpers.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' };
+            }
+            helpers.createComponentFromClass(CustomArticleType).then(fixture => {
+                let myComponent: CustomArticleType = fixture.componentInstance;
+                expect(myComponent.article.type).toEqual("TinyMceArticle");
+                expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
+                done();
+            });
+        });
+
+    });
+});
@@ -4,6 +4,15 @@
   </div>
   <div class="sub-header clearfix">
+    <div class="article-toolbar">
+      <a href="#" permission="ctrl.article.permissions" permission-action="allow_edit" class="btn btn-default btn-xs edit-article" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
+        <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" | translate}}
+      </a>
+      <a href="#" permission="ctrl.article.permissions" permission-action="allow_delete" class="btn btn-default btn-xs delete-article" ng-click="ctrl.delete()">
+        <i class="fa fa-trash-o fa-fw fa-lg" ng-click="ctrl.delete()"></i> {{"article.actions.delete" | translate}}
+      </a>
+      <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
+    </div>
     <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>
@@ -16,9 +25,9 @@
       </span>
     </div>
   </div>
-
+  <noosfero-hotspot-article-content [article]="ctrl.article"></noosfero-hotspot-article-content>
   <div class="page-body">
-    <div ng-bind-html="ctrl.article.body"></div>
+    <div bind-html-compile="ctrl.article.body"></div>
   </div>
   <noosfero-comments [article]="ctrl.article"></noosfero-comments>
@@ -0,0 +1,28 @@
+import {ArticleEditorComponent} from './article-editor.component';
+import {BasicEditorComponent} from "../basic-editor/basic-editor.component";
+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
+import * as helpers from "../../../../spec/helpers";
+
+const htmlTemplate: string = '<article-editor [article]="ctrl.article"></article-editor>';
+
+describe("Components", () => {
+    describe("Article Editor Component", () => {
+
+        let helper: ComponentTestHelper<ArticleEditorComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: { type: "TextArticle" } };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ArticleEditorComponent, BasicEditorComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<ArticleEditorComponent>(cls, done);
+        });
+
+        it("replace element with article basic editor when type is TextArticle", () => {
+            expect(helper.find("article-basic-editor").length).toEqual(1);
+        });
+    });
+});
@@ -0,0 +1,27 @@
+import {Component, Input, Inject} from 'ng-forward';
+
+@Component({
+    selector: 'article-editor',
+    template: "not-used"
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleEditorComponent {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) { }
+
+    ngOnInit() {
+        let articleType = this.article && this.article.type ? this.article.type.replace(/::/, '') : "TextArticle";
+        let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
+        let directiveName = "article-basic-editor";
+        if (specificDirective !== "articleEditor" && this.$injector.has(specificDirective + 'Directive')) {
+            directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+        this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-editor',
+    templateUrl: "app/article/cms/basic-editor/basic-editor.html"
+})
+export class BasicEditorComponent {
+
+    @Input() article: noosfero.Article;
+}
@@ -0,0 +1,10 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="ctrl.article.name">
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
+    <html-editor [(value)]="ctrl.article.body"></html-editor>
+  </div>
+</form>
@@ -0,0 +1,11 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-options',
+    templateUrl: "app/article/cms/basic-options/basic-options.html"
+})
+export class BasicOptionsComponent {
+
+    @Input() article: noosfero.Article;
+
+}
@@ -0,0 +1,15 @@
+<div class="side-options">
+  <div class="visibility panel panel-default">
+    <div class="panel-heading">{{"article.basic_editor.visibility" | translate}}</div>
+    <div class="panel-body">
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="true"> 
+        <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" | translate}}
+      </div>
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="false">
+        <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" | translate}}
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,15 @@
+.side-options {
+  margin-top: 25px;
+
+  .visibility {
+    .panel-heading {
+      background-color: transparent;
+      font-weight: bold;
+    }
+    .panel-body {
+      i {
+        color: #A5A5A5;
+      }
+    }
+  }
+}
@@ -0,0 +1,85 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {CmsComponent} from "./cms.component";
+
+
+describe("Article Cms", () => {
+
+    let $rootScope: ng.IRootScopeService;
+    let $q: ng.IQService;
+    let articleServiceMock: any;
+    let profileServiceMock: any;
+    let $state: any;
+    let $stateParams: any;
+    let $window: any;
+    let profile = { id: 1 };
+    let notification: any;
+
+
+    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+        $rootScope = _$rootScope_;
+        $q = _$q_;
+    }));
+
+    beforeEach(() => {
+        $window = jasmine.createSpyObj("$window", ["back"]);
+        $state = jasmine.createSpyObj("$state", ["go"]);
+        notification = jasmine.createSpyObj("notification", ["success"]);
+        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["setCurrentProfileByIdentifier"]);
+        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInParent", "updateArticle", "get"]);
+
+        $stateParams = { profile: "profile" };
+
+        let setCurrentProfileByIdentifierResponse = $q.defer();
+        setCurrentProfileByIdentifierResponse.resolve(profile);
+
+        let articleCreate = $q.defer();
+        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
+
+        let articleGet = $q.defer();
+        articleGet.resolve({ data: { path: "parent-path", profile: { identifier: "profile" } } });
+
+        profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(setCurrentProfileByIdentifierResponse.promise);
+        articleServiceMock.createInParent = jasmine.createSpy("createInParent").and.returnValue(articleCreate.promise);
+        articleServiceMock.updateArticle = jasmine.createSpy("updateArticle").and.returnValue(articleCreate.promise);
+        articleServiceMock.get = jasmine.createSpy("get").and.returnValue(articleGet.promise);
+    });
+
+    it("create an article in the current profile when save", done => {
+        $stateParams['parent_id'] = 1;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
+        expect(articleServiceMock.createInParent).toHaveBeenCalledWith(1, component.article);
+        done();
+    });
+
+    it("got to the new article page and display an alert when saving sucessfully", done => {
+        $stateParams['parent_id'] = 1;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect($state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
+        expect(notification.success).toHaveBeenCalled();
+        done();
+    });
+
+    it("go back when cancel article edition", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        $window.history = { back: jasmine.createSpy('back') };
+        component.cancel();
+        expect($window.history.back).toHaveBeenCalled();
+        done();
+    });
+
+    it("edit existing article when save", done => {
+        $stateParams['parent_id'] = null;
+        $stateParams['id'] = 2;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(articleServiceMock.updateArticle).toHaveBeenCalledWith(component.article);
+        done();
+    });
+
+});
@@ -0,0 +1,77 @@
+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";
+import {BasicOptionsComponent} from './basic-options/basic-options.component';
+import {BasicEditorComponent} from './basic-editor/basic-editor.component';
+import {ArticleEditorComponent} from './article-editor/article-editor.component';
+
+@Component({
+    selector: 'article-cms',
+    templateUrl: "app/article/cms/cms.html",
+    providers: [
+        provide('articleService', { useClass: ArticleService }),
+        provide('profileService', { useClass: ProfileService }),
+        provide('notification', { useClass: NotificationService })
+    ],
+    directives: [ArticleEditorComponent, BasicOptionsComponent, BasicEditorComponent]
+})
+@Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
+export class CmsComponent {
+
+    article: noosfero.Article;
+    parent: noosfero.Article = <noosfero.Article>{};
+
+    id: number;
+    parentId: number;
+    profileIdentifier: string;
+
+    constructor(private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $state: ng.ui.IStateService,
+        private notification: NotificationService,
+        private $stateParams: ng.ui.IStateParamsService,
+        private $window: ng.IWindowService) {
+
+        this.parentId = this.$stateParams['parent_id'];
+        this.profileIdentifier = this.$stateParams["profile"];
+        this.id = this.$stateParams['id'];
+
+        if (this.parentId) {
+            this.articleService.get(this.parentId).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.parent = result.data;
+            });
+        }
+        if (this.id) {
+            this.articleService.get(this.id).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.article = result.data;
+                this.article.name = this.article.title; // FIXME
+            });
+        } else {
+            this.article = <noosfero.Article>{ type: this.$stateParams['type'] || "TextArticle", published: true };
+        }
+    }
+
+    save() {
+        this.profileService.setCurrentProfileByIdentifier(this.profileIdentifier).then((profile: noosfero.Profile) => {
+            if (this.id) {
+                return this.articleService.updateArticle(this.article);
+            } else if (this.parentId) {
+                return this.articleService.createInParent(this.parentId, this.article);
+            } else {
+                return this.articleService.createInProfile(profile, this.article);
+            }
+        }).then((response: noosfero.RestResult<noosfero.Article>) => {
+            let article = (<noosfero.Article>response.data);
+            this.$state.go('main.profile.page', { page: article.path, profile: article.profile.identifier });
+            this.notification.success({ title: "article.basic_editor.success.title", message: "article.basic_editor.success.message" });
+        }).catch(() => {
+            this.notification.error({ message: "article.basic_editor.save.failed" });
+        });
+    }
+
+    cancel() {
+        this.$window.history.back();
+    }
+
+}
@@ -0,0 +1,18 @@
+<div class="cms">
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <article-editor ng-if="vm.article" [article]="vm.article"></article-editor>
+    </div>
+    <div class="col-md-3">
+      <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button>
+      <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,4 @@
+.cms {
+  @extend .container-fluid;
+  padding: 0 1%;
+}
@@ -0,0 +1,3 @@
+<div class="reply-tooltip">
+  <noosfero-comment [comment]="ctrl.comment.reply_of" [article]="ctrl.article" [display-actions]="false" [display-replies]="false"></noosfero-comment>
+</div>
 import {Provider, provide, Component} from 'ng-forward';
 import * as helpers from "../../../spec/helpers";
-
 import {CommentComponent} from './comment.component';
 const htmlTemplate: string = '<noosfero-comment [article]="ctrl.article" [comment]="ctrl.comment"></noosfero-comment>';
@@ -8,37 +7,108 @@ const htmlTemplate: string = &#39;&lt;noosfero-comment [article]=&quot;ctrl.article&quot; [commen
 describe("Components", () => {
     describe("Comment Component", () => {
+        let properties: any;
+        let notificationService = helpers.mocks.notificationService;
+        let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
+
         beforeEach(angular.mock.module("templates"));
+        beforeEach(() => {
+            properties = {
+                article: { id: 1, accept_comments: true },
+                comment: { title: "title", body: "body" }
+            };
+        });
+
+        function createComponent() {
+            let providers = [
+                helpers.createProviderToValue('NotificationService', notificationService),
+                helpers.createProviderToValue("CommentService", commentService)
+            ].concat(helpers.provideFilters("translateFilter"));
-        @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: helpers.provideFilters("translateFilter") })
-        class ContainerComponent {
-            article = { id: 1 };
-            comment = { title: "title", body: "body" };
+            @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
+            class ContainerComponent {
+                article = properties['article'];
+                comment = properties['comment'];
+            }
+            return helpers.createComponentFromClass(ContainerComponent);
         }
         it("render a comment", done => {
-            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+            createComponent().then(fixture => {
                 expect(fixture.debugElement.queryAll(".comment").length).toEqual(1);
                 done();
             });
         });
         it("not render a post comment tag in the beginning", done => {
-            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+            createComponent().then(fixture => {
                 expect(fixture.debugElement.queryAll("noosfero-post-comment").length).toEqual(0);
                 done();
             });
         });
-        it("render a post comment tag when click in reply", done => {
-            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+        it("set show reply to true when click reply", done => {
+            createComponent().then(fixture => {
                 let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 component.reply();
-                fixture.debugElement.getLocal("$rootScope").$apply();
-                expect(fixture.debugElement.queryAll("noosfero-post-comment").length).toEqual(1);
+                expect(component.showReply()).toBeTruthy("Reply was expected to be true");
+                done();
+            });
+        });
+
+        it("show reply relies on current comment __showReply attribute", done => {
+            createComponent().then(fixture => {
+                let component = fixture.debugElement.componentViewChildren[0];
+                component.componentInstance.comment.__showReply = false;
+                expect(component.componentInstance.showReply()).toEqual(false);
                 done();
             });
         });
+        it("display reply button", done => {
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("not display reply button when accept_comments is false", done => {
+            properties['article']['accept_comments'] = false;
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(0);
+                done();
+            });
+        });
+
+        it("does not show the Remove button if user is not allowed to remove", done => {
+            createComponent().then(fixture => {
+                let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.allowRemove = () => false;
+                fixture.detectChanges();
+                expect(fixture.debugElement.queryAll("a.action.remove").length).toEqual(0);
+                done();
+            });
+        });
+
+        it("shows the Remove button if user is allowed to remove", done => {
+            createComponent().then(fixture => {
+                let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.allowRemove = () => true;
+                fixture.detectChanges();
+                expect(fixture.debugElement.queryAll("a.action.remove").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("call comment service to remove comment", done => {
+            notificationService.confirmation = (params: any, func: Function) => { func(); };
+            commentService.removeFromArticle = jasmine.createSpy("removeFromArticle").and.returnValue(Promise.resolve());
+            createComponent().then(fixture => {
+                let component = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.remove();
+                expect(commentService.removeFromArticle).toHaveBeenCalled();
+                done();
+            });
+        });
     });
 });
-import { Input, Component } from 'ng-forward';
+import { Inject, Input, Component, Output, EventEmitter } from 'ng-forward';
+import { PostCommentComponent } from "./post-comment/post-comment.component";
+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
+import { NotificationService } from "../../shared/services/notification.service";
 @Component({
     selector: 'noosfero-comment',
+    outputs: ['commentRemoved'],
     templateUrl: 'app/article/comment/comment.html'
 })
+@Inject(CommentService, NotificationService)
 export class CommentComponent {
-    @Input() comment: noosfero.Comment;
+    @Input() comment: noosfero.CommentViewModel;
     @Input() article: noosfero.Article;
+    @Input() displayActions = true;
+    @Input() displayReplies = true;
+    @Output() commentRemoved: EventEmitter<Comment> = new EventEmitter<Comment>();
-    showReply: boolean = false;
+    showReply() {
+        return this.comment && this.comment.__show_reply === true;
+    }
+
+    constructor(private commentService: CommentService,
+        private notificationService: NotificationService) { }
     reply() {
-        this.showReply = true;
+        this.comment.__show_reply = !this.comment.__show_reply;
+    }
+
+    allowRemove() {
+        return true;
+    }
+
+    remove() {
+        this.notificationService.confirmation({ title: "comment.remove.confirmation.title", message: "comment.remove.confirmation.message" }, () => {
+            this.commentService.removeFromArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
+                this.commentRemoved.next(this.comment);
+                this.notificationService.success({ title: "comment.remove.success.title", message: "comment.remove.success.message" });
+            });
+        });
     }
 }
@@ -9,17 +9,24 @@
       <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
         <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
       </a>
+      <span class="reply-of" ng-if="ctrl.comment.reply_of" uib-tooltip-template="'app/article/comment/comment-reply-tooltip.html'">
+        <i class="fa fa-fw fa-mail-forward"></i>
+        <span class="author">{{ctrl.comment.reply_of.author.name}}</span>
+      </span>
       <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span>
-      <a href="#" (click)="ctrl.reply()">
-        <span class="pull-right small text-muted">
-          {{"comment.reply" | translate}}
-        </span>
-      </a>
     </div>
     <div class="title">{{ctrl.comment.title}}</div>
     <div class="body">{{ctrl.comment.body}}</div>
+    <div class="actions" ng-if="ctrl.displayActions">
+      <a href="#" (click)="ctrl.reply()" class="action small text-muted reply" ng-if="ctrl.article.accept_comments">
+        <span class="bullet-separator">•</span>
+        {{"comment.reply" | translate}}
+      </a>
+      <a href="#" (click)="ctrl.remove()" class="action small text-muted remove" ng-if="ctrl.allowRemove()">
+        <span class="bullet-separator">•</span>
+        {{"comment.remove" | translate}}
+      </a>
+    </div>
   </div>
-
-  <noosfero-post-comment ng-if="ctrl.showReply" [article]="ctrl.article" [reply-of]="ctrl.comment"></noosfero-post-comment>
-
+  <noosfero-comments [show-form]="ctrl.showReply()" [article]="ctrl.article" [parent]="ctrl.comment" ng-if="ctrl.displayReplies"></noosfero-comments>
 </div>
@@ -5,16 +5,43 @@
       @extend .text-muted;
       @extend .small;
       margin-left: 8px;
+      font-size: 12px;
     }
     .title {
       font-weight: bold;
     }
+    .actions {
+      .action {
+        text-decoration: none;
+        &:first-child {
+          .bullet-separator {
+            display: none;
+          }
+        }
+        .bullet-separator {
+          font-size: 8px;
+          vertical-align: middle;
+          margin: 3px;
+          color: #B6C2CA;
+        }
+      }
+    }
     .media-left {
       min-width: 40px;
     }
     .media-body {
-      background-color: #F9F9F9;
-      padding: 10px;
+      padding: 0 10px 10px 0;
+      .reply-of {
+        font-size: 12px;
+        color: #B5B5B5;
+        margin-left: 5px;
+        i {
+          font-size: 10px;
+        }
+      }
+      h4 {
+        font-size: 16px;
+      }
     }
     noosfero-profile-image {
       img {
@@ -28,5 +55,24 @@
         font-size: 1.7em;
       }
     }
+    // Limit identation of replies
+    .comments {
+      margin-left: 30px;
+      .comments .comments {
+        margin-left: 0px;
+        .comment {
+          margin-left: 0px;
+        }
+      }
+    }
+    .tooltip-inner {
+      max-width: 350px;
+      text-align: left;
+      .reply-tooltip {
+        .comment {
+          margin: 5px;
+        }
+      }
+    }
   }
 }
@@ -17,38 +17,91 @@ describe(&quot;Components&quot;, () =&gt; {
         commentService.getByArticle = jasmine.createSpy("getByArticle")
             .and.returnValue(helpers.mocks.promiseResultTemplate({ data: comments }));
-        let providers = [
-            new Provider('CommentService', { useValue: commentService }),
-            new Provider('NotificationService', { useValue: helpers.mocks.notificationService })
-        ].concat(helpers.provideFilters("translateFilter"));
-
-        @Component({ selector: 'test-container-component', directives: [CommentsComponent], template: htmlTemplate, providers: providers })
-        class ContainerComponent {
-            article = { id: 1 };
+        let properties = { article: { id: 1 }, parent: <any>null };
+        function createComponent() {
+            let providers = [
+                helpers.createProviderToValue('CommentService', commentService),
+                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
+            ].concat(helpers.provideFilters("translateFilter"));
+
+            return helpers.quickCreateComponent({
+                providers: providers,
+                directives: [CommentsComponent],
+                template: htmlTemplate,
+                properties: properties
+            });
         }
+
         it("render comments associated to an article", done => {
-            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+            createComponent().then(fixture => {
                 expect(fixture.debugElement.queryAll("noosfero-comment").length).toEqual(2);
                 done();
             });
         });
         it("render a post comment tag", done => {
-            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+            createComponent().then(fixture => {
                 expect(fixture.debugElement.queryAll("noosfero-post-comment").length).toEqual(1);
                 done();
             });
         });
-        it("update comments list when receive an event", done => {
-            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$emit(PostCommentComponent.EVENT_COMMENT_RECEIVED, { id: 1 });
-                fixture.debugElement.getLocal("$rootScope").$apply();
+        it("update comments list when receive an reply", done => {
+            properties.parent = { id: 3 };
+            createComponent().then(fixture => {
+                (<CommentsComponent>fixture.debugElement.componentViewChildren[0].componentInstance).commentAdded(<noosfero.Comment>{ id: 1, reply_of: { id: 3 } });
+                fixture.detectChanges();
                 expect(fixture.debugElement.queryAll("noosfero-comment").length).toEqual(3);
                 done();
             });
         });
+        it("load comments for next page", done => {
+            createComponent().then(fixture => {
+                let headers = jasmine.createSpy("headers").and.returnValue(3);
+                commentService.getByArticle = jasmine.createSpy("getByArticle")
+                    .and.returnValue(helpers.mocks.promiseResultTemplate({ data: { id: 4 }, headers: headers }));
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.loadNextPage();
+                expect(component['page']).toEqual(3);
+                expect(component.comments.length).toEqual(3);
+                expect(component['total']).toEqual(3);
+                done();
+            });
+        });
+
+        it("not display more when there is no more comments to load", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component['total'] = 0;
+                component.parent = null;
+                expect(component.displayMore()).toBeFalsy();
+                done();
+            });
+        });
+
+        it("remove comment when calling commentRemoved", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let comment = { id: 1 };
+                component.comments = <any>[comment];
+                component.commentRemoved(<any>comment);
+                expect(component.comments).toEqual([]);
+                done();
+            });
+        });
+
+        it("do nothing when call commentRemoved with a comment that doesn't belongs to the comments list", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let comment = { id: 1 };
+                component.comments = <any>[comment];
+                component.commentRemoved(<any>{ id: 2 });
+                expect(component.comments).toEqual([comment]);
+                done();
+            });
+        });
     });
 });
@@ -6,23 +6,81 @@ import { CommentComponent } from &quot;./comment.component&quot;;
 @Component({
     selector: 'noosfero-comments',
     templateUrl: 'app/article/comment/comments.html',
-    directives: [PostCommentComponent, CommentComponent]
+    directives: [PostCommentComponent, CommentComponent],
+    outputs: ['commentAdded']
 })
-@Inject(CommentService, "$rootScope")
+@Inject(CommentService, "$scope")
 export class CommentsComponent {
-    comments: noosfero.Comment[] = [];
+    comments: noosfero.CommentViewModel[] = [];
+    @Input() showForm = true;
     @Input() article: noosfero.Article;
+    @Input() parent: noosfero.CommentViewModel;
+    protected page = 1;
+    protected perPage = 5;
+    protected total = 0;
-    constructor(private commentService: CommentService, private $rootScope: ng.IScope) {
-        $rootScope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => {
-            this.comments.push(comment);
+    newComment = <noosfero.Comment>{};
+
+    constructor(protected commentService: CommentService, private $scope: ng.IScope) { }
+
+    ngOnInit() {
+        if (this.parent) {
+            this.comments = this.parent.replies;
+        } else {
+            this.loadNextPage();
+        }
+    }
+
+    commentAdded(comment: noosfero.CommentViewModel): void {
+        comment.__show_reply = false;
+        if (comment.reply_of) {
+            this.comments.forEach((commentOnList) => {
+                if (commentOnList.id === comment.reply_of.id) {
+                    if (commentOnList.replies) {
+                        commentOnList.replies.push(comment);
+                    } else {
+                        commentOnList.replies = [comment];
+                    }
+                }
+            });
+        }
+        this.comments.push(comment);
+        this.resetShowReply();
+        this.$scope.$apply();
+    }
+
+    commentRemoved(comment: noosfero.Comment): void {
+        let index = this.comments.indexOf(comment, 0);
+        if (index >= 0) {
+            this.comments.splice(index, 1);
+        }
+    }
+
+    private resetShowReply() {
+        this.comments.forEach((comment: noosfero.CommentViewModel) => {
+            comment.__show_reply = false;
         });
+        if (this.parent) {
+            this.parent.__show_reply = false;
+        }
+
     }
-    ngOnInit() {
-        this.commentService.getByArticle(this.article).then((result: noosfero.RestResult<noosfero.Comment[]>) => {
-            this.comments = result.data;
+    loadComments() {
+        return this.commentService.getByArticle(this.article, { page: this.page, per_page: this.perPage });
+    }
+
+    loadNextPage() {
+        this.loadComments().then((result: noosfero.RestResult<noosfero.Comment[]>) => {
+            this.comments = this.comments.concat(result.data);
+            this.total = result.headers ? result.headers("total") : this.comments.length;
+            this.page++;
         });
     }
+
+    displayMore() {
+        let pages = Math.ceil(this.total / this.perPage);
+        return !this.parent && pages >= this.page;
+    }
 }
 <div class="comments">
-  <noosfero-post-comment [article]="ctrl.article"></noosfero-post-comment>
+  <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
   <div class="comments-list">
-    <noosfero-comment ng-repeat="comment in ctrl.comments" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
+    <noosfero-comment (comment-removed)="ctrl.commentRemoved($event.detail)" ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
   </div>
+  <button type="button" ng-if="ctrl.displayMore()" class="more-comments btn btn-default btn-block" ng-click="ctrl.loadNextPage()">{{"comment.pagination.more" | translate}}</button>
 </div>
@@ -0,0 +1,6 @@
+.comments {
+  border-top: 2px solid #F3F3F3;
+  .comments {
+    border-top: 0;
+  }
+}
 import {Provider, provide, Component} from 'ng-forward';
 import * as helpers from "../../../../spec/helpers";
-
 import {PostCommentComponent} from './post-comment.component';
 const htmlTemplate: string = '<noosfero-post-comment [article]="ctrl.article" [reply-of]="ctrl.comment"></noosfero-post-comment>';
@@ -8,17 +7,21 @@ const htmlTemplate: string = &#39;&lt;noosfero-post-comment [article]=&quot;ctrl.article&quot; [r
 describe("Components", () => {
     describe("Post Comment Component", () => {
+        let properties = { article: { id: 1, accept_comments: true } };
+
         beforeEach(angular.mock.module("templates"));
         let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
+        let user = {};
         let providers = [
             new Provider('CommentService', { useValue: commentService }),
-            new Provider('NotificationService', { useValue: helpers.mocks.notificationService })
+            new Provider('NotificationService', { useValue: helpers.mocks.notificationService }),
+            new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) })
         ].concat(helpers.provideFilters("translateFilter"));
         @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
         class ContainerComponent {
-            article = { id: 1 };
+            article = properties['article'];
             comment = { id: 2 };
         }
@@ -29,13 +32,21 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
+        it("not render the post comment form when article doesn't accept comments", done => {
+            properties['article'].accept_comments = false;
+            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("form").length).toEqual(0);
+                done();
+            });
+        });
+
         it("emit an event when create comment", done => {
             helpers.createComponentFromClass(ContainerComponent).then(fixture => {
                 let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.commentSaved.next = jasmine.createSpy("next");
                 commentService.createInArticle = jasmine.createSpy("createInArticle").and.returnValue(helpers.mocks.promiseResultTemplate({ data: {} }));
-                component["$rootScope"].$emit = jasmine.createSpy("$emit");
                 component.save();
-                expect(component["$rootScope"].$emit).toHaveBeenCalledWith(PostCommentComponent.EVENT_COMMENT_RECEIVED, jasmine.any(Object));
+                expect(component.commentSaved.next).toHaveBeenCalled();
                 done();
             });
         });
@@ -55,9 +66,9 @@ describe(&quot;Components&quot;, () =&gt; {
             helpers.createComponentFromClass(ContainerComponent).then(fixture => {
                 let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 component.comment = <any>{ reply_of_id: null };
-                component.replyOf = <any>{ id: 10 };
+                component.parent = <any>{ id: 10 };
                 component.save();
-                expect(component.comment.reply_of_id).toEqual(component.replyOf.id);
+                expect(component.comment.reply_of_id).toEqual(component.parent.id);
                 done();
             });
         });
-import { Inject, Input, Component } from 'ng-forward';
+import { Inject, Input, Output, EventEmitter, Component } from 'ng-forward';
 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
 import { NotificationService } from "../../../shared/services/notification.service";
+import { SessionService } from "../../../login";
+import { CommentFormHotspotComponent } from "../../../hotspot/comment-form-hotspot.component";
 @Component({
     selector: 'noosfero-post-comment',
-    templateUrl: 'app/article/comment/post-comment/post-comment.html'
+    templateUrl: 'app/article/comment/post-comment/post-comment.html',
+    outputs: ['commentSaved'],
+    directives: [CommentFormHotspotComponent]
 })
-@Inject(CommentService, NotificationService, "$rootScope")
+@Inject(CommentService, NotificationService, SessionService)
 export class PostCommentComponent {
     public static EVENT_COMMENT_RECEIVED = "comment.received";
     @Input() article: noosfero.Article;
-    @Input() replyOf: noosfero.Comment;
+    @Input() parent: noosfero.Comment;
+    @Output() commentSaved: EventEmitter<Comment> = new EventEmitter<Comment>();
+    @Input() comment = <noosfero.Comment>{};
+    private currentUser: noosfero.User;
-    comment: noosfero.Comment;
-
-    constructor(private commentService: CommentService, private notificationService: NotificationService, private $rootScope: ng.IScope) { }
+    constructor(private commentService: CommentService,
+        private notificationService: NotificationService,
+        private session: SessionService) {
+        this.currentUser = this.session.currentUser();
+    }
     save() {
-        if (this.replyOf && this.comment) {
-            this.comment.reply_of_id = this.replyOf.id;
+        if (this.parent && this.comment) {
+            this.comment.reply_of_id = this.parent.id;
         }
         this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
-            this.$rootScope.$emit(PostCommentComponent.EVENT_COMMENT_RECEIVED, result.data);
-            this.notificationService.success({ title: "Good job!", message: "Comment saved!" });
+            this.commentSaved.next(result.data);
+            this.comment.body = "";
+            this.notificationService.success({ title: "comment.post.success.title", message: "comment.post.success.message" });
         });
     }
 }
-<form>
+<form class="clearfix post-comment" ng-if="ctrl.article.accept_comments">
   <div class="form-group">
-    <textarea class="form-control custom-control" rows="3" ng-model="ctrl.comment.body"></textarea>
+    <div class="comment media">
+      <div class="media-left">
+        <a ui-sref="main.profile.home({profile: ctrl.currentUser.person.identifier})">
+          <noosfero-profile-image [profile]="ctrl.currentUser.person"></noosfero-profile-image>
+        </a>
+      </div>
+      <div class="media-body">
+        <textarea class="form-control custom-control" rows="1" ng-model="ctrl.comment.body" placeholder="{{'comment.post.placeholder' | translate}}"></textarea>
+        <noosfero-hotspot-comment-form [comment]="ctrl.comment" [parent]="ctrl.parent"></noosfero-hotspot-comment-form>
+        <button ng-show="ctrl.comment.body" type="submit" class="btn btn-default pull-right ng-hide" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
+      </div>
+    </div>
   </div>
-  <button type="submit" class="btn btn-default" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
 </form>
@@ -0,0 +1,19 @@
+.comments {
+  .post-comment {
+    .media {
+      padding-top: 10px;
+      .media-left {
+        padding: 10px 0;
+      }
+      button {
+        margin-top: 10px;
+        &.ng-hide-add {
+          animation: 0.5s lightSpeedOut ease;
+        }
+        &.ng-hide-remove {
+          animation: 0.5s lightSpeedIn ease;
+        }
+      }
+    }
+  }
+}
-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 {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
 import {ContentViewerActionsComponent} from './content-viewer-actions.component';
 // this htmlTemplate will be re-used between the container components in this spec file
@@ -12,56 +9,57 @@ const htmlTemplate: string = &#39;&lt;content-viewer-actions [article]=&quot;ctrl.article&quot; [
 describe('Content Viewer Actions Component', () => {
-    beforeEach(() => {
+    let helper: ComponentTestHelper<ContentViewerActionsComponent>;
-        angular.mock.module("templates");
+    beforeEach(angular.mock.module("templates"));
-        providers((provide: any) => {
-            return <any>[
-                provide('ProfileService', {
-                    useValue: helpers.mocks.profileService
-                })
-            ];
-        });
-    });
+    let providers = [
+        provide('ProfileService', {
+            useValue: helpers.mocks.profileService
+        }),
+        provide('ArticleService', {
+            useValue: helpers.mocks.articleService
+        })
+    ].concat(helpers.provideFilters("translateFilter"));
-    let buildComponent = (): Promise<ComponentFixture> => {
-        return helpers.quickCreateComponent({
-            providers: [
-                helpers.provideEmptyObjects('Restangular'),
-                helpers.provideFilters('translateFilter')
-            ],
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
             directives: [ContentViewerActionsComponent],
-            template: htmlTemplate
+            providers: providers
         });
-    };
+        helper = new ComponentTestHelper<ContentViewerActionsComponent>(cls, done);
+    });
-    it('renders content viewer actions directive', (done: Function) => {
-        buildComponent().then((fixture: ComponentFixture) => {
-            expect(fixture.debugElement.query('content-viewer-actions').length).toEqual(1);
+    it('renders content viewer actions directive', () => {
+        expect(helper.all("content-viewer-actions").length).toEqual(1);
+    });
-            done();
-        });
+    it('return article parent as container when it is not a folder', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'TextArticle', parent: { id: 2 } });
+        expect(helper.component.getArticleContainer(article)).toEqual(2);
+    });
+
+    it('return article as container when it is a folder', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'Folder' });
+        expect(helper.component.getArticleContainer(article)).toEqual(1);
     });
-    it('check if profile was loaded', (done: Function) => {
+    it('return article as container when it is a blog', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'Blog' });
+        expect(helper.component.getArticleContainer(article)).toEqual(1);
+    });
+
+    it('check if profile was loaded', () => {
         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: ContentViewerActionsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            expect(contentViewerComp.profile).toEqual(jasmine.objectContaining(profile));
-
-            done();
-        });
+        let component = new ContentViewerActionsComponent(<any>helpers.mocks.profileService, <any>helpers.mocks.articleService);
+        expect(component.profile).toEqual(jasmine.objectContaining(profile));
     });
-
 });
 import {Component, Inject, provide} from "ng-forward";
 import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
 @Component({
     selector: "content-viewer-actions",
     templateUrl: "app/article/content-viewer/navbar-actions.html",
-    providers: [provide('profileService', { useClass: ProfileService })]
+    providers: [
+        provide('profileService', { useClass: ProfileService }),
+        provide('articleService', { useClass: ArticleService })
+    ]
 })
-@Inject(ProfileService)
+@Inject(ProfileService, ArticleService)
 export class ContentViewerActionsComponent {
     article: noosfero.Article;
     profile: noosfero.Profile;
+    parentId: number;
-    constructor(profileService: ProfileService) {
+    constructor(profileService: ProfileService, articleService: ArticleService) {
         profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
+            return articleService.getCurrent();
+        }).then((article: noosfero.Article) => {
+            this.article = article;
+            this.parentId = this.getArticleContainer(article);
         });
     }
+
+    getArticleContainer(article: noosfero.Article) {
+        // FIXME get folder types from api
+        if (article.type === "Blog" || article.type === "Folder") {
+            return article.id;
+        } else if (article.parent) {
+            return article.parent.id;
+        }
+    }
 }
@@ -28,11 +28,12 @@ export class ContentViewerComponent {
     }
     activate() {
-       this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+        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;
+            this.articleService.setCurrent(this.article);
         });
     }
 }
-<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 class="nav navbar-nav" permission="vm.profile.permissions" permission-action="allow_edit">
+    <li class="dropdown profile-menu" uib-dropdown>
+        <a class="btn dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
+            {{"navbar.content_viewer_actions.new_item" | translate}}
+            <i class="fa fa-caret-down"></i>
+        </a>
+        <ul class="dropdown-menu" uib-dropdown-menu ng-show="vm.profile">
+            <li>
+                <a href="#" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId})">
+                    <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
+                </a>
+            </li>
+            <li>
+                <a href="#" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId, type: 'CommentParagraphPlugin::Discussion'})">
+                    <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_discussion" | translate}}
+                </a>
+            </li>
+        </ul>
+    </li>
 </ul>
@@ -0,0 +1,53 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider} from 'ng-forward';
+import {ComponentTestHelper, createClass} from "./../../../spec/component-test-helper";
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {ContentViewerActionsComponent} from '././content-viewer-actions.component';
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<content-viewer-actions [article]="ctrl.article" [profile]="ctrl.profile"></content-viewer-actions>';
+
+describe("Components", () => {
+
+    describe("Content Viewer Actions Component", () => {
+        let serviceMock = {
+            getEnvironmentPeople: (filters: any): any => {
+                return Promise.resolve([{ identifier: "person1" }]);
+            }
+        };
+        let providers = [
+            new Provider('ArticleService', { useValue: helpers.mocks.articleService }),
+            new Provider('ProfileService', { useValue: helpers.mocks.profileService })
+        ];
+
+        let helper: ComponentTestHelper<ContentViewerActionsComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ContentViewerActionsComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<ContentViewerActionsComponent>(cls, done);
+        });
+
+        it("render the actions new item menu", () => {
+            expect(helper.all("a[class|='btn dropdown-toggle']")[0]).not.toBeNull();
+        });
+
+        it("render two menu item actions", () => {
+            expect(helper.all("ul")[1].find("li").length).toBe(2);
+        });
+    });
+});
 /* 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,25 @@
+import {Input, provide, Component} from 'ng-forward';
+import {MacroDirective} from "./macro.directive";
+
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<div data-macro="macro_component" data-macro-custom="custom"></div>';
+
+describe("Directives", () => {
+
+    describe("Macro directive", () => {
+        it("renders a macro component using the name passed in data-macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.queryAll('macro-component').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("extract custom attributes from macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.query('macro-component').attr("custom")).toEqual("custom");
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,34 @@
+import {Directive, Inject} from "ng-forward";
+
+@Directive({
+    selector: '[macro]',
+    providers: []
+})
+@Inject('$element', '$scope', '$compile')
+export class MacroDirective {
+
+    private macroPrefix = "data-macro";
+
+    constructor(private $element: any, private $scope: ng.IScope, private $compile: ng.ICompileService) {
+        let macro = $element[0].attributes[this.macroPrefix].value;
+        let componentName = this.normalizeName(macro);
+        let content = $element.html().replace(/"/g, '&quot;');
+        let customAttributes = this.extractCustomAttributes($element[0].attributes);
+        $element.replaceWith($compile(`<${componentName} [article]="ctrl.article" content="${content}" ${customAttributes}></${componentName}>`)($scope));
+    }
+
+    extractCustomAttributes(attributes: any) {
+        let customAttributes = "";
+        for (let attr of attributes) {
+            if (attr.name.startsWith(this.macroPrefix + '-')) {
+                let name = this.normalizeName(attr.name.replace(this.macroPrefix + '-', ''));
+                customAttributes += ` ${name}='${attr.value}'`;
+            }
+        }
+        return customAttributes;
+    }
+
+    normalizeName(name: string) {
+        return name.replace(/[_\/]/g, '-').toLowerCase();
+    }
+}
-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";
+import {providers} from 'ng-forward/cjs/testing/providers';
+
+import {Input, provide, Component} from 'ng-forward';
+import {ArticleBlogComponent} from './blog.component';
+
+import {createComponentFromClass, quickCreateComponent, provideEmptyObjects, createProviderToValue, provideFilters} from "../../../../spec/helpers.ts";
+
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
 // 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>';
@@ -42,38 +31,30 @@ describe(&quot;Blog Component&quot;, () =&gt; {
         }
     }
+    let article1 = <noosfero.Article>{
+        id: 1,
+        title: 'The article test'
+    };
+
+    let article2 = <noosfero.Article>{
+        id: 1,
+        title: 'The article test'
+    };
+
+    let articles = [ article1, article2 ];
+
     let articleService = {
         getChildren: (article_id: number, filters: {}) => {
             return promiseResultTemplate(null);
-        }
+        },
+        subscribeToArticleRemoved: (fn: Function) => {}
     };
-    @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'
-        };
-    }
+    let helper: ComponentTestHelper<ArticleBlogComponent>;
-    beforeEach(() => {
+    beforeEach(angular.mock.module("templates"));
-        // 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");
+    beforeEach((done) => {
         providers((provide: any) => {
             return <any>[
@@ -82,48 +63,26 @@ describe(&quot;Blog Component&quot;, () =&gt; {
                 })
             ];
         });
-    });
-
-    it("renders the blog content", (done: Function) => {
-
-        createComponentFromClass(BlogContainerComponent).then((fixture) => {
-
-            expect(fixture.debugElement.query('div.blog').length).toEqual(1);
-
-            done();
+        let providersHelper = [
+            provide('ArticleService', { useValue: articleService })
+        ];
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [ArticleBlogComponent],
+            providers: providersHelper,
+            properties: {
+                posts: articles
+            }
         });
+        helper = new ComponentTestHelper<ArticleBlogComponent>(cls, 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();
-        });
+    it("renders the blog content", () => {
+        expect(helper.debugElement.query('div.blog').length).toEqual(1);
+    });
+    it("verify the blog data", () => {
+        expect(helper.component["posts"][0]).toEqual(jasmine.objectContaining(article1));
     });
 });
 \ No newline at end of file
@@ -31,7 +31,7 @@ export class ArticleBlogComponent {
     loadPage() {
         let filters = {
-            content_type: "TinyMceArticle",
+            content_type: "TextArticle",
             per_page: this.perPage,
             page: this.currentPage
         };
@@ -17,8 +17,8 @@
     </div>
   </div>
-  <pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
+  <uib-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>
+  </uib-pagination>
 </div>
@@ -22,7 +22,7 @@ export class EnvironmentHomeComponent {
     environment: noosfero.Environment;
     constructor(private environmentService: EnvironmentService, private $sce: ng.ISCEService) {
-        environmentService.getByIdentifier("default").then((result: noosfero.Environment) => {
+        environmentService.get().then((result: noosfero.Environment) => {
             this.environment = result;
         });
     }
@@ -9,6 +9,7 @@ describe(&quot;Components&quot;, () =&gt; {
         let environmentServiceMock: any;
         let notificationMock: any;
         let $state: any;
+        let defaultEnvironment = <any> {id: 1, name: 'Noosfero' };
         beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
             $rootScope = _$rootScope_;
@@ -17,44 +18,40 @@ describe(&quot;Components&quot;, () =&gt; {
         beforeEach(() => {
             $state = jasmine.createSpyObj("$state", ["transitionTo"]);
-            environmentServiceMock = jasmine.createSpyObj("environmentServiceMock", ["getByIdentifier", "getBoxes"]);
+            environmentServiceMock = jasmine.createSpyObj("environmentServiceMock", ["get", "getBoxes"]);
             notificationMock = jasmine.createSpyObj("notificationMock", ["error"]);
-            let environmentResponse = $q.defer();
-            environmentResponse.resolve({ id: 1 });
             let getBoxesResponse = $q.defer();
             getBoxesResponse.resolve({ data: { boxes: [{ id: 2 }] } });
-            environmentServiceMock.getByIdentifier = jasmine.createSpy('getByIdentifier').and.returnValue(environmentResponse.promise);
             environmentServiceMock.getBoxes = jasmine.createSpy("getBoxes").and.returnValue(getBoxesResponse.promise);
         });
         it("get the default environment", done => {
-            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock);
+            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock, defaultEnvironment);
             $rootScope.$apply();
-            expect(component.environment).toEqual({ id: 1 });
+            expect(component.environment).toEqual({ id: 1, name: 'Noosfero' });
             done();
         });
         it("get the environment boxes", done => {
-            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock);
+            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock, defaultEnvironment);
             $rootScope.$apply();
             expect(environmentServiceMock.getBoxes).toHaveBeenCalled();
             expect(component.boxes).toEqual({ data: { boxes: [{ id: 2 }] } });
             done();
         });
-        it("display notification error when the environment wasn't found", done => {
+        it("display notification error when does not find boxes to the environment", done => {
             let environmentResponse = $q.defer();
             environmentResponse.reject();
-            environmentServiceMock.getByIdentifier = jasmine.createSpy('getByIdentifier').and.returnValue(environmentResponse.promise);
+            environmentServiceMock.getBoxes = jasmine.createSpy('getBoxes').and.returnValue(environmentResponse.promise);
-            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock);
+            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock, defaultEnvironment);
             $rootScope.$apply();
             expect(notificationMock.error).toHaveBeenCalled();
-            expect(component.environment).toBeUndefined();
             done();
         });
@@ -31,21 +31,23 @@ import {EnvironmentHomeComponent} from &quot;./environment-home.component&quot;;
         }
     }
 ])
-@Inject(EnvironmentService, "$state")
+@Inject(EnvironmentService, "$state", "currentEnvironment")
 export class EnvironmentComponent {
     boxes: noosfero.Box[];
     environment: noosfero.Environment;
-    constructor(environmentService: EnvironmentService, $state: ng.ui.IStateService, notificationService: NotificationService) {
-        let boxesPromisse = environmentService.getByIdentifier("default").then((environment: noosfero.Environment) => {
-            this.environment = environment;
-            return environmentService.getBoxes(this.environment.id);
-        }).then((boxes: noosfero.Box[]) => {
-            this.boxes = boxes;
-        }).catch(() => {
-            $state.transitionTo('main');
-            notificationService.error({ message: "notification.environment.not_found" });
-        });
+    constructor(private environmentService: EnvironmentService, private $state: ng.ui.IStateService, private notificationService: NotificationService, currentEnvironment: noosfero.Environment) {
+        this.environment = currentEnvironment;
+
+        this.environmentService.getBoxes(this.environment.id)
+            .then((boxes: noosfero.Box[]) => {
+                this.boxes = boxes;
+            }).catch(() => {
+                this.$state.transitionTo('main');
+                this.notificationService.error({ message: "notification.environment.not_found" });
+            });
+
     }
+
 }
 <div class="environment-container">
   <div class="row">
-    <noosfero-boxes [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes>
+    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes>
   </div>
 </div>
@@ -0,0 +1,25 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-article-content",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleContentHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_content");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,25 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-article-toolbar",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleToolbarHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_toolbar_buttons");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,26 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-comment-form",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class CommentFormHotspotComponent extends PluginHotspot {
+
+    @Input() comment: noosfero.Comment;
+    @Input() parent: noosfero.Comment;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("comment_form_extra_contents");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [comment]="ctrl.comment" [parent]="ctrl.parent"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,5 @@
+export function Hotspot(hotspotName: string) {
+    return (target: any) => {
+        target['hotspot'] = hotspotName;
+    };
+}
@@ -0,0 +1,19 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+
+export abstract class PluginHotspot {
+
+    constructor(protected hotspot: string) { }
+
+    ngOnInit() {
+        for (let component of plugins.hotspots) {
+            if (component.hotspot === this.hotspot) {
+                let directiveName = dasherize(component.name.replace('Component', ''));
+                this.addHotspot(directiveName);
+            }
+        }
+    }
+
+    abstract addHotspot(directiveName: string): any;
+}
@@ -28,12 +28,16 @@ $primary-color-dark: #0288d1;
 $default-bg-hover-color: #f8f8f8;
 $red-color: #e84e40;
 $red-color-dark: #dd191d;
+$green-color: #8bc34a;
+$green-color-dark: #689f38;
 //GRID - media queries breakpoints
 $break-xxs-min: 420px;
 $break-xs-min: 768px;
+$break-sm-min: 992px;
 $break-xxs-max: ($break-xxs-min - 1);
+$break-sm-max: ($break-sm-min - 1);
 $break-xs-max: ($break-xs-min - 1);
@@ -76,4 +80,5 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/mixins";
 @import "layout/scss/bootstrap-overrides";
 @import "layout/scss/layout";
+@import "layout/scss/sidebar";
 @import "layout/scss/tables";
-import {NoosferoApp} from "./index.module";
+import {bootstrap} from "ng-forward";
 import {noosferoModuleConfig} from "./index.config";
 import {noosferoAngularRunBlock} from "./index.run";
-
 import {MainComponent} from "./main/main.component";
-import {bootstrap, bundle} from "ng-forward";
-
-import {AUTH_EVENTS} from "./login/auth-events";
-import {AuthController} from "./login/auth.controller";
-
-import {Navbar} from "./layout/navbar/navbar";
+import {AuthEvents} from "./login/auth-events";
 declare var moment: any;
-let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
-    "ngSanitize", "ngMessages", "ngAria", "restangular",
-    "ui.router", "ui.bootstrap", "toastr",
-    "angularMoment", "angular.filter", "akoenig.deckgrid",
-    "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
-    "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish();
-
-NoosferoApp.angularModule = noosferoApp;
-
-
-NoosferoApp.addConstants("moment", moment);
-NoosferoApp.addConstants("AUTH_EVENTS", AUTH_EVENTS);
-
-NoosferoApp.addConfig(noosferoModuleConfig);
-NoosferoApp.run(noosferoAngularRunBlock);
+//FIXME see a better way to declare template modules for dev mode
+try {
+    angular.module('noosfero.templates.app');
+} catch (error) {
+    angular.module('noosfero.templates.app', []);
+}
+try {
+    angular.module('noosfero.templates.plugins');
+} catch (error) {
+    angular.module('noosfero.templates.plugins', []);
+}
+angular.module('noosfero.init', ['noosfero.templates.app', 'noosfero.templates.plugins']).
+    config(noosferoModuleConfig).
+    run(noosferoAngularRunBlock).
+    constant("moment", moment).
+    constant("AuthEvents", AuthEvents);
+bootstrap(MainComponent);
@@ -11,7 +11,7 @@ export class BlockComponent {
     @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";
+        let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').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));
     }
@@ -0,0 +1,51 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+
+import {CommunitiesBlockComponent} from './communities-block.component';
+
+const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Communities 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('CommunityService', {
+                useValue: {
+                    getByOwner: (owner: any, params: any): any => {
+                        return Promise.resolve({ data: [{ identifier: "community1" }] });
+                    }
+                }
+            }),
+        ];
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
+        class BlockContainerComponent {
+            block = { type: 'Block', settings: {} };
+            owner = { name: 'profile-name' };
+        }
+
+        it("get communities", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(block.profiles).toEqual([{ identifier: "community1" }]);
+                done();
+            });
+        });
+
+        it("render the profile image for each community", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                fixture.debugElement.getLocal("$rootScope").$apply();
+                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,24 @@
+import {Input, Inject, Component} from "ng-forward";
+import {CommunityService} from "../../../../lib/ng-noosfero-api/http/community.service";
+
+@Component({
+    selector: "noosfero-communities-block",
+    templateUrl: 'app/layout/blocks/communities/communities-block.html',
+})
+@Inject(CommunityService)
+export class CommunitiesBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    profiles: any = [];
+
+    constructor(private communityService: CommunityService) { }
+
+    ngOnInit() {
+        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
+            this.profiles = result.data;
+        });
+    }
+}
@@ -0,0 +1,5 @@
+<div class="communities-block">
+  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
+    <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,16 @@
+.communities-block {
+  .profile {
+    margin: 10px;
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./communities-block.component";
@@ -0,0 +1,75 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, provide} from 'ng-forward';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {DisplayContentBlockComponent} from './display-content-block.component';
+import * as helpers from './../../../../spec/helpers';
+
+const htmlTemplate: string = '<noosfero-display-content-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-display-content-block>';
+
+describe("Components", () => {
+
+    describe("Display Content Block Component", () => {
+        let state = jasmine.createSpyObj("state", ["go"]);
+        let providers = [
+            provide('ArticleService', {
+                useValue: helpers.mocks.articleService
+            }),
+            provide('$state', { useValue: state })
+        ].concat(helpers.provideFilters("translateFilter"));
+
+        let sections: noosfero.Section[] = [
+            { value: 'abstract', checked: 'abstract'},
+            { value: 'title', checked: 'title' }
+        ];
+        let settings: noosfero.Settings = {
+            limit: 6,
+            sections: sections
+        };
+
+        let helper: ComponentTestHelper<DisplayContentBlockComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DisplayContentBlockComponent],
+                providers: providers,
+                properties: {
+                    block: {
+                        settings: settings
+                     }
+                }
+            });
+            helper = new ComponentTestHelper<DisplayContentBlockComponent>(cls, done);
+        });
+
+        it("verify settings is injected", () => {
+           expect(helper.component.block).not.toBeNull;
+           expect(helper.component.block.settings).not.toBeNull;
+           expect(helper.component.block.settings.limit).toEqual(6);
+           expect(helper.component.block.settings.sections.length).toEqual(3);
+        });
+
+        it("verify abstract is displayed", () => {
+            expect(helper.all("div[ng-bind-html|='article.abstract']")[0]).not.toBeNull;
+        });
+
+        it("verify title is displayed", () => {
+            expect(helper.all("div > h5")[0]).not.toBeNull;
+        });
+
+        it("verify body is not displayed", () => {
+            expect(helper.all("div[ng-bind-html|='article.body']")[0]).toBeNull;
+        });
+    });
+});
@@ -0,0 +1,54 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-display-content-block",
+    templateUrl: 'app/layout/blocks/display-content/display-content-block.html',
+})
+@Inject(ArticleService, "$state")
+export class DisplayContentBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    profile: noosfero.Profile;
+    articles: noosfero.Article[];
+    sections: noosfero.Section[];
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, private $state: ng.ui.IStateService) {}
+
+    ngOnInit() {
+        this.profile = this.owner;
+        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
+        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+            this.articles = <noosfero.Article[]>result.data;
+            this.sections = this.block.settings.sections;
+            // Add sections not defined by Noosfero API
+            this.addDefaultSections();
+            this.documentsLoaded = true;
+        });
+    }
+
+    /**
+     * This configuration doesn't exists on Noosfero. Statically typing here.
+     */
+    private addDefaultSections() {
+        let author: noosfero.Section = <noosfero.Section>{ value: 'author', checked: 'author' };
+        this.sections.push(author);
+    }
+
+    /**
+     * Returns whether a settings section should be displayed.
+     *
+     */
+    private display(section_name: string): boolean {
+        let section: noosfero.Section = this.sections.find( function(section: noosfero.Section) {
+            return section.value === section_name;
+        });
+        return section !== undefined && section.checked !== undefined;
+    }
+
+}
@@ -0,0 +1,46 @@
+<div class="{{ctrl.type}}-block">
+  <div ng-repeat="article in ctrl.articles" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})"" class="article">
+    <!-- Article Title -->
+    <div class="page-header" ng-if="ctrl.display('title')">
+        <h5 class="title media-heading" ng-bind="article.title"></h3>
+    </div>
+
+    <div class="sub-header clearfix">
+        <!-- Article Abstract and Read More Link -->
+        <div class="post-lead" ng-if="ctrl.display('abstract')">
+            <div ng-bind-html="article.abstract"></div>
+            <a href="#" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})">
+                <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.read_more" | translate}}
+            </a>
+        </div>
+        <div class="page-info pull-right small text-muted" ng-if="ctrl.display('publish_date')">
+            <!-- Article Published Date -->
+            <span class="time">
+                <i class="fa fa-clock-o"></i> <span am-time-ago="article.created_at | dateFormat"></span>
+            </span>
+            <!-- Article Author -->
+            <span class="author" ng-if="ctrl.display('author')">
+                <i class="fa fa-user"></i>
+                <a ui-sref="main.profile.home({profile: article.author.identifier})" ng-if="article.author">
+                    <span class="author-name" ng-bind="article.author.name"></span>
+                </a>
+            </span>
+        </div>
+    </div>
+
+    <div class="post-lead">
+        <!-- Article Image -->
+        <img ng-show="ctrl.display('image')" ng-src="{{article.image.url}}" class="img-responsive article-image">
+        <!-- Article Body -->
+        <div ng-bind-html="article.body" ng-show="ctrl.display('body')"></div>
+    </div>
+
+    <!-- Article Tags -->
+    <div ng-if="ctrl.display('tags')" class="post-lead">
+        <div class="label" ng-repeat="tag in article.tag_list">
+            <span class="badge" ng-bind="tag"></span>
+        </div>
+    </div>
+
+  </div>
+</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 "./display-content-block.component";
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./link-list.component";
+export * from "./link-list-block.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-block.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();
+            });
+        });
+
+    });
+
+});
@@ -0,0 +1,20 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-link-list-block",
+    templateUrl: "app/layout/blocks/link-list/link-list-block.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,110 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Injectable, Provider, provide} from "ng-forward";
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {LoginBlockComponent} from './login-block.component';
+import * as helpers from "./../../../../spec/helpers";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../../login";
+
+const htmlTemplate: string = '<noosfero-login-block></noosfero-login-block>';
+
+describe("Components", () => {
+
+    describe("Login Block Component", () => {
+        let helper: ComponentTestHelper<LoginBlockComponent>;
+        let person: any = null;
+
+        /**
+         * Mock objects
+         */
+        let authService: any = helpers.mocks.authService;
+        let user = <noosfero.User>{ person: person };
+        let sessionService: any = <any>helpers.mocks.sessionWithCurrentUser(user);
+        let state = jasmine.createSpyObj("$state", ["go"]);
+        let scope = helpers.mocks.scopeWithEvents;
+
+        let providers = [
+            new Provider('SessionService', { useValue: sessionService }),
+            new Provider('$state', { useValue: state }),
+            new Provider('AuthService', { useValue: authService }),
+            new Provider('$scope', { useValue: scope })
+        ];
+
+        beforeEach( angular.mock.module("templates") );
+
+        beforeEach( (done: Function) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [LoginBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<LoginBlockComponent>(cls, done);
+        });
+
+        it("expect person to be null with no logged in user", () => {
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        it("expect person to be defined when user login", () => {
+            // Executes the login method on the component
+            doComponentLogin();
+            expect(helper.component.currentUser.person).toBe(person);
+        });
+
+        it("expect person to be null when user logout", () => {
+            // First do a login
+            doComponentLogin();
+            // The logout the user
+            doComponentLogout();
+            // Check if the current user was cleared
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        /**
+         * Execute the logout method on the target component
+         */
+        function doComponentLogout() {
+            // Create a mock for the AuthService logout method
+            spyOn(authService, "logout");
+            helper.component.logout();
+            expect(authService.logout).toHaveBeenCalled();
+            // After the component logout method execution, fire the
+            // AuthService event
+            simulateLogoutEvent();
+        }
+
+        /**
+         * Execute the login method on the target component
+         */
+        function doComponentLogin() {
+            // Create a mock for the AuthService login method
+            spyOn(authService, "login");
+            helper.component.login();
+            expect(authService.login).toHaveBeenCalled();
+            // After the component login method execution, fire the
+            // AuthService event
+            simulateLoginEvent();
+        }
+
+        /**
+         * Simulate the AuthService loginSuccess event
+         */
+        function simulateLoginEvent() {
+            let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
+
+            (<any>helper.component.authService)[successEvent].next(user);
+        }
+
+        /**
+         * Simulate the AuthService logoutSuccess event
+         */
+        function simulateLogoutEvent() {
+            let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
+
+            (<any>helper.component.authService)[successEvent].next(user);
+        }
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,73 @@
+import {Input, Inject, Component} from "ng-forward";
+import {SessionService, AuthService, AuthEvents} from "./../../../login";
+
+/**
+ * @ngdoc controller
+ * @name layout.blocks.LoginBlockComponent
+ * @description
+ *  The Noosfero block responible for presenting a login form and user status 
+ */
+@Component({
+    selector: "noosfero-login-block",
+    templateUrl: 'app/layout/blocks/login-block/login-block.html',
+})
+@Inject("SessionService", "$state", 'AuthService', "$scope")
+export class LoginBlockComponent {
+
+    /**
+     * @ngdoc property
+     * @name currentUser
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The current loged in user
+     */
+    currentUser: noosfero.User;
+
+    /**
+     * @ngdoc property
+     * @name credentials
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The credentials of the currentUser
+     */
+    credentials: noosfero.Credentials;
+
+    constructor(
+        private session: SessionService,
+        private $state: ng.ui.IStateService,
+        public authService: AuthService,
+        private $scope: ng.IScope) {
+        this.currentUser = this.session.currentUser();
+
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+    }
+
+    /**
+     * @ngdoc method
+     * @name login
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logs in the user using its credentials
+     */
+    login() {
+        this.authService.login(this.credentials);
+    }
+
+    /**
+     * @ngdoc method
+     * @name logout
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logout the user
+     */
+    logout() {
+        this.authService.logout();
+    };
+}
@@ -0,0 +1,27 @@
+<div class="logged-user-info" ng-show="ctrl.currentUser">
+    <h4>Logged in as {{ctrl.currentUser.person.identifier}}</h4>
+    <ul>
+        <li>User since 
+            <span class="time">
+                <span am-time-ago="ctrl.currentUser.person.created_at | dateFormat"></span>
+            </span>        
+        </li>
+      <li><a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})">Profile Homepage</a></li>
+    </ul>
+    <div class="user-actions">
+      <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+    </div>    
+</div>
+<div class="logged-user-info" ng-show="!ctrl.currentUser">
+  <form>
+    <div class="form-group">
+      <label for="email">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="ctrl.credentials.username">
+    </div>
+    <div class="form-group">
+      <label for="passwd">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="ctrl.credentials.password">
+    </div>
+    <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
+  </form>
+</div>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./main-block.component";
@@ -0,0 +1,39 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component, StateConfig} from 'ng-forward';
+import {MainBlockComponent} from './main-block.component';
+
+
+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();
+            });
+        });
+    });
+});
@@ -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/main-block.html'
+})
+export class MainBlockComponent {
+
+}
@@ -0,0 +1,29 @@		@@ -0,0 +1,29 @@
	1	+'use strict';
	2	+
	3	+var path = require('path');
	4	+var gulp = require('gulp');
	5	+var merge = require('merge-stream');
	6	+var conf = require('./conf');
	7	+var mergeJson = require('gulp-merge-json');
	8	+var glob = require("glob");
	9	+
	10	+exports.pluginLanguages = function(dest) {
	11	+ var merged = merge();
	12	+ glob(path.join(conf.paths.src, conf.paths.languages, "*.json"), function (er, files) {
	13	+ files.forEach(function(file) {
	14	+ merged.add(exports.pluginLanguage(file, dest));
	15	+ });
	16	+ });
	17	+ return merged;
	18	+}
	19	+
	20	+exports.pluginLanguage = function(file, dest) {
	21	+ var language = file.split('/').pop().replace('\.json','');
	22	+ return gulp.src(path.join(conf.paths.src, '**', conf.paths.languages, language+'.json'))
	23	+ .pipe(mergeJson(path.join(conf.paths.languages, language+'.json')))
	24	+ .pipe(gulp.dest(dest))
	25	+}
	26	+
	27	+gulp.task('serve-languages', function() {
	28	+ return exports.pluginLanguages(path.join(conf.paths.tmp, '/serve'));
	29	+});
	@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({		@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({
45	selector: '[ng-app]'// Only needed for angular apps	45	selector: '[ng-app]'// Only needed for angular apps
46	}));	46	}));
47		47
48	-gulp.task('serve', ['watch'], function () {	48	+gulp.task('serve', ['serve-languages', 'watch'], function () {
49	var srcPaths = [path.join(conf.paths.tmp, '/serve')];	49	var srcPaths = [path.join(conf.paths.tmp, '/serve')];
50	conf.paths.allSources.reverse().forEach(function(src) {	50	conf.paths.allSources.reverse().forEach(function(src) {
51	srcPaths.push(src);	51	srcPaths.push(src);
	@@ -31,6 +31,7 @@ var buildStyles = function() {		@@ -31,6 +31,7 @@ var buildStyles = function() {
31	];	31	];
32	conf.paths.allSources.forEach(function(src) {	32	conf.paths.allSources.forEach(function(src) {
33	srcPaths.push(path.join(src, '/app/*/.scss'));	33	srcPaths.push(path.join(src, '/app/*/.scss'));
		34	+ srcPaths.push(path.join(src, conf.paths.plugins, '/*/.scss'));
34	});	35	});
35	var injectFiles = gulp.src(srcPaths, { read: false });	36	var injectFiles = gulp.src(srcPaths, { read: false });
36		37
1	-<% if params[:angular_theme_old] \|\| request.fullpath.start_with?('/myprofile') %>	1	+<% if params[:angular_theme_old] %>
2	<%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>	2	<%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>
3	<% else %>	3	<% else %>
4	<%= from_theme_include(current_theme, "index") %>	4	<%= from_theme_include(current_theme, "index") %>
@@ -0,0 +1,124 @@		@@ -0,0 +1,124 @@
	1	+import {Input, provide, Component} from 'ng-forward';
	2	+import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
	3	+
	4	+import * as helpers from "../../spec/helpers";
	5	+
	6	+// this htmlTemplate will be re-used between the container components in this spec file
	7	+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
	8	+
	9	+
	10	+describe("Components", () => {
	11	+
	12	+ // the karma preprocessor html2js transform the templates html into js files which put
	13	+ // the templates to the templateCache into the module templates
	14	+ // we need to load the module templates here as the template for the
	15	+ // component Noosfero ArtileView will be load on our tests
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ describe("ArticleView Component", () => {
	19	+ let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
	20	+ it("renders the default component when no specific component is found", (done: Function) => {
	21	+ // Creating a container component (ArticleContainerComponent) to include
	22	+ // the component under test (ArticleView)
	23	+ @Component({
	24	+ selector: 'test-container-component',
	25	+ template: htmlTemplate,
	26	+ directives: [ArticleViewComponent],
	27	+ providers: [
	28	+ helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
	29	+ helpers.provideFilters("translateFilter"),
	30	+ helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
	31	+ helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
	32	+ helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
	33	+ helpers.createProviderToValue('$state', state)
	34	+ ]
	35	+ })
	36	+ class ArticleContainerComponent {
	37	+ article = { type: 'anyArticleType' };
	38	+ profile = { name: 'profile-name' };
	39	+ }
	40	+
	41	+ helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
	42	+ // and here we can inspect and run the test assertions
	43	+
	44	+ // gets the children component of ArticleContainerComponent
	45	+ let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	46	+
	47	+ // and checks if the article View rendered was the Default Article View
	48	+ expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
	49	+
	50	+ // done needs to be called (it isn't really needed, as we can read in
	51	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	52	+ // because createAsync in ng-forward is not really async, but as the intention
	53	+ // here is write tests in angular 2 ways, this is recommended
	54	+ done();
	55	+ });
	56	+ });
	57	+
	58	+ it("receives the article and profile as inputs", (done: Function) => {
	59	+
	60	+ // Creating a container component (ArticleContainerComponent) to include
	61	+ // the component under test (ArticleView)
	62	+ @Component({
	63	+ selector: 'test-container-component',
	64	+ template: htmlTemplate,
	65	+ directives: [ArticleViewComponent],
	66	+ providers: [
	67	+ helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
	68	+ helpers.provideFilters("translateFilter"),
	69	+ helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
	70	+ helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
	71	+ helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
	72	+ helpers.createProviderToValue('$state', state)
	73	+ ]
	74	+ })
	75	+ class ArticleContainerComponent {
	76	+ article = { type: 'anyArticleType' };
	77	+ profile = { name: 'profile-name' };
	78	+ }
	79	+
	80	+ // uses the TestComponentBuilder instance to initialize the component
	81	+ helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
	82	+ // and here we can inspect and run the test assertions
	83	+ let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	84	+
	85	+ // assure the article object inside the ArticleView matches
	86	+ // the provided through the parent component
	87	+ expect(articleView.article.type).toEqual("anyArticleType");
	88	+ expect(articleView.profile.name).toEqual("profile-name");
	89	+
	90	+ // done needs to be called (it isn't really needed, as we can read in
	91	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	92	+ // because createAsync in ng-forward is not really async, but as the intention
	93	+ // here is write tests in angular 2 ways, this is recommended
	94	+ done();
	95	+ });
	96	+ });
	97	+
	98	+
	99	+ it("renders a article view which matches to the article type", done => {
	100	+ // NoosferoTinyMceArticle component created to check if it will be used
	101	+ // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
	102	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
	103	+ @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
	104	+ class TinyMceArticleView {
	105	+ @Input() article: any;
	106	+ @Input() profile: any;
	107	+ }
	108	+
	109	+ // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
	110	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
	111	+ class CustomArticleType {
	112	+ article = { type: 'TinyMceArticle' };
	113	+ profile = { name: 'profile-name' };
	114	+ }
	115	+ helpers.createComponentFromClass(CustomArticleType).then(fixture => {
	116	+ let myComponent: CustomArticleType = fixture.componentInstance;
	117	+ expect(myComponent.article.type).toEqual("TinyMceArticle");
	118	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
	119	+ done();
	120	+ });
	121	+ });
	122	+
	123	+ });
	124	+});
@@ -0,0 +1,28 @@		@@ -0,0 +1,28 @@
	1	+import {ArticleEditorComponent} from './article-editor.component';
	2	+import {BasicEditorComponent} from "../basic-editor/basic-editor.component";
	3	+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
	4	+import * as helpers from "../../../../spec/helpers";
	5	+
	6	+const htmlTemplate: string = '<article-editor [article]="ctrl.article"></article-editor>';
	7	+
	8	+describe("Components", () => {
	9	+ describe("Article Editor Component", () => {
	10	+
	11	+ let helper: ComponentTestHelper<ArticleEditorComponent>;
	12	+ beforeEach(angular.mock.module("templates"));
	13	+
	14	+ beforeEach((done) => {
	15	+ let properties = { article: { type: "TextArticle" } };
	16	+ let cls = createClass({
	17	+ template: htmlTemplate,
	18	+ directives: [ArticleEditorComponent, BasicEditorComponent],
	19	+ properties: properties
	20	+ });
	21	+ helper = new ComponentTestHelper<ArticleEditorComponent>(cls, done);
	22	+ });
	23	+
	24	+ it("replace element with article basic editor when type is TextArticle", () => {
	25	+ expect(helper.find("article-basic-editor").length).toEqual(1);
	26	+ });
	27	+ });
	28	+});
@@ -0,0 +1,27 @@		@@ -0,0 +1,27 @@
	1	+import {Component, Input, Inject} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-editor',
	5	+ template: "not-used"
	6	+})
	7	+@Inject("$element", "$scope", "$injector", "$compile")
	8	+export class ArticleEditorComponent {
	9	+
	10	+ @Input() article: noosfero.Article;
	11	+
	12	+ constructor(
	13	+ private $element: any,
	14	+ private $scope: ng.IScope,
	15	+ private $injector: ng.auto.IInjectorService,
	16	+ private $compile: ng.ICompileService) { }
	17	+
	18	+ ngOnInit() {
	19	+ let articleType = this.article && this.article.type ? this.article.type.replace(/::/, '') : "TextArticle";
	20	+ let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
	21	+ let directiveName = "article-basic-editor";
	22	+ if (specificDirective !== "articleEditor" && this.$injector.has(specificDirective + 'Directive')) {
	23	+ directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	24	+ }
	25	+ this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
	26	+ }
	27	+}
@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
	1	+import {Component, Input} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-basic-editor',
	5	+ templateUrl: "app/article/cms/basic-editor/basic-editor.html"
	6	+})
	7	+export class BasicEditorComponent {
	8	+
	9	+ @Input() article: noosfero.Article;
	10	+}
@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
	1	+<form>
	2	+ <div class="form-group">
	3	+ <label for="titleInput">{{"article.basic_editor.title" \| translate}}</label>
	4	+ <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' \| translate}}" ng-model="ctrl.article.name">
	5	+ </div>
	6	+ <div class="form-group">
	7	+ <label for="bodyInput">{{"article.basic_editor.body" \| translate}}</label>
	8	+ <html-editor [(value)]="ctrl.article.body"></html-editor>
	9	+ </div>
	10	+</form>
@@ -0,0 +1,11 @@		@@ -0,0 +1,11 @@
	1	+import {Component, Input} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-basic-options',
	5	+ templateUrl: "app/article/cms/basic-options/basic-options.html"
	6	+})
	7	+export class BasicOptionsComponent {
	8	+
	9	+ @Input() article: noosfero.Article;
	10	+
	11	+}