Come add component

src/app/app.module.ts

@@ -69,7 +69,7 @@ import { ThemeFooterComponent } from './hotspots/components/theme-footer/theme-f
 import { ThemeHeaderComponent } from './hotspots/components/theme-header/theme-header.component';
 import { ThemeTopHeaderComponent } from './hotspots/components/theme-top-header/theme-top-header.component';
 import { ThemeMenuComponent } from './hotspots/components/theme-menu/theme-menu.component';
-
+import { ThemeComeAddComponent } from './hotspots/components/theme-come-add/theme-come-add.component';
 
 // Gamification Tour components
 import { TourInterceptor } from './gamification/shared/tour.interceptor';
@@ -138,6 +138,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     ThemeMenuComponent,
     HomeComponent,
     HowItWorksComponent,
+    ThemeComeAddComponent,
     theme.hotspots
   ],
   imports: [

src/app/home/home.component.html

@@ -10,3 +10,5 @@ <h3> {{ pageSubtitle }} </h3>
 <app-how-it-works></app-how-it-works>
 
 <app-conversations></app-conversations>
+
+<app-theme-come-add></app-theme-come-add>

src/app/hotspots/components/theme-come-add/theme-come-add.component.ts

@@ -0,0 +1,21 @@
+import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
+import { PluginHotspot } from '../../plugin-hotspot';
+
+@Component({
+  selector: 'app-theme-come-add',
+  template: ''
+})
+export class ThemeComeAddComponent extends PluginHotspot {
+
+  constructor(private viewContainerRef: ViewContainerRef, private factory: ComponentFactoryResolver, ) {
+    super('theme_come_add');
+  }
+
+  addHotspot(component: any) {
+    const compFactory = this.factory.resolveComponentFactory(component);
+    this.viewContainerRef.clear();
+    const componentRef = this.viewContainerRef.createComponent(compFactory);
+    componentRef.changeDetectorRef.detectChanges();
+  }
+
+}

themes/theme-default/come-add/come-add.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="!isLogged()" class="main-content">
+    <div class="left-content">
+        <p class="main-text">VENHA SOMAR SUAS OPINIÕES À NOSSA REDE!</p>
+        <p class="secondary-text">Quanto mais opiniões, mais ricas serão nossas discussões</p>
+    </div>
+    <div class="right-content">
+        <button (click)="openRegistration()" class="start-now-button">
+            COMEÇAR AGORA!
+        </button>
+    </div>
+</div>

themes/theme-default/come-add/come-add.component.scss

@@ -0,0 +1,53 @@
+@import '../../../node_modules/bootstrap/scss/bootstrap';
+.main-content {
+    display: flex;
+    min-height: 300px;
+    background-color: #EDEDEE;
+    text-align: center;
+    align-items: center;
+    margin: 0 auto 0 auto;
+    justify-content: space-between;
+    width: 85vw;
+    @media screen and (max-width: 900px) {
+        flex-direction: column;
+    }
+}
+
+.left-content {
+    color: #757575;
+    text-align: left;
+    margin-left: 3vw;
+    .main-text {
+        font-size: 2em;
+        margin: 0;
+    }
+    .secondary-text {
+        margin: 0;
+    }
+    max-width: 40%;
+    @media screen and (max-width: 900px) {
+        text-align: center;
+        margin: 30px 0 30px 0;
+        max-width: 80%;
+    }
+}
+
+.right-content {
+    margin-right: 3vw;
+    width: 100%;
+    .start-now-button {
+        cursor: pointer;
+        background-color: #5F5F5F;
+        color: white;
+        border-radius: 3px;
+        width: 30vw;
+        height: 100px;
+        border: none;
+    }
+    @media screen and (max-width: 900px) {
+        margin: 0 0 50px 0;
+        .start-now-button {
+            width: 80%;
+        }
+    }
+}

themes/theme-default/come-add/come-add.component.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { Hotspot } from '../../../src/app/hotspots/hotspot.decorator';
+import { Profile } from '../../../src/app/models/profile';
+import { ProfileService } from '../../../src/app/services/profile.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { RegistrationComponent } from '../../../src/app/registration/registration.component';
+import * as _ from 'lodash';
+
+
+@Component({
+  selector: 'app-come-add',
+  templateUrl: './come-add.component.html',
+  styleUrls: ['./come-add.component.scss']
+})
+@Hotspot('theme_come_add')
+export class ComeAddComponent {
+
+  profile: Profile;
+
+  constructor(private profileService: ProfileService, private modalService: NgbModal) {
+    this.profile = <Profile>{};
+    this.profile = Object.assign(this.profile, this.profileService.getProfile());
+    this.profileService.profileChangeEvent.subscribe(profile => {
+      this.profile = profile;
+    });
+  }
+
+  isLogged() {
+    return (_.isObject(this.profile) && _.isNumber(this.profile.id));
+  }
+
+  openRegistration() {
+    const bsModalRef = this.modalService.open(RegistrationComponent);
+    bsModalRef.componentInstance.loggedIn.subscribe(() => {
+      this.profile = this.profileService.getProfile();
+      this.profileService.profileChangeEvent.emit(this.profile);
+      window.location.reload();
+    });
+  }
+}

themes/theme-default/index.ts

@@ -1,7 +1,13 @@
 import { HeaderComponent } from './header/header.component';
 import { TopHeaderComponent } from './top-header/top-header.component';
 import { FooterComponent } from './footer/footer.component';
+import { ComeAddComponent } from './come-add/come-add.component';
 
 export let name = 'default';
 export let components: any = [];
-export let hotspots: any = [ HeaderComponent, TopHeaderComponent, FooterComponent ];
+export let hotspots: any = [ 
+                HeaderComponent,
+                TopHeaderComponent, 
+                FooterComponent, 
+                ComeAddComponent 
+                ];