All files / src/app/shell/header/login-status login-status.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ng-container *ngIf="logoutOnly; else loginStatus">
  <ng-container *ngIf="user$ | async as user; else notLoggedIn">
    <a routerLink="/logout" data-testing-id="link-logout" [attr.aria-label]="'account.logout.link' | translate">
      <fa-icon [icon]="['fas', 'user']" class="header-icon" />
      <span *ngIf="view !== 'small'">{{ 'account.logout.link' | translate }}</span>
    </a>
  </ng-container>
  <ng-template #notLoggedIn> &nbsp; </ng-template>
</ng-container>
 
<ng-template #loginStatus>
  <!-- logged in -->
  <ng-container *ngIf="user$ | async as user; else notLoggedIn">
    <a
      routerLink="/account"
      class="my-account-link sticky-header-icon"
      data-testing-id="link-myaccount"
      [attr.aria-label]="'account.go_to_account.aria_label' | translate"
    >
      <fa-icon [icon]="['fas', 'user']" class="header-icon" />
      <span *ngIf="user.lastName; else nameNotDisplayed" class="login-name" [ngClass]="getViewClasses()">{{
        user.firstName + ' ' + user.lastName
      }}</span>
      <ng-template #nameNotDisplayed
        ><span class="login-name" [ngClass]="getViewClasses()">{{
          'account.login_status.myaccount.link' | translate
        }}</span></ng-template
      >
    </a>
    <span class="separator" [ngClass]="getViewClasses()">&#124;</span>
    <a
      routerLink="/logout"
      class="my-account-link my-account-logout"
      data-testing-id="link-logout"
      [attr.aria-label]="'account.logout.link' | translate"
      [ngClass]="getViewClasses()"
    >
      <span>{{ 'account.logout.link' | translate }}</span>
    </a>
  </ng-container>
  <!-- not logged in -->
  <ng-template #notLoggedIn>
    <a
      routerLink="/login"
      [queryParams]="{ returnUrl: '/account' }"
      class="my-account-link my-account-login sticky-header-icon"
      rel="nofollow"
      [attr.aria-label]="'account.login.link' | translate"
    >
      <fa-icon [icon]="['fas', 'user']" class="header-icon" />
      <span [ngClass]="getViewClasses()">{{ 'account.login.link' | translate }}</span>
    </a>
    <span class="separator" [ngClass]="getViewClasses()">&#124;</span
    ><a
      routerLink="/register"
      [queryParams]="{ returnUrl: '/account' }"
      class="my-account-link my-account-register"
      rel="nofollow"
      [attr.aria-label]="'account.register.link' | translate"
      [ngClass]="getViewClasses()"
      ><span>{{ 'account.register.link' | translate }}</span>
    </a>
  </ng-template>
</ng-template>