feat: Add Privacy-notice page

AB#32799
global-121 · Jan 22, 2025 · b9f6784 · b9f6784
1 parent ab9df93
commit b9f6784
Show file tree

Hide file tree

Showing 11 changed files with 349 additions and 46 deletions.
diff --git a/interfaces/Portalicious/src/app/app.routes.ts b/interfaces/Portalicious/src/app/app.routes.ts
@@ -12,6 +12,7 @@ export enum AppRoutes {
   authCallback = 'auth-callback',
   changePassword = 'change-password',
   login = 'login',
+  privacy = 'privacy',
   project = 'project',
   projectMonitoring = 'monitoring',
   projectPayments = 'payments',
@@ -33,6 +34,14 @@ export const routes: Routes = [
     loadComponent: () =>
       import('~/pages/login/login.page').then((x) => x.LoginPageComponent),
   },
+  {
+    path: AppRoutes.privacy,
+    title: $localize`:@@page-title-privacy:Privacy`,
+    loadComponent: () =>
+      import('~/pages/privacy/privacy.page').then(
+        (x) => x.PrivacyPageComponent,
+      ),
+  },
   {
     path: AppRoutes.authCallback,
     title: $localize`:@@generic-loading:Loading...`,

diff --git a/...faces/Portalicious/src/app/components/page-layout/components/footer/footer.component.html b/...faces/Portalicious/src/app/components/page-layout/components/footer/footer.component.html
@@ -1,3 +1,20 @@
 <div class="bg-navy px-6 py-2 text-end text-white txt-body-m lg:px-24">
+  <a
+    i18n="@@page-title-privacy"
+    [attr.rel]="'privacy-policy'"
+    [routerLink]="['/', AppRoutes.privacy]"
+    class="hover:underline focus:underline"
+    >Privacy</a
+  >
+
+  <span
+    class="text-grey-500"
+    aria-hidden="true"
+    role="presentation"
+    class="px-2"
+  >
+    &vellip;
+  </span>
+
   &copy; 510 {{ currentYear }}
 </div>
diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/footer/footer.component.ts b/interfaces/Portalicious/src/app/components/page-layout/components/footer/footer.component.ts
@@ -1,11 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { AppRoutes } from '~/app.routes';
 
 @Component({
   selector: 'app-footer',
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './footer.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
+  AppRoutes = AppRoutes;
   currentYear: number = new Date().getFullYear();
 }
diff --git a/...faces/Portalicious/src/app/components/page-layout/components/header/header.component.html b/...faces/Portalicious/src/app/components/page-layout/components/header/header.component.html
@@ -18,26 +18,29 @@
     <app-logo [projectId]="projectId()" />
   </ng-template>
   <ng-template pTemplate="end">
-    <div class="flex items-center lg:px-20">
-      <app-button-menu
-        label="Account"
-        i18n-label="Top-right user-menu@@header-user-menu"
-        [icon]="'pi pi-user'"
-        [menuItems]="userMenuOptions()"
-        class="[&_.p-button-label]:duration-0 [&_button:focus]:bg-white [&_button:not(:hover,:focus)]:text-white"
-        [plain]="true"
-        [text]="true"
-        [size]="'small'"
-      >
-        <p
-          menu-start
-          class="mb-2 border-b border-b-grey-300 px-3 py-2"
+    @if (!!userName()) {
+      <div class="flex items-center lg:px-20">
+        <app-button-menu
+          label="Account"
+          i18n-label="Top-right user-menu@@header-user-menu"
+          [icon]="'pi pi-user'"
+          [menuItems]="userMenuOptions()"
+          class="[&_.p-button-label]:duration-0 [&_button:focus]:bg-white [&_button:not(:hover,:focus)]:text-white"
+          [plain]="true"
+          [text]="true"
+          [size]="'small'"
         >
-          <ng-container i18n>Logged in as:</ng-container><br />
-          <strong>{{ userName() }}</strong>
-        </p>
-      </app-button-menu>
-    </div>
+          <p
+            menu-start
+            class="mb-2 border-b border-b-grey-300 px-3 py-2"
+          >
+            <ng-container i18n>
+              Logged in as: <strong>{{ userName() }}</strong>
+            </ng-container>
+          </p>
+        </app-button-menu>
+      </div>
+    }
   </ng-template>
 </p-toolbar>
 <p-drawer
@@ -72,7 +75,11 @@
         @for (sidebarLink of sidebarLinks(); track $index) {
           <a
             [routerLink]="sidebarLink.routerLink"
-            [routerLinkActive]="['font-bold', 'pointer-events-none']"
+            [routerLinkActive]="[
+              'font-bold',
+              'pointer-events-none',
+              'focus:text-black',
+            ]"
             [ariaCurrentWhenActive]="'page'"
             class="block w-full rounded-none border-t border-grey-300 px-6 py-4 font-display hover:text-purple focus:bg-grey-300 focus:text-purple"
           >
@@ -81,7 +88,8 @@
         }
         <a
           href="https://manual.121.global/"
-          class="inline-flex w-full items-center rounded-none border-t border-grey-300 px-6 py-4 font-display hover:text-purple focus:bg-grey-300 focus:text-purple"
+          [attr.rel]="'help'"
+          class="inline-flex w-full items-center border-t border-grey-300 px-6 py-4 font-display hover:text-purple focus:bg-grey-300 focus:text-purple"
           target="_blank"
           title="Opens in a new window"
           i18n-title="@@generic-opens-in-new-window"
@@ -93,7 +101,7 @@
         </a>
         <a
           href="mailto:support@121.global"
-          class="inline-flex w-full items-center rounded-none border-t border-grey-300 px-6 py-4 font-display hover:text-purple focus:bg-grey-300 focus:text-purple"
+          class="inline-flex w-full items-center border-t border-grey-300 px-6 py-4 font-display hover:text-purple focus:bg-grey-300 focus:text-purple"
           target="_blank"
           title="Opens in a new window"
           i18n-title="@@generic-opens-in-new-window"

diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/header/header.component.ts b/interfaces/Portalicious/src/app/components/page-layout/components/header/header.component.ts
@@ -46,6 +46,7 @@ import { AuthService } from '~/services/auth.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
+  AppRoutes = AppRoutes;
   private authService = inject(AuthService);
   projectId = input<string>();
 

diff --git a/interfaces/Portalicious/src/app/pages/login/login.page.html b/interfaces/Portalicious/src/app/pages/login/login.page.html
@@ -25,17 +25,11 @@ <h1 i18n="@@page-title-login">Log in</h1>
         <app-form-error [error]="authError" />
         <p class="mt-2">
           <a
-            href="https://manual.121.global/privacy-policy/"
-            target="_blank"
-            title="Opens in a new window"
-            i18n-title="@@generic-opens-in-new-window"
+            i18n
+            [attr.rel]="'privacy-policy'"
+            [routerLink]="['/', AppRoutes.privacy]"
+            >Read our Privacy notice</a
           >
-            <span i18n>Read our Privacy Policy</span>
-            <i
-              class="pi pi-external-link ml-1 text-xs"
-              aria-hidden="true"
-            ></i
-          ></a>
         </p>
       </div>
       <div class="mb-4">

diff --git a/interfaces/Portalicious/src/app/pages/login/login.page.ts b/interfaces/Portalicious/src/app/pages/login/login.page.ts
@@ -5,10 +5,11 @@ import {
   computed,
   inject,
 } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { ToolbarModule } from 'primeng/toolbar';
 
+import { AppRoutes } from '~/app.routes';
 import { FormErrorComponent } from '~/components/form-error/form-error.component';
 import { LanguageSwitcherComponent } from '~/components/language-switcher/language-switcher.component';
 import { LogoComponent } from '~/components/logo/logo.component';
@@ -25,12 +26,14 @@ import { AUTH_ERROR_IN_STATE_KEY, AuthService } from '~/services/auth.service';
     LanguageSwitcherComponent,
     NgComponentOutlet,
     FormErrorComponent,
+    RouterLink,
   ],
   templateUrl: './login.page.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginPageComponent {
+  AppRoutes = AppRoutes;
   private authService = inject(AuthService);
   private router = inject(Router);
   private route = inject(ActivatedRoute);

diff --git a/interfaces/Portalicious/src/app/pages/privacy/privacy.page.html b/interfaces/Portalicious/src/app/pages/privacy/privacy.page.html
@@ -0,0 +1,100 @@
+<!--
+  NOTE: Make sure to update the LastUpdated-date whenever the text of the privacy notice is (significantly) changed.
+-->
+@let lastUpdated = '2025-01-21';
+@let privacyOfficerEmail = 'privacy@redcross.nl';
+
+<app-page-layout
+  pageTitle="Privacy"
+  i18n-pageTitle="@@page-title-privacy"
+  class="[&_h2]:mb-2 [&_h2]:mt-6"
+>
+  <p i18n="@@privacy-notice-last-updated">
+    Last updated:
+    <time [attr.datetime]="lastUpdated | date: 'YYYYMMdd'">{{
+      lastUpdated | date: 'shortDate'
+    }}</time>
+  </p>
+
+  <br />
+
+  <p i18n>
+    This privacy notice tells you what to expect us to do with your personal
+    information when you use the 121 Platform.
+  </p>
+
+  <h2 i18n>Where we get personal information from</h2>
+
+  <ul class="mx-0 list-outside list-disc ps-4">
+    <li>
+      <strong i18n>Information you or your employer has provided us.</strong>
+      <p i18n>Your e-mail address and/or your (full) name.</p>
+    </li>
+    <li>
+      <strong i18n>Information automatically collected about you</strong>
+      <p i18n>
+        Your IP-address and some information about the device and web-browser
+        you use to access the 121 Platform.
+      </p>
+    </li>
+  </ul>
+
+  <h2 i18n>How long we keep information</h2>
+
+  <ul class="mx-0 list-outside list-disc ps-4">
+    <li>
+      <strong i18n>Personal information: e-mail and name.</strong>
+      <p i18n>
+        We retain your e-mail address and name for as long as you are a user
+        associated with a project/program on the 121 Platform.
+      </p>
+      <p i18n>
+        We retain your e-mail address for as long as a project/program is stored
+        on the 121 Platform.
+      </p>
+    </li>
+    <li>
+      <strong i18n>Personal information: IP-address.</strong>
+      <p i18n>
+        We don't store your IP-address. We only use it to generate an anonymous
+        identifier not linked to any personal information.
+      </p>
+      <p i18n>
+        This identifier is stored for max. 90 days in our logs-storage.
+      </p>
+    </li>
+  </ul>
+
+  <h2 i18n>Who we share information with</h2>
+
+  <p i18n>
+    The data of the 121 Platform is hosted in a Microsoft Azure-environment of
+    The Netherlands Red Cross.
+  </p>
+  <p i18n>We do not share any personal information with other third-parties.</p>
+
+  <h2 i18n>Cookies</h2>
+
+  <p i18n>
+    We only use necessary cookies to be able to let users log in to the 121
+    Platform. These cookies are not used to track any (returning) use of the 121
+    Platform over time.
+  </p>
+
+  <h2 i18n>How to contact us</h2>
+
+  <p i18n>
+    If you have any questions regarding your privacy and the 121 Platform, feel
+    free to contact us at:
+    <a [href]="'mailto:' + privacyOfficerEmail">{{ privacyOfficerEmail }}</a>
+  </p>
+
+  <br />
+
+  <p i18n="@@privacy-notice-last-updated">
+    Last updated:
+    <time [attr.datetime]="lastUpdated | date: 'YYYYMMdd'">{{
+      lastUpdated | date: 'shortDate'
+    }}</time>
+  </p>
+</app-page-layout>
diff --git a/interfaces/Portalicious/src/app/pages/privacy/privacy.page.ts b/interfaces/Portalicious/src/app/pages/privacy/privacy.page.ts
@@ -0,0 +1,13 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { PageLayoutComponent } from '~/components/page-layout/page-layout.component';
+
+@Component({
+  selector: 'app-privacy-page',
+  imports: [PageLayoutComponent, DatePipe],
+  templateUrl: './privacy.page.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrivacyPageComponent {}