Merge branch 'dev'

Author: jmuzina

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "1.10",
+  "version": "1.11",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

package.json

@@ -1,12 +1,12 @@
 <button
+  (click)="ths.toggleLightDark()"
   *ngIf="ths.activeTheme; else themeNotLoadedYet"
-  pButton
-  class="p-button p-button-text p-button-outline"
+  [attr.aria-label]="ths.darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
   [icon]="ths.activeTheme.icon"
-  (click)="ths.toggleLightDark()"
   [pTooltip]="ths.darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
-  [attr.aria-label]="ths.darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+  class="p-button p-button-text p-button-outline"
+  pButton
 ></button>
 <ng-template #themeNotLoadedYet>
-  <jm-loading-spinner [showMessage]="false" [useDots]="false"></jm-loading-spinner>
+  <jm-loading-spinner [showMessage]="false" [useDots]="false"/>
 </ng-template>

src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.html

@@ -9,25 +9,25 @@
   <div class="dev-disclaimer-nav-content">
     <div
       *ngIf="dev; else prodWIPDisclaimer"
-      id="dev-disclaimer"
       class="disclaimer-content"
+      id="dev-disclaimer"
     >
       <span class="disclaimer-message"
-        >You are currently viewing the development build, which may be
+      >You are currently viewing the development build, which may be
         unfinished or buggy.</span
       >
       <a
-        pButton
-        class="prod-nav-btn p-button p-button-raised p-button-primary"
-        [href]="exss.prodSite.address"
         (click)="exss.prodSite.open()"
+        [href]="exss.prodSite.address"
+        class="prod-nav-btn p-button p-button-raised p-button-primary"
         label="Return to production site"
+        pButton
       ></a>
     </div>
     <ng-template #prodWIPDisclaimer>
-      <div id="prod-disclaimer" class="disclaimer-content">
+      <div class="disclaimer-content" id="prod-disclaimer">
         <span class="disclaimer-message"
-          >This portfolio is a work in progress. Come back later to see what
+        >This portfolio is a work in progress. Come back later to see what
           changes!</span
         >
       </div>
@@ -37,21 +37,19 @@
 
 <div class="footer-container">
   <div class="footer-left">
-    <div class="dev-build-disclaimer-container" *ngIf="shouldShowWIPDisclaimer">
+    <div *ngIf="shouldShowWIPDisclaimer" class="dev-build-disclaimer-container">
       <button
-        pButton
-        class="disclaimer-icon p-button p-button-text"
-        icon="pi pi-exclamation-triangle"
         (click)="devDisclaimerOpen = true"
         [disabled]="devDisclaimerOpen"
+        class="disclaimer-icon p-button p-button-text"
+        icon="pi pi-exclamation-triangle"
         label="WIP"
+        pButton
       ></button>
     </div>
-    <!--  <button pButton class="attribution-button p-button p-button-text" icon="pi pi-info-circle" pTooltip="Attribution"
-      [disabled]="attributionVisible" (click)="attributionVisible = true"></button> -->
-    <jm-matomo-opt-out></jm-matomo-opt-out>
+    <jm-tracking-opt-in/>
   </div>
   <div class="social-icons-wrapper">
-    <jm-social-icons></jm-social-icons>
+    <jm-social-icons/>
   </div>
 </div>

src/app/modules/shared/components/footer/footer.component.html

@@ -1,5 +1,5 @@
-<p-menubar class="app-header" [model]="items">
+<p-menubar [model]="items" class="app-header">
   <ng-template pTemplate="end">
-    <jm-color-theme-toggler></jm-color-theme-toggler>
+    <jm-color-theme-toggler/>
   </ng-template>
 </p-menubar>

src/app/modules/shared/components/header/header.component.html

