From f93cbfaf494ab3e61310c446a8b0cc2872f93e23 Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Tue, 17 Dec 2024 12:21:06 +0000 Subject: [PATCH 1/7] DON-1065: Act-on logout click event from new menu item --- src/app/app.component.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 278a8ac28..5ca44e9f1 100644 --- a/src/app/app.component.ts +++ b/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) { From 86595c9d48770b094befff0099e18a101cc71baa Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Tue, 17 Dec 2024 12:28:23 +0000 Subject: [PATCH 2/7] DON-1065: Remove logout button from "my-account" (will be replaced by menu item) --- src/app/my-account/my-account.component.html | 12 ------------ src/app/my-account/my-account.component.scss | 16 ---------------- src/app/my-account/my-account.component.ts | 5 ----- 3 files changed, 33 deletions(-) diff --git a/src/app/my-account/my-account.component.html b/src/app/my-account/my-account.component.html index 342761536..3672aedbc 100644 --- a/src/app/my-account/my-account.component.html +++ b/src/app/my-account/my-account.component.html @@ -159,17 +159,5 @@

} } - -
- -
diff --git a/src/app/my-account/my-account.component.scss b/src/app/my-account/my-account.component.scss index a54633a01..ed6da57c1 100644 --- a/src/app/my-account/my-account.component.scss +++ b/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 { diff --git a/src/app/my-account/my-account.component.ts b/src/app/my-account/my-account.component.ts index be5098658..dfb3264b8 100644 --- a/src/app/my-account/my-account.component.ts +++ b/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; From c017724debe051ffe054d3cd66fc96706378ca83 Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Tue, 17 Dec 2024 12:28:49 +0000 Subject: [PATCH 3/7] DON-1065: Remove login status / logout from transfer funds form (will be replaced by menu item) --- .../transfer-funds/transfer-funds.component.html | 7 ------- .../transfer-funds/transfer-funds.component.scss | 13 ------------- src/app/transfer-funds/transfer-funds.component.ts | 14 -------------- 3 files changed, 34 deletions(-) diff --git a/src/app/transfer-funds/transfer-funds.component.html b/src/app/transfer-funds/transfer-funds.component.html index 6bee4333f..f761a182a 100644 --- a/src/app/transfer-funds/transfer-funds.component.html +++ b/src/app/transfer-funds/transfer-funds.component.html @@ -1,11 +1,4 @@
- @if (donor) { -
-

Logged in as {{ donor.first_name }} {{donor.last_name}}

- - -
- }

Transfer Donation Funds

diff --git a/src/app/transfer-funds/transfer-funds.component.scss b/src/app/transfer-funds/transfer-funds.component.scss index a6935987b..24a6442d6 100644 --- a/src/app/transfer-funds/transfer-funds.component.scss +++ b/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; diff --git a/src/app/transfer-funds/transfer-funds.component.ts b/src/app/transfer-funds/transfer-funds.component.ts index ad11584e7..693621442 100644 --- a/src/app/transfer-funds/transfer-funds.component.ts +++ b/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. From bb245f05110f21a9bfa53aa188e7c1e83ab5703c Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Tue, 17 Dec 2024 12:55:53 +0000 Subject: [PATCH 4/7] DON-1065: Set IS_LOGGED_IN cookie for wordpress to detect and show appropriate menu variant --- src/app/identity.service.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/app/identity.service.ts b/src/app/identity.service.ts index fbcf21243..5ba7781be 100644 --- a/src/app/identity.service.ts +++ b/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('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,17 @@ export class IdentityService { saveJWT(id: string, jwt: string) { const daysTilExpiry = 1; this.cookieService.set(this.cookieName, JSON.stringify({id, jwt}), daysTilExpiry, '/'); + 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 { From e8adb66969e83bfe46c234e6c3d220ed1819ef04 Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Wed, 18 Dec 2024 12:12:54 +0000 Subject: [PATCH 5/7] DON-1065: Add logout route handler --- src/app/app-routing.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/app/app-routing.ts b/src/app/app-routing.ts index bfd9cc5d6..2f58d7e07 100644 --- a/src/app/app-routing.ts +++ b/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', From ea39aec0e2fe845270f92ec5888018dda34b1c91 Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Wed, 18 Dec 2024 12:14:55 +0000 Subject: [PATCH 6/7] DON-1065: Update components to get new logout menu item --- package-lock.json | 17 ++++++++--------- package.json | 4 ++-- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index d910b1f8c..d68c0a8db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,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", @@ -2931,10 +2931,9 @@ } }, "node_modules/@biggive/components": { - "version": "202412041511.0.0", - "resolved": "https://registry.npmjs.org/@biggive/components/-/components-202412041511.0.0.tgz", - "integrity": "sha512-Ajj2aHJPEyKxGtAfpZBSddKRxxVi/XArYQNIjTg9HyvPopGJdXOa5KCwOVzxdkbBM7vBBR1BUojgTKYpempezA==", - "license": "MIT", + "version": "202412181130.0.0", + "resolved": "https://registry.npmjs.org/@biggive/components/-/components-202412181130.0.0.tgz", + "integrity": "sha512-6RH0tg+DQ3Ufv4Wa1szYfaYYgQxSLTNCM82IBfPIt/cLIwOHIMcZrDm8Yyyk4hozcksJsKsiMNYSdMn53utSKw==", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/free-brands-svg-icons": "^6.6.0", @@ -2946,9 +2945,9 @@ } }, "node_modules/@biggive/components-angular": { - "version": "202412041511.0.0", - "resolved": "https://registry.npmjs.org/@biggive/components-angular/-/components-angular-202412041511.0.0.tgz", - "integrity": "sha512-GJtp3i8NMBV7N/wr7ktYe7bdPTIlvk8TaMJTxxV9SBZoK6QHB8IjRU1sCVt47PRf/0THwNqQPIGvTE7xRFXVWA==", + "version": "202412181130.0.0", + "resolved": "https://registry.npmjs.org/@biggive/components-angular/-/components-angular-202412181130.0.0.tgz", + "integrity": "sha512-+VPQQuJ6vbYKOyvtKUcCE0rJ+c5dPWsT+pZQfAqd2yTdToKqOwiKRYBjBHF21eG5U4fHyu4kiUT2Du8Ow7atpA==", "dependencies": { "tslib": "^2.6.2" }, diff --git a/package.json b/package.json index f3cd3e548..a54a1c306 100644 --- a/package.json +++ b/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", From 711553f6aba4f25af36dc09e45184327bcebbc1c Mon Sep 17 00:00:00 2001 From: Barney Laurance Date: Wed, 18 Dec 2024 12:17:33 +0000 Subject: [PATCH 7/7] DON-1065: Make login menu variant on WP consistent with variant used here I.e. don't show users as logged in if they have not set a password. --- src/app/identity.service.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/identity.service.ts b/src/app/identity.service.ts index 5ba7781be..9433f5817 100644 --- a/src/app/identity.service.ts +++ b/src/app/identity.service.ts @@ -214,7 +214,9 @@ export class IdentityService { saveJWT(id: string, jwt: string) { const daysTilExpiry = 1; this.cookieService.set(this.cookieName, JSON.stringify({id, jwt}), daysTilExpiry, '/'); - this.cookieService.set(this.isLoggedInCookieName, 'true', daysTilExpiry, '/', this.domainSharedWithWordpress()); + if (this.probablyHaveLoggedInPerson()) { + this.cookieService.set(this.isLoggedInCookieName, 'true', daysTilExpiry, '/', this.domainSharedWithWordpress()); + } } private domainSharedWithWordpress() {