Implements Cookie Consent Popup

src/app/app.component.ts

@@ -1,6 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import { AuthService } from './shared/auth/auth.service';
 import {UpdateService} from "./shared/service-worker/update.service";
+import {
+    NgcCookieConsentService,
+    NgcInitializationErrorEvent,
+    NgcInitializingEvent,
+    NgcNoCookieLawEvent, NgcStatusChangeEvent
+} from "ngx-cookieconsent";
+import {Subscription} from "rxjs";
+import {CookieConsertService} from "./shared/cookie-consent/cookie-consert.service";
 
 @Component({
     selector: 'app-root',
@@ -11,12 +19,34 @@ export class AppComponent implements OnInit {
 
     title = 'frontend-hideyoshi.com';
 
-    constructor(private authService: AuthService, private serviceWorker: UpdateService) {
+    cookieStatusChangeSubscription!: Subscription;
+
+    constructor(
+        private authService: AuthService,
+        private ccService: NgcCookieConsentService,
+        private cookieConsentService: CookieConsertService,
+        private serviceWorker: UpdateService) {
         this.serviceWorker.checkForUpdates();
     }
 
     ngOnInit(): void {
         this.authService.autoLogin();
+
+        let cookieConsentStatus = this.cookieConsentService.getCookieConsentStatusFromLocalStorage();
+
+        if (cookieConsentStatus) {
+            this.ccService.fadeOut();
+        }
+
+        this.cookieStatusChangeSubscription = this.ccService.statusChange$.subscribe(
+            (event: NgcStatusChangeEvent) => {
+                if (event.status === 'allow') {
+                    this.cookieConsentService.consent();
+                } else if (event.status === 'deny') {
+                    this.cookieConsentService.decline();
+                }
+            }
+        );
     }
 
 }

src/app/header/header-popup/login/login.component.html

@@ -46,13 +46,19 @@
                 <div class="col-lg-6 authentication-body">
                     <button mat-button
                             class="oauth-button d-flex justify-content-center align-items-center"
+                            [disabled]="isCookieBlocked"
                             (click)="onGoogleLogin()">
-                        <mat-icon style="width: 50px; height:30px"
+                        <mat-icon *ngIf="!isCookieBlocked"
+                                  style="width: 50px; height:30px"
                                   svgIcon="google-logo"></mat-icon>
+                        <mat-icon *ngIf="isCookieBlocked"
+                                  style="width: 50px; height:30px"
+                                  svgIcon="google-disabled-logo"></mat-icon>
                         Login With Google
                     </button>
                     <button mat-button
                             class="oauth-button d-flex justify-content-center align-items-center"
+                            [disabled]="isCookieBlocked"
                             (click)="onGithubLogin()">
                         <mat-icon style="width: 50px; height:30px"
                                   svgIcon="github-logo"></mat-icon>

src/app/header/header-popup/login/login.component.ts

@@ -12,9 +12,12 @@ import { User } from 'src/app/shared/model/user/user.model';
 import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
 import {ValidatePasswordValidator} from "../../../shared/validators/validate-password.validator";
 import {ValidateNotEmptyValidator} from "../../../shared/validators/validate-not-empty.validator";
+import {NgcCookieConsentService, NgcStatusChangeEvent} from "ngx-cookieconsent";
+import {CookieConsertService} from "../../../shared/cookie-consent/cookie-consert.service";
 
 
 const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
+const GOOGLE_DISABLED_LOGO_SVG = "assets/img/providers/google-disabled.svg";
 const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
 
 @Component({
@@ -100,8 +103,12 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
 
     authSubject!: Subscription;
 
+    cookieStatusChangeSubscription!: Subscription;
+
     errorMessage!: string | null;
 
+    isCookieBlocked = false;
+
     isShowErrorMessage = false;
 
     _userIcon = faUser;
@@ -110,6 +117,8 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
 
     constructor(
         private authService: AuthService,
+        private ccService: NgcCookieConsentService,
+        private cookieConsentService: CookieConsertService,
         private changeDetectorRef: ChangeDetectorRef,
         private matIconRegistry: MatIconRegistry,
         private domSanitizer: DomSanitizer) {
@@ -117,6 +126,10 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
             "google-logo",
             this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
         );
+        this.matIconRegistry.addSvgIcon(
+            "google-disabled-logo",
+            this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_DISABLED_LOGO_SVG)
+        )
         this.matIconRegistry.addSvgIcon(
             "github-logo",
             this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
@@ -134,6 +147,17 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.validateLogin(res);
             }
         );
+
+        this.cookieStatusChangeSubscription = this.cookieConsentService.cookieStatusChangeSubscription.subscribe(
+            (status: boolean) => {
+                this.isCookieBlocked = !status;
+                console.log("Cookie status: " + status);
+            }
+        );
+
+        if (this.isCookieBlocked) {
+            this.ccService.fadeIn();
+        }
     }
 
     ngAfterViewInit(): void {
@@ -142,6 +166,7 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
 
     ngOnDestroy(): void {
         this.authSubject.unsubscribe();
+        this.cookieStatusChangeSubscription.unsubscribe();
     }
 
     onStateChange(state: boolean) {

src/app/shared/cookie-consent/cookie-consent.module.ts

@@ -0,0 +1,44 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NgcCookieConsentConfig, NgcCookieConsentModule} from "ngx-cookieconsent";
+
+
+const cookieConfig: NgcCookieConsentConfig = {
+    "cookie": {
+        "domain": "tinesoft.github.io"
+    },
+    "position": "bottom-right",
+    "theme": "classic",
+    "palette": {
+        "popup": {
+            "background": "#4e4e4e",
+            "text": "#ffffff",
+            "link": "#ffffff"
+        },
+        "button": {
+            "background": "#fa2f22",
+            "text": "#ffffff",
+            "border": "transparent"
+        }
+    },
+    "type": "opt-in",
+    "content": {
+        "message": "This website uses cookies to ensure you get the best experience on our website.",
+        "dismiss": "Got it!",
+        "deny": "Refuse cookies",
+        "link": "",
+        "href": "",
+        "policy": "Cookie Policy"
+    }
+};
+
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        NgcCookieConsentModule.forRoot(cookieConfig)
+    ]
+})
+export class CookieConsentModule {
+}

