Merge pull request #286 from SharebookBR/release

Cookie Consent

src/app/app.component.html

@@ -2,4 +2,6 @@
 
 <router-outlet></router-outlet>
 
+<app-cookie-consent></app-cookie-consent>
+
 <app-footer></app-footer>

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { AboutComponent } from './components/about/about.component';
 import { ContributeProjectComponent } from './components/contribute-project/contribute-project.component';
 import { HeaderComponent } from './components/header/header.component';
 import { FooterComponent } from './components/footer/footer.component';
+import { CookieConsentComponent } from './components/cookieconsent/cookieconsent.component';
 import { FormComponent as BookFormComponent } from './components/book/form/form.component';
 import { DetailsComponent as BookDetailComponent } from './components/book/details/details.component';
 import { RegisterComponent } from './components/register/register.component';
@@ -51,7 +52,11 @@ import { ListComponent } from './components/book/list/list.component';
 import { DonateComponent } from './components/book/donate/donate.component';
 import { Ng2SmartTableModule } from 'ng2-smart-table';
 import { NgbModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
-import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';
+import {
+  RecaptchaModule,
+  RECAPTCHA_SETTINGS,
+  RecaptchaSettings,
+} from 'ng-recaptcha';
 import { RecaptchaFormsModule } from 'ng-recaptcha/forms';
 import { NgxMaskModule } from 'ngx-mask';
 import { RequestComponent } from './components/book/request/request.component';
@@ -95,7 +100,8 @@ import { DonatePageComponent } from './components/book/donate-page/donate-page.c
     TrackingComponent,
     FacilitatorNotesComponent,
     MainUsersComponent,
-    PrivacyPolicyComponent
+    PrivacyPolicyComponent,
+    CookieConsentComponent,
   ],
   imports: [
     BrowserModule,
@@ -114,7 +120,7 @@ import { DonatePageComponent } from './components/book/donate-page/donate-page.c
     NgxMaskModule.forRoot(),
     InputSearchModule,
     BrowserAnimationsModule,
-    ToastrModule.forRoot()
+    ToastrModule.forRoot(),
   ],
   providers: [
     AuthGuardUser,
@@ -130,10 +136,12 @@ import { DonatePageComponent } from './components/book/donate-page/donate-page.c
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
     {
       provide: RECAPTCHA_SETTINGS,
-      useValue: { siteKey: '6LcxaXAUAAAAAGM8zgwQvgMuykwiBPgMr0P7sNL3' } as RecaptchaSettings
+      useValue: {
+        siteKey: '6LcxaXAUAAAAAGM8zgwQvgMuykwiBPgMr0P7sNL3',
+      } as RecaptchaSettings,
     },
     { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
-    AuthGuardAdmin
+    AuthGuardAdmin,
     // provider used to create fake backend
     // fakeBackendProvider
   ],
@@ -143,9 +151,9 @@ import { DonatePageComponent } from './components/book/donate-page/donate-page.c
     ConfirmationDialogComponent,
     TrackingComponent,
     FacilitatorNotesComponent,
-    MainUsersComponent
+    MainUsersComponent,
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {
   constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {} // <-- We inject the service here to keep it alive whole time

src/app/components/cookieconsent/cookieconsent.component.html

@@ -0,0 +1,7 @@
+<div class="cookieconsent" *ngIf="!consentHide">
+    <span>{{consent.text}}<a routerLink="/politica-privacidade">{{consent.link}}</a></span>
+    <div>
+        <button class="btnaccept" (click)="consentUser(true)">{{consent.accept}}</button>
+        <button class="btnclose" (click)="consentUser(false)">{{consent.close}}</button>
+    </div>
+</div>

src/app/components/cookieconsent/cookieconsent.component.scss

@@ -0,0 +1,50 @@
+.cookieconsent {
+  position: fixed;
+  z-index: 9999;
+  background: #f0f0f0;
+  width: 100%;
+  bottom: 0;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  span {
+    font-size: 1.1rem;
+    padding: 0 10px;
+  }
+  a {
+    color: #676767;
+    margin-left: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration: underline;
+    font-size: 1.1rem;
+  }
+  div {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    .btnaccept {
+      border: none;
+      padding: 10px 15px;
+      background: #444;
+      color: #fff;
+      margin-right: 25px;
+      outline: none;
+      border-radius: 0.25rem;
+    }
+    .btnclose {
+      background: none;
+      color: #444;
+      border: none;
+      outline: none;
+    }
+  }
+}

src/app/components/cookieconsent/cookieconsent.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CookieconsentComponent } from './cookieconsent.component';
+
+describe('CookieconsentComponent', () => {
+  let component: CookieconsentComponent;
+  let fixture: ComponentFixture<CookieconsentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CookieconsentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CookieconsentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/cookieconsent/cookieconsent.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cookie-consent',
+  templateUrl: './cookieconsent.component.html',
+  styleUrls: ['./cookieconsent.component.scss'],
+})
+export class CookieConsentComponent implements OnInit {
+  public consent: any = {
+    text:
+      'Esse site salva cookies para uma melhor experiência de usuário. Saiba mais lendo nossa',
+    link: 'Política de Privacidade.',
+    accept: 'Quero continuar',
+    close: 'Fechar',
+  };
+  public consentHide: any =
+    localStorage.getItem('cookieconsent_status') == null
+      ? false
+      : localStorage.getItem('cookieconsent_status');
+  constructor() {}
+
+  ngOnInit() {}
+
+  public consentUser(decision) {
+    switch (decision) {
+      case true:
+        localStorage.setItem('cookieconsent_status', 'true');
+        this.consentHide = true;
+        break;
+      default:
+        this.consentHide = true;
+        break;
+    }
+  }
+}