ghostfolio/apps/client/src/app/pages/account/account-page.html

<div class="container">
  <div class="row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3" i18n>Account</h3>
    </div>
  </div>
  <div *ngIf="user?.settings" class="mb-5 row">
    <div class="col">
      <mat-card class="mb-3">
        <mat-card-content>
          <div *ngIf="user.alias" class="d-flex py-1">
            <div class="w-50" i18n>Alias</div>
            <div class="w-50">{{ user.alias }}</div>
          </div>
          <div *ngIf="user?.subscription" class="d-flex py-1">
            <div class="w-50" i18n>Membership</div>
            <div class="w-50">
              <div class="align-items-center d-flex mb-1">
                {{ user.subscription.type }}
              </div>
              <div *ngIf="user.subscription.expiresAt">
                Valid until {{ user.subscription.expiresAt | date:
                defaultDateFormat }}
              </div>
              <div
                *ngIf="hasPermissionForSubscription && !user.subscription.expiresAt"
              >
                <button
                  color="primary"
                  i18n
                  mat-flat-button
                  (click)="onCheckout(priceId)"
                >
                  Upgrade
                </button>
                <div *ngIf="price" class="mt-1">
                  {{ baseCurrency }}
                  <ng-container *ngIf="coupon"
                    >{{ price - coupon | number : '1.2-2' }}
                    <del>{{ price }}</del>
                  </ng-container>
                  <ng-container *ngIf="!coupon">{{ price }}</ng-container>
                  <span i18n> per year</span>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex mt-4 py-1">
            <div class="pt-4 w-50" i18n>Settings</div>
            <div class="w-50">
              <form #changeUserSettingsForm="ngForm">
                <mat-form-field appearance="outline" class="mb-3 w-100">
                  <mat-label i18n>Base Currency</mat-label>
                  <mat-select
                    name="baseCurrency"
                    [disabled]="!hasPermissionToUpdateUserSettings"
                    [value]="user.settings.baseCurrency"
                    (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
                  >
                    <mat-option
                      *ngFor="let currency of currencies"
                      [value]="currency"
                      >{{ currency }}</mat-option
                    >
                  </mat-select>
                </mat-form-field>
                <div class="align-items-center d-flex overflow-hidden">
                  <mat-form-field appearance="outline" class="flex-grow-1">
                    <mat-label i18n>View Mode</mat-label>
                    <mat-select
                      name="viewMode"
                      [disabled]="!hasPermissionToUpdateViewMode"
                      [value]="user.settings.viewMode"
                      (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
                    >
                      <mat-option value="DEFAULT">Default</mat-option>
                      <mat-option value="ZEN">Zen</mat-option>
                    </mat-select>
                  </mat-form-field>
                  <ion-icon
                    *ngIf="!hasPermissionToUpdateViewMode"
                    class="h5 mb-0 mx-3 text-muted"
                    name="diamond-outline"
                  ></ion-icon>
                </div>
              </form>
            </div>
          </div>
          <div class="align-items-center d-flex mt-4 py-1">
            <div class="w-50" i18n>Sign in with fingerprint</div>
            <div class="w-50">
              <mat-slide-toggle
                #toggleSignInWithFingerprintEnabledElement
                color="primary"
                [disabled]="!hasPermissionToUpdateUserSettings"
                (change)="onSignInWithFingerprintChange($event)"
              ></mat-slide-toggle>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div *ngIf="accesses?.length > 0" class="row">
    <div class="col">
      <h3 class="mb-3 text-center" i18n>Granted Access</h3>
      <gf-access-table [accesses]="accesses"></gf-access-table>
    </div>
  </div>
</div>