VIH-6934 Add a cookies page

VideoWeb/VideoWeb/ClientApp/.eslintrc.js

@@ -15,17 +15,19 @@ module.exports = {
     env: {
         browser: true,
         es6: true,
-        node: true
+        node: true,
+        jasmine: true
     },
     ignorePatterns: ['projects/**/*'],
     parser: '@typescript-eslint/parser',
     parserOptions: {
         project: 'tsconfig.json',
         sourceType: 'module'
     },
-    plugins: ['eslint-plugin-import', '@angular-eslint/eslint-plugin', '@typescript-eslint', '@typescript-eslint/tslint'],
+    plugins: ['eslint-plugin-import', '@angular-eslint/eslint-plugin', '@typescript-eslint', '@typescript-eslint/tslint', 'jasmine'],
     root: true,
     rules: {
+        'jasmine/no-focused-tests': 'error',
         '@angular-eslint/component-class-suffix': 'error',
         '@angular-eslint/directive-class-suffix': 'error',
         '@angular-eslint/no-host-metadata-property': 'error',

VideoWeb/VideoWeb/ClientApp/package.json

@@ -94,6 +94,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jasmine": "^4.1.3",
     "install-peers": "^1.0.3",
     "jasmine-core": "~4.6.0",
     "jasmine-spec-reporter": "~7.0.0",

VideoWeb/VideoWeb/ClientApp/src/app/shared/cookies/cookies.component.html

@@ -0,0 +1,94 @@
+<div class="govuk-grid-row govuk-!-margin-top-5">
+  <div class="govuk-grid-column-full">
+    <h1 class="govuk-heading-xl govuk-!-padding-top-5">{{ 'cookies.title' | translate }}</h1>
+    <p class="govuk-body">
+      {{ 'cookies.intro' | translate }}
+    </p>
+    <p class="govuk-body">{{ 'cookies.uses' | translate }}</p>
+    <ul class="govuk-list govuk-list--bullet">
+      <li>{{ 'cookies.usesList.item1' | translate }}</li>
+      <li>{{ 'cookies.usesList.item2' | translate }}</li>
+    </ul>
+
+    <h2 class="govuk-heading-m">{{ 'cookies.essentialCookiesTitle' | translate }}</h2>
+    <p class="govuk-body">
+      {{ 'cookies.essentialCookiesDesc' | translate }}
+    </p>
+    <p class="govuk-body">
+      {{ 'cookies.manageCookiesStart' | translate }}
+      <a target="_blank" href="http://www.aboutcookies.org/" rel="noopener noreferrer">{{ 'cookies.manageCookiesEnd' | translate }}</a
+      >.
+    </p>
+
+    <h2 id="how-cookies-are-used-in-this-service" class="govuk-heading-l">{{ 'cookies.usageTitle' | translate }}</h2>
+    <h3 class="govuk-heading-m">{{ 'cookies.usageMeasureTitle' | translate }}</h3>
+    <p id="usage-description" class="govuk-body">{{ 'cookies.usageMeasureDesc' | translate }}</p>
+
+    <table id="essential-uses-table" class="govuk-table" aria-describedby="usage-description">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th scope="col" class="govuk-table__header">{{ 'cookies.usageTable.headers.name' | translate }}</th>
+          <th scope="col" class="govuk-table__header">{{ 'cookies.usageTable.headers.purpose' | translate }}</th>
+          <th scope="col" class="govuk-table__header">{{ 'cookies.usageTable.headers.expires' | translate }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr scope="col" class="govuk-table__row">
+          <td class="govuk-table__cell">ai_session</td>
+          <td class="govuk-table__cell">{{ 'cookies.usageTable.row1.purpose' | translate }}</td>
+          <td class="govuk-table__cell">{{ 'cookies.usageTable.row1.expires' | translate }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 class="govuk-heading-m">{{ 'cookies.identifyTitle' | translate }}</h3>
+    <p id="identify-desc">{{ 'cookies.identifyDesc' | translate }}</p>
+    <table id="authentication-uses-table" class="govuk-table" aria-describedby="identify-desc">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th scope="col" class="govuk-table__header">{{ 'cookies.identifyTable.headers.name' | translate }}</th>
+          <th scope="col" class="govuk-table__header">{{ 'cookies.identifyTable.headers.purpose' | translate }}</th>
+          <th scope="col" class="govuk-table__header">{{ 'cookies.identifyTable.headers.expires' | translate }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">__userid__</td>
+          <td class="govuk-table__cell">{{ 'cookies.identifyTable.row1.purpose' | translate }}</td>
+          <td class="govuk-table__cell">{{ 'cookies.identifyTable.row1.expires' | translate }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 class="govuk-heading-m">{{ 'cookies.securityTitle' | translate }}</h3>
+    <p id="security-desc">
+      {{ 'cookies.securityDesc' | translate }}
+    </p>
+    <table id="security-table" class="govuk-table" aria-describedby="security-desc">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th scope="col" class="govuk-table__header">{{ 'cookies.securityTable.headers.name' | translate }}</th>
+          <th scope="col" class="govuk-table__header">{{ 'cookies.securityTable.headers.purpose' | translate }}</th>
+          <th scope="col" class="govuk-table__header">{{ 'cookies.securityTable.headers.expires' | translate }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">vhaad</td>
+          <td class="govuk-table__cell">{{ 'cookies.securityTable.row1.purpose' | translate }}</td>
+          <td class="govuk-table__cell">{{ 'cookies.securityTable.row1.expires' | translate }}</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">ejud</td>
+            <td class="govuk-table__cell">{{ 'cookies.securityTable.row2.purpose' | translate }}</td>
+            <td class="govuk-table__cell">{{ 'cookies.securityTable.row2.expires' | translate }}</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">dom1</td>
+            <td class="govuk-table__cell">{{ 'cookies.securityTable.row3.purpose' | translate }}</td>
+            <td class="govuk-table__cell">{{ 'cookies.securityTable.row3.expires' | translate }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

VideoWeb/VideoWeb/ClientApp/src/app/shared/cookies/cookies.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CookiesComponent } from './cookies.component';
+import { TranslatePipeMock } from 'src/app/testing/mocks/mock-translation-pipe';
+
+describe('CookiesComponent', () => {
+    let component: CookiesComponent;
+    let fixture: ComponentFixture<CookiesComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [CookiesComponent, TranslatePipeMock]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(CookiesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

VideoWeb/VideoWeb/ClientApp/src/app/shared/cookies/cookies.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-cookies',
+    templateUrl: './cookies.component.html'
+})
+export class CookiesComponent {}

VideoWeb/VideoWeb/ClientApp/src/app/shared/directives/scroll-trigger.directive.spec.ts

@@ -76,11 +76,6 @@ describe('ScrollableDirective', () => {
         expect(eventRaised).toBe(true);
     });
 
-    it('check offset from footer raised event with true parameter', () => {
-        directive.margin = 100;
-        expect(directive.checkOffset(200)).toBe(false);
-    });
-
     it('check offset from footer raised event with false parameter', () => {
         directive.margin = -200;
         spyOnProperty(window, 'innerHeight', 'get').and.returnValue(documentHeight);

VideoWeb/VideoWeb/ClientApp/src/app/shared/footer/footer.component.html

@@ -13,6 +13,11 @@
                             {{ 'footer.accessibility' | translate }}
                         </a>
                     </li>
+                    <li class="govuk-footer__inline-list-item">
+                        <a class="govuk-footer__link" [routerLink]="[cookiesUri]">
+                            {{ 'footer.cookies' | translate }}
+                        </a>
+                    </li>
                     <li class="govuk-footer__inline-list-item">
                         <a class="govuk-footer__link" id="translateSwitch" [routerLink]="[]" (click)="switchLaguage();">
                             {{ 'footer.translate-to' | translate }}

VideoWeb/VideoWeb/ClientApp/src/app/shared/footer/footer.component.ts

@@ -15,6 +15,7 @@ export class FooterComponent implements OnInit, OnDestroy {
     hideContactUsLink = false;
     privacyPolicyUri = pageUrls.PrivacyPolicy;
     accessibilityUri = pageUrls.Accessibility;
+    cookiesUri = pageUrls.Cookies;
     routerEventsSubscription$: Subscription = new Subscription();
     hearingVenueIsInScotland$: Observable<boolean>;
 

VideoWeb/VideoWeb/ClientApp/src/app/shared/page-url.constants.ts

@@ -50,5 +50,6 @@ export const pageUrls = {
     UnsupportedBrowser: 'unsupported-browser',
     PrivacyPolicy: 'privacy-policy',
     Accessibility: 'accessibility',
+    Cookies: 'cookies',
     ErrorCameraMicrophone: 'error-camera-microphone'
 };

VideoWeb/VideoWeb/ClientApp/src/app/shared/shared-routing.module.ts

@@ -9,13 +9,15 @@ import { UnsupportedBrowserComponent } from './unsupported-browser/unsupported-b
 import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
 import { AccessibilityComponent } from './accessibility/accessibility.component';
 import { ErrorCameraMicrophoneComponent } from './error-camera-microphone/error-camera-microphone.component';
+import { CookiesComponent } from './cookies/cookies.component';
 
 export const routes: Routes = [
     { path: `${pageUrls.ContactUs}`, component: ContactUsComponent, canActivate: [AuthGuard] },
     { path: `${pageUrls.ServiceError}`, component: ErrorComponent },
     { path: `${pageUrls.NotFound}`, component: NotFoundComponent },
     { path: `${pageUrls.UnsupportedBrowser}`, component: UnsupportedBrowserComponent },
     { path: `${pageUrls.PrivacyPolicy}`, component: PrivacyPolicyComponent },
+    { path: `${pageUrls.Cookies}`, component: CookiesComponent, data: { title: 'Cookies' } },
     { path: `${pageUrls.Accessibility}`, component: AccessibilityComponent },
     { path: `${pageUrls.ErrorCameraMicrophone}`, component: ErrorCameraMicrophoneComponent }
 ];

VideoWeb/VideoWeb/ClientApp/src/app/shared/shared.module.ts

@@ -96,6 +96,7 @@ import { ProfileService } from '../services/api/profile.service';
 import { AppInsightsLoggerService } from '../services/logging/loggers/app-insights-logger.service';
 import { SecurityConfigSetupService } from '../security/security-config-setup.service';
 import { TruncatableTextComponent } from './truncatable-text/truncatable-text.component';
+import { CookiesComponent } from './cookies/cookies.component';
 
 export function getSettings(configService: ConfigService) {
     return () => configService.loadConfig();
@@ -155,7 +156,8 @@ export function getSettings(configService: ConfigService) {
         RoomNamePipe,
         HookElementDirective,
         RandomPipe,
-        TruncatableTextComponent
+        TruncatableTextComponent,
+        CookiesComponent
     ],
     providers: [
         { provide: Logger, useClass: LoggerService },

VideoWeb/VideoWeb/ClientApp/src/assets/i18n/cy.json

@@ -258,6 +258,7 @@
   "footer": {
     "privacy-policy": "Polisi preifatrwydd",
     "accessibility": "Hygyrchedd",
+    "cookies": "Cwcis",
     "translate-to": "View this service in English",
     "all-content-availabe-under": "Mae'r holl gynnwys ar gael dan y ",
     "open-government-license": "Drwydded Llywodraeth Agored f3.0,",
@@ -1402,5 +1403,70 @@
   "false": "Naddo",
   "allocations-toastr": {
     "header": "Gwrandawiad newydd wedi'i ddyrannu"
+  },
+  "cookies": {
+    "title": "Cwcis",
+    "intro": "Darn bach o ddata sy'n cael ei storio ar eich cyfrifiadur, eich tabled neu eich ffôn symudol pan fyddwch yn ymweld â gwefan yw cwci. Mae angen cwcis ar y rhan fwyaf o wefannau i weithio'n iawn.",
+    "uses": "Mae’r gwasanaeth hwn yn eu defnyddio i:",
+    "usesList": {
+      "item1": "fesur sut ydych yn defnyddio’r gwasanaeth fel y gallwn ei wella",
+      "item2": "storio eich dewisiadau cwcis dros dro"
+    },
+    "essentialCookiesTitle": "Cwcis hanfodol",
+    "essentialCookiesDesc": "Mae cwcis hanfodol yn cadw eich gwybodaeth yn ddiogel tra rydych yn cymryd rhan mewn Gwrandawiadau Fideo. Nid oes rhaid inni ofyn am ganiatâd i’w defnyddio.",
+    "manageCookiesStart": "Darganfyddwch fwy am ",
+    "manageCookiesEnd": "sut i reoli cwcis.",
+    "usageTitle": "Sut defnyddir cwcis yn y gwasanaeth hwn",
+    "usageMeasureTitle": "I fesur faint o bobl sy’n defnyddio ein gwefan",
+    "usageMeasureDesc": "Rydym yn defnyddio gwasanaethau trydydd parti i ddadansoddi ymweliadau â’r wefan",
+    "usageTable": {
+      "headers": {
+        "name": "Enw",
+        "purpose": "Pwrpas",
+        "expires": "Dyddiad dod i ben"
+      },
+      "row1": {
+        "purpose": "ID defnyddiwr a gynhyrchwyd ar gyfer tracio defnydd (Application Insights)",
+        "expires": "Defnydd"
+      }
+    },
+    "identifyTitle": "Eich adnabod pan fyddwch yn dod yn ôl at y gwasanaeth",
+    "identifyDesc": "Rydym yn defnyddio cwcis dilysu i’ch adnabod pan fyddwch yn dod yn ôl i’r gwasanaeth.",
+    "identifyTable": {
+      "headers": {
+        "name": "Enw",
+        "purpose": "Pwrpas",
+        "expires": "Dyddiad dod i ben"
+      },
+      "row1": {
+        "name": "__userid__",
+        "purpose": "Eich ID defnyddiwr",
+        "expires": "Pan fyddwch yn cau eich porwr"
+      }
+    },
+    "securityTitle": "Gwneud y gwasanaeth yn fwy diogel",
+    "securityDesc": "Rydym yn gosod cwcis sy'n atal mynediad heb awdurdod i'r gwasanaeth. Mae hyn yn gwneud y gwasanaeth yn fwy diogel ac yn diogelu eich gwybodaeth bersonol.",
+    "securityTable": {
+      "headers": {
+        "name": "Enw",
+        "purpose": "Pwrpas",
+        "expires": "Dyddiad dod i ben"
+      },
+      "row1": {
+        "name": "vhaad",
+        "purpose": "Defnyddir i ddiogelu cyfathrebu gyda gwasanaethau data GLlTEF.",
+        "expires": "Pan fyddwch yn cau eich porwr"
+      },
+      "row2": {
+        "name": "ejud",
+        "purpose": "Defnyddir i ddiogelu cyfathrebu gyda gwasanaethau data GLlTEF.",
+        "expires": "Pan fyddwch yn cau eich porwr"
+      },
+      "row3": {
+        "name": "dom1",
+        "purpose": "Defnyddir i ddiogelu cyfathrebu gyda gwasanaethau data GLlTEF.",
+        "expires": "Pan fyddwch yn cau eich porwr"
+      }
+    }
   }
 }