182 lines
6.8 KiB
HTML
182 lines
6.8 KiB
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="pr-1 w-50" i18n>Alias</div>
|
|
<div class="pl-1 w-50">{{ user.alias }}</div>
|
|
</div>
|
|
<div *ngIf="user?.subscription" class="d-flex py-1">
|
|
<div class="pr-1 w-50" i18n>Membership</div>
|
|
<div class="pl-1 w-50">
|
|
<div class="align-items-center d-flex mb-1">
|
|
{{ user?.subscription?.type }}
|
|
<ion-icon
|
|
*ngIf="user?.subscription?.type === 'Premium'"
|
|
class="ml-1 text-muted"
|
|
name="diamond-outline"
|
|
></ion-icon>
|
|
</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>
|
|
<a
|
|
class="cursor-pointer d-block mt-2"
|
|
i18n
|
|
[routerLink]=""
|
|
(click)="onRedeemCoupon()"
|
|
>Redeem Coupon</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="align-items-center d-flex mt-4 py-1">
|
|
<div class="pr-1 w-50">
|
|
<div i18n>Presenter View</div>
|
|
<div class="hint-text text-muted" i18n>
|
|
Hides sensitive values such as absolute performances and
|
|
quantities.
|
|
</div>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-slide-toggle
|
|
color="primary"
|
|
[checked]="user.settings.isRestrictedView"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
(change)="onRestrictedViewChange($event)"
|
|
></mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-4 py-1">
|
|
<form #changeUserSettingsForm="ngForm" class="w-100">
|
|
<div class="d-flex mb-2">
|
|
<div class="align-items-center d-flex pt-1 pt-1 w-50" i18n>
|
|
Base Currency
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<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>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="align-items-center d-flex pr-1 pt-1 w-50" i18n>
|
|
View Mode
|
|
<ion-icon
|
|
*ngIf="!hasPermissionToUpdateViewMode"
|
|
class="mx-1 text-muted"
|
|
name="diamond-outline"
|
|
></ion-icon>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<div class="align-items-center d-flex overflow-hidden">
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="align-items-center d-flex mt-4 py-1">
|
|
<div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-slide-toggle
|
|
#toggleSignInWithFingerprintEnabledElement
|
|
color="primary"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
(change)="onSignInWithFingerprintChange($event)"
|
|
></mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
<div
|
|
*ngIf="user?.subscription"
|
|
class="align-items-center d-flex mt-4 py-1"
|
|
>
|
|
<div class="pr-1 w-50">
|
|
<div i18n>New Calculation Engine</div>
|
|
<div class="hint-text text-muted" i18n>Experimental</div>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-slide-toggle
|
|
color="primary"
|
|
[checked]="user.settings.isNewCalculationEngine"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
(change)="onNewCalculationChange($event)"
|
|
></mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3 class="mb-3 text-center" i18n>Granted Access</h3>
|
|
<gf-access-table
|
|
[accesses]="accesses"
|
|
[showActions]="hasPermissionToDeleteAccess"
|
|
(accessDeleted)="onDeleteAccess($event)"
|
|
></gf-access-table>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="hasPermissionToCreateAccess" class="fab-container">
|
|
<a
|
|
class="align-items-center d-flex justify-content-center"
|
|
color="primary"
|
|
mat-fab
|
|
[routerLink]="[]"
|
|
[queryParams]="{ createDialog: true }"
|
|
>
|
|
<ion-icon name="add-outline" size="large"></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|