@@ -0,0 +1,32 @@
+<p-dialog
+  [(visible)]="popupOpen"
+  aria-atomic="false"
+  aria-live="polite"
+  aria-relevant="additions"
+  class="tracking-opt-in-dialogue"
+  header="Data collection opt-in"
+>
+  <div
+    *ngIf="!loading; else optStateLoading"
+    aria-atomic="false"
+    aria-live="polite"
+    aria-relevant="additions"
+    class="opt-in-container"
+  >
+    <div class="opt-btn-row">
+      <label class="opt-in-label" for="opt-in">Usage metrics:</label>
+      <p-selectButton (onChange)="handleChange($event.value)" [disabled]="loading" [ngModel]="selected.value"
+                      [options]="stateOptions"
+                      id="opt-in" name="opt-in" optionLabel="label"
+                      optionValue="value"></p-selectButton>
+    </div>
+    <span [innerHTML]="selected.message" class="opt-state-message"></span>
+  </div>
+  <ng-template #optStateLoading>
+    <jm-loading-spinner/>
+  </ng-template>
+</p-dialog>
+
+<button (click)="popupOpen=true" [attr.aria-label]="'Review privacy settings'" [disabled]="popupOpen"
+        class="p-button p-button-text" icon="pi pi-eye-slash"
+        pButton pTooltip="Review privacy settings"></button>

src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.html

@@ -1,18 +1,16 @@
-::ng-deep .opt-out-container {
+::ng-deep .opt-in-container {
   width: 100%;
 
   display: flex;
   flex-flow: column nowrap;
 
-  .opt-state-message {}
-
-  @media screen and (min-width:601px) {
+  @media screen and (min-width: 601px) {
     .opt-btn-row {
       flex-flow: row nowrap;
     }
   }
 
-  @media screen and (max-width:600px) {
+  @media screen and (max-width: 600px) {
     .opt-btn-row {
       flex-flow: column nowrap;
     }
@@ -26,5 +24,4 @@
     align-items: center;
     width: 100%;
   }
-
 }

src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.spec.ts

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

src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastService } from 'src/app/services/toast.service';
+import moment from 'moment';
+import { TrackingService } from '../../../../services/tracking.service';
+
+type TOnOff = 'on' | 'off';
+
+interface IOptInState {
+  label: string;
+  value: TOnOff;
+  message: string;
+}
+
+@Component({
+  selector: 'jm-tracking-opt-in',
+  templateUrl: './tracking-opt-in.component.html',
+  styleUrls: ['./tracking-opt-in.component.scss'],
+})
+export class TrackingOptInComponent implements OnInit {
+  popupOpen = false;
+
+  loading = false;
+
+  optedIn = false;
+
+  private _on: IOptInState = {
+    label: 'Enabled',
+    value: 'on',
+    message:
+      'You are currently sharing usage data with me. I will use this data to make this site more intuitive and featured.<br>You may turn this off at any time in this dialogue menu.',
+  };
+
+  private _off: IOptInState = {
+    label: 'Disabled',
+    value: 'off',
+    message:
+      'You are currently opted out of usage metrics tracking. I will not receive or store any of your usage data.',
+  };
+
+  selected: IOptInState = this._off;
+
+  stateOptions: IOptInState[] = [this._on, this._off];
+
+  constructor(
+    private _tsts: ToastService,
+    private _trks: TrackingService,
+  ) {}
+
+  handleChange(state: TOnOff) {
+    if (state === 'off') {
+      this._trks.trackerOptInDate = moment(moment.now());
+    } else {
+      this._trks.trackerOptInDate = null;
+    }
+
+    this._trks.trackerOptInDate = state === 'on' ? moment(moment.now()) : null;
+
+    this.refreshState();
+  }
+
+  ngOnInit(): void {
+    this.refreshState();
+  }
+
+  private refreshState() {
+    try {
+      this.loading = true;
+      this.optedIn = this._trks.isUserOptedIntoTracking();
+      this.selected = this.optedIn ? this._on : this._off;
+    } catch (err: any) {
+      console.error(err);
+      this._tsts.error({ detail: err.message });
+    } finally {
+      this.loading = false;
+    }
+  }
+}