diff --git a/angular.json b/angular.json index a4fb103..5289de1 100644 --- a/angular.json +++ b/angular.json @@ -1,145 +1,147 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "frontend-hideyoshi.com": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-builders/custom-webpack:browser", - "options": { - "customWebpackConfig": { - "path": "src/webpack.config.ts" - }, - "outputPath": "dist/frontend-hideyoshi.com", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "allowedCommonJsDependencies": [ - "ts-interface-checker" - ], - "assets": [ - "src/assets", - "src/manifest.webmanifest", - "src/manifest.webmanifest" - ], - "styles": [ - "src/styles.css", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "node_modules/normalize.css/normalize.css" - ], - "scripts": [ - "node_modules/jquery/dist/jquery.min.js", - "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" - ], - "serviceWorker": true, - "ngswConfigPath": "ngsw-config.json" - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "frontend-hideyoshi.com": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-builders/custom-webpack:browser", + "options": { + "customWebpackConfig": { + "path": "src/webpack.config.ts" + }, + "outputPath": "dist/frontend-hideyoshi.com", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "allowedCommonJsDependencies": [ + "ts-interface-checker" + ], + "assets": [ + "src/assets", + "src/manifest.webmanifest", + "src/manifest.webmanifest" + ], + "styles": [ + "src/styles.css", + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "node_modules/normalize.css/normalize.css", + "node_modules/cookieconsent/build/cookieconsent.min.css" + ], + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", + "node_modules/cookieconsent/build/cookieconsent.min.js" + ], + "serviceWorker": true, + "ngswConfigPath": "ngsw-config.json" + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "serviceWorker": true + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "serve": { + "builder": "@angular-builders/custom-webpack:dev-server", + "options": { + "browserTarget": "frontend-hideyoshi.com:build:build" + }, + "configurations": { + "production": { + "browserTarget": "frontend-hideyoshi.com:build:production", + "proxyConfig": "src/proxy.conf.json" + }, + "development": { + "browserTarget": "frontend-hideyoshi.com:build:development", + "proxyConfig": "src/proxy.conf.json" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "frontend-hideyoshi.com:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/assets", + "src/manifest.webmanifest", + "src/manifest.webmanifest" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": [ + "src/**/*.ts", + "src/**/*.html" + ] + } } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "outputHashing": "all", - "serviceWorker": true - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-builders/custom-webpack:dev-server", - "options": { - "browserTarget": "frontend-hideyoshi.com:build:build" - }, - "configurations": { - "production": { - "browserTarget": "frontend-hideyoshi.com:build:production", - "proxyConfig": "src/proxy.conf.json" - }, - "development": { - "browserTarget": "frontend-hideyoshi.com:build:development", - "proxyConfig": "src/proxy.conf.json" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "frontend-hideyoshi.com:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/assets", - "src/manifest.webmanifest", - "src/manifest.webmanifest" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-eslint/builder:lint", - "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] - } } - } - } - }, - "cli": { - "schematicCollections": [ - "@angular-eslint/schematics" - ], - "analytics": false - }, - "schematics": { - "@angular-eslint/schematics:application": { - "setParserOptionsProject": true }, - "@angular-eslint/schematics:library": { - "setParserOptionsProject": true + "cli": { + "schematicCollections": [ + "@angular-eslint/schematics" + ], + "analytics": false + }, + "schematics": { + "@angular-eslint/schematics:application": { + "setParserOptionsProject": true + }, + "@angular-eslint/schematics:library": { + "setParserOptionsProject": true + } } - } } diff --git a/package-lock.json b/package-lock.json index de7c733..fbc3996 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,9 +25,12 @@ "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "bootstrap": "^4.6.2", + "cookieconsent": "^3.1.1", "cors": "^2.8.5", "express": "^4.18.1", "jquery": "^3.6.0", + "ngx-cookie-service": "^16.0.1", + "ngx-cookieconsent": "^4.0.2", "normalize.css": "^8.0.1", "rxjs": "~7.5.0", "ts-interface-checker": "^1.0.2", @@ -6711,6 +6714,11 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "node_modules/cookieconsent": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz", + "integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag==" + }, "node_modules/copy-anything": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", @@ -11381,6 +11389,32 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ngx-cookie-service": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-16.0.1.tgz", + "integrity": "sha512-q8i5eX2b6SIIZcu9wy+lvOU65cLJhHD9EVz5TGGkKi8Y7X/aZbUyQ9U4CgNOfKDWtPUDFOMD8IW/cijoVKe59Q==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^16.0.0", + "@angular/core": "^16.0.0" + } + }, + "node_modules/ngx-cookieconsent": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ngx-cookieconsent/-/ngx-cookieconsent-4.0.2.tgz", + "integrity": "sha512-KREGRd53LV0SrFlJsk1XwgzZIEf7GAeLD3/znYF/CzTYml+SFqWrYleXA3aMtFLGqUHwbGS/fMA6cHwpvxT5JA==", + "dependencies": { + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@angular/common": ">=14.0.0", + "@angular/core": ">=14.0.0", + "cookieconsent": "^3.1.1", + "rxjs": "^7.5.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/package.json b/package.json index 69a95be..0271add 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,12 @@ "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "bootstrap": "^4.6.2", + "cookieconsent": "^3.1.1", "cors": "^2.8.5", "express": "^4.18.1", "jquery": "^3.6.0", + "ngx-cookie-service": "^16.0.1", + "ngx-cookieconsent": "^4.0.2", "normalize.css": "^8.0.1", "rxjs": "~7.5.0", "ts-interface-checker": "^1.0.2", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8b7ba6d..3ea41ac 100644 --- a/src/app/app.component.ts +++ b/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(); + } + } + ); } } diff --git a/src/app/header/header-popup/login/login.component.html b/src/app/header/header-popup/login/login.component.html index b954c83..4344a37 100644 --- a/src/app/header/header-popup/login/login.component.html +++ b/src/app/header/header-popup/login/login.component.html @@ -46,13 +46,19 @@