mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
11 KiB
278 lines
11 KiB
<div class="container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3 class="mb-3 text-center" 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="hasPermissionToUpdateUserSettings && 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">
|
|
<a [routerLink]="['/pricing']"
|
|
>{{ user?.subscription?.type }}</a
|
|
>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Premium'"
|
|
class="ml-1"
|
|
></gf-premium-indicator>
|
|
</div>
|
|
<div *ngIf="user?.subscription?.type === 'Premium'">
|
|
Valid until {{ user?.subscription?.expiresAt | date:
|
|
defaultDateFormat }}
|
|
</div>
|
|
<div *ngIf="user?.subscription?.type === 'Basic'">
|
|
<ng-container *ngIf="hasPermissionForSubscription">
|
|
<button
|
|
color="primary"
|
|
mat-flat-button
|
|
(click)="onCheckout(priceId)"
|
|
>
|
|
<ng-container i18n>Upgrade</ng-container>
|
|
</button>
|
|
<div *ngIf="price" class="mt-1">
|
|
<ng-container *ngIf="coupon"
|
|
><del class="text-muted"
|
|
>{{ baseCurrency }} {{ price }}</del
|
|
> {{ baseCurrency }} {{ price - coupon
|
|
}}</ng-container
|
|
>
|
|
<ng-container *ngIf="!coupon"
|
|
>{{ baseCurrency }} {{ price }}</ng-container
|
|
> <span i18n>per year</span>
|
|
</div>
|
|
</ng-container>
|
|
<a
|
|
*ngIf="!user?.subscription?.expiresAt"
|
|
class="mr-2 my-2"
|
|
mat-stroked-button
|
|
[href]="trySubscriptionMail"
|
|
><span i18n>Try Premium</span>
|
|
<gf-premium-indicator
|
|
class="d-inline-block ml-1"
|
|
[enableLink]="false"
|
|
></gf-premium-indicator
|
|
></a>
|
|
<a
|
|
class="mr-2 my-2"
|
|
i18n
|
|
mat-stroked-button
|
|
[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">
|
|
<ng-container i18n>Base Currency</ng-container>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-form-field
|
|
appearance="outline"
|
|
class="compact-with-outline w-100 without-hint"
|
|
>
|
|
<mat-select
|
|
name="baseCurrency"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
[value]="user.settings.baseCurrency"
|
|
(selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
|
|
>
|
|
<mat-option
|
|
*ngFor="let currency of currencies"
|
|
[value]="currency"
|
|
>{{ currency }}</mat-option
|
|
>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div class="align-items-center d-flex mb-2">
|
|
<div class="pr-1 w-50">
|
|
<div i18n>Language</div>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-form-field
|
|
appearance="outline"
|
|
class="compact-with-outline w-100 without-hint"
|
|
>
|
|
<mat-select
|
|
name="language"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
[value]="language"
|
|
(selectionChange)="onChangeUserSetting('language', $event.value)"
|
|
>
|
|
<mat-option [value]="null"></mat-option>
|
|
<mat-option value="de">Deutsch</mat-option>
|
|
<mat-option value="en">English</mat-option>
|
|
<mat-option value="es"
|
|
>Español (<ng-container i18n>Community</ng-container
|
|
>)</mat-option
|
|
>
|
|
<mat-option value="it"
|
|
>Italiano (<ng-container i18n>Community</ng-container
|
|
>)</mat-option
|
|
>
|
|
<mat-option value="nl"
|
|
>Nederlands (<ng-container i18n>Community</ng-container
|
|
>)</mat-option
|
|
>
|
|
<!--<mat-option value="pt"
|
|
>Português (<ng-container i18n>Community</ng-container
|
|
>)</mat-option
|
|
>-->
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div class="align-items-center d-flex mb-2">
|
|
<div class="pr-1 w-50">
|
|
<div i18n>Locale</div>
|
|
<div class="hint-text text-muted">
|
|
<ng-container i18n>Date and number format</ng-container>
|
|
</div>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-form-field
|
|
appearance="outline"
|
|
class="compact-with-outline w-100 without-hint"
|
|
>
|
|
<mat-select
|
|
name="locale"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
[value]="user.settings.locale"
|
|
(selectionChange)="onChangeUserSetting('locale', $event.value)"
|
|
>
|
|
<mat-option [value]="null"></mat-option>
|
|
<mat-option
|
|
*ngFor="let locale of locales"
|
|
[value]="locale"
|
|
>{{ locale }}</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">
|
|
<ng-container i18n>Appearance</ng-container>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-form-field
|
|
appearance="outline"
|
|
class="compact-with-outline w-100 without-hint"
|
|
>
|
|
<mat-select
|
|
class="with-placeholder-as-option"
|
|
name="colorScheme"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
[placeholder]="appearancePlaceholder"
|
|
[value]="user?.settings?.colorScheme"
|
|
(selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
|
|
>
|
|
<mat-option i18n [value]="null">Auto</mat-option>
|
|
<mat-option i18n value="LIGHT">Light</mat-option>
|
|
<mat-option i18n value="DARK">Dark</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="d-flex mt-4 py-1">
|
|
<div class="align-items-center d-flex pr-1 pt-1 w-50">
|
|
<ng-container i18n>Zen Mode</ng-container>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-slide-toggle
|
|
color="primary"
|
|
[checked]="user.settings.viewMode === 'ZEN'"
|
|
[disabled]="!hasPermissionToUpdateViewMode"
|
|
(change)="onViewModeChange($event)"
|
|
></mat-slide-toggle>
|
|
</div>
|
|
</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="hasPermissionToUpdateUserSettings && user?.subscription"
|
|
class="align-items-center d-flex mt-4 py-1"
|
|
>
|
|
<div class="pr-1 w-50">
|
|
<div i18n>Experimental Features</div>
|
|
</div>
|
|
<div class="pl-1 w-50">
|
|
<mat-slide-toggle
|
|
color="primary"
|
|
[checked]="user.settings.isExperimentalFeatures"
|
|
[disabled]="!hasPermissionToUpdateUserSettings"
|
|
(change)="onExperimentalFeaturesChange($event)"
|
|
></mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
<div class="align-items-center d-flex mt-4 py-1">
|
|
<div class="pr-1 w-50" i18n>User ID</div>
|
|
<div class="pl-1 w-50">{{ user?.id }}</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
|
|
[queryParams]="{ createDialog: true }"
|
|
[routerLink]="[]"
|
|
>
|
|
<ion-icon name="add-outline" size="large"></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|