Don 1065 logout in menu

package.json

@@ -44,8 +44,8 @@
     "@angular/platform-server": "^18.2.8",
     "@angular/router": "^18.2.8",
     "@angular/ssr": "^18.2.8",
-    "@biggive/components": "^202412041511.0.0",
-    "@biggive/components-angular": "^202412041511.0.0",
+    "@biggive/components": "^202412181130.0.0",
+    "@biggive/components-angular": "^202412181130.0.0",
     "@fortawesome/angular-fontawesome": "~0.15.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",

src/app/app-routing.ts

@@ -218,6 +218,19 @@ const routes: Routes = [
       redirectIfAlreadyLoggedIn,
     ],
   },
+  /** For use when donor clicks logout in the menu on the wordpress site **/
+  {
+    component: LoginComponent, // Angular requires we set a component but it will never be used as `canActivate` always
+                               // redirects.
+    path: 'logout',
+    pathMatch: 'full',
+    canActivate: [
+      async () => {
+        inject(IdentityService).logout();
+        await inject(Router).navigate(['/'], {replaceUrl: true});
+      },
+    ],
+  },
   {
     path: 'login',
     pathMatch: 'full',

src/app/app.component.ts

@@ -178,6 +178,12 @@ export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
     this.cookiePreferenceService.agreeToAll();
   }
 
+  @HostListener('logoutClicked', ['$event'])
+  onLogoutClicked(_event: CustomEvent) {
+    this.identityService.logout();
+    void this.router.navigate(['']);
+  }
+
   @HostListener('preferenceModalClosed', ['$event'])
   async onCookieBannerPreferenceModalClosed(_event: CustomEvent) {
     if (this.showingDedicatedCookiePreferencesPage) {

src/app/identity.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {EventEmitter, Inject, Injectable, InjectionToken} from '@angular/core';
 import jwtDecode from 'jwt-decode';
 import {CookieService} from 'ngx-cookie-service';
@@ -20,6 +20,10 @@ export const TBG_DONATE_ID_STORAGE = new InjectionToken<StorageService>('TBG_DON
   providedIn: 'root',
 })
 export class IdentityService {
+  /** Cookie to share with WP which needs to know whether we're logged in as a donor to be able to show the
+   * correct menu variant but does not need access to the actual session cookie that holds the JWT.
+   */
+  private readonly isLoggedInCookieName = 'IS_LOGGED_IN';
   private readonly cookieName = 'SESSION';
   private readonly loginPath = '/auth';
   private readonly peoplePath = '/people';
@@ -160,10 +164,12 @@ export class IdentityService {
 
   logout() {
     this.cookieService.delete(this.cookieName);
+    this.cookieService.delete(this.isLoggedInCookieName);
     this.cookieService.delete(STRIPE_SESSION_SECRET_COOKIE_NAME);
 
     // delete didn't seem to work reliably, so also directly setting an empty cookie that expires in the past here:
     this.cookieService.set(this.cookieName, '', new Date('1970-01-01'), '/')
+    this.cookieService.set(this.isLoggedInCookieName, '', new Date('1970-01-01'), '/');
     this.cookieService.set(STRIPE_SESSION_SECRET_COOKIE_NAME, '', new Date('1970-01-01'), '/')
     this.storage.remove(this.storageKey);
     this.loginStatusChanged.emit(false);
@@ -208,6 +214,19 @@ export class IdentityService {
   saveJWT(id: string, jwt: string) {
     const daysTilExpiry = 1;
     this.cookieService.set(this.cookieName, JSON.stringify({id, jwt}), daysTilExpiry, '/');
+    if (this.probablyHaveLoggedInPerson()) {
+      this.cookieService.set(this.isLoggedInCookieName, 'true', daysTilExpiry, '/', this.domainSharedWithWordpress());
+    }
+  }
+
+  private domainSharedWithWordpress() {
+    const hostname = new URL(environment.donateUriPrefix).hostname;
+    const parts = hostname.split('.');
+    parts.shift();
+
+    // length will be zero when domain is localhost. In other cases we have a shared domain above that
+    // with our WordPress site.
+    return parts.length === 0 ? hostname : parts.join('.');
   }
 
   getFundingInstructions(id: string, jwt: string): Observable<FundingInstruction> {

src/app/my-account/my-account.component.html

@@ -159,17 +159,5 @@ <h3>
         }
       </biggive-page-section>
     }
-
-    <div class="logout-row">
-      <biggive-button
-        space-above="5"
-        colour-scheme="white"
-        label="Log out"
-        full-width="true"
-        size="medium"
-        rounded="false"
-        (click)="logout()"
-        />
-    </div>
   </div>
 </main>

src/app/my-account/my-account.component.scss

@@ -23,15 +23,6 @@ main > div {
   background-color: $colour-primary;
 }
 
-#logout {
-  width: 80%;
-  text-align: center;
-  margin: auto;
-  @media #{$breakpoint-lg} {
-    max-width: 10em;
-  }
-}
-
 .account-actions {
   display: flex;
   flex-wrap: wrap;
@@ -44,13 +35,6 @@ main > div {
   flex: 0 0 auto;
 }
 
-.logout-row {
-  display: flex;
-  align-items: flex-end;
-  justify-content: right;
-  gap: 17px;
-}
-
 table#personal-details, table#paymentMethods {
   width: 100%;
   td {

src/app/my-account/my-account.component.ts

@@ -91,11 +91,6 @@ export class MyAccountComponent implements OnDestroy, OnInit {
       );
   }
 
-  logout() {
-    this.identityService.logout();
-    void this.router.navigate(['']);
-  }
-
   deleteMethod(method: PaymentMethod) {
     this.paymentMethods = undefined;
 

src/app/transfer-funds/transfer-funds.component.html

@@ -1,11 +1,4 @@
 <main>
-  @if (donor) {
-    <div id="loggedInHeader">
-      <p>Logged in as {{ donor.first_name }} {{donor.last_name}}</p>
-      <button id="my-account-link" mat-raised-button routerLink="/my-account">My Account</button>
-      <button mat-raised-button (click)="logout()">Log out</button>
-    </div>
-  }
   <div class="b-container">
     <h3 class="b-rh-1 b-bold">Transfer Donation Funds</h3>
 

src/app/transfer-funds/transfer-funds.component.scss

@@ -1,19 +1,6 @@
 @use '@angular/material' as mat;
 @import '../../abstract';
 
-#loggedInHeader {
-    background-color: mat.m2-get-color-from-palette($donate-primary);
-    color: white;
-    margin: 0px;
-    padding: 10px 2rem;
-    display: flex;
-    justify-content: flex-end;
-
-    p {
-        margin: 0 1rem 0 0;
-    }
-}
-
 .auth-options {
     display: flex;
     justify-content: space-between;

src/app/transfer-funds/transfer-funds.component.ts

@@ -335,20 +335,6 @@ export class TransferFundsComponent implements AfterContentInit, OnInit {
     return Math.floor(creditAmount * (tipPercentage / 100));
   }
 
-  logout() {
-    this.donor = undefined;
-    this.isLoading = false;
-
-    this.accountHolderName = undefined;
-    this.accountNumber = undefined;
-    this.sortCode = undefined;
-
-    this.isPurchaseComplete = false;
-    this.creditForm.reset();
-    this.identityService.logout();
-    window.location.href = "/";
-  }
-
   cancelPendingTips() {
     this.donationService.cancelDonationFundsToCampaign(environment.creditTipsCampaign).subscribe(() => {
       // Theoretically this could be multiple tips, but in practice almost always 0 or 1, so singular is the less confusing copy.