machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[footer] dynamic CTA button based on login status

Browse Source
This commit is contained in:
nymkappa 2023-05-11 18:00:52 +02:00
parent 727d170c9c
commit 5846862d55
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/about/about.component.html
View File

@ -34,7 +34,7 @@
<h3 i18n="about.sponsors.enterprise.withRocket" class="mt-5">Support the Project</h3>
<div class="d-flex justify-content-center" style="max-width: 90%; margin: 35px auto 75px auto; column-gap: 15px">
<a href="/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)">Become a Sponsor!</a>
<a href="/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)">Become a Sponsor!</a>
</div>
<div class="enterprise-sponsor" id="enterprise-sponsors">

8
frontend/src/app/shared/components/global-footer/global-footer.component.html
View File

@ -14,8 +14,12 @@
<app-rate-unit-selector></app-rate-unit-selector>
</div>
<ng-template #temporaryHidden>
<a *ngIf="officialMempoolSpace" class="cta btn btn-purple sponsor" [routerLink]="['/signup' | relativeUrl]">Support the Project</a>
<p *ngIf="officialMempoolSpace && env.BASE_MODULE === 'mempool'" class="cta-secondary"><a [routerLink]="['/signin' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Sign In</a></p>
<div *ngIf="officialMempoolSpace" class="cta">
<div *ngIf="loggedIn" class="mb-1"><small>Logged in<span *ngIf="username"> as {{ username}}</span></small></div>
<a *ngIf="loggedIn" class="btn btn-purple sponsor" [routerLink]="['/login' | relativeUrl]">My account</a>
<a *ngIf="!loggedIn" class="btn btn-purple sponsor" [routerLink]="['/sponsor' | relativeUrl]">Support the Project</a>
</div>
<p *ngIf="!loggedIn && env.BASE_MODULE === 'mempool'" class="cta-secondary"><a [routerLink]="['/login' | relativeUrl]">Sign In</a></p>
</ng-template>
<p class="cta-secondary"><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
<p *ngIf="officialMempoolSpace && env.LIGHTNING" class="cta-secondary"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>

26
frontend/src/app/shared/components/global-footer/global-footer.component.ts
View File

@ -1,10 +1,13 @@
import { ChangeDetectionStrategy, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { Observable, merge, of, Subject } from 'rxjs';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable, merge, of, Subject, Subscription } from 'rxjs';
import { tap, takeUntil } from 'rxjs/operators';
import { Env, StateService } from '../../../services/state.service';
import { IBackendInfo } from '../../../interfaces/websocket.interface';
import { LanguageService } from '../../../services/language.service';
import { NavigationService } from '../../../services/navigation.service';
import { StorageService } from '../../../services/storage.service';
import { WebsocketService } from '../../../services/websocket.service';
@Component({
selector: 'app-global-footer',
@ -23,12 +26,19 @@ export class GlobalFooterComponent implements OnInit {
network$: Observable<string>;
networkPaths: { [network: string]: string };
currentNetwork = '';
loggedIn = false;
username = null;
urlSubscription: Subscription;
constructor(
public stateService: StateService,
private languageService: LanguageService,
private navigationService: NavigationService,
@Inject(LOCALE_ID) public locale: string,
private storageService: StorageService,
private route: ActivatedRoute,
private cd: ChangeDetectorRef,
private websocketService: WebsocketService
) {}
ngOnInit(): void {
@ -46,11 +56,23 @@ export class GlobalFooterComponent implements OnInit {
this.network$.pipe(takeUntil(this.destroy$)).subscribe((network) => {
this.currentNetwork = network;
});
this.urlSubscription = this.route.url.subscribe((url) => {
this.loggedIn = JSON.parse(this.storageService.getValue('auth')) !== null;
const auth = JSON.parse(this.storageService.getValue('auth'));
if (auth?.user?.username) {
this.username = auth.user.username;
} else {
this.username = null;
}
this.cd.markForCheck();
})
}
ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.complete();
this.urlSubscription.unsubscribe();
}
networkLink(network) {