src/app/shared/cookie-consent/cookie-consert.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CookieConsertService } from './cookie-consert.service';
+
+describe('CookieConsertService', () => {
+  let service: CookieConsertService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CookieConsertService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/cookie-consent/cookie-consert.service.ts

@@ -0,0 +1,52 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Subject, Subscription} from "rxjs";
+import {CookieService} from "ngx-cookie-service";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CookieConsertService {
+
+    private storage: Storage;
+
+    cookieStatusChangeSubscription!: BehaviorSubject<boolean>
+
+    constructor(private cookieService: CookieService) {
+        this.storage = window.localStorage
+
+        this.cookieStatusChangeSubscription = new BehaviorSubject<boolean>(
+            this.getCookieConsentStatusFromLocalStorage()
+        );
+    }
+
+    consent() {
+        let status = true;
+
+        this.cookieStatusChangeSubscription.next(status);
+        this.setCookieConsentStatusToLocalStorage(status);
+    }
+
+    decline() {
+        let status = false;
+
+        this.cookieStatusChangeSubscription.next(status);
+        this.setCookieConsentStatusToLocalStorage(status);
+
+        this.cookieService.deleteAll();
+    }
+
+    setCookieConsentStatusToLocalStorage(status: boolean) {
+        this.storage.setItem('cookieConsentStatus', status.toString());
+    }
+
+    getCookieConsentStatusFromLocalStorage(): boolean {
+        let status = this.storage.getItem('cookieConsentStatus');
+
+        if (status === null) {
+            return false;
+        }
+
+        return status === 'true';
+    }
+
+}

src/app/shared/shared.module.ts

@@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { PopupComponent } from './components/popup/popup.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {CookieConsentModule} from "./cookie-consent/cookie-consent.module";
 
 @NgModule({
     declarations: [
@@ -18,6 +19,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
         HttpClientModule,
         BrowserAnimationsModule,
         FontAwesomeModule,
+        CookieConsentModule
     ],
     exports: [
         ClickedOutsideDirective,